---------------------------C Ó M O S E D E F I N E L A P R E S E N T A C I

Ó N D E U N A P Á G I N A W E B---------------------------------

----------------------------LECCIÓN
1----------------------------------------------------------------------------------
-----------------------------------
En este vídeo, que forma parte del curso Introducción al desarrollo web, te voy a
ayudar con tus primeros pasos con CSS, las hojas de estilo en cascada.

Antes de empezar, me gustaría recordarte algunos de los sitios web en los que
puedes encontrar más información sobre mí y sobre mi trabajo y dos formas de
contactar conmigo a través de mi correo electrónico [email protected] y a través
de mi cuenta en Twitter @sergiolujanmora.

Gracias a vídeos anteriores, ya sabrás escribir y leer el código HTML, que se

emplea para crear las páginas web. Recuerda que, con HTML, solo definimos la
estructura y el contenido de las páginas web. Ahora queremos lograr que las páginas
web tengan la presentación visual que nosotros queramos, es decir, que las páginas
web se muestren con los colores, los tamaños y tipos de letra, los bordes y los
fondos, que nosotros deseamos. Para lograr que una página web en vez de verse así,
se vea de esa otra forma o que, en vez de verse así, se vea con esta otra
presentación, es necesario utilizar una tecnología adicional.

Esa tecnología es CSS, Cascading Style Sheets, las hojas de estilo en cascada.
Existen diferentes versiones de CSS, que no se llaman versiones, sino niveles. Cada
nivel de CSS se construye sobre el anterior, añadiendo funciones al nivel previo.
Yo te aconsejo que te centres en aprender CSS 2.1, ya que es el que aceptan la
mayoría de los navegadores actuales. CSS3 incorpora novedades muy interesantes,
pero en la actualidad, está en desarrollo y no todos los navegadores lo aceptan.

CSS es un lenguaje muy sencillo que se compone de reglas. Cada regla está formada
por uno o más selectores y una declaración formada por un bloque de estilos, que
define los estilos a aplicar para los elementos del documento que cumplan con el
selector.

En este ejemplo el selector, es el elemento de HTML, h1, por lo que esta regla se
aplicará a todos los encabezados de nivel 1 de la página web. Cada declaración de
estilos se define entre llaves y está formada por parejas, propiedad, valor.

Desde que el lenguaje de CSS se lanzó en el año 1996, el número de propiedades que
posee ha ido aumentando y aumentando y en la actualidad en la versión CSS3, está
formado por casi 200 propiedades.

Al igual que pasa con el lenguaje HTML, el lenguaje CSS también está desarrollado
por el World Wide Web Consortium, el W3C, el organismo internacional que vela por
el correcto desarrollo de la web. En la página del W3C puedes encontrar mucha
información sobre CSS, pero para empezar no te lo recomiendo, porque te puede
abrumar y asustar, ya que es un sitio web dirigido a profesionales y expertos, no
para principiantes.

En el sitio web del W3C, puedes consultar la especificación oficial del CSS, pero
para empezar a aprender lo encontrarás muy difícil. Yo te aconsejo que utilices,
como en otras ocasiones el w3schools, por un lado, tienes el tutorial sobre CSS y,
por otro lado, tienes la guía de referencia en la que encontrarás todas las
propiedades de CSS, agrupadas en diferentes grupos, como, por ejemplo, background,
border and outline, color, font o margin.

Además, también te recomiendo, que consultes el artículo dedicado al lenguaje CSS,

que puedes encontrar en la Wikipedia y también te recomiendo, que leas el CSS
training, un curso de aprendizaje de CSS, preparado por el W3C, que organiza el
aprendizaje en cuatro semanas, empezando por los selectores en la semana 1 y
acabando con temas avanzados en la semana 4.

Aspectos clave
En el vídeo CSS: conceptos básicos se explica qué es CSS, las versiones que existen
de CSS y el esquema de una regla de CSS.

----------------------------LECCIÓN
2----------------------------------------------------------------------------------
-----------------------------------

En este vídeo, que forma parte del curso Introducción al desarrollo web, te voy a
ayudar con tus primeros pasos con CSS, las hojas de estilo en cascada.

En este vídeo, formado por tres partes, te voy a explicar cómo se usa CSS en HTML.

Antes de empezar, me gustaría recordarte algunos de los sitios web en los que
puedes encontrar más información sobre mí y sobre mi trabajo y dos formas de
contactar conmigo a través de mi correo electrónico [email protected] y a través
de mi cuenta en twitter @sergiolujanmora.

CSS, Cascading Style Sheets, las hojas de estilo en cascada, es la tecnología que
se emplea para definir la presentación visual de las páginas web. Antes de ver cómo
se usa CSS en una página web, vamos a aprender un término muy importante en los
sistemas informáticos, el acoplamiento, un factor que incide en la calidad de los
sistemas informáticos. Según la Wikipedia, el acoplamiento informático indica el
nivel de dependencia entre las unidades de software de un sistema informático, es
decir, el grado en que una unidad puede funcionar sin recurrir a otras. Dos
funciones son absolutamente independientes entre sí, el nivel más bajo de
acoplamiento, cuando una puede hacer su trabajo completamente sin recurrir a la
otra. En este caso, se dice que ambas están desacopladas. Evidentemente, lo mejor
sería un desacoplamiento total, es decir, que no hubiese ninguna dependencia entre
las partes que constituyen un sistema informático, pero esa situación es más bien
imposible de lograr. Por lo tanto, al final, lo que se intenta lograr es reducir el
acoplamiento al mínimo posible. Cuanto menos dependientes sean las partes que
constituyen un sistema informático, mejor será el resultado final.

Cuando usamos CSS para definir la presentación de una página web escrita en HTML,
se crea un acoplamiento entre HTML y CSS. Como acabamos de ver, debemos de intentar
reducir este acoplamiento entre estas dos tecnologías.

En HTML se puede indicar que queremos aplicar unas reglas CSS de tres formas.
Mediante el atributo style, mediante la etiqueta style y mediante la etiqueta link.
En este vídeo vamos a ver el uso del atributo style, que es la peor opción, ya que
lleva aparejado un acoplamiento máximo entre HTML y CSS, como veremos a
continuación con un ejemplo.

El atributo style, es uno de los pocos atributos de HTML, que se puede aplicar a
casi cualquier elemento de HTML. En HTML 4.01 y XHTML 1.0, el atributo style se
puede aplicar a casi todos los elementos o etiquetas, excepto base, basefont, head,
html, meta, param, script, style y title. Sin embargo, en HTML5 se ha cambiado y
ahora se indica que todos los elementos pueden tener el atributo style. A
continuación, te voy a mostrar cómo utilizar este atributo, pero antes, vamos a ver
las propiedades de CSS que voy a utilizar. Voy a utilizar color, para definir el
color del texto, background-color, para definir el color de fondo del texto, font-
family, para definir el tipo de letra o fuente y font-size, para definir el tamaño
del texto.

Esta es la página web que voy a usar como base para enseñarte a utilizar el
atributo style. Vamos a ver primero, cómo se visualiza esta página web en un
navegador, en Google Chrome, este es el aspecto que tiene la página cuando se
visualiza sin CSS. Ahora voy a empezar a añadirle propiedades visuales con el
atributo style. En primer lugar, me voy a la etiqueta body, ya que al cambiar el
color del texto y el color del fondo de la etiqueta o elemento body, voy a cambiar
todo el color del fondo y todo el color de la página. Así que, le añado el atributo
style y primero voy a cambiar el color del texto, le voy a indicar este color #333
y, a continuación, voy a cambiar el color del fondo y le voy a poner el color CCC.

La forma de indicar los colores, la tienes explicada en otro vídeo, donde se

explican las distintas formas que existen en CSS para indicar un color. Fíjate que
estas dos propiedades de CSS, color y background-color, la ha separado con un punto
y coma y al final de la última propiedad también le ha puesto un punto y coma. Este
punto y coma no es obligatorio, pero es una buena costumbre ponerlo, ya que, ahora,
rápidamente, podría añadir otra propiedad de CSS y no me tendría que preocupar en
ver si tengo que poner o no poner el punto y coma. Si me acostumbro a ponerlo
siempre, podré añadir una nueva propiedad rápidamente.

Bien, hemos cambiado el color del texto, le hemos puesto 333, que es un gris muy
oscuro, cercano al negro y el color del fondo de la página, le he puesto CCC, que
es un gris claro, no muy claro. Vamos a guardar la página y la visualizamos en
Google Chrome y podemos ver el resultado, vemos como el color del texto ahora no es
un negro completo, sino negro un poco apagado, porque es un gris oscuro, y el color
del fondo ha cambiado a gris.

Vamos a añadir más propiedades. Ahora voy a cambiar los encabezados, etiqueta h1 y
h2. Primero me voy a la etiqueta h1, le añado el atributo style y voy a cambiar lo
siguiente: Primero voy a cambiar el tipo de letra o fuente y le voy a poner
Georgia. Y también, le voy a cambiar el tamaño del texto y le voy a poner 3 em,
3em, que indica que quiero que el h1 tenga un tamaño de del texto tres veces el
tamaño base actual. Voy a copiar esta propiedad, esta propiedad de style, porque en
el h2, la voy a reutilizar. Voy a usar el mismo tipo de letra Georgia, Georgia,
pero ahora voy a indicar un tamaño del texto 2 em, el doble. Y ahora copio esta
propiedad y la aplico al otro h2, lo guardo, lo ejecutó otra vez en Chrome y vemos
el resultado. Vemos que ha aumentado el tamaño de los encabezados del h1, del h2 y,
además, ha cambiado su tipo de letra, su fuente. Si lo comparo con la visualización
anterior, podemos ver que el cambio es evidente.

Vuelvo al código HTML y ahora lo que voy a cambiar son los párrafos y lo que voy a
indicar, es que, en mis párrafos de texto, quiero usar un tipo de letra Arial y,
por si no está disponible el tipo de letra Arial, indicó un segundo tipo de letra
Helvética y finalmente, un tipo de letra Sans Serif, que es un tipo de letra
genérico. Indica la familia de tipos de letra Sans Serif.

Voy a copiar ahora, este atributo style, para aplicárselo a los otros párrafos de
texto que hay en mi página web. Lo guardo, lo visualizo otra vez en Google Chrome y
podemos ver el cambio, como ahora el tipo de letra de mis párrafos es Arial, si lo
comparo con la versión anterior, vemos que hay un cambio significativo.

Así de fácil, es usar el atributo style para indicar las propiedades de un elemento
o etiqueta de una página web, pero vemos que hay un problema importante. El
problema importante, sobre todo lo hemos visto aquí en el párrafo que me ha tocado
copiar una, dos, tres, cuatro veces, la misma propiedad style, porque quería
aplicar las mismas propiedades visuales a mis cuatro párrafos de texto. ¿Qué ocurre
si ahora añado más párrafos de texto? Tendré que volver a copiar esta propiedad
style a cada uno de los párrafos de texto, y ¿qué ocurre si yo ahora quiero cambiar
y, por ejemplo, ponerle un tipo de letra distinto? Pues tendría que ir párrafo a
párrafo cambiándolo.

Vemos que hay un alto acoplamiento entre el CSS y el HTML, ¿esto lo podemos
resolver?, ¿podemos reducir el acoplamiento? Sí, eso lo veremos en el siguiente
vídeo, donde te explicaré cómo usar la etiqueta style para indicar los estilos de
una página. No te confundas, aquí estamos viendo el uso del atributo style y en el
siguiente vídeo te voy a explicar el uso de la etiqueta style. Atributo, etiqueta,
son dos cosas distintas.

Aspectos clave
Debes ver el vídeo CSS: cómo se usa en HTML (parte 1) en el que se explica el
acoplamiento en un sistema informático, las tres formas de usar CSS en HTML, el
atributo style y se muestra una demostración de uso en una página web

----------------------------LECCIÓN
3----------------------------------------------------------------------------------
-----------------------------------

En este vídeo, que forma parte del curso Introducción al desarrollo web, te voy a
ayudar con tus primeros pasos con CSS, las hojas de estilo en cascada.

En esta segunda parte del vídeo, CSS cómo se usa en HTML, te voy a explicar cómo se
usa la etiqueta style para definir los estilos de una página web,

Antes de empezar, me gustaría recordarte algunos de los sitios web en los que
puedes encontrar más información sobre mí y sobre mi trabajo y dos formas de
contactar conmigo a través de mi correo electrónico [email protected] y a través
de mi cuenta en twitter @sergiolujanmora.

En el vídeo anterior vimos el uso del atributo style para definir los estilos de
los elementos de una página web. En este vídeo vamos a ver el uso de la etiqueta
style.

Al usar la etiqueta style reducimos un poco el acoplamiento que existe entre HTML y
CSS. Es mucho mejor que usar el atributo style, pero no es la mejor solución,
porque el código CSS sigue estando en el mismo fichero que el código HTML.

La etiqueta style la debemos escribir en el head de la página web. En las versiones

antiguas de HTML, era necesario incluir el atributo type y la etiqueta style, para
indicar el tipo de lenguaje de estilos que se usaba. La idea era permitir el uso de
distintos lenguajes de estilo, pero al final solo quedó uno, CSS. Por ello, en
HTML5 se ha simplificado y podemos escribir la etiqueta style sin el atributo type,
ya que tiene definido como valor por defecto, CSS.

A continuación, te voy a mostrar cómo utilizar este atributo, pero antes vamos a
ver las propiedades de CSS que voy a utilizar. Voy a utilizar color para definir el
color del texto; background-color, para definir el color de fondo del texto; font-
family, para definir el tipo de letra o fuente y font-size para definir el tamaño
del texto.

Esta es la página web que voy a usar como base para mostrarte el uso de la etiqueta
style. Vamos a ver primero, cómo se visualiza en el navegador Google Chrome. Este
es el aspecto que tiene esta página web. Ahora volvemos al código fuente, al código
HTML y voy a añadir en el head de la página, la etiqueta o elemento style. Como
estoy haciendo la página web con HTML5, no le pongo el atributo type, no es
necesario, aunque sí quiero, se lo puedo indicar, type, text, barra, css. Este es
el tipo mime, que identifica los ficheros de tipo CSS. La etiqueta style la tengo
que escribir el head, pero la podría haber puesto detrás del title, como la he
puesto o la podría poner delante. Siempre que esté en el head, puede estar en
cualquier parte.

Yo le voy a indicar mi primera regla de CSS. Mi primera regla, es para modificar el

color del fondo de la página y el color del texto, es decir, quiero modificar la
etiqueta body. Así que tengo que indicar body, y entre llaves, escribiré la regla
de CSS, que voy a poner background-color y voy a indicar este gris y el color del
texto, le pongo este otro gris, que es un poco más oscuro. Grabo la página y la
visualizo en Google Chrome y compruebo que, efectivamente, me aparece con el color
del fondo gris y con el color del texto un gris muy oscuro, cercano al negro.

Vuelvo al código fuente y voy a añadir otra regla de CSS. En este caso lo que voy a
cambiar es el tipo de letra de mis encabezados, de h1y h2, y voy a usar esta
sintaxis de CSS, que me permite agrupar varios elementos y aplicarles la misma
regla de CSS. Cuando escribo h1, h2, significa que la regla de CSS que voy a
escribir a continuación, se la quiero aplicar a estos dos tipos de elementos o
etiquetas. Y lo que voy a indicar es el tipo de letra de letra, la fuente, Font-
family y le pongo Georgia, Georgia.

A continuación, voy a cambiar el tamaño del texto de h1 y le pongo font-size 3 em,

tres veces el tamaño base y h2 le pongo el tamaño Font-size 2 em, dos veces el
tamaño base. Lo comprobamos en Google Chrome y podemos ver cómo, efectivamente, ha
cambiado el tipo de letra de los encabezados, es distinto y, efectivamente, también
ha aumentado el tamaño de los encabezados del h1 y del h2, ha cambiado su tamaño.

Vuelvo al código fuente de mi página web y voy a realizar el último cambio, que es,
a los párrafos de texto le voy a aplicar otro tipo de letra, font-family, y le
pongo una lista de tipos de letra, Arial, Helvética y, por último, el tipo
genérico, Sans Serif. Lo guardo, lo ejecutó, lo visualizo en Google Chrome y
comprobamos, si comparamos con la versión anterior, aquí el tipo de letra, el que
se usa por defecto, es Times New Roman y aquí, vemos que ahora el texto aparece con
el tipo de letra Arial.

Como vemos, hemos separado ahora el código CSS, lo hemos separado del código HTML.
Antes, con el atributo style, el código CSS, las propiedades de CSS, estaban
escritas junto con el código HTML. Ahora, aunque esté en el mismo fichero, lo hemos
podido separar. Hemos reducido el acoplamiento entre el código HTML y el código
CSS. Y además fijaos, que hemos obtenido una ventaja adicional, antes, para los
distintos párrafos que tenía mi página web, debía de copiar el atributo style en
cada una de ellas. Ahora simplemente, escribo la regla una vez y ya se va a
aplicar, con este selector p, se aplicará a todos los párrafos de mi página web. Si
ahora quiero cambiar el tipo de letra y que afecte a todos mis párrafos, no tengo
que ir uno a uno, como ocurría antes con el atributo style. Ahora simplemente,
vengo aquí, a esta regla de CSS y, al cambiar aquí el valor del tipo de letra, se
cambiará en todos los párrafos de mi página web.

En el próximo vídeo veremos cómo podemos usar la etiqueta link para reducir, aún
más, el acoplamiento entre el código HTML y el código CSS. La etiqueta link es la
solución que debes de usar en todas tus páginas web.

Aspectos clave
En el siguiente vídeo, CSS: cómo se usa en HTML (parte 2), se explica la etiqueta
style y se muestra una demostración de uso en una página web.

----------------------------LECCIÓN
4----------------------------------------------------------------------------------
-----------------------------------

En este vídeo, que forma parte del curso Introducción al desarrollo web, te voy a
ayudar con tus primeros pasos con CSS, las hojas de estilo en cascada.

En esta tercera parte del vídeo, CSS cómo se usa en HTML, te voy a explicar cómo se
usa la etiqueta link para definir los estilos de una página web.

Antes de empezar, me gustaría recordarte algunos de los sitios web en los que
puedes encontrar más información sobre mí y sobre mi trabajo y dos formas de
contactar conmigo a través de mi correo electrónico [email protected] y a través
de mi cuenta en twitter @sergiolujanmora.

En el vídeo anterior vimos el uso del atributo style y de la etiqueta style para
definir los estilos de los elementos de una página web.

En este vídeo vamos a ver el uso de la etiqueta link. Al usar la etiqueta link,
reducimos el acoplamiento que existe entre HTML y CSS al máximo, ya que el código
HTML y CSS no se encuentran en el mismo fichero, sino que los almacenamos en
ficheros distintos. Además, al estar el código CSS en un fichero separado, podemos
hacer que diferentes páginas web, diferentes ficheros HTML, utilicen el mismo
fichero CSS.

La etiqueta link, la debemos escribir en el head, de la página web. En las

versiones antiguas de HTML, era necesario incluir el atributo type en la etiqueta
link para indicar el tipo de lenguaje de estilos que se usaba. La idea era permitir
el uso de distintos lenguajes de estilo, pero al final solo quedó uno, CSS. Por
ello, en HTML5 se ha simplificado y podemos escribir la etiqueta link sin el
atributo type, ya que tiene definido como valor por defecto CSS, además, la
etiqueta link debe llevar el atributo href, en el que se indica la ruta al fichero
que contiene la hoja de estilo y el atributo rel stylesheet, que indica que es una
hoja de estilo.

La etiqueta link también puede incluir otros atributos como media o title, pero no
lo vamos a ver en este vídeo.

A continuación, te voy a mostrar cómo utilizar esta etiqueta, pero antes vamos a
ver las propiedades de CSS que voy a utilizar. Voy a utilizar color, para definir
el color del texto, background-color, para definir el color de fondo del texto,
font-family, para definir el tipo de letra, la fuente, y font-size, para definir el
tamaño del texto.

Partimos del ejemplo que hicimos en el vídeo anterior, en el que explicaba el uso
de la etiqueta style. En este ejemplo teníamos esta página web sencilla y en el
código HTML añadíamos la etiqueta style para incluir la hoja de estilo en cascada,
las propiedades para definir la presentación visual.

Lo que vamos a hacer, en este vídeo, es transformar esto en un fichero externo,

vamos a almacenar la hoja de estilo en un fichero aparte. Así que primero, lo que
hago es, cortar este código, creo un fichero nuevo y pego el código CSS. En el
fichero CSS que vamos a almacenar de forma separada, no necesito la etiqueta style,
porque este fichero CSS va a ser exclusivo de CSS. Lo almaceno en el mismo
directorio donde tengo almacenado el código HTML y, por ejemplo, lo voy a llamar
miestilo.css. fijaos como para almacenarlo con la extensión .css, el editor,
Notepad++, me detecta la sintaxis del lenguaje y me lo colorea. Ahora vuelvo al
fichero HTML y donde antes tenía la etiqueta style, añado la etiqueta link, primero
le pongo el atributo href y pongo la ruta de acceso al fichero CSS, como esta en el
mismo directorio no hace falta que ponga una ruta, simplemente pongo el nombre del
fichero, miestilo.css.

A continuación, voy a poner el atributo rel stylesheet y el atributo type, que he

indicado en el vídeo, que sí estamos trabajando en HTML5, como es en este ejemplo,
no hace falta que lo pongamos, pero lo podemos poner si queremos, text barra css y
cierro la etiqueta, lo guardo y, ahora mismo, tengo dos ficheros el fichero HTML y
el fichero CSS. Con esta estrategia logro reducir el acoplamiento al máximo, por
supuesto, no podemos hacer que haya un total desacoplamiento, tiene que haber algún
punto de conexión entre el código HTML y el código CSS y, ese punto de conexión, lo
hemos reducido a la mínima expresión, a esta etiqueta link.

Vamos a probar esta página. Me voy al menú ejecutar, launch in Chrome y vemos que,
efectivamente, aparece la página web con los estilos que habíamos definido
previamente. Para convencernos de que realmente se está cargando esta hoja de
estilos, vamos a hacer un cambio, por ejemplo, voy a cambiar el color de fondo y lo
voy a poner a rojo, f 00. Almaceno el fichero CSS, me vuelvo al navegador y recargo
la página y, efectivamente, ha cambiado el color al rojo. Por tanto, sí que esta
página HTML está interpretando correctamente esta etiqueta link y está cargando el
CSS que tenemos en un fichero aparte. Ahora, yo podría hacer 5, 10, 50 o 1000
páginas y todas podrían usar el mismo CSS, lo único que tendría que hacer es, en
cada una de mis páginas, poner la etiqueta link, que cargue el mismo fichero CSS y
si quiero hacer un cambio en todas las páginas de mi sitio web, lo único que tengo
que hacer es cambiar, introducir ese cambio, en este fichero, en un único fichero.

Y con esto termina la tercera parte de este vídeo. En estos tres vídeos, hemos
visto las tres formas que existen de usar un CSS en HTML y hemos visto que la mejor
forma es utilizar la etiqueta link.

Aspectos clave
Debes ver el vídeo CSS: cómo se usa en HTML (parte 3) en el que se explica la
etiqueta <link> y se muestra una demostración de uso en una página web.

----------------------------LECCIÓN
5----------------------------------------------------------------------------------
-----------------------------------

En este vídeo, que forma parte del curso Introducción al desarrollo web, te voy a
explicar los selectores básicos de CSS.

CSS es un lenguaje muy sencillo, que se compone de reglas, cada regla está formada
por uno o más selectores y una declaración formada por un bloque de estilos, que
define los estilos a aplicar para los elementos del documento que cumplan con el
selector, en este ejemplo, el selector es el elemento de HTML, h1, por lo que esta
regla se aplicará a todos los encabezados de nivel 1 de la página web. Cada
declaración de estilos se define entre llaves y está formada por parejas propiedad
valor, en este ejemplo, a los elementos de tipo a h1, se le aplican dos
propiedades. En la primera propiedad, se indica que el color del texto debe ser
rojo, en la segunda propiedad, se indica que el color de fondo debe ser verde.
¿Qué tipos de selectores existen en CSS? Los selectores de CSS3 están definidos en
el documento Selectors Level Three, una recomendación del W3C de septiembre de
2011. La lista de selectores definidos en CSS3 es enorme. Como podemos ver, CSS3
incluye los selectores definidos en CSS1 y CSS2. En este vídeo vamos a ver los
selectores básicos definidos en CSS1 y CSS2. En los siguientes vídeos, veremos los
selectores avanzados y las novedades que incorpora CSS3.

En este vídeo voy a utilizar el siguiente fragmento de código HTML para explicarte
el uso de los selectores de CSS. A la derecha del código HTML te mostraré el código
CSS y el resultado final, la visualización del código HTML y del código CSS en un
navegador web.

Existen tres selectores básicos fundamentales, de tipo, de clase y de

identificador. Veamos el primer selector, el selector de tipo.

El selector de tipo, también es conocido como selector de elemento o selector de

etiqueta. Este selector hace referencia a todos los elementos o etiquetas de un
mismo tipo. Para seleccionar una etiqueta, hacemos referencia a esa etiqueta en
nuestro código CSS. En este ejemplo, se han definido dos reglas de CSS. En la
primera el selector es h1 y se aplica al único encabezado de nivel 1 que hay en el
código HTML. En la segunda regla, el selector es span y se aplica a todos los span
que hay en el código HTML. Como puedes observar, es un selector poco específico y
se aplicará a todas las etiquetas de ese tipo en el documento en el que se incluya
este código CSS.

El segundo, es el selector de clase. El atributo class es un atributo global común

a todas las etiquetas HTML. Permite especificar las clases que se aplicarán a un
determinado elemento. En CSS los nombres de las clases vienen precedidos por el
carácter punto. Es imprescindible que recuerdes incluir este carácter en CSS y no
lo incluyas en el atributo class de las etiquetas en HTML. Un error muy común en
los primeros desarrollos de cualquier persona.

En el ejemplo, puedes ver cómo se aplica la clase punto box a la etiqueta div. Este
tipo de selector se aplicará a todas las etiquetas cuyo atributo class lo incluya.
Esto se ilustra en el ejemplo, mediante la clase punto bold, aplicada a varios
elementos distintos, dos etiquetas span y un enlace.

Como puede que ya sepas, el atributo class permite múltiples valores separados por
espacio, de forma que podemos aplicar multitud de clases a una misma etiqueta. Esto
favorece la reutilización de reglas, en lugar de tener que repetir ciertas reglas
una y otra vez. Por ejemplo, puedes ver como la última etiqueta span, aplica a dos
clases, una para el estilo de fuente y otra para el color.

Los selectores se pueden combinar entre sí, veamos un ejemplo sencillo. En este
ejemplo, la regla CSS combina span, un selector de tipo, con punto bold, un
selector de clase. Esta combinación se aplica solo a las etiquetas span que tengan
la clase punto bold.

El tercer selector, más específico y no por ello menos importante, es el selector

de identificador. Se diferencia del selector de clase en dos aspectos
fundamentales, primero el carácter inicial en el código CSS es la almohadilla en
vez del punto, segundo, se aplica a aquellas etiquetas cuyo atributo id coincida
con el texto tras la almohadilla. Recuerda que el atributo id se supone único en el
documento HTML, por tanto, una regla de identificador solo se aplicaría una vez en
toda una página web. Sin embargo, el valor de un id, se puede repetir entre
diferentes páginas web.

Es posible utilizar la combinación de selectores para seleccionar etiquetas

anidadas. Para aplicarles una regla exclusivamente a las etiquetas span, anidadas a
la etiqueta div del ejemplo, con todo lo aprendido hasta ahora, no nos quedaría más
remedio que modificar el código HTML. Sin embargo, si utilizamos combinaciones de
selectores, podemos aplicar la regla solo a las etiquetas span que estén anidadas
en etiquetas div, mediante la regla div, espacio en blanco, span o a todos los
hipervínculos que estén en el interior de una etiqueta span, mediante spam, espacio
en blanco, a.

Como ves, para anidar selectores, se especifican uno tras otro separados por
espacios en blanco, siempre empezando por el elemento con menor nivel de
anidamiento en el documento HTML.

En este otro ejemplo, te muestro cómo aplicar estilos a todas las etiquetas span
que estén anidadas en etiquetas con la clase punto box. Del mismo modo que en el
ejemplo anterior, especificamos, en primera instancia, el selector de clase punto
box y después, separado por el espacio en blanco, el selector de etiquetas span. El
resultado final del ejemplo anterior, también se puede lograr, si se usa el
selector de identificador myDiv, en vez de la clase punto box.

Y ahora, al ejemplo anterior, le añado otra regla de CSS. El ejemplo, muestra cómo
aplicar un estilo a las etiquetas span dentro de una etiqueta identificada como
myDiv y aplicar una regla a todos los enlaces que estén anidados en una etiqueta
con el identificador mySpan, fácil, ¿no?

Como ya sabes, la reutilización y la reducción de códigos, son primordiales para

asegurar un fácil mantenimiento del código. Para aplicar el mismo estilo a
diferentes reglas, no es necesario repetir código, puedes separar las reglas por
comas y especificar el estilo una sola vez.

En este ejemplo, se indica que los elementos con el identificador myDiv y mySpan se
deben presentar con el color verde. Estas dos reglas, se pueden agrupar en una
sola. Los dos selectores se separan con una coma, por supuesto, puedes agrupar
reglas de cualquier tipo de selector.

Ahora te invito a que veas la segunda parte de este vídeo. Este vídeo está basado
en los vídeos CSS selectores y CSS selectores avanzados, de Guzmán Fernández, que
puedes encontrar en estas direcciones de YouTube.

Ya para terminar, me gustaría recordarte algunos de los sitios web en los que
puedes encontrar más información sobre mí y sobre mi trabajo y dos formas de
contactar conmigo a través de mi correo electrónico [email protected] y a través
de mi cuenta en Twitter @sergiolujanmora. Muchas gracias por tu atención.

Aspectos clave
Debes ver el vídeo CSS: selectores básicos (1) en el que se muestran diferentes
tipos de selectores de CSS, como el selector de tipo (elemento o etiqueta), el
selector de clase y el selector de identificador, se explica la selección de
etiquetas anidadas y la agrupación de reglas.

----------------------------LECCIÓN
6----------------------------------------------------------------------------------
-----------------------------------

En este vídeo, que forma parte del curso Introducción al desarrollo web, te voy a
explicar los selectores básicos de CSS.

En este vídeo, vamos a seguir viendo diferentes tipos de selectores que existen en
CSS. El selector universal se representa mediante un asterisco. Cuando se incluye
en una regla, el selector universal selecciona todos los elementos. ¿Cuándo lo
utilizarás? Probablemente nunca, al menos, yo desaconsejó su uso. Es difícil
tenerlo bajo control y puedes estar aplicando estilos sin darte cuenta.

En muchas situaciones el selector universal se puede omitir. El selector universal

se aplica a veces, para inicializar todos los elementos de una página web a un
mismo estado. En este ejemplo, el margen y el relleno de todos los elementos, se
establece en 0 píxeles.

Habrás comprobado, que algunos enlaces cambian de color cuando ya estuviste en esa
página, cuando los mantienes pulsados o incluso se modifica su estilo, cuando pasas
el ratón por encima de ellos. Gracias al carácter :, vamos a ver cómo hacer todo
esto.

Para ver el funcionamiento de estos selectores, vamos a utilizar un ejemplo nuevo.

El estado :link, solo aplicable a enlaces, modifica el estilo por defecto de
aquellos hipervínculos no visitados a los que se aplique la regla. En este caso,
suponemos que tanto índice, como visitado, son enlaces visitados. El segundo,
porque se navegó a la página visit.html, en algún momento y el primero, porque la
página en la que nos encontramos es index.html. Puede ser una buena idea que hagas
unas pruebas si no te quedó claro.

El estado :visited, se aplicará a los hipervínculos visitados. Es el selector

complementario a : link. Por tanto, en este ejemplo, esta regla de CSS, se aplica a
los dos primeros enlaces.

El estado : hover, modifica el estilo cuando el puntero del ratón, está sobre un
elemento al que se le aplica la regla. Como puedes ver en el ejemplo, todos los
enlaces tienen el estilo aplicado, pero solo lo muestra el enlace visitado, puesto
que tiene el puntero sobre él. Es posible utilizar : hover, en todos los elementos,
no solo en los hipervínculos. En caso de enlaces, es muy importante declarar
:hover, después de : link y : visited. En caso de que existan, para que : hover
funcione correctamente.

Ten en cuenta, que los dispositivos táctiles como tabletas o teléfonos

inteligentes, smartphones, no tienen la capacidad de situar el puntero sobre un
elemento, sin pulsarlo. Utiliza con cabeza todo esto, por ejemplo, a la hora de
mostrar u ocultar menús o tu página no será accesible a multitud de usuarios.

