Octuweb, 22 días aprendiendo

octuweb

Vuelve Octuweb con su mes favorito y nos vuelve a regalar, esta vez, 22 artículos de 22 genios del diseño que comparten su experiencia y sus conocimientos para que aprendamos un poco más sobre diseño web y sobre todo CSS.

Este proyecto, que cumple con la curiosidad de celebrar en el mes de Octubre una vorágine de artículos de expertos diseñadores, repite experiencia después de que el año pasado fuese todo un éxito y pudiésemos disfrutar de relatos de verdaderos expertos en la materia que revelan sus trucos y sus consejos.

Si el año pasado pudimos disfrutar de los artículos de algunos reputados diseñadores, como Martín Iglesias y sus tablas responsives, Jorge Aznar, Alejandro AR, etc. Este año vuelven a traer a gente reputado en esto del CSS como es el caso de Naiara Abaroa, que ya ha tenido su turno con un gran artículo sobre trabajar con CSS en 2015, repite gente como es el caso de Jorge Aznar y otros muchos con los que podremos aprender un poco más sobre diseño web.

Así que ya sabes, Octubre cargado de buenos artículos casi diarios desde Octuweb.


Recursos para diseñadores web

HTML y CSS

Diseñar una web es una tarea bastante compleja y más si no contamos con recursos suficientes que nos faciliten la tarea con algunos elementos básicos de una web como pueden ser los fondos, los colores o las fuentes.

Algunas webs nos ofrecen soluciones para esos tres elementos básicos a la hora de conseguir una web con un diseño atractivo. También existen bastantes lugares donde nos enseñan a combinar ciertos elementos para lograr diseños realmente buenos y no llegar a resultados horripilantes o simplones.

Por ejemplo, si lo que estas buscando, posiblemente sea lo primero que te hayas planteado, unos colores principales para la web, tienes que partir por saber como combinar colores en la web, para ello un tutorial bastante ilustrativo para combinar colores en tu plantilla y no morir buscando una combinación errónea.

Después de saber como combinar los colores dentro de una página web, lo siguiente es tener algunos colores que nos gusten y que sean atractivos en tus diseños. La siguiente web nos propone bastantes colores, originales todos ellos con sus códigos RGB y hexadecimal, tanto en modo aleatorio como clasificados por escala de colores.

También puedes optar por el uso de texturas para los fondos principales de tu web, si es así, deberías conocer algunos sitios donde poder disfrutar de estos recursos tan elegantes si se combinan bien. Entre ellos puedes intentar hacerlos tu mismo, con este generador de texturas, o si lo prefieres, puedes elegir algunas texturas ya creadas en este pequeño directorio de texturas.

Por último, y no menos importante para conseguir un buen diseño web, es la elección de una fuente idónea para la página. Para ello puedes visitar y elegir alguna de los tipos de letra disponibles que tenemos en este directorio de fuentes.

Si además quieres darle toques diferentes incorporando algunos iconos temáticos con diseños simples pero elegantes, lo mejor es visitar este directorio de iconos que posee una gran cantidad de ellos, a precios competitivos y con una amplia colección. Podrás disfrutar de colecciones si buscan alguna temática en especial u obtener iconos determinados.


Biblioteca de libros de programación en español

Si hay una cosa importante para ser un buen desarrollador es conocer el inglés de tal manera que puedas leer documentación y manuales en la lengua de Shakespeare, pero si no es así o prefieres tener manuales en español, te convendría disfrutar de la biblioteca que se está montando en GitHub con todo tipo de recursos para la programación, tanto de lenguajes, PHP, Javascript, CSS, como metodología, bases de datos y algoritmos.

La iniciativa no solo esta en español, sino que dispone de de bastante idiomas, por supuesto en inglés, pero también alemán, italiano, portugués, ruso y otros muchos. Además esta abierta a las nuevas contribuciones, por lo que el número de recursos probablemente siga creciendo.

Podemos encontrar estos recursos en versión web, otros en PDF y por supuesto podremos adjuntar nuestra ayuda siguiendo las instrucciones convenientes para seguir aumentando esta comunidad.

A la par se está intentando crear una sección que incluya podcasts sobre programación, aunque actualmente solo está disponible en checo e inglés y no tienen mucho contenido, pero promete convertirse también en una referencia.

Podéis disfrutar de todos los recursos en inglés y español.

Publicado el

Media Queries

resposive

Seguro que mucha gente se acuerda de lo tedioso de programar y diseñar una web para que se viese correctamente tanto en móvil como en las pantallas convencionales de los ordenadores, el tener que programar dos hojas de estilos, tirar de javascript para conseguir que nos reconociese la pantalla desde la que navegábamos y mil historias más.

Gracias a dios todo evoluciona y el diseño web no podía ser de otra manera. En las últimas versiones de CSS, concretamente con CSS3, nos encontramos con las media queries que se trata de expresiones para restringir las características de los elementos en un ancho, alto o color determinado. Podemos lograr con esto que algunos elementos de la página web, véase los divs, imágenes o cabeceras tengan diferentes propiedades en función a un tamaño de pantalla o a un color.

Media Queries y los tamaños de la pantalla

Posiblemente el ejemplo más interesante y con el que más rendimiento podemos encontrar al usar las media queries sean el cambio de resolución o tamaño de pantalla y la visualización de algunos elementos. Además de conseguir resultados rápidos, las media queries resultan muy sencillas de usar, consiguiendo un diseño resposive en pocos pasos.

Si nos ponemos con los ejemplos podemos imaginar un div que queremos que desaparezca cuando se navega desde un teléfono móvil, ese div lo tratamos de manera normal en el principio de nuestra declaración en CSS, tan sólo debemos pensar en la medida a partir de la cual queremos hacerle desaparecer, por ejemplo 480 pixels, entonces tendremos que incluir lo siguiente en nuestro CSS:

