• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Introducción a html5
 

Introducción a html5

on

  • 3,389 views

 

Statistics

Views

Total Views
3,389
Views on SlideShare
1,726
Embed Views
1,663

Actions

Likes
1
Downloads
31
Comments
0

16 Embeds 1,663

http://julitogtu.wordpress.com 775
http://julitogtu.com 665
http://msexpertos.com 130
http://blogs.msdn.com 42
http://www.sketchincc.com 16
http://msexpertos.wordpress.com 16
http://sketchincc.com 7
http://danamlatam.wordpress.com 2
https://www.google.co.ve 2
http://translate.googleusercontent.com 2
https://si0.twimg.com 1
https://twimg0-a.akamaihd.net 1
http://www.5z5.com 1
http://www.newsblur.com 1
http://dev.newsblur.com 1
https://msexpertos.wordpress.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

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 Introducción a html5 Presentation Transcript

    • Julio Cesar AvellanedaMicrosoft MVP ASP.NETCoreGroup BDotNethttp://julitogtu.wordpress.com@julitogtu
    • Introducción a HTML
    • Qué es HTML5?• Ultima versión de HTML• Agrupa diversas características• Estándares para el diseño Web• Estándares para el desarrollo Web• Nueva forma para ver la Web• HTML5 = HTML + JavaScript + CSS3
    • Revolución de la Web• HTML -> Contenido• JavaScript -> Comportamiento• CSS -> Presentación• No plugins• Animaciones• Bases de datos• Dispositivos móviles• En resumen una nueva Web….
    • Y que hay de nuevo?Multime Aplicacionesdia offlineSemánti Acceso aca dispositivosGráficas, ConectividadefectosCSS3 Rendimiento, integración
    • Algunos cambios inicia• <! DOCTYPE html>• <html lang=“es”>• <meta charset=“ytf-8”>• <link rel=stylesheet href=estilos.css>• <script src=jquery.js></script>
    • Elementos SemánticoPermiten estructurar de una maneralógica una página Web, cambio de divs porlos nuevos elementos semánticos. header hgroup nav section article footer aside
    • Elementos Semántico header nav section article aside article footer
    • Api para formulariosNuevos tipos de input para cumplir con loscampos estándar de un formulario. search number range color tel url email date month week time datetime
    • Api para formulariosNuevos atributos para evitar el uso decódigo JavaScript.• placeholder• required• autofocus• Autocomplete• formnovalidate
    • Elementos MultimediDos nuevos elementos, audio y video. NoSilverlight, no flash, no plugins.• Características similares• Múltiples formatos• Controles básicos• Manipulación mediante JavaScript• No full screen.
    • GeolocalizaciónPermite determinar las coordenadas deubicación de un navegante.• Obtenemos un objeto position• Método geolocation.getCurrentPosition(ok,[erro r],[options])• Objeto coors ofrece la latitud y la longitud.
    • StorageLo que se tenía antes eran las cookies:• Inseguras• Poco espacio• Texto plano• Viajan al servidor en cada petición• En resumen no eran lo mejor…
    • StorageHTML5 ofrece dos nuevos tipos destorage:• localStorage• sessionStorage Características:• Espacio recomendado 5 Mb• Almacenamiento key/value• Solo en el cliente
    • StoragePara almacenar:• window.sessionStorage/localStorage.setItem(key, value);Para recuperar:• window.sessionStorage/localStorage.getItem(key);Para eliminar:• window.sessionStorage/localStorage.removeItem(k ey);
    • CanvasEl Canvas es uno de los elementos másrevolucionarios incluidos en HTML5.• Superficie de dibujo• Similar a un lienzo• Líneas, curvas, figuras geométricas• Texto• Imágenes
    • Canvas• Animaciones• Audio y Video• Juegos• Charts• Librerías especificas para su trabajo como processing.js, raphael.js, KinecticJS entre otras.
    • CanvasPara trabajar con el canvas:• Obtener una referencia al elemento.• Definir el contexto (2d o 3d).• Por el momento solo se soporta 2d.• Soportado en todos los browsers actuales.• El límite la imaginación….
    • Y ahora que esperaspara usar HTML5 ??