JavaScript desde Cero

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 botón
Carga de una página web
Pasar por encima de una imagen
Cada vez que se presione una tecla

El lenguaje JavaScript Agrega funcionalidad al HTML

El lenguaje JavaScript <html> <head> <title>Hola Mundo</title> </head> <body> <script type="text/javascript"> document.write("Hola Mundo"); </script> </body> </html>

El lenguaje JavaScript Lenguaje de programación 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
Propósito -> JavaScript para web

El lenguaje JavaScript JavaScript y VBScript

Crear y editar código JavaScript Editores convencionales Otros editores

Usos de JavaScript Cuadros de diálogo 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/ - Botón derecho del ratón bloqueado

Usos de JavaScript Formularios VALIDACIÓN Validación 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

…y apareció AJAX

AJAX No es una tecnología sino una técnica

AJAX
VENTAJAS DE UTILIZAR AJAX
Basado en estándares abiertos
Usabilidad, evitamos la recarga innecesaria de una página
Multinavegador y multiplataforma
Tiempos de espera menores

AJAX
DESVENTAJAS DE UTILIZAR AJAX
Falta de soporte en algunos navegadores
(antiguos)
Demasiado código hace lento el navegador
Cambia el funcionamiento de las páginas,
algunos usuarios pueden no entender
como va

Funcionamiento de AJAX No es una tecnología sino una técnica

AJAX Una parte muy elevada de las páginas 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, prácticas y criterios para enfocar un tipo de problemática particular” WIKIPEDIA

¿Dónde encontraremos un FW?

JavaScript Frameworks

Ventajas de utilizar FW “ Hacer mucho con muy poco”

Ventajas de utilizar FW
Menor tiempo de desarrollo
Menos código
Código más limpio
Funciones optimizadas
Si existe algo hecho, ¿por qué no usarlo?

¿Cómo elegir un framework? Factores a tener en cuenta:
Facilidad de uso
Comunidad
Velocidad
Compatibilidad

¿Cómo elegir un framework? Facilidad de uso ¿Cuál elegirías?

¿Cómo elegir un framework? Comunidad http://wappalyzer.com/stats/cat/JavaScript%20frameworks http://trends.builtwith.com/javascript

¿Cómo elegir un framework? Velocidad

¿Cómo elegir un framework? Compatibilidad con navegadores http://www.bestwebframeworks.com/

Algunos Frameworks

Framework recomendado jQuery http://www.jquery.com/ jQuery http://www.jquery.com/ jQueryUI http://www.jqueryui.com/

Ejemplo jQuery <html> <head> <title>jQuery Hello World</title> <script type="text/javascript" src="jquery-1.2.6.min.js"></script> </head> <body> <script type="text/javascript">$(document).ready(function(){ $("#msgid").html("This is Hello World by JQuery"); });</script> This is Hello World by HTML <div id="msgid"></div> </body> </html>

¿Frameworks para móviles? http://www.jquerymobile.com/

Webs con jQuery SPALM http://www.spalm.es/ PREVENTI SHOES http://www.preventishoes.com/blog/ NOW YOU http://www.now-you.es http://www.acceseo.net/nowyou

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 <object width="425" height="349"><param name="movie" value="http://www.youtube.com/v/2OBZHB5I89A?version=3&hl=es_ES"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/2OBZHB5I89A?version=3&hl=es_ES" type="application/x-shockwave-flash" width="425" height="349" allowscriptaccess="always" allowfullscreen="true"></embed></object> HTML5 <video src="movie.ogg" controls="controls"></video>

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/html5 http://del.icio.us/juansegui/javascript http://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 atención

http://www.juansegui.net	861
http://www.tucamon.es	98
http://feeds.feedburner.com	11
http://paper.li	8
http://a0.twimg.com	4
url_unknown	3
http://www.socialoyster.com	2
http://webcache.googleusercontent.com	1
http://translate.googleusercontent.com	1

JavaScript desde Cero

by Juan Seguí Moreno

Accessibility

Categories

Upload Details

Usage Rights

9 Embeds 989

Statistics

JavaScript desde Cero Presentation Transcript