1. JavaScript, HTML5, CSS3 Ivan Alberto Morales Freddy Bueno Jonathand Alberto Serrano Serrano

2. Javascript JavaScript es un lenguaje de programacin interpretado, dialecto del estndar ECMAScript. Se define como orientado a objetos, basado en prototipos, imperativo, dbilmente tipado y dinmico. Se utiliza principalmente en su forma del lado del cliente (client-side), implementado como parte de un navegador web permitiendo mejoras en la interfaz de usuario y pginas web dinmicas.

3. Caractersticas Es un superconjunto de la especificacin ECMAScript (ECMA-262) Edicin 3. Extensiones del lenguaje, que incluyen parcialmente soporte para ECMAScript para XML (E4X) (ECMA-357), JavaScript soporta gran parte de la estructura de programacin de C (por ejemplo, sentencias if, bucles for, sentencias switch, etc.). En JavaScript los puntos y coma que finalizan una sentencia pueden ser omitidos

4. JavaScript est formado casi en su totalidad por objetos. Los objetos en JavaScript son arrays asociativos A las funciones se les suele llamar ciudadanos de primera clase; son objetos en s mismos. Como tal, poseen propiedades y mtodos, como .call() y .bind(). Una funcin anidada es una funcin definida dentro de otra. Esta es creada cada vez que la funcin externa es invocada. JavaScript usa prototipos en vez de clases para el uso de herencia.

5. Las funciones tambin se comportan como constructores. Prefijar una llamada a la funcin con la palabra clave new crear una nueva instancia de un prototipo, que heredan propiedades y mtodos del constructor (incluidas las propiedades del prototipo de Object) JavaScript normalmente depende del entorno en el que se ejecute (por ejemplo, en un navegador web) para ofrecer objetos y mtodos por los que los scripts pueden interactuar con el "mundo exterior,

6. Un nmero indefinido de parmetros pueden ser pasados a la funcin. La funcin puede acceder a ellos a travs de los parmetros o tambin a travs del objeto local arguments. A diferencia de muchos lenguajes orientados a objetos, no hay distincin entre la definicin de funcin y la definicin de mtodo. Ms bien, la distincin se produce durante la llamada a la funcin; una funcin puede ser llamada como un mtodo. Cuando una funcin es llamada como un mtodo de un objeto, la palabra clave this, que es una variable local a la funcin, representa al objeto que invoc dicha funcin.

7. Al igual que muchos lenguajes de script, arrays y objetos (arrays asociativos en otros idiomas) pueden ser creados con una sintaxis abreviada. De hecho, estos literales forman la base del formato de datos JSON. JavaScript se encuentra oficialmente bajo la organizacin de Mozilla Foundation, y nuevas caractersticas del lenguaje son aadidas peridicamente.

8. DOM La creacin del Document Object Model o DOM es una de las innovaciones que ms ha influido en el desarrollo de las pginas web dinmicas y de las aplicaciones web ms complejas.

9. DOM DOM permite a los programadores web acceder y manipular las pginas XHTML como si fueran documentos XML. De hecho, DOM se dise originalmente para manipular de forma sencilla los documentos XML.

10. DOM A pesar de sus orgenes, DOM se ha convertido en una utilidad disponible para la mayora de lenguajes de programacin (Java, PHP, JavaScript) y cuyas nicas diferencias se encuentran en la forma de implementarlo.

11. rbol de nodos Una de las tareas habituales en la programacin de aplicaciones web con JavaScript consiste en la manipulacin de las pginas web. De esta forma, es habitual obtener el valor almacenado por algunos elementos (por ejemplo los elementos de un formulario), crear un elemento (prrafos,

, etc.) de forma dinmica y aadirlo a la pgina.

12. rbol de nodos Todas estas tareas habituales son muy sencillas de realizar gracias a DOM. Sin embargo, para poder utilizar las utilidades de DOM, es necesario "transformar" la pgina original.

13. rbol de nodos DOM transforma todos los documentos XHTML en un conjunto de elementos llamados nodos, que estn interconectados y que representan los contenidos de las pginas web y las relaciones entre ellos. Por su aspecto, la unin de todos los nodos se llama "rbol de nodos".

14. rbol de nodos

15. Tipos de nodos La especificacin completa de DOM define 12 tipos de nodos, aunque las pginas XHTML habituales se pueden manipular manejando solamente cuatro o cinco tipos de nodos: Document, nodo raz del que derivan todos los dems nodos del rbol.

16. Tipos de nodos Element, representa cada una de las etiquetas XHTML. Se trata del nico nodo que puede contener atributos y el nico del que pueden derivar otros nodos. Attr, se define un nodo de este tipo para representar cada uno de los atributos de las etiquetas XHTML, es decir, uno por cada par atributo=valor.

17. Tipos de nodos Comment, representa los comentarios incluidos en la pgina XHTML. Text, nodo que contiene el texto encerrado por una etiqueta XHTML.

