HTML5ver11

Desarrollo de Aplicaciones Multiplataforma Contenidos

I

Contenidos

Introducción ........................................................................................................................................ 1

� Evolución del HTML ................................................................................................................................. 1

� Los documentos de HTML5 del W3C ...................................................................................................... 1

� Evolución de CSS ..................................................................................................................................... 2

� Versiones ..................................................................................................................................................... 2

� La llegada de CSS3 ....................................................................................................................................... 3

La nueva sintaxis HTML5 ..................................................................................................................... 5

� El doctype ................................................................................................................................................ 5

� El documento HTML ................................................................................................................................ 5

� La codificación de los caracteres ............................................................................................................. 5

� Los scripts ................................................................................................................................................ 6

� Los estilos CSS ......................................................................................................................................... 6

� La sintaxis de los elementos .................................................................................................................... 6

� Objetivos...................................................................................................................................................... 6

� Las comillas ................................................................................................................................................. 6

� Elementos con una única etiqueta de apertura ........................................................................................... 7

� Elementos con etiqueta de cierre facultativa .............................................................................................. 7

� Las mayúsculas y minúsculas ...................................................................................................................... 7

� Atributos boléanos ...................................................................................................................................... 7

� Los elementos HTML, HEAD y BODY ............................................................................................................ 7

� La sintaxis recomendada ............................................................................................................................. 8

� Los elementos obsoletos ......................................................................................................................... 8

� ¿Qué es un elemento obsoleto? .................................................................................................................. 8

� Para una mejor accesibilidad ...................................................................................................................... 9

� Los elementos en desuso o mal utilizados ................................................................................................... 9

� Los elementos redefinidos ...................................................................................................................... 9

� Nuevos elementos................................................................................................................................... 9

� El elemento <hgroup> ................................................................................................................................. 9

� El elemento <time> .................................................................................................................................... 10

� El elemento <mark> ................................................................................................................................... 10

� Elemento <meter> ..................................................................................................................................... 10

� Elemento <details> y <summary>.............................................................................................................. 10

� El elemento <wbr> ..................................................................................................................................... 11

� El elemento <bdi> ...................................................................................................................................... 11

� El elemento <progress> ............................................................................................................................. 11

� Elementos relacionados con los idiomas asiáticos .................................................................................... 11

� Tipos de contenido de los elementos. .................................................................................................. 11

� La visualización de los elementos ......................................................................................................... 12

� En HTML4 .................................................................................................................................................. 12

� En HTML5 .................................................................................................................................................. 13

Elementos de estructura en HTML5 ................................................................................................. 15

Desarrollo de Aplicaciones Multiplataforma Apuntes de HTML5

II

� Los elementos de la estructura HTML4 ................................................................................................ 15

� Las cajas <div> ........................................................................................................................................... 15

� La “divitis” .................................................................................................................................................. 15

� Un contenido no semántico ....................................................................................................................... 16

� Los elementos de estructura HTML5 .................................................................................................... 16

� El elemento <header> ................................................................................................................................ 16

� El elemento <footer> .................................................................................................................................. 16

� Elemento <nav> ......................................................................................................................................... 16

� El elemento <section> ................................................................................................................................ 17

� El elemento <article> ................................................................................................................................. 17

� El elemento <aside> ................................................................................................................................... 17

� El elemento <figure> .................................................................................................................................. 17

� Las cajas <div> ........................................................................................................................................... 17

� El atributo semántico “role” ................................................................................................................. 17

� Ejemplos de estructura en HTML5 ....................................................................................................... 18

� Una estructura simple ................................................................................................................................ 18

� Una estructura más elaborada .................................................................................................................. 18

� Estructura de un artículo ...................................................................................................................... 19

Plantillas web en HTML5 .................................................................................................................. 21

� La plantilla “ArchiteXture” .................................................................................................................... 21

� Fuente. ....................................................................................................................................................... 21

� El diseño del sitio ........................................................................................................................................ 21

� Estructura general ..................................................................................................................................... 21

� El código de la estructura ........................................................................................................................... 22

� El menú de navegación .............................................................................................................................. 22

� El banner de presentación.......................................................................................................................... 23

� La zona central ........................................................................................................................................... 23

� El pie de página .......................................................................................................................................... 24

� La plantilla De Front Page ..................................................................................................................... 24

� La Fuente ................................................................................................................................................... 24

� Diseño y estructura .................................................................................................................................... 24

� Código de la estructura general ................................................................................................................. 25

� Título y el menú de navegación del sitio Web ............................................................................................ 26

� El encabezado del sitio ............................................................................................................................... 26

� La zona central ........................................................................................................................................... 26

� El pie de página .......................................................................................................................................... 27

� La plantilla Learnig Center .................................................................................................................... 28

� Fuente ........................................................................................................................................................ 28

� Diseño del sitio y estructura general. ......................................................................................................... 28

� La cabecera ................................................................................................................................................ 28

� Contenidos segunda caja ........................................................................................................................... 29

El camino hacia CSS3 ........................................................................................................................ 31

� Análisis de la situación .......................................................................................................................... 31

� Los Módulos en curso ................................................................................................................................. 31

� Consultar especificaciones ......................................................................................................................... 31

� Los prefijos para los navegadores ........................................................................................................ 31

� Especificaciones y Recomendaciones ......................................................................................................... 31

� Los navegadores y el CSS3 ......................................................................................................................... 32

� Generadores de prefijos ............................................................................................................................. 32

Desarrollo de Aplicaciones Multiplataforma Contenidos

III

� Generador de prefijos JavaScript ............................................................................................................... 33

Los nuevos selectores de CSS3 .......................................................................................................... 35

� Los Selectores ........................................................................................................................................ 35

� Funcionalidad ............................................................................................................................................ 35

� Los selectores CSS2 .................................................................................................................................... 35

� Las pseudo-clases ...................................................................................................................................... 35

� Los pseudo-elementos ............................................................................................................................... 36

� Agrupación de selectores .......................................................................................................................... 36

� Los nuevos selectores CSS3 ................................................................................................................... 36

� El selector general de elementos adyacentes ....................................................................................... 36

� Selector de atributo .............................................................................................................................. 37

� Los vínculos hacia una dirección de e-mail ................................................................................................ 37

� Vínculos de descargas ............................................................................................................................... 38

� La pseudo-clase de vínculo.................................................................................................................... 38

� Pseudo-clases estructurales .................................................................................................................. 39

� Raiz de la página ....................................................................................................................................... 39

� Primer y último elemento hijo ................................................................................................................... 39

� Elementos descendientes .......................................................................................................................... 40

� Primero y último elementos de un tipo determinado ................................................................................ 40

� Especificar elementos de un tipo específico .............................................................................................. 40

� Los elementos únicos ................................................................................................................................. 40

� Elementos vacíos ....................................................................................................................................... 41

� Todos los elementos menos el elemento seleccionado.............................................................................. 41

� Ejemplos de pseudo-clases ........................................................................................................................ 41

Los estilos de cajas en CSS3 .............................................................................................................. 45

� El tamaño de las cajas ........................................................................................................................... 45

� Con CSS 2.1 ................................................................................................................................................ 45

� Con CSS3 .................................................................................................................................................... 45

� El desbordamiento de contenido .......................................................................................................... 46

� Los colores de fondo ............................................................................................................................. 46

� El modo HSB .............................................................................................................................................. 47

� El modo HSB con transparencia ................................................................................................................. 47

� Modo RGB con transparencia .................................................................................................................... 47

� Transparencia ............................................................................................................................................ 48

� Fondos y bordes .................................................................................................................................... 48

� Bordes redondeados .................................................................................................................................. 48

� Elipses en los bordes .................................................................................................................................. 49

� Generadores de código on-line .................................................................................................................. 49

� Bordes imaginativos .............................................................................................................................. 50

� Sombras................................................................................................................................................. 51

� Crear sombras ........................................................................................................................................... 51

� Los degradados ..................................................................................................................................... 53

� Sintaxis Mozilla Firefox .............................................................................................................................. 53

HTML5 y CSS3 aplicado al texto ........................................................................................................ 55

� Los elementos de texto obsoletos ........................................................................................................ 55

� Los elementos de texto redefinidos ...................................................................................................... 55

� El elemento <b> ......................................................................................................................................... 55

� El elemento <strong> ................................................................................................................................. 55


IV

� El elemento <i> .......................................................................................................................................... 55

� El elemento <em> ...................................................................................................................................... 55

� El elemento <small> ................................................................................................................................... 56

� El elemento <cite> ...................................................................................................................................... 56

� El elemento <dl> ........................................................................................................................................ 56

� El elemento <ol> ........................................................................................................................................ 56

� El elemento <hr> ........................................................................................................................................ 56

� El elemento <a> ......................................................................................................................................... 56

� Nuevos formatos para el texto ............................................................................................................. 56

� Las columnas .............................................................................................................................................. 57

� Las palabras cortadas ................................................................................................................................ 57

� Las fuentes tipográficas ........................................................................................................................ 58

� Importar fuentes tipográficas .................................................................................................................... 58

� Compatibilidad con los navegadores ......................................................................................................... 58

� La regla @font-face ................................................................................................................................... 59

� Herramienta en línea ................................................................................................................................. 60

� El tamaño de las tipografías ................................................................................................................. 61

Desarrollo de Aplicaciones Multiplataforma Introducción

1

Introducción

Evolución del HTML

Volver a enumerar la evolución de Internet no lo vemos necesario ya que se ha comentado muchas veces, pero no está

de más volver a comentar los momentos más importantes del “HYPER TEXT MARKUP LANGUAGE1que intentaremos resumir en

los siguientes ítems:

1991 fue el año de creación del primer boceto de HTML, este primer boceto lo diseño Tim Berners-Lee

En junio de 1993 es cuando aparece el primer documento técnico describiendo HTML.

En noviembre del 1993 aparece HTML+

La versión 2 del HTML ve la luz el día 22 de septiembre de 1995, bajo los auspicios de IETF2

A partir de 1996, los estándares de HTML los publica otro organismo de estandarización llamado W3C (World Wide

Web Consortium).

La versión HTML 3.2 se publicó el 14 de enero de 1997 y es la primera recomendación de HTML publicada por el W3C.

Esta revisión incorpora los últimos avances de las páginas web desarrolladas hasta 1996, como applets de Java y texto

que fluye alrededor de las imágenes.

HTML 4.0 se publicó el 24 de abril de 1998 (siendo una versión corregida de la publicación original del 18 de diciembre

de 1997) y supone un gran salto desde las versiones anteriores. Entre sus novedades más destacadas se encuentran las

hojas de estilos CSS, la posibilidad de incluir pequeños programas o scripts en las páginas web, mejora de la accesibili-

dad de las páginas diseñadas, tablas complejas y mejoras en los formularios.

La última especificación oficial de HTML se publicó el 24 de diciembre de 1999 y se denomina HTML 4.01. Se trata de

una revisión y actualización de la versión HTML 4.0, por lo que no incluye novedades significativas.

Desde la publicación de HTML 4.01, la actividad de estandarización de HTML se detuvo y el W3C se centró en el desa-

rrollo del estándar XHTML. Por este motivo, en el año 2004, las empresas Apple, Mozilla y Opera mostraron su preocu-

pación por la falta de interés del W3C en HTML y decidieron organizarse en una nueva asociación lla-

mada WHATWG (Web Hypertext Application Technology Working Group).

En enero de 2008 aparece el primer borrador del estándar HTML5, diseñado por el grupo de trabajo WHATWG.

Debido a la fuerza de las empresas que forman el grupo WHATWG y a la publicación de los borradores de HTML 5.0, en

marzo de 2007 el W3C decidió retomar la actividad de estandarizar HTML. Dando como resultado en enero del 2008 el

HTML 5

Por último un punto y seguido en el que de momento la última versión del HTML5 se publicó el 5 de abril del 2011.

Los documentos de HTML5 del W3C

Desde el W3C (Web Wide Web Consortium), consorcio internacional que produce recomendaciones para la World Wide

Web, se generan multitud de documentación sobre HTML5 y de CCS3.

Pero antes de comentar cuales son esos documentos no está de más ver cuáles son los objetivos del HTML5, y son:

1 Hyper Text Markup Language, conocido por sus siglas como HTML significa “lenguaje de marcado de hipertexto” 2 IETF son las siglas de “Internet Engineering Task Force organización, institución sin fines de lucro y abierta a la participación de cualquier persona, cuyo

objetivo es velar para que la arquitectura de Internet y los protocolos que la conforman funcionen correctamente. Se la considera como la organización con más autoridad para establecer modificaciones de los parámetros técnicos bajo los que funciona la red.


2

Asegurar la compatibilidad con lo que ya existe. De este modo se evita el no cometer el mismo error que se dio con el

XHTML23

La especificación describe con detalle lo que deben de hacer los navegadores, lo que estos deben de mostrar. En

HTML4.01 había muchos puntos oscuros y cada navegador hacía lo que mejor le parecía. Es necesario documentar lo

que ya existe, lo que los navegadores saben hacer desde hace tiempo.

La especificación regula por fin la gestión de errores.

