HTML 5
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
621
On Slideshare
621
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
8
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Tema: HTML5Justificación: El diseño web se ha ganado rápidamente unlugar de relevancia dentro del diseño gráfico.Es por esto que hoy muchas empresas o institucionesmayoritariamente utilizan como medio de comunicación susitio web dejando un poco más de lado publicaciones escritas,folletos, catálogos impresos u otros medios relacionados conel diseño grafico tradicional.Dirigido: El presente tema esta dirigido a estudiantesde Tecnologías de la Información y Diseñadores Web
  • 2. 1.1 Introducción a HTML5HTML5 es la actualización de HTML, el lenguaje en el que es creadala web. HTML5 también es un término de marketing para agruparlas nuevas tecnologías de desarrollo de aplicaciones web: HTML5,CSS3 y nuevas capacidades de Javascript.La versión anterior y más usada de HTML, HTML4, carece decaracterísticas necesarias para la creación de aplicacionesmodernas basadas en un navegador. El uso fuerte de Javascript haayudado a mejorar esto, gracias a frameworks como jQuery,jQuery UI, Sproutcore, entre otros.
  • 3. 1.1 Introducción a HTML5Flash en especial ha sido usado en reemplazo de HTML paradesarrollar web apps que superaran las habilidades de unnavegador: Audio, video, webcams, micrófonos, datos binarios,animaciones vectoriales, componentes de interfaz complejos,entre muchas otras cosas. Ahora HTML5 es capaz de hacer esto sinnecesidad de plugins y con una gran compatibilidad entrenavegadores.
  • 4. 1.2 Novedades en HTML5La forma en que se crean páginas web ha cambiado, y ha cambiadopara adaptarse a la filosofía que surgió con la aparición de laweb 2.0. Para entender mejor estas tendencias y lo que suponenvamos a analizar los cambios que se han aplicado.
  • 5. 1.2 Novedades en HTML5Las reglas básicas que se plantearon a la hora de actualizar aHTML 5 fueron: Basarse en HTML, CSS, DOM y Javascript. Reducir la necesidad del uso de plugins, como por ejemplo flash. Mejorar el tratamiento de errores. Crear etiquetas que reemplacen el uso de scripts. Lenguaje que pueda utilizarse en cualquier tipo de dispositivo,como móviles, PDAs, etc.
  • 6. 1.3 Nuevas etiquetas de HTML5HTML4 y HTML5 son 100% compatibles entre sí. Todo el códigoque tienes en HTML normal seguirá funcionando sin problemasen HTML5. Para empezar a usar HTML5 lo único que tienes quehacer es colocar este DOCTYPE antes de la etiqueta <html>:Código:<!DOCTYPE html>
  • 7. 1.3 Nuevas etiquetas de HTML5Es un DOCTYPE mucho más simplificado que XHTML (cuyas reglassiguen siendo usadas) y te permite usar todas las habilidades deHTML5 sin que nada de lo que ya tienes programado dejede funcionar.Las principales etiquetas HTML5 nuevas no tienen unarepresentación especial en pantalla. Todas se comportan comoun <div> o un <span>. Pero cada una tiene un significado semánticosuperior a un simple div o span.
  • 8. 1.3 Nuevas etiquetas de HTML5<header>Hacer cosas como <div id="header"> es un poco estúpido cuandoel 99% de los proyectos web tienen una cabecera. <header> estádiseñada para reemplazar la necesidad de crear divs sin significadosemántico.<hgroup>Muchos headers necesitan múltiples títulos, como un blog que tieneun titulo y un tagline explicando el blog. <hgroup> permite colocarun h1, h2 y h3 dentro del header sin afectar el SEO, permitiendousar otro h1 en el sitio.
  • 9. 1.3 Nuevas etiquetas de HTML5<nav>Igual que <header>, <nav> está diseñado para que ahí coloquesla botonera de navegación principal. Puedes colocar cualquieretiqueta dentro, aunque lo recomendado es usar listas <ul>.Sólo puedes tener un <nav> por página.<section>Define un área de contenido única dentro del sitio. En un blog,sería la zona donde están todos los posts. En un video deyoutube, habría un section para el video, uno para los datosdel video, otro para la zona de comentarios.
  • 10. 1.3 Nuevas etiquetas de HTML5<article>Define zonas únicas de contenido independiente. En el home deun blog, cada post sería un article. En un post del blog, el post ycada uno de sus comentarios sería un <article>.<aside>Cualquier contenido que no esté relacionado con el objetivoprimario de la página va en un aside. En un blog, obviamenteel aside es la barra lateral de información. En el home de unperiódico, puede ser el área de indicadores económicos.
  • 11. 1.4 Diferencias entre HTML y HTML5
  • 12. 1.5 CanvasHTML 5 define el elemento <canvas> como un rectángulo en lapágina donde se puede utilizar Java Script para dibujar cualquiercosa. También determina un grupo de funciones (canvas API) paradibujar formas, crear gradientes y aplicar transformaciones.Texto CanvasSi tu navegador soporta las API de canvas no quiere decir que puedasoportar las API para texto-canva. Las API de canva se han idogenerando con el tiempo y las funciones de texto se han añadidoposteriormente, por lo que algunos navegadores puede que notengan integrado las API para texto.
  • 13. 1.6 Web semántica Añade etiquetas para manejar la Web Semántica (Web 3.0):header, footer, article, nav, time (fecha del contenido), link rel=‘’(tipo de contenido que se enlaza). Estas etiquetas permiten describir cual es el significado delcontenido. Por ejemplo su importancia, su finalidad y las relacionesque existen. No tienen especial impacto en la visualización,se orientan a buscadores. Los buscadores podrán indexar e interpretar esta metainformación para no buscar simplemente apariciones de palabrasen el texto de la página. Permite incorporar a las páginas ficheros RDF / OWL paradescribir relaciones entre los términos utilizados.
  • 14. ConclusionesHTML 5 es más fácil de programar, además que permite que lossitios web realizados en HTML 5 pueden ser visualizados desdecualquier dispositivo móvil, sin necesitar de tener instalado losplugins de flash player.Con HTML 5 ya no es necesario tener instalado los plugins de audioy video para el funcionamiento en la Web, además de soportarla mayoría de los navegadores.
  • 15. Participantes- Alejandro Bonilla Trujillo- Cynthia Alcala- Jorge Luis Dorado Trujillo- Diego Acuña- Margarita Treto