Introducción a HTML5 y CSS3

Introducción a
HTML 5 / CSS 3
HTML 5 / CSS 3

INTRODUCCIÓN

HTML 5 / CSS 3

OFFLINE
Offline
Almacenamiento
Conectividad
Acceso a ficheros
WEB ONLINE
Semántica
Audio/Video Permite realizar aplicaciones web offline
3D/Gráficos - application cache - web SQL y BBDD
- localStorage - online/offline events
Presentación
Rendimiento

HTML 5 / CSS 3

ALMACENAMIENTO
Offline
Almacenamiento
Conectividad
Acceso a ficheros Permite que las aplicaciones web guarden
datos en el dispositivo
Semántica
-Web Storage: sessionStorage/localStorage
Audio/Video - Web SQL Database
3D/Gráficos - IndexedDB

Presentación
Rendimiento

HTML 5 / CSS 3

CONECTIVIDAD
Offline
Almacenamiento
Conectividad
Acceso a ficheros Mejora el rendimiento del acceso en tiempo
real entre aplicaciones / dispositivos /
Semántica
servidor
Audio/Video
- Cross Document Messaging
3D/Gráficos -XMLHTTPRequest 2
- Web Sockets
Presentación - Server-Sent Events

Rendimiento

HTML 5 / CSS 3

ACCESO A FICHEROS
Offline
Almacenamiento Permite que las aplicaciones webs puedan
acceder (a)sincronamente a ficheros del
Conectividad dispositivo
Acceso a ficheros - File API
- FileReader API
Semántica
- Filesystem & FileWritter API
Audio/Video - BlobBuilder API
- Blob URLs
3D/Gráficos
Presentación
Rendimiento

File API

FilerReader API

Filesystem & FileWritter API

BlobBuilder API

Blob URLs

HTML 5 / CSS 3

SEMÁNTICA
Offline
Almacenamiento
Conectividad
Acceso a ficheros Permite el uso de nuevas etiquetas / atributos
que determinan la naturaleza del contenido.
Semántica
- Elementos multimedia
Audio/Video - Elementos estructurales
- Atributos semánticos
3D/Gráficos - Nuevos tipos / atributos de campos de formulario
- Sintaxis de Microformatos / microdata
Presentación --Etc
Rendimiento

HTML 5 / CSS 3

AUDIO / VIDEO
Offline
Almacenamiento
Conectividad
Permite no solo incluir contenido multimedia
Acceso a ficheros (audio / video) sino acceder, controlar y mani-
pular determinados aspectos de los mismos
Semántica
Audio/Video
3D/Gráficos
Presentación
Rendimiento

Video

Audio

HTML 5 / CSS 3

3D/GRÁFICOS
Offline
Almacenamiento
Conectividad
Acceso a ficheros
Semántica
Permite crear animaciones y/o efectos visuales
Audio/Video en websites/aplicaciones web sin necesidad
3D/Gráficos de plugins adicionales (por ej: flash)
- 2D Canvas
Presentación - WebGL
- SVG
Rendimiento
- 3D CSS transforms

HTML 5 / CSS 3

PRESENTACIÓN
Offline
Almacenamiento
Permite crear sitios web/aplicaciones vistosas
Conectividad y visualmente enriquecidas que producen
mejores experiencias de usuario.
Acceso a ficheros
- CSS3 3D Transforms
Semántica - CSS3 Transforms
- CSS3 Animation
Audio/Video - CSS3 Transition
- Webfonts
3D/Gráficos
Presentación
Rendimiento

3D transforms

CSS3 Transforms

CSS3 Animation

CSS3 Transitions

HTML 5 / CSS 3

RENDIMIENTO
Offline
Almacenamiento
Conectividad
Acceso a ficheros
Permite crear aplicaciones que rivalizan en
Semántica rendimiento a las aplicaciones nativas, más
Audio/Video responsivas que las aplicaciones tradicionales
- Webworkers (procesos en background)
3D/Gráficos - Almacenamiento local
- Carga asíncrona
Presentación - App caché
- Webfonts
Rendimiento

HTML 5 / CSS 3

HISTORIA DE HTML 5

2004 Apple, Mozilla & Opera no consiguieron crear un estándar HTML4.
En consecuencia forman la Web WHATWG

