1 of 50

HTML 5 y CSS 3

2 of 50

Introducción - HTML5

HTML5 elimina bastante restricciones y limitaciones

Es más ligero al ser más sencillo y simple el código

  • Cargan más rápido en el navegador

Introduce:

  • Contenido Semántico <header>, <footer>, <article>, <section>
  • Elementos multimedia: Video, Audio
  • Elementos gráficos: <svg>, <canvas>

​

Google Search prioriza las páginas hechas en HTML 5.

​

​

3 of 50

Pregunta

​

¿La página escrita en HTML5 va a andar en cualquier navegador?

4 of 50

Probar en mi browser

http://html5test.com/

2013: 468/500

2014: 503/555

2015: 523/555

2016: 526/555

IE8: 138/500

IE9: 320/500

IE11: 336/555

Edge: 453/555

​

​

2014: 449/555

2016: 467/555

2014: 497/555

2016: 525/555

​

5 of 50

Pregunta

​

¿Por qué hacer webs en HTML5 si ningún navegador tiene full support?

​

​

6 of 50

Tráfico Internet - Desktop Vs Mobile

Inversiones en publicidad

Ref: http://www.mobyaffiliates.com/guides/mobile-app-advertising-cpm-rates/

7 of 50

Uso de Internet en Horas/Dispositivos

8 of 50

Uso de Internet y Dispositivos

9 of 50

Tráfico Internet - Desktop Vs Mobile

https://wearesocial.com/blog/2018/01/global-digital-report-2018

10 of 50

¿Por qué hacer webs en HTML5?

Funcionan en múltiples dispositivos (que tengan un browser que soporte HTML5):

  • Desktops
  • Mobiles
  • Tablets

​

Accesibilidad: Como expresa mejor semántica, es mejor para los lectores de pantalla para personas no videntes.

​

Mejor interacción con el browser. Un standard pensado para hoy, no para los 90’s :)/

​

11 of 50

¿Quiénes desarrollan/empujan en HTML5?

  • World Wide Web Consortium (W3C)
  • Google
    • Sitio con experimentos en HTML 5 https://www.chromeexperiments.com
  • Microsoft
    • Exámenes para certificar HTML5
  • Apple
    • Si van a apple.com/html5 los redirige a Safari.
  • IBM
  • etc.

​

12 of 50

¿Qué agrega HTML5?

​

​

Semantics

–Forms

Offline & Storage

–App Cache *

–Local Storage

–Indexed DB

–File API

Device Access

–Geolocation API

Multimedia

–Audio & Video

​

3D, Graphics, Effects

–SVG, Canvas

–WebGL

–CSS3 3D

CSS3

–Web Open Font Format

Connectivity, Performance & Integration

–Web Sockets

–Web Workers

–XMLHttpRequest Level 2

​

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5

13 of 50

HTML 5 Multimedia

14 of 50

Nuevos Tags

  • Tags
    • Video
    • Audio
    • Canvas
    • Article
    • Summary
    • Figure
    • Figcaption
    • Footer
    • Header
    • Y más…

15 of 50

Audio

  • Se define con el tag <audio>
  • Solo necesita el atributo src para indicarle el archivo.
  • Otros atributos son:
    • Autoplay
    • Controls
    • Loop
    • preload

Por defecto no se muestra

Si se pone el atributo autoplay,

empieza a reproducir pero no

se ve.

16 of 50

Audio

  • Para que se vea el reproductor hay que usar el atributo controls.
  • Muestra el default player del browser.

​

<audio src="https://ia601307.us.archive.org/25/items/GustavoCeratiInfinito15/2%20Crimen.ogg" autoplay controls>

Your browser does not support the <code>audio</code> element.

</audio>

​

​

​

​

​

​

Live: http://codepen.io/webUnicen/pen/qZMMLv

17 of 50

Audio

  • Algunos browser soportan diferentes formatos de audio (ogg, mp3, etc)
  • Otros no lo soportan
    • Permitir bajar el clip de audio
  • Se pueden definir múltiples sources usando el tag <source>
  • Dentro de este se usa el atributo src y type

​

<audio controls="controls">

Your browser does not support the <code>audio</code> element.

<source src="https://archive.org/download/GustavoCeratiInfinito15/2%20Crimen.ogg" type="audio/ogg">

<source src="https://archive.org/download/GustavoCeratiInfinito15/2%20Crimen.mp3" type="audio/mp3">

</audio>

​

​

​

​

�

​

​

