Elementos de html5 y css3

CURSO DE POSGRADO
PROGRAMACIÓN WEB AVANZADA
ELEMENTOS DE HTML5 Y CSS 3
Prof. Asistente. Deivis Ricardo Álvarez Mendoza
Departamento de Programación e Ingeniería de
Software
Facultad 2

XHTML
es el lenguaje de marcado pensado para sustituir a HTML
como estándar para las páginas web. En su versión 1.0,
XHTML es
solamente la versión XML de HTML, por lo que tiene,
básicamente, las mismas funcionalidades, pero cumple las
especificaciones, más estrictas, de XML.
•XHTML Transitional
•XHTML Strict
•XHTML Frameset

Reglas de XHTML
• Poner siempre comillas alrededor de los valores
de atributos.
ej. <img src= mi_imagen.jpg />
• Anidar los elementos correctamente.
<b>Esto es un <strong>texto</strong>negrita</b>
• Se aleja de elementos de formato, incorrecto:
<body bgcolor=“#000”> … </body>
correcto: Utilizar CSS

Reglas de XHTML
• Hace distinción entre mayúsculas y minúsculas,
incorrecto: <P>Texto</p>
correcto: <p>Texto</p>
• Se acerca al uso de hojas de estilo para
organizar la visualización de las páginas.
• Las letras de la etiqueta deben estar siempre en
minúsculas.

XHTML (81 + 10 (obsoletas) = 91)
a, abbr, acronym, address, area, b, base, bdo, big,
blockquote, body, br, button, caption, cite, code,
col, colgroup, dd, del, dfn, div, dl, dt, em, fieldset,
form, frame, frameset, h1, h2, h3, h4, h5, h6,
head, hr, html, i, iframe, img, input, ins, kbd, label,
legend, li, link, map, meta, noframes, noscript,
object, ol, optgroup, option, p, param, pre, q,
samp, script, select, small, span, strong, style, sub,
sup, table, tbody, td, textarea, tfoot, th, thead, title,
tr, tt, ul, var.

XHTML Elementos
Elementos en línea
a, abbr, acronym, b, bdo, big, br, cite, code, dfn,
em, i, img, input, kbd, label, q, samp, select, small,
span, strong, sub, sup, textarea, tt, var
Elementos en bloque
address, blockquote, div, dl, fieldset, form, h1, h2,
h3, h4, h5, h6, hr, noframes, noscript, ol, p, pre,
table, ul. dd, dt, frameset, li, tbody, td, tfoot, th,
thead, tr

Más sobre XHTML
Eguíluz Pérez Javier, Introducción a XHTML,
Capítulos 1, 2, 10, propuesto como bibliografía
básica, disponible en el curso de la asignatura

HTML5
HTML5 (HyperText Markup Language, versión 5) es la
quinta revisión del lenguaje de programación “básico” de la
World Wide Web, el HTML. Esta nueva versión pretende
remplazar al actual (X)HTML, corrigiendo problemas con
los que los desarrolladores web se encuentran, así como
rediseñar el código actualizándolo a nuevas necesidades
que demanda la web de hoy en día.
http://www.w3.org/TR/html5/