El estado :active, se aplica a enlaces que están siendo pulsados, normalmente no

mantenemos pulsado un hipervínculo, puesto que su principal utilidad es la
navegación, pero es posible definir enlaces sin destino para casos particulares
como pueden ser los menús desplegables. Al pulsar, se activa el estilo definido por
esta regla de CSS y al dejar de pulsar se deja de aplicar la regla.

De nuevo, es necesario declarar : active después de : hover, para que tenga efecto.
Que : active y : hover, tengan los mismos estilos puede ser una solución elegante
al problema de accesibilidad desde tabletas y teléfonos inteligentes, que te
comentaba hace un momento. El único inconveniente es que solo servirá para
hipervínculos, puesto que : active, solo se aplica a este tipo de elementos.

Puedes utilizar : link, :visited y : active solos, para aplicarlos a todos los
enlaces de la página, aunque es más común verlos acompañados del selector a.
También, es posible utilizarlos en combinación con clases e identificadores, así
como en anidamientos, del mismo modo que con los selectores básicos.
Así como los enlaces tienen selectores particulares, los elementos de formulario,
que aceptan entradas por parte del usuario, campos de texto, listas desplegables,
etcétera, también tienen un selector que puede resultar interesante, para destacar
el elemento que está activo, o siendo rigurosos, el elemento que tiene el foco.
Este selector también se puede aplicar a los enlaces, ya que pueden recibir el foco
desde el teclado.

Como habrás podido comprobar, he vuelto a cambiar el código HTML para este ejemplo.
Puesto que necesito campos de formularios. Para mejorar la experiencia del usuario,
puede ser una buena práctica resaltar los campos de formulario que están siendo
utilizados en cada momento. Para ello utilizamos el selector : focus, como en el
ejemplo. Puedes ver, cómo se destaca el campo que está activo.

Ahora te invito a que veas el vídeo CSS selectores avanzados, en el que se explican
algunos de los selectores avanzados que puedes emplear para crear reglas de CSS más
complejas. Este vídeo, está basado en los vídeos CSS selectores y CSS selectores
avanzados, de Guzmán Fernández, que puedes encontrar en estas direcciones de
YouTube.

Ya para terminar, me gustaría recordarte algunos de los sitios web en los que
puedes encontrar más información sobre mí y sobre mi trabajo y dos formas de
contactar conmigo a través de mi correo electrónico [email protected] y a través
de mi cuenta en twitter @sergiolujanmora.

Recuerda que este vídeo forma parte del curso Introducción al desarrollo web que
está disponible en la dirección idesweb.es. Muchas gracias por tu atención.

Aspectos clave
Debes ver el vídeo CSS: selectores básicos (2) en el que se muestran diferentes
tipos de selectores de CSS: el selector universal (*) y las pseudoclases de estado
(link, visited, hover, active, focus).

----------------------------LECCIÓN
7----------------------------------------------------------------------------------
-----------------------------------

Hola, soy Guzmán Fernández García, desarrollador web, y en este vídeo que forma
parte del curso Introducción al desarrollo web, voy a explicar los colores en HTML
y CSS.

Puedes encontrarme en mi web guzmanfernandez.com y en twitter como pie izquierdo.

También puedes contactar conmigo a través de mi correo electrónico
[email protected].

¿Cómo definimos el color? No divagaré sobre la definición de color, hablaré sobre

el método que utilizamos en HTML y CSS para definir colores.

En arte, diseño y otras especialidades, se utilizan varios métodos para describir

el color. Algunos de los más conocidos son CMYK, HSV o HSB y el que utilizaremos
para HTML y CSS, RGB. Cada uno tiene sus ventajas y desventajas, pero el análisis
se escapa al objetivo de este vídeo.

Según Wikipedia, la descripción RGB de un color, hace referencia a la composición

del color según la intensidad de los colores primarios con que se forma rojo, verde
y azul, en inglés, red, green, blue. Es un modelo con el que es posible representar
un color, mediante la mezcla por adición, de los tres colores luz primarios.

El modelo de color RGB no define por sí mismo lo que significa exactamente rojo,
verde o azul, por lo que los mismos valores RGB, pueden mostrar colores
notablemente diferentes en distintos dispositivos que usen este modelo de color.
Aunque utilicen un mismo modelo de color, sus espacios de color pueden variar
considerablemente. Los colores son importantes, pero no pierdas mucho tiempo en
buscar un color concreto, porque cada usuario verá uno distinto al que tú ves. La
idea es buscar una paleta o combinación de colores armoniosa y con buenos
contrastes. Por paleta o combinación de colores, me refiero a dos, tres o cuatro
colores. No necesitarás más para definir el esquema de color de tus diseños.

En HTML y CSS tenemos tres formas básicas de representar colores en RGB, por nombre
de color, color name, algo tan sencillo como elegir uno de los 147 nombres de
colores en inglés que es capaz de interpretar un navegador. 16 básicos y 130
variantes.

Especificando los valores de cada canal, rojo, verde y azul, con valores entre 0 y
255 y en el estricto orden que marcan las siglas rojo, verde y azul. En el ejemplo
te muestro como un valor cero para los tres canales, da como resultado el negro y
un valor de 255 para todos los canales, especifica el color blanco. Puede que al
principio te resulte extraño, que la suma de todos los colores sea blanco y la
ausencia de color negro, pero estamos trabajando con un modelo aditivo, luz
directa, que funciona de forma contraria al sustractivo, luz reflejada, al que
podemos estar acostumbrados a observar en tintas o pinturas.

O en hexadecimal, probablemente la forma más utilizada, que funciona de forma

parecida a RGB. Las dos diferencias fundamentales con el primer esquema, son que,
en lugar de encerrar entre RGB y paréntesis, los valores separados por comas dichos
valores se especifican tras el símbolo #, uno tras otro, sin espacios ni caracteres
separadores y que en lugar de ser un número en base decimal entre 0 y 255, están en
base hexadecimal. No te preocupes, no es necesario dominar la base hexadecimal,
aunque terminarás por acostumbrarte. De nuevo, en el ejemplo, te muestro cómo
codificar el blanco, #, seis efes y el negro, # seis ceros. Puedes observar que
existe una versión reducida con solo tres dígitos, en este caso, cada dígito
representa una pareja cuando ambos dígitos son iguales, como es el caso del blanco,
# tres efes y el negro, # tres ceros.

Los colores que hemos visto, se pueden aplicar a distintas partes de nuestro modelo
de caja. A la fuente, texto, dándole valor al atributo color. Al fondo,
especificando el código de color en el atributo background-color o modificando el
valor del atributo border-color, al borde. En este ejemplo puedes ver el uso de los
tres simultáneamente.

Puedes ver más sobre colores en el vídeo: colores, novedades en CSS3, disponible en
la quinta semana del curso idesweb.

En resumen, hemos visto cómo utilizar los color names y RGB, tanto en decimal como
en hexadecimal, para darle un poco de color a la web. Tienes la posibilidad de
cambiar los colores de fuente, mediante el atributo color, de fondo con background-
color y el de los bordes gracias al atributo border-color.
Para terminar, te dejo dos consejos que espero te resulten útiles. Aprende utilizar
el modelo RGB aunque no lo utilices en tu codificación. Puede que no sea el más
intuitivo, pero te encontrarás con multitud de diseños que hacen uso del modelo y
siempre es interesante saber utilizarlo. Con esto, no pretendo decirte que aprendas
la codificación de los colores de memoria, ni mucho menos, solo que te familiarices
con ella. Utiliza la notación decimal o la hexadecimal, pero intenta evitar, en la
medida de lo posible, mezclarlas en el mismo desarrollo, lo agradecerás cuando
quieras realizar modificaciones sobre el código más adelante. Recuerda que el poder
de la web reside en la accesibilidad universal de la misma. Haz uso de alguna
utilidad, como el Planning Colors Checker para Firefox, para validar el contraste
de colores de frente y fondo y asegurar un mínimo de accesibilidad en tus páginas.

Puedes consultar los nombres de los colores en la página de la w3schools. También

puedes obtener los códigos de color en RGB y hexadecimal, en colorpicker.com.
Tienes disponible Color Contrast Checker, una utilidad muy fácil de usar, para
comprobar el contraste de color de frente y fondo.

Y como no todo va a ser trabajo, ¿qué tal si jugamos un poco? Te presento

color.method.ac. Yo obtuve un siete y medio y estoy medio cegato. Te invito a que
superes mi marca.

Puedes hacerme llegar cualquier duda a través de mi correo electrónico o de mi

cuenta en twitter. Recuerda que este vídeo forma parte del curso Introducción al
desarrollo web, disponible en la dirección idesweb.es.

Aspectos clave
Debes ver el vídeo CSS: colores en el que se explican los métodos para definir
colores, los nombres de los colores, el método RGB (Red, Green, Blue), la notación
de los colores en decimal, porcentaje y hexadecimal y el uso de los colores en CSS
mediante las propiedades color, background-color y border-color.

----------------------------LECCIÓN
8----------------------------------------------------------------------------------
-----------------------------------

En este vídeo que forma parte del curso Introducción al desarrollo web, voy a
explicar los selectores CSS avanzados. Puedes encontrarme en mi web
guzmanfernandez.com y en twitter como pie izquierdo. También puedes contactar
conmigo a través de mi correo electrónico [email protected].

En el vídeo selectores CSS, vimos los selectores básicos, otros selectores, como
los selectores de enlace o su estado, la combinación de selectores y la agrupación
de reglas.

CSS2 incluyó algunas mejoras para realizar selecciones, como las que veremos a
continuación. A menudo pretendemos seleccionar cierto nivel de anidamiento, pero
las reglas se nos van de las manos. En el ejemplo, vemos cómo seleccionar los
elementos de una lista desordenada, pero, ¿por qué se seleccionan todos? Como
verás, todos los elementos cumplen la regla, están dentro de una etiqueta ul y son
etiquetas li.

En un primer momento se nos ocurriría, que la lista anidada cumple con el esquema y
que dándole un identificador a la principal, se soluciona el problema. La idea es
buena, pero observa que sigue cumpliéndose la regla. Dentro de la lista desordenada
con identificador lista, hay cinco ítems, lo cambio de color para que se vea mejor,
puedo parecer pesado, pero no te imaginas la cantidad de veces que he visto casos
como éste.

¡Vale, vale! ya lo solucionamos. Si entre el selector de la etiqueta superior, en

este caso, a la lista con identificador lista y el de las etiquetas anidadas,
incluimos el carácter mayor que, solo se seleccionarán los elementos li, que sean
descendientes directos. Desafortunadamente, ni siquiera en CSS3, existe el carácter
menor que, para seleccionar etiquetas padre.

Seguro que te encontrarás con casos en los que quieras aplicar estilos a ciertos
elementos, dependiendo de si tienen otro elemento junto a ellos o no. En el
ejemplo, puedes ver cómo funciona el selector +, entre dos elementos. En este caso,
se aplicarán los estilos a todos los elementos span, que estén tras una imagen con
clase new. ¡Ojo! Solo los inmediatamente contiguos.

En este caso, no se aplicaría el estilo a la palabra php, ya que no sucede

inmediatamente a una imagen con clase new. Puede que quieras destacar el primer
elemento de una lista y ya que nos ponemos, por qué no poder darle estilos a la
primera línea de un párrafo o a la primera letra de un texto.

El selector :first-child, de forma conjunta a un elemento, en el ejemplo li, aplica

la regla al primer elemento de ese tipo, que además sea el primero anidado, en este
caso en la etiqueta ul. En este otro, como el primer li con clase letra, no es el
primero de su grupo, no se aplicará el estilo.

Sí, hay un selector last-child, pero solo a partir de CSS3 y entrar ahí sería
salirnos de tema. Siguiendo con los primeros de la fila, el selector : first-
letter, es bastante más intuitivo. Se aplica a la primera letra del texto, del
elemento seleccionado. Puede servirte, por ejemplo, para simular letras capitales.

Por último, el selector : first-line, se aplica a la primera línea del texto del
elemento seleccionado. En el ejemplo, he forzado el salto de línea, puesto que no
tengo espacio para más, sin embargo, en los códigos de ejemplo disponibles, he
incluido un párrafo lo suficientemente largo, como para que tenga más de una línea.
Efectivamente con : first-line, solo se aplicará a la primera línea de este
párrafo, no es necesario insertar saltos de línea.

Y, ¿por qué no utilizar otros atributos, propios de ciertas etiquetas, para darles
estilos? Vamos a verlo.

El código HTML que utilizaré en esta parte, muestra tres párrafos con un enlace
cada uno, cuyos diferentes atributos espero ya te sean familiares.

Si especificamos entre corchetes el nombre de un atributo, en este caso title, los

estilos se aplicarán a todos los elementos que tengan un atributo title, no importa
cuál sea su valor. Si quieres especificar más, puedes igualar el atributo a una
cadena de texto. En este caso escribimos title=Buscador. ¡Ojo! Distingue mayúsculas
de minúsculas, si escribiésemos buscador con b minúscula, no se aplicarían los
estilos al enlace, además, si en la cadena que vas a especificar, aparecen
caracteres no alfanuméricos, es muy posible que necesites entrecomillarla, por
ejemplo, si quisiéramos hacer referencia a todos los enlaces vacíos, a aquellos
cuyo atributo href, es igual la tablilla, o a los enlaces cuyo atributo title,
fuera igual a la cadena, página del curso. Necesitaríamos especificar, tanto la
tablilla, como la frase entre comillas. Las comillas no molestan, por lo que te
recomiendo utilizarlas siempre.

Para seleccionar elementos cuyo atributo empieza por una palabra, como puede ser
top, en el caso de los identificadores de los enlaces del ejemplo, añadimos la
barra vertical, precediendo al símbolo igual. En la distribución del teclado en
español, puedes encontrar este carácter en la tecla 1. El valor del atributo del
elemento debe ser la palabra completa, como en el caso que vimos anteriormente sin
la barra vertical, o seguida del guion, como en el ejemplo.

Y uno más, mediante la virgilla o tilde de la ñ, en la tecla 4 para teclados con

distribución en español, o atl+126 de tu teclado numérico, podemos especificar que
el atributo contenga una palabra, esta vez el valor del elemento sí puede estar
separado por espacios. En el ejemplo, destacamos todos los enlaces cuyo atributo
title contenga la palabra curso.

Para que los selectores de tipo atributo funcionen correctamente en Internet

Explorer 8, es necesario que declares doctype. No sé si te resultará interesante
destacar las palabras o textos en otro idioma, pero también es posible centralizar
este comportamiento, sin necesidad de trabajar con clases.

:lang y entre paréntesis el código del idioma según la ISO 639, selecciona todas
las etiquetas cuyo valor del atributo lang, coincida con la especificada entre
paréntesis, como en el ejemplo. Ten cuidado, ya que algunos desarrolladores
incluimos el idioma principal de la página en la etiqueta HTML, Si le das estilos a
este idioma, se aplicará a todos los elementos de tu documento HTML. ¿Cómo?, ¿no
conoces la ISO 639? No te preocupes, te dejo un enlace al final del documento.

Mediante CSS, también es posible incluir contenido antes o después de la etiqueta

seleccionada. Algo no muy recomendado, ya que el contenido y el estilo, deberían
separarse, pero bien utilizado, ese contenido tiene más que ver con estilos que con
contenido en sí y consigue que esta regla tenga sentido. Por ejemplo, voy a incluir
el texto nuevo detrás de todos los enlaces cuya clase sea new y dep delante del
enlace cuya clase sea old.

Te presento el selector universal. Sí, algo tan sencillo como un asterisco, puede
arruinar tu hoja de estilos. Cuando se incluye en una regla, el selector universal
selecciona todos los elementos, sin mirar caras. ¿Cuándo lo utilizarás?
Probablemente nunca, al menos yo desaconsejó su uso, es difícil tenerlo bajo
control y puedes estar aplicando estilos sin darte cuenta.

Algunos autores lo utilizan para que todos los navegadores empiecen sin estilos o
para forzarle unos. A esta técnica se le denomina CSS reset y existen otras formas
menos agresivas de llevarla a cabo, te dejo un enlace al final del vídeo.

En resumen, hemos visto cómo seleccionar descendientes directos mediante el símbolo

mayor que. Elementos contiguos, gracias al carácter +. Como seleccionar el primer
elemento de un grupo o la primera letra o la primera línea de un texto utilizando
dos puntos. La selección de elementos con atributos especificándolos entre
corchetes. Cómo aplicar estilos a etiquetas en otros idiomas, con :lang. Y a
insertar contenido mediante CSS, utilizando :before y :after. Y sí, también intenté
convencerte de que no utilices el selector universal, asterisco.

Para terminar, te dejo unos consejos que espero te sean de utilidad. Reinicia la
hoja de estilos, para que todos los navegadores empiecen con los mismos estilos por
defecto. En la medida de lo posible, no utilices el selector universal para esta
tarea, en su lugar busca un CSS reset que te guste. Cuidado con las reglas a partir
de selectores del nuevo estándar CSS3, seguramente no se apliquen a navegadores
antiguos. Simplifica los documentos HTML, de esta forma no tendrás que utilizar
reglas complejas en CSS, y usa clases para centralizar y estandarizar estilos,
sobre todo en lo que a colores y tipografías se refiere.

Puedes consultar el uso de los selectores vistos en este vídeo y los de CSS3 en la
página de la w3schools. Te dejo el enlace a la ISO 639-1 como te dije. la ISO 639,
tiene más de una parte en la que se especifican más idiomas, pero incluir enlaces a
todas las partes de la ISO me pareció un poco friki y no creo que llegues a
necesitarlos. Para reiniciar estilos, en lugar de utilizar el selector universal,
puedes utilizar el CSS reset, de Eric Meyer, uno de los mejores que encontrarás en
la web.

Te recuerdo que puedes hacerme llegar cualquier duda a través de mi correo

electrónico o de mi cuenta en twitter y que este vídeo forma parte del curso
Introducción al desarrollo web, disponible en la dirección idesweb.es. Muchas
gracias por tu atención.

Aspectos clave
Debes ver el vÃdeo CSS: selectores avanzados en el que se te muestran algunos
selectores avanzados, como descendientes directos, elementos contiguos, :first-
child, :first-letter, :first-line, valores de atributos, :lang, :after, :before y
content.

----------------------------LECCIÓN
9----------------------------------------------------------------------------------
-----------------------------------

En este vídeo, que forma parte del curso Introducción al desarrollo web, te voy a
presentar algunos de los nuevos selectores que existen en CSS3. Los selectores de
CSS3 están definidos en el documento Selectors Level Three, una recomendación del
W3C, de septiembre de 2011. La lista de selectores definidos en CSS3 es enorme.
CSS3 incluye los selectores definidos en CSS1 y CSS2. En este vídeo vamos a ver
algunos de los nuevos selectores de CSS3. En CSS2 se definió la pseudoclase first-
child, que permite definir una regla que se aplica al primer hijo del selector
indicado. En este ejemplo, se selecciona el primer elemento de la lista y se le
aplica al estilo de texto en negrita.

En CSS3 se han añadido estos selectores que complementan a first-child de CSS2.

Last-child selecciona el último elemento de la lista. Las otras dos pseudoclases
seleccionan el hijo enésimo, empezando desde el principio o desde el final de la
lista de hijos. Por tanto, existe una equivalencia con first- child y last-child,
cuando ambos selectores, ambas pseudoclases, toman el valor 1.

En este ejemplo, se selecciona el segundo elemento de la lista y se le aplica el

estilo de texto negrita. Estos selectores son similares a los anteriores, pero
seleccionan un hijo entre todos los que son del mismo tipo y que ocupe la posición
indicada. El funcionamiento de estas pseudoclases puede ser un poco confuso, así
que vamos a ver un ejemplo para entenderlo mejor.

P:first-child selecciona un párrafo cuando sea el primer hijo de su padre, en este

caso, ningún párrafo es el primer hijo, así que la regla CSS no se aplica. Sin
embargo, p:first-of-type, sí selecciona el primer párrafo HTML, aunque sea el
segundo hijo de su padre section, porque este párrafo es el primer hijo, entre
todos los hijos de tipo párrafo. ¿Se entiende? ¿está claro?

Por último, en CSS3 se ha añadido este operador, la tilde o virguilla, para

seleccionar un elemento en función de sus hermanos. Este operador es el complemento
al operador + definido en CSS2. Vamos a recordar primero el funcionamiento de este
operador, en este ejemplo, puedes ver cómo funciona el selector + entre dos
elementos. En este caso se aplica el estilo a todos los elementos p que estén justo
detrás de un elemento h1. Solo se aplica a los inmediatamente contiguos, así que
solo se aplica al primer párrafo. Sin embargo, al aplicar este otro operador, los
elementos p, no tienen que ser inmediatamente contiguos a h1, solo tienen que ser
hermanos de h1. Así que en este ejemplo la regla CSS, se aplica a todos los
párrafos del fragmento de código HTML.

Muchas gracias por tu atención.

Aspectos clave
Debes ver el vÃdeo CSS: selectores CSS3 en el que se presentan los nuevos
selectores que incorpora CSS3: :last-child, :nth-child(n), :nth-last-child(n),
:first-of-type, :last-of-type, :nth-of-type(n), :nth-last-of-type(n) y ~.

-------------C Ó M O S E D E F I N E L A P R E S E N T A C I Ó N D E L
O S E L E M E N T O S D E U N A P Á G I N A W E B--------------

---------------------LECCIÓN
1----------------------------------------------------------------------------------
--------------------------------------------

En este vídeo, que forma parte del curso Introducción al desarrollo web, te voy a
explicar cómo se define con CSS el estilo de una lista.

Este vídeo complementa al vídeo HTML listas. En ese vídeo se explicaban las
etiquetas de HTML, que se emplean para definir las listas. La presentación visual
de una lista se puede cambiar, por ejemplo, en el caso de una lista no ordenada, en
vez de un círculo relleno, un disco, se puede cambiar el estilo del marcador para
que sea el contorno de un círculo o un rectángulo. Esto se logra con la propiedad
de CSS list-style-type. ¿Qué valores puede tomar esta propiedad? Si consultamos la
especificación de CSS2 del W3C y buscamos esta propiedad, podemos encontrar la
lista de todos los posibles valores que puede tomar esta propiedad. Esta propiedad
toma distintos valores según sea una lista no ordenada o una lista ordenada.

En el caso de una lista no ordenada list-style-type puede tomar los valores disc,
que es el valor por defecto, circle y square. Por ejemplo, para el ejemplo
anterior, habría que definir las reglas de CSS que se indican para estas dos listas
y que puedes ver en la imagen.

El estilo de una lista ordenada o numerada se puede cambiar directamente en la

lista con el atributo type de HTML, pero también se puede emplear el atributo list-
style-type, que se aplica a las listas no ordenadas y a las listas ordenadas. En el
caso de las listas ordenadas, este atributo puede tomar los siguientes valores que
permiten modificar el formato de numeración de los elementos de la lista, se puede
modificar para que se empleen números romanos, letras o, simplemente, números. Por
ejemplo, para el ejemplo anterior, se pueden definir estas cuatro clases de CSS en
las que se usa el atributo list-style-type con estos valores, para modificar la
presentación de las listas.

La siguiente propiedad que vamos a ver es list-style-position, que permite

modificar la posición del marcador que define cada elemento en una lista. Esta
propiedad de CSS puede tomar dos valores, outside, que es el valor por defecto, e
inside. Vamos a ver un ejemplo sencillo para entender su significado. En este
ejemplo, se han definido dos clases de CSS, in y out, que modifican la posición del
marcador de la lista, además, también se modifica el estilo de la lista, pero la
propiedad list-style-type no es lo importante de este ejemplo, así que, que no te
confunda.

A la izquierda aparece el código HTML de tres listas y a la derecha aparece el

resultado tal como se visualiza en un navegador web. Si trazamos una línea vertical
imaginaria, podemos apreciar la diferencia entre el valor inside y el valor
outside. En cada caso el marcador queda a un lado distinto de la línea trazada.

La siguiente propiedad, list-style-image, se utiliza para definir una imagen que se

emplea como marcador de los elementos de una lista. Por ejemplo, para utilizar esta
imagen, un pequeño triángulo, como marcador de los elementos de una lista, se puede
definir esta clase de CSS y, al aplicarla a esta lista, se obtiene el resultado que
se puede ver a la derecha.

Ahora te invito a que veas la segunda parte de este vídeo, en el que se muestra un
ejemplo de creación de una barra de navegación vertical y horizontal con una lista.

Aspectos clave
En el siguiente vídeo se explica cómo se puede definir la presentación de una lista
de elementos con las propiedades de CSS list-style-type, list-style-position y
list-style-image.

---------------------LECCIÓN
2----------------------------------------------------------------------------------
--------------------------------------------

En este vídeo, que forma parte del curso Introducción al desarrollo web, te voy a
explicar cómo se define con CSS el estilo de una lista.

Este vídeo es la segunda parte del vídeo: CSS definir el estilo de una lista. En
ese vídeo se vieron las principales propiedades que se emplean para definir la
presentación de una lista, list-style-type, list-style-position y list-style-image.
Ahora, en este vídeo, vamos a ver un ejemplo.

Las listas se pueden, y en realidad se deben emplear, para crear las barras de
navegación de un sitio web, ya que una barra de navegación horizontal o vertical es
en realidad un conjunto de enlaces, una lista de enlaces. Supongamos que tenemos un
sitio web que posee cuatro páginas principales, la página principal, la página de
productos, la página de servicios y la página de contacto. Esta lista formada por
cuatro enlaces, inicio, productos, servicios y contacto, puede ser la barra de
navegación principal de este sitio web.

¿Cómo se puede lograr que esta lista, que por defecto se visualiza de esta forma,
se muestre como una barra de navegación vertical u horizontal? En primer lugar,
este es el código HTML que define una lista con cuatro enlaces. Las URLs que
aparecen, no tienen ninguna importancia en este ejemplo. Este código HTML sirve
tanto para la barra de navegación vertical como para la barra de navegación
horizontal.

En primer lugar, vamos a realizar varios cambios en la presentación de la lista.

Por un lado, vamos a eliminar el subrayado que aparece por defecto en los enlaces,
esto se logra con esta regla de CSS, en la que se emplea la propiedad text-
decoration y el valor none. A continuación, vamos a eliminar el punto que aparece
en la lista, para ello definimos esta clase de CSS que voy a aplicar a la lista. La
propiedad list-style-type con el valor none, hace que desaparezca el marcador de la
lista.

Ahora ya tenemos la lista preparada para darle formato, ya sea vertical u

horizontal. Vamos a ver primero la barra de navegación vertical. En la barra
vertical voy a poner un efecto con CSS, cuando el cursor del ratón se sitúa encima
de un enlace o un enlace reciba el foco, el enlace se va a destacar con un color de
fondo distinto, tal como se puede ver en la lista que aparece a la derecha. Para
ello defino estas dos reglas de CSS. La primera regla define la presentación de los
enlaces de la lista, cambia su modo de visualización a bloque para poder definir
una anchura. Define el color del texto como blanco y un color de fondo verde,
centra el texto y le añade un espacio interior, con la propiedad padding, para que
sea más grande el enlace. La segunda regla define el comportamiento del enlace,
cuando se sitúe el cursor del ratón encima o reciba el foco, cambia el color de
fondo a un verde más oscuro. En la lista, simplemente hay que añadir las dos clases
para lograr el efecto deseado.

Veamos ahora el código CSS para lograr una barra de navegación horizontal. En este
caso, también vamos a tener un efecto con CSS. Cuando el cursor del ratón se sitúe
encima de un enlace o un enlace reciba el foco, el enlace se va a destacar con un
color de fondo distinto. Para definir la barra de navegación horizontal, defino
estas tres reglas de CSS. En la primera, los elementos de la lista se definen como
flotantes, para que se coloquen uno a continuación del otro de forma horizontal. La
segunda regla es muy similar a la misma regla que se emplea en la barra de
navegación vertical, elimina los márgenes, define el color del texto como blanco y
un color de fondo verde, centra el texto y le añade un espacio interior, con la
propiedad padding, para que sea más grande. Por último, en la tercera regla, se
define el comportamiento de los enlaces cuando el cursor del ratón se sitúa encima
de ellos o reciben el foco.

Por último, en la lista simplemente hay que añadir las dos clases para lograr el
efecto deseado.

Aspectos clave
En el siguiente vídeo se muestra un ejemplo de definición del estilo de una lista
para crear una barra de navegación vertical y horizontal.

---------------------LECCIÓN
3----------------------------------------------------------------------------------
--------------------------------------------

En este vídeo, que forma parte del curso Introducción al desarrollo web, te voy a
explicar cómo se define con CSS, el estilo del texto.

En CSS existen muchas propiedades para definir el estilo del texto. En este vídeo,
vamos a ver el conjunto de propiedades que comienzan con el prefijo font. En la
recomendación de CSS1, que se publicó en diciembre de 1996, se definían las
propiedades font-family, font-style, font-variant, font-weight y font-size, que son
las que vamos a ver en este vídeo.

La propiedad font, es un resumen de las anteriores y permite modificar las

anteriores con una sola regla.

CSS3 es muy complejo y se ha dividido en varios módulos. Existe un módulo

específico para el tipo de letra llamado CSS Fonts Module Level 3, que añade
propiedades nuevas. La mayoría de los navegadores actuales no admiten estas
propiedades, además estas propiedades son muy específicas y es muy improbable que
las vayas a utilizar alguna vez. Las nuevas propiedades de CSS3, permiten un ajuste
tipográfico muy fino y tienen sentido en la actualidad porque la resolución de los
dispositivos de visualización ha aumentado considerablemente, por ejemplo,
compárese la resolución VGA, de 640 x 480, tan común hace 15 años, con la
resolución FULL HD 1920 x 1080, que se ha convertido en el estándar actual.

Las propiedades que vamos a ver a continuación, son font-family, font-size, font-
weight, font-style y font-variant.

Font-family permite modificar la familia tipográfica, el tipo de letra. Existen

miles y miles de familias tipográficas. Como existen tantas familias tipográficas,
se han propuesto varias clasificaciones para poder ordenarlas y compararlas. Una de
las más conocidas es la clasificación tipográfica de Francis Thibaudeau, que divide
las familias tipográficas en tres grupos, con Serifas, sin Serifas y otras
tipografías.

Las Serifas son las terminaciones, las decoraciones o adornos, que aparecen en los
extremos de algunas letras, como en este ejemplo, la letra s, la r, la i y la f.
Estas terminaciones proporcionan un aspecto más elegante y clásico y facilitan la
lectura en los documentos impresos. En los tipos de letras sin Serifas, estas
terminaciones no aparecen. Los tipos de letras sin Serifas, también se conocen en
español como de palo seco.

A la hora de especificar la familia tipográfica que se quiere emplear, se puede

indicar una lista de tipos de letra, por ejemplo, en este código para el elemento
h1, se ha indicado el tipo de letra Times New Roman y el tipo Georgia, y para el
elemento p, un párrafo, el tipo de letra Arial y el tipo Helvética.

Un navegador web intentará emplear el primer tipo de letra definido, si no puede

utilizarlo, pasará al segundo tipo de letra, después al tercero y, así
sucesivamente, hasta el final. Si ninguno de los tipos de letra definidos puede ser
utilizado, el navegador utilizará un tipo de letra por defecto, pero quizás el tipo
de letra no se ajuste a nuestro diseño. Para solventar este problema, se recomienda
indicar siempre un tipo genérico, al final de la lista de tipos de letra.

Las familias o tipos genéricos son serif y sans-serif, para los tipos de letra con
Serifas y sin Serifas, cursive para tipografías que simulan la escritura a mano,
como, por ejemplo, Lucida Handwriting, fantasy para tipografías exageradas que se
emplean en anuncios y posteres y monospace para las tipografías en las que cada
carácter ocupa, exactamente, la misma cantidad de espacio horizontal.

Font-size especifica el tamaño de la letra, que se puede especificar de muchas

formas. Existen cuatro formas, de forma absoluta, relativa, mediante un tamaño
especificado con distintas unidades de medida y mediante un porcentaje.

Font-weight permite seleccionar el peso del tipo de letra. El peso es el grosor de

los caracteres. La propiedad font-weight puede tomar todos estos valores, pero
normalmente, solo se emplean normal y bold. La razón de ello, es que normalmente,
una familia tipográfica no incluye todos los pesos existentes, solo unos pocos, por
tanto, cuando se emplea una familia tipográfica, conviene conocer sus
características para saber lo que se puede usar.

Font-style permite seleccionar el estilo de la fuente del tipo de letra. La

propiedad font-style puede tomar estos tres valores, normal, italic y oblique. En
esta imagen se representan dos letras con los tipos de letra Palatino y
Baskerville. El estilo oblicuo suele ser el estilo de letra normal, que se ha
inclinado, como si fuera una figura geométrica que ha sufrido una transformación.
Sin embargo, el estilo cursiva, italic, es un diseño específico de las letras con
una inclinación y una forma distinta a la normal.

