Instalar SASS en Windows

SASS, junto con LESS, es una manera de llevar las ventajas de la programación a CSS, dándonos las ventajas del uso de variables o de subclases. En este link podéis leer una buena comparativa entre ambos.

Por nuestra parte, simplemente os echamos una mano para instalar vuestro SASS en Windows para empezar a utilizarlo.

Con RUBY

SASS está escrito en Ruby, de manera que para instalar SASS en nuestro sistema necesitamos primero instalar Ruby (aunque hace poco han sacado http://sass-lang.com/libsass como un puerto C/C++ para Sass). Instalamos Ruby desde su oágina oficial.

Una vez instalado podemos ir a la consola de Windows e instalar Sass desde gem, el gestor de packages de Ruby:

gem install sass

Para asegurarnos de que todo ha ido bien consultamos la versión instalada de sass:

sass -v

que nos tiene que dar, en el momento de este tutorial:

sass 3.4.7 (Selective Steve)

En el caso de que tengamos sass pero queramos actualizarlo a la última versión:

gem update sass

Con Node

Recientemente tenemos la posibilidad de instalar SASS mediante npm:

npm install node-sass

Cambiar el look del scroll: cómo configurar NiceScroll

Una de las mejoras de diseño que tarde o temprano queremos aplicar es un cambio de look al scroll. Para hacerlo bien no hay más, de momento, que aplicar javascript, y el mejor plugin que hay, o uno de los mejores, es el plugin de jQuery NiceScroll.

Para quien está habituado a trabajar con jQuery este pliugin es muy fácil, pero para los diseñadores que no necesariamente conocen jQuery o han trabajado nunca con él, puede resultar confuso. Estos puntos tratan de aclarar esa confusión, sin entrar en teoría:

1) Id a la página de descarga del plugin de NiceScroll.

2) Buscad la última versión

Imagen de la última versión funcional de la página de descarga de NiceScroll

Última versión funcional

Aseguraos de que no os bajáis la versión beta (en el momento del tutorial la útlima versión funcional es la 3.4 y la beta es la 3.5).

3) En el fichero hay muchos archivos, archivos de ejemplo, etc. A nosotros sólo nos interesa: jquery.nicescroll.js.

4) Una vez hemos bajado el plugin, tenemos que incluirlo en la página junto con el jQuery. Para ello en <head> ponemos primero el link al jQuery y después el link a nuestro archivo jquery.nicescroll.js:

<head>
    ...
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.0.0.min.js"></script>
    <script src="jquery.nicescroll.js"></script>
</head>

Es importante poner primero el link a jQuery, sino no funcionaría el plugin.

5) En la página de NiceScroll, abajo, tenéis los ejemplos para empezar. Nos fijamos en el primero, que sirve para cambiar el scroll de toda la página, que es lo que en principio buscamos. Para ello, copiamos este código y lo ponemos al final, justo antes de cerrar el </body>:

<script type="text/javascript">
   $(document).ready(
      function() { 
         $("html").niceScroll();
      }
   );
</script>

Este código aplica nuestro plugin al html, es decir, a todo el contenedor de nuestro html.

6) Recordad que para probarlo tenéis que tener suficiente contenido como para que se muestre el scroll, de manera que no va mal un poco de Lorem ipsum.

!Y ya está! Os dejo el código completo y funcional (recordad poner el archivo jquery.nicescroll.js en el mismo directorio que el .html del ejemplo para que éste funcione):

 

 

Entendiendo display, float y positions en CSS


Primer concepto: page flow

El HTML se basa en etiquetas. Cada etiqueta ocupa un espacio en la página web, al que se llama caja. Por defecto cada caja ocupa el alto de lo que contiene y el 100% de ancho. Por lo tanto, cada caja se situa debajo del anterior.

Este es un tag normal de HTML

Este es otro tag normal de HTML

Incluso si incluimos un width pequeño, aunque veamos el tag de cierta manera, la caja de ese tag estará ocupando el 100%.

Este es un tag normal de HTML con width al 50%

Este es otro tag normal de HTML al 45%

