JavaScript desde Cero

Juan Segu - Junio 2011

JavaScript desde Cero

El lenguaje JavaScript

AJAX

Frameworks

Futuro

El lenguaje JavaScript

Lenguaje para crear acciones

Click en un botn

Carga de una pgina web

Pasar por encima de una imagen

Cada vez que se presione una tecla

El lenguaje JavaScript

Agrega funcionalidad al HTML

El lenguaje JavaScript

Hola Mundo

document.write("Hola Mundo");

El lenguaje JavaScript

Lenguaje de programacin interpretado

NO se compila

El lenguaje JavaScript

Se utiliza principalmente del lado del cliente:Importancia del navegador web

El lenguaje JavaScript

Sintaxis similar a C y algunos nombres del lenguaje Java

Qu es el lenguaje JavaScript?

Java y JavaScript NO es lo mismo

Compilador JavaScript es interpretado

Orientado a Objetos

Potencia

Propsito JavaScript para web

El lenguaje JavaScript

JavaScript y VBScript

Crear y editar cdigo JavaScript

Editores convencionales

Otros editores

Usos de JavaScript

Cuadros de dilogo

CONFIRM

alert('Are you certain that you want to delete this product?');

ALERT

alert('This alert dialog tells you something important');

Usos de JavaScript

Efectos de texto

TEXTOS ANIMADOS

Texto haciendo olas:http://www.mundojavascript.com/animaciones/texto_haciendo_olas.shtml

alert('Are you certain that you want to delete this product?');

MARQUESINAS

Scroll de texto simple:http://www.mundojavascript.com/marquesinas/

- Botn derecho del ratn bloqueado

Usos de JavaScript

Formularios

VALIDACIN

Validacin de formularios:http://www.desarrolloweb.com/articulos/ejemplos/javascript/validar-fomulario.html

Ejemplo Web

www.acceseo.com

www.roverecocinas.com

Aprender JavaScript

Manuales de JavaScript recomendado:http://www.desarrolloweb.com/manuales/20/

Algunos ejemplos

http://www.htmlpoint.com/

http://www.elcodigo.net/

Limitaciones de JavaScript

No llegaba a ser un lenguaje imprescindible

JavaScript un poco soso

AJAX

y apareci AJAX

y apareci AJAX

y apareci AJAX

AJAX

No es una tecnologa sino una tcnica

AJAX

VENTAJAS DE UTILIZAR AJAX

Basado en estndares abiertos

Usabilidad, evitamos la recarga innecesaria de una pgina

Multinavegador y multiplataforma

Tiempos de espera menores

AJAX

DESVENTAJAS DE UTILIZAR AJAX

Falta de soporte en algunos navegadores(antiguos)

Demasiado cdigo hace lento el navegador

Cambia el funcionamiento de las pginas, algunos usuarios pueden no entender como va

Funcionamiento de AJAX

No es una tecnologa sino una tcnica

AJAX

Una parte muy elevada de las pginas webs utiliza JavaScript

Ventajas de utilizar AJAX

www.itmahotels.com

www.portamaticonline.com

Grandes ejemplos de AJAX

Google Maps

Gmail

Google

Flickr

Facebook

FRAMEWORKS

Qu es un framework?

Un conjunto estandarizado de conceptos, prcticas y criterios para enfocar un tipo de problemtica particular

WIKIPEDIA

Dnde encontraremos un FW?

Dnde encontraremos un FW?

JavaScript Frameworks

Ventajas de utilizar FW

Hacer mucho con muy poco

Ventajas de utilizar FW

Menor tiempo de desarrollo

Menos cdigo

Cdigo ms limpio

Funciones optimizadas

Si existe algo hecho, por qu no usarlo?

Cmo elegir un framework?

Factores a tener en cuenta:

Facilidad de uso

Comunidad

Velocidad

Compatibilidad

Cmo elegir un framework?

Facilidad de usoCul elegiras?

Cmo elegir un framework?

Comunidad

http://wappalyzer.com/stats/cat/JavaScript%20frameworks

http://trends.builtwith.com/javascript

Cmo elegir un framework?

Velocidad

Cmo elegir un framework?

Compatibilidad con navegadores

http://www.bestwebframeworks.com/

Algunos Frameworks

Framework recomendado

jQueryhttp://www.jquery.com/

jQueryhttp://www.jquery.com/

jQueryUIhttp://www.jqueryui.com/

Ejemplo jQuery

jQuery Hello World

$(document).ready(function(){ $("#msgid").html("This is Hello World by JQuery");});This is Hello World by HTML

Frameworks para mviles?

http://www.jquerymobile.com/

Webs con jQuery

SPALMhttp://www.spalm.es/

PREVENTI SHOEShttp://www.preventishoes.com/blog/

NOW YOUhttp://www.now-you.eshttp://www.acceseo.net/nowyou

FUTURO DE JAVASCRIPT

Futuro de JavaScript

Futuro de JavaScript

Futuro de JavaScript

Adobe apuesta por HTML5?

http://labs.adobe.com/technologies/wallaby/

Futuro de JavaScript

l ya lo anticip

Futuro de JavaScript

FLASH

HTML5

Futuro de JavaScript

Algunos ejemplos

https://developer.mozilla.org/es/demos/

http://www.20thingsilearned.com/

http://media.chikuyonok.ru/ambilight/

Futuro de JavaScript

Algunos ejemplos

http://html5demos.com/

http://del.icio.us/juansegui/html5http://del.icio.us/juansegui/javascripthttp://del.icio.us/juansegui/ajax

http://www.addyosmani.com/resources/googlebox/

http://www.romancortes.com/ficheros/pacman_css.html

JavaScript desde Cero

@juansegui

@acceseo

Gracias por vuestra atencin

Muokkaa otsikon tekstimuotoa napsauttamalla

Muokkaa jsennyksen tekstimuotoa napsauttamallaToinen jsennystasoKolmas jsennystasoNeljs jsennystasoViides jsennystasoKuudes jsennystasoSeitsems jsennystasoKahdeksas jsennystasoYhdekss jsennystaso