La última propiedad, font-variant, permite seleccionar variaciones del tipo de

letra. Esta propiedad puede tomar dos valores, normal y small-caps.

Small-caps, en español, es el tipo de letra Versalita, letra en mayúsculas, cuyo

tamaño es similar al de las minúsculas.

Antes de terminar, te invito a que utilices este configurador de tipos de letra,

que puedes encontrar en el Mozilla Developer Network, por ejemplo, aquí, he elegido
como variante Versalitas, small-caps. El tamaño lo he fijado a 24 píxeles y la
familia tipográfica seleccionada es serif. Este es un ejemplo del texto con el tipo
de letra seleccionado. En este otro ejemplo, he elegido el estilo cursiva, italic.
El peso es negrita y el tamaño 24 píxeles. La familia tipográfica seleccionada es
sans-serif. Por último, este es un ejemplo de texto con el tipo de letra
seleccionado. Ahora te invito a que veas la segunda parte de este vídeo.

Muchas gracias por tu atención.

Aspectos clave
Debes ver el vÃdeo CSS: definir el estilo del texto (1), en el que se explican las
siguientes propiedades de CSS:

font-family
font-size
font-weight
font-style
font-variant

---------------------LECCIÓN
4----------------------------------------------------------------------------------
--------------------------------------------

En este vídeo, que forma parte del curso Introducción al desarrollo web, te voy a
explicar las principales propiedades de CSS que existen para definir el estilo del
texto.

En la primera parte de este vídeo, vimos las principales propiedades que comienzan
con el prefijo font. Font-family, font-size, font-weight, font-style y font-
variant.

En este vídeo, vamos a ver unas propiedades de CSS, que comienzan con el prefijo
text. En concreto vamos a ver las propiedades text-align, text-indent, text-
decoration y text-transform.

La propiedad text-align, se emplea para definir la justificación o alineación del

texto. Esta propiedad puede tomar los valores left, a la izquierda, right, a la
derecha, center, centrado y justify, justificado, es decir, alineado a la izquierda
y a la derecha a la vez.

En este ejemplo, podemos ver el mismo párrafo alineado a la izquierda y a la

derecha y, en este otro ejemplo, el primer párrafo está centrado y el segundo
justificado, está alineado a la izquierda y a la derecha.

La propiedad text-indent, especifica la sangría de la primera línea de un bloque de

texto. La sangría se puede indicar utilizando las unidades de medida que se emplean
para indicar el tamaño del texto con la propiedad font-size. En este ejemplo, el
primer párrafo no posee sangría en la primera línea, mientras que, en el segundo,
se ha definido una sangría de un centímetro y, en este otro ejemplo, la primera
línea posee una sangría relativa del 50%, el 50% del ancho disponible para mostrar
el texto.

La propiedad text-decoration, se emplea para definir algunos adornos que se pueden

añadir al texto. Esta propiedad puede tomar los valores none, ninguno, underline,
subrayado, overline, para el subrayado por la parte superior, line-through, para el
tachado y blink, para el parpadeo.

En este ejemplo, se muestra el uso de la propiedad text-decoration con cuatro

valores, underline, overline, line-through y blink.

Por último, la propiedad text-transform se emplea para convertir en mayúsculas o

minúsculas un texto. Esta propiedad puede tomar los valores capitalize, uppercase,
lowercase y none.

En este ejemplo, se muestra el uso de la propiedad text-decoration, con los valores

capitalize, uppercase y lowercase. El valor capitalize coloca en mayúsculas la
primera letra de cada palabra, mientras que uppercase, transforma a mayúsculas todo
el texto y lowercase, a minúsculas.

Aspectos clave
Debes ver el vÃdeo CSS: definir el estilo del texto (2), en el que se explican las
siguientes propiedades de CSS:

text-align
text-indent
text-decoration
text-transform
---------------------LECCIÓN
5----------------------------------------------------------------------------------
--------------------------------------------

En este vídeo, que forma parte del curso Introducción al desarrollo web, te voy a
explicar las principales propiedades de CSS que existen para definir el estilo del
texto.

En la primera parte de este vídeo, vimos las principales propiedades que comienzan
con el prefijo font: font-family, font-size, font-weight, font-style y font-
variant. En la segunda parte de este vídeo vimos las propiedades que comienzan con
el prefijo text: text-align, text-indent, text-decoration y text-transform. En este
vídeo vamos a ver cuatro propiedades que se emplean para configurar la presentación
del texto. Letter-spacing, word-spacing, line-height y white-space.

La propiedad letter-spacing, define la distancia de separación entre los caracteres

de un texto. El espacio se puede indicar utilizando las unidades de medida que se
emplean para indicar el tamaño del texto con la propiedad font-size. Esta propiedad
puede tomar un valor negativo, tal como se muestra en este ejemplo. Hay que llevar
mucho cuidado con su uso, ya que los resultados pueden ser desastrosos, tal como se
puede ver en este ejemplo.

La propiedad word-spacing, es similar al letter-spacing, pero define el espacio

entre las palabras. Al igual que letter-spacing, la distancia de separación se
puede indicar utilizando las unidades de medida que se emplean para indicar el
tamaño del texto, con la propiedad font-size. Esta propiedad también puede tomar
valores negativos y los resultados también pueden ser desastrosos, así que se tiene
que usar con mucho cuidado.

La propiedad line-height, especifica la altura mínima entre las líneas de texto en

un elemento, como puede ser un párrafo. Otra vez, la altura de la línea se puede
indicar utilizando las unidades de medida que se emplean para indicar el tamaño del
texto, con la propiedad font-size. En este ejemplo, el primer párrafo se visualiza
con la altura por defecto. En el segundo párrafo se ha aumentado a 1,5 em o un 150%
y en el último párrafo a 2 em o un 200%.

Y ya, por último, la propiedad white-space, que define cómo se comportan los
espacios en blanco dentro de un elemento. En HTML los espacios en blanco y los
saltos de línea no son significativos. Este párrafo se representa de esta forma en
un navegador web, entre las palabras 1, 2, 3, 4, 5 y 6, solo se visualiza un
espacio en blanco, aunque en el código haya más espacios y la frase, “Y esto está
en otra línea”, no aparece en otra línea, aparece en la primera línea. Este
comportamiento se puede modificar con la propiedad white-space, que puede tomar los
valores normal, pre, nowrap, pre-wrap y pre-line.

En este ejemplo, al párrafo del ejemplo anterior, se le aplica la propiedad white-

space pre, que produce que los espacios en blanco y los saltos de línea se
respeten. Es equivalente a la etiqueta pre de HTML para definir texto pre
formateado. El segundo párrafo es la forma normal de visualizar un párrafo. Si el
texto del párrafo no cabe en el ancho disponible, el navegador introduce un salto
de línea para que el texto continúe en la línea siguiente.

Sin embargo, la propiedad white-space nowrap, anula este comportamiento y la línea

no se corta, continúa más allá del ancho de la ventana del navegador y se tiene que
mostrar la barra de desplazamiento horizontal.
Aspectos clave
Debes ver el vÃdeo CSS: definir el estilo del texto (3), en el que se explican las
siguientes propiedades de CSS:

letter-spacing
word-spacing
line-height
white-space

---------------------LECCIÓN
6----------------------------------------------------------------------------------
--------------------------------------------

En este vídeo, que forma parte del curso Introducción al desarrollo web, te voy a
explicar las novedades sobre los colores en CSS3.

En el vídeo anterior, CSS colores, vimos las distintas formas de especificar un

color en CSS1 y CSS2. Recuerda que estas formas también siguen siendo válidas en
CSS3.

En CSS3, el uso del color está definido en la especificación CSS Color Module Level
3. CSS3 hace oficial la lista extendida de los nombres de los colores que ya se
usaban en CSS2, por tanto, esto no es realmente una novedad.

En CSS3 se incluyen, principalmente, dos novedades sobre el color. La opacidad o

transparencia del color y el modelo de color HSL.

La opacidad se puede incluir en el esquema RGB, añadiéndole un cuarto canal

conocido como alfa, que con valores entre 0 y 1, donde 0 es completamente
transparente y 1 completamente opaco, permite especificar la opacidad del color. En
el ejemplo, puedes ver un párrafo sobre el logotipo del curso con un color de fondo
RGB y ahora, gracias a la magia del cuarto canal, el mismo ejemplo con una opacidad
del 75 %, del 50%, del 25% y, finalmente, del 0%, totalmente transparente. A
diferencia de RGB, no hay notación hexadecimal para RGBA.

Vamos a ver ahora, la otra novedad importante en el uso de los colores que incluye
CSS3. HSL define los colores mediante matiz, saturación y luminosidad. El modelo
HSL mejora un punto débil del modelo RGB, ya que HSL es más intuitivo, porque
define los colores de la misma forma que lo hace el ojo humano. No obstante,
también es un modelo criticado por ser dependiente del dispositivo. La sintaxis es
muy parecida a la del modelo RGB. La diferencia fundamental es que el matiz, se
mueve en un rango de valores entre 0 y 360, mientras que la saturación y la
luminosidad son valores porcentuales.

Si te lo estás preguntando, sí, puedes utilizar el canal alfa también para HSL, de
la misma forma que lo haces para RGB. Seguramente no te habrás fijado antes, pero
en muchos cuadros de diálogo para seleccionar colores, aparece la posibilidad de
usar el matiz, la saturación y la luminosidad. No obstante, te recomiendo que
utilices alguna herramienta específica para HSL, como esta que te muestro aquí y
que está disponible de forma gratuita en la web. Esta herramienta puede ser muy
útil para construir paletas de colores, ya que, solo cambiando el matiz, se pueden
conseguir colores que combinan de forma armoniosa.

Ahora te recomiendo que veas el vídeo: CSS ejemplo de uso de colores transparentes.
Este vídeo está basado en los vídeos: CSS colores y CSS colores, novedades en CSS3,
de Guzmán Fernández que puedes encontrar en estas direcciones de YouTube.
Aspectos clave
Debes ver el vídeo CSS: Colores - Novedades en CSS3, en el que se explican los
nuevos métodos para definir colores en CSS3, se explica el canal alfa que permite
definir la opacidad o transparencia (RGBA) y el modelo de color HSL (Hue,
Saturation, Lightness) que define el matiz, la saturación y la luminosidad.

---------------------LECCIÓN
7----------------------------------------------------------------------------------
--------------------------------------------

En este vídeo, que forma parte del curso Introducción al desarrollo web, te voy a
explicar cómo usar el canal alfa, que define la transparencia de los colores, para
cambiar todos los colores de un diseño modificando una sola línea de un CSS.

Recuerda que en CSS3 la opacidad de un color se puede incluir en el esquema RGB,

añadiéndole un cuarto canal conocido como alfa. Este canal puede tomar valores
entre 0 y 1, siendo 0 completamente transparente y 1 completamente opaco.

Aquí te muestro el típico diseño de una barra de herramientas de un sitio web,

compuesta por un enlace que navega a la página principal, un cuadro de texto para
introducir un término a buscar y un botón etiquetado con el signo +, para activar
alguna opción. Lo que te voy a mostrar es cómo lograr que todo el diseño cambie,
que, por ejemplo, se base en un color azul o se base en un color verde, simplemente
cambiando una línea de código CSS. Fíjate que no solo cambia el color de fondo de
la barra, cambia el color de todos los elementos que componen la barra de
herramientas. Además, en el código que te voy a mostrar, se ha definido un efecto
para cuando el cursor del ratón se sitúe encima del enlace o reciba el foco. Ese
mismo efecto también se produce en el cuadro de texto y en el botón con el signo +.

Aquí te muestro el código HTML de la página. Como puedes ver, la página es muy
sencilla, se compone de un encabezado h1 y un formulario que posee el cuadro de
texto y el botón. Para que lo entiendas mejor, aquí te muestro la página web sin
aplicarse un CSS.

Ahora te voy a mostrar el código CSS. El cambio del color de la barra de

herramientas y de todos sus componentes, lo realizó simplemente cambiando esta
línea, solo cambiando esta línea, puedo lograr que todos los colores de la barra de
herramientas se ajusten al nuevo color de fondo de la misma. ¿Cómo se hace? La
clave está en usar el canal alfa, donde 0 es completamente transparente y 1
completamente opaco. Por ejemplo, para los enlaces, se ha definido como color de
fondo el blanco, con un nivel de transparencia 0.6, es decir, más opaco que
transparente. Sin embargo, para el color de fondo del cuadro de texto y del botón,
también se ha definido un color de fondo blanco, pero con un nivel de transparencia
de 0.3, es decir, más transparente que opaco.

La diferencia la podemos apreciar en esta imagen. El color de fondo del enlace es

más blanco, es decir, más opaco que el color de fondo del cuadro de texto y del
botón.

Por último, para lograr el efecto en el enlace, se ha empleado la propiedad

transition, para cuando se produzca un cambio en la propiedad background-color del
enlace. Como vemos aquí, se produce un cambio de la propiedad background-color, con
los pseudo clases hover y focus, aplicadas al enlace.

Para lograr el mismo efecto en el cuadro de texto y en el botón con el signo +, se

ha empleado otra vez la propiedad transition, para cuando se produzca un cambio en
la propiedad background-color del cuadro de texto y del botón. El cambio de esta
propiedad se produce con las pseudo clases hover y focus, es decir, cuando el
cursor del ratón se sitúa encima del elemento o cuando el elemento recibe el foco
del teclado.

Aspectos clave
Debes ver el vídeo CSS: ejemplo de uso de colores transparentes en el que se
explica el empleo de la propiedad de transparencia/opacidad de RGBA para configurar
una barra de herramientas a partir de un único color.

---------------------LECCIÓN
8----------------------------------------------------------------------------------
--------------------------------------------

En este vídeo, que forma parte del curso Introducción al desarrollo web, te voy a
explicar que es la cascada y la herencia, dos conceptos muy importantes que hay que
conocer cuando se escribe un CSS.

CSS es el acrónimo de Cascading Style Sheets. Si en el nombre de esta tecnología

aparece el término cascading, en cascada, es porque se trata de una característica
muy importante. La recomendación oficial de CSS tiene una sección dedicada a la
forma de asignar un valor a una propiedad. El valor se asigna teniendo en cuenta
diferentes reglas. Para calcular el valor de la propiedad CSS de un elemento
concreto en una página web, se tiene que tener en cuenta el valor especificado, el
valor calculado, el valor usado y finalmente el valor real.

El estilo final de un elemento se puede especificar en diferentes sitios y de

diferentes maneras, que pueden interactuar de una forma compleja. Por ejemplo, el
color final de este elemento, depende de diferentes reglas que existen en el CSS
que se aplica. Como vemos, existen diferentes reglas que definen el color, pero una
de ellas ganará y será el color que, finalmente, mostrará el elemento. Este
mecanismo proporciona una gran potencia a CSS, pero también hace que sea confuso y
difícil de utilizar, si no se conoce cómo funciona.

Para el cálculo del valor de una propiedad en cascada, se aplican tres fuentes de
información. En primer lugar, los estilos por defecto que tiene definido el agente
de usuario, es decir, el navegador web del usuario. A continuación, los estilos
especificados por el usuario que está leyendo el documento y, por último, los
estilos definidos por el autor de la página web. Este es el orden de aplicación de
los estilos, de menor prioridad a mayor prioridad. Todos estos estilos definen el
estilo final que tiene un elemento en una página web.

Los estilos del agente de usuario son los estilos que incorpora cada navegador de
fábrica. Lo lógico es esperar que todos los navegadores utilicen el mismo estilo
por defecto, pero desgraciadamente no es así, y existen algunas diferencias
sutiles, que pueden ocasionar grandes diferencias cuando una página web se
visualiza en diferentes navegadores.

CSS2.1 define una hoja de estilo por defecto para HTML 4. Si revisamos esta hoja de
estilo por defecto, podemos encontrar cosas interesantes. Por ejemplo, el cuerpo de
la página tiene definido un margen de 8 píxeles o estos son los tamaños que tienen
definidos los encabezados desde h1 hasta h6. Como podemos ver de h1 a h3 el tamaño
es mayor que el texto normal. H4 tiene definido el mismo tamaño que el texto normal
y h5 y h6 tienen definido un tamaño menor. Esta es la hoja de estilo por defecto
que define el W3C, pero cada navegador tiene definida la suya propia. En estas
direcciones podemos encontrar las hojas de estilo por defecto de Mozilla Firefox,
de varias de las versiones de Internet Explorer y de Safari. Para evitar este
problema, existen hojas de estilo que inicializan o resetean los estilos, para que
una página web se visualice de la misma forma en casi todos los navegadores.

La segunda fuente de información son los estilos del usuario, que son estilos que
define cada usuario y que se pueden emplear para sustituir los estilos que tiene
definidos una página web. Esta característica se puede utilizar para mejorar la
accesibilidad de una página web. En Internet Explorer se establece la hoja de
estilo del usuario, a través del menú herramientas, opciones de Internet y
accesibilidad. En otros navegadores como Google Chrome y Mozilla Firefox no existe
esta opción pero existen alternativas como la extensión Stylish, que está
disponible tanto para Google Chrome como para Mozilla Firefox. Con esta extensión,
el usuario puede aplicar su propia hoja de estilo a un sitio web.

Por último, los estilos del autor. Son los estilos que define el creador de una
página web. Estos estilos se pueden definir en tres puntos. En un fichero externo
enlazado con la etiqueta link, al principio de la propia página con la etiqueta
style y en un elemento concreto con el atributo style. El orden de aplicación de
los estilos se puede modificar con important, que aumenta la importancia de una
regla. Esta tabla resume el orden de aplicación de los estilos, de menor prioridad
a mayor prioridad, como se ve, si en los estilos del usuario se aplica el
modificador important, estos estilos tienen prioridad sobre todo el resto de
estilos.

Ahora te invito a que veas la segunda parte de este vídeo, en el que te muestro un
ejemplo de análisis de aplicación de los estilos en cascada.

Muchas gracias por tu atención.

Aspectos clave
Debes ver el vídeo CSS: cascada y herencia (1) en el que se explican la cascada y
la herencia, dos mecanismos de CSS que definen las reglas que se aplican para
decidir el valor final que toma una propiedad de un elemento concreto de una página
web. En el cálculo se tiene que tener en cuenta el valor especificado, el valor
calculado, el valor usado y finalmente el valor real.

---------------------LECCIÓN
9----------------------------------------------------------------------------------
--------------------------------------------

En este vídeo, que forma parte del curso Introducción al desarrollo web, te voy a
explicar qué es la cascada y la herencia, dos conceptos muy importantes que hay que
conocer cuando se escribe un CSS.

En el vídeo anterior vimos el concepto de en cascada. Recuerda que el proceso en

cascada define un orden de aplicación de los estilos del agente de usuario, del
usuario y del autor de la página web. En este vídeo, vamos a ver un ejemplo de
análisis de aplicación de los estilos en cascada.

Este es el código HTML de la página de ejemplo que voy a utilizar. La página tiene
un encabezado y un párrafo. En la hoja de estilo del agente de usuario, la hoja de
estilo que incorpora cada navegador web, el encabezado h1, tiene definido un estilo
por defecto. Ahora a la página le añado un CSS. El CSS es muy sencillo, solo
modifica el peso del encabezado para desactivar la negrita.
La hoja de estilo del autor tiene prioridad sobre la hoja de estilo del agente de
usuario, así que, el encabezado se muestra sin la negrita. Ahora defino una hoja de
estilo del usuario. En esta hoja el encabezado h1, vuelve a tener el estilo negrita
y, además, le añado el estilo cursiva.

En el vídeo anterior te expliqué cómo se puede establecer la hoja de estilo del

usuario en Internet Explorer. en otros navegadores como Google Chrome y Mozilla
Firefox, no existe esta opción en el propio navegador, pero recuerda que hay
complementos que añaden esta opción. La hoja de estilo del autor también tiene
prioridad sobre la hoja de estilo del usuario, por tanto, el encabezado se muestra
en cursiva, pero no se muestra en negrita, porque en la hoja de estilo del autor de
la página web, se modifica el peso del encabezado para desactivar la negrita y,
esta regla, tiene prioridad sobre la misma regla definida en la hoja de estilo del
usuario.

El texto del párrafo sí se muestra en azul, porque en la hoja de estilo del autor
no hay ninguna regla que lo impida. Ahora modifico la hoja de estilo del usuario y
le añado el modificador important a la regla que define que un encabezado se debe
mostrar en negrita. La hoja de estilo del usuario, cuando tiene el modificador
important, tiene prioridad sobre la hoja de estilo del autor, por tanto, el
encabezado se muestra en negrita, aunque vaya en contra de lo que está definido en
la hoja de estilo del autor de la página web.

Ahora te invito a que veas la tercera parte de este vídeo, en el que te explico el
concepto de la herencia en CSS.

Muchas gracias por tu atención.

Aspectos clave
Debes ver el vídeo CSS: cascada y herencia (2) en el que se desarrolla un ejemplo
de análisis de aplicación de los estilos en cascada.

---------------------LECCIÓN
10---------------------------------------------------------------------------------
---------------------------------------------

En este vídeo, que forma parte del curso Introducción al desarrollo web, te voy a
explicar qué es la cascada y la herencia, dos conceptos muy importantes que hay que
conocer cuando se escribe un CSS.

En los vídeos anteriores vimos los conceptos de en cascada y un ejemplo de

aplicación del concepto en cascada. Recuerda que el proceso en cascada define un
orden de aplicación de los estilos del agente de usuario, del usuario y del autor
de la página web.

Además del proceso en cascada, en CSS existe otro mecanismo que debes conocer: la
herencia. Este mecanismo influye en el valor que se asigna a una propiedad. No
todas las propiedades se heredan, así que este mecanismo puede causar cierta
confusión. Si tienes alguna duda lo mejor es que consultes alguna referencia de las
propiedades de CSS, como ésta que se incluye en la recomendación oficial de CSS2.1.
Podemos ver que las propiedades que definen el color, el estilo o el tamaño del
borde no se heredan, sin embargo, el color del texto sí que se hereda. La herencia
de una propiedad la podemos consultar en otras referencias, por ejemplo, en
w3schools tenemos la misma información.

¿Por qué algunas propiedades se heredan y otras no? En algunos casos puede parecer
arbitraria la decisión, pero en general, si lo piensas bien, verás que guarda
cierta lógica.

Para entender la herencia de una propiedad tenemos que tener en cuenta el DOM de la
página web. Cuando una propiedad que es heredada, por ejemplo, el color, no tiene
asignado un valor, la propiedad toma el valor calculado de esa misma propiedad en
el padre. Si el padre no la tiene definida, se tomará el valor de su padre y, así
sucesivamente, hasta llegar a la raíz del documento. Vamos a verlo con un ejemplo.
Este es el código HTML de la página de ejemplo que voy a utilizar. Es una página
muy sencilla. La página posee un encabezado y un párrafo, además, en el párrafo hay
un enlace y un fragmento marcado en negrita. Ahora a la página le añadimos un CSS,
al body le definimos un color verde para el texto y un estilo negrita, al
contenedor principal, main, le definimos un borde sólido y de color negro de 2
píxeles de ancho. Y este es el resultado de visualizar esta página en Google
Chrome. El color verde se ha asignado al elemento body de la página, pero ha sido
heredado por el resto de elementos que descienden de él. El borde se ha aplicado al
elemento main y solo se ha aplicado a él.

Al ver esto nos pueden surgir dos preguntas. ¿Por qué el enlace no aparece de color
verde? ¿Por qué el encabezado y el párrafo no tienen un borde? El color es una
propiedad que se hereda, por tanto, el enlace debería aparecer de color verde, sin
embargo, los enlaces son especiales porque tienen definido un color propio en la
hoja de estilo del agente de usuario. ¿Cómo se puede hacer que el enlace también
tenga color verde? Claro, la solución obvia que se le ocurre a mucha gente es
asignar el color verde al enlace, pero no es la mejor solución, porque si ahora
queremos cambiar el color del texto, nos tenemos que acordar de cambiarlo aquí y
aquí. ¿No se puede hacer que el enlace herede el color del elemento padre? Así,
solo tendríamos que cambiar el color en un único punto. Sí, eso es posible con la
palabra reservada inherit de CSS. Al asignarle ese valor al color del enlace, el
color del enlace es heredado del padre y, por tanto, ya aparece de color verde.
Esto mismo se puede hacer con cualquier propiedad de CSS, incluso con aquellas que
no son heredadas. Si se asigna este valor al borde del párrafo, el párrafo se
muestra con el mismo borde que su padre.

Y, ahora, lo último. ¿Cómo podemos hacer que el valor de una propiedad no sea
heredado? Por ejemplo, supongamos que el texto que está marcado en negrita, no
queremos que tenga el color verde, sino el color por defecto. Esto es posible con
la palabra reservada initial de CSS, cada propiedad tiene un valor por defecto, un
valor inicial. En el caso del color depende del agente de usuario, normalmente es
el color negro. Si al elemento strong le asignamos un color con el valor initial,
el texto marcado en negrita ya no aparece con el color verde, sino con el color
negro.

Ahora te invito a que veas el vídeo: CSS especificidad de las reglas, en el que te
explico cómo se calcula la regla de CSS que se aplica cuando existen varias reglas
que se pueden aplicar a un mismo elemento.

Muchas gracias por tu atención.

Aspectos clave
Debes ver el vídeo CSS: cascada y herencia (3) en el que se explica el mecanismo de
herencia en CSS que se tiene en cuenta para calcular el valor de una propiedad. No
todas las propiedades de CSS se heredan, por lo que conviene consultar la
especificación oficial para conocer el comportamiento de cada propiedad.

---------------------LECCIÓN
11---------------------------------------------------------------------------------
---------------------------------------------

En este vídeo, que forma parte del curso Introducción al desarrollo web, te voy a
explicar qué es la especificidad de las reglas en CSS.

Antes de ver este vídeo, deberías haber visto los vídeos sobre los mecanismos del
procesamiento en cascada y la herencia en CSS.

Supongamos que esta página web que contiene una lista con cinco elementos. El
segundo elemento tiene definida una clase llamada important, el tercer elemento un
identificador, el cuarto elemento un identificador y una clase y el quinto y último
elemento, un identificador, una clase y un estilo en línea con el atributo style.

Este es el CSS que he definido para la página de ejemplo. Hay varias combinaciones
de selectores, con identificador, con clase y con elemento. Teniendo en cuenta este
código HTML y este código CSS, te propongo como ejercicio, que intentes averiguar
el color con el que se va a mostrar cada elemento de la lista. ¿Ya lo sabes? Pulsa
stop si lo quieres pensar un poco. De todos modos, te voy a ayudar un poco.

El primer elemento de la lista no tiene ni un identificador, ni una clase, ni un

estilo en línea. Por tanto, estas son las dos únicas reglas CSS que se pueden
aplicar, pero, ¿cuál de ellas ganará?, ¿cuál de ellas definirá el color de este
elemento?

El segundo elemento de la lista tiene definida una clase. Estas cuatro reglas se
pueden aplicar a este elemento.

El tercer elemento tiene definido un identificador, así que se pueden aplicar estas
tres reglas.

El cuarto elemento tiene definido un identificador y una clase, así que se pueden
aplicar todas las reglas de CSS.

El último elemento también tiene definido un identificador y una clase, así que
también se pueden aplicar las cinco reglas definidas en la hoja de estilos, además,
tiene definido un estilo en línea con el atributo style.

¿Ya sabes con qué colores se va a mostrar cada elemento de la lista? Esto es lo que
finalmente se visualiza, ¿lo habías adivinado? Vamos a analizar lo que ha ocurrido.

El primer elemento de la lista, no tiene ni un identificador, ni una clase. Estas

son las dos únicas reglas que se pueden aplicar, pero esta es la regla que ha
ganado, ¿por qué? En breve lo sabrás.

El segundo elemento de la lista, tiene una clase, se pueden aplicar estas cuatro
reglas y ésta es la que ha ganado.

El tercer elemento tiene un identificador y éstas son las tres reglas que se pueden
aplicar. Ha ganado la primera regla, la que tiene un identificador.

El cuarto elemento tiene un identificador y una clase, se pueden aplicar todas

estas reglas y ésta es la que ha ganado, otra vez la del identificador.

Por último, este elemento tiene de todo, identificador, clase y atributo style con
una regla de CSS en línea. Al final, lo que gana es el atributo style.

Claro, se puede pensar que esto es una tontería, que nadie va a hacer algo parecido
a esto, pero cuando un CSS tiene miles de líneas o, en una misma página web se
juntan varios CSS, pueden ocurrir estas cosas.

Cuando hay varias reglas en conflicto ¿cómo se decide qué regla gana y se debe
aplicar? Se decide mediante un concepto de CSS llamado Specificity, que se puede
traducir por especificidad. La especificidad de un selector se calcula de la
siguiente forma: Se tiene que calcular un valor formado por cuatro componentes a,
b, c y d. A vale 1 si existe el atributo style, b cuenta el número de
identificadores en el selector, c cuenta el número de clases y pseudo clases en el
selector y, por último, d cuenta el número de elementos y pseudo elementos.

Volviendo al CSS del ejemplo, se puede construir esta tabla con las diferentes
reglas y su especificidad. Esta tabla la podemos reordenar. Primero se ordena por
el valor a, luego por el b y así sucesivamente. O tenemos esta tabla de menor
especificidad a mayor especificidad, o dicho de otra forma, de menor a mayor
importancia. Con esta tabla ya podemos saber qué regla se aplica en cada caso.

Por ejemplo, para el segundo elemento de la lista se puede aplicar cualquiera de

estas cuatro reglas de CSS, estas son las especificidades de cada regla. La primera
regla es la que gana y por eso se muestra el elemento con el color verde. Por
último, si eres un poco friki, seguro que te gustará lo siguiente. En CSS
Specificity, se representa la especificidad de CSS mediante una serie de iconos
basados en la película El Resplandor. Y en CSS Specificity Wars, se representa con
personajes de La Guerra de las Galaxias, curioso, ¿verdad?

Muchas gracias por tu atención.

Aspectos clave
Debes ver el vídeo CSS: especificidad de las reglas en el que se explica la forma
de calcular el valor de una propiedad de CSS cuando existe un conflicto porque hay
varias reglas que se pueden aplicar de forma simultánea al mismo elemento.

---------------------LECCIÓN
12---------------------------------------------------------------------------------
---------------------------------------------

En este vídeo, que forma parte del curso Introducción al desarrollo web, te voy a
explicar cómo debes escribir una hoja de estilo CSS, para que sea fácil de leer.

Un fichero CSS puede tener cientos de líneas. Según como lo escribas puede ser
fácil de leer o muy difícil de leer. En este vídeo vamos a ver cómo utilizar los
espacios en blanco, los comentarios y la agrupación de selectores, para que un CSS
sea más fácil de leer. Con espacios en blanco me refiero a espacios en blanco,
tabuladores y saltos de línea.

Algunas personas prefieren escribir un CSS de forma compacta, cada regla en una
sola línea, que solo se divide cuando sea muy larga. Algunas personas prefieren
escribir una propiedad por línea, y en este caso, hay personas que prefieren que
las propiedades aparezcan con sangría, con dos espacios, cuatro espacios o con
tabulación. También hay personas que prefieren dejar la llave de apertura en esta
posición, detrás del selector, pero hay otras personas que prefieren que se sitúe
en una línea nueva. Algunas personas prefieren alinearlo todo verticalmente, pero
este estilo es difícil de mantener. Algunas personas prefieren una mezcla, pero
también es un estilo difícil de mantener.

Otro mecanismo que facilita la lectura de un CSS son los comentarios, que empiezan
con barra, asterisco y terminan con asterisco, barra. Los comentarios ayudan a
definir partes en un CSS. Los comentarios también se pueden emplear para documentar
el CSS y explicar ciertas cosas, además los comentarios también se pueden emplear
para comentar partes del CSS, que se quieren eliminar temporalmente para realizar
pruebas.

La tercera cosa que se puede hacer para que un CSS sea más fácil de leer, es
utilizar la agrupación de selectores. Cuando varios elementos tienen el mismo
estilo se pueden agrupar separados con comas, en una única regla. Esto no impide
que en otro punto del CSS, se puedan definir reglas individuales para cada uno de
los elementos.

Por último, vamos a ver una herramienta que te puede ayudar a escribir un CSS que
sea más fácil de leer. CSS beautify, formatea el código CSS para que sea más fácil
de leer, ofrece opciones para definir la sangría, el número máximo de líneas en
blanco que separan dos reglas o propiedades y si las llaves deben comenzar en una
línea nueva o al lado del selector. Por ejemplo, aquí tenemos este código CSS
escrito en una sola línea.

Cambiando los valores de esta herramienta, podemos lograr que el código se

visualice de esta forma. ¿Interesante verdad?