Aunque pongamos los width de los dos tags de manera que ambos sumen menos de 100%, seguirán el uno debajo del otro, pues la caja de cada tag sigue ocupando el 100%, como vemos si pasamos el selector en el Developer Tools.

ejemplo del 100% de una tag HTML

Para romper esta tendencia tenemos dos maneras: o cambiar el display del tag HTML o posicionarlo

Display

La propiedad display de CSS cambia la manera en que esa caja se muestra. Hay varios. Podéis ver la lista completa con explicaciones en w3schools. Básicamente, el display permite que se rompa la regla de que la caja del HTML ocupe el 100% del lugar en que está y pasa a adaptarse a lo que contiene.
Los principales son:

  • inline: muestra el elemento dentro del inline (como <span>), es decir, haciendo que la caja se adapte a lo que contiene pero que siga inline. Respeta margins y paddings left y right pero no top ni bottom; no permite height ni width, y permite a otros elementos estar a su derecha o a su izquierda.
  • block: muestra un elemento como un bloque contenedor (como <p>), haciendo que la caja se adapte a lo que contiene pero sigue ocupando todo el 100%. Permite width y height, y todos los margin y padding.
  • inline-block: muestra un elemento que actúa como un bloque contenedor pero que se mantiene dentro del inline; el interior del bloque está formateado como un bloque inline, la parte exterior está formateada como un bloque, y el elemento en sí como una caja inline. Permite a otros elementos estar a su derecha o a su izquierda. Permite width y height, y todos los margin y padding.
  • none: el elemento no se muestra y desaparece la caja del espacio que ocupaba.
  • todos los relacionado con table
display: inline
display: inline
display: inline

display: block
display: block
display: block

display: inline-block
display: inline-block
display: inline-block

Float

Para romper la tendencia natural de las cajas de los tags HTML, a menudo tenemos suficiente con displays. Pero a veces nos interesa que cierto elemento se situe a la izquierda o a la derecha de su contenedor y que el resto de elementos floten a su alrededor. Es el caso, por ejemplo, de las imagenes que deben estar rodeadas de texto.

La propiedad float de CSS admite height y width, se adapta al contenido y float todo a la derecha o a la izquierda del contenedor. El resto de elementos que están situados después de él lo rodean.

texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes
probando float
texto después texto después texto después texto después texto después texto después texto después texto después texto después texto después texto después texto después texto después

texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes
probando float
texto después texto

texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes
probando float
texto después texto después texto después texto después texto después texto después texto después texto después texto después texto después texto después texto después texto después

Si nos fijamos en el ejemplo, veremos que el resto de elementos que viene después de un float se sitúan también rodeando el elemento:

la propiedad float afecta a todos los elementos que vienen detrás

Cuando queremos romper esa inercia, le damos al elemento que queremos que no entre en el float la propiedad clear.

texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes
probando float
texto después texto

texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes
probando float
texto después texto después texto después texto después texto después texto después texto después texto después texto después texto después texto después texto después texto después

La propiedad float se ha ido usando tradicionalmente para construir layouts de diversas columnas, aunque cada vez más se utiliza la propiedad display:inline-block para hacerlo. Aquí tenéis una defensa del vs inline-block seguida de una interesante discusión.

Position

Uno de los cambios que aportó el CSS respecto a las primeras páginas web fue la capacidad no ya de mostrar de una manera u otra las cajas, sino de situarlas en relación unas con otras. Las positions son quizás el aspecto más complejo del layout en CSS, pero también el más útil.

La lista de reglas y comportamientos, las posibilidades combinatorias o las excepciones, todo son listas largas y complejas. Sin embargo, para iniciar una aproximación, puede resultar útil este primer vistazo:

  • position:static ⇒ es la posición por defecto en el page flow
  • position:relative ⇒ el elemento se posiciona respecto a sí mismo
  • position:absolute ⇒ el elemento se posiciona respecto a un padre a su vez posicionado
  • position:fixed ⇒ el elemento se posiciona respecto al viewport

position: static

Es la posición por defecto. Se situa respecto a los demás elementos según el page flow. Normalmente el posicionamiento se efectúa a través de las propiedades top, bottom, left y right, que indican la distancia entre el elemento situado relative y su sibling.

Container 1
STATIC
Container 2
STATIC
Container 3
STATIC