Gestionar correctamente la interoperabilidad4, la compatibilidad de los navegadores (especificar una gestión idéntica

del DOM5.

Todos estos objetivos se recogen en un documento de trabajo llamando “HTML Desisgn Principles que se puede ver en

http://www.w3c.org/TR/html-design-principles.

Otro documento importante como documentobase y borrador de trabajo, el Working Draft, fechado el 25 de octubre

del 2012 es el HTML5 A vocabulary and associated APIs for HTML and XHTML” que podemos encontrar en la dirección

http://www.w3c.org/TR/html5. Este documento está en constante evolución y actualización, como nos lo indica un recua-

dro enorme en la página cuando abrimos esta dirección.

Otro documento interesante es el de los avances del grupo de trabajo, que se editan en el “editor Draft, en correspon-

diente a la dirección http://dev.w3.org/html5/spec/single-page.html. Este documento fue modificado por última vez el día

21 de noviembre de 2012

Otro muy interesante es el “HTML 5 Reference – A Web Developer’s Guide to HTML 5 “, QUE LO ENCONTRARÉIS EN

http://dev.w3.org/html5/html-author/. Aunque se trata de un documento de agosto del 2010, contiene una multitud de

ejemplos de uso de HTML5 tanto para diseñadores como programadores.

Evolución de CSS

La aparición de las hojas de estilo, CSS se asocia a la llegada del HTML4, versión de HTML que incluye entre sus mejorar

la posibilidad de utilizar las hojas de estilo en cascada, Cascading Style Sheet o CSS. La primera recomendación de éstas data

del 17 de diciembre de 1996.

Como utilidades destacadas de las hojas de estilo podemos recordar:

Separar la estructura de las páginas y su contenido (HTML), del formato del texto y la página.

Tener muchas más posibilidades de formato y presentación de la página

Definir un estilo una vez y poder volver a aplicarlo tantas veces como se desee.

Evitar errores causados por la repetición

Reagrupar todos los estilos

Hacer actualizaciones de forma rápida

En resumen, todo son ventajas, el uso de las hojas de estilo supuso un gran avance en el diseño de las páginas Web

desde que aparecieron.

Versiones

La primera versión como ya se ha comentado la fechamos en diciembre de 1996.

3 XHTML2, (eXtensible HyperText Markup Language), pretendía ser una versión e lenguaje “puro” sin ningún compromiso con el pasado, pensado para los

programadores. Decir que nunca llegó a publicarse la recomendación del XHTML2, y en el año 2010 W3C se disolvió oficialmente el grupo de trabajo que desarrollaba este lenguaje.

4 Interoperabilidad se define como la habilidad de dos o más sistemas o componentes para intercambiar información y utilizar la información intercambiada 5 DOM, Document Object Model, que definiremos como “una interfaz de programación de aplicaciones”.

Desarrollo de Aplicaciones Multiplataforma Introducción

3

La versión 2 data del 12 de mayo de 1998, esta versión fue muy ambiciosa, tanto que muchas de las novedades que

tenía no fueron adoptadas por los navegadores.

Tras el fracaso parcial de la versión 2, W3C se planteó retomar el trabajo para en el periodo de los años 2004-2006 sacar

la versión level 2 revision 1, conocida como CSS2.1. Como se puede comprobar esta versión aún no ha pasado a la fase

de Recomendation.

La última versión de CSS2.1 se encuentra en fase de Proposed Recomendation y la podemos fechar en 12 de abril de

2011.

Paralelamente, los primeros borradores de CSS3 ven la luz en 1999. Decir que la W3C no llegó a publicar una recomen-

dación general, sino que comenzó con una veintena de “módulos” independientes los unos de los otros. Esta forma re-

sultó muy práctica para los navegadores, ya que pueden implementar dichas novedades de una forma progresiva.

La llegada de CSS3

Como ya se ha comentado ya existen borradores de la versión CSS3 que podemos llegar a ver en el documento oficial

http://www.w3.org/Style/CCS/current-work. Más adelante comentaremos como evolucionar hacia la versión CSS3.

Destacar las principales novedades de CSS3 como son las que enumeramos a continuación.

Aplicar imágenes alos bordes y añadir varios bordes.

Crear fondos degradados y con imágenes múltiples

Usar la transparencia con los colores y con los elementos.

Aplicar sombras a los elementos (cajas, texto, etc…)

Aplicar transformaciones, transiciones y animaciones a las propiedades y a los elementos.

Insertar fuentes con caracteres diversos

Crear sitios web que se adapten a los distintos tamaños de pantalla

Resumiendo tanto el HTML como CSS está en constante actualización, como ejemplo podemos ver que sin estar la ver-

sión 2.1 como recomendación oficial ya se ha publicado los primeros borradores de la versión CSS3 y decir que en el W3C

existen grupos de trabajo sobre la versión CSS4, teniendo la primera publicación del borrador (Working Darft) del 29 de

septiembre de 2011. En la siguiente dirección tenemos las características esta versión: http://www.w3.org/TR/2011/WD-

selectors4-20110929/

Desarrollo de Aplicaciones Multiplataforma La nueva sintaxis HTML5

5

La nueva sintaxis HTML5

El doctype

Ya sabemos que la primera línea de todo documento HTML es la declaración del tipo del documento, el “doctype” esta

declaración sirve para indicar la versión del lenguaje HTML y según las versiones con la que se trabaja la forma de hacerlo es

diferente, siendo en las versiones anteriores como:

En HTML 4.01 transicional: se declararía con el código siguiente:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transi tion-al//EN”“ http://www.w3.org/TR/html4/loose.dtd ”>

En XHTML 1.0 estricto, la declaración sería:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”“ http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ”>

Ahora bien, en la versión de html5 la definición del doctype se simplifica considerablemente, siendo:

<!doctype html>

Como se puede observar se simplifica tanto que no es necesario ni siquiera indicar el nº de versión de la que se trata,

pero ¿cómo es eso posible?, bien precisamente es para cumplir uno de sus objetivos, “dar soporte a todas las versiones

anteriores, por lo que es irrelevante indicar el nº de versión.

El documento HTML

Desde el punto de vista de las versiones anteriores el elemento <html> indica el inicio de la página HTML. La sintaxis

completa de este elemento en XHTML 1.0 estricto sería:

<html xmlns=” http://www.w3.org/1999/xhtml ” xml:lang=”es” lang=”es”>

La sintaxis en HTML5 también se simplifica para este elemento, ya que en la definición anterior hay una serie de ele-

mentos redundantes, así que la nueva sintaxis quedaría en HTML5 es:

<html lang=”es”>

Como se puede observar es suficiente con indicar el idioma.

La codificación de los caracteres

Para establecer o indicar la codificación de los caracteres, tanto en HTML 4 como en XHTML 1.0, se tiene que hacer dos

veces, con el elemento meta y el atributo charset, siendo el código siguiente:

En HTML 4.01 transicional:

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>

En XHTML 1.0 estricto:

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>

Como se puede observar tanto en HTML4 como en XHTML 1.0, el código es idéntico. Pero en HTML5, como se ha inten-

tado simplificar al máximo la sintaxis correspondiente es:

<meta charset=utf-8”>


6

Los scripts

Desde el punto de vista de los scripts también se ha simplificado, donde se ha pasado de:

<script src=”miScript.js” type=”text/javascript”></ script>

a:

<script src=”miScript.js”></script>

La simplificación se debe a que se da por sentado que todos los scripts están escritos en JavaScript.

Los estilos CSS

Partiendo del mismo principio de simplificación el código correspondiente pasa de:

<link href=”miHojaEstilos.css” rel=”stylesheet” typ e=”text/css” />

De las versiones anteriores a quedar en HTML5 así:

<link href=” miHojaEstilos.css” rel=”stylesheet” />

La sintaxis de los elementos

Objetivos

Partiendo de la premisa que HTML5 no es una evolución de XHTML, así que HTML5 no tiene las reglas estrictas de sin-

taxis del XHTML, por consecuencia los objetivos que se persigne en todo momento en HTML5 pueden resumirse en dos:

Simplicidad.

Permisibilidad.

Por lo que nos encontraremos con las siguientes características de lasintaxis.

Las comillas

Las comillas son facultativas6 para los valores de los atributos, por ejemplo para la codificación de los caracteres pode-

mos usar las tres sintaxis siguientes:

� <meta charset=UTF-8>

� <meta charset=”UTF-8”>

� <meta charset=’UTF-8’>

Así que con comillas simples, comillas dobles o sin comillas la sintaxis es correcta. En cambio cuando se tiene varios va-

lores en un atributo, será obligatorio el uso de las comillas dobles. Por ejemplo:

� <div class=”estilo 1 estilo 2”>

6 Facultativas = libres, discrecionales, arbitrarias


7

Elementos con una única etiqueta de apertura

En HTML hay elementos que no tienen etiqueta de cierre, que sólo disponen de una etiqueta de apertura, pero es nece-

sario indicar el cierre del elemento con el símbolo “/”, ejemplos de estas etiquetas son img, br, etc. Así que su código

sería como:

<br/> <img scr=”imagen.png”/>

En HTML5 no es obligatorio el uso del carácter de cierre, así que esas etiquetas pueden indicarse:

<br> <img scr=”imagen.png”>

Elementos con etiqueta de cierre facultativa

En HTML4 no es obligatorio incluir el cierre de ciertos elementos, por ejemplo de <p>, <dl>, <td> … Sin embargo en

XHTML toda etiqueta que ser abre es obligatoria cerrarla. HTML5 vuelve a la sintaxis permisiva del HTML4, permitiendo que

no se cierren por lo tanto es correcto poner <p>Mi párrafo sin etiqueta de cierre .

Las mayúsculas y minúsculas

En HTML5 se acepta sin problemas las mayúsculas y minúsculas en la sintaxis de los elementos y atributos, por ejemplo

sería válido:

� < SCRIPT scr=”miScript.js”></script>

� < script SCR=”MIScript.JS”></SCRIPT>

� <script scr=”MiScript.js”></script>

Esta nomenclatura puede llegar a asustar (¿se permite todo?), no obstante se recomienda, como ya se verá posterior-

mente, respetar ciertas normas de uso, así como determinadas prácticas recomendadas.

Atributos boléanos

Con respecto a los atributos que solamente admiten valores booleanos a la hora de aplicar dicho valor se ha simplifica-

do notablemente, ya que evitan la redundancia en sí de la definición del atributo. Tomemos como ejemplo una casilla de

verificación que aparece seleccionada en una web, exactamente de trata del valor checked para el atributochecked , que

en versiones anteriores al HTML5 su sintaxis es:

<input type=”checkbox” checked=”checked” name=”chec kedbox”

Como se puede observar resulta redundante la definición del atributo checked . Así que en HTML5 dicho en dicho atri-

buto no es necesario establecer el valor siendo correcta la siguiente sintaxis:

<input type=”checkbox” checked name=”checkedbox”

Los elementos HTML, HEAD y BODY

En HTML5 se ha hecho un gran esfuerzo en lo referente a concisión, tal es dicha concisión que incluso los elementos

html, head, body son ahora facultativos, es decir sería totalmente correcto el siguiente documento HTML5:

<!DOCTYPE HTML> <meta charset=”UTF-8”/>


8

<title>Mi primer documento HTML5</title> <h1>Esto es HTML5</h1> <p>Mi contenido</p>

El código anterior se verá correctamente en los navegadores, he incluso en alguno de los navegadores si se examina el

código fuente se añaden los elementos suprimidos, viéndolo de la siguiente manera:

<!doctype html> <html> <head></head> <body> <meta charset=”utf-8”> <title>Mi primer documento HTML5</title> <h1>Esto es HTML5</h1> <p>Mi contenido</p> </body> </html>

La sintaxis recomendada

Una de las características del HTML5 es que es muy permisivo y nos permite escribir el código de cualquier manera, lo

cual aunque parece una gran ventaja, que lo es, puede ser un problema ya que si tenemos que continuar con un trabajo

realizado por otra persona de una forma “mal redactada, tenemos que dedicar un tiempo a comprender el trabajo que

tenemos. Esa gran permisibilidad nos expone a perder el lenguaje común que ya usamos y conocemos.

Por ese motivo la recomendación es que se respete la sintaxis del XHTML. Sintaxis que es reconocida por todos los

creadores de sitios Web y forma parte de las “prácticas recomendadas” para los diseñadores Web.

Las normas de uso de sintaxis del XHTML son:

� Usar solamente minúsculas,

� Usar siempre comillas

� Cerrar con / las etiquetas que se auto cierran

� Cerrar los elementos para los cuales la etiqueta de cierre es facultativa

� Sangrar el código para aumentar la legibilidad

Los elementos obsoletos

¿Qué es un elemento obsoleto?

En HTML5, determinados elemento se consideran obsoletos, es decir que dicho elemento no se ha declarado en la es-

pecificación del HTML5. Sin embargo, como HTML5 tiene que ser compatible con las versiones anteriores, los elementos de

HTML obsoletos seguirán siendo interpretados correctamente por los navegadores.

Si una página Web contiene elementos HTML obsoletos se visualizará correctamente, aunque los motores de validación

la consideren como “no conforme”.

Si se desea saber cuáles son dichos elementos obsoletos en HTML5 podemos verlos siguiente dirección URL del sitio

web W3C: http://www.w3c.org/TR/html5/obsolete.html


9

Para una mejor accesibilidad

Los marcos, se han declarado obsoletos, para alegría de la accesibilidad de los sitios y del posicionamiento en buscado-

res.

Los elementos HTML <frame>, <frameset> y<noframes> no se deben de usar.

Los elementos en desuso o mal utilizados

Los elementos <applet>, <isindex> y<dir> se ha declarado obsoletos.

Los elementos redefinidos

Determinados elementos en HTML5, en lugar de declararlos obsoletos se ha redefinido. Estos elementos están relacio-

nados con el texto y los comentaremos más adelante.

Nuevos elementos

En HTML5 se han introducido nuevos elementos7. En los siguientes puntos enumeramos los nuevos elementos de

HTML5, recordando que esta lista no es exhaustiva.

El elemento <hgroup>

En HTML4, cuando se desea indicar un título y un subtítulo se pude hacer utilizando la siguiente sintaxis:

<h1>Mi sitio Web</h1> <p>Un sitio Web sobre Txintinxgorda</p>

Como se puede apreciar nada indica que exista un subtítulo, así que como solución podemos usar el siguiente código:

<h1>Mi sitio Web</h1> <h2>Un sitio Web sobre Txintinxgorda</h2>

Y por lo que nos obliga a que el resto de títulos de la página deberán utilizar las etiquetas que van del <h3> al <h6> .

Con HTML5 se puede utilizar el elemento <hgroup> con el que se pueden agrupar los elementos del encabezado de ti-

po h1 a h6 . Con el ejemplo anterior podemos agrupar el título con el subtítulo para que quede perfectamente definido

desde un punto de vistas semántico. La sintaxis siguiente sería la que deberíamos usar para definir nuestro título y subtítu-

lo:

<group> <h1>Mi sitio Web</h1> <h2>Un sitio Web sobre Txintinxgorda</h2>

</group>

Los elementos <hx> dentro de <gropup> no tiene que empezar por <h1> , sino que puede tener cualquier nivel, no es

necesario seguir una jerarquía estricta, el objetivo del elemento <group> no es la de crear un índice.

7 HTML5 está en continua evolución, por lo que es posible que con el tiempo aparezcan nuevos elementos que no estén esta lista


10

El elemento <time>

Se trata de un elemento para especificar que su contenido tiene un factor de fecha y/u hora. Sólo aporta un valor

semántico, no muestra la fecha o la hora de forma automática. Por ejemplo:

<p>La fecha de hoy es: <time>05/09/2012</time></p> <p>Hoy es <time>5 de septiembre</time>.</p>.

Se puede utilizar el atributo datatime para indicar la fecha o la hora en formato ISO8601, (podemos ver más información

sobre este estándar en: http://es.wikipedia.org/wiki/ISO_8601)

<p>La fecha de hoy es: <time datatime=”2012-09-05”> 5 de septiembre</time>.</p>

El elemento <mark>

Este elemento permite resaltar un texto dentro de un texto más general. Por ejemplo:

<p>La nueva versión de HTML es <mark>HTML5</mark>.< /p>

En este ejemplo el texto HTML5 aparece resaltado con un color de fondo generalmente amarillo, como si hubiese sido

tachado con un marcador.

Elemento <meter>

Este elemento permite definir una medida determinada dentro de un contexto de valores. Dicho elemento utiliza seis

atributos:

� value : el valor de la escala utilizada.

� min : el mínimo posible.

� low : el mínimo alcanzado.

� max: el máximo posible

� hight : el máximo alcanzado

� optimum : el valor mínimo ideal.

Por ejemplo el siguiente código:

<p>usted ha obtenido la nota 8 sobre 10:<meter valu e=”8” min=”0” low=”4” max=”10” hight=”8” optimum=”9”></p>

Elemento <details> y <summary>

El elemento <summary> permite presentar un resumen de la información que se facilitará con el elemento <details> .

Por ejemplo:

<details> <summary>Haga clic para consultar todos los detalle s de su pedido.</summary> <p>estos son los detalles de su pedido…</p> <p>Y bla bla bla…</p> </details>


11

El elemento <wbr>

Este elemento permite evitar los espacios vacíos entre las palabras de una frase. Ejemplo:

<p>Este es un texto sin espacios entre las palabras : Este<wbr>es<wbr>un<wbr>texto<wbr>sin<wbr>espacios<w br>entre<wbr>las<wbr>palabras</p>

El elemento <bdi>

El elemento <bdi> permite aislar un texto que tenga una dirección de lectura diferente, como el árabe, que se lee de

derecha a izquierda. Ejemplo:

<ul> <li>Redactor <bdi>Caubry</bdi>: 12 artículos.</li> <li>Redactor <bdi>Miriam</bdi>: 5 artículos.</li>

<li>Redactor <bdi> <bdi>: 3 artículos.</li/>ث ا ي ٕا

El elemento <progress>

El nuevo elemento <progress> permite crear barras de progresos. El movimiento de estas barras se puede controlar

mediante sus atributos o con JavaScrit.

Por ejemplo, en el código siguiente tenemos una barra de progreso con dos atributos: value, para indicar el valor ac-

tual, y max para indicar el valor máximo:

<h2>Los nuevos elementos de HTML5</h2> <p>Progresión de la tarea: <progress id=”p” value=4 0 max=100>40%</progress></p>.

Elementos relacionados con los idiomas asiáticos

El elemento<ruby> le permite insertar texto asiático. El elemento <tc> permite especificar la pronunciación de las pala-

bras y el elemento<rp> permite insertar paréntesis a ambos lados de un texto asiático para ocultar determinados caracte-

res. Estos elementos en nuestro caso podemos decir que no los vamos a utilizar, pero no está de más comentar que existen.

Tipos de contenido de los elementos.

El HTML4 establece dos contenidos principales: en línea (inline) y en bloque (block).

Sin embargo HTML5 presenta una lista de tipos de contenidos más extensa y completa (http://www.w3.org/TR/html5/

content-models.thml#content-models). Además determinados elementos pueden pertenecer a varios tipos diferentes,

dependiendo del contexto en que se usen. Tenemos:

Metadata content: para los elementos de enlace entre documentos, elementos de presentación o los elementos de

comportamiento de los contenidos (base, command, link, meta, noscript, script, style y title ).

Flow content: para elementos utilizados en el cuerpo de la página (a, article, block-quote, details, label,

table,… ).

Sectioning content: para los elementos de la estructura (article, aside, nav , y setion ).

Heading content: para los elementos de encabezado de la sección (h1 a h6 y hgroup ).

Phrasing content:para los elementos de texto (a, abbr, button, canvas, em, span, strong… ).


12

Embedded content: para los elementos insertados (audio, canvas, embed, iframe, img, math, object,

svg y video ).

Interactive content: para los elementos que implique interactividad con los usuarios (a, audio, button, inpunt,

label, video… ).

La representación gráfica que hace el W3C es la mostrada en la Ilustración 1

Hay que tener en

cuenta que esta

clasificación es una

manera de organizar y

clasificar los distintos

elementos de HTML5.

No implica ninguna

manera de diseñar las

páginas ni de

visualizarlas. Es decir,

esta clasificación no

tinene repercusiones en

el diseño de las páginas.

En el apartado siguiente

se pretende explicar

precisamente como el

HTML4 se comporta con

respecto a la

visualización de los

distintos elemenos en función del tipo, y como se hace con HTML5.

La visualización de los elementos

En HTML4

El HTML4 ordena los elementos en función del tipo de visualización en los navegadores (http://www.w3.org/TR/struct/

global.html#h-7.5.3). Los elementos de tipo block se visualizan a continuación unos de otros. Es el caso de los párrafos

<p>, los títulos <hx> , las cajas <div>…

Los elementos tipo inline se muestran uno al lado del otro, en línea de texto. Es el caso de los vínculos <a>, de divi-

siones <span> , de estilos <strong>, <em>…

También tenemos la visualización: inline-block, list-item, table, table-row…

Las reglas de imbricación8 establecen que:

� Un elemento inline solo puede contener otro elemento inline y datos, es decir, texto.

� Un elemento block puede contener otro elemento block , así como elementos inline.

Sin embargo, con la propiedad display se puede cambiar sin problemas el tipo de visualización. Así con display:

block es posible visualizar un vínculo <a>como si fuera un bloque y de este modo presentaría todas las características

propias de los bloques.

8 Imbricación: solapado, superposición.

Ilustración 1: Representación gráfica de los contenidos HTML5


13

En HTML5

En HTML5 la clasificación anterior a quedado obsoleta, es más no se considera como un tipo de clasificación. Esto quie-

re decir que es el autor del sitio Web quien deberá indicar como se deben de visualizar los distintos elementos, de lo con-

trario se utilizará la hoja de estilo predeterminada de cada navegador.

El diseñador de un sitio Web podrá insertar un elemento <a>que contenga un título <h1>, una imagen <img> y un

párrafo <p>, siempre y cuando especifique el modo de visualización de cada uno de ellos en las hojas de estilo con la pro-

piedad <display>

Desarrollo de Aplicaciones Multiplataforma Elementos de estructura en HTML5

15

Ilustración 2: Estructura ejemplo con cajas <div>

Elementos de estructura en HTML5

Los elementos de la estructura HTML4

Las cajas <div>

En HTML4, el elemento principal para estructurar las páginas web es la famosa “caja <div>”. Con este elemento <div>

es posible crear zonas de visualización de forma rectangular. Cada una de estas zonas, cajas <div> puede ser identificada

de manera exclusiva, mediante un código de identificación, y de este modo poder aplicarle un formato CSS. Dicho código de

identificación único se establece con el atributo id.

Ejemplo:

<div id=”bannerSuperior”>

… … …

</div>

También se puede usar las clases, cuando el formato se repite

en la página y no se trata de un formato único, por ejemplo:

<div class=”comentarios”> … … … </div>

A continuación, una vez definida la estructura, se pude aplicar

el diseño con las hojas de estilo CSS, mediante los selectores de

identificación o la clase en cuestión.

Por ejemplo:

#bannerSuperior { … … … } .comentarios{ … … … }

En imagen de la Ilustración 2 representa una estructura de

página de tipo blog con cajas <div>

La “divitis”

Con HTML4 y CSS 2.1, la estructura puede contener un número de cajas muy elevado, debido a la complejidad del dise-

ño de la página. Esta coyuntura se le conoce con el nombre de “divitis”, es decir, un excesivo número de cajas.


16

Un contenido no semántico

El uso de cajas <div> presenta otro problema, el de la semántica de los contenedores. Cada caja <div> se distingue de

las demás por un identificador único, que el diseñador web le ha asignado de un modo completamente arbitrario, y que en

muchos casos el nombre o identificador utilizado no nos ayude en nada a conocer el contenido de la caja en sí.

Ese es el motivo por lo que las cajas <div> no se pueden considerar que sean semánticas, su contenido no está defini-

do por ningún parámetro, por ejemplo podemos tener una caja <div id=”izquierda”> , en cuyo caso el identificador

“izquierda” no aporta nada sobre su contenido. Podría tratarse de una barra de navegación, de información general o de

cualquier tipo de contenido, que probablemente esté a la izquierda.

Bien, la evolución de HTML pretende un mayor uso de la semántica, así que este método no es lo pretendido.

Los elementos de estructura HTML5

Con HTML5 llegan nuevos elementos de estructura semántica. Éstos tienen un nombre y han sido definidos tras un lar-

go análisis con los nombres más usados en las cajas <div> .

El elemento <header>

Este elemento <header> permite insertar una zona de visualización para las cabeceras. Puede definirse esta cabecera

para toda la página o para una zona determinada: artículo menú, lateral….

Este elemento se puede utilizar desde dos puntos de vista:

� A nivel de la página: es la típica cabecera de página, que aparece en la parte superior de la página con un logotipo,

eslogan, menú de navegación principal…

� A nivel de contenido: permite disponer de una zona de introducción, del contenido que viene a continuación.

Este elemento no tiene que aparecer obligatoriamente en la estructura de la página.

El elemento <footer>

El nuevo elemento <footer> permite definir zonas de visualización par los pies de página. En este caso ocurre como en

el anterior, es posible definir un pie de página para toda la página o tan sólo para una determinada zona de visualización.

El uso de los <footer> es similar al de los <header> , así que la traducción literal como “pie de página” no es del todo

correcta, y sería más oportuno incluso llamarlo “pie de zona de visualización.

Elemento <nav>

El elemento <nav> como su nombre indica, está pensado para la visualización de una zona de navegación con vínculos

hipertexto. Esto no quiere decir que sólo se pude indicar una zona de navegación en la página, o que se tenga que crear

tantos elementos <nav> como zonas de navegación se tengan en las páginas, basta con identificar correctamente dichas

zonas.

El elemento <nav> está pensado en especial para la navegación principal del sitio web, para la inserción de vínculos en-

tre las páginas de un sitio Web.


17

El elemento <section>

El elemento <section> permite agrupar elementos que tengan la misma temática. De este modo podemos agrupar en

un mismo elemento un contenido, con su título, encabezado, y pie de contenido.

El elemento <article>

El elemento <article> permite definir un contenido autónomo, que puede volver a usarse en otro lugar del mismo si-

tio web, si por ello anular su contenido.

Por supuesto, un artículo puede tener una cabecera <header> , o/y un pie de página <footer> , y/o varios títulos

(<hx> ), además, claro está del contenido.

El elemento <aside>

El elemento <aside> permite mostrar contenido relacionado con el contenido de otro elemento al cual esté vinculado.

Puede tratarse de barras laterales (sidebars), de zonas de widgets, de complementos sobre artículos, etc.

El elemento <figure>

Este elemento <figure> permite agrupar todos los elementos necesarios para la inserción de una imagen, tales como:

la propia imagen (elemento <image> ), o bien, una foto, un video, una animación…. Y su leyenda, con el nuevo elemento

<figcaption> .

Por ejemplo:

<p>Fotografía de una mariquita del campo</p> <figure> <img src=”fotomariquita.jpg” /> <figcaption>Mariquita</figcaption> </figure>

Las cajas <div>

El hecho de aparecer nuevos elementos que ayudan a establecer una semántica a nuestros diseños, no quiere decir que

debamos de erradicar el uso de las cajas <div> . Es más, su uso sigue siendo muy útil y podemos llegar a decir que necesa-

rio.

El atributo semántico “role”

En XHTML se preconizaba9 el uso del atributo role conla finalidad de dar una forma más semántica a la estructura de

una página Web.

En HTML5 podemos utilizar el atributo role para incluir una información adicional gracias al módulo WAI-ARIA. Este

módulo se ocupa de la gestión del contenido de las páginas web para las personas discapacitadas. Determinados elementos

de HTML5 tienen un role implícito, como, por ejemplo, el elemento <nav> , cuyo role implícito es navegation.

Los principales valores del atributo role son:

9 Preconizar: Proponer, recomendar o apoyar un procedimiento


18

Ilustración 3: Estructura sencilla en HTML5

main : define el contenido principal de un documento.

secundary : define una parte secundaria del documento.

navegation : define la barra de navegación del documento.

banner : aparece por lo general en lo alto de la página y suele contener el logotipo y el eslogan de la empresa.

contentinfo : indica que dicho elemento aporta información sobre el contenido de la página (autores, copyrights,

menciones legales, …)

definition : presenta la definición de un elemento.

note : corresponde, por lo general, a una nota entre paréntesis o al final de la página.

seealso : indicaque el elemento contiene información relacionada con el contenido principal de la página.

search : contiene un formulario de búsqueda de una página web.

Ejemplos de estructura en HTML5

Una estructura simple

Si volvemos a tomar como ejemplo la estructura de la Ilustración 2,

para modificarla y adaptarla a HTML5 podemos dejarla como la imagen de

la Ilustración 3 que tenemos a la derecha, en donde:

en el elemento <header> encontraremos los elementos del encabe-

zado de la página, logotipo, eslogan, por ejemplo.

En el elemento <nav> , situado a la izquierda, encontraremos los

vínculos que nos permitan navegar por el sitio Web.

Todos los artículos del blog estarán colocados, como es de suponer,

dentro delos elementos <articule> .

Por último está el pie de página, <footer> , donde se podrá tener por

ejemplo: las menciones legales o los vínculos de contacto.

Una estructura más elaborada

Vamos a comentar una estructura más elaborada como la de la ima-

gen, donde se puede apreciar tenemos los siguientes elementos:

<header>:elemento que ya hemos comentado en el apartado anterior

el cual es el encabezado de la página

<nav>:en este ejemplo nos encontramos con dos elementos <nav>

para la navegación, justo el que está debajo de <header> es el nave-

gador general del sitio web, mientras que la caja <nav> que hay a la iz-

quierda será la navegación secundaria, donde están los vínculos de re-

lacionados directamente con la página cargada en ese momento.

<section>:En este ejemplo el contenido de la página está definido

dentro de las dos secciones de tipo <section> que en cada una de estas secciones tenemos definidos los elementos

<articule> y <aside>,


19

<articule>:los elementos de este tipo se utilizan para el contenido textual de la página, que son completados con los

elementos de tipo <aside> correspondiente con el fin incluir información adicional de los elementos <articule>.

<aside>: El elemento <aside> se utiliza tres veces, una es la caja que estáa la derecha, mostrará información relacio-

nada con el contenido de la página activa en general, como por ejemplo: vínculos promocionales u otros contenidos

que tiene que ver con la página activa. Los otros dos usos de este elemento tendrán como utilización la de completar la

información relacionada con el artículo de su izquierda.

<footer>:el último de los elementos que se puede ver es el <footer> que representa el pie de página, que como se ha

comentado anterioremente, suele ser utilizado para incluir información legal, las condiciones de ventas, vínculos de

contacto, y/u otros elementos genéricos que se desean incluir como información general.

Claro está, que dada elemento de la estructura deberá contar con un código de identificación único, pero también po-

demos establecer clases comunes para varios elementos cuya funcionalidad sea similar.

Estructura de un artículo

A continuación vamos a comentar una de las estructuras que podría tener un artículo en HTML5., tomando como ejem-

plo la estructura del Ilustración 1, en donde:

Tenmos un <articule> como contenedor general, que en este caso

presenta una cabecera (<header> ), uso habitual en los artículos, que

precisamente en este caso contiene el título del artículo con una etiqueta

del tipo <h1> y un subtítulo con la etiqueta del tipo <h2>.

El contenido textual del artículo se situará entre los elementos <p>.

En este caso además el artículo contiene una lista, <ul> con una de víncu-

los.

Finaliza el artículo con un pie de página <footer> , o mejor definido en

este caso como un pie de artículo donde se puede incluir la fecha de la

publicación, sección a al que pertenece y nombre del autor, por ejemplo.

Ilustración 4: estructura de artículo tipo.

Desarrollo de Aplicaciones Multiplataforma

Plantillas web en HTML5

Desde la publicación de HTML5, multitud de diseñadores web han creado plantillas de diseño web

HTML5. En este tema se realiza un pequeño recorrido por al

La plantilla “ArchiteXture”

Fuente.

La dirección URL de esta plantilla es

dirección se pude probar en línea y descargar los archivos fuente.

El diseño del sitio

el diseño de esta pantilla (Ilustración

donde se puede disitnguir facilmente las cuatro “zonas” de

visualización de sitio web:

� El menú en la parte superior.

� El banner de presentación de sitio, que conteine un no

un eslogan y un logotipo.

� La zona central, que muestra información general en le lado

izquierdo y los artículos del lado derecho de esta zona.

� El pie de página, que conteine ví

entender en la parte inferior de la página.

Estructura general

La estructura general del sitio

reIlustración 6, muestra fielmente la presentación visual

ella podemos ver que tenemos una caja

de contenedor general y que permite centrar el sitio web en la ventana del

navegador.

A continuación se encuentra un elemento

menú de navegación de la parte superior, el diseñador

modo muy acertado el uso del elemento

para insertar el menú de navegación del sitio Web.

La información general del sitio está insertada en un elemento

der> , que resulta bastante acertado ya que se trata de

10 En Ingles estas plantillas son denominadas como


Desde la publicación de HTML5, multitud de diseñadores web han creado plantillas de diseño web

HTML5. En este tema se realiza un pequeño recorrido por algunas de ellas.

La plantilla “ArchiteXture”

La dirección URL de esta plantilla es http://freehtml5templates.com/architexture-html5-and

ión se pude probar en línea y descargar los archivos fuente.

Ilustración 5), es muy sobrio, en

donde se puede disitnguir facilmente las cuatro “zonas” de

El menú en la parte superior.

El banner de presentación de sitio, que conteine un nombre,

La zona central, que muestra información general en le lado

izquierdo y los artículos del lado derecho de esta zona.

pie de página, que conteine vínculos, ubicado como es de

entender en la parte inferior de la página.

La estructura general del sitio, que podemos observar en la Ilustración 6: Estructura de la plantilla ActiveXt

muestra fielmente la presentación visual de la plantilla. En

s ver que tenemos una caja<div id=”wrapper”> que sirve

de contenedor general y que permite centrar el sitio web en la ventana del

A continuación se encuentra un elemento <nav> que contiene el

navegación de la parte superior, el diseñador ha utilizado de

modo muy acertado el uso del elemento <nav> , ya que se lo ha usado

para insertar el menú de navegación del sitio Web.

La información general del sitio está insertada en un elemento <hea-

, que resulta bastante acertado ya que se trata de una información general que utilizaremos en todas las páginas del

En Ingles estas plantillas son denominadas como templates

Ilustración 5: diseño del sitio ArchiveXture

Ilustración 6: Estructura de la plantilla ActiveXture


21


Desde la publicación de HTML5, multitud de diseñadores web han creado plantillas de diseño web10

que utilizan

and-css3-template. Desde esta

: Estructura de la plantilla ActiveXtu-

una información general que utilizaremos en todas las páginas del

: diseño del sitio ArchiveXture

: Estructura de la plantilla ActiveXture

22

sitio.

En la zona central es un elemento de tipo <section> , elemento que se utiliza para mostrar elementos con una temáti-

ca similar.

La sección en este ejemplo simplemente trata de mostrar el contenido en la zona central de la página.

Por último, como es lógico, nos encontramos con un elemento <footer>.

El código de la estructura

El código de la estructura de este sitio web es el que indicamos a continuación:

<!doctype html> <html lang=”en”> <head> <meta charset=”utf-8” /> <title>ArchiteXture</title> <link rel=”stylesheet” href=”styles.css” type=”text /css” media=”screen” /> <link rel=”stylesheet” type=”text/css” href=”print. css” media=”print” />  </head> <body> <div id=”wrapper <nav … … … </nav> <header> … … … </header> <section id=”main”> … … … </section> <footer> … … … </footer> </div> </body> </html>

El menú de navegación

El código del elemento <nav> que contiene una caja de tipo <div> que incluye la típica lista de vínculos, cuyo código es:

<nav> <div class=”menu”> <ul> <li><a href=”#”>Home</a></li> <li><a href=”#”>About</a></li> <li><a href=”#”>Products</a></li> <li><a href=”#”>Services</a></li> <li><a href=”#”>Locations</a></li> <li><a href=”#”>Contact Us</a></li> </ul> </div> </nav>

Desarrollo de Aplicaciones Multiplataforma Plantillas web en HTML5

23

El banner de presentación

El banner de presentación (<header> ) contiene una caja <div> con el logotipo,título de nivel 1 (<h1> ) y un párrafo. Así

su código es:

<header> <div id=”plandesign”><img src=”images/plans.png” al t=”” /></div> <h1><a href=”#”>ArchiteXture</a></h1> <p>Praesent libero… …</p> </header>

La zona central

La zona central del sitio web, que tiene una estructura como la de la Ilustración 7, se ha insertado en dentro de un ele-

mento tipo <section id=”main”> . Este contiene otra caja <section

id=”content” > para mostrar el contenido propiamente dicho y un ele-

mento <slide id=”sidebar”> para mostrar información general en la

parte izquierda.

El elemento <section id=”content”> contiene los elementos

<articule> para los distintos artículos de la página, cada artículo contie-

ne a su vez títulos <h2> y párrafos <p>.

El elemento <aside> contiene diversos elementos título <h3> , lista

<ul> e imágenes <img>.

Así el código de esta zona central es:

<section id=”main”> <section id= »content »> <article> <h2><a href=”#”>First Article Title</a></h2> <p>Lorem ipsum dolor … … … </p> </article> <article> <h2><a href=”#”>Second Article Title</a></h2> <p>Lorem ipsum dolor sit amet,… … … </p> <p>Nulla quis sem at nibh … … … </p> </article> </section> <aside id=”sidebar”> <h3>Things To Do</h3> <ul> <li><a href=”#”>Play Games and Network</a></li> <li><a href=”#”>Chat With Friends</a></li> <li><a href=”#”>Swap Exciting Stories</a></li> <li><a href=”#”>Sell Tons of Your Stuff</a></li> <li><a href=”#”>Buy Stuff You Don’t Need</a></li> <li><a href=”#”>Trade Stuff With Others</a></li> </ul> <h3>Sponsors</h3> <img src=”images/ad125.jpg” alt=”” /> <img src=”images/ad125.jpg” alt=”” /><br /> <img src=”images/ad125.jpg” alt=”” /> <img src=”images/ad125.jpg” alt=”” /><br /><br /> <h3>Connect With Us</h3> <ul> <li><a href=”#”>Twitter</a></li> <li><a href=”#”>Facebook</a></li> </ul> </aside> </section>

Ilustración 7: estructura zona central

24

El pie de página

El pie de página utiliza un elemento <footer> . Este contiene dos cajas <div> para obtener el diseño deseado. Dentro

de la segunda caja encontramos cuatro elementos <aside> que corresponden a la cuatro zonas de visualización. Así el

código de este apartado es:

<footer> <section id=”footer-area”> <section id=”footer-outer-block”> <aside class=”footer-segment”> <h4>Friends</h4> <ul> <li><a href=”#”>one linkylink</a></li> <li><a href=”#”>two linkylinks</a></li> <li><a href=”#”>three linkylinks</a></li> </ul> </aside> <aside class=”footer-segment”> <h4>Awesome Stuff</h4> <ul> <li><a href=”#”>one linkylink</a></li> <li><a href=”#”>two linkylinks</a></li> <li><a href=”#”>three linkylinks</a></li> </ul> </aside> <aside class=”footer-segment”> <h4>Coolness</h4> <ul> <li><a href=”#”>one linkylink</a></li> <li><a href=”#”>two linkylinks</a></li> <li><a href=”#”>three linkylinks</a></li> </ul> </aside> <aside class=”footer-segment”> <h4>Blahdyblah</h4> <p>Integer nec odio. Praesent libero. Sed cursus an te dapibus diam.</p> </aside> </section> </section> </footer>

La plantilla De Front Page

La Fuente

La dirección URL de esta otra plantilla es http://freehtml5templates.com/dafrontpage-html5-and-css3-template/. Des-

de esta dirección se puede probar en línea y descargar las fuentes

Diseño y estructura

Eldiseño de esta plantilla es al estilo de una revista (ver . y su estructura como ocurría con la plantilla anterior también

está dentro de una caja <div id=”wrapper”>. El título se encuentra en un elemento de tipo nivel 1 (<h1> ), y el menú de

navegación se incluye en un elemento de tipo <nav>.

El artículo resaltado en la parte superior se encuentra dentro del elemento <header> de la página.

25

Ilustración 8: Diseño de la Plantilla "Da Front Page"

El contenido de las tres columnas está definido dentro de un elemento de tipo <section> ya que las tres representan

una estructura similar. Como se puede observar en la imagen

de la Ilustración 8 que tenemos a la derecha.

Por último tenemos el pie de página que como es de supo-

ner está en un elemento de tipo <footer> .

Así que la estructura de las cajas será como la de la se

muestra en la imagen de la Ilustración 9 que hay justo debajo..

Código de la estructura general

<!doctype html> <html lang=”en”> <head> <meta charset=”utf-8” /> <title>DaFrontPage</title> <link rel=”stylesheet” href=”styles.css” type=”text /css” media=”screen” /> <link rel=”stylesheet” type=”text/css” href=”print. css” media=”print” />  </head> <body> <div id=”wrapper”> <h1><a href=”#”>Da Front Page</a></h1> <nav> … … … </nav> <header> … … </header> <section id=”main”> … … </section> <footer> … … </footer> </div> </body> </html>

Ilustración 9: Estructura de cajas "Da Front Page"

26

Título y el menú de navegacióndel sitio Web

El título del sitio Web está insertado dentro de un <h1>.

<h1><a href= »# »>Da Front Page</a></h1>

A continuación tenemos definido el menú de navegación que como es de entender está dentro de un elemento tipo

<nav>, y dentro de éste tenemos un elemento caja <div> , en donde todos los vínculos están ordenados en una lista

<ul> . El código de esta parte es:

<nav> <div class=”menu”> <ul> <li><a href=”#”>Top News</a></li> <li><a href=”#”>National</a></li> <li><a href=”#”>World</a></li> <li><a href=”#”>Politics</a></li> <li><a href=”#”>Business</a></li> <li><a href=”#”>Technology</a></li> <li><a href=”#”>Sports</a></li> <li><a href=”#”>Entertainment</a></li> <li><a href=”#”>Science</a></li> <li><a href=”#”>Health</a></li> <li><a href=”#”>Travel</a></li> </ul> </div> </nav>

El encabezado del sitio

El encabezado en este caso se trata de un artículo en portada. Esto implica que el diseñador ha querido mostrar en to-

das las páginas del sitio un artículo como cabecera del sitio.

El elemento <header> contiene dos cajas <div> , un para la imagen y otra para el texto del artículo, el código es:

<header> <div class=”headlineimage”> <img src=”images/headlineimg.jpg” alt=”” /> </div> <div class=”headline”> <h2><a href=”#”>Fans Mourn Pop Singer’s Tragic Deat h</a></h2> <p>Duis sagittis ipsum. Praesent de mauris… … … </p > <p>Class aptent taciti sociosqu ad litora … … </p> </div> </header>

La zona central

La zona central del sitio definida de tal modo que contiene una serie de artículos en tres columnas, esta distribuida de la

siguiente manera:

Toda ella está contenida dentro de un elemento <section id=”main”> , este elemento contiene dos elementos

<section class=”triplecols”> con el fin de presentar las dos series de artículos en tres columnas.

Cada elemento <section class=”triplecols” contiene tres elementos <article> , que estos últimos incluyen

elementos <a> para vínculos, <img> para imágenes y <p> para los párrafos de texto.

El código de esta zona es:

<section id=”main”> <section class=”triplecols”>

27

<article class=”tripleblocks tripleleftblock”> <a href=”#”> <img class=”thumbnail”… …/> <span class=”caption”><b>Protest Outside Courtroom< /b>

</span> </a> <p class=”byline”>By Jeffrey Wiggins</p> <p>Duis sagittis ipsum… … … </p> </article> <article> … … … </article> <article> … … … </article> </section> <section class= »triplecols »> <article> … … … </article> <article> … … … </article> <article> … … … </article> </section> </section>

El pie de página

El pie de página <footer> usa dos secciones para su presentación una contiene a la otra sección, la diferencia reside

que la primera <section> define las propiedades del área utilizado por el pie de página y el 2º elemento <section> defi-

ne el bloque del contenido formado por cuatro elementos <aside> para definir cada una de las zonas de visualización. El

código es:

<footer> <section id=”footer-area”> <section id=”footer-outer-block”> <aside class=”footer-segment first”> <h3>Friends</h3> <ul> <li><a href=”#”>one linkylink</a></li> <li><a href=”#”>two linkylinks</a></li> <li><a href=”#”>three linkylinks</a></li> </ul> </aside> <aside class=”footer-segment second”> … … … </aside> <aside class=”footer-segment third”> … … … </aside> <aside class=”footer-segment last”> … … … </aside> </section> </section> </footer>


28

Ilustración 12: estructura de la cabecera

La plantilla Learnig Center

Fuente

A continuación se indica la URL de esta plantilla:

http://www.templatemonster.com/free-templates/free-website-template-learning-center.php

En este caso, para que nos descargue el código de esta plantilla, es necesario

que se le envíe una dirección de correo

Diseño del sitio y estructura general.

Como se pude observar en la imagen de la derecha (Ilustración 10) podemos

ver el diseño de este sitio.

Decir que la estructura que tiene esta página se compone de dos cajas <div> ,

que utilizan dos clases CSS para establecer sus propiedades.

La primera caja <div class=”body1”> , permite visualizar la parte superior

del sitio que a su vez contiene otra caja <div class “main”> que se utiliza para

establecer el diseño de esta zona.

En esta segunda caja se encuentra un elemento <header> que corresponde a la parte superior del sitio, la cabecera,

que e trata de la parte de la imagen con el globo del mundo.

La segunda caja <div class=”body2”> es para visualizar la parte inferior de

la página, la que el fondo es de color blanco. En esta caja se ha utilizado otro ele-

mento caja <div class=”main”> con el que se establece el diseño. A su vez esta

caja contiene un elemento >section id=”content”> para visualizar la zona

central.

Terminando con una caja <footer> para visualizar el pie de página (zona con

el fondo de color girs).

Esta estructura la podemos ver en el diagrama gráfico de la izquierda

(Ilustración 11).

La cabecera

El elemento <header> se encuentra dentro de dos cajas <div> . Además el

elemento <header> contiene tres elementos <div> , para sus tres pares y una

lista <ul> :

� El menú de navegación

� El título “Learn Center”

� El eslogan

� Los tres botones grandes en una columna

La Ilustración 12 representa la estructura de la cabecera <header>

Ilustración 10: diseño del portal “Learning Center”

Ilustración 11: estructura de "Learning Center"


29

El menú de navegación

Como es de esperar, el menú de navegación del sitio está definido dentro de una caja <nav> , que en esta plantilla

se encuentra dentro de la cabecera <header> y una caja contenedor <div class=”wapper”> . Precisamente esa caja

contenedor además del menú del sitio tiene definida a la derecha una lista <ul> con tres vínculos a redes sociales. El

código de esta primera caja contenedor es:

<div class=”wrapper”> <nav> <ul id=”menu”> <li><a href=”index.html”>About</a></li> <li><a href=”Courses.html”>Courses</a></li> <li><a href=”Programs.html”>Programs</a></li> <li><a href=”Teachers.html”>Teachers</a></li> <li><a href=”Admissions.html”>Admissions</a></li> <li class=”end”><a href=”Contacts.html”>Contacts</a ></li> </ul> </nav> <ul id=”icon”> <li><a href=”#”><img src=”images/icon1.jpg” alt=””> </a></li> <li><a href=”#”><img src=”images/icon2.jpg” alt=””> </a></li> <li><a href=”#”><img src=”images/icon3.jpg” alt=””> </a></li> </ul> </div>

Continuación de la cabecera

A continuación de la caja contenedor vista en el punto anterior, dentro del elemento <header> ser presentan las típi-

cas cajas <div> para definir un título <h1> y un eslogan,además de una lista <ul> con tres botones grandes

<div class=”wrapper”> <h1><a href=”index.html” id=”logo”>Learn Center</a> </h1> </div> <div id=”slogan”> We Will Open The World<span>of knowledge for you!</ span> </div> <ul class=”banners”> <li><a href=”#”><img src=”images/banner1.jpg” alt=” ”></a></li> <li><a href=”#”><img src=”images/banner2.jpg” alt=” ”></a></li> <li><a href=”#”><img src=”images/banner3.jpg” alt=” ”></a></li> </ul>

Contenidos segunda caja

En la segunda caja <div class=”body2”> del sitio, la estructura que tenemos es la mostrada en la imagen de la Ilus-

tración 13, que representa toda la parte de debajo de la página, en donde se

puede destacar la representación de los tres artículos en parte central:

<div class=”body2”> <div class=”main”> <section id=”content”> <div class=”wrapper”> <div class=”pad1 pad_top1”> <article class=”cols marg_right1”> <figure><a href=”#”><img src=”images/page1_img1.jpg” alt=””></a> </figure> <span class=”font1”>Our Mission Statement </span> </article>

Ilustración 13: estructura cuerpo "Learn Center"


30

<article class=”cols marg_right1”> <figure><a href=”#”><img src=”images/page1_img 2.jpg” alt=””></a></figure> <span class=”font1”>Performance Report</span> </article> <article class=”cols”> <figure><a href=”#”><img src=”images/page1_img 3.jpg” alt=””></a></figure> <span class=”font1”>Prospective Parents</span> </article> </div> </div>

El código continúa con la definición de una zona central que tiene la misma lógica:

<div class=”box1”> <div class=”wrapper”> <article class=”col1”> <div class=”pad_left1”> <h2>Welcome to Our Center</h2> <p class=”font2”>Learn Center … … … </div> <a href=”#” class=”button”><span><span>Read More</s pan></span></a> <div class=”pad_left1”> <h2>Individual Approach to Education!</h2> </div> <div class=”wrapper”> <figure class=”left marg_right1”><img src=”im ages/page1_img4.jpg” alt=””></figure> <p class=”pad_bot1 pad_top2”><strong>Lorem ip sum d… … … </div> <div class=”pad_top2”> <a href=”#” class=”button”><span><span>Read M ore</span></span></a> </div> </article> <article class=”col2 pad_left2”> <div class=”pad_left1”> <h2>New Programs</h2> </div> <ul class=”list1”> <li><a href=”#”>International Studies</a></li > <li><a href=”#”>Models & Language Reachin g</a></li> <li><a href=”#”>Public School Facts</a></li> <li><a href=”#”>State Testing Data</a></li> <li><a href=”#”>Education Jobs</a></li> </ul> <div class=”pad_left1”> <h2>Latest News</h2> </div> <div class=”wrapper”> <span class=”date”>27</span> <p class=”pad_top2”><a href=”#”>April, 2011</ a><br> Sed utirspiciatis unde omnis iste natus erro r sit...</p> </div> <div class=”wrapper”> <span class=”date”>25</span> <p class=”pad_top2”><a href=”#”>April, 2011</ a><br> Voluptatem accusan dolore mque laudantium.. .</p> </div> <div class=”pad_top2”> <a href=”#” class=”button”><span><span>Read M ore</span></span></a> </div> </article> </div> </div> </section>

Desarrollo de Aplicaciones Multiplataforma El camino hacia CSS3

31

El camino hacia CSS3

Análisis de la situación

Los Módulos en curso

En W3C se trabaja en el CSS3 forma dinámica, que quiere decir esto, que no se crea y redacta una recomendación, sino

que se trabaja sobre multitud de módulos que permitan organizar las propiedades CSS. Así en lugar de crear una única y

gigantesca especificación trabajan con varias especificaciones independientes.

Para saber cal es el estado de la evolución de los módulos de CSS3, podemos ir a la página siguiente:

http://www.w3.org/Style/CSS/current-work

Observar que en esta página sedetalla el estado de cada módulo de trabajo indicándonos en qué situación se encuen-

tra, que como se pude observar en la leyenda de debajo del cuadro, podemos encontrar que un módulo puede estar en:

� Recomendación (REC): Módulo oficialmente terminado y se propone como recomendación.

� Proyecto de recomendación (PR): El estado de este módulo es técnicamente terminado, ya ha sido enviado al co-

mité de del W3C como propuesta, y está a la espera que dicho comité se pronuncie oficialmente y le asigne la cate-

goría de recomendado.

� Candidato a Recomendación (CR): En este caso el módulo cumple ya con todos los requisitos según el grupo de tra-

bajo y se ha estudiado en profundidad su implementación.

� Última llamada (LC): Aún se está trabajando en el módulo, pero se ha presentado oficialmente ante los otros grupos

de trabajo y el público en general.

� Borrador de Trabajo (WD): este módulo se está elaborando, pero se pone a disposición de los miembros del W3C y

del público en general para su estudio técnico.

Consultar especificaciones

Es posible acceder a los distintos módulos mediante el vínculo que indica la situación actual. Es conveniente consultar la

situación actual, y ver si se han producidos avances importantes y mantenerse informado de las novedades, correcciones,

cancelaciones…

Los prefijos para los navegadores

Especificaciones y Recomendaciones

Se pude usar CSS3 desde ya, el problema viene que son los navegadores los que tienen la última palabra. Son los nave-

gadores quienes tienen que estar informados de las novedades y quienes deben implementarlas en su motor de visualiza-

ción. Para los navegadores, seguir día a día las novedades es una auténtica carrera, misión imposible ya que nunca se ter-

mina de completar.


32

Los navegadores y el CSS3

Con el fin de evitar el estancamiento el W3C ha encontrado una solución alternativa. Se les permite a los navegadores

total libertad a la hora de implementar las novedades gracias a un prefijo único que específica que navegador usar. Cuando

la especificación alcanza el nivel de CR, los prefijos ya no son necesarios.

Los prefijos de los navegadores son:

• moz- : para el motor de renderizado Gecko de Mozilla firefox.

• webbit- : para el motor de renderizado Webkit de Safari y Crome

• o- : para el motor de renderizado de Opera

• ms- : para el motor de renderizado de MicroSoftInternet Explorer

• khtml- : para el motor de renderizado KHTML usado por varios navegadores Linux

Por ejemplo, suponer que se desea usar la propiedad border-radius que permite crear esquinas redondeadas para

las cajas <div>.

Esta sería la sintaxis necesaria para que todos los navegadores reconozcan dicha propiedad:

header{ • webkit-border-radius:10px; • moz-border-radius:10px; • o-border-radius:10px; • ms-border-radius:10px; • khtml-border-radius:10px; border-radius:10px; }

Las primeras líneas son específicas para cada motor de visualización, la última línea corresponde a la propiedad están-

dar para todos los navegadores, que reconocerán dicha propiedad más adelante, en cuando el W3C la haya finalizado.

Esta sintaxis tiene que ser como se indica para que la propiedad “oficial” al estar en último lugar, tiene prioridad sobre

las líneas precedentes. Esta solución es muy pesada, pero nos asegura la portabilidad de las propiedades que está a espera

de oficialización.

Generadores de prefijos

Es fastidioso el tener que escribir los prefijos, para lo que podemos recurrir a los “generadores de prefijos”. Podemos

destacar los siguientes generadores:

Net Tuts Prefixr

El sitio Web de este generador es: http://prefixr.com, que mediante una interfaz muy sencilla e intuitiva nos propone

incluir el código al que se desea introducir los prefijos

Prefix-my CSS

Este otro generador de prefijos funciona de forma similar al anterior, su url es: http://prefixmycss.com. Tan sólo indicar

que es conveniente copiar y pegar sólo la definición de nuestras reglas CSS

Desarrollo de Aplicaciones Multiplataforma El camino hacia CSS3

33

CSSPrefixer

En este sitio “http://cssprefixer.appspot.com”, que como los dos anteriores tras pegar el código al que se desea insertar

los prefijos nos lo genera el nuevo código con los prefijos seleccionados.

Generador de prefijos JavaScript

Esta solución, que descargaremos de la URL http://leaverou.github.com/prefixfree, permite vincular nuestras páginas

con un archivo JavaScript muy ligero (2KB),que genera de forma automática los prefijos en función del navegador que utili-

ce el visitante de las páginas. Con esta utilidad no es necesario insertar los prefijos a nuestros estilos, ni siquiera conocerlos,

ya que el script añade una clase al elemento <html> ,con el valor del prefijo propietario del navegador utilizado.

Esta solución funciona con los navegadores siguientes: Internet Explorer 9 y versiones superiores, Opera 10y versiones

superiores, Firefox 3.5y versiones superiores, Safari 4 y versiones superiores y Crome.

Por ejemplo vamos a crear la siguiente página:

<!doctype html> <html lang=”es”> <head> <meta charset=”utf-8”> <title>mi Documento</title> <style> body{ font: .8em Verdana, Arial, sans-serif; } h1, p { margin:0; } header{ width:400px; padding:10px; border-radius:10px; box-shadow:0px 0px 10px rgba(250,20,30,1); } </style> <script src=”prefixfree.min.js” type=”text/javascr ipt”></script> </head> <body> <header> <h1>Documento sin título</h1> <p>este es un párrafo para probar el marco con las esquinas redondeadas</p> </header> </body> </html>

Desarrollo de Aplicaciones Multiplataforma Los nuevos selectores CSS3

35

Los nuevos selectores de CSS3

Los Selectores

Funcionalidad

Los selectores sirven para indicar a qué elemento se les van a aplicar los estilos definidos.

Los selectores CSS2

En la recomentación CSS2.1 ya se propone una lista de selectores que pasamos a recordar:

Selector universal: para aplicar un estilo a la totalidad de los elementos HTML de una página.

� Sintaxis: *{… … … }

Selector de elemento o de tipo: Permite aplicar un estilo a un elemento HTML existente.

� Sintaxis: p{… … … }

Selector de clase: Permite aplicar un estilo a los elementos que utilicen una clase.

� Sintaxis: .intro{… … … }

Selector de clase de un elemento: para aplicar un estilo a un elemento específico que utilice una dicha clase.

� Sintaxis: p.intro{… … … }

Selector de descendientes: utilizado para aplicar un estilo a un elemento determinado que se encuentre dentro de un

elemento específico.

� Sintaxis: p.nombrePropio{… … … }

Selector hijo: Proporciona un estilo al primer elemento hijo de un elemento específico.

� Sintaxis: p>.nombrePropio{… … … }

Selector adyacente: Permite asignar un estilo al elemento que se encuentre a continuación de un elemento específico.

� Sintaxis: h1+h2{… … … }

Selector de atributo: Permite asignar un estilo a un elemento que disponga de un código de identificación único.

� Sintaxis: p[lang]{… … … }

Selector de ID: Permite establecer un estilo a un elemento que disponga de un código de identificación único.

� Sintaxis: #bannerSuperior{… … … }

Las pseudo-clases

Las pseudo clases se añaden al selector de manera que podemos aplicar un formato específico, recordando que pueden

ser:

Pseudo-clase first-child: permite aplicar un estilo al primer elemento hijo de un elemento.


36

� Sintaxis: ul li:first-child{… … … }

Pseudo-clases de vínculos: permite aplicar estilos a vínculos en función de su estado (visitado o no visitado).

� Sintaxis: a:link{… … … } y a:visited{… … … }

Pseudo-clases dinámicas: utilizadas para aplicar estilos a los vínculos cuando se para el ratón por encima o se ha hecho

clic en ellos,así como a los campos de los formularios que estén activos.

� Sintaxis: a:hover{… … … } , a:active{… … …} y .campoTexto:focus{… … …}

Pseudo-clase de lenguaje: permite aplicar estilos en función del idioma especificado.

� Sintaxis:lang(es){… … …}

Los pseudo-elementos

Los pseudo-elementos se añaden a un selector de manera que podemos aplicar un formato específico, dándose los si-

guientes:

Pseudo-elementos de primera letra y de primera línea: Con este tipo de pseudo-elementos es posible aplicar un estilo

sólo a la primera letra de un elemento o a la primera línea.

� Sintaxis para la primera letra: .especial:fist-letter{… … …}

� Sintaxis para la primera línea: .especial:fist-line{… … …}

Pseudo-elementos antes y después: estos pseudo-elementos permiten generar texto antes o después de un determi-

nado elemento.

� Sintaxis para antes: .nota:before{… … …}

� Sintaxis para después: .destacado:after{… … …}

Agrupación de selectores

La agrupación de selectores permite aplicar propiedades comunes a diferentes selectores.

� Sintaxis: h1, .special, p.intro{… … …}

Los nuevos selectores CSS3

Las nuevas especificaciones CSS3 introducen nuevos selectores, y dado que este módulo ya está terminado y está en es-

tado de “Recomendation”. La URL siguiente http://www.w3.org/TR/css3-selectors/, es el documento oficial de la W3C con

fecha del 29 de septiembre de 2011, en él viene detallado todos los selectores así como sus características, no obstante en

los apartados siguientes explicaremos las novedades o modificaciones que se han producido entre la versión CSS2 y la

versiónCSS3.

El selector general de elementos adyacentes

El CSS2 permite definir un estilo adyacente como un elemento hermano situado a continuación de otro elemento, de

modo que por ejemplo, la sintaxis h1+h2{…} asigna el estilo sólo al primer elemento h2 que esté situado después de un

h1 .


37

Con CSS3,se puede definir otro tipo de elemento adyacente que necesariamente no esté justo a continuación de otro,

es decir que dicho estilo se aplique a todo elemento situado a continuación del primero, aunque no sea precisamente el

inmediatamente siguiente.

La sintaxis de este tipo de elemento es: h1~h2{… … … }

Por ejemplo los siguientes selectores definen que el h2 justo a continuación de un h1 esté en cursiva y el segundo selec-

tor establece el tipo de fuente a normal (quita el blond):

h1+h2{ font-style: italic; } h1~h2{ font-weight: normal; }

Para el código HTML siguiente:

<h2>Etiqueta de nivel 2 (primera)</h2> <h1>Etiqueta de nivel 1</h1> <h2>Etiqueta de nivel 2 (segunda)</h2> <p>párrafo normal</p> <h2>Etiqueta de nivel 2(tercera)</h2>

El resultado es el que vemos en la Ilustración 14donde se puede observar que el primer elemento h2 tiene la configura-

ción por defecto de “negrita” además de no estar cursiva, y que en los otros dos casos, la etiqueta h2, toma las propiedades

de los estilos adyacentes definidos (sólo cursiva el inmediatamente a continuación del h1, sin negrita todos los que está a

continuación del h1).

Selector de atributo

Los selectores de atributo existen desde la versión CSS2, pero en la versión CSS3 sus posibilidades son mayores, ya que

se puede:

[atributo^=”valor”]: para aplicar un estilo a un elemento cuyo atributo comience exactamente por valor.

[atributo$=”valor”]: en este caso se aplica el estilo a un elemento cuyo atributo termine por valor .

[atributo*=”valor”]: en este tercer tipo el estilo se aplica al atributo si contiene por lo menos una vez ese valor

Los vínculos hacia una dirección de e-mail

Vamos a vez en primer lugar un ejemplo de cómo aplicar un formato específico exclusivo para los vínculos que apunten

a una dirección de correo electrónico.

Por ejemplo para crear el Ilustración 15, deseamos seleccionar los

vínculos que tengan el atributo mailto para aplicarles un específico

icono, quedando el código:

a{text-decoration:none;} a[href^=”mailto”]{ background:url(../imagenes/icono-email1p.png) left center no-repeat; padding-left: 19px; }

Mientras que el código HTML de la página es:

<h3>Los interlocutores del servicio:</h3> <br>

Ilustración 14: elementos adyacentes

Ilustración 15: ejemplo selectores de atributo


38

Ilustración 16: ejemplo descarga de archivos

<p class=”alto”><a href=”mailto: [email protected]">Angel Zúñiga: Jefe de Ven-tas</a></p> <p><a href=”mailto: [email protected]">Pello Altadill: Director Comer-cial</a></p> <br> <p>Para las reclamaciones vaya a <a href=”reclamaci ones.html”>Problemas con pedidos</a></p>

Vínculos de descargas

A continuación vamos a ver un ejemplo de una página que permite descargas de archivos, en donde dependiendo del

tipo de archivo, la apariencia visual será diferente. En este ejemplo vamos a descargar dos tipos de archivos (.pdf y .zip). En

el caso de tratarse de un archivo tipo “.pdf” deseamos que tenga el estilo de texto en cursiva y el caso de ser un archivo de

tipo “.zip” el estilo asignado sea en negrita. Ver Ilustración 16¡Error! No se encuentra el origen de la referencia.

los selectores que utilizaremos en este caso serán:

a[href$=”.pdf”]{ font-style: italic; } a[href$=”.zip”]{ font-weight:bold; }

Y la estructura HTML es:

<p>descargue nuestros archivos.</p> <p><a href=”folleto.pdg”>El folleto de productos (P DF)</a><br/> <a href=”novedades.pdg”>Los nuevos productos (PDF)< /a><br> <a href=”ofertas.pdf”>Ofertas de temporada (PDF)</a ><br> <a href=”todo.zip”>Todos los documentos (ZIP)</a></ p>

La pseudo-clase de vínculo

Para crear vínculos dentro de una misma página, se utiliza la sintaxis deltipo siguiente:

<a href=”#intro”>Ir a la introducción</a>

Con la nueva pseudo-clase :target , se puede resaltar los vínculos que el visitante ya haya utilizado, veamos un ejem-

plo muy sencillo:

Tenemos un documento muy largo, en el cual se ha insertado un índice, al comienzo del mismo, con vínculos que apun-

tan hacia diferentes puntos situados en diversos lugares.

La estructura en HTML sería:

<p><a href=”#intro”

<nav> <p class=”menu”s> <a href=”#intro”>Introducción</a> | <a href=”#resul”>Resultados</a> | <a href=”#concl”>Conclusiones</a> </p> </nav> <h3><a id=”intro”>Introducción</a></h3> <p>Lorem ipsum dol ………</p> ……… <h3><a id=”resul”>Resultados</a></h3> <p>consectetuer adNunc ………</p> ………… <h3><a id=”concl”>Conclusiones</a></h3> <p>Aenean viverra malesuada libero………</p>


39

Los estilos definidos para este ejemplo son:

nav{ width: 250px; background-color: #FFE67D; margin: 10px; padding: 5px; border: thin solid #000; border } .menu{ margin:0px; } #contenedor{ width:800px; height:800px; margin:10px; background-color: #9DE39B; border: double solid #009; overflow:auto; } a{ text-decoration:none; } a:target { background-color: gold; }

Fijarse especialmente en la definición del selector de tipo “a”y la pseudo clase “a:target ” (que están en negrita).

El resultado de este código es que cuando se pulsa en el índice superior un vínculo, se accede a este, además de mar-

carlo con color oro.

Pseudo-clases estructurales

W3C propone una serie de pseudo-clases estructurales que permiten seleccionar con muchísima precisión los distintos

elementos de la estructura de nuestras páginas web. Destacaremos los siguientes:

Raiz de la página

:root.La pseudo-clase root permite seleccionar la raíz de la página web, es decir, el elemento <html> . La diferencia

con el selector <html> reside en que el selector :root tiene prioridad.

Primer y último elemento hijo

Las pseudo-clases hijo permiten seleccionar elementos descendientes de un elemento padre, que con CSS3 puede ser

los siguientes:

� :first-child (primer hijo) se trata de una pseudo-clase, ya existe en la versión CSS2, con el que se hace referen-

cia al primer elemento descendiente de otro elemento.

� :last-child (último hijo) es la pseudo-clase que hace referencia al último elemento hijo de un elemento padre.


40

Elementos descendientes

Para referirnos a un elemento descendiente de otro elemento, en CSS3 tenemos las siguientes pseudo-clases:

� :nth-child(x) en este caso se puede seleccionar un determinado elemento hijo, que se trata del elemento indi-

cado en el parámento x , el cual puede ser:

� Un númeropara seleccionar el hijo que ocupa la posición indicada con dicho número.

� Formula “n+x” o “-n+x”, donde x será un número entero diferente a 1, con lo que se indica desde elemento se

va a seleccionar hasta: el último si n es positivo, o hasta el primero si n es negativo.

� Fórmula “nx”, donde x será un nº mayor a 0, con el que se indicará cada cuantos elementos se selecciona uno.

� Fórmula “nx+y”, dode x e y será números mayores a 0, con este modo la se lección se hace de x en x elementos

pero empezando en el elemento y.

� oddpermite seleccionar todos los elementos hijos impares.

� even para seleccionar todos los elementos hijos pares.

� :nth-last-child(x)permite seleccionar el nº de elementos finales hijos de un elemento padre, en donde las op-

ciones del argumento “x” son similares a las de nth-child , es decir, podemos utilizar como valores: nº; n+nº; -

n+nº; nnº; odd; over;

Primero y último elementos de un tipo determinado

Las dos siguientes pseudo-clases hacen referencia a el primer o último elemento de una referencia determinada:

� :fist-of-typenos permite seleccionar el primer elemento de un tipo específico

� :last-of-type es para seleccionar el último de elementos de una determinada referencia.

Especificar elementos de un tipo específico

Para especificar el enésimo elemento de un determinado tipo, que no tiene que coincidir con el enéximo “hijo” pode-

mos utilizar las siguientes pseudo-clases:

� :nth-of-type(valor), que selecciona el elemento o elementos indicados en valor que coincidan con el tipo es-

pecificado. Las opciones de valor son las mismas que con nth-child() . Para comprender mejor la diferencia en-

tre nth-of-type() y nth-child() ver el ejemplo correspondiente utilizando este vínculo “ejemplo”.

� :nth-last-of-type(valor), se trata en este caso de seleccionar el enésimo elemento del tipo deseado pero,

ralizando la cuenta desde el último hacia adelante.

Los elementos únicos

Para seleccionar elementos únicos dentro de otro elemento, podemos hacer que se refiera a un elemento que no tiene

hermanos (sean del tipo que sean) o a un elemento único de un determinado tipo, para ello usaremos:

� La pseudo-clase :only-child permite seleccionar aquellos elementos que no tengan hermanos.

� Con :only-of-type permite seleccionar los elementos de un tipo determinado que sean únicos.


41

Elementos vacíos

Desdes CSS3 si deseamos seleccionar los elementos que tenemos vacíos podemos utilizar la pseudo clase:

� :empty selecciona todos aquellos elementos que no contienen a otros elementos, utilidad interesante para locali-

zar fácilmente elementos del tipo <li> , <td> , <dl> , etc….

Todos los elementos menos el elemento seleccionado

Esta última pseudo-clase :not() nos permite seleccionar de un padre todos los hijos excepto el elemento especificado.

Es decir, que si deseamos de un párrafo que contiene varios elementos de formato, strong, em, u y se desea cambiar la

presentaciónvisual de todos ellos excepto de los de tipo em tendremos que utilizar esta pseudo clase:

p>:not(u){ backgroup-color.gold; }

Ejemplos de pseudo-clases

Ejemplos de nth-child y nth-last-child

Vamos a hacer una lista con varios elementos, por ejemplo:

<div id=”contenedor”> <ul> <li>Rojo</li> <li>Verde</li> <li>Azul</li> <li>Gris</li> <li>Vileta</li> <li>Amarillo</li> <li>Blanco</li> <li>Marrón</li> <li>Naranja</li> <li>Negro</li> <li>Purpura</li> <li>Oliva</li> </ul> </div>

En la definición de estilos tenemos que tener definido el identificador único contenedor , por ejemplo:

#contenedor{ width:150px; border:#F00 solid 3px; }

Ahora vamos a utilizar las distintas opciones de nth-child , para definir los “hijos” del elementoli que tenemos de-

ntro del elemento contenedor su código CSS3 es:

Para asignar un estilo a sólo el 4º elemento:

#contenedor li:nth-child(4){ background-color:#FF8C8C; }

Para asignar un estilo a todos los elementos impares:

#contenedor li:nth-child(odd){ background-color:#FF8C8C;


42

}

Para asignar un estilo a todos los elementos pares:

#contenedor li:nth-child(even){ background-color:#FF8C8C; }

Para asignar un estilo a todos los elementos a partir del 4º:

#contenedor li:nth-child(n+4){ background-color:#FF8C8C; }

Para asignar un estilo a todos los elementos del 4º al 1º:

#contenedor li:nth-child(-n+4){ background-color:#FF8C8C; }

Para asignar un estilo de tres en tres desde el principio al final:

#contenedor li:nth-child(3n){ background-color:#FF8C8C; }

Para asignar un estilo de tres en tres pero comenzado desde el 2º elemento hacia el final:

#contenedor li:nth-child(3n+2){ background-color:#FF8C8C; }

Para asignar un estilo de tres en tres pero comenzando desde el 8º hacia el principio:

#contenedor li:nth-child(-3n+8){ background-color:#FF8C8C; }

Ejemplos de: nth-of-type, nth-last-of-type, only-child y only-of-type

Supongamos que tenemos dos párrafos al que se le ha aplicado un formato (<strong> ) y (<em>) a algunas palabras del

mismo. Por ejemplo en el primer párrafo vamos a suponer que tenemos como primer elemento hijo un elemento tipo

<strong> , como segundo elemento hijo un <em>y como tercero un <strong> . Mientras que en el segundo párrafo el

primer y segundo elemento hijo es del tipo <strong> y el tercero es de tipo <em>:

<p>Este es el primer párrafo para realizar, en dond e tenemos el primer elemento hijo <strong>aquí</strong>, el segundo es exactamente <e m>ahora</em> y el tercero ser trata de la siguiente <strong>palabra</strong>, así que esto es todo.</p> Este segundo párrafo tiene también tres hijos de lo s cuales el primer elemento hijo es es-te, el selguno viene a continuación y el tercero y último está en cursiva, ni más ni me-nos</p>

Ahora, para seleccionar el segundo elemento strong, podemos hacer la prueba de realizarlo de las dos utilziando las dos

maneras, con nth-child y nth-of-type .

Estilo CSS para la primera opción (nth-child ).

p strong:nth-child(2){ backgroup-color: gold; }

Al utilizar este estilo, lo que hace es buscar todos los elementos de tipo strong que sean el 2º hijo de los elementos

tipo p, y les asigna el color oro. Lo que en el primer párrafo no veremos que ocurre nada ya que el segundo elemento

hijo del elemento p no es del tipo strong , se trata del elemento em, y al no coincidir el tipo con el nº de hijo no se le

asigna el estilo.

Sin embargo en el segundo párrafo el elemento hijo nº 2 coincide con el tipo buscado y se le asigna el estilo desea-

do.


43

El estilo CSS para la segunda opción (ntc-of-type )

p strong:nth-of-type(2){ backgroup-color: gold; }

Si el estilo definido es el que indicamos en las líneas superiores, en el primer párrafo pone de color oro el 2º hijo de

tipo strong , que precisamente es el 3er

hijo del párrafo. En el segundo párrafo, también se le asigna el color oro al se-

gundo elemento de tipo strong que además coincide con el 2º hijo del elemento, por lo que no notamos la diferencia

entre una forma y otra diferencia.

Desarrollo de Aplicaciones Multiplataforma Los estilos de caja en CSS3

45

Ilustración 18: Tamaño caja con "box-sizing: -border-box"

Los estilos de cajas en CSS3

De todas las novedades de CSS3, hay que destacar en especial las propiedades para el diseño de las cajas, especialmen-

te por que abren a los diseñadores de sitios Web un abanico de posibilidades nuevo como puede ser el redondear los bor-

des, aplicar degradados, establecer sombras e incluso transparencias en las cajas <div> . Por ello, este capítulo está dedica-

do al completo a explicar las propiedades y el modo de interpretar las cajas del CSS3 frente al CSS2.

El tamaño de las cajas

Con CSS 2.1

El tamaño necesario para visualizar una caja con la versión CSS2.1 es la

suma de la anchura (width ), de los márgenes (margin ), el tamaño del

borde (border ) y el espaciado (padding ) (ver imagen de la Ilustración 17

Con CSS3

En CSS3, con la propiedad box-sizing, se puede indicar que los valores de border y de padding se incluyan en el

tamaño widht .

Esta propiedad acepta dos valores:

� content-box: el ancho de la caja se calcula en función del tama-

ño del contenido, más el borde y el contenido. Es decir, el ancho

de visualización es como en CSS 2.1. Este valor se trata del que se

tiene por defecto.

� border-box: con este valor el ancho de la caja (width ) incluye

el del borde (border ) y espaciado (padding ). Ver la imagen de

laIlustración 18.

Suponemos el siguiente caso, en donde insertamos dos cajas, entre

ambas además de la posición en donde se insertan, la única diferencia es

que la segunda caja tiene la propiedad box-sizing : border-box . El código de CSS3 de ambas cajas es:

#miCaja1{ position: absolute; Ttp: 50 px; #miCaja1{ position:absolute; top:50px; left:50px; width:200px; height:90px; padding:10px; border: 10px solid #900; margin:30px; } #miCaja2{ position:200px;

Ilustración 17: Modo visualización de cajas con CSS 2.1

Ilustración 19: ejemplo de box-sizing


46

top:200px; height:90px; padding:10px; border: 10px solid #900; margin:30px; box-sizing:border-box; }

La visualización de las cajas quedará como en la imagen de la Ilustración 19.

El desbordamiento de contenido

Los estilos de CSS 2.1 no permiten usar la propiedad overflow para gestionar el contenido cuando éste último es ma-

yor que el contenedor. Se trata del famoso principio “desbordamiento de contenido”.

En CSS3 se han añadido dos nuevas propiedades para poder gestionar dicho desbordamiento, se tratan de:

� overflow-x: cuyo el fin de gestionar el desbordamiento horizontal.

� overflow-y: que permite gestionar el desbordamiento vertical.

Los valores posibles para estas propiedades son las mismas que las que tiene la propiedad owerflow en CSS 2.1. Son:

� visible: el contenido permanece siempre visible.

� hidden: el contenido permanece siempre oculto.

� scroll: se puede acceder al contenido gracias a una barra de desplazamiento que permanece siempre visible.

� auto: se puede acceder al contenido gracias a una barra de desplazamiento, que a diferencia de la opción anterior

sólo es visible si resulta necesaria.

Como ejemplo vamos a utilizar estas propiedades en el siguiente ejemplo, donde tenemos una primera caja, con la pro-

piedad overflow establecido en su opción auto y una segunda caja en donde se ha utilizado la propiedad overflow-

x:scroll junto con la propiedad white-space: nowrap , indispensable esta última para la visualización de la barra de

desplazamiento.

#miCaja1{ width:250px; height:100px; border: 1px solid #0C0; padding:0; overflow:auto; margin-bottom:30px; } #miCaja2{ width:250px; height:100px; border: 1px solid #0C0; padding:0; overflow-x:scroll; white-space:nowrap; }

En la imagen de la Ilustración 20, podemos observar la primera caja que es un estilo #miCaja1 y debajo la caja con el

estilo #miCaja2

Los colores de fondo

W3C ha editado un módulo específico de CSS3 para la gestión de los colores: http://www.w3.org/TR/css3-color/. Este

módulo está terminado, por lo que está en estado de recommendation desde el día 7 de junio de 2011. Sus dos grandes

novedades son el modo HSB y la transparencia.

Ilustración 20: ejemplo overflow y overflow-x


47

El modo HSB

El modo HSB permite reunir en un solo y único gráfico (conocido como círculo cromático) los modelos colorimétricos

RGB y CMYK. La forma de definir un color es mediante los parámetros H, S y B, que controlan:

� H: corresponde al tono, en inglés “hue”. Su unidad de medida es en grados. Por definición el 0º corresponde al

rojo, 120º al verde y el azul es el 240º.

� S: esta letra corresponde a la saturación, se trata de la pureza del color, de la cantidad de gris del mismo. Este

parámetro se mide en %, siendo 100% el color puro y 0% será gris.

� B: corresponde al brillo (Brightness en inglés), es este caso se trata de la cantidad del luz. La unidad de medida

también es en %, siendo 0% negro y 100% blanco

Por ejemplo el color rosa representado en valor HSB es el (319, 18%, 85%), que si creamos un estilo de una caja con co-

lor de fondo rosa, lo podemos hacer como:

#rosa{ width:100px; height:50 blackground-color: hsl(319,18%,86%)

}

El modo HSB con transparencia

Con la unidad hsba podemos añadir un cuarto valor opcional al color, la transparencia. Su valor va de 0, totalmente

transparente, a 1, totalmente opaco.

En el ejemplo que viene acontnaución vamoa a tener dos cajas superpuestas, en donde la segunda de las cajas que está

por encima de la otra va a tener transparencia.

Los estilos serán:

#azul{ position:absolute; top:10px; left:10px; width:100px; height:50px; background-color: hsl(240,100%,50%) } #amarillo{ position:absolute; top:30px; left:50px; width:100px; height:50px; background-color: hsla(120,100%,50%,.5) }

El resultado será visual es el que se aprecia en la Ilustración 21

Modo RGB con transparencia

Al igual que para el HSB con transparencia (hsla ), el modo RGB también acepta ahora la transparencia en la definición

de un color. Su formato es:

rgba(rojo,verde,azul,trasn.)

indicar que este modo de determinar el color deseado permite números de 0 a 255 para los argumentos rojo, verde y

azul. El argumento de transparencia tiene que ser un número entre 0 (transparente) a 1 (opaco)

Ilustración 21: transparencia HSB


48

Transparencia

Además de poder definir un color con la transparencia deseada, en CSS3, se ha incluido una nueva propiedad con la que

se puede aplicar transparencia a todos los elementos HTML y sus descendientes, se trata de la propiedad opacity . Al igual

que ocurre con los parámetros de las hsla y rgba los valores que se permiten son un número entre 0 y 1, siendo 0 trasnpa-

rente y 1 opaco.

Esta propiedad aplica transparencia tanto al elmento al que se le aplica, como a todos los elementos contenidos en él.

Ees decir, si a una caja se le asigna esta opacity=0.5 se le está asignado dicha opacidad a la caja y todos aquellos elemen-

tos que contenga dicha caja.

Fondos y bordes

La situación actual de fondos y bordes la podemos ver en el módulo correspondiente de la URL correspondiente editada

por el W3C, que es http://www.w3.org./TR/css3-background/, que está casi finalizada y se encuentra en estado de “Candi-

date Recommendation” (candidata a recomendación) con fecha del 24 de julio de 2012.

Entre sus nuevas posibilidades podemos destacar:

Bordes redondeados

Esta opción no es por todos los navegadores reconocida, o no la reconocen perfectamente, así que es recomendable

utilizar los prefijos correspondientes o utilizar el JavaScript comentado en estos mismo apuntes encargado de insertar

dichos prefijos de navegador.

Bordes idénticos

En un “contenedor” (<div> , <section> , <header> , …) podemos asignar los bordes redondeados, para todas las es-

quinas el mismo valor o como se comenta en el apartado siguiente para cada una de las esquinas un valor diferente.

El redondeo de estas esquinas se establece en píxeles, que indica el radio del círculo que determina la esquina redon-

deada. Y para hacer todas las esquinas de idéntico radio lo haremos:

Border-radius: valor px;

Bordes redondeados diferentes

Bien, también se puede indicar que el radio de redondeo de las esquinas sea diferente para cada una de las esquinas, e

incluso ´solo redondear aquellas esquinas que se desee. Para ello usaremos los siguientes atributos:

border-radius-topleft : este permite establecer el redondeo de la esquina superior izquierda.

border-radius-topright : con este se determina el radio de re-

dondeo de la esquina superior derecha.

border-radius-bottonright : atributo para indicar el radio de la

esquina inferior derecha.

border-radius-bottonleft : por último está este atributo que

redondead la esquina inferior izquierda.

Estos cuatro atributos permiten redondear por separado cada una de

las esquinas de una caja contenedor, sin ser necesario utilizar ninguna de

Ilustración 22: redondeo desigual de las esquinas


49

las otras, con lo que se puede conseguir cajas redondeadas sólo en alguna de las esquinas. Pero si se desea redondear todas

las esquinas pero con radios diferentes, se puede utilizar un método “abreviado” que es usando la propiedad border-

radius , pero indicando los radios de las cuatro esquinas eejmplo:

border-radius: 10px 15px 20px 25px;

Con el resultado de la imagen Ilustración 22, en donde se puede observar que el primer valor se refiere al radio de la

esquina superior izquierda, el segundo es para establecer el radio de la esquina superior derecha, el tercer valor indica el

radio de la esquina inferior derecha y el cuarto para asignar el radio a la esquina inferior izquierda.

Elipses en los bordes

El redondeo de los bordes no tiene por qué ser con círculos, puede realizarse mediante elipses (ver Ilustración 23), don-

de se puede observar que el radio horizontal (1) es mayor al radio vertical (2).

Para establecer esta forma de redondear se hace indicando los dos valores sepa-

rados con una barra oblicua “/”, del a forma radioHorizontal/radioVertical .

Por ejemplo, si se desea establecer todas las esquinas de una caja con un radio de

redondeo horizontal de 40 píxeles y un radio vertical de 20 píxeles tenemos que defi-

nir el siguiente estilo:

#esquinas_elipse1{ position:absolute; top:30px; left:30px; width:200px; height:100px; border: solid blue; border-radius:40px/20px; }

Evidentemente esta nomenclatura puede ser usada para cada una de las esquinas por separado border-radius-

topleft , border-radius-topright , border-radius-bottonleft y border-radius-botonleft.

Si se desea utilizar establecer para todas las esquinas un redondeo elíptico, diferente también se puede utilizar sólo el

atributo border-radius indicando en sus atributos primero el radio horizontal de las cuatro esquinas, la barra invertida y

después el radio vertical de las cuatro esquinas. Por ejemplo:

#esquinas_elipse2{ position:absolute; top:150px; left:30px; width:200px; height:100px; border: solid blue; border-radius:20px 30px 40px 10px / 10px 10px 10px 40px; }

Generadores de código on-line

Existen varios generadores en línea para crear rápidamente un estilo CSS3 con respecto a esta propiedad, alguno de

ellos son:

Border-Radius:http://border-radius.com/, en esta página se indica el radio deseado para cada esquina y se genera el

código correspondiente (con las líneas de prefijos incluidas) que para poder usarlo tan sólo tenemos que copiarlo y pe-

garlo en nuestra definiciones de estilos.

CSS3GEN:http://css3gen.com, página que contiene varios generadores de código, entre ellos un generador específico

para los bordes redondeados, que al igual que con la herramienta anterior, indicando el radio de las esquinas se genera

de forma automática (con prefijos incluidos) el código correspondiente.

Ilustración 23: redondeo elíptico.


50

Ilustración 24: gif imagen de borde

CSS3 Generator: http://css3generator.com/, esta página genera multitud de estilos, para el caso que nos interesa, se

selecciona en la lista despegable “choose Something” (elija algo) el elemento “Border Radius” para acceder a una panta-

lla en donde se define el radio de las esquinas y automáticamente se genera su código correspondiente.

Bordes imaginativos

El CSS3 se pude establecer imágenes a los bordes, la imagen asignada al borde se repite en función de un patrón defini-

do por el diseñador web. Decir que para esta utilidad también hay que utilizar los prefijos correspondientes a los navegado-

res.

Hay que comenzar por crear una imagen que se repite en el borde según un patrón que permita definir los cuatro ángu-

los y los cuatro lados.

Pongamos un ejemplo: diseñamos una imagen en la que se define las cuatro esquinas como círculos y en cada uno de

los lados una estrella orientada según el lado al que corresponda (ver Ilustración

24), esta imagen mide 300 píxeles.

Las etiquetas que permiten establecer este “diseño” como modelo del borde

una caja es border-image que entre los atributos asociados a esta etiqueta

están:

� url(archivoImagen) :es para determinar el archivo que vamos a tomar

como referencia para realizar el borde decorativo

� valores numéricos: se tiene que indicar los valores de la posición de

corte desde cada lado de la imagen hasta donde se desea que llegue cada

elemento de corte para crear los diferentes motivos del borde decorativo,

teniendo en cuenta que de la imagen original para cada elemento del bor-

de decorativo (esquinas y lados de la caja) se construyen a partir de dichos valores de corte, es decir, si deseamos

de la imagen de muestra (cuyo tamaño real es 300x300 píxeles) tomar cada una de los círculos como motivo de las

esquinas del borde tenemos que indicar cuál es la distancia desde los cuatro bordes dividir para construir el motivo

que formará cada parte de los bordes que en este caso sería 100 100 100 100 o como se tratan de todos los valo-

res el mismo de forma simplificada indicarlo sólo un único valor 100 . Estos valores de cortes (cuando se indican los

cuatro) hay que indicarlo en el orden arriba derecha inferior izquierda .

� tipo: el tipo permite definir si se va a redimensionar la imagen o repetir con el fin de ocupar todo el ancho de los

distintos lados de la caja, donde se puede utilizar los siguientes tipos:

� round si deseamos que la imagen se repita redimensionada de modo que aparezca sin cortes.

� stretch: que estira el motivo para que ocupe la longitud del lado.

� Repeat: para repetir el motivo, que a diferencia del modo round puede que aparezca cortado

Veamos un ejemplo, suponemos que tenemos dos archivos ya diseñados, BORDEROJO.jpg y decorativo2.jpg con

los que vamos a establecer dos bordes a unas cajas que las identificaremos con los id decorativo1 y decorativo2 , am-

bos estilos con las propiedades incluidas en dichas cajas (ver Ilustración 25)

Ilustración 25: Modelos de cajas con bordes bassados en imágenes


51

Observar que aun teniendo el mismo grosor de borde, en la definición los limitadores de ambas imágenes se ha utiliza-

do valores diferentes, esto es debido a que la primera de las imágenes tiene un tamaño de 100 píxeles que se distribuye por

igual a cada zona de las que se desea para crear las imágenes de las esquinas y bordes, mientras que la imagen del segundo

borde, como el tamaño de la imagen es mayor hay que utilizar el nº de píxeles apropiado al tamaño de la imagen.

Con la propiedad border-image usamos la sintaxis corta, pero si se desea definir cada propiedad por separado, pode-

mos utilizar las siguientes sintaxis:

� border-image-source: URL(archivo) para definir el archivo fuente de la imagen.

� border-image-slice: determina los valores de corte de la imagen (recordar que si son igulaes con establecer un

valor es necesario, en caso contrario indicar los valores en el orden arriba derecha abajo izquierda)

� border-image-width: grosor del borde

� border-image-outset : distancia del borde de la imagen

� border -image-repeat : tipo de repetición de la imagen de los lados (round, repeat, stretch )

Sombras

La situación actual de este módulo CSS3 se encuentra en candidate Recomendation, es decir está casi terminado y dado

por finalizado, pero le falta tan sólo el visto bueno del W3C, por lo tanto por el momento es aconsejable utilizar los prefijos

de los navegadores.

Crear sombras

La propiedad que permite asignar sombras a las cajas o elementos de HTML5 es la propiedad box-shadow , en donde

tenemos los siguientes atributos para establecer una sombra:

� La distancia de la sombra en el eje horizontal

� Distancia de la sombra en el eje vertical

� Valor de difuminado de la sombra, que en caso de no establecerlo se to-

mará el valor 0.

� Extensión de la sombra, es un valor facultativo (si se omite toma el valor 0)

y sirve para establecer el punto de partida del degradado de la sombra, un

valor 0, no degrada la sombra, positivo alarga la sombra en ese valor para

crear el degradado y un valor negativo comprime la sombra

� Color de la sombra, que podemos indicar el color con el método que se

desee (nombre, rgb, hsl, …)

Ejemplos de sombra en cajas:

A continuación vamos a indicar varios tipos de sombras que se pueden ver en

la imagen de la Ilustración 26, cuyo código HTML es el siguiente:

<div id=”contenedor”> <div class=”cajas” id=”s1”> <h1>Caja 1</h1> </div> <div class=”cajas” id=”s2”> <h1>Caja 2</h1> </div> <div class=”cajas” id=”s3”>

Ilustración 26: sombras en cajas


52

<h1>Caja 3</h1> </div> <div class=”cajas” id=”s4”> <h1>Caja 4</h1> </div> <div class=”cajas” id=”s5”> <h1>Caja 5</h1> </div> <div class=”cajas” id=”s6”> <h1>Caja 6</h1> </div> </div>

Como se puede observar, lo primero que tenemos es una caja <div class=”contenedor”> , cuyo estilo está definido

mediante la clase correspondiente (contenedor ). Esta primera caja contiene a su vez a otras 6 cajas a las que se les ha

aplicado el estilo cajas además de un identificador específico para cada caja(s1, s2,… ). Las clases contenedor y cajas

tienen la siguiente definición:

.contenedor{ border:#009 solid; width:250px; margin-top:20px; padding: 20px; } .cajas{ background:#F90; width:200px; height:100px; margin:0px; margin-left:20px; left:20px; margin-top:30px; padding-top:5px; }

Como se puede ver, la definición de estos estilos es para determinar las características de tamaño y márgenes que se

desea en la caja contenedora de las otra seis, así como las propiedades de color tamaño etc, que tenemos en las otras seis

cajas. Pero además de la clase cajas , las seis cajas tienen un identificador id propio para cada una de ellas, en la que se ha

definido el tipo de sombra.

El código de los distintos identificadores es:

#s1{ margin-top:0px; box-shadow:#7E532C 15px 10px; }

Este identificador aplicado a la primera caja, tiene definida la sombra con un color de gris-marrón, y tan sólo se ha de-

finido el desplazamiento de la misma en el eje horizontal con un valor de 15 píxeles y en el eje vertical 10 píxeles.

A continuación detallamos el código dl segundo de los ID´s, s2 , que tan sólo se diferencia del primero porque se ha

asignado un difuminado igual a 5 píxiles:

#s2{ box-shadow:#7E532C 15px 10px 5px; }

En la tercera caja, cuyo ID es s3 , que además de la difusión se le ha añadido 5píxeles de extensión.

#s3{ box-shadow:#7E532C 15px 10px 5px 5px; }

Sin embargo en el siguiente, la extensión en lugar de añadírsele se le ha reducido en 5 píxeles

#s4{ box-shadow:#7E532C 15px 10px 5px -5px; }


53

Esta caja, no tiene definido ningún desplazamiento, pero el difuminado y la extensión, hacen que la sombra aparezca al-

rededor de la caja, que con el color seleccionado, parece que se ilumina

#s5{ box-shadow: 0px 0px 15px 5px #FFCC00; }

Ya, para finalizar comentar esta última definición de sombra, que a diferencia de las anteriores se desarrolla hacia el in-

terior de la caja, caracterísitca definida con la propiedad inset

#s6{ box-shadow: #FC0 5px 5px 2px 0px inset ; }

Con la definición de este elemento, se puede definir más de un tipo de sombra a la vez, para ello se define cada tipo de

sombra deseado separándolos con comas, por ejemplo la Ilustración 27, en donde

se ha combinado tres sombras, una sombra degradado sin desplazamiento , para

que parezca iluminada, otra similar pero hacia el interior y una tercera desplazada

en ambos ejes de color oscuro, que pertende dar la sensación de estar separada

del fondo. Como se pude observar en el código del siguiente párrafo, cada una de

estas sombras está definida en una sola instrucción box-shadow, pero separadas

una de otra por una coma. Mirar el código siguiente:

#s7{ box-shadow: 0px 0px 15px 5px #FFCC00, #FC0 0 0 15px 5px inset ,15px 15px 10px #8E7740;

}

Los degradados

El módulo CSS3 para las imágenes y los degradados está en la fase de Candidate Recomendation, por lo que es reco-

mendable utilizar la sintaxis que tiene cada navegador

Sintaxis Mozilla Firefox

La propiedad –moz-linear-gradient() es la encargada de realizar degradados líneas. Los argumentos de esta pro-

piedad son:

� El primer argumento es la posición inicial que puede definirse con una palabra clave como valor (top, left,

botton, right ) o un valor en píxeles. Por ejemplo si se indicatop left , el punto de partida es la esquina supe-

rior izquierda. Además se puede indicar un segundo valor facultativo par indicar el ángulo del degradado, que se

puede indicar expresarse en grados (deg ), en gradiantes (grads ) o radianes (rad ).

� El segundo de los argumentos es el color de partida, que puede ir seguido de un valor en % para indicar el punto de

partida del degradado, ese valor será una escala de 0% a 100%.

� El tercer argumento es para indicar el color de llegada del degradado, al que se le puede además indicar un valor de

posición de llegada indicándolo en una escala de 0 a 100%.

La mejor manera de ver este degradado es con un ejemplo (ver Ilustración 28), que tenemos que probar en Mozilla, así

que si se desea que el degradado comience en la esquina superior izquierda con

un ángulo de -23 grados, con un color inicial de tonos azules que ocupe el 20% del

degradado, y tenga un color final de tono amarillo que ocupe el 60% el identifica-

dor que contiene la definición de dicho ID sería:

#degrado1{ position:absolute; top:50px; left:10px; width:300px;

Ilustración 27: sombras combinas

Ilustración 28: degradado Firefox Mozilla


54

height:200px; background:-moz-linear-gradient(top left -23deg, rg b(7,37,175) 20%,rgb(245,230,31) 60%); }

Ahora vamos a hacer un degradado de cuatro colores, cuyo resultado podemos ver en la imagen de la Ilustración 29

que se ha definido de la siguiente manera:

#degrado2{ position:absolute; top:275px; left:10px; width:300px; height:200px; background:-moz-linear-gradient(left, rgb(30,87,153 ), rgb(237,230,40) 33%, rgb(31,186,77) 66%,rgb(239,40, 143) 100%); }

Si se desea definir degradados radiales, para Firefox Mozilla se utiliza la propiedad –moz-radial-gradient en donde

se sigue un mismo principio que en tipo anterior, indican-

do el punto central del degradado , el tipo de de degrada-

do radal (elipse o circle ) y los colores con el porcen-

taje si se desea definir. Como ejemplo tenemos las dos

cajas de la derecha (Ilustración 30) que en la caja de la

izquierda se ha definido un degrado elíptico y en la de la

derecha un degrado circular. En ambos casos se ha esta-

blecido como centro del degradado el centro delas cajas. En el código siguiente viene la definición de ambas cajas, siendo la

de la izuqierda la denominada como degradado4 y la de la derecha la denominada como degradado3

#degrado4{ position:absolute; top:50px; left:10px; width:300px; height:200px; background:-moz-radial-gradient(150px 100px, ellip se, rgb(7,37,175),rgb(245,230,31)); } #degrado3{ position:absolute; top:50px; left:320px; width:300px; height:200px; background:-moz-radial-gradient(150px 100px,circle , rgb(30,87,153), rgb(237,230,40) 33%, rgb(31,186,77) 66%,rgb(239,40,143) 100%); }

Ilustración 29: Degradado 4 colores

Ilustración 30: degradado radial

Desarrollo de Aplicaciones Multiplataforma HTML5 y CSS3 aplicado al texto

55

HTML5 y CSS3 aplicado al texto

Los elementos de texto obsoletos

En la especificación de HTML5 hay determinados elementos que se consideran “obsoletos” es decir, que no se han de-

clarado en la especificación de HTML5. El uso de elementos obsoletos no implica que dichos elementos no sean interpreta-

dos correctamente por los navegadores, ya que como es HTML siempre es compatible con las versiones anteriores.

El uso de elementos obsoletos en una página web no impide que ésta se vea correctamente, pero los motores de vali-

dación la considerarán como “no conforme”

Entre los elementos que podemos destacar como elementos de texto obsoletos tenemos a basefont , font , big , cen-

ter , strike , tt , y u que han sido redefinidos por estilos CSS mucho más eficientes.

Los elementos de texto redefinidos

El HTML5 ha redefinido algunos de los elementos HTML en lugar de declararlos como obsoletos, estos son:

El elemento <b>

El elemento b permitía mostrar en pantalla una palabra en negrita, sin que hubiese una connotación semántica. El ele-

mento strong lo reemplazó rápidamente, aportando una noción semántica y una utilidad para los sintetizadores vocales,

en las páginas conforme a las normas de accesibilidad.

Si tan sólo deseamos marcar como negrita una palabra, podemos utilizar este elemento b, pero si lo que se desea es dar

más importancia, es conveniente utilizar el elemento strong

El elemento <strong>

El elemento strong ha evolucionado ligeramente, si hasta ahora su uso era para indicar un mayor énfasis y para la

síntesis vocal, ahora podemos decir que su utilidad es para indicar una mayor importancia.

El elemento <i>

El elemento i permitía presentar en pantalla una palabra en cursiva, sin que hubiese una connotación semántica. Pero

para mejorar la semántica y accesibilidad es recomendable utilizar el elemento em

El elemento <em>

El elemento em es para indicar que un texto debe leerse con énfasis


56

El elemento <small>

Este elemento se usaba para reducir el tamaño de caracteres de un texto, con HTML5 este elemento small se usa pa-

ra presentar un texto “legal” con letra más pequeña (restricciones, advertencias, copyright,…).

El elemento <cite>

El elemento cite servía para señalar una citación o una referencia a una fuente externa. Ahora, según la definición que

se le ha dado desde W3C, se podrá usar para indicar el título de cualquier “obra creativa” (libro, artículo, ensayo, canción,

película , …), pero no para indicar el nombre de una persona, ya que una persona no es una obra.

El elemento <dl>

En HTML4, el elemento dl permite definir listas de definiciones compuestas por los pares “termino – definición del

término”. En HTML5 su uso se amplía a cualquier lista de asociaciones formada de 0 a varios grupos “nombre – valor”

El elemento <ol>

En HTML4, el atributo start del elemento ol había quedado obsoleto, sin embargo en HTML5 dicho atributo vuelve a

ser un atributo estándar.

Además, con HTML5 aparece un nuevo atributo denominado reversed , que permite invertir el sentido de una lista.

El elemento <hr>

En HTML4 esta etiqueta se había reducido su utilidad a representar una línea horizontal. En HTML5 pasa a ser una cam-

bio de escena, o señalar un cambio de tema en un párrafo…

El elemento <a>

Este elemento se puede considerar la esencia misma de internet, es gracias a este elemento que se puede enlazar dife-

rentes páginas mediante hipervínculos. En HTML5 con este elemento se puede crear “grupos” de vínculos con varios ele-

mento de tipo bloque como por ejemplo:

<a href=”mipagina.html”> <h3>Mis ofertas</h3> <p>Enero</p> <p>Febrero</p> </a>

Recordar que no es posible insertar en un elemento de tipo a otro elemento de tipo a

Nuevos formatos para el texto

El documento de trabajo (Working Draft) del W3C, para el texto (http://www.w3.org/TR/css3-text), propone muchos

nuevos formatos para el texto: gestión de espacios, de los cortes con guiones, de elementos decorativos, … Ahora es el


57

turno de los distintos navegadores que tienen que realizar el esfuerzo de reconocer todas estas nuevas propiedades, en las

que destacan:

Las columnas

Con esta utilidad se puede maquetar un texto en columnas, utilidad que se encuentra en un módulo específico denomi-

nado “CSS Multi-column Layout Module” (http://www.w3.org/TR/css3-multicol/) que se encuentra en fase de Candidate

Recomendation (12 de abril 2011), como ya es de suponer, debido a su condición de Candidate Recomendation, es necesa-

rio utilizar los prefijos de los navegadores, para que sea reconocido por los mismos.

Propiedades de columna

En los elementos de tipo caja podemos establecer que el texto que en ellas se inserte, se vea en columnas, para ello te-

nemos las siguientes propiedades:

column-count: permite indicar el nº de columnas que queremos asignar.

column-width: permite definir el ancho de las columnas

column-gap:esta propiedad permite indicar la separación entre las columnas

columns: es una sintaxis corta de las propiedades column-count y column-width , ya que con esta se puede indicar

tanto el ancho de las columnas como el nº de columnas que se desea. Ejemplo: columns: 150px 3;

column-rule-width: permite indicar el grosor de la línea de separación que se inserta entre las columnas

column-rule-style: permite establecer el tipo o estilo de la línea de separación entre columnas.

column-rule-color: nos permite establecer el color de la línea de separación entre las columnas.

column-rule: permite definir de una forma abreviada una línea de separación entre las columnas, indicando en el

siguiente orden, el grosor, estilo y color de dicha línea.

Las palabras cortadas

Los estilos de CSS· con el texto permite dividir palabras cuando éstas (por ser muy largas) no caben en el contenedor de

las mismas, esta propiedad es la overflow-wrap (antigua (word-wrap ). Si no se usa esta propiedad las palabras demasia-

do largas para caber en un determinado contenedor se “salen del mismo”.

Por ejemplo: vamos a tener una caja de una anchura de 110 píxeles y en la misma tener un texto que una de las pala-

bras que hay “esternocleidomastoideo” es más larga que el ancho contenedor.

Así que tenemos el estilo CSS siguiente:

.peque{ width:110px; border:solid 1px black; padding:3; }

Y el código HTML5 puede ser:

<p class="peque"> Este es un ejemplo de una palabra tan larga que no cabe en el ancho esta-blecido como contenedor, por ejemplo podemos utiliz ar la palabra esternocleidomastoideo, músculo largo-largo.</p>

El resultado visual es el de la imagen de Ilustración 31 (cuadro de la izquierda), y si se desea evitar dicha palabra se salga

del contenedor, el estilo peque tenemos que utilizar la propiedad overflow-wrap , pero de momento, mientras los nave-

gadores no reconozcan el nuevo formato, utilizando su forma antigua word-warp , que puede tomar los valores:


58

� normal : el corte se realiza en aquellos lugares que se haya autorizado la división.

� hyphenate : el corte se realiza en aquellos lugares en los que sea

posible realizar la división con guión.

� break-word : el corte se realiza de forma arbitraria, en función del

ancho del continente, que de momento es el único que los nave-

gadores reconoce. Puede ser interesante utilizarlo en columnas.

Así que el código para el estilo peque lo tenemos que poner:

.peque{ width:110px; border:solid 1px black; padding:3; word-wrap:break-word }

Las fuentes tipográficas

Desde siempre la tipografía ha sido el pariente pobre del diseño Web, ya que nos han limitado a las familias genéricas,

que nos permiten ver una visualización de las mismas casi idéntica en los distintos navegadores. Teníamos:

� la familia sin serifa: arial, helvética, sans-serif.

� La familia con serifa: timer new roman, times, serf

� La familia con ancho fijo: courier new, courier, mono.

Des etas tres listas el navegador utiliza la primera que encuentra instalada en el ordenador del usuario.

Más tarde se diseñaron dos tipografías nuevas denominadas “Verdana” y “Georgia” que además están libres de dere-

chos y se encuentran a disponibles en la mayoría de las plataformas, aun así como se puede ver las posibilidades de elec-

ción son bastantes limitadas.

Importar fuentes tipográficas

Con la llegada de los estilos CSS3 y la regla @font-face , se hce posible la importación de fuentes tipográficas a nues-

tras páginas Web, de modo que las limitaciones iniciales desaparecen. Pero antes de importar nuevas fuentes a las páginas

web, viene bien recordar los siguientes fundamentos:

La mayoría de las fuentes profesionales están sometidas a derechos de uso y difusión.

Cuando se importa una fuente tipográfica se incorpora a los archivos la totalidad de los caracteres de dicha fuente, lob

cual puede sobrecargar en exceso nuestras páginas

El antialiasing (que evita que los caracteres tengan un aspecto dentado) no se aplica a las páginas Web.

Compatibilidad con los navegadores

Como era de esperar, no todos los navegadores son compatibles con todos los formatos de fuentes, así que nos encon-

tramos con que los navegadores reconocen los siguientes tipos de formato:

� TrueType: Extensión .ttf

Ilustración 31: ejemplo de overflow-word


59

� OpenType: extensión .otf

� Web Open Font:extensión .woff

� SVG Font:extensión .svgo y svgz

� Enabled Open Type: con extensión .eot, aten-

ción a este último formato que es propiedad de

Microsoft

En la Tabla 1 sepuede ver la compatibilidad entre estos formatos y las versiones de los navegadores

La regla @font-face

Para declarar un tipo de fuente (font-family ) de una tipografía que deseamos cargar con nuestra Web, tenemos que

proceder de la siguiente manera:

@fon-face{ font-family: “skia”; src:url(‘skia.ttf’); }

Como se puede ver con la propiedad font-family indicamos el nombre de la fuente para usarse en la configuración

de nuestros textos y con la propiedad src se indica la ruta de acceso al archivo correspondiente.

Una vez que tenemos

Declarada la nueva fuente utilizar la propiedad font-family en otras definiciones CSS3, como en el ejemplo siguiente:

h1, h2, h3{ Font-famili:skia; }

El nombre de la tipografía.

Cuando se define en el propiedad font-family de la regla @font-face un nombre de fuente, que puede ser cual-

quiera que pongamos, será el nombre que en el futuro tenemos que usar para hacer referencia a dicha fuente, ejemplo:

@fon-face{ font-family: “pepe”; src:url(‘skia.ttf’); } h1, h2, h3{ Font-famili:pepe; }

Así que el nombre de la fuente es totalmente arbitrario.

Tipografías locales

Con el modo que hemos definido las fuentes tipográficas, hacemos que la fuente se descargue del servidor en el orde-

nador del usuario, pero puede ocurrir que algún usuario ya disponga de dicha fuente en su ordenador, realizando una des-

carga que no sería necesaria. Para evitarlo podemos definir que en caso de estar una determinada fuente en el equipo local

(usuario), no sea necesario descargarla y utilizar la que ya dispone el usuario, es decir tenemos que indicar que se utilice la

fuente disponible en local en lugar de la sr . Siguiendo con el ejemplo anterior sería:

@fon-face{ font-family: “skia”; src: local(“Skia”), url(‘skia.ttf’); }

Safari 5 Opera 11 IE 9 Firefox 6 Crome 14

TTF Sí Sí Sí Sí Sí

OTF Sí Sí Sí Sí

WOFF Sí Sí Sí Sí Sí

SVG Sí Sí Sí Sí

EOT Sí Tabla 1: Compatibilidad de tipos tipográficos y los navegadores


60

El nombre de la tipografía que se indique en local tiene que coincidir con el nombre del archivo del sistema.

Varias fuentes tipográficas

También podemos indicar varias fuentes tipográficas con el fin de mejorar la compatibilidad con los navegadores, por

ejemplo:

@font-face{ font-family: “Skia”; src: url(‘skia.ttf’)format(“truetype”), url(‘skia.woff’)format(“woff”); }

Claro que para navegadores más antiguos podemos indicar otras fuentes con el fin de aumentar la compatibilidad, pon-

gamos como ejemplo la siguiente definición:

h1, h2{ font-family:Skia, Arial, Helvetica, sans-serif; }

Estilos tipográficos

Además, en la definición de la regla @font-face , se puede indicar determinados estilos tipográficos, aunque es fácil

que los navegadores, de momento, no los reconozcan, pero todo llegara. Estos estilos son font-weight , font-style y

font-variant . Sirva como ejemplo el siguiente código

@font-face{ font-family: “miletra”; src: url(‘skia.ttf’); font-weight: bold; }

Generador de fuentes tipográficas

El servicio en línea CSS 3.0 Maker (http://www.css3maker.com/index.html) propone varios generadores CSS3, entre los

que podemos encontrar un generador específico para la regla @font-face.

Herramienta en línea

Tipografías web en línea

Existen diferentes servicios en línea que nos ofrecen la posibilidad de usar tipografías para la web. Entre los muchos que

podemos encontrar, vamos a destacar el servicio de google “Google web fonts”, por ser de los más populares y fácil de

utilizar. La URL de este sitio es http://www.google.com/webfonts

Este servicio dispone de muchísimas tipografías diferentes para poder descargarnos, e incluso nos permite crear víncu-

los Quick-use para usar tipografías de este sitio.

Convertir las tipografías

Otro sitio interesante es el sitio web Font Squirrel (http://fontsquirrel.com/fontface/generator) que permite tomando

como referencia un determinado tipo de fuente generar los otros tipos.


61

Ilustración 32: tamaños en cascada

Seleccionar tipografías

El sitio web Font Combinator permite ver en pantalla la combinación de tres tipos de fuentes tipográficas google, una

de las fuentes será para los títulos, otra los subtítulos y una tercera para el texto normal. Resulta práctico porque nos ayuda

a ver como puede quedar nuestro sitio con determinadas fuentes.

La dirección URL del sitio es: http://font-combinator.com.

Otro sitio tal vez más interesante que el anterior es el Font comparer (http://www.fontcomparer.com/) donde se pue-

de comparar varios tipos de formatos y poder recuperar el vínculo de la tipografía que desee.

El tamaño de las tipografías

El tamaño de las tipografías se puede definir el tamaño de los caracteres:

� Medidas absolutas:cm, mm, in, pt,… esta forma no es recomendable ya que no son conformes a las recomen-

daciones de accesibilidad para los sitios web. Generan problemas de redimensión del texto.

� Medidas relativa: em y %. Este modelo es el que se recomienda, esta forma de unidades relativas se pueden redi-

mensionar sin problemas. Para todos los navegadores los tamaños son relativos al tamaño por defecto de los párra-

fos p: 1em = 100% = 16px.

El problema de la cascada

Las hojas de estilo se aplican en cascada. Esto implica que los tamaños también se aplican en cascada. Veamos cómo

repercute la “cascada” sobre un ejemplo:

Tenemos en la hoja de estilos las siguientes definiciones:

body{ font-size: 1em; } li{ font-size:0.8em; }

Y en esta página sencilla tenemos dos listas imbricadas (resultado enIlustración 32) :

<h1>tamaños en cascada</h1> <ul> <li>Primero</li> <li> <ul> <li>Uno</li> <li>Dos</li> <li>Tres</li> </ul> </li> <li>Segundo</li> <li>Tercero</li> </ul>

El cálculo de los tamaños de los caracteres se realiza de la siguiente manera: El tamaño inicial a nivel de body es de 1em,

lo que determina que el tamaño mostrado y calculado es de 16 píxeles. El h1 se calcula proporcionalmente a 2em, es decir a

32 píxeles. Los elementos li de la primera lista son de 0.8em, lo que implica que su tamaño sea de 16*0.8=12.8 píxeles, así

que se verá a 13 píxeles. Pero en la segunda lista los elementos li se calculan con respecto al elemento que lo contiene así

que su tamaño es 16*0.8*0.8=10.4píxeles, visualizándolos a 10 píxeles.


62

La nueva unidad rem

La nueva unidad rem del CSS3 se calcula a partir del raíz de la página, en función del elemento html . Esta unidad rem

significa root rem. Con esta unidad evitamos los problemas ocasionados con los tamaños en cascada, ya que se puede

hacer siempre relación al tamaño definido al elemento html.

Por ejemplo para evitar el problema anterior de los tamaños reducidos en cascada podemos hacer lo siguiente defini-

ción en la hoja de estilos:

html{ font-size: 1em; } body{ font-size: 0.8rem; } li{ font-size: 0.8rem; }

HTML5ver11

Documents

Transcript of HTML5ver11