Ahora te invito a que veas el vídeo: CSS ordenar un CSS, en el que se explican
varias formas de ordenar las reglas en un CSS, para que sea más fácil de leer y
mantener.

Muchas gracias por tu atención.

Aspectos clave
Debes ver el vídeo CSS: escribir un CSS que sea fácil de leer en el que se explica
que si no se escribe de una forma adecuada, un CSS puede ser largo y difícil de
leer. Sin embargo, mediante el uso de los espacios en blanco, los comentarios y la
agrupación de selectores se puede facilitar la lectura de un CSS.

---------------------LECCIÓN
13---------------------------------------------------------------------------------
---------------------------------------------

En este vídeo, que forma parte del curso Introducción al desarrollo web, te voy a
ayudar con tus primeros pasos con CSS, las hojas de estilo en cascada.

En este vídeo, te voy a dar algunas pautas para ordenar tu CSS.

Un fichero CSS puede llegar a tener cientos e incluso miles de líneas, por lo que
pueden aparecer problemas importantes en su creación y mantenimiento futuro. Por
ejemplo, algunos de los problemas que pueden aparecer son reglas no utilizadas, que
lo único que hacen es incrementar el tamaño del fichero CSS, reglas duplicadas, que
indican lo mismo o son contradictorias y crean confusión cuando se quiere modificar
el CSS, propiedades heredadas que pasan desapercibidas y no se tienen en cuenta
cuando se modifica un CSS y, por supuesto, el tiempo que se pierde para localizar
una regla entre miles de líneas.
Para evitar estos problemas es necesario organizar un fichero CSS de alguna forma.
Cada uno tiene que desarrollar su estilo propio, con el que se sienta más a gusto.
Algunas posibilidades son organizar las reglas por orden alfabético, organizar las
reglas por orden de aparición, separar las reglas según la función que realizan,
organizar las propiedades de una regla por orden alfabético y organizar las
propiedades de una regla del exterior del elemento al interior y, por supuesto,
utiliza los comentarios de CSS, barra, asterisco, asterisco, barra, para separar
las diferentes partes de un CSS y para desactivar ciertas propiedades cuando
quieras realizar pruebas.

Te aconsejo que leas el artículo: Consejos para organizar tus archivos CSS y CSS:
Cómo organizar estilos. En estos dos artículos encontrarás consejos y ejemplos que
te ayudarán a desarrollar tu propia forma de ordenar tus hojas de estilo CSS.

Por último, algunas herramientas que te pueden ayudar a organizar tu código CSS o a
comprimirlo y optimizarlo, reduciendo su tamaño. Primero Styleneat, una aplicación
web que organiza el código CSS en función de varios parámetros Styleneat puede
aplicar sangría, de forma automática, a un fichero CSS para que su lectura sea más
fácil.

Otra herramienta es CleanCSS, que tiene la opción de optimizar y reducir un CSS,

además, puede convertir los selectores a minúsculas y poder ordenar el CSS
alfabéticamente, aunque eso es una operación peligrosa que puede modificar la
visualización de la página.

Por último, CSS Compressor, que optimiza un CSS eliminando el contenido que no es
necesario, como saltos de línea o espacios en blanco. Al final del proceso de
optimización muestra un resultado en el que se puede comprobar el porcentaje de
reducción obtenido en el CSS optimizado.

Muchas gracias por tu atención.

Aspectos clave
Debes ver el vídeo CSS: ordenar un CSS en el que se habla de los problemas que
pueden surgir cuando un CSS no está ordenado, se ofrecen algunos consejos para
ordenar un CSS y se muestran algunas herramientas para ordenar y optimizar un CSS.

---------------------LECCIÓN
14---------------------------------------------------------------------------------
---------------------------------------------

En este vídeo, que forma parte del curso Introducción al desarrollo web, te voy a
explicar qué es el modelo de caja.

En una página web, los elementos de bloque, como los párrafos, las listas o los
divs, se comportan como cajas cuando se muestran. Como veremos a continuación, las
cajas tienen un borde que puede estar visible u oculto y un margen, que hay que
tener en cuenta cuando se diseña una página web.

La especificación 2.1 de CSS tiene una sección dedicada al Box model, el modelo de
caja, que explica el funcionamiento de las cajas que se generan para los elementos
que componen una página web.

En CSS existen varias propiedades relacionadas con el modelo de caja, pero en este
vídeo nos vamos a centrar en las propiedades relacionadas con el tamaño de las
cajas.

Una caja tiene cuatro partes: el contenido, el relleno, el borde y el margen. Cada
caja tiene un área de contenido, por ejemplo, un texto, una lista o una imagen.
Alrededor del contenido existen tres partes que son opcionales.

En primer lugar, el Padding, que se puede traducir por relleno o acolchamiento.

Alrededor se sitúa el borde y por último el margen, que es transparente. Cada una
de estas partes se divide en cuatro segmentos: superior, top; derecha, right;
inferior, bottom e izquierda, left.

El Box model define la forma de calcular la anchura y la altura de las cajas. Esto
es muy importante, ya que cuando se realiza un diseño, hay que conocer las
dimensiones de los elementos que componen la página.

En la página sobre el Box Model de Mozilla Developer Network se encuentra esta

imagen que explica que la anchura y la altura de un elemento. Las propiedades width
y height de CSS, se refieren solo al contenido y no tienen en cuenta ni el relleno,
ni el borde, ni el margen. Esto también afecta a otras propiedades en las que
aparece la anchura y la altura. Pero la anchura y la altura de un elemento, a
veces, ha incluido no solo el contenido, sino que también ha incluido el relleno y
el borde y eso ha causado mucha confusión. En concreto, eso ocurría en Internet
Explorer 6, que tenía varios modos de funcionamiento, el modo Quirk, el modo casi
estándar y el modo estándar.

Cada módulo se activaba según la declaración de DOCTYPE, que tuviera el código

HTML. Por ejemplo, si no había DOCTYPE, se activaba el modo Quirk, el modo propio
de Internet Explorer. En el modo Quirk, la forma de calcular la anchura y la altura
de un elemento era distinta al estándar definido en la recomendación de CSS,
mientras que en el estándar, la anchura hace referencia, únicamente, a la anchura
del contenido, en el modo Quirk de Internet Explorer la anchura incluía también el
relleno y el borde. Esto fue un grave problema durante muchos años, ya que Internet
Explorer 6, fue el navegador más utilizado entre los años 2002 y 2006, como se
puede ver en este gráfico que representa la cuota de mercado del navegador Internet
Explorer.

Durante esa época, muchos desarrolladores web, que no conocían la existencia del
modo Quirk de Internet Explorer, tuvieron muchos momentos de frustración y enfado,
ya que tuvieron que crear diferentes CSS para que una página web se viera
correctamente en diferentes navegadores.

Afortunadamente, esto dejó de ser un problema, ya que la propia Microsoft decidió

matar a Internet Explorer 6 hace tiempo y, para ello, en el año 2011, inició una
campaña para que la gente dejase de usarlo.

Por último, vamos a ver un concepto importante del modelo de caja, los márgenes
colapsables. Por ejemplo, supongamos que tenemos dos elementos, dos cajas, una con
un margen de 10 píxeles y otra con un margen de 30 píxeles. Podríamos pensar que al
situarse una caja debajo de la otra, los márgenes se conservan y, por tanto, entre
las dos cajas existirá un margen de 40 píxeles. Sin embargo, el modelo de caja no
funciona así. Se tienen que cumplir ciertas condiciones, pero, en general, siempre
ocurre que los márgenes adyacentes se colapsan, se superponen y el margen final es
el margen mayor de los dos márgenes adyacentes.

Por tanto, la propiedad margin de CSS, podemos entender que no define el margen
exacto, sino el margen mínimo. Por ejemplo, en esta página hay tres párrafos, cada
uno con un tamaño de margen distinto. Los márgenes están definidos en un CSS,
además, se ha definido un borde para que se vean los límites de cada párrafo. El
resultado final es que, entre el primer y el segundo párrafo, existe una separación
de 20 píxeles y, entre el segundo y el tercero, una separación de 30 píxeles.

Esto lo podemos comprobar con las herramientas para desarrolladores de Google

Chrome. Cuando consultamos las propiedades del primer párrafo, vemos que,
efectivamente, tiene definido un margen de 10 píxeles, pero la separación con el
segundo párrafo es mayor. En el segundo párrafo tiene un margen de 20 píxeles, que
es justo la distancia que existe entre el primer y segundo párrafo, pero la
separación del segundo párrafo con el tercer párrafo, es mayor. Por último, el
tercer párrafo, tiene un margen de 30 píxeles, que es justo la separación que
existe entre el segundo y tercer párrafo.

Ahora te invito a que veas la segunda parte de este vídeo, en el que se explica
box-sizing, una nueva propiedad de CSS que permite modificar la forma de calcular
la anchura y la altura de una caja.

Muchas gracias por tu atención.

Aspectos clave
Debes ver el vídeo CSS: el modelo de caja (1) en el que se explica que los
elementos de bloque, como los párrafos y listas, se comportan como cajas con un
contenido, un relleno, un borde y un margen. Además, se explica la distinta forma
de calcular la anchura de un elemento que tenía Microsoft Internet Explorer 6.

---------------------LECCIÓN
15---------------------------------------------------------------------------------
---------------------------------------------

En este vídeo, que forma parte del curso Introducción al desarrollo web, te voy a
explicar que es el modelo de caja.

En la primera parte de este vídeo, vimos el concepto de modelo de caja, que

organiza una caja en cuatro partes: el contenido, el relleno, el borde y el margen.

CSS3, la última especificación de CSS, incorpora numerosas novedades que ayudan a

controlar mucho mejor el diseño de una página. CSS Basic User Interface Module es
una especificación independiente que forma parte de CSS3.

En esta especificación, se añade una nueva propiedad, box-sizing, que define la

forma de calcular el tamaño de una caja en el modelo de caja. Box-sizing puede
tomar tres valores: content-box, padding-box y border-box.

Content-box es el valor por defecto. La anchura y la altura se calculan según la

especificación de CSS2.1, por tanto, width y height, se aplican únicamente al
contenido. En padding-box, la anchura y la altura del elemento, incluyen el
padding.

Por último, en border-box la anchura y la altura del elemento incluyen el padding y

el borde.

Si consultamos la documentación de Microsoft encontramos un par de cosas

importantes. En primer lugar, vemos que esta propiedad es de CSS3 y está disponible
a partir de Internet Explorer 8. Por otro lado, vemos que esta propiedad solo puede
tomar dos valores, content-box y border-box, pero en la especificación oficial
aparece un tercer valor, padding-box, ¿qué está pasando? Ahora después lo veremos.
Los dos posibles valores que admite en Microsoft Internet Explorer son content-box,
el valor por defecto, y border-box, que es justo la forma de calcular la anchura
que aplicaban las versiones antiguas de Internet Explorer.

Vamos a ver un ejemplo para ver cómo afecta esta propiedad al tamaño de
visualización de los elementos. En esta página hay dos div, el primero con el
identificador content-box y el segundo con el identificador border-box. Las dos
cajas tienen las mismas propiedades de CSS, excepto la propiedad box-sizing. En la
primera caja, se emplea content-box y en la segunda border-box. Esto afecta la
forma de interpretar el valor de la anchura de las cajas. Este es el resultado, la
primera caja es más ancha que la segunda caja. ¿Por qué? En concreto, la primera
caja es 40 píxeles más ancha que la segunda, esto se debe a que en la primera caja
a los 200 píxeles se refieren solo al contenido, no incluyen el padding o el borde.
En la segunda caja los 200 píxeles incluyen el padding y el borde, por eso la caja
es más pequeña.

En Mozilla Developer Network, el sitio web para desarrolladores de Mozilla, podemos

encontrar un aviso muy importante. Esta propiedad es experimental, por lo que puede
ser que no sea compatible con todos los navegadores y puede ser que su
comportamiento cambie en el futuro.

¿Recuerdas que antes vimos que, en Internet Explorer, la propiedad box-sizing solo
puede tomar dos valores, content-box y border-box? En la tabla de compatibilidad
podemos ver a partir de qué versión de navegador esta propiedad se añadió y,
también, podemos ver que el valor padding-box, por ahora, solo es admitido por
Mozilla Firefox.

Por último, otro ejemplo para que veas una importante ventaja que aporta la
propiedad box-sizing con el valor border-box.

En esta página tenemos dos cajas principales, cada una de ellas contiene tres
cajas, pero lo que quiero lograr es situar las dos primeras cajas en paralelo, en
una misma fila. Para ello a cada una de las cajas le asigno un tamaño del 50%,
fíjate que el primer caso box-sizing toma el valor content-box y en el segundo
caso, toma el valor border-box. ¿Qué va a pasar? Este es el resultado: en el primer
caso las dos cajas no se pueden colocar en paralelo en la misma fila porque no hay
espacio suficiente, ya que cada caja tiene, realmente, una anchura superior al 50%.
En el segundo caso sí que es posible, porque la anchura del 50%, incluye el
contenido, el padding y el borde. Interesante, ¿verdad?

Aspectos clave
Debes ver el vídeo CSS: el modelo de caja (2) en el que se explica la nueva
propiedad box-sizing de CSS3, que permite indicar la forma de calcular la anchura
de un elemento de bloque de una página web.

---------------------LECCIÓN
16---------------------------------------------------------------------------------
---------------------------------------------

Hola, bienvenido a este vídeo donde hablaré sobre el color y su uso en el diseño
web. Me llamo Marina Gutiérrez, me dedico al diseño gráfico y web. Podéis contactar
conmigo en este mail o a través de mi página.
El uso del color es una herramienta esencial en el diseño web, ya sea por estética
o por funcionalidad, es un elemento que no deberá fallar en tu plan de diseño. Te
ayudará a comunicar mensajes, captará la atención del espectador, transmitirá
emociones, potenciará la presencia de un elemento, ayudará a mejorar la
accesibilidad y la navegación de tu página, mejorará el aspecto estético y aportará
carácter y personalidad, entre otras cosas.

La elección del color en un diseño no es arbitraria, por eso es importante conocer

algo más sobre esa herramienta de comunicación tan poderosa que vamos a usar. El
uso adecuado del color en el diseño de una web, te permite llegar al usuario de una
manera directa y emocional. Por lo tanto, es importante intentar elegir y combinar
los colores de forma correcta, definir algunos parámetros para conseguir que tus
diseños estén unificados y en armonía con el mensaje, la intención y las
necesidades del proyecto.

Te voy a mencionar algunos conceptos interesantes para que te ayuden a trabajar con
el uso del color en tus diseños.

Cuando tratamos el color debemos aclarar algunos términos básicos que describen y
dan valor a sus propiedades. Gracias a los estudios del color y al trabajo
científico que inició Isaac Newton, la teoría del color puede establecer que la luz
es la fuente de todos los colores. Su experimento del prisma descompone la luz
dando como resultado la base de los colores que conocemos, los colores primarios y
secundarios.

En el círculo cromático están representados estos colores con sus variantes y

fusiones. Si estudiamos este círculo, veremos las diferentes agrupaciones del
color. Los agrupamos principalmente en primarios, secundarios e intermedios. En
otros términos, podemos agruparlos por su temperatura, como cálidos o fríos.
También podemos agruparlos por su intensidad, en pasteles al agregar blanco y
apagados o sucios, al agregar negro. Llamaremos colores neutros a las gamas de
grises y los distintos blancos y los cremas.

Algunas de las propiedades principales del color son las siguientes:

El matiz o tono es la esencia de cada color puro y le da nombre a cada uno. La

luminosidad o valor y la opacidad, varían un color según sus porcentajes de blanco
o de negro. La saturación o brillo define las variantes de un color agregando gris.

Asimismo, al crear un grupo de colores, podemos ayudarnos de las llamadas armonías,

que son cinco maneras de agrupar colores en paletas según su afinidad, son las
siguientes:

Las complementarias se dan por dos colores opuestos en el círculo cromático. Los
complementarios cercanos, crean grupos de tres colores armónicos basados en un
color y los dos adyacentes a su opuesto o complementario.

Los dobles complementarios son grupos de dos parejas de colores complementarios

dispuestos en una equis en el círculo cromático.

Las Triadas complementarias, con tres colores armónicos, unidos por un triángulo,
dentro del círculo cromático.

Las gamas múltiples se dan con los colores cercanos en el círculo, que también son
armónicos.

También conocemos, a través del estudio del color, las relaciones que se crean
entre ellos y cómo afectan a la percepción del ojo humano.
Así que, como ves, no solo es cuestión de elegir colores para diseñar, sino de
saber cómo se relacionan entre sí y qué efecto tiene el conjunto final.

Es por eso que cuando combines colores debes prestar mucha atención a conceptos
como el contraste, que ayuda a potenciar el mensaje, resaltando los elementos
importantes. Existen distintos tipos de contraste. Por un lado, tenemos el
contraste de luminosidad, que está dado por el claro oscuro. Luego tenemos el
contraste de valor y este, está dado por el entorno del color. Si ubicamos el mismo
color en dos entornos diferentes, su comportamiento es distinto. El contraste de
saturación se origina cuando saturo un color puro con negro o blanco. El contraste
de temperatura estará dado cuando confronte un color frío con uno cálido. Los
colores cálidos y brillantes crean la ilusión de estar más cerca del espectador,
mientras que los colores fríos, dan la sensación de estar más alejados. Luego
tenemos el contraste de complementarios, que son los colores que aparecen
enfrentados en el círculo cromático, por ejemplo, el violeta y el amarillo.

Los colores varían según lo que llamamos el peso, basado en su tono y en su

intensidad. El rojo, por ejemplo, se considera un color muy pesado. Para mejorar la
legibilidad de los textos, intenta usar fondos claros, suavizados, que no cansen la
lectura, evitando colores demasiado brillantes.

Cuando diseñes contextos, evita el uso de texturas en los fondos para evitar
confusión en la lectura, así como combinaciones que no permitan leer bien. Evita
combinar colores que causen fatiga en el ojo del espectador.

Cuando trabajes con color, sobre todo, observa su comportamiento en el conjunto del
diseño, a veces elegimos los colores que creemos que son los adecuados y después
nos damos cuenta de que no funcionan como esperábamos. Es mejor probar varias
opciones, antes de elegir tu paleta de color.

En el próximo vídeo, te contaré algunos significados emocionales del color. Gracias

por tu atención.

Aquí te dejo algunos enlaces para profundizar más en el tema del color y su uso en
el diseño web. Hasta luego.

Aspectos clave
Debes ver el vídeo El uso del color: ¿Qué es el color? en el que se habla de la
importancia del color en el diseño, se proporcionan algunas nociones básicas sobre
el color, se explica que son los colores primarios, secundarios e intermedios, se
habla de las propiedades del color (matiz o tono, luminosidad o valor, saturación o
brillo), de las armonías y de las relaciones entre los colores.

---------------------LECCIÓN
17---------------------------------------------------------------------------------
---------------------------------------------

Hola, bienvenido a este vídeo donde vamos a hablar sobre el significado de los
colores. Sabemos, por los estudios de la psicología del color, que estos son
capaces de transmitir emociones y sensaciones y provocar así reacciones en nuestro
cerebro. Los colores tienen la capacidad de sugestionarnos.

La reacción humana a la percepción del color y cómo influye en nuestras emociones

es uno de los temas más interesantes de la teoría del color. A continuación, te
muestro alguno de los colores más usados y sus propiedades que pueden ser de
utilidad para tus trabajos.

El blanco se asocia a la luz, a la bondad, a la seguridad, a la inocencia, a la

pureza y la virginidad. Se le considera el color de la perfección y, generalmente,
tiene una connotación positiva. Es símbolo de lo absoluto y de la unidad, significa
paz o rendición, evoca la simplicidad y el buen gusto, es un color muy apreciado en
diseño pues enfatiza al color que lo acompaña.

El naranja combina la energía del rojo con la felicidad del amarillo. Se le asocia
a la alegría, al sol brillante y el trópico. Representa el entusiasmo, la
felicidad, la atracción, la creatividad, la determinación, el éxito, el ánimo y el
estímulo. Suele utilizarse como color predominante en sitios relacionados con el
turismo, empresas jóvenes, por su sensación de frescura. Es un color que encaja muy
bien con la gente joven, por lo que es muy recomendable para comunicar con ellos.

El amarillo estimula la actividad mental y genera energía. Asociado a la vitalidad,

es muy usado como color secundario o destacado por su estridencia natural.
Actualmente, es común verlo como color principal en sitios relacionados con el
ecommerce o con páginas de comunidades y ongs. El amarillo simboliza la luz del
sol, representa la alegría, la felicidad, la inteligencia y la energía, sugiere el
efecto de entrar en calor, provoca alegría, estimula la actividad mental y genera
energía muscular. Es muy adecuado para promocionar productos para los niños y para
el ocio.

El color rojo es el del fuego y el de la sangre, por lo que se le asocia al

peligro, a la guerra, la energía, la fortaleza, la determinación, así como la
pasión, el deseo y el amor. Altamente visible y considerado emocionalmente intenso,
es muy común verlo en textos e imágenes que funcionan como vínculos o botones para
la llamada de la acción como apúntate, comprar ahora y agregar al carrito de la
compra. Como está muy relacionado con la energía, es muy adecuado para anunciar
coches, motos, bebidas energéticas, juegos, deportes y actividades de riesgo.

El verde es el color de la naturaleza por excelencia. Representa armonía,

crecimiento, exuberancia, fertilidad y frescura. Tiene una fuerte relación, a nivel
emocional, con la seguridad. Se usa en sitios relacionados a la ecología, finanzas
y medicina. El color verde tiene un gran poder de curación, es el color más
relajante para el ojo humano y sugiere estabilidad y resistencia.

El azul lo asociamos con la estabilidad, a la sobriedad y la seguridad. Se usa

frecuentemente como color principal en sitios de corporaciones tradicionales,
grandes empresas consolidadas en el mercado y sitios gubernamentales. Se le
considera un color beneficioso, tanto para el cuerpo como para la mente, ya que
produce un efecto relajante. Es un color fuertemente ligado a la tranquilidad y la
calma. Es adecuado para promocionar productos de alta tecnología o de alta
precisión, un color frío ligado a la inteligencia y a la conciencia.

El púrpura contiene la estabilidad del azul y la energía del rojo. Se asocia a la

realeza y simboliza poder, nobleza, lujo y ambición. Sugiere riqueza y
extravagancia. El color púrpura o morado o violeta, también, está asociado con la
sabiduría, la creatividad, la independencia y la dignidad. El púrpura representa la
magia y el misterio y produce sentimientos nostálgicos y románticos.

El gris es un color neutro y se lo relaciona con lo insensible e indiferente. Al

estar en medio del blanco y el negro, se lo relaciona también con el equilibrio. Se
asocia con la industria y, también, a lo intelectual. Inspira la creatividad,
seguridad, la madurez, la inteligencia, lo sólido, lo profesional, lo conservador y
lo sofisticado. Evoca la calidad, la calma y, a veces, la tristeza.
El marrón se asocia al orgánico o lo natural, también se le relaciona con la
amistad, la tierra, el corazón, el hogar, lo económico, lo confortable, lo estable,
lo simple, a la tranquilidad, a lo masculino, a la pasividad, fertilidad y
generosidad. Es un color que sugiere al otoño y a la estabilidad, a lo rústico y a
lo natural.

Al color negro se le asocia con el poder, el estatus y el lujo. Se utiliza,

principalmente, en sitios relacionados a objetos de lujo orientados a un target de
alto poder adquisitivo. Puede verse, preferentemente, en sitios de artículos
electrónicos de alta gama, bodegas y joyerías. El negro representa la elegancia, la
formalidad, la muerte y el misterio. Combinado con colores vivos y poderosos, como
el naranja o el rojo, produce un efecto agresivo y vigoroso. También se le asocia
al prestigio y a la seriedad.

Gracias por tu atención.

Aquí te dejo algunos enlaces para profundizar más en el tema del color y su uso en
el diseño web. Hasta luego.

Aspectos clave
Debes ver el vídeo El uso del color: Significado de los colores en el que se
explica que los colores pueden transmitir estados de ánimo, emociones, sensaciones,
etc., y se comenta el significado de algunos colores.

---------------------LECCIÓN
18---------------------------------------------------------------------------------
---------------------------------------------

Hola, bienvenido a este vídeo donde hablaremos sobre el uso del color en el diseño
web y algunas herramientas.

En los vídeos anteriores, pudimos ver cómo se inician los estudios del color y cómo
la teoría consigue descifrar su anatomía. También hemos visto, a grandes rasgos,
algunos de los significados que se le atribuyen a estos colores, según la
psicología del color. Ahora que ya sabemos algo más sobre el color, podemos empezar
a diseñar usándolos sin miedo y con ganas. ¿Te animas a empezar?

Encontrar los colores adecuados para tu proyecto dependerá, entre otras cosas, de
algunos factores tales como la temática de la web, la imagen corporativa, la
estrategia comunicativa, las jerarquías del contenido, las tendencias actuales, la
influencia cultural, la accesibilidad y legibilidad.

Para tu diseño, necesitarás crear una paleta de colores con los que trabajar.
Deberás hacer pruebas y descartar las opciones que no se ajusten al diseño o que no
sean viables. Es una cuestión de elegir y combinar con un poco de mimo.

El buen uso del color nos servirá, como ya sabemos, para crear un impacto
emocional, para enfocar al usuario hacia un elemento concreto en la página, para
facilitar la lectura, transmitir el mensaje de una forma impactante y directa o
mejorar la accesibilidad y la navegación.

En el uso del color hay un rango de colores que se podría denominar justo para
aplicar en diseño y sería siempre utilizar entre 3 y 5 colores. Para trabajar con
el color existen múltiples herramientas que te facilitarán el trabajo y la
documentación. A continuación, te explicaré cómo funcionan algunas de estas
herramientas.

Lo primero que debes hacer es establecer un color principal y a partir de ahí,

debes buscar las combinaciones adecuadas y definir, por ejemplo, dos colores más
para crear tu grupo de colores básicos.

En tus combinaciones, tienes que cuidar muy bien aspectos como el balance,
intentando darle peso al color adecuado e intentando equilibrar el uso de cada
color con respecto a la composición. Siempre habrá un color que domine sobre los
otros.

Te recomiendo que pruebes primero con tres colores e intentes combinarlos dentro de
sus gamas y matices, de distintas maneras, así podrás ver el efecto final que puede
tener una página, con un color o con otro.

Una vez elegidos los colores y las tonalidades que usarás, puedes hacer pruebas
para comprobar cuáles será la combinación que mejor cuadra con tu diseño y en qué
medida le darás protagonismo a cada color.

Elegir una paleta de color adecuada, es parte importante dentro del diseño de una
web, así que no lo tomes a la ligera y verás los resultados muy pronto. Recuerda
que el color en diseño sí importa.

Existen muchas herramientas para trabajar en tus diseños con el color y con las
paletas. Elegir la apropiada depende de ti y de como te guste trabajar. Aquí te
muestro algunas con las que puedes empezar.

La inspiración es lo primero que tenemos que buscar, por eso, es bueno investigar
en las últimas tendencias y, también, en las páginas especializadas que hablan de
color. En ellas encontrarás desde tendencias hasta paletas de color para
inspirarte. La mayoría ofrece búsquedas específicas con filtros muy potentes y son
un excelente lugar para empezar un proyecto de diseño.

Para buscar, crear y combinar los colores que formarán tu paleta, puedes usar
alguno de estos enlaces. Te ofrecen la posibilidad de combinar colores y obtener
fusiones o gamas entre ellos y verificar si son efectivos dentro del diseño. Aquí
encontrarás herramientas para crear colores o encontrar el que necesitas para tu
paleta básica.

También existen herramientas más completas que trabajan el color y, aquí hay un par
que te pueden ser de utilidad.

Aquí te sugiero dos interfaces que te permiten encontrar un color y crear una
paleta completa. Este tipo de herramientas, generalmente, te ofrecen el círculo
cromático para que elijas un color y puedas combinarlo. Te calcula las distintas
armonías, te sugiere el balance de colores, así podrás ver el peso y la presencia
de cada uno. Algunas de estas herramientas, te permiten exportarlo, también, como
archivos de Photoshop o de Illustrator.

Cuando elijas tus colores obtendrás una paleta con todos los códigos y referencias
de los colores elegidos.

Para gestionar, probar y encontrar paletas de color ya creadas, puedes probar con
alguno de estos enlaces.

Existen múltiples opciones en la red para encontrar la inspiración que necesitas

para hallar los colores de tu paleta. Aquí te sugiero algunos enlaces para poder
empezar.

COLRD, tiene una interfaz muy agradable y sin tanta publicidad como el resto de las
aplicaciones. Es muy completa, ya que cuenta con muchas herramientas distintas para
gestionar paletas, desde inspiración de paletas aportadas por otros usuarios hasta
el cálculo preciso de tonalidades de colores específicos. Puedes crear colores,
paletas, degradados o hallar el ADN del color de una imagen.

Aquí tienes más enlaces con más herramientas de gestión de paletas de color.
También existen utilidades concretas, para averiguar colores usados en otras webs a
partir de imágenes. Con Palette Generator, tienes la opción de agregar una URL
donde está alojada una imagen y calculará el mapa de colores predominantes que
contiene esa imagen.

Pictaculous también te ofrece las mismas opciones, solo que aquí tienes la
diferencia de que puedes subir una imagen desde tu disco duro y averiguar el ADN de
esa imagen. Además, te sugiere paletas afines para combinar esos mismos colores que
ha hallado.

Si lo que quieres es hallar la paleta usada en una página web concreta, aquí tienes
dos enlaces donde te ofrecen esa posibilidad.

Finalmente, te sugiero que también tengas siempre a mano algún glosario u hoja de
referencia para colores web o HTML, para facilitar el trabajo de programación
posterior.

Aquí encontrarás muchas referencias y tablas muy útiles para programar una vez que
hayas concluido tu diseño. A continuación, te dejo aquí, unos enlaces más para
profundizar en el tema del color y su uso en el diseño web.

Muchas gracias por tu atención. Hasta luego.

Aspectos clave
Debes ver el vídeo El uso del color: Diseñando con color en el que se habla del uso
del color en el diseño web y se muestran algunas herramientas que ayudan a crear
colores y combinar colores entre sí mediante la creación de paletas de colores.
-------------------------------------------------C Ó M O S E M A Q U E T A U
N A P Á G I N A W E B------------------------------------------

------------------------------LECCIÓN
1----------------------------------------------------------------------------------
-------------------------------

En este vídeo, que forma parte del curso Introducción al desarrollo web, te voy a
explicar cómo se realiza la maquetación de una página web.

¿Qué es la maquetación? Si buscamos en el diccionario de la lengua de la Real

Academia Española el término maquetación, encontramos la definición, acción y
efecto de maquetar, no queda muy claro. Si buscamos maquetar, encontramos la
definición hacer la maqueta de una publicación y si buscamos maqueta, por fin,
encontramos una definición que nos dice algo. Boceto previo de la composición de un
texto que se va a publicar, usado para determinar sus características definitivas,
por ejemplo, cuando un periódico prepara la portada de una edición, prepara
diferentes maquetas para probar diferentes titulares, diferentes contenidos y
encontrar la que mejor cree que va a funcionar en el quiosco. Y cuando se organiza
el espacio de una página del periódico se trabaja a nivel de bloques para
distribuir los diferentes elementos en el espacio disponible. Muchas veces, al
maquetar una publicación, no se trabaja así, con el contenido visible, sino que se
trabaja de esta otra forma, mediante bloques. Con estos bloques se puede jugar,
para definir varias maquetas y tomar una decisión de la publicación final.

A la hora de maquetar se tienen que tener en cuenta consideraciones gráficas del

diseño, como la claridad, la legibilidad, el correcto uso de los espacios en
blanco, la distribución balanceada del contenido y muchas otras consideraciones.

Algunos sinónimos de maquetación y maquetas son estructura, diseño, composición, y

en inglés se suelen emplear los términos layout y mockup.

En la maquetación de una página web se suelen aplicar los mismos principios y

técnicas que se han aplicado tradicionalmente en los medios impresos, pero hay una
diferencia muy importante, mientras que en un medio impreso conocemos con toda
precisión el tamaño de publicación, es decir, sabemos el tamaño del papel y los
márgenes que se van a emplear, en la web, el medio de publicación es la pantalla,
que puede ser un ordenador, una tableta, un teléfono móvil o algún otro dispositivo
que todavía no se ha inventado. Por tanto, realmente la maquetación de una página
web, se diferencia bastante de la maquetación de los medios tradicionales. Como
veremos más adelante, esto influyó de forma muy negativa en los principios de la
web.

La maquetación de una página web se puede realizar a varios niveles, para no

complicarlo mucho, voy a hablar de maquetación macro y maquetación micro. Pero eso
te lo explicaré en la segunda parte de este vídeo, en el que voy a realizar un
análisis a nivel macro y micro de la maquetación de una página web.