2005 Se publica el borrador Web Applications 1.0

2007 W3C “adopta” a WHATGW y publica el borrador HTML5

2009 Finalización del borrador

Gracias a Google, Apple y los dispositivos móviles HTML5 surge con fuerza

2012 Primer Release Candidate de HTML5 [previsión W3C]

2020 Finalización de test [previsión W3C]

2022 Creación del estándar HTML5 [previsión W3C]

HTML 5 / CSS 3

ESTADO ACTUAL (MAYO 2012)

www.findmebyip.com/litmus/#html5-web-applications

HTML 5 / CSS 3

BENEFICIOS

HTML5 = Evolución

Mejor manejo de errores

Mayor estandarización

Código más semántico

Más accesible

Soporte multimedia

HTML 5 / CSS 3

BENEFICIOS

Acceso a recursos como webcams o micrófonos

Almacenamiento Local

Webworkers

Geolocalización

Gestión de formularios

Menor dependencia de plugins y Javascript

HTML 5 / CSS 3

NOVEDADES

Etiquetado del documento
DOCTYPE
XHTML 1.0 HTML5

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

HTML 5 / CSS 3

NOVEDADES

META
HTML 4.01 HTML5

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

HTML 5 / CSS 3

NOVEDADES

SCRIPT
HTML 4.01 HTML5

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

<script type=‛text/javascript‛>
<script>
………
</script> ………
</script>

HTML 5 / CSS 3

NOVEDADES

HOJAS DE ESTILO
HTML 4.01 HTML5

<link rel=‛stylesheet‛ type=‛text/css‛ <link rel=‛stylesheet‛
href=‛estilos.css‛>
href=‛estilos.css‛>

HTML 5 / CSS 3

NOVEDADES

ETIQUETA “A”
HTML 4.01 HTML5

<h2> <a href=‛acercaDe.htm‛>
<a href=‛acercaDe.htm‛>Acerca <h2>Acerca de</h2>
de</a>
<p>Conoce quiénes somos</p>
</h2>
</a>
<p>
<a href=‛acercaDe.htm‛>Conoce
quiénes somos</a>
</p>

HTML 5 / CSS 3

NOVEDADES

Nuevas etiquetas de presentación

<div id=“header”> <header>

<div id=“menu”> <nav>

<div> <article>

<div> <aside>
<div> <section>

<div id=“footer”> <footer>

HTML 5 / CSS 3

NUEVAS ETIQUETAS DE PRESENTACIÓN
<header>
<hgroup> <header>
<nav> representa la cabecera de un
documento o sección
<article>
<hgroup>
<aside>
<section>
representa el título de una sección.
Se usa para agrupar conjuntos de
elementos h1-h6 (títulos y
<footer>
subtítulos)

<header>
<hgroup>
<h1>Mi Blog</h1>
<h2>Esforzándome para trabajar menos</h2>
</hgroup>
</header>

HTML 5 / CSS 3

<header>
<hgroup> <nav>
<nav> representa una sección del
documento que contiene navegación
<article>

<aside>
<section>

<nav>
<ul>
<footer> <li><a href="#">home</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">galería</a></li>
<li><a href="#">contacto</a></li>
</ul>
</nav>

HTML 5 / CSS 3

<header>
<hgroup>
<article>
<nav>
representa una pieza de contenido
<article> independiente dentro de un
documento
<aside>
<section>
<section>
representa una sección del
<footer>
documento (un capítulo, un
apartado, etc) agrupa una serie de
contenidos con una temática
común

HTML 5 / CSS 3

<header>
<hgroup> <article>
<hgroup>
<nav> <h1>Título del artículo</h1>
<h2>Subtítulo del artículo</h2>
<article> </hgroup>
<p>Lorem ipsum dolor sit amet, consectetur
<aside> adipiscing elit.</p>
<section>
<section>
<h1>Capítulo 1</h1>
<footer> adipiscing elit. Integer bibendum scelerisque
neque, ac facilisis neque</p>
</section>
<section>
<h1>Capítulo 2</h1>
adipiscing elit. Integer bibendum scelerisque
neque, ac facilisis neque</p>
</section>
</article>

HTML 5 / CSS 3

<header>
<hgroup> <figure>
<nav> representa un diagrama, una
ilustración, una fotografía, etc
<article>

