Html5, css3, java script
Upcoming SlideShare
Loading in...5
×
 

Html5, css3, java script

on

  • 943 views

 

Statistics

Views

Total Views
943
Slideshare-icon Views on SlideShare
918
Embed Views
25

Actions

Likes
0
Downloads
10
Comments
0

1 Embed 25

http://localhost 25

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

    Html5, css3, java script Html5, css3, java script Presentation Transcript

    • JavaScript, HTML5, CSS3 Ivan Alberto Morales Freddy Bueno Jonathand Alberto Serrano Serrano
    • Javascript   JavaScript es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se define como orientado a objetos, basado en prototipos, imperativo, débilmente tipado y dinámico. 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 páginas web dinámicas.
    • Características    Es un superconjunto de la especificación ECMAScript (ECMA-262) Edición 3. Extensiones del lenguaje, que incluyen parcialmente soporte para ECMAScript para XML (E4X) (ECMA-357), JavaScript soporta gran parte de la estructura de programación de C (por ejemplo, sentencias if, bucles for, sentencias switch, etc.). En JavaScript los puntos y coma que finalizan una sentencia pueden ser omitidos
    •  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 métodos, como .call() y .bind(). Una función anidada es una función definida dentro de otra. Esta es creada cada vez que la función externa es invocada.  JavaScript usa prototipos en vez de clases para el uso de herencia.
    •  Las funciones también se comportan como constructores. Prefijar una llamada a la función con la palabra clave new crear una nueva instancia de un prototipo, que heredan propiedades y métodos 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 métodos por los que los scripts pueden interactuar con el "mundo exterior“,
    •   Un número indefinido de parámetros pueden ser pasados a la función. La función puede acceder a ellos a través de los parámetros o también a través del objeto local arguments. A diferencia de muchos lenguajes orientados a objetos, no hay distinción entre la definición de función y la definición de método. Más bien, la distinción se produce durante la llamada a la función; una función puede ser llamada como un método. Cuando una función es llamada como un método de un objeto, la palabra clave this, que es una variable local a la función, representa al objeto que invocó dicha función.
    •  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 organización de Mozilla Foundation, y nuevas características del lenguaje son añadidas periódicamente.
    • DOM  La creación del Document Object Model o DOM es una de las innovaciones que más ha influido en el desarrollo de las páginas web dinámicas y de las aplicaciones web más complejas.
    • DOM  DOM permite a los programadores web acceder y manipular las páginas XHTML como si fueran documentos XML. De hecho, DOM se diseñó originalmente para manipular de forma sencilla los documentos XML.
    • DOM A pesar de sus orígenes, DOM se ha convertido en una utilidad disponible para la mayoría de lenguajes de programación (Java, PHP, JavaScript) y cuyas únicas diferencias se encuentran en la forma de implementarlo.
    • Árbol de nodos  Una de las tareas habituales en la programación de aplicaciones web con JavaScript consiste en la manipulación de las páginas web. De esta forma, es habitual obtener el valor almacenado por algunos elementos (por ejemplo los elementos de un formulario), crear un elemento (párrafos, <div>, etc.) de forma dinámica y añadirlo a la página.
    • Á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 página original.
    • Árbol de nodos  DOM transforma todos los documentos XHTML en un conjunto de elementos llamados nodos, que están interconectados y que representan los contenidos de las páginas web y las relaciones entre ellos. Por su aspecto, la unión de todos los nodos se llama "árbol de nodos".
    • Árbol de nodos
    • Tipos de nodos  La especificación completa de DOM define 12 tipos de nodos, aunque las páginas XHTML habituales se pueden manipular manejando solamente cuatro o cinco tipos de nodos:  Document, nodo raíz del que derivan todos los demás nodos del árbol.
    • 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.
    • Tipos de nodos  Comment, representa los comentarios incluidos en la página XHTML.  Text, nodo que contiene el texto encerrado por una etiqueta XHTML.
    • Acceso directo a los nodos getElementsByTagName()  Como sucede con todas las funciones que proporciona DOM, la función getElementsByTagName() tiene un nombre muy largo, pero que lo hace autoexplicativo. var parrafos = document.getElementsByTagName("p");
    • Acceso directo a los nodos getElementsByName()  La función getElementsByName() es similar a la anterior, pero en este caso se buscan los elementos cuyo atributo name sea igual al parámetro proporcionado. var parrafoEspecial = document.getElementsByName("especial"); <p name="prueba">...</p> <p name="especial">...</p> <p>...</p>
    • Acceso directo a los nodos getElementById()  La función getElementById() es la más utilizada cuando se desarrollan aplicaciones web dinámicas. Se trata de la función preferida para acceder directamente a un nodo y poder leer o modificar sus propiedades. var cabecera = document.getElementById("cabecera"); <div id="cabecera"> <a href="/" id="logo">...</a> </div>
    • Creación 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!"); // Añadir el nodo Text como hijo del nodo Element parrafo.appendChild(contenido); // Añadir el nodo Element como hijo de la pagina document.body.appendChild(parrafo);
    • Eliminación de nodos var parrafo = document.getElementById("provisional"); parrafo.parentNode.removeChild(parrafo); <p id="provisional">...</p>
    • 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 interacción con la tecnología AJAX a páginas web.
    • jQuery  jQuery consiste en un único fichero JavaScript que contiene las funcionalidades comunes de DOM, eventos, efectos y AJAX. La característica principal de la biblioteca es que permite cambiar el contenido de una página web sin necesidad de recargarla, mediante la manipulación del árbol DOM y peticiones AJAX. Para ello utiliza las funciones $() o jQuery().
    • HTML5  HTML5 (HyperText Markup Language, versión 5) es la quinta revisión importante del lenguaje básico de la World Wide Web, HTML.  HTML5 establece una serie de nuevos elementos y atributos que reflejan el uso típico de los sitios web modernos
    • HTML5  elementos proporcionan nuevas funcionalidades a través de una interfaz estandarizada, como los elementos <audio> y <video>.  Mejoras en el elemento <canvas>, capaz de renderizar en los navegadores más importantes (Mozilla, Chrome, Opera, Safari e IE) elementos 3D.
    • Ventajas de HTML5  Es nativo, y por tanto independiente de plugins de terceros. Es decir, no pertenece a nadie, es opensource.  Es más semántico, con etiquetas que permiten clasificar y ordenar en distintos niveles y estructuras el contenido. Además, incorpora metadatos de manera más formal, favoreciendo el posicionamiento SEO y la accesibilidad.
    • Ventajas de HTML5  El código es más simple lo que permite hacer páginas más ligeras que se cargan más rápidamente favoreciendo la usabilidad y la indexación en buscadores.  Ofrece una compatibilidad mayor con los navegadores de dispositivos móviles.  Incluye la etiqueta de dibujo canvas, que ofrece más efectos visuales.
    • Ventajas de HTML5  Ofrece soporte a codecs específicos.  Posibilita la inserción de vídeos y audio de forma directa.  Permite la geolocalización del usuario. Algo muy útil para el marketing móvil.  Tiene la capacidad de ejecutar páginas sin estar conectado.
    • 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. Además, se permiten múltiples Javascripts corriendo en paralelo en una misma página.
    • Ventajas de HTML5  Dispone de nuevas capacidades CSS3 como posibilidad de usar cualquier fuente o tipografía en HTML, columnas de texto, opacidad, transparencia, canales alpha, contraste, saturación, brillo, animaciones de transición y transformación, bordes redondeados, gradientes, sombras, etc.  Permite realizar diseños adaptables a distintos dispositivos (web, tablets, móviles…)
    • Integración JavaScript y HTML5  HTML5  HTML5 = HTML + CSS + JavaScript es un término genérico para describir un conjunto de especificaciones HTML, CSS y Javascript diseñado para permitir a los programadores crear la próxima generación de aplicaciones y sitios Web.
    • Integración JavaScript y HTML5  HTML5 implica cambios en HTML, CSS y Javascript. En lugar de preocuparse por las más de 100 especificaciones, esos tres términos describen la amplitud y el alcance de HTML5.
    • EJEMPLOS