Muchas gracias por tu atención.

Aspectos clave
Debes ver el vídeo CSS: maquetación de una página (1) en el que se explica qué es
la maquetación de una página web, que consiste en definir la estructura, diseño o
composición (en inglés layout o mockup) de la página. Además se muestra la
maquetación por bloques.

------------------------------LECCIÓN
2----------------------------------------------------------------------------------
-------------------------------

En este vídeo, que forma parte del curso Introducción al desarrollo web, te voy a
explicar cómo se realiza la maquetación de una página web.

En la primera parte de este vídeo vimos el concepto de maquetación, que consiste en

realizar el boceto de la composición de un texto que se va a publicar, usado para
determinar sus características definitivas.

La maquetación de una página web se puede realizar a varios niveles. Para no

complicarlo mucho, voy a hablar de maquetación macro y maquetación micro. Veamos un
ejemplo, primero voy a realizar un análisis a nivel macro de la maquetación de una
página web.

Esta es la página principal del sitio web de la Universidad de Alicante, ahora

mismo se está visualizando en una pantalla con una resolución de 1920 x 1080. Si
cambiamos la resolución de visualización a 1024 x 768, vemos que la zona de
contenido principal se ajusta perfectamente al ancho disponible, en realidad la
página no se ha ajustado, lo que ocurre es que la página se ha diseñado para un
ancho de 1024 píxeles.

Cuando definimos las dimensiones de un diseño, normalmente, solo nos fijamos en el

ancho, ese valor se limita. El alto no se suele limitar, ya que la página web puede
crecer y crecer gracias a la barra de desplazamiento vertical.

El diseño de esta página es en parte flexible, porque como vemos, se adapta a

tamaños de pantalla mayores, pero no es totalmente flexible, porque para tamaños
inferiores, la página no se adapta y aparece esta barra de desplazamiento
horizontal, que no debería aparecer nunca.

¿Por qué no debe aparecer la barra de desplazamiento horizontal? Hace ya muchos

años, Jakob Nielsen, uno de los gurús de la usabilidad, publicó el artículo: Top 10
Web Design Mistakes of 2002, en el puesto tercero de esta lista de errores,
aparecía la barra de desplazamiento horizontal.

Una vez que tenemos claro que esta página está maquetada para un ancho de 1024
píxeles y posee un diseño centrado, voy a realizar un análisis a nivel micro.

A nivel micro, podemos detectar los siguientes cuatro bloques principales, una
barra de menú superior, que permite cambiar el idioma de la página, la cabecera, el
contenido principal y el pie de página.

Cada bloque principal se puede descomponer, a su vez, en bloques más pequeños. El

contenido principal se compone de dos grandes sub bloques, a su vez, el bloque de
la izquierda se compone de todos estos otros bloques. Este análisis se puede
repetir varias veces para cada bloque, hasta llegar al nivel de detalle que se
desee.

Las páginas de tercer nivel y niveles inferiores del sitio web de la Universidad de
Alicante, presentan este otro diseño. Aquí se ve la página a 1920 x 1080, así a
1024 x 768 y así a 800 x 600. Como vemos, la página se ajusta a diferentes
resoluciones, porque hace uso de un diseño fluido o líquido.

A nivel micro la página presenta los siguientes bloques principales, la barra de

selección de idioma y de enlaces comunes, la cabecera, el contenido principal y el
pie de página. A su vez, el contenido principal se divide en la barra de navegación
y el contenido.

Ahora te invito a que veas la tercera parte de este vídeo, en el que empezaremos a
ver los principales estilos de diseño que existen en la maquetación de una página
web.

Aspectos clave
En el siguiente vídeo se explican los dos niveles básicos de maquetación de una
página web, la maquetación macro y micro.

------------------------------LECCIÓN
3----------------------------------------------------------------------------------
-------------------------------

En este vídeo, que forma parte del curso Introducción al desarrollo web, te voy a
mostrar los estilos de diseño que se suelen emplear cuando se maqueta una página
web.

En este vídeo, te voy a hablar del estilo de diseño sin diseño. En la parte
anterior de este vídeo, vimos el análisis de la maquetación de una página web a
nivel macro y micro. Algo muy importante que vimos fue la diferencia que existe
entre la maquetación de un medio impreso y la maquetación de una página web.
Mientras que en un medio impreso conocemos con toda precisión el tamaño de
publicación, es decir, sabemos el tamaño del papel y los márgenes que se van a
emplear. En la web el medio de publicación es la pantalla, que puede ser de un
ordenador, de una tableta, de un teléfono móvil o de algún otro dispositivo que
todavía no se ha inventado. Esto es muy importante no olvidarlo. En la web las
dimensiones del dispositivo de visualización son desconocidas. Bueno, en realidad,
no son del todo desconocidas, podemos suponer un rango desde una resolución mínima
de VGA de 640 x 480, hasta una resolución máxima QSXGA de 2560 x 2048. Pero,
además, aunque todo el mundo use la misma resolución de pantalla, puede ocurrir que
algunos usuarios tengan una visualización menor porque su navegador muestra algún
panel o, simplemente, el usuario no tiene maximizada la ventana del navegador, por
tanto, te lo vuelvo a repetir, en la web las dimensiones del dispositivo de
visualización son desconocidas.

Los principales estilos de diseño que existen en la maquetación de una página web
son: sin diseño, diseño fijo, diseño elástico, diseño líquido o fluido y diseño
adaptable.

En realidad, lo normal es que al final se utilice un diseño híbrido, una mezcla de

todos estos.

En este vídeo y en los siguientes, vamos a ver cómo desarrollar la siguiente página
web, con todos los estilos de diseño que antes te he mostrado. Esta página se
compone de una cabecera, una barra o menú de navegación principal, la zona de
contenido principal, un panel con información adicional y un pie de página.

Veamos el primer estilo de diseño. Sin diseño es cómo se hacían las páginas web
cuando nació la web en 1990, por ejemplo, esta es la primera página web que Tim
Berners-Lee publicó en diciembre de 1990, en realidad, no es la primera, sino una
versión posterior del año 1992, pero podemos ver que la página no tiene diseño, no
hay colores, no hay diferentes tipos de letra, no se ha distribuido el contenido
por la página.

En la actualidad, con cualquier página web, como, por ejemplo, la página web
principal del sitio web de la Universidad de Alicante, podemos hacer la prueba de
visualizarla sin estilos. El resultado puede ser sorprendente, similar a ver la
foto de alguna famosa sin maquillaje. La página es irreconocible.

A la izquierda podemos ver la visualización normal de la página y a la derecha la

podemos ver sin estilos. Podemos ver que, sin estilos, la página es larguísima.

¿Cómo se realiza este diseño? No hay mucho que decir, porque no se tiene que hacer
nada. Respecto a la página de prueba que voy a desarrollar, este es el código HTML
de la página. La página tiene una cabecera, una barra o menú de navegación
principal, la zona de contenido principal, un panel con información adicional y un
pie de página. Y así es como se ve en un navegador.

Vamos a ponerle un poco de diseño a la página, pero eso lo haremos en la siguiente

parte de este vídeo, en el que te explicaré cómo realizar un diseño fijo de una
página web.

Muchas gracias por tu atención.

Aspectos clave
Las primeras páginas web no tenían diseño y sin embargo se muestran correctamente
en diferentes dispositivos, porque ese fue un requisito que se tuvo desde los
inicios de la Web. Este requisito fue "violado" por la incorporación de los
diseñadores tradicionales (en papel) a la Web, que tomaron la página web como si
fuera una página tradicional.

------------------------------LECCIÓN
4----------------------------------------------------------------------------------
-------------------------------

En este vídeo, que forma parte del curso Introducción al desarrollo web, te voy a
mostrar los estilos de diseño que se suelen emplear cuando se maqueta una página
web.

En este vídeo, te voy a hablar del estilo de diseño fijo.

En la parte anterior de este vídeo vimos la maquetación de una página web sin
diseño, es decir, simplemente mostrar la página web en su presentación normal. En
realidad, esto no es lo normal, normalmente queremos que una página web aparezca
con un diseño.

Existen diferentes estilos o técnicas de diseño. En este vídeo vamos a ver el

diseño fijo.

Un diseño fijo se realiza cuando se trabaja con un ancho fijo, este estilo de
diseño tiene un problema importante, cuando la resolución de pantalla es menor que
el ancho definido para la página, aparece una barra de desplazamiento horizontal y
cuando la resolución de pantalla es mucho mayor que el ancho definido, se
desaprovecha la pantalla de visualización.

Este diseño fue muy común durante los primeros años de la web y todavía pervive en
muchos sitios web, como te voy a mostrar a continuación.

Por ejemplo, el sitio web del Consorcio de Transportes de Madrid, está diseñado con
un ancho fijo de 800 píxeles, con una resolución de 1920 se ve esto, ya que este
sitio web está diseñado para 800 píxeles de ancho. Pero para una resolución
inferior, por ejemplo, en un teléfono móvil de gama baja se ve esto otro, con la
maligna barra de desplazamiento horizontal.

Este es el sitio web de turismo de Castilla y León y así se ve a 1920 píxeles de

ancho. Esta página también está diseñada para 800 píxeles de ancho y este es el
sitio web de la sección, el mundo del vino, del periódico El Mundo que está
diseñado para 640 píxeles de ancho. Como vemos el diseño fijo, no es tan extraño en
la actualidad, vamos a ver un ejemplo escandaloso.

Aquí tenemos el sitio web del Congreso de los Diputados de España que debería dar
ejemplo de buen hacer y, sin embargo, tiene un diseño fijo para un ancho de 800
píxeles.

¿Cómo se realiza el diseño fijo? Este es el esquema de la página de prueba que

estoy utilizando como ejemplo. Hay varias formas de lograr esta maquetación
mediante un diseño fijo. La más antigua se realizaba sin ayuda de CSS, se empleaba
una tabla, que permitía dividir la página web como si fuera una cuadrícula. Con el
atributo width, se definía el ancho de la tabla y de las celdas. Y este es el
resultado. Claro, la página se ve correctamente cuando se visualiza con la
resolución para la que ha sido diseñada, pero con resoluciones inferiores aparece
la barra de desplazamiento horizontal y con resoluciones superiores, se
desaprovecha la pantalla. Por cierto, aquí puedes ver la tabla y las celdas de la
tabla resaltadas. Esto quizás te puede ayudar a entender cómo se realiza un diseño
fijo con tablas.

El diseño fijo con tablas quedó obsoleto hace ya muchos años. La página web Por qué
diseñar con tablas es estúpido, lo explica muy bien. El diseño con tablas presenta
muchos problemas, mezcla el contenido con la presentación, el código HTML es más
complejo, las páginas son más pesadas y más difíciles de mantener y producen muchos
problemas de usabilidad y accesibilidad. En la actualidad, el diseño con tablas es
algo totalmente prehistórico, pero como te he comentado, hace años era lo común.
Por ejemplo, así era la página principal de la Universidad de Alicante en junio de
2005. Si se resaltan las tablas y las celdas de las tablas que hay en esta página,
esto es lo que se puede observar, un buen número de tablas anidadas unas dentro de
otras. ¿Ha mejorado el diseño de la página principal de la Universidad de Alicante?
Sí, ha mejorado, ya no utiliza tablas, pero sigue utilizando un diseño fijo que no
se adapta correctamente a diferentes resoluciones de pantalla.

Existen otras formas de realizar un diseño fijo, por ejemplo, una muy común es con
la propiedad float, de CSS. Esta propiedad permite que los elementos de bloque,
como pueden ser las etiquetas div o p, se puedan colocar en una disposición
horizontal una al lado de la otra. Esta propiedad la tienes explicada con detalle
en el vídeo: CSS maquetación web con CSS, uso de float.

En este estilo de diseño no se usan tablas, se emplea la etiqueta div, para agrupar
el contenido. Para el body, es decir, para toda la página, se define un ancho fijo
y luego se define un ancho para cada una de las columnas que componen la página. La
suma del ancho de las columnas es igual al ancho total que se ha definido en el
body. Para que esto sea verdad, es muy importante poner a 0 el margen de las
columnas.
La página la he diseñado para un ancho de 960 píxeles. ¿Por qué? Usar un ancho de
960 píxeles era un estilo muy común hace años, cuando la resolución de pantalla más
popular era 1024 x 768. Como es un diseño fijo, cuando la resolución de pantalla es
inferior, aparece la barra de desplazamiento horizontal, cuando la resolución de
pantalla es superior a 1024 píxeles, la página se ve de esta otra forma. ¿No se
podría por lo menos mostrar la página centrada? Sí, esto se resuelve con una sola
línea en el CSS, simplemente, hay que establecer los márgenes izquierdo y derecho
del body a auto, y el contenido de la página se mostrará centrado con cualquier
resolución de pantalla.

Ahora te invito a que veas la quinta parte de este vídeo, en el que veremos el
diseño elástico que mejora, resuelve, algunos de los problemas del diseño fijo.

Muchas gracias por tu atención.

Aspectos clave
En el siguiente vídeo se explica el diseño fijo, que fue el más común durante los
años 90 y parte de la siguiente década (en su momento tenía sentido, aunque
parcialmente).

Este diseño está totalmente desaconsejado en la actualidad, sin embargo todavía hay
gente que lo emplea. Sólo tiene sentido aplicar el diseño fijo a partes concretas
de una página web, no a toda la página en su conjunto.

------------------------------LECCIÓN
5----------------------------------------------------------------------------------
-------------------------------

En este vídeo, que forma parte del curso Introducción al desarrollo web, te voy a
mostrar los estilos de diseño que se suelen emplear cuando se maqueta una página
web.

En la parte anterior de este vídeo, vimos los estilos de diseño, sin diseño y
diseño fijo. Recuerda que hoy en día existen multitud de dispositivos que permiten
acceder a la web, lo que origina que no exista una resolución de pantalla estándar.
En el siguiente gráfico de StatCounter podemos ver la evolución de las resoluciones
de pantalla desde marzo de 2009 hasta octubre de 2014. El cambio producido en menos
de seis años ha sido impresionante. En marzo de 2009, la resolución más común era
1024 x 768, con un 42%. La siguiente resolución más común era 1280 x 800, con casi
un 20%. Las dos resoluciones sumaban más de un 60%. En octubre de 2014, la
resolución de 1024 x 768, solo representa un 5%, igual que 1280 x 800. En octubre
de 2014, la resolución más común es otra, con un 35%. Lo que significa que, en la
actualidad, conviven multitud de resoluciones debido a los dispositivos móviles. En
segundo lugar, aparece 1366 x 768, con un 20%, la típica resolución de los
portátiles. Aunque esas dos resoluciones son las más comunes, no hay que olvidar
todas estas resoluciones que suman un 45%.

Los diseños que vamos a ver a continuación, tienen como objetivo lograr que una
página web se visualice correctamente en diferentes dispositivos.
En este vídeo vamos a ver el diseño elástico. En el diseño elástico, el ancho de la
página no es fijo. El tamaño de la página y sus elementos está declarado en
relación con el tamaño del texto, que se suele especificar en em.

La principal ventaja de este diseño es que cuando se aumenta el tamaño del texto,
éste se reajusta perfectamente a la estructura, sin desbordamientos. Veamos un
ejemplo de diseño no elástico. Esta es la página principal del Congreso de los
Diputados de España, si en el navegador aumento el tamaño de visualización, realizo
zoom con control+, la página aumenta, pero se sigue viendo bien, porque toda la
página aumenta en proporción. Sin embargo, hace años esto no funcionaba así. Hace
unos años solo aumentaba el tamaño del texto y podían ocurrir cosas como esto. El
texto se hacía más grande, pero no el resto de la página, así que el texto se salía
de sus contenedores y no se podía leer y entender correctamente.

¿Cómo se realiza un diseño elástico? Este es el esquema de la página de prueba que

estoy utilizando como ejemplo en estos vídeos. Para realizar este diseño, he
añadido unos elementos div, para agrupar ciertas partes del contenido. Para el
body, es decir, para toda la página, se define un ancho fijo y luego se define un
ancho, para cada una de las columnas que componen la página. La suma del ancho de
las columnas es igual al ancho total. Para que esto sea verdad, es muy importante
poner a 0 el margen de la página y de las columnas.

La anchura de los distintos bloques de la página las he definido con la unidad de

medida em. De este modo, toda la estructura de la página aumenta de forma
proporcional al aumentar el tamaño del texto.

Si no conoces o no entiendes las distintas unidades de medida que se pueden emplear

en CSS, te recomiendo la lectura de este documento del W3C. De todas las unidades
de medida que existen, algunas están recomendadas, mientras que otras solo están
recomendadas para un uso ocasional o no se recomienda de forma rotunda su uso.

Para que entiendas cómo está organizada la página web con bloques, en esta imagen,
he destacado todos los elementos de tipo div. Si aumento el tamaño del texto con
control+, todo el tamaño de la página aumenta de forma proporcional y la página se
sigue viendo bien.

El diseño elástico resuelve algunos problemas, pero no es la solución perfecta. Con

este diseño sigue existiendo el problema de qué ocurre con resoluciones pequeñas,
ya que, aunque se trabaja con unidades de medidas relativas, en el fondo sigue
siendo un diseño fijo y, cuando se aumenta el tamaño de la página, puede llegar un
momento en que aparezca la desagradable barra de desplazamiento horizontal.

¿No se puede hacer mejor? Claro, en realidad el ejemplo que te he mostrado tiene un
ancho fijo y al principio te he dicho que una de las ventajas del diseño elástico,
es que se puede realizar un diseño para un ancho no fijo. Para ello no voy a
definir el ancho de la columna con el contenido principal, el ancho de esta columna
será el espacio que haya disponible en la página, una vez restado el ancho del menú
principal y del contenido secundario.

En este diseño, el ancho de la página no está limitado. Las columnas menú principal
e información adicional, tienen definido un ancho fijo, pero el contenido principal
no tiene un ancho definido. El ancho del contenido principal se adapta al espacio
disponible. Podemos ver cómo, al aumentar el tamaño del texto, las columnas con el
menú principal y el contenido secundario aumentan de tamaño, mientras que la
columna con el contenido principal, disminuye y, al reducir el tamaño de la ventana
del navegador, para simular una resolución de pantalla pequeña, la página se adapta
correctamente a la nueva resolución. Ahora sí que tenemos un diseño para un ancho
no fijo, sin embargo, para ciertas situaciones, el diseño líquido fluido, que te
explicaré en la siguiente parte de este vídeo, es mejor.
Muchas gracias por tu atención.

Aspectos clave
Debes ver el vídeo CSS: maquetación de una página - diseño elástico (5) en el que
se explica este diseño que permite crear diseños que se adaptan a distintos
dispositivos. Este diseño se basa en el tamaño del texto y sus posibilidades son
limitadas.

------------------------------LECCIÓN
6----------------------------------------------------------------------------------
-------------------------------

En este vídeo, que forma parte del curso Introducción al desarrollo web, te voy a
mostrar el diseño líquido, también llamado fluido, de una página web.

En la parte anterior de este vídeo, vimos el diseño elástico, en el que el tamaño

de la página y sus elementos está declarado en relación con el tamaño del texto,
que se suele especificar en em. Este estilo de diseño resuelve algunos problemas,
pero no funciona correctamente en resoluciones extremas, ya sean resoluciones
pequeñas o resoluciones grandes. En la actualidad, esto es muy importante, porque
una página web se debe de visualizar correctamente en diferentes dispositivos.

El diseño líquido o fluido tiene como objetivo lograr que una página web se
visualice correctamente en diferentes dispositivos. El nombre de este diseño lo
explica todo. En este diseño, los elementos de una página web se comportan como el
agua, se extienden por la superficie de la página web como el agua sobre una
superficie y se adaptan al recipiente que los contiene. En realidad, este es el
comportamiento natural de una página web si no se hace nada.

Por ejemplo, la primera página web de la historia se visualiza correctamente a 1920

píxeles de ancho, a 640 píxeles de ancho o incluso a 320 píxeles de ancho. Así era
la web desde su nacimiento, líquida, fluida, pero entonces llegaron los diseñadores
y metieron la mano con sus reglas y calculadoras y pasó lo que pasó.

En el diseño líquido el ancho de la página no es fijo. El tamaño de la página y sus

elementos están declarados en relación con el ancho de la ventana, que se suele
especificar en porcentaje. La principal ventaja de este diseño es que se ajusta a
los distintos dispositivos de visualización.

¿Cómo se realiza un diseño líquido? Este es el esquema de la página de prueba que

estoy utilizando como ejemplo en estos vídeos. Es curioso, pero un diseño realizado
con tablas, que era lo normal hace ya más de 14 años, se puede considerar un diseño
líquido, porque la página se adapta automáticamente a diferentes resoluciones, pero
recuerda lo que ya te expliqué en otro vídeo, diseñar con tablas es estúpido.

Como en otras ocasiones, voy a utilizar varios elementos div, para definir las
diferentes columnas que componen el diseño de la página. En realidad, este código
HTML es el mismo que he empleado en otros diseños. Las diferencias no están en el
HTML, las diferencias están en el CSS.

¿Por qué se usa porcentaje para definir el tamaño de cada bloque? Recuerda que, en
la web, las dimensiones del dispositivo de visualización son desconocidas. Bueno,
en realidad no son del todo desconocidas, podemos suponer un rango, desde una
resolución mínima de VGA de 640 x 480 hasta una resolución máxima QSXGA de 2560 x
2048, pero es un rango muy amplio. Con el uso de porcentajes, logramos que las
diferentes columnas de la página, se adapten correctamente a la anchura de la
página. La página también se visualiza correctamente si se amplía mediante zoom y,
también, se ve correctamente con diferentes navegadores. Los diseños líquidos
funcionan bien en pantallas pequeñas o medianas, sin embargo, en pantallas grandes
dan lugar a líneas de texto muy largas, que dificultan su lectura. La cantidad
máxima recomendada de caracteres por línea suele ser de 80 y en este ejemplo, hay
líneas con más de 220 caracteres. A mayor longitud resulta difícil leer en pantalla
sin perderse entre las líneas.

Este problema lo podemos solucionar fácilmente con las propiedades de CSS, mean-
width y max-width, pero sigue existiendo un problema importante. En resoluciones
pequeñas el contenido de la página puede quedar muy apelotonado o se puede
visualizar tan pequeño que sea muy difícil leerlo.

¿No existe una alternativa? Si, existe el diseño adaptable, mal llamado diseño
sensible, pero eso te lo explicaré en la siguiente parte de este vídeo.

Muchas gracias por tu atención.

Aspectos clave
El diseño líquido permite crear diseños que se adaptan correctamente a diferentes
dispositivos, pero en situaciones extremas (pantallas muy pequeñas o muy grandes)
presenta algunos problemas, además no permite transformaciones profundas en el
diseño de la página.

------------------------------LECCIÓN
7----------------------------------------------------------------------------------
-------------------------------

En este vídeo, que forma parte del curso Introducción al desarrollo web, te voy a
mostrar los estilos de diseño que se suelen emplear cuando se maqueta una página
web.

En este vídeo, te voy a hablar del diseño adaptable. En la parte anterior de este
vídeo, vimos el estilo de diseño líquido o fluido, que permite que la visualización
de una página web, se adapte a los diferentes tamaños de pantalla de diferentes
dispositivos. Sin embargo, en la actualidad existen tantos dispositivos que
permiten acceder a la web, con tantos tamaños de pantalla tan diferentes, que las
ventajas que ofrece el diseño líquido, son un poco limitadas para la situación
actual y es difícil lograr que una misma página web, se muestre correctamente en un
dispositivo con una pantalla pequeña o en un dispositivo con una pantalla grande.
Por ejemplo, si nos centramos solo en los dispositivos móviles, es decir, en los
teléfonos y tabletas, en un estudio publicado en el tercer cuatrimestre de 2014, se
observa que existe una gran diversidad de tamaños de pantalla y además existen
diferencias significativas entre los diferentes continentes.

En el siguiente gráfico de StatCounter, encontramos información similar. Podemos

ver la evolución de las resoluciones de pantalla desde marzo de 2009 hasta octubre
de 2014. El cambio producido en menos de seis años ha sido impresionante. En la
actualidad coexisten muchas resoluciones de pantalla.

¿Y si hacemos un diseño para cada resolución de pantalla? Bueno, eso sería una
locura, sería mucho trabajo, pero lo que sí que podemos hacer, es organizar las
diferentes resoluciones de pantalla en grupos y crear diferentes diseños para cada
grupo. Por ejemplo, imaginemos la siguiente maqueta de una página web, que tiene
una cabecera, un menú principal a la izquierda, una zona de contenido principal a
la derecha con tres bloques y un pie de página. Comenzando por el diseño extra
grande, se pueden plantear diferentes transformaciones en la maqueta para adaptar
la página web a resoluciones de pantalla inferiores. Eso lo podemos lograr con un
diseño adaptable, pero, ¿cómo se diferencia un diseño adaptable de un diseño
líquido? En un diseño adaptable, el diseño de una página puede sufrir
transformaciones importantes, por ejemplo, se puede pasar de un diseño de varias
columnas, a un diseño de una sola columna. Para ello se suelen crear varias hojas
de estilo, que mediante Media queries, permiten que el dispositivo utilice la más
adecuada. A veces, las transformaciones son tan importantes como, por ejemplo,
convertir una barra de menú en una lista desplegable, que es necesario la
utilización de JavaScript.

En el sitio web Media Queries, existe una galería enorme de sitios web
desarrollados con diseños adaptables. Aquí tenemos un ejemplo, el sitio web de
Stanford University. Este ejemplo me gusta mucho porque son pocas las universidades
que tienen una página principal con un diseño adaptable. Esta página web se
visualiza correctamente a 1920 x 1080 píxeles, a 1024 x 768 y a 640 x 480. Un
detalle importante de esta página web está en la transformación de la barra de menú
principal, que se convierte en una lista desplegable.

¿Cómo se realiza un diseño adaptable? Este es el esquema de la página de prueba que

estoy utilizando como ejemplo en estos vídeos. El código HTML es el mismo que
empleado en ejemplos anteriores, pero hay una diferencia importante, esta
instrucción meta es esencial para que la página web se muestre con la escala
apropiada en un dispositivo con una pantalla pequeña o mediana. Los cambios más
importantes de este diseño los encontramos en el CSS, este CSS no es único, no es
un único CSS, en realidad se puede entender como dos CSS en uno solo.

Esto se logra con el empleo de las media queries, unas condiciones que indican
cuándo se debe utilizar una parte del CSS. En esta página se han definido tres
diseños, cuando la resolución de pantalla sea igual o mayor que 1200 píxeles de
ancho, cuando la resolución de pantalla sea igual o mayor que 800 y menor que 1200
y cuando la resolución sea menor que 800 píxeles, que no se ha definido nada.

Así se ve la página con una resolución de 1920 píxeles, es un diseño a tres

columnas. Así se ve la página con una resolución de 1024 píxeles, es un diseño a
dos columnas. Así se ve la página con una resolución de 640 píxeles, sin diseño. Y
también podemos probar a visualizar la página con resoluciones inferiores, por
ejemplo, esta es una captura de pantalla de Opera Mobile Emulator, simulando un
Samsung Galaxy S2.

Ya para terminar, ahora, te aconsejo que veas otros vídeos que tengo sobre el
diseño adaptable, en particular, te recomiendo que veas un vídeo dividido en tres
partes, en el que desarrollo paso por paso un diseño adaptable.

Ahora te invito a que veas la siguiente parte de este vídeo, en el que explico el
diseño basado en rejilla.

Muchas gracias por tu atención.

Aspectos clave
En el siguiente vídeo se explica el diseño adaptable o adaptativo (en inglés
responsive design) que permite crear diseños para múltiples dispositivos. Existen
diferencias entre el diseño adaptable y el diseño líquido (transformaciones, varias
hojas de estilo, uso de media queries, uso de JavaScript).

------------------------------LECCIÓN
8----------------------------------------------------------------------------------
-------------------------------

En este vídeo, que forma parte del curso Introducción al desarrollo web, te voy a
explicar cómo se realiza el diseño de una página web con rejilla o retícula.

En los vídeos anteriores, hemos visto diferentes estilos de diseño de páginas web,
diseño fijo, diseño elástico, diseño el líquido o fluido y diseño adaptable.

El diseño con rejilla, también llamado diseño con retícula, es un concepto esencial
en diseño gráfico. Su función es dividir la página en campos e intervalos, dentro
del espacio definido por los márgenes. Su objetivo es mantener una colocación
correcta de los elementos dentro de la página, dando una sensación de estructura
ordenada y proporcionando claridad y continuidad en el diseño.

El diseño con rejilla se puede aplicar a cualquiera de los diseños que se han
explicado en los vídeos anteriores, por ejemplo, un diseño fijo realizado con
tablas, está empleando la tabla como una rejilla o retícula para distribuir los
elementos sobre la página.

En el diseño con retícula se emplean algunos conceptos, las columnas son

alineaciones verticales que crean divisiones horizontales entre los márgenes. Los
módulos son unidades individuales de espacio que están separados por intervalos
regulares y que crean columnas y filas. Las líneas de flujos son alineaciones que
guían al ojo. Las zonas espaciales son grupos de módulos y los marcadores se
emplean para indicar la posición de texto repetido como, por ejemplo, los títulos
de sección o los números de página.

¿Cómo se hace un diseño con rejilla en una página web? Como de costumbre, lo puedes
hacer tú mismo, no es difícil, pero como de costumbre, mejor no pierdas el tiempo
reinventando la rueda, ya hay muchas ruedas, a no ser que tengas interés en
aprender a hacer ruedas. Te recomiendo que busques un Framework de CSS, existen
cientos de Frameworks de CSS, yo te voy a enseñar uno muy sencillo, 960 Grid
System, es un Framework que lo único que ofrece es una rejilla. Como indica su
nombre se basa en una rejilla de 900 píxeles de ancho. En el propio sitio web de
este Framework, se pueden encontrar ejemplos de páginas web diseñadas con rejilla.
Pulsando sobre este botón se puede visualizar la rejilla que se ha empleado en el
diseño. Esta página se ha diseñado con una rejilla de 16 columnas y al pulsar en
este otro botón vemos la rejilla de esta otra página que es a 12 columnas.

Si no te gusta la rejilla de 12 o 16 columnas, puedes encontrar herramientas

online, como esta que te muestro, que permite configurar el tamaño de la rejilla.
Se puede definir el ancho de la columna, el número de columnas y el Gutter, que es
el espacio que se quiere dejar entre dos columnas. Esta herramienta permite una
previsualización de la rejilla, tanto para una rejilla de anchura fija, como una
rejilla fluida. Por ejemplo, aquí tenemos una rejilla fija de 12 columnas, para un
ancho de 960 píxeles y aquí tenemos una rejilla fluida de 12 de columnas,
visualizada a 1920 x 1080, a 1280 x 800 y a 1024 x 768.

¿Cómo se realiza un diseño con rejilla? Una vez seleccionado los parámetros de la
rejilla que queremos utilizar, esta herramienta permite descargar el fichero CSS
correspondiente. El CSS lleva un conjunto de clases con la definición de la rejilla
que debemos utilizar en nuestras páginas web.

Aquí tenemos un ejemplo de uso de este CSS. El primer CSS es la rejilla que me ha
generado la herramienta online, mientras que el segundo CSS solo tiene las
definiciones de estilo para los encabezados de nivel 1 y 2. He definido un color de
fondo para que se pueda apreciar el espacio que ocupa cada encabezado en la
rejilla. El encabezado de nivel 1 ocupa doce módulos de la rejilla. El encabezado
de nivel 2 ocupa seis módulos y, además, se ha desplazado seis módulos hacia la
derecha. Por último, tenemos tres columnas, la primera columna ocupa seis módulos,
la segunda tres módulos y la tercera también tres módulos.

Así es como se ve la página web sin rejilla, los elementos de la página se ven uno
a continuación del otro y así cuando se aplica la rejilla, fíjate como el
encabezado de nivel 2 ocupa seis módulos y se ha situado a la derecha, ocupa el 50%
de la página hacia la derecha. Así se ve en la página a 1280 x 800, como es una
rejilla fluida, se adapta correctamente a este ancho de visualización y aquí
tenemos la misma página web visualizada con resoluciones inferiores, a 1024 y a 640
píxeles de ancho. Interesante y útil ¿verdad?

Muchas gracias por tu atención.

Aspectos clave
El diseño con rejilla o retícula es una técnica empleada en el diseño tradicional
que ofrece múltiples beneficios (correcta colocación, crea una estructura ordenada
y proporciona claridad y continuidad en el diseño).

En el siguiente vídeo se explica cómo se puede utilizar el diseño con rejilla en el

diseño de una página web.

------------------------------LECCIÓN
9----------------------------------------------------------------------------------
-------------------------------