Texto situado al final del page flow

position: relative

Los elementos se posicionan en relación a su posición original. Los tags se mueven, pero se mantiene la posición original de la caja, ocupando el mismo lugar en el page flow (en el ejemplo el texto sigue en la misma posición porque las cajas soguen ocupando el lugar).

Container 1
RELATIVE
left: 0;
Container 2
RELATIVE
top: -80px;
left: 50px;
Container 3
RELATIVE
top: -160px;
left: 100px;

Texto situado al final del page flow

Esta técnica se utiliza también para establecer relaciones entre siblings (hermanos, elementos que están en un mismo nivel).

position: absolute

Los elementos se posicionan en relación a un parent (padre, el elemento contenedor) que esté posicionado (si no está posicionado, se le puede incluir position:relative para que los child o hijos se posicionen absolute).

Container 1
ABSOLUTE
top: 20px;
left: 0;
Container 2
ABSOLUTE
top: 20px;
left: 150px;
Container 3
ABSOLUTE
top: 20px;
left: 300px;

Texto situado al final del page flow

Texto debajo del div relative siguiendo el page flow.

Los elementos posicionados absolute y sus cajas desaparecen de su posición original en el page flow y pasan a flotar.

position: fixed

Los elementos se posicionan en relación al viewport (esto es, en relación a la ventana del navegador).

Container 1
FIXED
top: 0;
left: 0;
Container 2
FIXED
top: 0;
left: 150px;
Container 3
FIXED
top: 0;
left: 300px;

Haz click aquí para ver los divs posicionados fixed

Texto situado al final del page flow


Cómo probar nuestros diseños web responsive

Idealmente en cada uno de los dispositivos directamente; pero por desgracia cada vez es más complejo, si no ya imposible, poder hacerlo. De manera que, en un primer estadio, sí podemos contentarnos con aumentar y rabajar el ancho y alto de nuestro navegador. Pero en un estadio más avanzado, junto con todos los dispositivos con los que podamos, debemos tirar de otras herramientas.

Aquí os presentamos algunas de ellas.

Screenfly

Sencilla pero potente, para hacerse una rápida idea de cómo quedará nuestra web responsive en determinados dispositivos y con pocas pero, según como, suficientes herramientas de personalización, como ancho y alto personalizados, rotación o barra de desplazamiento.

Screenfly

Screenfly

 

Viewport Resizer

Parecida a la anterior pero actúa como componente del navegador y permite agilizar el redimensionamiento de la página y las diversas opciones. Para utilizarlo:

  1. Abrir la página a testear
  2. En otra pestaña abrir el Viewport Resizer
  3. Arrastrar la imagen azul de ‘Click or Bookmark’ y ponedla sobre la pestaña de vuestra página
  4. Ir a la página y probar las herramientas responsive arriba
Viewport Resizer

Viewport Resizer

 

The Responsinator

Un veterano, que ya hemos analizado en nuestro post sobre recursos web, y que permite de un vistazo hacerse una idea de cómo queda nuestra página en varios dispositivos. Recomendable si se quiere en un momento llevarse una rápida impresión.

Responsinator

Responsinator

 

Mobile Phone Emulator

Una de las muchas aplicaciones que, además de rendrizar el viewport a los píxeles de cada dispositivo móbil, aplican una skin del aparato a la vista, lo cual, especialmente para presentaciones a clientes o para muestras comerciales, es muy útil. Se echa en falta, eso sí, algo más de variedad, pero la presentación es impecable.

Mobile Phone Emulator

Mobile Phone Emulator

 

media queries en CSS3 de una vez por todas

Una media query consiste en un media type y en 0 o más expresiones que comprueban las condiciones de media features particulares, entre las cuales width, height o color, y lanzan un true o false según si se cumplen o no.
Si estas condiciones se cumplen, el contenido de estas media queries se aplica, si no, no.

Para elaborar este tutorial nos hemos basado principalmente en las indicaciones oficiales sobre media queries de W3.

 

@media types

