Introducción a HTML5 para todos los públicos (UTAD, june 2013)
Upcoming SlideShare
Loading in...5
×
 

Introducción a HTML5 para todos los públicos (UTAD, june 2013)

on

  • 700 views

A brief introduction to HTML5 at UTAD, june 2013. For all audiences, from business to technical, from customer focused to backoffice. ...

A brief introduction to HTML5 at UTAD, june 2013. For all audiences, from business to technical, from customer focused to backoffice.
Una breve introducción a HTML5 en UTAD, junio 2013. Para todos los públicos: técnicos y enfocados a negocio, funciones internas y de relación con el cliente.

Statistics

Views

Total Views
700
Views on SlideShare
679
Embed Views
21

Actions

Likes
0
Downloads
22
Comments
0

1 Embed 21

http://193.175.161.180 21

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Introducción a HTML5 para todos los públicos (UTAD, june 2013) Introducción a HTML5 para todos los públicos (UTAD, june 2013) Presentation Transcript

  • HTML5 y FAMILIA Efraim Martínez Madrid, 20 de junio de 2013 1
  • OBJETIVOS Comprender cómo están hechas las páginas web Aprender a escribir páginas web sencillas Debatir para aprender juntos Pasarlo bien 2
  • QUÉ ES HTML y HTML5    HTML: lenguaje de etiquetas usado para estructurar y presentar contenido web HTML5: nuevas etiquetas de markup (lenguaje) HTML, CSS3, J avaScript y tecnologías complementarias externas (familia HTML5) HTML: Hyper Text Markup Language   Es un estándar o recomendación del W3C HTML5 está aún en transición 3
  • Evolución de HTML/XHTML http://broadcast.rackspace.com/blog/HTMLtimeline/index.html Sólo téxto Imágenes, tablas y frames CSS 1990 ● ● ● ● ● Ajax, Plugins 2000 HTML 1.0, mezcla de SGML+href Inicio del proyecto World Wide Web (Berners-Lee) ● ● HTML 3.2 Internet Explorer 4.0 con Windows HTML 2.0 y CSS Netscape, primer navegador comercial con interfaz gráfico Tablas y mapas de imágenes en el cliente ● ● HTML 4.01 Internet Explorer 4.0 incluido con Msft Windows http://www.ietf.org/rfc/rfc1866.txt 2010 ● ● Primer borrador HTML5 Versión final: 2014 (esp.) REFERENCIAS: html 1.0: http://www.ietf.org/rfc/rfc1866.txt html 3.2: http://www.w3.org/TR/REC-html32 html 4.01: http://www.w3.org/TR/REC-html40 4
  • HTML5 EN ALGUNOS NAVEGADORES  Google Chrome   Apple Safari   http://www.apple.com/html5 Mozilla Firefox   http://www.chromeexperiments.com https://developer.mozilla.org/en/HTML/HTML5 Microsoft Internet Explorer  http://www.nevermindthebullets.com 5
  • QUÉ ES HTML5 en 1:32  https://www.youtube.com/watch? v=mzPxo7Y6J yA 6
  • ¿POR QUÉ ERA NECESARIA UNA EVOLUCIÓN?  Cambios radicales en la web en 10 años     http://web.archive.org/web/http://www.youtube.com/ El HTML original era un lenguaje muy poco estricto y se escribía “ a mano” Nuevas tendencias habían extremado la incompatibilidad entre navegadores y dispositivos Estándares divergentes  XHTML 2.0, HTML5, flash...) 7
  • PRINCIPALES DIFERENCIAS DE HTML5 CON SUS PREDECESORES  Nuevas etiquetas y atributos para estructurar el contenido  Soporte nativo multimedia audio/video  Soporte completo de CSS3    Sombras, degradados, sombreados, esquinas, fuentes Gráficos 2D/3D (elemento canvas) Almacenamiento, BBDD local, webworkers, drag&drop 8
  • ESTRUCTURA BÁSICA DE UN DOCUMENTO HTML5 9
  • EJERCICIOS CON INDEX-ORIGINAL.HTML  Cosas con el texto  Remarcados y negritas <em> <b> <strong> <i>  Saltos de línea <br />  Insertar imágenes <img />  Insertar enlaces <a>  Elemento <span>  Comprobar la validez  http://validator.w3.org 10
  • NOCIONES BÁSICAS DE CSS3  Reglas CSS   Selector, declaración, propiedad, valor Selectores:   Selectores múltiples y anidados   Elemento, clase, identificador, pseudo clases Precedencia id-atributo-elemento e !important Inserción de CSS en el documento  Inline <h1  Interna <style  Externa <link style="color:red">Prueba</h1> type=”text/css></style> rel="stylesheet" type="text/css" href="pr.css" /> 11
  • SEGUIMOS CON INDEX-ORIGINAL.HTML  Poner el título rojo con estilo inline  Convertir en estilos internos/externos  Añadir una clase de objetos remarcados  Cambiar el tamaño de los objetos   Unidades absolutas (pt, px) y relativas (em, %)   Identificadores de tamaño (small, medium, large) impressivewebs.com/understanding-em-units-css Margénes (margin) y rellenos (padding) 12
  • MAQUETACIÓN Y DISTRIBUCIÓN DE ELEMENTOS EN PANTALLA EN HTML5  Evolución   Estructuras más habituales   tablas – frames – capas (div) Ancho fijo, ancho variable, adaptable Referencias en la web  Layout fijo www.w3schools.com/html/html_layout.asp Layout adaptativo 13
  • EJERCICIOS SOBRE EL DOCUMENTO MAQUETAR.HTML  Resetear estilos  Maquetación básica   Espaciados y márgenes   Tamaño del wrap y de los elementos Separaciones de columnas por tamaños y % Añadir un menú de navegación con listas  Listas ordenadas y sin ordenar  Estilos para configurar una lista estilo “ menú” 14
  • ESTRUCTURA SEMÁNTICA DE ELEMENTOS EN HTML5  Evitan arbitrariedad y facilitan la lectura <div id="header"> This is my header </div> <header> This is my header </header> Cabecera de documento/sección Bloque de enlaces de navegación (menú) Contenido agrupado temáticamente Bloque de información independiente Contenido lateral o relacionado Pie de documento/sección <figure>, <figcaption>, <time> 15
  • EJERCICIOS SOBRE EL DOCUMENTO SEMANTICO.HTML  Cambiar etiquetas antiguas por las nuevas semanticas html5  Cambiar los estilos adecuadamente  Insertar el script modernizr-2.0.js 16
  • INSERCIÓN DE VIDEO Y AUDIO  Eliminan la necesidad de plugins  Video (subtítulos no soportados aún) <video autoplay controls height=”” width=”” muted poster=””> <source src="fich.mp4" type="video/mp4"> <source src=”fich.ogg” type=”video/ogg”> Your browser does not support video tag. </audio>  Audio <audio controls autoplay loop muted preload=”auto”> <source src="fich.mp3" type="audio/mpeg"> <embed height="50" width="100" src="fich.mp3"> </audio> 17
  • FORMULARIOS CON HTML5  Expanden los conocidos de HTML4.01    Más tipos de controles y grupos de controles Comprobaciones incluidas en el propio HTML Ejercicio  Incluir un formulario de suscripción a lista de correo  Etiquetas <label> y campos <input>  Solicitar correo electrónico válido  Botón para enviar y borrar el formulario 18
  • FUNCIONALIDAD DRAG&DROP EN UNA PÁGINA WEB   Funcionalidad avanzada que requiere programación Muchos objetos se pueden arrastrar pero tienen un comportamiento por defecto (p.e. imágenes o enlaces)   Hay que evitar el comportamiento por defecto Conceptualmente:  Cuando se inicia drag, capturar la información  Cuando se hace drop, ejecutar las acciones 19
  • ANEXO: CODIFICACIÓN XHTML/HTML (los marcados con N no son necesarios en HTML)  Tags and attributes have to be lowercase N  All tags must be closed <br /> or <br></br> N  Documents must be well-formed <p>My coding is <b>bad</p></b>  Attribute values must be quoted Height="3" N  Attribute Minimisation <hr noshade="noshade" /> N     Nuevos links internos (name está deprecado, sustituir por id y usar ambos) Alternative text in images obligatorio <img src="header.gif" alt=" " />. También es buena práctica usar “ title” & en URLs deben ser codificadas: <a href="reviews.php? page=27&amp;style=blue">link</a> Content must be wrapped in a block-level element (p, ul, div) 20
  • ANEXO: REFERENCIAS Y WEBS ÚTILES  Algunas páginas tutoriales   http://www.w3schools.com/  http://www.w3schools.com/html/html5_intro.asp   http://msdn.microsoft.com/es-es/ie/hh749019 http://www.w3schools.com/tags/ref_colorpicker.asp Pruebas realizadas por mi sobre los ejercicios:  http://j.mp/html5-utad (es un enlace a dropbox, en caso de no funcionar contactar con efraim@ teamingisgrowing.com) 21
  • GRACIAS ¿NECESITA MÁS INFORMACIÓN? ● ● http://horizontecloud.com askhow@horizontecloud.com 22