En este vídeo, que forma parte del curso Introducción al desarrollo web, te voy a
hablar de la importancia de realizar un diseño que esté alineado con el concepto de
la web única.

Antes de empezar, quiero enseñarte algo. Esto ya no es la web. En la actualidad

esto es la web y, dentro de poco, esto será la web.

¿Estás de acuerdo con todo esto? Supongo que sí, entonces si estás de acuerdo, huye
de los vendedores de humo y de los golpistas de la web, que te vendan que lo mejor,
es hacer una versión de un sitio web para ordenador, otra para teléfono móvil y
otra para lo que se les ocurra.

No hace mucho tiempo a la gente le daba por hacer sitios web específicos para un
navegador y, además, no tenían reparo en avisarlo. Sin embargo, me ha sorprendido
encontrar sitios web actuales en los que se repiten los mismos errores del pasado.
En unos sitios web les da por recomendar Chrome, en otros Firefox, en otros Safari
y otros, incluso, se atreven a recomendar a Internet Explorer, como el mejor
navegador con el que se obtiene la mejor experiencia de navegación.

Pues no, esta no es la forma correcta de actuar en la web. Tim Berners-Lee, el

padre de la web, ya nos avisó en el año 1996 de los peligros de actuar así.
Cualquiera que pegue una etiqueta con “esta página se ve mejor con el navegador x”,
en una página web, parece que anhela los viejos malos tiempos, antes de la web,
cuando tenías muy pocas posibilidades de leer un documento escrito en otro
ordenador, con otro procesador de textos o en otra red.

Pero lo que sí que es muy recomendable es mandar al infierno, como pone el título
de este artículo que te recomiendo que leas, a aquellos navegadores que no cumplan
los estándares. Dar soporte a los navegadores que no cumplen los estándares, solo
ayuda a que la gente los siga utilizando.

La web actual es esto, múltiples dispositivos, múltiples formas de visualizar la

web, pero la web tiene que ser única y no lo digo yo, sino que lo dice Tim Berners-
Lee. Lo que es más importante desde mi punto de vista, es que solo hay una web.
Cualquiera que intente cortarla en dos, descubrirá que su pieza es muy aburrida.
Cortarla en dos se puede hacer de muchas formas, por ejemplo, se puede cortar en
dos al hacer un sitio web que se debe visualizar con un navegador concreto. Y
también, se corta en dos, cuando hay gente que se crea su propia web, dentro de la
web, y al final acaba creando lo que se llama un jardín cerrado, walled garden, un
entorno de navegación que controla la información y los sitios web que el usuario
puede acceder.

El World Wide Web Consortium, el W3C, tiene como misión conducir a la web a su
máximo potencial y un aspecto básico para lograrlo es lo que ellos llaman One Web,
la web única o una sola web. Una definición de One Web, la podemos encontrar en el
documento: Scope of Mobile Web Best Practices, en concreto, en el apartado 3.2 One
web, en el que se dice: “One web se caracteriza por un recurso identificado por un
URI debe proporcionar información similar destinada y en un formato adecuado para
su contexto. El acceso a un URI desde diferentes dispositivos o ubicaciones debe
resultar en información temática similar, pero tanto la apariencia como el
contenido específico pueden ser diferentes. Y, el usuario debería tener la opción
de acceder a la misma información sea cual sea el dispositivo utilizado en
cualquier situación”.

En la recomendación Mobile Web Best Practices, encontramos otra definición de One

Web, esta vez en el apartado 3.1 One Web que dice: “One Web significa hacer, en la
medida de lo razonable, que la misma información y servicios estén disponibles a
los usuarios con independencia del dispositivo que estén usando. Sin embargo, esto
no significa que exactamente la misma información esté disponible en exactamente la
misma representación en diferentes dispositivos”. En resumen, One Web significa,
hacer la medida de lo razonable que la misma información y servicios accedidos a
través de una URI, estén disponibles a sus usuarios con independencia del
dispositivo que estén usando.

Por ejemplo, el sitio web de Renfe no cumple la filosofía de la web única, ya que,
esta es la página web que aparece cuando se accede desde un ordenador y ésta es la
que aparece cuando se accede desde un dispositivo móvil. Una página web totalmente
distinta que no ofrece ni la misma información, ni los mismos servicios.

Sin embargo, la web de MITx, ofrece la misma información y los mismos servicios
desde un ordenador y desde un dispositivo móvil. Eso sí, la presentación se adapta
a las características del dispositivo móvil, pero el sitio web es el mismo y ¿cómo
se logra esto? Se logra en la actualidad con el diseño adaptable, adaptativo o
flexible, pero eso lo veremos en otro vídeo.
Y ya para terminar, un vídeo y un artículo que son de la misma persona, en la que
se explica muy bien la necesidad de crear sitios web que sean compatibles con todos
los dispositivos actuales y futuros.

Muchas gracias por tu atención.

Aspectos clave
En el vídeo CSS: la web única (en inglés one web) se explica el concepto "One Web",
la "Web única" o "una sola web" del World Wide Web Consortium (W3C).

------------------------------LECCIÓN
10---------------------------------------------------------------------------------
--------------------------------

En este vídeo, que forma parte del curso Introducción al desarrollo web, te voy a
explicar qué es el diseño adaptable, también llamado adaptativo o flexible.

En otro vídeo hemos visto que a la web ya no se accede únicamente desde un

ordenador, sino que se accede desde diferentes dispositivos y seguro que en el
futuro se accederá desde muchos otros dispositivos.

¿Cómo se puede crear un sitio web para que se pueda visualizar de una forma
correcta en todos los diferentes dispositivos que existen en la actualidad y en los
que puedan aparecer en el futuro? Bueno, los milagros no existen, así que tampoco
esperes que exista una solución que te asegure que tu página web se vea sin
problemas en cualquier dispositivo futuro. Pero, si utilizas los estándares y
aplicas lo que te explico en este vídeo, es muy probable que tu página web se siga
viendo bien dentro de muchos años.

La clave es utilizar lo que se conoce en inglés como Responsive Design y en español

se suele llamar diseño flexible, diseño adaptable o diseño adaptativo. Pero, por
favor, no lo llames diseño responsivo o diseño sensible, queda muy mal.

El origen del término Responsive Web Design, se suele situar en un artículo que
llevaba en ese título publicado por Ethan Marcotte en mayo de 2010, su artículo se
hizo muy famoso y en el año 2011 Ethan Marcotte publicó un libro con el mismo
título. Con Responsive Web Design ha pasado lo mismo que ha ocurrido en el pasado
con otras técnicas, alguien le ha puesto un nombre a un conjunto de técnicas y se
ha puesto de moda. Ocurrió hace más de 15 años con el HTML dinámico, algo que nunca
existió como tal, pero que se escribieron numerosos libros sobre ello y, también,
ha ocurrido lo mismo, más recientemente, con Ajax, que a partir del artículo de
Jesse James Garrett del año 2005, empezó a ponerse de moda algo que ya existía
desde hacía años.

Un diseño adaptable se basa en emplear, de forma bastante ingeniosa, ciertas

propiedades de CSS que no eran muy conocidas o que no se podían utilizar por falta
de soporte por los navegadores. En otro vídeo te explicaré cómo se realiza un
diseño adaptable con CSS, en este vídeo te voy a mostrar un ejemplo de diseño
adaptable y otro ejemplo de diseño no adaptable.

El sitio web Smashing Magazine, es conocido entre los profesionales del diseño y
del desarrollo web por la alta calidad de los artículos que publica. En esta
captura de pantalla podemos ver cómo se visualiza esta página web, con una
resolución de 1900 píxeles de ancho y, en esta otra, vemos como se ve con una
resolución de 1280 píxeles de ancho. Si comparamos las dos capturas de pantalla,
podemos apreciar que ya aparece un cambio en el diseño de la página, ya que esta
parte de la página, que estaba en la columna izquierda, se ha desplazado a la parte
superior de la página. Para comprobar cómo se visualiza esta página web en otros
tamaños de pantalla como, por ejemplo, en la pantalla de una tableta o un teléfono
móvil, podemos hacer algo tan simple como redimensionar el tamaño de la ventana del
navegador. Conforme se hace la ventana del navegador más pequeña, la presentación
visual de la página web va cambiando. También se puede emplear un simulador como el
Opera Mini Simulator, que está disponible a través de una página web, pero no es
muy cómodo de usar y, además, necesita Java. Es mucho mejor descargarse el
simulador de Opera Mobile, que permite elegir entre diferentes dispositivos.

Aquí podemos ver, cómo se visualiza la misma página principal de Smashing Magazine,
en un Samsung Galaxy S2. En la barra de estado de Opera Mobile aparece el nombre
del dispositivo, las dimensiones de la pantalla, la densidad de píxeles y un botón
para cambiar la visualización, de vertical a horizontal y viceversa.

Ahora comprobamos la visualización con otro dispositivo, con el Samsung Galaxy Tab.
La cabecera de la página no se aprecian muchos cambios, lo que más destaca, es el
cambio del tamaño del logotipo de este sitio web, pero en el pie de la página, sí
que se aprecian tres cambios importantes. Cambio del diseño de una columna a dos
columnas, cambio del color de fondo y cambio del color del texto de los
encabezados. ¿Por qué esos cambios? Eso hay que preguntárselo al diseñador de la
página.

Veamos ahora la página principal de la Universidad de Alicante, una página web que
no tiene diseño adaptativo. Así es como se visualiza con una resolución de pantalla
de 1920 píxeles de ancho. Si la comparamos con Smashing Magazine, notamos un
detalle importante, dos amplias zonas vacías, en las que no se muestra ningún
contenido. Esto se debe a que esta página está realizada con un diseño fijo de 960
píxeles, sin embargo, en el caso de Smashing Magazine, el diseño aprovecha los 1900
píxeles de la pantalla, ya que emplea un diseño flexible que se adapta al tamaño de
la ventana del navegador. Los problemas de esta página aparecen cuando se visualiza
con pantallas más pequeñas, a la izquierda tenemos como se muestra en un Samsung
Galaxy S2, a la derecha como se muestra en un Samsung Galaxy Tab. Podemos ver que
se muestra exactamente igual. El diseño y el contenido de la página no sufre
ninguna alteración. Podemos pensar que eso está bien, pero el problema es que nos
olvidamos de algo. Cuando veamos esta página en un dispositivo pequeño, en un
teléfono móvil, realmente lo veremos así. ¿Qué opinas ahora?

Y ya para terminar, otra herramienta que te puede ser de gran ayuda, ya que te
muestra cómo se ve una página web con diferentes tamaños de pantalla. Aquí tenemos
una prueba con Smashing Magazine. Volvemos a comprobar que la presentación de la
página se adapta a los diferentes tamaños de pantalla y aquí con la página
principal de la Universidad de Alicante, volvemos a comprobar que la presentación
de la página, no se adapta a los diferentes tamaños de pantalla.

Y ya, lo último del último, una lectura recomendada sobre diseño adaptativo, que
puedes encontrar en, por supuesto, Smashing Magazine.

Muchas gracias por tu atención.

Aspectos clave
Debes ver el vídeo CSS: diseño adaptable, adaptativo o flexible en el que se
explica cómo se puede crear con la técnica del diseño adaptable (en inglés
responsive design) un sitio web para que se pueda visualizar de una forma correcta
en todos los diferentes dispositivos que existen en la actualidad y en los que
puedan aparecer en el futuro.

------------------------------LECCIÓN
11---------------------------------------------------------------------------------
--------------------------------

En este vídeo, que forma parte del curso Introducción al desarrollo web, te voy a
explicar cómo se crea un diseño adaptable también llamado adaptativo o flexible.

En otro vídeo, te he explicado que es un diseño de adaptable, adaptativo o

flexible. En este vídeo, vamos a ver cómo crear un diseño adaptable.

Recuerda que hoy existe un problema, a la web, ya no se accede únicamente desde un

ordenador, sino que también se accede desde otros dispositivos muy diferentes. En
un diseño adaptable, la visualización de la página web, se ajusta de forma dinámica
a las características particulares de cada dispositivo para ofrecer al usuario la
mejor experiencia posible.

Un diseño adaptable se basa en emplear, de forma bastante ingeniosa, ciertas

propiedades de CSS, que no eran muy conocidas. El secreto del diseño adaptable está
en el uso de los media queries. Con las media queries, podemos adaptar la
visualización de la página web en función de diferentes parámetros como, por
ejemplo, la densidad de píxel, la resolución de pantalla, la orientación de la
pantalla y otros parámetros.

Un elemento clave es que debemos emplear tamaños relativos en vez de tamaños fijos.
Hay que emplear unidades de medida como el porcentaje, para las anchuras y em, para
los tamaños de texto.

En el artículo Multi-Device Layout Patterns, se explican varios patrones de diseño

adaptativo, vamos a repasarlos rápidamente.

El primero, llamado casi fluido, es quizás el diseño más popular y consiste en

modificar la anchura de los componentes de la página, hasta cierto límite, que ya
no se puede más, pasando a un diseño de una sola columna.

El segundo, caída de columna, es muy parecido al anterior. En este caso se van

situando las columnas una debajo de otra hasta llegar a un diseño en una sola
columna.

El tercero, cambio de la estructura, es quizás el más potente y consiste en

utilizar un diseño distinto para cada situación contemplada.
El cuarto, pequeños cambios, se puede aplicar en diseños sencillos basados en una
sola columna, que solo necesitan pequeños ajustes en algunos elementos de la
página.

Y el último, fuera de la pantalla, que consiste en esconder, en situar fuera de la

pantalla ciertos elementos, que aparecen solamente cuando el usuario lo solicita,
por ejemplo, a través de la activación de un botón o un enlace.

En un diseño real, lo normal es que mezclemos varios patrones a la vez. Así, es muy
normal utilizar la caída de columna junto con los pequeños cambios. Antes de
realizar un diseño adaptable, hay que pensarlo muy bien, porque lo que es válido
para la pantalla del ordenador, puede no serlo para la pantalla de un teléfono
móvil.

Antes de ponerse a escribir el código CSS, es imprescindible realizar un diseño en

papel de lo que se quiere lograr. Existen plantillas, como ésta que te recomiendo,
que te pueden ayudar a hacer tu diseño en papel. En el papel tienes que jugar con
los distintos módulos que componen tu página web y tienes que decidir qué mostrar,
dónde mostrar y cómo mostrar cada módulo.

Ya para terminar, te aconsejo la lectura del artículo: Responsive Web Design, de

Ethan Marcotte, el artículo que puso nombre a todas estas técnicas.

Y ahora, te invito a que veas la segunda parte de este vídeo, en el que se

desarrolla un diseño adaptable desde cero.

Muchas gracias por tu atención.

Aspectos clave
En el vídeo CSS: creación de un diseño adaptable, adaptativo o flexible (parte 1)
se explica qué es el diseño adaptable (en inglés responsive design), se muestra la
regla @media y se muestran algunos patrones de diseño adaptativo (casi fluido,
caída de columna, cambio de la estructura, pequeños cambios, fuera de la pantalla).

------------------------------LECCIÓN
12---------------------------------------------------------------------------------
--------------------------------

En este vídeo, que forma parte del curso Introducción al desarrollo web, te voy a
mostrar cómo crear un diseño adaptable sencillo.

En otro vídeo, te he explicado qué es un diseño adaptable, adaptativo o flexible y

te mostrado algunos patrones de diseño adaptable. En este vídeo, vamos a ver cómo
crear un diseño adaptable desde cero.

Voy a utilizar dos herramientas para mostrar el funcionamiento del diseño

adaptable, por un lado, tenemos la extensión Windows Resizer, para Google Chrome,
que permite cambiar el tamaño de la ventana del navegador, por otro lado, tenemos
la aplicación Opera Mobile Emulator, que permite emular la visualización de una
página web con diferentes dispositivos móviles, como teléfonos o tabletas.
Al realizar un diseño adaptable, hay gente que defiende realizar primero el diseño
para el ordenador, es decir, para el dispositivo de mayor resolución y luego
adaptarlo para el móvil, el dispositivo de menor resolución, sin embargo, también
hay gente que defiende lo contrario, lo que se llama mobile first.

Yo voy a aplicar el primer método, voy a realizar un diseño para el ordenador y

luego lo voy a adaptar al móvil. Vamos a utilizar como ejemplo para explicar cómo
hacer un diseño adaptable, esta página web que estamos viendo ahora mismo sin CSS.
Estos elementos son el subtítulo de la página y en realidad no van a aparecer los
tres a la vez, sino que cada vez aparecerá uno solo.

Yo voy a definir tres diseños en el diseño adaptable, un diseño que he llamado

grande, otro mediano y otro mini. Aparecerá escrito grande, cuando el tamaño del
área de visualización de la ventana del navegador sea mayor o igual que 981
píxeles, mediano cuando el tamaño del área de visualización de la ventana del
navegador, esté comprendido entre 481 píxeles y 981, y mini cuando sea menor o
igual que 480 píxeles.

Para el menú, hemos definido dos estilos de presentación, mediante una lista ul y
mediante una lista desplegable de tipo select, además, en el pie, aparece repetido
el menú, mediante una lista desplegable de tipo select.

A cada módulo o bloque principal de la página web, le hemos puesto un color de

fondo para identificarlo correctamente. Esta es la presentación de la página web en
la pantalla de un ordenador con la resolución máxima, en concreto, 1900 píxeles de
ancho. Se ha optado por un diseño basado en dos columnas, con el menú principal
situado a la izquierda y la zona de contenido a la derecha.

Esta es la presentación con una resolución de 640 píxeles de ancho. En este caso,
como se ha reducido el ancho, se emplea un diseño basado en una sola columna,
primero aparece el menú principal y después la zona de contenido.

Finalmente, está la presentación en un dispositivo móvil, como un teléfono móvil,

con una resolución de 320 píxeles de ancho, en este caso, se ha optado por
convertir el menú en una lista desplegable, para ganar algo de espacio. Podemos
ver, que se pueden apreciar diferencias entre las diferentes presentaciones, además
de lo comentado respecto a la maquetación, el cambio de dos a una columna, también
hay cambios en el tipo de letra y en la alineación del texto, que pasa de centrado
a alineado a la izquierda. Lo importante, no es que se vea exactamente igual en
todos los casos, eso es imposible, lo importante, es que se pueda ver
correctamente.

Vamos a ver el código HTML y CSS que he escrito para lograr este efecto.

En primer lugar, vamos a comprobar cómo al cambiar el tamaño de la ventana del

navegador, se activan los diferentes diseños adaptables que he definido. Que cambio
el tamaño de la ventana del navegador y podemos ver cómo llegará un momento, en el
que se activa el diseño mediano, he puesto aquí estos títulos, cambio el título de
la página para que se vea el cambio. fijaos como aquí tenemos el diseño grande y a
continuación pasamos al diseño mediano. En el cambio del diseño grande al diseño
mediano, podemos ver que hay un cambio en la maquetación, en el número de columnas
y también hay un cambio en el tipo de letra empleado, en la fuente. Este cambio del
tipo de letra, simplemente lo hago para indicar que podemos cambiar muchos aspectos
en el diseño de nuestras páginas.

Si sigo haciendo más pequeña la ventana del navegador, llegará un momento en el que
se activará el diseño pequeño, el diseño que llamado mini, aquí lo tenemos, vuelvo
a hacer la ventana más grande, se activa el diseño mediano y aquí tenemos el diseño
mini. En el diseño mini, sigue la maquetación a una sola columna, pero hay un
cambio importante, esta lista, este menú, se convierte en una lista desplegable,
como podemos ver aquí, que contiene exactamente el mismo contenido y también
aparece en el pie de la página, la misma lista desplegable repetida, para tener un
acceso rápido al menú. También hay un cambio en el tipo de letra que se emplea,
podemos apreciar cómo cambia el tipo de letra de un tipo serif, el que tenemos
ahora, a un tipo sans-serif y también apreciamos otro cambio importante en la zona
de contenido, en los diseños grande y mediano, en la zona de contenido, aparecen
unos enlaces a distintas entradas con una pequeña descripción, sin embargo, cuando
pasamos al diseño pequeño, esa descripción, ese resumen de la entrada desaparece.

Vamos a ver cómo hacemos todo esto con HTML y CSS. Este es el código HTML de la
página de ejemplo. Primero vamos a revisar rápidamente el HTML para ver que no hay
nada especial, he empleado HTML5 y estoy usando algunas de las nuevas etiquetas
semánticas de HTML5, por ejemplo, aquí tengo el header, la cabecera de la página,
aquí tengo este elemento nav, el elemento principal de navegación, mi menú y luego
tengo un apartado section, que está compuesto de diferentes artículos. Tenemos aquí
un artículo, otro artículo y otro artículo y por último tenemos el pie. Como vemos,
por ejemplo, aquí en el pie, tenemos la lista desplegable que hemos visto que
aparece aquí, en el pie de página, pero unas veces aparece y otras veces como vemos
aquí, desaparece, aquí en el diseño mini, aparece.

¿Cómo logro eso? Pues, en mi CSS me he declarado unas clases, ahora después lo
veremos, para activar los elementos que quiero ver o que no quiero ver, según el
tamaño de pantalla, aquí por ejemplo tengo esta clase display-mini, para que este
elemento se visualice solamente cuando estamos en el diseño adaptable mini.

Aquí, por ejemplo. el resumen de las entradas que en el diseño mini no aparece,
pero sí que aparece en el diseño mediano y en el diseño grande, lo podemos ver
aquí, pero en el diseño mini desaparece, pues le pongo a cada resumen, le pongo
estas dos clases display-great, para decir que quiero que aparezca en el diseño
grande y display-medium, para indicar que quiero que también aparezca en el diseño
medio. Como no le he puesto display-mini, cuando se active el diseño pequeño, el
diseño mini, estos elementos no se visualizarán.

Fijaos que voy a tener el mismo HTML, sea cual sea el dispositivo con el que se
consulte esta página, eso sí, tengo que, en algunos casos, pues poner algún
contenido extra que aparecerá y desaparecerá según el dispositivo.

Vamos a ver el CSS que he definido para mi página, en realidad, como vemos aquí, no
hay un solo CSS, sino en red hay varios ficheros CSS y ahora explicaré por qué.
Pero, antes de ir a ver cada uno de estos ficheros, vamos a ver esta instrucción
meta, que es muy importante y la clave para que todo esto funcione en los
dispositivos móviles, si se me olvida poner esta etiqueta meta, realmente no
funcionará. Vamos a comprobarlo, para ello tengo aquí el emulador de dispositivo
móvil, el Opera Mobile Emulator y he elegido el dispositivo Samsung Galaxy S2, que
tengo aquí ya abierto y tengo cargada mi página de ejemplo. fijaos que, como aquí
en la presentación vertical, en este dispositivo móvil, como el ancho de pantalla
son 480 píxeles, se activa el diseño mini, sin embargo, si giro el dispositivo, se
activa el diseño mediano, porque ahora el ancho de pantalla son 800 píxeles y
podemos ver cómo en esta presentación sí que me aparece el resumen, me aparece el
menú normal y cuando vuelvo a girar cambia la presentación, cambia el diseño y
aparece la lista desplegable y el resumen de las entradas no aparece.

Fijaos como sí que funciona el diseño adaptable y cómo se ve bien la página web,
sin embargo, ahora voy a quitar la etiqueta meta, la quito, simplemente la comento
y veamos qué pasa, grabo la página, vuelvo al emulador y le doy a recargar. El
problema que aparece es que ahora no se está aplicando el diseño adaptable, ahora
lo que el navegador de este dispositivo móvil intenta hacer, es mostrar la página
como se mostraría en un ordenador y por tanto no se ve correctamente y yo tengo que
realizar zoom, para poder moverme por la página, pero como vemos la navegación con
el zoom no es correcta, tengo que estar desplazándome y tengo dificultades para
leer todo el contenido de la página. Vamos a volver a activar la etiqueta meta y
veremos otra vez, cómo se activa el diseño adaptable o adaptativo, le doy a
recargar y me aparece otra vez el diseño esperado.

Bien, vamos a ver los CSS que he definido para lograr este efecto. En primer lugar,
tengo un CSS que llamado colors.css. que simplemente, me define los colores de mi
página, en este ejemplo solamente he definido unos colores de fondo, para los
distintos bloques que componen mi página y también he definido el color para los
enlaces y el color principal del texto, que le he puesto negro.

Fijaos que he dividido el CSS en varios ficheros, lo podría haber escrito todo en
uno solo, pero al dividirlo en varios ficheros, me permite de una forma más cómoda,
saber a qué fichero debo de ir para cambiar algo, cuando yo quiera cambiar
solamente los colores, me iré a este fichero, cuando quiera cambiar otra cosa, me
iré al fichero correspondiente.

El siguiente fichero que he definido es el base.css, en el fichero base.css aplico

aquellas propiedades que quiero que siempre se aplique y además he definido estas
tres clases, que son el truco para esconder o mostrar cierto contenido, según el
diseño que se esté aplicando. Entonces por defecto, en base voy a ocultar todo
aquello que lleve estas propiedades display-grade, estas clases perdón, display-
great, display-medium o display-mini. Luego tengo tres ficheros, great, medium y
mini, que se activará según el tamaño de la pantalla, ahora lo veremos, se activa
con la instrucción media, con las media queries y en cada uno de estos ficheros en
great, en medium y en mini, voy activando para que se muestre la clase
correspondiente. Por ejemplo en great, activo el display-great, para que aquello
que lleve esta clase realmente se muestre. En médium, activo aquello que lleve la
clase display-medium y finalmente en mini, activo aquello que lleve la clase
display-mini.

Si vuelvo a mi página HTML, vamos a ver los media query, que es realmente el truco
para que funcione todo esto, más que un truco, no es un truco, es una técnica y
consiste en indicar para qué medio quiero que se aplique este CSS. Aquí estoy
indicando que esté CSS quiero que se active para pantalla y cuando la anchura
mínima de la pantalla sean 981 píxeles. Cuando se cumpla esta condición, se cargará
y se aplicará este CSS, si no se cumple esta condición, no se aplica este CSS.

El segundo CSS medium lo he definido también para pantalla y para un ancho mínimo
de 481 píxeles y un ancho máximo de 980 píxeles, fijaos que es justo un píxel menor
que el tamaño anterior. Y el último CSS, el mini, el que se aplica en dispositivos
con una pantalla pequeña, es también para pantalla, para screen y cuando la máxima
anchura sean 480 píxeles.

Por tanto, cuando yo estoy viendo la página web así de grande, no se están cargando
todos los CSS, ¿Qué CSS se aplican? Se aplica colors, se aplica base y de estos
tres, se aplicará solo great.

En base, estoy escondiendo en principio, todo lo que le he puesto la clase display-

mini, display-medium y display-great, todo eso por defecto aparecerá escondido,
pero como estoy diciendo que se está cargando este CSS, el great, el great me
activará, me mostrará todo aquello que lleve la clase display-great, por tanto,
consigo que solo se vea lo que lleve esta clase y los que lleven esta clase
quedarán ocultos y la misma filosofía se aplica con medium y con mini.

Como podemos ver, puedo también en cada uno de los CSS, aplicar ciertas propiedades
que solamente se aplicarán cuando se cargue este CSS, por ejemplo, cuando se cargue
el CSS great, es decir, cuando la anchura mínima sea 981 píxeles, pues se alinea el
texto de los encabezados h1, h2, se realiza la maquetación en dos columnas de la
cabecera, perdón, la maquetación en dos columnas del menú de navegación y de la
sección principal y se centra todo el contenido de la página, ya que el contenido
de la página va encerrado, por un lado tenemos el header y por otro lado tenemos el
wrapper, que encierra el menú y la zona de contenido principal. Todo eso es lo que
hacemos en el CSS great, para tamaños de pantalla grande. fijaos que aquí está la
maquetación a dos columnas, una maquetación típica realizada con float.

En medium realizamos realmente poco, dejamos que todo se presente en su forma

normal y únicamente cambiamos el tipo de letra a Georgia. Vamos a verlo, aquí
tenemos la presentación great y al hacer pequeña la ventana del navegador, se
presenta con la presentación mediana, que únicamente ha cambiado el tipo de letra.

Y por último en la presentación mini, volvemos a cambiar el tipo de letra ponemos

Arial, vamos a verlo cómo cambia el tipo de letra y se muestra Arial y también
cambio el tipo de letra de las listas desplegables, para que ocupen todo el ancho
de pantalla y salgan con un tipo de letra ligeramente mayor que el tipo de letra
normal, de esta forma logro que el menú sea más ancho, sea más grande y sea más
fácil de activar, cuando estamos trabajando con un dispositivo de pantalla táctil,
como un teléfono móvil.

Ya para terminar, algo que se ha olvidado antes explicar, el componente Windows

Resizer que tengo instalado aquí, en Chrome. Una vez instalado, se activa este
icono, que me permite cambiar el tamaño de la ventana del navegador, a alguno de
estos tamaños prefijados, por ejemplo, puedo, fácilmente, cambiar el tamaño a 320 x
480, como si fuese un teléfono móvil o puedo ponerle 640 x 480, o por ejemplo 1024
x 768. Es una herramienta muy cómoda para cambiar el tamaño de la ventana del
navegador e intentar simular distintos dispositivos.

Para finalizar, te invito a ver la tercera parte de este vídeo, en el que te indico
varias referencias y fuentes de información, que te pueden ayudar a continuar
aprendiendo el diseño adaptativo.

Muchas gracias por tu atención.

Aspectos clave
Debes ver el vídeo CSS: creación de un diseño adaptable, adaptativo o flexible
(parte 2) en el que se muestra el desarrollo de un ejemplo con diseño adaptable (en
inglés responsive design) completo desde cero y se recomiendan algunas herramientas
herramientas (Window Resizer, Opera Mobile Emulator).

------------------------------LECCIÓN
13---------------------------------------------------------------------------------
--------------------------------

En este vídeo, que forma parte del curso Introducción al desarrollo web, te voy a
proporcionar algunas referencias y fuentes de información, que te pueden ayudar a
aprender más cosas sobre diseño adaptable, adaptativo o flexible.

En la primera parte de este vídeo te he explicado que es un diseño adaptable,

adaptativo o flexible, en la segunda parte te explicado, cómo se crea un diseño
adaptable desde cero. En este vídeo te voy a dar algunas referencias interesantes,
para que continúes con tu aprendizaje y no te sientas perdido, como si no parases
de dar vueltas y vueltas.

En primer lugar, te recomiendo el artículo seminal: Responsive Web Design, de Ethan

Marcotte, que fue el inicio de todo esto, a continuación, te aconsejo el artículo:
Responsive Web Design: What It Is and How To Use It, que lo explica prácticamente
todo, desde el concepto de un diseño adaptable, hasta su realización.

Después te aconsejo que pases unos minutos en el sitio Media Queries, que es un
catálogo de sitios web, que utilizan el diseño adaptable. Seguro que en este sitio
encuentras inspiración para tus propios diseños.

Cuando ya tengas claro qué es el diseño adaptativo y te quieras poner a desarrollar

tus propios diseños, te aconsejo que consultes el sitio web This is Responsive y en
especial el apartado Responsive Patterns, una biblioteca de patrones de diseño
adaptativo y por supuesto también podemos usar algún Framework de CSS, con soporte
para diseño adaptativo como Skeleton o el fantástico Bootstrap, basado en el
Framework de Twitter.

A continuación, cuando ya tengas claro qué es y cómo se hace un diseño adaptable,

te aconsejo dos artículos en los que se realiza la autopsia del diseño de dos
páginas que aplican diseño adaptable, por un lado, tenemos el artículo A Responsive
Design Case Study y el artículo Grids, flexibility and responsiveness, en el que
comienza con la elección de la tipografía, pasa a la definición de la rejilla de
trabajo y acaba con pequeños trucos o tweets.

Por último, te recomiendo dos vídeos: Responsive Design, una conferencia seminario
en español, organizado por TuCamon y Prototyping Responsive HTML5 web apps with
matt Kelly, esta vez en inglés.

Aspectos clave
En el vídeo CSS: creación de un diseño adaptable, adaptativo o flexible (parte 3)
se ofrecen algunas referencias y fuentes de información para aprender más cosas
sobre diseño adaptable, adaptativo o flexible (en inglés responsive design).
---------------------------------C Ó M O S E L O G R A Q U E U N A P Á G
I N A W E B T E N G A É X I T O-------------------------------

---------------------LECCIÓN
1----------------------------------------------------------------------------------
----------------------------------------

Hola, soy Olga Carreras, Consultora en Experiencia de Usuario y autora del blog:
Usable y accesible.

En este vídeo os voy a explicar qué es SEO y por qué es importante para vuestros
desarrollos web.