18. Acceso directo a los nodos getElementsByTagName() Como sucede con todas las funciones que proporciona DOM, la funcin getElementsByTagName() tiene un nombre muy largo, pero que lo hace autoexplicativo. var parrafos = document.getElementsByTagName("p");

19. Acceso directo a los nodos getElementsByName() La funcin getElementsByName() es similar a la anterior, pero en este caso se buscan los elementos cuyo atributo name sea igual al parmetro proporcionado. var parrafoEspecial = document.getElementsByName("especial");

...

...

...

20. Acceso directo a los nodos getElementById() La funcin getElementById() es la ms utilizada cuando se desarrollan aplicaciones web dinmicas. Se trata de la funcin preferida para acceder directamente a un nodo y poder leer o modificar sus propiedades. var cabecera = document.getElementById("cabecera");

...

21. Creacin de elementos XHTML simples // Crear nodo de tipo Element var parrafo = document.createElement("p"); // Crear nodo de tipo Text var contenido = document.createTextNode("Hola Mundo!"); // Aadir el nodo Text como hijo del nodo Element parrafo.appendChild(contenido); // Aadir el nodo Element como hijo de la pagina document.body.appendChild(parrafo);

22. Eliminacin de nodos var parrafo = document.getElementById("provisional"); parrafo.parentNode.removeChild(parrafo);

...

23. Framework JavaScript jQuery: Es un framework de JavaScript para facilitar, entre otros, el acceso a los elementos del DOM, los efectos, interactuar con los documentos HTML, desarrollar animaciones y agregar interaccin con la tecnologa AJAX a pginas web.

24. jQuery jQuery consiste en un nico fichero JavaScript que contiene las funcionalidades comunes de DOM, eventos, efectos y AJAX. La caracterstica principal de la biblioteca es que permite cambiar el contenido de una pgina web sin necesidad de recargarla, mediante la manipulacin del rbol DOM y peticiones AJAX. Para ello utiliza las funciones $() o jQuery().

25. HTML5 HTML5 (HyperText Markup Language, versin 5) es la quinta revisin importante del lenguaje bsico de la World Wide Web, HTML. HTML5 establece una serie de nuevos elementos y atributos que reflejan el uso tpico de los sitios web modernos

26. HTML5 elementos proporcionan nuevas funcionalidades a travs de una interfaz estandarizada, como los elementos y . Mejoras en el elemento , capaz de renderizar en los navegadores ms importantes (Mozilla, Chrome, Opera, Safari e IE) elementos 3D.

27. Ventajas de HTML5 Es nativo, y por tanto independiente de plugins de terceros. Es decir, no pertenece a nadie, es opensource. Es ms semntico, con etiquetas que permiten clasificar y ordenar en distintos niveles y estructuras el contenido. Adems, incorpora metadatos de manera ms formal, favoreciendo el posicionamiento SEO y la accesibilidad.

28. Ventajas de HTML5 El cdigo es ms simple lo que permite hacer pginas ms ligeras que se cargan ms rpidamente favoreciendo la usabilidad y la indexacin en buscadores. Ofrece una compatibilidad mayor con los navegadores de dispositivos mviles. Incluye la etiqueta de dibujo canvas, que ofrece ms efectos visuales.

29. Ventajas de HTML5 Ofrece soporte a codecs especficos. Posibilita la insercin de vdeos y audio de forma directa. Permite la geolocalizacin del usuario. Algo muy til para el marketing mvil. Tiene la capacidad de ejecutar pginas sin estar conectado.

30. Ventajas de HTML5 Incorpora nuevas capacidades Javascript que aumentan la capacidad de almacenamiento. Frente a las cookies que dejaban almacenar algunos kilobytes, ahora se puede conseguir el almacenamiento de entre 5 y 10 megas, dependiendo de la plataforma. Adems, se permiten mltiples Javascripts corriendo en paralelo en una misma pgina.

31. Ventajas de HTML5 Dispone de nuevas capacidades CSS3 como posibilidad de usar cualquier fuente o tipografa en HTML, columnas de texto, opacidad, transparencia, canales alpha, contraste, saturacin, brillo, animaciones de transicin y transformacin, bordes redondeados, gradientes, sombras, etc. Permite realizar diseos adaptables a distintos dispositivos (web, tablets, mviles)

32. Integracin JavaScript y HTML5 HTML5 HTML5 = HTML + CSS + JavaScript es un trmino genrico para describir un conjunto de especificaciones HTML, CSS y Javascript diseado para permitir a los programadores crear la prxima generacin de aplicaciones y sitios Web.

33. Integracin JavaScript y HTML5 HTML5 implica cambios en HTML, CSS y Javascript. En lugar de preocuparse por las ms de 100 especificaciones, esos tres trminos describen la amplitud y el alcance de HTML5.

34. EJEMPLOS