<aside>
<figcaption>
<section>
representa la “nota al pie” del elemento
incluido en <figure>
<footer>

<figure>
<img src=‚javier.jpg" alt=‚Javier González">
<figcaption> Javier González impartiendo seminarios
sobre tecnologías web</figcaption>
</figure>

HTML 5 / CSS 3

<header>
<hgroup>
<aside>
representa contenidos que no están
<nav>
directamente relacionados con el resto
<article> de contenido de la página o que aporta
información adicional
<aside>
<section>

<article>
<footer>
<header><h1>Tecnologías web</h1></header>
<p>bla bla bla</p>
<aside>
<ul>
<li><a href=‚#‛>Links sobre HTML5</a></li>
<li><a href=‚#‛>Links sobre CSS3</a></li>
</ul>
</aside>
</article>

HTML 5 / CSS 3

<header>
<hgroup> <footer>
<nav> representa el pie de una sección o
página. Suele contener información
<article>
sobre el autor, copyright, etc
<aside>
<section>

<footer>
<footer>
<p>© 2012 Bla bla bla bla</p>
</footer>

HTML 5 / CSS 3

CANVAS

Lienzo utilizado para representar imágenes, gráficos, dibujos y/o elementos visuales
“al vuelo” con Javascript

No requiere plugins, ni codecs
<canvas id="miLienzo" width="360"
height="240">
<p>Tu navegador no soporta canvas</p>
Mapa de bits (no hay reescalado) </canvas>
<script>
var lienzo =
El contenido no se añade al DOM document.getElementById(‘miLienzo’)
var context = lienzo.getContext('2d');
</script
Puede ser exportado

• http://www.whatwg.org/specs/web-apps/current-work/#2dcontext

http://code.google.com/p/explorercanvas/

http://billmill.org/static/canvastutorial/index.html

HTML 5 / CSS 3

VIDEO

width & height poster

autoplay controls

loop Autobuffer
preload

source

HTML 5 / CSS 3

VIDEO

<video controls width="360" height="240">
<source src="movie.mp4">
<source src="movie.ogv" type="video/ogg codecs='theora, vorbis'">
<source src="movie.webm" type="video/webm codecs='vp8, vorbis'">
<object type="application/x-shockwave-flash"
width="360" height="240" data="player.swf?file=movie.mp4">
<param name="movie" value="player.swf?file=movie.mp4">
<a href="movie.mp4">Descargar vídeo</a>
</object>
</video>

Ejemplo de video

HTML 5 / CSS 3

AUDIO

autoplay

source

loop

autobuffer

controls

preload

HTML 5 / CSS 3

AUDIO

<audio controls>
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
<object type="application/x-shockwave-flash‚ data="player.swf?soundFile=song.mp3">
<param name="movie" value="player.swf?soundFile=song.mp3">
<a href="song.mp3">Descargar canción</a>
</object>
</audio>

Ejemplo de audio

HTML 5 / CSS 3

FORMULARIOS

search
Email
phone
<input> type url
tel
range (*)
number (*)
min (*) max (*) date
datetime
datetime-local
month
colour
http://www.findmebyip.com/litmus/#html5-forms-inputs

HTML 5 / CSS 3

FORMULARIOS

placeholder autofocus

required
<input> autocomplete
on
off

pattern Expresiones regulares

http://www.findmebyip.com/litmus/#html5-forms-inputs

Ejemplo de formulario

HTML 5 / CSS 3

ELEMENTOS QUE DESAPARECEN

ETIQUETAS ATRIBUTOS
<acronym> <frameset> abbr codetype scheme
<applet> <isindex> align compact scope
alink compact shape
<basefont> <noframes> archive declare size
axis hspace standby
<big> <s> background link target
<center> <strike> bgcolor longdesc text
border marginheight type
<dir> <tt> cellpadding marginwidth type
cellspacing name valign
<font> <u> char nohref valuetype
<frame> charoff noshade version
charset nowrap vlink
classid profile vspace
clear rev width
REDEFINIDAS codebase rules

<small> <cite>
<b> <i> <a>

HTML 5 / CSS 3

JAVASCRIPT