Live: http://codepen.io/webUnicen/pen/YqOObz

18 of 50

Video

  • Es muy parecido a insertar audio.
  • El tag que lo define es <video>.
  • Los atributos que tiene el elemento <video> son:
    • source
    • autoplay
    • controls
    • loop
    • preload.

​

19 of 50

Video

  • También se pueden tener multiples sources.
  • El video siempre va a aparecer (a diferencia del audio)
  • Pero no se va a poder reproducir a no ser que tenga el atributo autoplay.
  • Se recomienda poner un tamaño al video fijo por medio de CSS.

​

​

20 of 50

Buena Práctica

  • Siempre incluir el atributo controls en los videos.
  • Sin importar si es útil o no permitir a los usuarios reproducir, parar, etc.

​

21 of 50

Video

  • Otro atributo es poster
  • Muestra una imagen antes de que el video sea reproducido.

​

​

<audio controls="controls">

Your browser does not support the <code>audio</code> element.

<source src="https://archive.org/download/GustavoCeratiInfinito15/2%20Crimen.ogg" type="audio/ogg">

<source src="https://archive.org/download/GustavoCeratiInfinito15/2%20Crimen.mp3" type="audio/mp3">

</audio>

​

​

​

​

​

​

Live: http://codepen.io/webUnicen/pen/NNLLVj

22 of 50

Video - Multiple sources

Por si el browser no soporta una codificación de un video, podemos usar el tag source para indicar múltiples fuentes.

​

<video width="480" controls poster="https://archive.org/download/3stooges/3stooges_NewApants2.gif" >

<source src="https://archive.org/download/3stooges/3stooges_NewApants2_512kb.mp4" type="video/mp4">

<source src="https://archive.org/download/3stooges/3stooges_NewApants2.ogv" type="video/ogg">

<source src="https://archive.org/download/3stooges/3stooges_NewApants2.avi" type="video/avi">

Your browser doesn't support HTML5 video tag.

</video>

​

​

​

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video

Live: http://codepen.io/webUnicen/pen/yOxxWv

23 of 50

Ejercicio

Ir a archive.org y buscar un:

  • Audio
  • Video

Crear una página que muestre:

  • Audio con autoplay y controles.
  • Video con controles

24 of 50

Incluir una página dentro de otra

25 of 50

La posibilidad de incluir una página dentro de otra es previo a HTML5.

Se utiliza para agregar contenido externo que no está en mi web

​

​

26 of 50

Cómo incluyo un video de YouTube?

  • Ir a un video de Youtube
  • Click en Compartir
  • Click en Embebido

​

Pero qué es ese HTML que nos da YouTube?

27 of 50

IFrame

  • Esto no es HTML5, pero lo explicamos acá :)
  • Se llama IFrame por Inline Frame Element.
  • Nos permite incluir otra página HTML dentro de mi página.
  • Se usa para contenido que en general no es de mi web, pero lo quiero incluir.
  • Videos de YouTube, Mapas de google maps, el clima, etc.

28 of 50

IFrame

  • EL IFrame tiene una propiedad src que apunta a la página que queremos incluir.
  • Ejemplo de YouTube:

​

<iframe width="560" height="315" src="https://www.youtube.com/embed/mzPxo7Y6JyA" frameborder="0" allowfullscreen></iframe>

https://developer.mozilla.org/en/docs/Web/HTML/Element/iframe

​

Live: http://codepen.io/webUnicen/pen/VaGGJZ

29 of 50

Ejercicio

  • Insertar en nuestra página un iframe con un mapa de Google Maps
  • Pasos:
    • Ir a maps.google.com
    • Ver de donde saco el iFrame :-)

30 of 50

Semántica

31 of 50

Próxima clase!

32 of 50

Offline & Storage

33 of 50

Offline & Storage

–App Cache * permite especificar recursos que se mantendran visibles en el browser cuando se pierda conexión y/o refresque la vista.

–Local Storage, (LT)

– IndexedDB, permite almacenar datos de forma persistente desde el browser. Brinda la posibilidad de crear aplicaciones web que pueden trabajar tanto offline como online o sin la necesidad de una conexión persistente.

–File API, permite leer y manipular contenido de archivos

​

https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache

https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB

https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications

​

34 of 50

Device Access

35 of 50

Device Access

–Geolocation API, permite localizar las posición geográfica del usuario.

– Camera API, posibilita controlar la cámara de los dispositivos, sacar fotos y subirla a la web