Realicemos una búsqueda en Google. Vamos a buscar, por ejemplo, hoteles. La página
de resultados que muestra un buscador tras realizar una búsqueda se denomina SERP.
En una SERP, podemos distinguir dos tipos de resultados. Los resultados naturales u
orgánicos, en la parte central de la página, que son los que están basados en el
algoritmo que aplica el buscador de manera objetiva para determinar qué resultados
son más relevantes para esa búsqueda concreta. Por tanto, no puede comprarse
aparecer o no en los resultados orgánicos o aparecer en una u otra posición.

El segundo tipo de resultados son los resultados patrocinados, anuncios

publicitarios de pago, comprados mediante Google Adwords, situados encima y a la
derecha de los resultados orgánicos.

SEO, optimización para motores de búsqueda o más común en español, posicionamiento

en buscadores o posicionamiento orgánico, es el conjunto de técnicas para mejorar
la visibilidad de un sitio web en los resultados de búsqueda orgánicos de los
diferentes buscadores. El objetivo principal es aparecer en las primeras posiciones
para determinados términos de búsqueda o palabras clave, por el contrario, la
disciplina que se encarga de la contratación, gestión y análisis de los enlaces
patrocinados en los buscadores se denomina SEM o marketing en buscadores.

A menudo, hablamos de posicionamiento en buscadores, como sinónimo de

posicionamiento en Google, puesto que es el buscador más usado en el mundo. En
España, es el buscador que utilizan más del 90% de los usuarios, pero no hay que
olvidar que este porcentaje de uso es diferente según el país. Por ejemplo, vemos
que es menor en Estado Unidos y que hay países, como por ejemplo China, en los
cuales Google no es el buscador más usado.

¿Por qué es importante aparecer en las primeras posiciones de los resultados

orgánicos del buscador? Porque mejorar el posicionamiento orgánico de una página
web para una búsqueda determinada, aumenta las probabilidades de que esa página sea
visitada por el usuario que está realizando esa búsqueda concreta, es decir, hay
más probabilidades de que haga clic en nuestro resultado. Esto supone más visitas
al sitio web, que podría traducirse, por ejemplo, en más ventas si hablamos de un
ecommerce o de más alumnos inscritos, si hablamos de una universidad.

Numerosos estudios de tracking, han demostrado que la mirada del usuario se

concentra en los tres primeros resultados orgánicos de la SERP, un área denominada
triángulo dorado y a medida que nos alejamos de estos primeros puestos, el
porcentaje de clics, como vemos, cae drásticamente. El porcentaje de clics cae más
aún, cuando nos alejamos de la primera página de resultados. En términos generales,
porque como se observa en la gráfica, el primer resultado de la segunda página
genera más visitas que el último resultado de la primera página, es decir, aparecer
en la posición 11 es mejor que aparecer en la posición 10.

También hay estudios sobre cómo influye cada uno de los elementos de un resultado
de búsqueda, en la decisión de discriminarlos y seleccionar uno u otro resultado.
En los resultados orgánicos los usuarios se fijan, casi la mitad del tiempo, el 44%
del tiempo, en el snippet, que es la descripción de la página o fragmento de texto
con la información más cercana a las palabras de la consulta, seguido del título,
con un 39% del tiempo y, por último, se fijan en la URL, con un 17% del tiempo.
Aunque los porcentajes varían en función del tipo de búsqueda, como se puede
consultar en el estudio que se cita en pantalla.

Pero, ¿cómo funciona Google?, ¿en que se basa para determinar la relevancia de
nuestra web respecto a la búsqueda que se ha realizado? El robot de búsqueda de
Google, Googlebot, rastrea contenido en Internet de forma continua y automática
para el índice de Google, siguiendo los enlaces de las páginas e indexando, de esta
manera, miles de millones de páginas, que se almacenan en miles de máquinas. Es en
este índice donde realmente realizamos nuestras búsquedas. Cuando se realiza una
búsqueda en Google, no se busca en la web, sino en el índice que Google hace de
toda la web, o al menos, de la parte a la que puede acceder.

El algoritmo que aplica Google para determinar la relevancia de nuestra página,

para unos términos de búsqueda concretos y en base al cual posicionar nuestra
página en los resultados de búsqueda, es modificado con frecuencia y son más de 200
factores los que se tienen en cuenta. El algoritmo de Google no se conoce con
exactitud, pero sí muchos factores que influyen, como, por ejemplo, el número,
autoridad o temática de las páginas que enlazan con la nuestra, la velocidad de
carga del sitio o que otorga prioridad a las páginas con contenido propio,
actualizado y de interés para los visitantes. Puedes consultar una recopilación de
factores, hecha en base a cientos de fuentes, en la infografía que se cita en
pantalla.

Las técnicas SEO, para mejorar el posicionamiento de las páginas, se centran, por
tanto, en dos objetivos básicos. Primero facilitar el rastreo y la indexación de
las páginas de nuestro sitio por parte de los robots de los buscadores y que ésta
se realice por determinadas palabras clave. Y la segunda, conseguir que Google,
considere nuestra página relevante para determinadas búsquedas. Por tanto, una de
las primeras cosas que debes plantearte desde el inicio es por qué palabras clave
quieres posicionar tus páginas. Google también puede penalizar un sitio si
considera que está empleando técnicas poco lícitas para mejorar su posicionamiento,
lo que se denomina Black Hat SEO, por contraposición a las buenas prácticas, White
Hat SEO.

La mejor manera de mejorar el posicionamiento orgánico de nuestras páginas, que

éstas no sean penalizadas y que las variaciones en el algoritmo de Google no nos
afecten, es seguir una serie de buenas prácticas. Vamos a tratar estas buenas
prácticas, para mejorar el posicionamiento orgánico de vuestras páginas, en la
segunda parte de este vídeo, que os invito a ver a continuación.

Ya para terminar, estas son las direcciones de mi blog, de mi web y de mi cuenta de

Twitter. En ellas puedes encontrar información sobre mí y sobre mi trabajo, así
como artículos relacionados.

Muchas gracias por tu atención.

Aspectos clave
El posicionamiento u optimización en buscadores, conocido en inglés por el término
SEO (Search Engine Optimization).

Conceptos básicos del posicionamiento o SEO (Search Engine Optimization), SERP

(Search Engine Results Page), SEM (Search Engine Marketing), Black Hat SEO y White
Hat SEO.

---------------------LECCIÓN
2----------------------------------------------------------------------------------
----------------------------------------

En el vídeo anterior os expliqué los conceptos básicos del posicionamiento orgánico

en buscadores, los objetivos de las técnicas SEO y por qué son importantes para
vuestros desarrollos web.

En este vídeo, vamos a repasar cuatro técnicas básicas para facilitar el rastreo e
indexación de tu contenido y mejorar su posicionamiento orgánico en los buscadores.
Para ello, seguiremos la guía de Google sobre optimización para motores de
búsqueda. Todos los buscadores en el fondo, funcionan de forma similar, así que
estas técnicas te servirán también para mejorar el posicionamiento orgánico de tus
páginas en todos ellos.

Las técnicas que vamos a repasar son las que se denominan on page, es decir,
aquellas que puedes aplicar en tus páginas. Frente a las técnicas off page, que se
centran en conseguir el mayor número de enlaces de calidad que apunten a nuestro
sitio.

La primera técnica que vamos a tratar es crear títulos de página únicos y precisos.
Para ello usaremos la etiqueta title, que se incluye dentro del head de la página.
Si tu página se muestra en la página de resultados, el contenido de la etiqueta
title es, por lo general, lo que aparece en la primera línea del resultado. Las
palabras de la consulta que el usuario realizó estarán en negrita, en este caso, se
buscó glosario accesibilidad. El título debe ser efectivo para las personas, pues
será un elemento decisivo, para que los usuarios decidan si la página es de su
interés. Pero también, efectivo para los buscadores, pues les informa sobre qué
trata la página y es un factor muy relevante para su posicionamiento. Ten en cuenta
que las palabras que incluye el título, tendrán para el buscador mayor valor que
las presentes en otras partes menos relevantes de la página.

Tres buenas prácticas en relación con el title de tus páginas son, tener un título
único para cada página del sitio. Debe ser conciso y no demasiado largo, de lo
contrario, como se observa en el ejemplo en pantalla, solo se mostrará el comienzo
del mismo, se recomienda que no tenga más de 70 caracteres. Y, en tercer lugar,
debe describir con precisión el contenido de la página, usa las palabras clave más
relevantes para ella, pero sin rellenar con palabras clave innecesarias. Si sigues
estas buenas prácticas, será menos probable que a Google no le guste tu etiqueta
title y decida reescribirla por ti, como se ve en este ejemplo.

La segunda técnica recomendada para mejorar el posicionamiento de vuestras páginas,

es utilizar la metaetiqueta description. Se incluye dentro del head de la página y
proporciona los motores de búsqueda un resumen de la página. Google puede utilizar
este resumen para mostrarlo en el fragmento de texto, llamado sniped, que describe
cada resultado de la búsqueda. Si está bien redactado, aumentan las probabilidades
de captar la atención del usuario y de que seleccione nuestra página. Aunque otras
veces, Google no muestra el contenido del meta description, como se ve en este
ejemplo, sino que utiliza una parte relevante del texto de la página que concuerda
con la consulta del usuario.

Tres buenas prácticas a la hora de redactar el meta description de tus páginas son,
en primer lugar, utiliza una inscripción única para cada página, en segundo lugar,
cuida su extensión, el servicio de herramientas de Google para webmaster, te
indicará si tus descripciones son demasiado largas o demasiado cortas o si están
duplicadas en diferentes páginas. Lo habitual, en el caso de la descripción, es
recomendar que no se sobrepasen los 150 - 160 caracteres.

Las herramientas para webmasters de Google, es una de las herramientas básicas que
debes consultar, pues te ofrece mucha información útil, no solo sobre posibles
errores en tus títulos o descripciones, sino también información sobre problemas de
rastreo o indexación, sobre microformatos, sobre los enlaces entrantes, las
palabras clave o las consultas de búsqueda, con volumen de impresiones y clics.

En tercer lugar, la última recomendación para las descripciones de tus páginas, es

que escribas una descripción de calidad, que informe y a la vez cree interés.
Evitando las descripciones que solo contienen palabras clave.

La tercera técnica que vamos a tratar, es mejorar la estructura de las URLs. La URL
de la página es uno de los elementos de un resultado de búsqueda. Si la URL
contiene palabras claves relevantes, es más fácil de comprender, rastrear, enlazar
y recordar. Además, proporciona a los usuarios y a los motores de búsqueda,
información adicional sobre la página, más allá de la que daría un ID de sesión o
un nombre de parámetro.

Tres buenas prácticas para mejorar tus URLs son, en primer lugar, usa URLs con
palabras relevantes para el contenido y la estructura del sitio. Evita URLs largas
o con excesivas palabras clave. Evita URLs con parámetros innecesarios y evita URLs
demasiado genéricas.

En segundo lugar, utiliza una estructura de directorios simple, que organiza el

contenido y facilite a los usuarios que visitan tu sitio saber dónde están dentro
de este. Trata de usar la estructura de directorios para indicar el tipo de
contenido que se encuentra en esa URL.

Y, en tercer lugar, evita que a una misma página se pueda acceder desde URLs
diferentes, en caso contrario crear redirecciones 301 o usa direcciones URL
canónicas, puedes consultar cómo hacerlo correctamente, en el centro de ayuda de
las herramientas para webmasters de Google.

También es muy recomendable que tus páginas sean Responsive Design, es decir, que
tus páginas se adapten a los diferentes dispositivos, pero con un código y una URL
única.

La cuarta técnica que vamos a tratar, es facilitar la navegación en tu sitio para

que los usuarios se encuentran rápidamente lo que buscan y para que los motores de
búsqueda puedan rastrear eficazmente el sitio. Repasaremos seis buenas prácticas
para conseguirlo.

La primera es crear una jerarquía que permita llegar de forma fluida del contenido
más general al más específico evitando, como en el ejemplo, que sean necesarios
muchos clics para llegar al último contenido.

En segundo lugar, usa migas de pan y que éstas sean clicables y consistentes a lo
largo de todo el sitio.

En tercer lugar, incluye un mapa del sitio bien estructurado y en el cual cada
elemento sea un enlace. Incluye también un archivo sitemap xml, para asegurar que
los motores de búsqueda indexan todas tus páginas. Puedes aprender cómo hacerlo en
el centro de ayuda de las herramientas para webmasters de Google.

En quinto lugar, usa enlaces de texto para la navegación, así serán más fáciles de
comprender y rastrear por los robots de los buscadores y mejorarás la accesibilidad
de tu sitio.

Y por último, crea una página de error 404 útil, coherente con el diseño del sitio
y que no sea indexada por los buscadores, mediante el meta noindex o mediante el
archivo robot txt. Puedes consultar la guía de Google que estamos siguiendo para
ampliar información sobre este tema.

Ahora, te invito a que veas la segunda parte de este vídeo, en el cual repasaremos
otras cuatro técnicas importantes para facilitar el rastreo e indexación de tu
contenido y mejorar su posicionamiento orgánico en los buscadores.

Ya para terminar, estas son las direcciones de mi blog, de mi web y de mi cuenta de

Twitter. En ellas puedes encontrar información sobre mí, sobre mi trabajo, así como
artículos relacionados.

Muchas gracias por tu atención.

Aspectos clave
En el siguiente vídeo se describen cuatro técnicas "on page" para mejorar el
posicionamiento (SEO) de una página web:

Crea títulos de página únicos y precisos.

Utiliza el meta "description".
Mejora la estructura de las URL.
Facilita la navegación en tu sitio.
---------------------LECCIÓN
3----------------------------------------------------------------------------------
----------------------------------------

En el primer vídeo os explique los conceptos básicos del posicionamiento orgánico

en buscadores, los objetivos de las técnicas SEO y por qué son importantes para
vuestros desarrollos web. En el segundo vídeo, repasamos cuatro técnicas on page
básicas, para facilitar el rastreo e indexación de tu contenido y mejorar su
posicionamiento orgánico en los buscadores. Vimos cómo crear títulos de página
únicos y precisos, como utilizar correctamente el meta description, cómo mejorar
las URLs del sitio y cómo facilitar la navegación por el mismo.

En este vídeo vamos a repasar cuatro técnicas on page más y, para ello, seguiremos
la guía de Google sobre optimización para motores de búsqueda. Todos los
buscadores, en el fondo, funcionan de forma similar, así que estas técnicas te
servirán también para mejorar el posicionamiento orgánico de tus páginas en todos
ellos.

Una de las técnicas para mejorar el posicionamiento y, quizás una de las más
importantes, es ofrecer contenidos y servicios de calidad, porque crear contenido
interesante y útil, será probablemente el factor que más influya de los que estamos
tratando. El buen contenido es compartido fácilmente por los usuarios, atrae nuevas
visitas, fideliza a los usuarios y ayuda a crear una buena reputación online.
Diferénciate, por tanto, ofreciendo contenido único y exclusivo, servicios
novedosos y útiles que otros sitios no ofrezcan.

Seis recomendaciones, en relación con tus contenidos, son: en primer lugar, escribe
textos bien redactados, fáciles de leer y de entender. Divide tu contenido en
fragmentos lógicos, organizados en párrafos no muy extensos y precedidos de
encabezados. Evita el contenido duplicado. Piensa las palabras clave, que los
diferentes usuarios del sitio, utilizarían en la búsqueda para encontrar tu
contenido y úsalas en él. Recuerda lo que comentamos en el primer vídeo sobre
conceptos básicos de SEO, las keywords, las palabras clave por las que quieres
posicionarte, no es algo que debas pensar ahora, cuando redactas tus contenidos, es
algo que debes haberte planteado desde el inicio del proyecto.

Google AdWords tiene una herramienta que puede serte de gran utilidad, pues te
ayuda a descubrir variaciones de palabras clave y el volumen aproximado de
búsquedas para cada una de ellas. Por su parte Google Trends, permite ver
tendencias de búsqueda y realizar comparaciones por ubicaciones e intervalos de
tiempo. No uses texto en formato imagen cuando quieras que ese texto forme parte
del contenido y, por último, ten siempre presente que creas contenido
principalmente para las personas, no para los motores de búsqueda, no escondas
texto, ni insertes gran cantidad de palabras clave, sin sentido o molestas para los
usuarios.

Otra técnica importante, es escribir textos de enlace de mejor calidad. El texto

del enlace da información a los usuarios y a los buscadores sobre la página con la
que enlaza. Los textos de enlace de calidad facilitan a los usuarios moverse por tu
sitio y a los buscadores entender sobre qué tratan las páginas a las que estás
enlazando. Los textos de enlace deben ser concisos, descriptivos y darles formato
de enlace, subrayándolos, para que sean más fáciles de distinguir. No recargues
excesivamente los textos de enlace con palabras clave, no pienses solo en los
buscadores, piensa sobre todo en tus usuarios.

La siguiente técnica es optimizar el uso de imágenes. Las imágenes siempre deben

incluir el atributo alt, este atributo permite especificar un texto que proporcione
la misma información o funcionalidad que pretende transmitir la imagen, salvo que
sea una imagen decorativa, en cuyo caso lo dejaríamos vacío. El texto incluido en
el atributo alt, será el texto que se verá si la imagen no se carga o el texto que
se le leerá a los usuarios que usen un lector de pantalla. Si usas una descripción
de imagen adecuada y, además, usas un nombre de archivo descriptivo, facilitarás
que los buscadores entiendan e indexen correctamente tus imágenes, por ejemplo,
para la búsqueda de imágenes de Google.

La última técnica que vamos a tratar en este vídeo, es la correcta utilización de

las etiquetas de encabezado. Los encabezados se incluyen con las etiquetas h, que
tienen seis tamaños, h1 el más importante, hasta el h6 el menos importante. Los
diferentes tamaños de encabezado se utilizan para crear una estructura jerárquica
del contenido, lo cual facilita a los usuarios la comprensión y la lectura del
contenido y a los motores de búsqueda la interpretación e indexación de la página.

Cinco buenas prácticas que debes seguir al crear tus encabezados son: usa una
jerarquía lógica sin saltarte niveles. Úsalos para presentar la jerarquía de la
página, no para dar formato al texto o conseguir un efecto visual, como un texto
más grande o en negrita, para ello puedes usar un estilo definido en la CSS o
etiquetas específicas como strong. No simules un encabezado mediante estilos, por
ejemplo, no utilices un párrafo con tamaño de texto grande para simular un
encabezado h1. Los textos de tus encabezados deben ser descriptivos, claros e
identificar el contenido que encabezan, pero breves y concisos. Y, por último, las
palabras que incluyen los encabezados tendrán para el buscador mayor valor que las
presentes en otras partes menos relevantes de la página, pero no los sobrecargues
de palabras clave innecesarias.

En la guía de Google sobre optimización para los motores de búsqueda, que hemos ido
siguiendo, encontrareis más técnicas relativas a la indexación de las páginas como
el uso del archivo robot txt o el uso del atributo rel nofollow. En la guía se
trata, también, la gran importancia que tiene que tus páginas se carguen
rápidamente u ofrece recomendaciones específicas para la optimización móvil o para
la promoción efectiva de contenidos para conseguir enlaces entrantes, relevantes y
de calidad.

Si queréis profundizar más en el tema os recomiendo el libro: Técnicas avanzadas de

posicionamiento en buscadores. También os recomiendo mi capítulo: Accesibilidad y
SEO, incluido en el libro: Pioneros y Hacedores de diseño e interacción, disponible
gratuitamente. donde os explico cómo estas técnicas, no solo ayudarán a mejorar el
posicionamiento de vuestras páginas, sino también a mejorar su accesibilidad.

Ya para terminar, estas son las direcciones de mi blog, de mi web y de mi cuenta de

Twitter. En ellas puedes encontrar información sobre mí y sobre mi trabajo, así
como artículos relacionados.

Muchas gracias por tu atención.

Aspectos clave
En el siguiente vídeo se describen cuatro técnicas "on page" para mejorar el
posicionamiento (SEO) de una página web:

Ofrece contenido y servicios de calidad.

Escribe textos ancla de mejor calidad.
Optimiza el uso de imágenes.
Utiliza las etiquetas de encabezado de forma apropiada.

---------------------LECCIÓN
4----------------------------------------------------------------------------------
----------------------------------------

En este vídeo, que forma parte del curso Introducción al desarrollo web, te voy a
explicar, brevemente, en qué consiste la web semántica.

La web tiene en la actualidad un problema muy importante. La web no es grande. La

web no es enorme. La web es gigantesca. ¿Cuántos sitios web existen? Es muy difícil
determinar este valor con precisión. No existe un registro único de todos los
sitios web que existen, pero existen algunas aproximaciones.

Netcraft es una compañía inglesa de servicios de Internet. Desde el año 1995,

Netcraft ofrece análisis de cuota de mercado de servidores y alojamiento web,
incluyendo la detección del tipo de servidor web y del sistema operativo empleado
por el servidor web. En su último estudio de junio de 2016 Netcraft estimó que
existían más de mil millones de sitios web y casi seis millones de servidores web.
Desde el año 1995, el número de sitios web ha aumentado exponencialmente y el ritmo
de crecimiento no se detiene. Mil millones de sitios web, representa un sitio web
por cada siete habitantes del planeta, pero además, cada sitio web se compone de
cientos o miles de páginas web.

¿Cuántas páginas web existen? Otra vez, es muy difícil determinar este valor con
precisión, pero existen algunas aproximaciones. En el sitio web, World Wide Web
Size, se estima que la web contiene, al menos, más de cuarenta mil millones de
páginas web indexadas. Cuarenta mil millones de páginas web son muchas páginas web
y, además, ésta es solo una aproximación de las páginas indexadas, hay muchas más
páginas que no están indexadas. A cada habitante del planeta le toca una media de
5,7 páginas web.

Como vemos, la web es gigantesca y esto origina un problema muy importante. Muchas
veces, es muy difícil encontrar con precisión lo que se está buscando. Por ejemplo,
imaginemos que, en Google, queremos buscar fotografías de piedras duras para un
trabajo de ciencias naturales, así que, en Google introduzco la cadena de búsqueda
hard rock, piedra dura en inglés. Y obtengo esto, problema, Hard Rock es el nombre
de una empresa, de una cadena de hoteles y restaurantes. Esto no es lo que yo estoy
buscando. Puedo usar los operadores de Google para refinar la búsqueda. Con el
operador menos, indicó que no quiero los resultados que incluyen la palabra café.
Ahora, ya no me aparece el restaurante Hard Rock, pero ahora me aparecen grupos de
música del estilo hard rock. No hay problema, a la cadena de búsqueda le añado
-music, para indicar que no quiero resultados relacionados con la música. Pero sigo
sin obtener el resultado que busco. Por fin, me aparecen dos fotografías de
montañas con rocas, pero todavía me siguen apareciendo imágenes asociadas al hotel
Hard Rock. ¿No se puede mejorar? Ahora añado –hotel, a la cadena de búsqueda, con
la esperanza de mejorar el resultado. ¿Funcionará? No, no funciona, todavía, no es
lo que yo busco. Ahora añado el término Stone, piedra en inglés. ¿Cambiará el
resultado de la búsqueda? Sí, por fin, esto es lo que yo buscaba. En realidad,
habría llegado a casi el mismo resultado si inicialmente hubiese buscado hard rock
+ stone. Prácticamente, habría obtenido las mismas fotografías, pero con este
ejemplo, quería mostrar un problema de los buscadores actuales.
Los buscadores actuales cada vez son mejores, pero todavía les falta mucha
inteligencia para lograr que los resultados sean siempre los que el usuario espera.
¿Cómo se pueden mejorar los buscadores actuales para que ofrezcan mejores
resultados, resultados más precisos? Lo veremos en la siguiente parte de este
vídeo.

Aspectos clave
La Web es gigantesca, lo que ocasiona problemas en los resultados de las búsquedas,
los buscadores no devuelven siempre lo que el usuario está buscando.

---------------------LECCIÓN
5----------------------------------------------------------------------------------
----------------------------------------

En este vídeo, que forma parte del curso Introducción al desarrollo web, te voy a
explicar brevemente en qué consiste la web semántica.

En el vídeo anterior, vimos que la web tiene un problema muy importante, la web es
gigantesca y eso dificulta que los buscadores siempre proporcionen los resultados
que el usuario espera. Para resolver este problema se está desarrollando la web
semántica, una iniciativa del World Wide Web Consortium, que tiene como objetivo
dotar de significado a la información que se publica en la web.

En la web existe multitud de datos que empleamos todos los días, estos datos no
suelen estar etiquetados, no tienen un significado y eso dificulta su empleo por
las aplicaciones informáticas, como los buscadores.

Para solucionar este problema el W3C, promueve el empleo de nuevas tecnologías como
Linked Data, los vocabularios que definen ontologías y los lenguajes de consulta
como SPARQL. Algunas de las tecnologías que se emplean en la web semántica son los
microformatos, RDFa, los microdatos y JSON for link data.

Schema.org es una iniciativa lanzada por Google, Bing y Yahoo en junio de 2011,
para definir un conjunto de vocabularios comunes, para etiquetar los datos de las
páginas web. La especificación actual está compuesta por 571 tipos, que incluyen
832 propiedades, pero estos números van en aumento. Los tipos, en Schema.org,
forman una jerarquía en la que un tipo puede heredar de otro tipo, por ejemplo, el
tipo book hereda de creative work. Heredar significa que ciertas propiedades, como
is based on o is part of, no se definen en el tipo book, sino que son heredadas del
tipo creative work. El tipo principal en la jerarquía de herencia es Thing.

Vamos a ver ahora la definición del tipo review, que se emplea para el análisis,
crítica o reseña de un producto.

Cuando en Google obtenemos resultados de una búsqueda similares a estos, significa

que esas páginas están haciendo uso del tipo review de Schema.org para etiquetar
los datos asociados a la reseña de un producto. El tipo review hereda del tipo
creative work. A las propiedades heredadas añade propiedades propias como item
review, review body y review rating.

Al final de la explicación de cada tipo de Schema.org, se pueden encontrar ejemplos

de uso. Los ejemplos incluyen el código de etiquetado en diferentes formatos,
microdato, RDFa y JSON for link data.
Ahora te invito a que veas la tercera parte de este vídeo, en el que se analiza un
ejemplo real de Schema.org para mejorar los resultados de las búsquedas.

Aspectos clave
La web semántica es una iniciativa del W3C, las principales tecnologías de la web
semántica (microformatos, RDFa, microdatos, JSON-LD), la iniciativa Schema.org de
Google, Bing y Yahoo.

---------------------LECCIÓN
6----------------------------------------------------------------------------------
----------------------------------------

En este vídeo, que forma parte del curso Introducción al desarrollo web, te voy a
explicar brevemente en qué consiste la web semántica.

En los vídeos anteriores hemos visto que los tres grandes buscadores Google, Bing y
Yahoo, se unieron en junio de 2011 para definir un conjunto de vocabularios comunes
para etiquetar los datos de las páginas web.

Esta iniciativa se conoce con el nombre de Schema.org. En la actualidad Schema.org

está compuesto por 571 tipos, que incluyen 832 propiedades, pero estos números van
en aumento. Uno de estos tipos es Recipe, que se emplea para etiquetar la
información asociada a una receta de cocina. El tipo Recipe, hereda del tipo
creative work. Recipe añade propiedades nuevas como cookTime, el tiempo de cocción,
prepTime, el tiempo de preparación o recipe Cuisine, para identificar el origen de
la receta, como, por ejemplo, francesa o etíope. Al final de la explicación de cada
tipo de Schema.org se pueden encontrar ejemplos de uso. Los ejemplos incluyen el
código de etiquetado en diferentes formatos microdato, RDFa y JSON for link data.

Vamos a ver un ejemplo de uso. Para ello en Google busco Recipe of paella, receta
de paella, en inglés. Obtengo esta página de resultado con un montón de recetas. En
los dos primeros resultados reconozco ya el empleo del tipo Recipe de Schema.org.
Vamos a analizar el primer resultado que podemos ver, que pertenece a un dominio
llamado jaimeoliver.com.

Jamie Oliver es un famoso cocinero inglés, pero como veremos a continuación, Jamie
Oliver no tiene mucha idea de cómo se hace una paella de marisco en España. Si
seleccionamos su página web, navegamos hasta esa página que muestra la receta de la
paella de marisco, junto con una fotografía muy apetitosa. Vamos a ver la
información que aparecía en el resultado de la búsqueda, de dónde sale de la página
de Jamie Oliver. En primer lugar, el título. El título, por supuesto, procede del
título de la página, de la etiqueta title. La descripción, que aparece en el
resultado de la búsqueda, procede de la etiqueta meta con el valor description, tal
como podemos ver en la imagen. La valoración con las estrellas procede de esta
parte de la página. El número de votos de esta otra parte. La duración del tiempo
de cocinado está definida aquí. Todo lo que estamos viendo está definido realmente
en el código HTML mediante propiedades de Schema.org, como podemos ver en este
fragmento de código en el que se ha empleado la propiedad totalTime, para definir
el tiempo total de preparación, y el número de calorías está definida aquí.

Por último, como curiosidad, la seafood paella, la paella de marisco auténtica, no

lleva ni pollo, ni chorizo, ni panceta o bacon, ni caldo de pollo, tal como propone
Jamie Oliver. Sí que hay platos españoles que llevan chorizo, como la fantástica
fabada o las alubias con chorizo. Pero esto de paella de mariscos con chorizo no es
muy típico en España. Existen muchas recetas de paella de mariscos, pero ninguna de
ellas lleva chorizo.

Como vemos, gracias a la web semántica, el funcionamiento de los buscadores puede

mejorar mucho. Ahora falta que mejore el funcionamiento de algunos cocineros.

Por último, en la web para desarrolladores de Google, se puede encontrar mucha

información sobre el uso de los datos estructurados y, por supuesto, sobre el uso
de Schema.org para etiquetar recetas de cocina.

Muchas gracias por tu atención.

Aspectos clave
Debes ver el vídeo La web semántica (3), en el que se explica el uso de Schema.org,
se muestra un ejemplo de uso del tipo Recipe para recetas de cocina.

---------------------LECCIÓN
7----------------------------------------------------------------------------------
----------------------------------------

Muchas gracias a Ciespal por la amable invitación para realizar esta charla y
también, quiero dar las gracias al Gobierno de Ecuador, ya que gracias al programa
Prometeo, estoy realizando aquí una estancia en la Escuela Politécnica Nacional.

Como acaban de presentar, la charla que voy a realizar va a tratar sobre la

usabilidad y accesibilidad, ¿qué tienen en común y qué tienen de diferente? En la
primera parte de la charla, la voy a dedicar a hablar de la usabilidad y la
accesibilidad en el mundo real, el mundo físico y, luego ya, trataré estos temas en
las páginas web.

La presentación que voy a usar está publicada en la siguiente dirección, si no está

ahora mismo ya publicada, en breve, en un par de horas estará disponible. Un
documento pdf con toda la presentación. Y como han explicado, pues vuelvo a
recordar, a través de Twitter se puede interaccionar con esta presentación, con
esta charla, a través del hashtag diseño web y a través de los identificadores de
usuarios @ciespal o a través del mío @sergiollujanmora.

Bien, ¿qué es la usabilidad?, ¿qué es la accesibilidad? Bueno, espero que al final

de esta presentación, pues todos los que estáis ahí detrás de la cámara, tengáis
una idea de qué es cada una de estas disciplinas, dejaré para el final de la charla
el dar una definición. Lo primero que vamos a ver son ejemplos reales de usabilidad
y accesibilidad, o más bien, justo de lo contrario, de falta de usabilidad y
accesibilidad.

Entonces, empecemos con la usabilidad. La usabilidad normalmente se define como la

facilidad de uso. Hay trabajos sobre la usabilidad desde hace bastante tiempo, uno
muy famoso es el libro que se publicó en el año 1988, por Don Norman, que llevaba
por título, La psicología de las cosas de todos los días, de las cosas diarias.
Posteriormente, en ediciones posteriores, le cambió el título a, El diseño de las
cosas de todos los días, y, en la portada, aparece una tetera, que se ha convertido
en un símbolo de la usabilidad. Esa tetera, como podemos ver, pues no se puede
usar, no se puede verter su contenido. Es un claro ejemplo de un diseño erróneo, un
diseño que no es usable. Ese diseño que he mostrado, pues, es un poco una
exageración, pero en la vida diaria encontramos cosas muy parecidas, diseños que
nos dificultan la vida y no hay que irse muy lejos, por ejemplo, aquí tenemos una
cocina con cuatro fuegos, tenemos ahí los controles para ir abriendo o cerrando
cada fuego y tenemos unos dibujos para saber cuál corresponde a cada uno. Pero si
no tuviésemos esos dibujos, como acabo de hacer ahora, los he tapado, sería
bastante difícil saber cuál es para cada fuego. Esto es un error de diseño, esta
cocina, pues, hay que aprender a usarla y uno de los consejos de un buen diseño, de
un buen diseño usable, es que el usuario no tenga que aprender a usar las cosas,
sino que sea intuitivo, que sea natural.