document.getElementByClassName: acceso a todos los elementos del DOM
que compartan la clase especificada
document.querySelectorAll(selector): acceso a todos los elementos del
DOM con el selector especificado
<script>
var elementos1 = document.querySelectorAll("section div.wrapper");
var elementos2 = document.querySelectorAll("div.content, div.wrapper");
var inputsText = document.querySelectorAll('[type=text]');
</script>

document.querySelector(selector): acceso al primer elemento del DOM con
el selector especificado
<script>
var elemento = document.querySelector("section div.wrapper");
</script>

HTML 5 / CSS 3

DRAG & DROP

draggable (true|false): el elemento puede ser arrastrado hacia otro
elemento

EVENTOS

• dragstart • dragenter • drop
• drag • dragover • dragend
• dragleave

Ejemplo de drag&drop

HTML 5 / CSS 3

ALMACENAMIENTO LOCAL

Cache
VS Bases de datos
Locales

Lógica de la aplicación data generada por el usuario,
e interfaz de usuario o recursos solicitados

HTML 5 / CSS 3


Técnicas de Almacenamiento Offline Previas

Cookies Se fuerza a tener Navegador
Instalado el plugin.

Problemas con Firewalls

Poca información (4 Kb) Se fuerza a usar un
Navegador
Reduce velocidad determinado
Basado en Plugins

HTML 5 / CSS 3


Técnicas de Almacenamiento con HTML5

Diferentes APIs:
Web Storage (Local Storage or DOM Storage)
Web SQL Database
IndexedDB
File Storage

PRINCIPIOS:
Normas estándar para “todos” los navegadores.
Información solo accesible desde el propio navegador.
Interacción de la API y la Base de Datos es asíncrona

HTML 5 / CSS 3


Web Storage

El más compatible. Integridad de los datos.
Estructura clave-valor Race conditions

TIPOS DE DATOS:
localStorage Permanecen hasta que el usuario los borra

sessionStorage Desaparecen al cerrarse el navegador

http://html5demos.com/storage
http://playground.html5rocks.com/#localstorage
http://playground.html5rocks.com/#sessionstorage

HTML 5 / CSS 3


Web SQL Database

Como las DDBB tradicionales.

Estructura relacionada (joins)

Más complejas.

IE y Firefox no son compatibles

http://playground.html5rocks.com/#async_transactions

HTML 5 / CSS 3


IndexedDB

Mezcla entre Web Storage y Web SQL Database

Estructura relacionada (joins)

Transacciones de información.

Pocos navegadores lo soportan, pero está previsto ser
soportado por todos

HTML 5 / CSS 3


FileStorage

Puedes guardar información binaria (como texto), y grandes
cantidades de información.

File Reader soportado solo por Chrome

FileWriter todavía no soportado por nadie

Cuando sea soportado será bueno para almacenar
grandes cantidades de información

HTML 5 / CSS 3


¡LO QUIERO USAR YA!

Por defecto usar WEB STORAGE (+ simple & + compatible )

Ayudarse de librerías como persis.js ó

Protegerse contra la perdida de datos
No guardar información privada
Los usuarios pueden borrar los datos fácilmente
Sincronizarse con el servidor frecuentemente

Securizar los datos
Alto riesgo en navegadores compartidos
SessionStorage mejor que LocalStorage
Encriptar información
Evitar guardar cierto tipo de datos

HTML 5 / CSS 3

WebSockets

Permite la comunicación bidireccional con cualquier servidor mediante
un determinado protocolo de red.

La conexión con el servidor se establece de forma asíncrona, en segundo
plano, y la gestión del todo su ciclo de vida se realiza a través de callbacks
que reciben eventos
<script>
var ws = new WebSocket("ws://echo.websocket.org");
</script>

Debemos utilizar "ws://" para establecer conexiones con el protocolo
websocket.

El constructor admite además un parámetro adicional para que indicar un
conjunto de subprotocolos, pero aún está sin definir.
la URL del código de ejemplo es válida muy útil para pruebas, es un sencillo servidor websocket
que actúa como eco (reenvía al cliente lo mismo que recibe).

HTML 5 / CSS 3

