Las Ventajas de usar HTML5 Y CSS3

Las Ventajas de
usar HTML5 y CSS3

Gerson Perez Aguilar
▪ Estudiante de Ing.Sistemas
▪ Diseñador & Desarrollador Web -
Frontend
▪ gperezdesign@gmail.com
▪ @GersonDesignUX

MULTIMEDIA
Permite no solo incluir contenido
multimedia (audio / video) sino
acceder, controlar y manipular
determinados aspectos de los
mismos
https://www.youtube.com/html5?hl=es-419

GRAPHICS & 3D
Permite crear animaciones y/o efectos
visuales en websites/aplicaciones web
sin necesidad de plugins adicionales
(por ej: flash)
- 2D Canvas
- WebGL
- SVG
- 3D CSS transforms
http://pablotheflamingo.com/

CONNECTIVITY
Mejora el rendimiento del acceso en
tiempo real entre aplicaciones /
dispositivos / servidor.
- Cross Document Messaging
-XMLHTTPRequest 2
-Web Sockets
- Server-Sent Events

OFFLINE &
STORAGE
Permite realizar aplicaciones web
offline y que se guarden datos en el
dispositivo.
- Application cache
- Online/offline events
-Web Storage: sessionStorage
/localStorage
-Web SQL Database
- IndexedDB

PERFORMANCE
Permite crear aplicaciones que rivalizan
en rendimiento a las aplicaciones
nativas, más responsivas que las
aplicaciones tradicionales.
-Webworkers (procesos en background)
- Almacenamiento local
- Carga asíncrona
- App caché
-Webfonts

Device Access
Es capacidad de acceder al hardware
de un dispositivo
- Geolocalización
- Eventos Touch
- Acelerometros
http://html5demos.com/geo
http://goo.gl/5D7DGF

CSS3
Permite crear sitios web/aplicaciones
vistosas y visualmente enriquecidas
que producen mejores experiencias de
usuario.
- Border-Radius
- CSS3 3D Transforms
- CSS3 Transforms
- CSS3 Animation
- CSS3 Transition
- Webfonts
- Etc..

SEMÁNTICA
Permite el uso de nuevas etiquetas /
atributos que determinan la naturaleza
del contenido.
- Elementos multimedia
- Elementos estructurales
- Atributos semánticos
- Nuevos tipos / atributos de campos
de formulario
-Etc

¿Cómo esta estructurado
una página web?

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
html1-strict.dtd">
<!DOCTYPE html>

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

SCRIPT
<script type=”text/javascript”
src=”file.js”> </script>
<script type=”text/javascript”>
………
</script>
HTML 4.01 HTML5
<script src=”file.js”></script>
<script>
………
</script>

HOJAS DE ESTILO
HTML 4.01 HTML5
<link rel=”stylesheet” type=”text/css”
href=”estilos.css”>
<link rel=”stylesheet”
href=”estilos.css”>

ETIQUETA “A”
<h2>
<a href=”acercaDe.htm”>Acerca
de</a>
</h2>
<p>
<a href=”acercaDe.htm”>Conoce
quiénes somos</a>
</p>
HTML 4.01 HTML5
<a href=”acercaDe.htm”>
<h2>Acerca de</h2>
<p>Conoce quiénes somos</p>
</a>

HTML5 y CSS3
HTML 5 CSS 3
Estructura Estilos

border-radius
border-image
border-image: url(border.png)
Novedades
27 27 27 27 round round;
border-color
box-shadow / text-shadow
box-shadow: 10px 10px 5px #888;
border-radius: 15px;
BORDES
border: 5px solid #000;
border-colors:#e00 #c30 #c50 #c60 #c70

• rotate :
transform: rotate(30deg);
Novedades
• skew :
transform: skew(-30deg);
• translate
transform: translate(30px,10px);
http://www.ejhansel.com/transform/
• scale :
transform: scale(0.5,2.0);
TRANSFORM
http://www.the-art-of-web.com/css/css-animation/

Novedades
• Opacity
COLOR
Opacity: 1.0 Opacity: 0.5
• RGBA:
(Red, Green, Blue, Alpha)
rgb(255,192,0,1); rgb(255,192,0,0.5);

Novedades
WEBFONTS
@font-face {
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

Novedades
Text-shadow
Text-shadow: Xpos Ypos Blur Color;
ejemplo de sombra
TEXTOS
Y
X

Novedades
MEDIA QUERIES
min-width & max-width
diferentes estilos según el tamaño de la pantalla
http://mediaqueri.es/

Ventajas de usar HTML5 y CSS3
- Es más semántico, con etiquetas que permiten clasificar
y ordenar en distintos niveles y estructuras el contenido.
Además, incorpora metadatos de manera más formal,
favoreciendo el posicionamiento SEO y la accesibilidad.
- El código es más simple lo que permite hacer páginas
más ligeras que se cargan más rápidamente favoreciendo
la usabilidad y la indexación en buscadores.
- Ofrece una compatibilidad mayor con los navegadores
de dispositivos móviles.
- Incluye la etiqueta de dibujo canvas, que ofrece más
efectos visuales.

Ventajas de usar HTML5 y CSS3
- Permite la geolocalización del usuario. Algo muy útil para
el marketing móvil.
- Dispone de nuevas capacidades CSS3 como posibilidad
de usar cualquier fuente o tipografía en HTML, columnas
de texto, opacidad, transparencia, canales alpha,
contraste, saturación, brillo, animaciones de transición y
transformación, bordes redondeados, gradientes,
sombras, etc.
- Permite realizar diseños adaptables a distintos
dispositivos (web, tablets, móviles…)

Es fácil!!!
No te le tengas
miedo al código.

Las Ventajas de usar HTML5 Y CSS3

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (20)

Similar a Las Ventajas de usar HTML5 Y CSS3

Similar a Las Ventajas de usar HTML5 Y CSS3 (20)

Último

Último (11)

Las Ventajas de usar HTML5 Y CSS3