HTML 5
This document was published by the HTML Working Group
as an updated revision to the Candidate Recommendation
(http://www.w3.org/TR/2012/CR-html5-20121217/). This
document is intended to become a W3C Recommendation.
W3C publishes a Candidate Recommendation to indicate
that the document is believed to be stable and to
encourage implementation by the developer community.
This Candidate Recommendation is expected to advance
to Proposed Recommendation no earlier than 01
September 2014. All feedback is welcome.

Novedades de HTML5
• Nuevo Doctype.
• Elementos <script> y <link> mas simples
• Mejor estructura.
• Mejores formularios. Validación nativa y nuevos campos.
• Placeholder en formularios y autofocus
• Contenido editable en formularios
• Etiquetas de vídeo y audio
• Canvas
• Apis para la geolocalización.
• Bases de datos locales

Elementos <script> y <link> mas
simples
XHTML
HTML5
Para el caso de JavaScript, una buena práctica es incluirlo
antes del </body>.

HTML 5. Mejor estructura.
Elementos más semánticos
• header XHTML HTML5
• nav
• content
• sidebar
• footer
• section
• article
• figure

HTML 5. Mejor estructura.
Elementos más semánticos
Nota: estos elementos no
son soportados nativamente
en navegadores antiguos
como IE 6, 7 y 8, para hacer
que sean compatibles se
puede usar HTML5 Shiv, un
minúsculo archivo JS que se
encarga de ‘crear’ estos
elementos que no existen en
navegadores antiguos:

Mejores formularios. Validación
nativa y nuevos campos
Mejora en gran medida los formularios ya que agrega
nuevos tipos de campos, nuevos atributos, y validación
nativa
Nuevos campos
Validación nativa
Autofocus
Texto en el campo

Mejores formularios. Validación
nativa y nuevos campos
JavaScript también incorporará nuevos métodos para
facilitar la actuación de validación de los datos. Aún no es
nada seguro, pero apunta a una herramienta muy útil.
Ahora tendremos el objeto element.validity, que nos da
información referente a la validación del elemento.

Contenido editable
Cualquier contenido puede ser ahora editable, vemos el
ejemplo de un párrafo, pero es también aplicable a títulos o
listas, por ejemplo

Etiquetas de video y audio. i Adiós
flash!
• En HTML5 encontramos estandarizado el uso de audio y
vídeo, con 2 nuevas etiquetas.

Etiquetas de video y audio.
Compatibilidad
http://accesibilidadenlaweb.blogspot.com/2013/05/videos-basados-en-html5-
compatibles-con.html

Formatos soportados
http://accesibilidadenlaweb.blogspot.com/2013/05/videos-basados-en-html5-
compatibles-con.html

Canvas
Canvas, es sin duda alguna uno de los elementos más
interesantes que introduce HTML5, el canvas es un plano
vacío en el cual se puede dibujar gráficos con la ayuda de
Javascript:

¿CSS?
• CSS es un lenguaje para escribir estilos,
• Controlar la presentación de los documentos electrónicos
definidos con HTML y XHTML.
• Es la mejor forma de separar los contenidos y su
presentación,
• imprescindible para la creación de páginas web
complejas.

Evolución histórica
• W3C propuso la creación de un lenguaje de hojas de
estilos específico para el lenguaje HTML.
• Se presentaron en total 9 propuestas
• Las dos propuestas que se tuvieron en cuenta fueron la
CHSS (Cascading HTML Style Sheets) y la SSP (Stream-
based Style Sheet Proposal) en 1994 y 1995.

Evolución histórica
• CHSS (Lo mejor) + SSP (Lo mejor )= CSS
• A Finales 1996 Se publica CSS Nivel 1
• Mayo de 1998 Se publica CSS Nivel 2 (la última
actualización fue en 2009, revisión 2.1)
• CSS Nivel 3, está en desarrollo, solamente se tienen
borradores aunque ya muchos navegadores lo
incorporan, Firefox, IE 7+, Chrome.

Funcionamiento
El funcionamiento de CSS sobre un documento XHTML o
HTML es mediante reglas de estilos definidas dentro del
documento o en una archivo externo. Como lo muestra el
siguiente ejemplo.

Una regla de estilo se compone

Una regla de estilo se compone
Regla: cada uno de los estilos que componen una hoja de
estilos CSS. Cada regla está compuesta de una parte de
“selectores”, un símbolo de “llave de apertura” ({), otra
parte denominada “declaraciones” y por último, un símbolo
de “llave de cierre” (}).
Selector: indica el elemento o elementos HTML a los que
se aplica la regla CSS.
Declaración: la declaración especifica los estilos que se
aplicarán a los elementos. Está compuesta por una o más
propiedades CSS.

¿Cómo incluir CSS en un documento?
Incluir CSS en el mismo documento HTML mediante las
etiquetas <style type=“text/css”> … </style>, la misma
según el W3C debe estar definida en la cabecera del
documento
Definir CSS en un archivo externo, se puede realizar a
través de la etiqueta <link> o utilizando el elemento
@import url (archivo.css) a contenido dentro de la etiqueta
<style>
Incluir CSS en los elementos HTML, se utiliza mediante
el atributo style dentro de un elemento HTML. Esta es la
variante menos aconsejada debido a que en caso de
modificación del aspecto visual es engorroso.

Selectores
Los selectores se clasifican en básicos y avanzados.
Selectores básicos
•Universal: se especifica mediante el * y se aplica a todos
los elementos html del documento. Ej. * {margin:0}
•Tipo o Etiqueta: Se especifica la etiqueta HTML. Ej.
p {color:red} div{font-family:verdana}
•Clase: Se especifica mediante el .nombre_clase. Ej.
.clase1 {font-weight:bold} y se combina con el
atributo class del elemento HTML. Ej. <p
class=“clase1”></p>

Selectores
Los selectores se clasifican en básicos y avanzados.
Selectores básicos
•ID: Se especifica mediante el #nombre_id. Ej. #seccion1
{font-weight:bold} y se combina con el atributo class
del elemento HTML. Ej. <p id=“seccion1”></p>
•Selector descendente: Permite seleccionar los elementos
que se encuentran dentro de otros elementos
p span { font-weight: bold; }

Más sobre selectores
Otros selectores son los selectores avanzados:
•Adyacente
•Hijo directo
•Atributo
Consultar libro de texto
Eguíluz, Pérez, Javier (2008). Introducción a CSS. Capítulo
2, pp 31 – 43, disponible en bibliografía básica del curso o
en http://www.librosweb.es

Modelo de caja
El “box model” es la característica más importante del
lenguaje de hojas de estilos CSS, ya que condiciona el
diseño de todas las páginas web y todos los documentos
HTML. Todos los elementos que forman un documento
HTML se representan mediante cajas rectangulares, cuyas
propiedades define CSS y cuya representación visual
controla también CSS.

Más sobre CSS
• Eguíluz, Pérez, Javier (2008). Introducción a CSS.
Capítulo 4, pp 54 – 84, disponible en bibliografía básica
del curso o en http://www.librosweb.es
• W3C. Guía rápida de CSS, disponible en la bibliografía
básica del curso.
• Dan, Cederholm (2010). CSS3 FOR WEB DESIGNERS.
ISBN 978-0-9844425-2-2. Disponible en la bibliografía
complementaria del curso

CSS3. Novedades
• Selectores más específicos. Nuevas pseudo-clases y
pseudo-elementos.
• Bordes redondeados.
• Sombra a los texto y elementos.
• Múltiples imágenes de fondo.
• Transformaciones, animaciones y
Transiciones.
• Web Font.
• Degradado.

Prefijos son motor del render
Prefijo según el motor del navegador

Selectores más específicos
La CSS 3 incluye todos los selectores de CSS 2.1 y añade
otras decenas de selectores, pseudo-clases y pseudo-
elementos. La lista provisional de novedades y su
explicación detallada se puede encontrar en el módulo de
selectores de CSS 3 (http://www.w3.org/TR/css3-selectors)
En primer lugar, CSS 3 añade tres nuevos selectores de
atributos (siguiente diapositiva)

1. elemento[atributo^="valor"], selecciona todos los
elementos que disponen de ese atributo y cuyo valor
comienza exactamente por la cadena de texto indicada.
2. elemento[atributo$="valor"], selecciona todos los
termina exactamente por la cadena de texto indicada.
3. elemento[atributo*="valor"], selecciona todos los
contiene la cadena de texto indicada.

• elemento[atributo^="valor"], selecciona todos los elementos que
disponen de ese atributo y cuyo valor comienza exactamente por la
cadena de texto indicada.
a[href^="mailto:"] { ... }
• elemento[atributo$="valor"], selecciona todos los elementos que
disponen de ese atributo y cuyo valor termina exactamente por la
cadena de texto indicada.
a[href$=".html"] { ...
• elemento[atributo*="valor"], selecciona todos los elementos que
disponen de ese atributo y cuyo valor contiene la cadena de texto
indicada.
h1[title*="capítulo"] { ... }

Otro de los nuevos selectores de CSS 3 es el "selector
general de elementos hermanos", que generaliza el
selector adyacente de CSS 2.1. Su sintaxis es
elemento1 ~ elemento2 y selecciona el elemento2 que es
hermano de elemento1 y se encuentra detrás en el código
HTML.

Pseudoelementos
CSS3 mantiene
•:first-line, selecciona la primera línea del texto de un
elemento.
•:first-letter, selecciona la primera letra del texto de un
elemento.
•:before, selecciona la parte anterior al contenido de un
elemento para insertar nuevo contenido generado.
•:after, selecciona la parte posterior al contenido de un
elemento para insertar nuevo contenido generado.
Agrega una nueva
•:selecion, selecciona el texto que ha seleccionado un
usuario con su ratón o teclado.

Pseudoclases
Las mayores novedades de CSS 3 se producen en las
pseudo-clases, ya que se añaden 12 nuevas, entre las
cuales se encuentran:
•elemento:nth-child(numero), selecciona el elemento
indicado pero con la condición de que sea el hijo enésimo
de su padre.
•elemento:nth-last-child(numero), idéntico al anterior
pero el número indicado se empieza a contar desde el
último hijo.
•elemento:first-child y elemento:last-child, seleccionan
los elementos indicados pero con la condición de que sean
respectivamente los primeros o últimos hijos de su
elemento padre.

/* selecciona todos los elementos impares de una lista */
li:nth-child(2n+1) { ... }
/* selecciona todos los elementos pares de una lista */
li:nth-child(2n) { ... }
/* Las siguientes reglas alternan cuatro estilos diferentes
para los párrafos */
p:nth-child(4n+1) { ... }

Bordes redondeados
CSS 3 incluye varias propiedades para definir bordes
redondeados. La propiedad border-radius establece la
misma curvatura en todas las esquinas y también se
definen las propiedades border-top-right-radius, border-
bottom-right-radius, border-bottom-left-radius, border-top-
left-radius para establecer la curvatura de cada esquina.

Sombreado texto y elemento
La versión CSS 3 incluye las propiedades llamada box-
shadow y text-shadow para crear un sombreado al texto y a
los elementos.

Múltiples imágenes de fondo.
CSS3 agrega la posibilidad de aplicar múltiples imágenes
de fondo a un elemento (separado por coma). Los
navegadores que lo soporta son Safari 1.3+, Chrome 2+,
Firefox 3.6+, Opera 10.5+, and IE9 Beta.

Transformaciones
Las propiedades de transform. Todavía no son reglas
estandarizadas al 100% y por tanto en la hoja de estilos se
debe incluir el prefijo de los diferentes propietarios de los
diferentes motores render de navegadores (-webkit,
-moz, -ms, -o).
Incluye transformaciones para:
•rotate (rotar elementos)
•scale (scalar elementos)
•Translate (trasladar elementos)
•skew, transform-origin

Animaciones
Las animaciones CSS3 permiten animar la transición
entre un estilo CSS y otro. Las animaciones constan de
dos componentes: un estilo que describe la animación y un
conjunto de fotogramas que indican su estado inicial y final,
así como posibles puntos intermedios en la misma.
Para crear una secuencia de animación CSS usaremos la
propiedad animation y sus sub-propiedades.

Animaciones
Las subpropiedades de animation son:

Animaciones
Ejemplo
Este ejemplo da estilos al
elemento <h1> para que el
texto se deslice por la
pantalla entrando desde el
borde derecho de la
ventana del navegador.

Animaciones
Librería Magic
is a CSS3 framework with many animations. Is simple to
use and many animations are cross-browser compatible.
Incluir la librería en su página web
Mediante jQuery o simple javascript

Web Font
Una de las mejoras esenciales de CSS3 es la posibilidad
de aplicar al texto una tipografía sin necesidad de que
forme parte de la especificación. O sea la podemos
importar.

Usando Font-Awesome
• Directorio css contiene los archivos, font-awesome.css,
font-awesome.min.css, font-awesome-ie7.min.css
• Directorio font contiene la tipografía para la iconografía,
debe estar al mismo nivel del directorio CSS.
• Docs contiene ejemplos y documentación sobre Font-
Awsome.

Responsive Web Design. Media
Queries
Esta técnica se basa en limitar un conjunto de propiedades
CSS para que sólo tengan efecto en las pantallas con un
ancho mínimo determinado. De este modo podemos tener
nuestra hoja de estilos de siempre, y simplemente le
añadiremos unas clases específicas para cada rango de
tamaños de pantalla (ventana del navegador para ser
exactos). El sustento fundamental de esta técnica son los
media queries

Queries
Pilares del Responsive Web Design son:
•Grid flexibles
•Imágenes flexibles
•Media queries

Queries

Media queries
Desde los días de CSS 2.1, las hojas de estilos han
disfrutado algo así como una conciencia del dispositivo a
través de los media types.
Otras media types
•Braille
•Projection
•Tv
•speech

Media queries
W3C creó las media queries como parte de la
especificación CSS3.
Una media query permite apuntar no sólo a ciertas clases
de dispositivos, sino realmente inspeccionar las
características físicas del dispositivo que está renderizando
el trabajo. Por ejemplo, siguiendo el reciente crecimiento de
WebKit mobile, las media queries se han convertido en una
técnica del lado del cliente popular para entregar una hoja
de estilos a medida para el iPhone, los teléfonos con
Android y sus semejantes.

Media queries
La media query contiene dos componentes:
1.Un media type (screen),
2.La consulta entre paréntesis, conteniendo una
característica a inspeccionar (max-device-width) seguida
por el valor al que apuntamos (480px).

Responsive Web Design
Las grillas fluídas, las imágenes flexibles y las media
queries son los tres ingredientes técnicos para un diseño
web responsivo, pero también se requiere de una forma
diferente de pensar. En lugar de poner en cuarentena el
contenido en diferentes experiencias, específicas para cada
dispositivo, se puede usar las media queries para realzar
progresivamente el trabajo en los diferentes contextos de
vista.

• Soporte para cualquier dispositivo móvil.
• Gran cantidad de componentes.
• Aumento de la comunidad de usuarios.
• Iconografía mediante sprites de de imágenes y facilidad
de integrar con otras como Font-Awsome.
• Formularios bien pensados
• Personalizable
• Sistema de layout fijo y fluido
Versión actual: 3.0, versión estable 2.3.0

Bootstrap
¿cómo incluirlo en tu sitio o aplicación web?

Elementos de html5 y css3

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

Similar a Elementos de html5 y css3

Similar a Elementos de html5 y css3 (20)

Último

Último (13)

Elementos de html5 y css3