WebSockets
EVENTOS FUNCIONES
<script> <script>
ws.onopen = function(event){ ws.send("ping");
//Conexión abierta //mandar mensaje al servidor
} ws.close();
ws.onmessage = function(event){ // cerrar la conexión
//Mensaje recibido en event.data;
} </script>
ws.onclose = function(event){
//Conexión cerrada
}
ws.onerror = function(event){ ATRIBUTOS
//Error en la conexión -url (string con la dirección)
} - protocol (string con el protocolo)
</script> - readyState
-Conectando (0)
-Abierto (1)
-Cerrando (2)
- Cerrado (3)
-bufferedAmount (nº de bytes pendientes de enviar al server)

http://net.tutsplus.com/tutorials/javascript-ajax/start-using-html5-websockets-today

HTML 5 / CSS 3

WEB WORKERS

Tareas JavaScript que pueden lanzarse en segundo plano, a modo de threads.

Su objetivo es permitir que las aplicaciones web puedan lanzar hilos de ejecución
concurrentes con una gran carga de trabajo y duración indeterminada.

Las tareas funcionan al margen del proceso normal de gestión de eventos de los
controles de la interface de usuario, evitando bloquear la página durante su
ejecución.

<script>
var worker = new Worker("worker.js");
</script>

<button type="button" onclick="worker.terminate();"> Kill</button>

HTML 5 / CSS 3

WEB WORKERS

Pueden procesar eventos, callbacks, e incluso es posible crear otros workers.

Limitación: no tienen un contexto de navegación asociado.

No pueden acceder al DOM, window, document o parent, Pero sí a navigator, location,
XMLHttpRequest, timers, applicationCache o Web SQL database.

Permiten la posibilidad de ejecutar el código de otros scripts

<script>
importScripts("script1.js"); //De uno en uno...
importScripts("script2.js");
importScripts("script3.js", "script4.js"); //.. o varios a la vez
</script>

HTML 5 / CSS 3

WEB WORKERS

Permite comunicar el hilo padre principal con el worker hijo.

La comunicación se realiza a través de "postMessage", y el manejador "onmessage".

Una comunicación básica entre padre e hijo tendría cuatro pasos:
1) El hilo padre manda un mensaje (evento) al worker: 3) El worker termina su proceso y envía un mensaje (evento) al padre:

<script> <script>
worker.postMessage("Información self.postMessage("Información para
para el worker"); el padre");
</script> </script>

2) El worker recibe el mensaje en el atributo "data" del evento 4) El padre recibe el mensaje en el atributo "data" del evento

<script> <script>
self.onmessage = function(event){ worker.onmessage = function(event){
//Recibe "Información para el worker" //Recibe "Info para el padre" en event.data
en event.data };
}; </script>
</script>

HTML 5 / CSS 3

CSS 3

HTML 5 CSS 3

estructura presentación

HTML 5 / CSS 3

HISTORIA DE CSS 3

1996 CSS 1: permite dar estilos independientemente del navegador y del HTML

1998 CSS2: nuevas funcionalidades, pero implementación lenta

Semilla del CSS3.

Se plantea una lista de mejoras de CSS2

2000 Borrador de CSS3

2002 CSS2.1: Crea lo que ahora consideramos el estándar

2005 Empieza el desarrollo de CSS3

2009 Implementación en algunos navegadores de algunas partes de CSS3

HTML 5 / CSS 3

CSS 3 VS CSS 2
Mejora en los selectores

Nuevos estilos
Sombra
Opacidad
esquinas redondeadas
…

Mejora en tipografías

Transformaciones

Reduce la cantidad de HTML (divitis)

Reduce las peticiones de imágenes

¡Nuestra pagina va a ser más rápida!

HTML 5 / CSS 3

NOVEDADES DE CSS 3

• Bordes
• Fondos
• Color
• Text effects
• Layout multicolumna
• Transiciones
• Animaciones
• Selectores
• Media Queries

HTML 5 / CSS 3

NOVEDADES DE CSS 3

BORDES
border-radius border-color
border-radius: 15px; border: 5px solid #000;
border-colors:#e00 #c30 #c50 #c60 #c70

border-image box-shadow / text-shadow
border-image: url(border.png) box-shadow: 10px 10px 5px #888;
27 27 27 27 round round;

http://www.webdesignerwall.com/demo/css3-dropdown-menu/

HTML 5 / CSS 3

NOVEDADES DE CSS 3