– Detección de Orientación del Dispositivo, y Eventos Touch para dispositivos Móviles

​

Refs:

https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/Using_geolocation

https://developer.mozilla.org/en-US/docs/Archive/B2G_OS/API/Camera_API/Introduction

https://developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation

https://developer.mozilla.org/en-US/docs/Web/API/Touch_events

https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API

36 of 50

Connectivity, Performance & Integration

37 of 50

Conectividad y Procesamiento

–Web Sockets (LT)

–Web Workers (LT)

–XMLHttpRequest Level 2 (LT)

38 of 50

CSS 3

39 of 50

Introduccion CSS 3

  • CSS3 es el último standard para CSS.
  • Aun así tiene diferencias entre navegadores.
  • Expande la funcionalidad para bordes, efectos de texto imágenes de fondo, colores y degradados, transparencias, fuentes de texto.
  • También incorpora la posibilidad de animar.

​

​

​

​

​

​

http://www.w3schools.com/css/css3_intro.asp

CSS3 multi browser: http://css3generator.com/

​

​

40 of 50

Bordes y Sombras

​

​

​

​

​

HTML

<section>

<h1>Titulo</h1>

</section>

CSS

section {

box-shadow: 10px 10px 5px gray;

border: 2px solid blue;

border-radius: 25px;

width: 200px;

padding: 20px; }

h1 {

text-shadow: 2px 2px red; }

Live: http://codepen.io/webUnicen/pen/jqvvXw

41 of 50

Transparencias y Gradientes

Se puede agregar transparencia / opacidad a colores de fondo o imágenes.

El color en RGB y el último valor para la transparencia

​

​

​

​

También se pueden establecer gradientes de color.

http://www.w3schools.com/css/css_image_transparency.asp

http://www.w3schools.com/css/css3_gradients.asp

​

div {

padding: 20px;

color: #FFFFFF;

background: rgba(200, 54, 54, 0.5); }

.gradiente {

background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);

}

Live: http://codepen.io/webUnicen/pen/jqvvjG

42 of 50

Ejercicio

  • Crear un div que:
    • Tenga borde redondeado
    • Sombra en el borde
    • Y gradiente de Rojo a Blanco
    • Dentro tiene que estar el video que insertamos

43 of 50

Animaciones

Con CSS3 se pueden aplicar animaciones a distintas propiedades de CSS.

Cada animación se define con @keyframes, estableciendo la evolución y cambios en la propiedades.

Luego dentro de la clase que se quiere animar, se define la animación aplicada y las propiedades de la misma.

​

​

​

​

​

​

​

Animación “pulse”, con propiedades, de duración 5s y repetición infinita aplicada sobre .element

Evolución de la animación, y propiedades que se cambian en cada paso

​

Más Ejemplos: http://www.minimamente.com/example/magic_animations/

http://www.justinaguilar.com/animations/

Live: http://codepen.io/webUnicen/pen/jqvWvL

Live: http://codepen.io/webUnicen/pen/QNVyOp

.element {

animation: pulse 5s infinite;

}

@keyframes pulse {

0% {

background-color: #001F3F;

}

100% {

background-color: #FF4136;

}

}

44 of 50

3D, Graphics, Effects

45 of 50

–SVG, Canvas, manejo de gráficos vectoriales y herramienta de dibujo (LT)

​

–WebGL, es una API de JS multiplataforma para crear gráficos 3D en un navegador web, está basada en la conocida biblioteca de gráficos OpenGL

​

–CSS3 3D, permite aplicar estilos y transformaciones en tres dimensiones

​

WebGL

https://www.creativebloq.com/3d/30-amazing-examples-webgl-action-6142954

CSS3 3D

https://www.creativebloq.com/css3/20-stunning-examples-css-3d-transforms-11112759

​

​

46 of 50

Próximamente...

No desesperen,

​

​

​

​

​

​

Esto lo ven en

Interfaces de usuario e Interacción

(2° año, 2° cuatrimestre)

​

47 of 50

Deprecated

48 of 50

Deprecated

  • “deprecated” son características de lenguajes que son de versiones anteriores y se deben dejar de usar
  • Retrocompatibilidad: Muchas veces estas cosas aun funcionan para que sigan funcionando programas/páginas viejas
  • Usar cosas deprecadas es mala práctica!
  • Elementos y atributos eliminados en HTML 5 y con qué reemplazarlos:

49 of 50

Bibliografía

HTML 5

​

CSS 3

50 of 50

AHORA LES TOCA PRACTICAR :D