@media screen and (max-width: 480px) {
.contenedor{
display: none;
}
}

Con este pequeño fragmento podremos hacer desaparecer el div contenedor cuando el tamaño de la pantalla desde la que navegamos sea menor a 480 pixels de ancho. Con esto se abre un abanico de posibilidades como por ejemplo, hacer que un elemento de la web se coloque en diferentes posiciones según se vaya reduciendo el ancho de la pantalla, que se sobreponga encima de otros elementos, con el z-index, pero también podremos jugar con los colores de la pantalla o con el alto de la pantalla, tan sólo tendremos que cambiar la propiedad max-width por max-height.

Publicado el

Less, primeros pasos

less

Less se trata de un pre-procesador de CSS que nos permite la inclusión de variables, funciones y algunas otras técnicas para diseñar páginas webs de manera más sencilla e intuitiva desde la vista de un programador.

Vamos a tratar de explicar por encima alguna de las virtudes y propiedades que posee y que más adelante trataremos en extenso. Todo ello para que podamos tener una visión más general y luego poder profundizar y poder crear plantillas dinámicas y 100% basadas en técnicas Less. Empezaremos hablando de las variables en Less:

Variables

Al igual que en cualquier otro lenguaje de programación, tienen el mismo significado. Se definen con el carácter @ delante y se les asigna un valor para ser utilizado posteriormente en el CSS.

@p-color: #fff; //Definimos la variable
 
p{
  color: @p-color; //Llamamos a la propiedad y la asignamos a una propiedad CSS
}

El anterior sería el ejemplo sencillo en el que declaramos la variable @p-color que será usada más adelante dentro de los párrafos de nuestro CSS. Estas variables se comportan como en cualquier otro lenguaje por lo que podemos realizar ciertas operaciones con ellas. Por ejemplo:

@primer-color: #5b83ad;
@segundo-color: @primer-color + #111;
 
#cabecera{
  color: @segundo-color;
}

Con lo que la salida de nuestro CSS será la siguiente:

#cabecera{
  color: #6c94be; //Generado de la suma de los colores #5b83ad y #111
}

Mixins

Es la manera que tiene Less de dejarnos incluir un grupo de propiedades dentro de las clases CSS. Por ejemplo:

.bordes{
  .border-top: dotted 1px black;   //Declaramos las propiedades que vamos a usar
  .border-bottom: solid 2px black;
}
 
#menu a{
  background-color: #6c94be;
  .bordes
}
.articulos a{
  background-color: #fff;
  .bordes;
}

Como se puede ver en el ejemplo, el conjunto de propiedades que declaramos arriba del todo, mixin, se puede usar en todas las clases CSS que queramos.

Reglas Anidadas

Para dotar de mayor claridad al código CSS podemos usar instancias anidades o combinaciones de propiedades en cascada, con lo que se genera un código más limpio y conciso. Por ejemplo, podemos sustituir el siguiente fragmento de código:

#cabecera{ background-color: #000;}
#cabecera .descripcion{ font-size: 15px; }
#cabecera .menu{ width: 300px;}

Por el siguiente fragmento, mucho más fácil de ver y más estructurado. Podemos apreciar que se agrupan todas las propiedades de la cabecera dentro de la llamada a la clase, pero dentro estamos haciendo referencia a los elementos descripcion y menu que poseen propiedades propias.

#cabecera{
  background-color: #000;
  .descripcion{ font-size: 15px; }
  .menu{ width: 300px;}
}

Funciones

Less nos proporciona una serie de funciones que nos permiten realizar tareas como la transformación de colores, saturación de estos, manipulación de cadenas e incluso funciones matemáticas. Todas las funciones que posee están disponibles en http://lesscss.org/functions/. Entre ellas, existen algunas interesantes, os dejo algunos ejemplos:

div {
  .average(16px, 50px);  //Calcula la media de las dos cifras que le pasamos de parámetro
  color: saturate(#f1f4413, 5%);  //Satura el color que recibe el tanto por cierto que queremos
}

Namespaces y Accessors

Algunas veces queremos usar tan solo una parte de la clase que hemos declarado en otra clase, para ellos podemos agrupar variables o mixins que encapsulan clases más específicas que luego nos pueden servir para reusar en otras clases. Supongamos que declaramos la siguiente clase:

.articulo{
  background-color: #fff;
  .boton{
     display: block;
     background-color: grey;
  }
  .titulo{
     border-bottom: 2px solid black;
  }
}

Parte de esta clase queremos reusarla en otra clase CSS, es decir, queremos aplicar todas las propiedades, por ejemplo, del boton de la clase articulo en los botones de la clase cabecera, para eso la llamamos de la siguiente manera:

.cabecera .boton{
  background-color: orange;
  .articulo >.boton;
}

Alcance

Un aspecto importante a entender en Less es el alcance que las variables tienen dentro del código. Si eres programador de otros lenguajes, estás de enhorabuena, pues el comportamiento es igual al resto de lenguajes, es decir, las variables tienen un alcance del bloque o estructura donde esta está definida. Por ejemplo:

@var: grey;
.articulo{
   @var: white;
   .titulo{
      background-color: @var;
  } 
}

Al estar definido dentro de la clase articulo, la variable toma el valor white. En caso de que no tuviésemos esta línea donde le asignamos el valor white a la variable o que se definiese después de ser usada, tomaría el valor declarado arriba, es decir, grey.

Por el momento, esta es una pequeña guía de Less y algunas de sus propiedades más destacables, aunque más adelante iremos haciendo un análisis más a fondo de todo para poder dominar Less y poder crearnos plantillas completas de manera rápida.

Publicado el