MULTIPLE BACKGROUNDS
background:
url(../topImage.jpg) top left no-repeat,
url(../centerImage.jpg) top right repeat-y,
url(../bottomImage.jpg) bottom center no-repeat;

top image

center image

bottom image

http://www.css3.info/wp-content/uploads/2007/09/multiple-backgrounds-example.html

HTML 5 / CSS 3

NOVEDADES DE CSS 3

TRANSFORM
• rotate : • skew :
transform: rotate(30deg); transform: skew(-30deg);

http://www.ejhansel.com/transform/

• scale : • translate
transform: scale(0.5,2.0); transform: translate(30px,10px);

http://www.the-art-of-web.com/css/css-animation/

HTML 5 / CSS 3

NOVEDADES DE CSS 3

COLOR

• Opacity • HSL:
(Hue, Saturation, Lightness)

Opacity: 1.0 Opacity: 0.5 hsl(21,97%,52%)

• RGBA: • HSLA:
(Red, Green, Blue, Alpha) (Hue, Saturation, Lightness, Alpha)

rgb(255,192,0,1); rgb(255,192,0,0.5); hsla(21,97%,52%,1); hsla(21,97%,52%,0.5);

HTML 5 / CSS 3

NOVEDADES DE CSS 3

MULTI-COLUMN LAYOUT

• column-count

• column-width

• column-gap

• column-rule

HTML 5 / CSS 3

NOVEDADES DE CSS 3

WEBFONTS
@font-face {
WebFonts font-family: ‘FontName';
src: url('Gondola_SD-webfont.eot');
src: local(' '), url(' FontName.woff')
format('woff'), url(' FontName.ttf')
format('truetype'),
url(' FontName.svg#webfontsgM4b18D')
format('svg');
font-weight: normal;
font-style: normal;
}

div {
font-family: FontName;
}

http://www.fontsquirrel.com/fontface/generator

HTML 5 / CSS 3

NOVEDADES DE CSS 3

TEXTOS

Text-shadow
Text-shadow: Xpos Ypos Blur Color;

ejemplo de sombra Word-wrap
word-wrap: break-word;
http://lab.simurai.com/flashlight

This paragraph has long words
thisisaveryverylongwordthatisntreall
yoneword and again a
Text-overflow longwordwithnospacesinit

Text-overflow: ellipsis-word;

Lorem ipsum dolor sit…

HTML 5 / CSS 3

NOVEDADES DE CSS 3

NUEVAS PSEUDO-CLASES

• :enabled

• :disabled

• :checked

HTML 5 / CSS 3

NOVEDADES DE CSS 3

SELECTORES DE ATRIBUTOS

[att*=val] [att^=val] [att$=val]
contiene val empieza por val termina por val

<a href=“http://web.com/home.html”>
a[href^=“http://web”]
<a href=“http://web.com/img.jpg”>

<a href=“http://web.com/img.gif”>

a[href*=“.es”] <a href=“http://site.com/file.pdf”>

<a href=“http://site.es/home/index.pdf”>

a[href$=“.pdf”] <a href=“http://site.es/about.html”>

<a href=“http://site.com/home.html”>

HTML 5 / CSS 3

NOVEDADES DE CSS 3

MEDIA QUERIES

min-width & max-width
diferentes estilos según el tamaño de la pantalla

http://mediaqueri.es/

HTML 5 / CSS 3

ESTADO ACTUAL DE CSS 3

http://www.w3.org/Style/CSS/current-work#table
http://www.findmebyip.com/litmus/#target-selector

HTML 5 / CSS 3

ESTADO ACTUAL DE CSS 3

-o-border-radius: 10px; -webkit-border-radius: 10px;

-ms-border-radius: 10px; -moz-border-radius: 10px;

¡podemos usar CSS3 desde hoy!

Aumentamos y ensuciamos el código

No todos los navegadores lo soportan

Posibles soluciones
eccstender.org
less.js
Ficheros .css para cada navegador
css3generator.com

HTML 5 / CSS 3

Introducción a HTML5 y CSS3

Recomendados

Más contenido relacionado

La actualidad más candente (20)

Destacado (20)

Similar a Introducción a HTML5 y CSS3 (20)

Más de Paradigma Digital (20)

Introducción a HTML5 y CSS3