Desgraciadamente es difícil, a veces, lograr ese objetivo, hacer que las cosas sean
simples e intuitivas, pero hay, digamos está la gracia de la usabilidad, lograr a
ella, lograr ello.

Aquí tenemos otro ejemplo de cocina donde la han resuelto, pues como podemos ver,
dibujando unas líneas, unas líneas que conectan cada control con cada fuego. No
hace falta llegar a esto, hay soluciones más elegantes, lo que pasa que hay que
pensarlas un poco, por ejemplo, tenemos esta cocina donde la disposición de los
controles sigue la misma disposición que los fuegos. Aquí es evidente qué control
corresponde a cada fuego, aquí ya hemos logrado un mejor diseño y vemos ya, una
escala de usabilidad, desde dificil de usar a fácil de usar.

Vamos a ver otro ejemplo, un ejemplo muy importante, porque este también nos afecta
al día a día cuando trabajamos con ordenadores y dispositivos electrónicos y es el
tema de los conectores USB. El conector USB se desarrolló en el año 1996, aquí
tenemos el conector macho y aquí tenemos el socket, el conector hembra, donde se
introduce. Ahora mismo, en este dibujo, están alineados, se van a introducir
correctamente. Sin embargo, si el conector de la izquierda estuviese vuelto al
revés, no se podría introducir. El diseño del conector USB es un muy mal diseño,
porque obliga al usuario a introducirlo correctamente en la dirección adecuada. Yo
conozco gente que ha forzado y ha forzado y al final lo ha logrado introducir en el
sentido contrario, eso sí, al final ha roto el ordenador o ha roto el dispositivo
de memoria USB.

No entremos tampoco en el tema de los distintos dispositivos USB, los distintos

tamaños que existen. Eso es otro problema que sufrimos todos los días y esto no es
un tema que afecte a pocas personas, afecta a todo el mundo, tanto que incluso se
han hecho chistes sobre el tema o incluso podemos encontrar páginas en Facebook de
gente que está enfadada con este tema, por ejemplo, esta es una que dice: I hate
plugging in the USB cable the wrong way o tenemos esta otra, que siempre intento
insertar la memoria USB en la forma incorrecta la primera vez.

¿No se podría haber hecho un diseño como los enchufes de corriente? El diseño de
los enchufes de corriente existe desde hace decenas de años y un enchufe de
corriente lo podemos enchufar en cualquier sentido y no plantea ningún problema.
Pues afortunadamente hemos tenido que esperar, como vemos desde el año 96, para que
los ingenieros que desarrollaron el conector USB, desarrollen una solución mejor y
es que, ya por fin, han desarrollado el conector USB reversible y este conector
nuevo USB, el de tipo c, se podrá conectar en cualquier sentido, ya no tendremos
que luchar y luchar por intentar meterlo en la posición correcta. Por fin un diseño
usable, un buen diseño del conector USB.

Muchas gracias por tu atención.

Aspectos clave
Debes ver el vídeo ¿Usabilidad, accesibilidad? (parte 1), en el que se muestran
algunos ejemplos de diseños usables y no usables de la vida diaria.

---------------------LECCIÓN
8----------------------------------------------------------------------------------
----------------------------------------

Así, un poco para resumir, muchos autores dicen que la usabilidad se compone de
tres factores. Se compone de el sentido común, que a veces es el menor de los
sentidos, se compone de simplicidad y se compone de un buen diseño. Cuando tenemos
en cuenta estos tres factores, sentido común, simplicidad y diseño, y nos
preocupamos de lograr lo mejor en cada uno de ellos, pues estamos logrando una
buena usabilidad.

Veamos ahora qué es la accesibilidad. Asociado a la accesibilidad, existen otros

conceptos que significan más o menos lo mismo, diseño inclusivo, diseño universal o
diseño para todos. Es muy típico esta situación, unas escaleras, unas gradas, para
acceder a cierto sitio, a un edificio. ¿Y qué ocurre? Pues, estas gradas no son
accesibles para muchas personas con discapacidad, por ejemplo, una persona que vaya
en silla de ruedas.

Para solucionar este problema, este problema de falta de accesibilidad, pues ¿qué
se suele hacer? Se suelen construir rampas, pero en muchas situaciones ocurre, como
he puesto en esta imagen, la rampa es una entrada secundaria, se indica de forma
explícita, en este caso, acceso para personas de silla de ruedas, en un lateral y
esto lleva implícito una discriminación, un trato distinto a las personas con
discapacidad. Es una solución, pero no es la mejor de las soluciones. Como he dicho
antes, hay que intentar realizar un diseño inclusivo, un diseño para todos. No
soluciones parciales para distintas personas, sino un diseño que englobe a todas
las personas y a sus particularidades.

Por lo menos esta rampa, que muestro aquí en esta imagen, la puede usar una persona
en silla de ruedas, pero a veces se llega a situaciones tan estúpidas y tan poco
útiles, como esta rampa que vemos aquí, con una pendiente excesiva, que una persona
que use silla de ruedas no la va a poder usar. Si intenta bajar por esta rampa se
va a matar. O encontramos otras situaciones igual de estúpidas, como esta otra
rampa que, sí, va saltando, va salvando los escalones, pero el último tramo no hay
rampa, entonces ¿para qué sirve esta rampa? Como digo, son soluciones estúpidas,
soluciones inútiles que ocurren más de lo que se cree en la vida diaria.

¿No se puede hacer mejor?, ¿no se pueden plantear soluciones inclusivas para todos
y que realmente sean buenas? Sí, lo único que hay que hacer es pensarlo un poco
mejor. Aquí, por ejemplo, podemos ver unas imágenes de unas escaleras, unas gradas,
que llevan incluidas las rampas y queda, además, bastante elegante y bastante
bonito. Aquí podemos ver otra imagen de la misma escalera, de las mismas gradas y
no es, únicamente, de este edificio, este edificio está en Chicago, es un edificio,
un museo, aquí, pues claro, han intentado hacerlo bastante elegante, pero hay
situaciones en la calle, este es otro edificio en otra ciudad y podemos ver cómo se
ha integrado correctamente la rampa con las escaleras.

Una pregunta que mucha gente se hace es, ¿la accesibilidad es solo para las
personas con discapacidad? Por ejemplo, las rampas que hemos visto ¿ayudan
solamente a las personas que van en silla de ruedas? Pues no, evidentemente no, una
rampa la pueden usar otras personas que no sean discapacitadas, bajo ciertas
situaciones. Entonces, es un error, como se suele hacer y cómo se pone aquí, en
esta imagen, puede señalar las ayudas para las personas con discapacidad,
señalarlas como que son ayudas solamente para ellos, pues es un error. Aquí
volvemos otra vez un poco al tema de la discriminación. ¿En qué situaciones se
podría usar una rampa por personas que no sean discapacitadas? Aquí os he puesto
tres ejemplos, pero seguro que podemos encontrar muchos más. A la izquierda tenemos
pues una mamá que va con el carrito de bebé y que le va a venir muy bien el que
haya una rampa, para salvar las gradas de un edificio. O en la fotografía del
centro, tenemos a una repartidora que va con una carretilla y que también le va a
venir muy bien la rampa. O a la derecha, tenemos a un señor que va con muletas
porque ha tenido un accidente y, también, le va a venir muy bien subir por la
rampa, en vez de por las gradas.

Como vemos las ayudas para las personas con discapacidad, también ayudan al resto
de personas, en ciertas situaciones y podemos encontrar más ejemplos, este es el
acceso a un sistema de transporte urbano, donde tenemos un pequeño elevador para
salvar estas gradas. Otra vez no solamente ayuda a una persona que vaya en silla de
ruedas, sino también ayuda, pues a esta mamá, que va con el cochecito de bebé. O
aquí tenemos, por ejemplo, unas fuentes a dos alturas, una fuente pública de agua y
tenemos a la derecha, una que está otra vez, mal señalada, porque indica que es
solamente para una persona con discapacidad, una persona que va en silla de ruedas.
Pero seguro que a todos vosotros se os ocurre que la fuente de la derecha, que está
más baja, también va a ayudar pues a los niños, por ejemplo.

Para resumir un poco lo que hemos visto de usabilidad y accesibilidad, ¿qué

consejos os podría yo dar para mejorar la accesibilidad y usabilidad de cualquier
cosa? No solamente de páginas web, ahora después hablaré de las páginas web, pero
de cualquier cosa, cualquier diseño, de un objeto, de un servicio, de un producto.
¿Qué tres consejos básicos os puedo dar? Pues son tres consejos muy sencillos de
entender, lo difícil es aplicarlos. El primero es piensa en el usuario, el segundo
es piensa en el usuario y el tercero es piensa en el usuario, es decir, lo primero
que debes de hacer, cuando te plantees el diseño de algo, es pensar en el usuario
que lo va a utilizar, ponte en su piel, mira a ver cuáles son sus requisitos, sus
necesidades e intenta hacerlo para que el usuario no tenga dificultades en su uso y
así tendrás usuarios felices, usuarios contentos. Si estamos, por ejemplo, pues en
una empresa, pues tendremos usuarios felices que comprarán, seguirán comprando
nuestros productos. Si, por ejemplo, estamos en el caso de educación, yo soy
profesor, pues yo tendré alumnos que seguramente estudiarán mejor, aprenderán mejor
y estarán contentos conmigo. Lo podemos hacer en cualquier contexto, pensar en el
usuario y, por tanto, no pienses en ti, no pienses en hacer las cosas más fáciles
desde tu punto de vista, sino piensa en el usuario final que va a usar tu producto
o servicio.

Muchas gracias por tu atención.

Aspectos clave
Debes ver el vídeo ¿Usabilidad, accesibilidad? (parte 2), en el que se muestran
algunos ejemplos de diseños accesibles y no accesibles en la vida diaria.
---------------------LECCIÓN
9----------------------------------------------------------------------------------
----------------------------------------

Vamos a entrar ahora ya en el tema de la usabilidad web y la accesibilidad web. En

Internet podéis encontrar páginas de todo tipo, páginas que son fáciles de usar y
páginas que son difíciles de usar. Seguramente todos habréis sentido mucha
frustración en muchas páginas, páginas que entráis, no sabéis usar, no sabéis lo
que tenéis que hacer y, seguramente al final, en poco tiempo las abandonáis.

Aquí he puesto un ejemplo de una página horrible, una página que incumple pues,
prácticamente, todos los principios básicos de cómo hacer una página bien. Es una
exageración, os pongo aquí, os dejo la dirección de este sitio web para que lo
visitéis, incluso tiene música, lo que nunca hay que hacer en un sitio web, poner
música en una página web, pues, incluso, este sitio lo tiene. Pero no hay que irse
a casos tan extremos, aquí, por ejemplo, os he puesto pues un problema grave que
tiene un sitio web de una compañía ferroviaria importante de España, en realidad,
ya estoy diciendo el nombre de la empresa, es Renfe, porque no hay otra empresa
ferroviaria en España y, esta web, tiene graves problemas de usabilidad, en
concreto, aquí os he puesto cuatro capturas de cuatro formularios para buscar o
comprar un billete de tren y ¿qué es lo curioso de estos cuatro formularios? Pues
que, en cada uno de ellos, la Introducción de la fecha en la que queremos realizar
el viaje, se introduce de una forma distinta. Podemos ver que en la primera
captura, la de la parte superior, se tiene que elegir el día, el mes y el año por
separado. Existen tres listas desplegables para cada una de las partes de la fecha.
En la segunda imagen, la que está en el centro a la izquierda, pues se introduce a
través de un calendario que se muestra, ahí hay un icono donde se pulsa y se activa
un calendario del mes y se elige la fecha. A la derecha vemos otra vez lo mismo,
pero con otro icono y con otro calendario y en la parte inferior volvemos a ver lo
mismo, con otro icono distinto. Tenemos, como digo, cuatro formas distintas de
seleccionar una fecha, además, vemos también que las etiquetas para introducir las
fechas, cambian de una página a otra. En el primer formulario vemos que pone día,
mes y año. El segundo pone entrada, salida. En el tercero pone salida, regreso y en
el cuarto por último pone ida y vuelta. El usuario de esta web tiene que aprender,
tiene que ir viendo en cada formulario cómo introducir los datos, porque no se lo
está pidiendo de una forma coherente, una forma consistente. Como digo esto es un
error tremendo.

¿Los problemas de usabilidad suponen un coste para las empresas? Pues sí,
desgraciadamente, sí y aquí os he dejado dos ejemplos claros de ello.

El primero es de la empresa Expedia. La empresa Expedia se dedica al viaje, a la

compra de billetes y reserva de hoteles por Internet y hace un par de años, salió
esta noticia de cómo Expedia, pues se ahorró o ganó 12 millones de dólares más,
simplemente eliminando un campo de un formulario. Esta es la web de Expedia y, en
concreto, era este formulario. A la izquierda podéis ver el formulario original y a
la derecha podéis ver el formulario modificado, una vez que se eliminó ese campo.
El campo os lo he marcado aquí, es el campo company name, se solicitaba junto con
el nombre de la persona, se solicitaba el nombre de la empresa y esto se solicitaba
cuando se tenía que introducir los datos de la tarjeta de crédito para realizar el
pago. ¿Y qué se descubrió? Pues mucha gente en el campo company name, introducía el
nombre de su banco. Creía que le estaban pidiendo el nombre del banco de la tarjeta
de crédito y, luego, en la parte inferior que pone primary billing address,
pensaban otra vez que había que introducir la dirección de su banco, no su
dirección, sino la dirección del banco. ¿Qué ocurría? Esto confundía a la gente,
muchos usuarios, muchos clientes, introducían esos datos y luego cuando se iba a
validar la tarjeta de crédito con la dirección introducida, como no coincidía, se
anulaba la compra. Por eso la empresa esta, Expedia, perdía dinero, perdía compras.
Al eliminar ese campo, logró aumentar su facturación en 12 millones de dólares,
como digo.

Otro caso muy famoso y más exagerado, es el que se conoce como el botón de los 300
millones de dólares. Esto es un poco más complejo de entender, pero he hecho un
gráfico para explicarlo. Ocurría lo siguiente, este caso es de una tienda de venta
de productos online y cuando ya se tenía que hacer el check out, finalizar la
compra, el usuario se tenía que registrar. Muchos usuarios estaban ya registrados y
al tener que identificarse, meter el usuario y la contraseña, no se acordaban de la
contraseña. El formulario ofrecía la opción de solicitar un nuevo password,
resetearlo. El 40% de los usuarios que finalizaban la compra no se acordaban del
password y activaban la opción de resetear el password, pero como era un proceso
complejo, de ese 40%, solo el 25% lograba resetear el password. Estamos ya con un
10% del 100% total y, de ese 25% que lograba resetear el password, solamente un 20%
finalizaba la compra, el resto, pues, abandonaba. Podemos ver entonces, al final,
que de ese 40% de personas que tenían problemas porque no se acordaban del
password, solo un 2% finalizaba la compra, luego, un 38% de los usuarios que tenían
intención de compra, al final, no compraban por la complejidad del sistema, por
tener que recordar la contraseña y no lograr resetear la contraseña. ¿Qué hicieron
en este sitio web? Cambiaron el sistema y permitieron la compra sin tener que
identificarse, es decir, comprar como usuario invitado y, al cambiarlo, en la
primera semana del cambio, aumentaron sus ventas en 6 millones de dólares, en el
primer año los 300 millones de dólares, simplemente, un cambio que se debía a
entender cómo se comportaban los usuarios, qué problemas tenían en los usuarios.

¿Qué consejo os puedo dar para mejorar la usabilidad web? Bueno, necesitaríamos
horas y horas, porque hay infinidad de consejos y, sobre todo, hay algo muy difícil
y es que los consejos no los tenéis que tomar como leyes, que siempre hay que
aplicarlos, hay que ver el contexto y decidir si conviene o no conviene usar los
consejos. Lo que sí que os puedo decir, os vuelvo a repetir el consejo de piensa en
el usuario, pero sí que os puedo recomendar dos gurús, que os aconsejo que
consultéis, que leáis artículos de ellos, leáis libros y aprenderéis bastante.

El primero se llama Jakob Nielsen, lleva ya 20 o 30 años dedicándose a la

accesibilidad y casi 20 años a la accesibilidad web. Tiene una página web muy
famosa, donde podéis encontrar casi 500 artículos donde os van a explicar multitud
de cosas y cientos de consejos y, además también, ha publicado varios libros, por
ejemplo, aquí tenemos Priorizando la accesibilidad web. Os pongo simplemente dos
consejos. El primero nos dice, pregúntate si alguien que solo lea las dos primeras
frases de tu página, obtendrá la información que quieres transmitir. La gente no
dedica minutos y minutos a visitar una página web, la gente tiene cosas más
interesantes que hacer. En una página web hay que vender claramente la idea, el
objetivo, el propósito. Si, por ejemplo, lo que queremos es vender un producto a
través de una página web, lo que se llama la llamada a la acción, es decir, la
llamada a la compra, tiene que estar claramente distinguida, se tiene que ver y
además repetirla por muchas partes de la página.

El otro consejo, nos dice, con pocas excepciones, la gente visita la web por su
utilidad, no por su belleza. Tener un sitio visualmente atractivo es bueno, por
supuesto, pero el contenido es sagrado. Después de todo, cuando la gente escribe
sus preguntas en los motores de búsqueda, no pregunta por los atributos estéticos,
está buscando información. Desgraciadamente, muchas veces prima el diseño visual.
Llega el diseñador e impone su gusto estético por encima del contenido, por encima
de la información. Hay que buscar un equilibrio, pero como digo, desgraciadamente,
muchas veces triunfa el diseñador.

Otro gurú que os recomiendo que consultéis y que sigáis se llama Steve Krug,
también tiene varios libros, el más famoso es: No me hagas pensar, eso podría ser
otro consejo, no hagas pensar al usuario que visita tu página web y, recientemente,
publicó su segunda edición: No me hagas pensar revisitado. De aquí os destaco pues
tres consejos. No me hagas pensar, no importa cuántas veces tengo que hacer clic,
siempre y cuando cada clic es una elección inconsciente e inequívoca y deshágase de
la mitad de las palabras de cada página y, a continuación, deshágase de la mitad de
las que quedan. Hay que ser breves, simples, en lo que escribimos en una página
web, porque vuelvo a decir, la gente no se detiene a leerlo todo, así que, hay que
ser directos y expresar claramente las ideas y el propósito de las páginas web.

Muchas gracias por tu atención.

Aspectos clave
Debes ver el vídeo ¿Usabilidad, accesibilidad? (parte 3), en el que se muestran
algunos ejemplos reales de usabilidad web

---------------------LECCIÓN
10---------------------------------------------------------------------------------
-----------------------------------------

Pasando al tema de la accesibilidad web, pues existen distintas discapacidades, y

para saber hacer bien las páginas web, hay que entender cada una de ellas, qué
problemáticas presenta cada discapacidad y, sobre todo, hay que conocer lo que se
llaman las tecnologías o productos de apoyo. Las tecnologías o productos de apoyo
son aquellos instrumentos que usan las personas con discapacidad para minimizar o
eliminar sus discapacidades, sus problemas. Por ejemplo, yo llevo gafas y yo tengo
una discapacidad, yo soy miope y sin gafas no veo, mi producto de apoyo son las
gafas, con ello logro que mi discapacidad desaparezca.

Bien, si nos centramos en las personas ciegas, los productos de apoyo que suelen
emplear para utilizar el ordenador y navegar por la web son, básicamente, dos. Por
un lado, tenemos la línea braille, que es un dispositivo electromecánico, que va
mostrando los caracteres, el texto que aparece en la pantalla del ordenador, lo va
mostrando mediante braille. El segundo producto de apoyo que suelen emplear las
personas ciegas se conoce como lector de pantallas, en inglés screen reader, es un
software que se instala en la computadora y que va a leer el contenido de la página
web, y no solamente va a leer el contenido, el texto, sino que proporciona más
información, por ejemplo, cuando el lector de pantallas esté leyendo una página y
se encuentre con un enlace, lo va a anunciar, le va a decir al usuario, enlace y le
va a indicar el texto del enlace o cuando encuentre una lista, le va a decir que ha
encontrado una lista y le va a decir cuántos elementos tiene la lista y, además, el
usuario podrá navegar por los elementos de la lista fácilmente, el lector de
pantalla le dirá, estás en el elemento 1 de 3 o estás en el elemento 2 de 3 y así
con el resto de contenidos que podemos encontrar en una página web. También anuncia
cuando hay una imagen, cuando hay una tabla, etc.

Existe, como digo, existen diferentes programas, lectores de pantalla para los
distintos sistemas operativos, para Windows los dos más famosos son el Jaws, aquí
tenemos la página web de su fabricante Freedom Scientific, el problema es que Jaws
es un sistema propietario, es de pago, el precio base son unos mil dólares, es un
producto, pues, un poco caro. Pero tenemos soluciones alternativas, tenemos
soluciones de código abierto, como, por ejemplo, el lector de pantallas NVDA, que
es completamente gratuito.
Bien, ¿cuántas personas con discapacidad hay en el mundo? Porque mucha gente,
cuando se le dice, tienes que hacer la página web accesible dice, pues si hay pocas
personas con discapacidad o las personas con discapacidad no usan la web, ¿para qué
me voy a molestar en hacer las páginas web accesibles? Bueno, eso muestra un
desconocimiento porque hay muchas más personas con discapacidad de las que creemos.
Os he puesto aquí un par de estudios, el primero es una encuesta que se hizo en
España en el año 86 y, en total, un 15% de la población presentaba algún tipo de
discapacidad. Más recientemente, en este informe del año 2010, por ejemplo, si
solamente nos centramos en los problemas de visión, pues de los cuarenta y cuatro
millones de personas que hay en España, un millón presenta graves problemas de
visión. Un millón de cuarenta y cuatro millones es un porcentaje, pues, bastante
alto.

Otra idea, otro mito que mucha gente tiene, es que un sitio web, si tiene que ser
accesible, tiene que ser entonces feo y aburrido, por ejemplo, mucha gente piensa
que no hay que poner colores, pues porque las personas ciegas no pueden ver los
colores o porque las personas con daltonismo tienen problemas con los colores o,
también, mucha gente piensa que no hay que poner imágenes, al final, mucha gente
llega a la conclusión de que hay que hacer una página web de solo texto y eso no es
así. Se pueden seguir haciendo las páginas web como se hacen normalmente con
colores, con imágenes, lo único es que hay que poner ciertas características para
mejorar la accesibilidad.

En este sitio web que os recomiendo Accessites.org, podéis encontrar galerías de

sitios web que son totalmente accesibles y tienen un buen diseño, un diseño
moderno, un diseño fresco, un diseño agradable, por ejemplo, he puesto el sitio web
oficial del Gobierno de Suecia y este sitio web es totalmente accesible, no plantea
ningún problema de accesibilidad y como podéis ver pues tiene imágenes, tiene
colores, tiene diferentes tipos de letra, no tiene nada, que digamos que está feo
porque se ha hecho accesible.

Luego, una cosa muy importante hoy en día, con el incesante incremento del acceso a
la web a través de los dispositivos móviles, es que al tener en cuenta la
accesibilidad, podemos obtener beneficios añadidos y, por ejemplo, un beneficio muy
importante es que la accesibilidad web, como busca que una página web se vea bien
con distintos dispositivos, pues vamos a lograr que nuestras páginas web se vean
bien también, desde tabletas o desde teléfonos móviles. Por ejemplo, aquí tenemos
un sitio web, que es de un curso que yo imparto y, como le ha aplicado ciertas
técnicas, se ve bien con pantallas pequeñas o, incluso, con la pantalla de un
dispositivo móvil.

¿Y cómo se logra que un sitio web sea accesible? A ver Sergio, dame consejos. Pues
otra vez vuelvo a decir lo mismo que con la usabilidad, hay cientos de consejos que
hay que aplicar y en una presentación como ésta no lo puedo contar todo, pero sí
que os voy a indicar por dónde tenéis que continuar. Entonces, ¿dónde encontramos
información sobre cómo mejorar la accesibilidad de nuestras páginas web? Pues el
punto principal de aprendizaje es el sitio web del World Wide Web Consortium, esta
organización internacional que tiene como objetivo desarrollar la web a su máximo
potencial. Dentro del W3C, existe un grupo de trabajo llamado el Web Accessibility
Initiative, que se dedica exclusivamente a la accesibilidad web. Ellos llevan
muchos años estudiando el tema de la accesibilidad web y todo lo que hayan
desarrollado se puede resumir en este gráfico. Es un gráfico extraído de su página
web. La accesibilidad web depende de tres pilares básicos. Si uno de estos tres
pilares falla, la accesibilidad fallara.

En la parte inferior izquierda, tenemos a los desarrolladores, los developers. Los

developers tienen que usar herramientas de autor como, por ejemplo, Adobe
Dreamweaver o Microsoft FrontPage, herramientas que generen contenido accesible,
pero no solamente la herramienta es suficiente, la herramienta te facilita el
desarrollar contenido accesible, pero el desarrollador tiene que hacerlo y eso es
el pilar que vemos en la parte superior que pone content, el contenido. El
contenido tiene que ser accesible. Y, por último, a la derecha, tenemos los
usuarios. Los usuarios también se tienen que preocupar, tienen que usar productos
de apoyo, navegadores, reproductores multimedia, que tengan en cuenta las
características de accesibilidad, que hemos implementado en nuestras páginas web.
Si uno de estos tres pilares falla, fallara la accesibilidad, como digo.

El WAI, el Web Accessibility Initiative, ha desarrollado, para cada uno de esos

tres pilares, ha desarrollado una serie de pautas, las más conocidas son las webs
content accessibility guidelines. La primera versión, como podéis ver en esta
imagen, apareció en el año 99, se quedaron un poco viejas, tardaron en editar una
nueva versión y, por fin, casi 10 años después, en el 2008, publicaron la versión
2.0 que es la que se tiene que aplicar hoy en día. Estas pautas han sido
estandarizadas por el organismo internacional de estándares, por ISO, se
estandarizaron en el año 2012, en el estándar ISO/IEC 40500 y esto ha facilitado
que diferentes países lo adopten como estándar de accesibilidad, en concreto, aquí
en Ecuador, el 28 de enero de este año, se publicó que el INEN, publicaba el
estándar NTE INEN-ISO/IEC 40500, que era una transposición del estándar ISO a los
estándares ecuatorianos, así que, ahora mismo, el estándar que rige el tema de la
accesibilidad web en Ecuador es éste. Aún no está desarrollado el reglamento de
aplicación, es decir, no hay todavía leyes que obliguen a su aplicación, pero se
está trabajando en ello.

En otros países, como por ejemplo, en España, Francia, Alemania existen, desde hace
años leyes, que obligan a que ciertas entidades garanticen que sus páginas web son
accesibles, por ejemplo, en el caso de España, que lo conozco bien, pues todas las
administraciones públicas deben de garantizar que sus sitios web son accesibles y,
además, también ciertas empresas de especial relevancia, empresas como bancos,
empresas como transporte de pasajeros, empresas como suministro de servicios
básicos, electricidad, agua o gas, también deben de garantizar un nivel mínimo de
accesibilidad en sus sitios web.

Muchas gracias por tu atención.

Aspectos clave
Debes ver el vídeo ¿Usabilidad, accesibilidad? (parte 4), en el que se explica qué
es la accesibilidad web.

---------------------LECCIÓN
11---------------------------------------------------------------------------------
-----------------------------------------

Las pautas que hoy en día se tienen que aplicar, las Web Content Accessibility
Guidelines 2.0, se organizan en cuatro principios. Perceptive, perdón, perceptible,
operable, comprensible y robustez. Estos principios, luego, se dividen en consejos
y, por último, en criterios de éxito.

Voy a mostrar un ejemplo concreto de cómo se pueden hacer las cosas bien y para
ello, pues he elegido el sitio web de Ciespal, en concreto, nos vamos a fijar en la
esquina superior derecha donde está la barra de botones de redes sociales, está el
botón de Facebook, de Twitter, de YouTube. Aquí lo tenemos, esos cuatro botones, y
aquí podría haber un problema de accesibilidad importante, porque estos cuatro
botones son imágenes y las imágenes, por ejemplo, no son perceptibles por una
persona ciega.

¿Cómo hacemos entonces que estas imágenes puedan ser usadas por una persona ciega?
Pues, en la siguiente imagen, tenemos el código HTML que representa esos cuatro
botones y, como podemos ver, está muy bien hecho, aquí, en el caso de Ciespal, lo
han hecho correctamente. En primer lugar, vemos que esos cuatro botones se han
etiquetado con la etiqueta ul, de lista. Es así, esos cuatro botones forman un
conjunto, forman una lista, no están simplemente puestos como enlaces, uno detrás
del otro, sino que están correctamente etiquetados como listas. Y, luego, si nos
fijamos en la imagen que forma parte del enlace, veremos que lleva el atributo alt,
las cuatro imágenes tienen un atributo alt, por ejemplo, en la primera, en la que
he destacado, aparece que el texto alternativo, el valor del atributo alt, es
Facebook page y la dirección de la página.

Bien, ya para finalizar la presentación, volvemos a una de las primeras

diapositivas, cómo definimos la usabilidad y cómo definimos la accesibilidad.
Bueno, hemos visto que la usabilidad, se puede entender como la facilidad de uso,
aquí os he puesto la definición que da ISO en este estándar. ISO define la
usabilidad, como la medida en que un producto puede ser utilizado por determinados
usuarios para lograr los objetivos especificados con eficacia, eficiencia y
satisfacción, en un contexto de uso específico. Aquí es muy importante que os
fijéis en que nos dice, utilizado por determinados usuarios para lograr objetivos
especificados en contexto de uso específico. Repite tres veces específico o
determinado, es decir, la usabilidad, es difícil lograr una usabilidad que sirva
para todos los usuarios en cualquier contexto, si queremos lograr la máxima
facilidad de uso, no podemos satisfacer cualquier situación, entonces habrá que
elegir, por ejemplo, imaginar un teléfono móvil, un teléfono móvil diseñado para
gente joven, que tiene buena vista y que puede apretar pues teclas pequeñas, no le
serviría a una persona mayor que tiene problemas de visión y tiene dificultades
para pulsar teclas pequeñas. Lo que es fácil para uno no es fácil para el otro.

Respecto a la accesibilidad, pues os dejo dos definiciones de Tim Berners-Lee, Tim

Berners-Lee es el padre de la web, es el que desarrolló los principios básicos de
la web y el primero que publicó una página web en noviembre del año 90. Y él tiene
dos frases muy famosas, la primera dice: El poder de la web está en su
universalidad. El acceso por cualquier persona, independientemente de la
discapacidad que presente, es un aspecto esencial de la web. Y la otra cita es su
definición de accesibilidad. La accesibilidad web o más bien la accesibilidad en
general, es el arte de garantizar, que en la mayor medida posible, las
instalaciones, tales como por ejemplo, el acceso a Internet, están disponibles para
las personas, independientemente de que tengan algún tipo de discapacidad.

Muchas gracias por tu atención.

Aspectos clave
Debes ver el vídeo ¿Usabilidad, accesibilidad? (parte 5), en el que se explican los
cuatros principios de WCAG 2.0.

---------------------LECCIÓN
12---------------------------------------------------------------------------------
-----------------------------------------
Perceptible: la información se mostrará de forma que sea entendible.
Operable: se debe poder navegar.
Robustez: el contenido debe ser consistente para que pueda ser bien interpretado
por una gran variedad de agentes de usuario, incluyendo tecnologías de asistencia.

---------------------LECCIÓN
13---------------------------------------------------------------------------------
-----------------------------------------

---------------------LECCIÓN
14---------------------------------------------------------------------------------
-----------------------------------------

---------------------LECCIÓN
15---------------------------------------------------------------------------------
-----------------------------------------

---------------------LECCIÓN
16---------------------------------------------------------------------------------
-----------------------------------------

---------------------LECCIÓN
17---------------------------------------------------------------------------------
-----------------------------------------

---------------------LECCIÓN
18---------------------------------------------------------------------------------
-----------------------------------------

---------------------LECCIÓN
19---------------------------------------------------------------------------------
-----------------------------------------

---------------------LECCIÓN
20---------------------------------------------------------------------------------
-----------------------------------------

---------------------LECCIÓN
21---------------------------------------------------------------------------------
-----------------------------------------

---------------------LECCIÓN
22---------------------------------------------------------------------------------
-----------------------------------------

---------------------LECCIÓN
23---------------------------------------------------------------------------------
-----------------------------------------

---------------------LECCIÓN
24---------------------------------------------------------------------------------
-----------------------------------------

---------------------LECCIÓN
25---------------------------------------------------------------------------------
-----------------------------------------

---------------------LECCIÓN
26---------------------------------------------------------------------------------
-----------------------------------------
---------------------LECCIÓN
27---------------------------------------------------------------------------------
-----------------------------------------