Utilizando los media types podemos establecer diferentes estilos dependiendo del medio en que se esté mostrando nuestra página. Son:

  • all – used for all media type devices
  • speech – used for speech and sound synthesizers
  • braille – used for braille tactile feedback devices
  • embossed – used for paged braille printers
  • handheld – used for small or handheld devices
  • print – used for printers
  • projection – used for projected presentations, like slides
  • screen – used for computer screens
  • tty – used for media using a fixed-pitch character grid, like teletypes and terminals
  • tv – used for television-type devices

Podemos definirlos en el header como links o dentro de los estilos:

<link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css">
<link rel="stylesheet" type="text/css" media="print" href="serif.css">
@media screen {
* { font-family: sans-serif }
}

Para establecer una relación entre los media types y los media featuires que se les puede aplicar debemos tener en cuenta esta tabla de www.w3.org entre media types y media groups:

Media Types Media Groups
 continuous/paged  visual/audio/speech/tactile  grid/bitmap  interactive/static
braille continuous tactile grid both
embossed paged tactile grid static
handheld both visual, audio, speech both both
print paged visual bitmap static
projection paged visual bitmap interactive
screen continuous visual, audio bitmap both
speech continuous speech N/A both
tty continuous visual grid both
tv both visual, audio bitmap both

Elementos de expresión

En la sintaxis de media queries una coma representa OR y el and respresenta AND.
NOT se expresa mediante not al principio de la media query:

<link rel="stylesheet" media="not screen and (color)" href="example.css" />

 

Shorthands

Si una media expression se refiere a all, no es necesario especificarlo:

@media (orientation: portrait) { … }
@media all and (orientation: portrait) { … }

Se puede combinar varias media queries en una media query list:

@media screen and (color), projection and (color) { … }

 

@media features

Son las expresiones de una media query, que pueden ser 0 o más, y que comprueban diferentes tipos de características valorándose mediante true o false. Por ejemplo para cargar determinada .css si se muestra el contenido por una pantalla en color:

<link rel="stylesheet" type="text/css" media="screen and (color)" href="sample.css">

Son las siguientes:

  • width
  • height
  • device-width
  • device-height
  • orientation
  • aspect-ratio
  • device-aspect-ratio
  • color
  • color-index
  • monochrome
  • resolution
  • scan
  • grid

 

width

Se aplica a media types visuales o táctiles.
Describe el ancho del área en que se muestra nuestra página del aparato de salida.
Este media query establece que se aplicará el estilo en impresiones más anchas de 25cm:

<link rel="stylesheet" media="print and (min-width: 25cm)" href="http://…" />

Este media query establece que se aplicará el estilo en aparatos con un viewport (la parte de la pantalla o papel en la que el documento se muestra) de anchura de entre 400px y 700px:

@media screen and (min-width: 400px) and (max-width: 700px) { … }

Este media query establece que se aplicará el estilo en pantallas o handled con anchura de viewport mayor de 20em (o veinte veces el tamaño inicial del font-size):

@media handheld and (min-width: 20em), screen and (min-width: 20em) { … }

height

Se aplica a todos los media types visuales o táctiles.
Describe el alto del área del aparato o medio en que se muestra nuestra página.

device-width

Se aplica a todos los media types visuales o táctiles.
Describe el ancho del aparato o medio en que se muestra nuestra página.
Por ejemplo, este media query establece que se aplicará el estilo en pantallas que muestren 800px:

@media screen and (device-width: 800px) { … }

device-height

Se aplica a todos los media types visuales o táctiles.
Describe el alto del aparato o medio en que se muestra nuestra página.

orientation

Se aplica a todos los bitmap media types.
La característica orientation es portrait cuando el valor de la media feature height es mayor o igual que el valor de la media feature width; si no, orientation es landscape:

@media all and (orientation:portrait) { … }
@media all and (orientation:landscape) { … }

aspect-ratio

Se aplica a todos los bitmap media types.
Se define como la proporción entre el valor del media feature width y el valor del media feature height.

device-aspect-ratio

Se aplica a todos los bitmap media types.
Se define como la proporción entre el valor del media feature device-width y el valor del media feature device-height:

@media screen and (device-aspect-ratio: 16/9) { … }
@media screen and (device-aspect-ratio: 1280/720) { … }

color

Se aplica a todos los media types visuales.
Describe el número de bits por componente de color del aparato; si el aparato no es en color, el valor es cero:

@media all and (color) { … }
@media all and (min-color: 1) { … }

color-index

Se aplica a todos los media types visuales.
Describe el número de entradas en la tabla de colores del aparato; si el aparato no usa tabla de colores el valor es cero.

@media all and (color-index) { … }
@media all and (min-color-index: 256) { … }

monochrome

Se aplica a todos los media types visuales.
Describe el número de bits por píxel en una memoria de vídeo monocromática; si el aparato no es monocromático el valor es cero.

@media all and (min-monochrome: 2) { … }
<link rel="stylesheet" media="print and (color)" href="http://…" />
<link rel="stylesheet" media="print and (monochrome)" href="http://…" />

resolution

Se aplica a todos los bitmap media types.
Describe la resolución (densidad de píxeles) del aparato de salida (hay que utilizar min- y max- con los aparatos con píxeles no cuadrados):

@media print and (min-resolution: 300dpi) { … }

scan

Se aplica a todos los media types tipo tv.
Describe el proceso de digitalización en tv:

@media tv and (scan: progressive) { … }

grid

Se aplica a todos los media types visuales o táctiles.
Se utiliza para detecatr si el aparato de salida es grid o bitmap; si el aparato se basa en grid (un terminal tty o un teléfono con pantalla con solo una fuetne fija) el valor es 1, si no, es 0:

media handheld and (grid) and (max-width: 15em) { … }
@media handheld and (grid) and (device-max-height: 7em) { … }

 

Diseño Web: 10 recursos on-line imprescindibles

Como diseñador web, una de las cosas que agradezco de vez en cuando es una lista, decálogo o pentálogo, de recursos para mejorar mi trabajo. Normalmente siempre se puede sacar algo de ellos. En agradecimiento, pongo aquí diez de las utilidades que uso a menudo en mi trabajo, por si alguien no las conociera. Si así fuera, os recomiendo que las probéis.
Continue reading

Texturas gratis: un regalo

A veces se trata de practicar, y de ofrecer gratuitamente aquello con lo que uno aprende. No sólo porque no es honesto pedir dinero por algo que apenas si lo vale, sino también porque, con suerte y buena voluntad, uno podrá cobrar consejos, críticas, y quién sabe si alientos.

Por ello el post de hoy sólo es para anunciar que he iniciado una sección de texturas pensadas para páginas web o para utilizar imágenes descriptivas, algunas de las cuales ya han sido utilizadas con anterioridad.

Echadles un vistazo, utilizad las que queráis (sólo pido una mención, o un consejo, o una crítica) y espero que os gusten!
Continue reading

Plugins de WordPress: los 5 mejores

Plugins de WordPress: Sí, pero ¿cuáles?

Esta es una de las preguntas que nos hemos hecho todos al empezar (en serio) nuestro primer blog en WordPress. Muchos plugins, mucha oferta, y en todas partes se habla de lo indispensables que son. Pero, ¿cuáles son los indispenables? ¿Qué plugins de WordPress necesito?

Para echar una mano a los que empiezan, y para que podáis opinar también en este espacio, he decidido hacer una lista con los 5 plugins sin los que ya no inicio ni siquiera un blog de prueba.

Ahí va, pues, mi experiencia hasta ahora. Tampoco tiene mucho secreto, porque coincido con la mayoría, y en todos los casos menos con Jetpack, por propia experiencia. Pero, por favor: ¡opinad lo contrario en este espacio, si conocéis otros más imprescindibles!
Continue reading

Cómo crear un layout básico para un proyecto PhoneGap con jQuery Mobile

En este pequeño tutorial se os muestra un ejemplo básico de layout con jQuery Mobile. Es sencillo, pero no debemos olvidar los dos apartados que debemos tener siempre en cuenta: una buena configuración y una buena comprensión de la arquitectura. En este tutorial abordamos ambas cosas.

jQuery Mobile: configuración

Id a http://jquerymobile.com/download/ y bajaos el código en .zip (a no ser que queráis utilizar Content Distribution Network (CDN), aunque no es recomendable si no estamos seguros de tener siempre internet).
Continue reading