Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JavaScript desde Cero

6,332 views

Published on

Introducción a JavaScript, historia del lenguaje, evolución, frameworks (en especial jQuery) y futuro del lenguaje gracias a la combinación con HTML5 y CSS3

Presentación realizada en Camon a través de ADWE.

9 de Junio de 2011

Published in: Technology
  • Be the first to comment

JavaScript desde Cero

  1. 1. JavaScript desde Cero Juan Seguí - Junio 2011
  2. 2. JavaScript desde Cero <ul><li>El lenguaje JavaScript
  3. 3. AJAX
  4. 4. Frameworks
  5. 5. Futuro </li></ul>
  6. 6. El lenguaje JavaScript Lenguaje para crear acciones <ul><li>Click en un botón
  7. 7. Carga de una página web
  8. 8. Pasar por encima de una imagen
  9. 9. Cada vez que se presione una tecla </li></ul>
  10. 10. El lenguaje JavaScript Agrega funcionalidad al HTML
  11. 11. El lenguaje JavaScript <html> <head> <title>Hola Mundo</title> </head> <body> <script type=&quot;text/javascript&quot;> document.write(&quot;Hola Mundo&quot;); </script> </body> </html>
  12. 12. El lenguaje JavaScript Lenguaje de programación interpretado NO se compila
  13. 13. El lenguaje JavaScript Se utiliza principalmente del lado del cliente: <ul><li>Importancia del navegador web </li></ul>
  14. 14. El lenguaje JavaScript Sintaxis similar a C y algunos nombres del lenguaje Java
  15. 15. ¿Qué es el lenguaje JavaScript? Java y JavaScript NO es lo mismo <ul><li>Compilador -> JavaScript es interpretado
  16. 16. Orientado a Objetos
  17. 17. Potencia
  18. 18. Propósito -> JavaScript para web </li></ul>
  19. 19. El lenguaje JavaScript JavaScript y VBScript
  20. 20. Crear y editar código JavaScript Editores convencionales Otros editores
  21. 21. 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');
  22. 22. 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
  23. 23. Usos de JavaScript Formularios VALIDACIÓN Validación de formularios: http://www.desarrolloweb.com/articulos/ejemplos/javascript/validar-fomulario.html
  24. 24. Ejemplo Web www.acceseo.com www.roverecocinas.com
  25. 25. Aprender JavaScript Manuales de JavaScript recomendado: http://www.desarrolloweb.com/manuales/20/ Algunos ejemplos http://www.htmlpoint.com/ http://www.elcodigo.net/
  26. 26. Limitaciones de JavaScript No llegaba a ser un lenguaje imprescindible
  27. 27. JavaScript un poco soso
  28. 28. AJAX
  29. 29. …y apareció AJAX
  30. 30. …y apareció AJAX
  31. 31. …y apareció AJAX
  32. 32. AJAX No es una tecnología sino una técnica
  33. 33. AJAX <ul>VENTAJAS DE UTILIZAR AJAX <li>Basado en estándares abiertos
  34. 34. Usabilidad, evitamos la recarga innecesaria de una página
  35. 35. Multinavegador y multiplataforma
  36. 36. Tiempos de espera menores </li></ul>
  37. 37. AJAX <ul>DESVENTAJAS DE UTILIZAR AJAX <li>Falta de soporte en algunos navegadores
  38. 38. (antiguos)
  39. 39. Demasiado código hace lento el navegador
  40. 40. Cambia el funcionamiento de las páginas,
  41. 41. algunos usuarios pueden no entender
  42. 42. como va </li></ul>
  43. 43. Funcionamiento de AJAX No es una tecnología sino una técnica
  44. 44. AJAX Una parte muy elevada de las páginas webs utiliza JavaScript
  45. 45. Ventajas de utilizar AJAX www.itmahotels.com www.portamaticonline.com
  46. 46. Grandes ejemplos de AJAX Google Maps Gmail Google Flickr Facebook
  47. 47. FRAMEWORKS
  48. 48. ¿Qué es un framework? “ Un conjunto estandarizado de conceptos, prácticas y criterios para enfocar un tipo de problemática particular” WIKIPEDIA
  49. 49. ¿Dónde encontraremos un FW?
  50. 50. ¿Dónde encontraremos un FW?
  51. 51. JavaScript Frameworks
  52. 52. Ventajas de utilizar FW “ Hacer mucho con muy poco”
  53. 53. Ventajas de utilizar FW <ul><li>Menor tiempo de desarrollo
  54. 54. Menos código
  55. 55. Código más limpio
  56. 56. Funciones optimizadas
  57. 57. Si existe algo hecho, ¿por qué no usarlo? </li></ul>
  58. 58. ¿Cómo elegir un framework? Factores a tener en cuenta: <ul><li>Facilidad de uso
  59. 59. Comunidad
  60. 60. Velocidad
  61. 61. Compatibilidad </li></ul>
  62. 62. ¿Cómo elegir un framework? Facilidad de uso ¿Cuál elegirías?
  63. 63. ¿Cómo elegir un framework? Comunidad http://wappalyzer.com/stats/cat/JavaScript%20frameworks http://trends.builtwith.com/javascript
  64. 64. ¿Cómo elegir un framework? Velocidad
  65. 65. ¿Cómo elegir un framework? Compatibilidad con navegadores http://www.bestwebframeworks.com/
  66. 66. Algunos Frameworks
  67. 67. Framework recomendado jQuery http://www.jquery.com/ jQuery http://www.jquery.com/ jQueryUI http://www.jqueryui.com/
  68. 68. Ejemplo jQuery <html> <head> <title>jQuery Hello World</title> <script type=&quot;text/javascript&quot; src=&quot;jquery-1.2.6.min.js&quot;></script> </head> <body> <script type=&quot;text/javascript&quot;>$(document).ready(function(){ $(&quot;#msgid&quot;).html(&quot;This is Hello World by JQuery&quot;); });</script> This is Hello World by HTML <div id=&quot;msgid&quot;></div> </body> </html>
  69. 69. ¿Frameworks para móviles? http://www.jquerymobile.com/
  70. 70. 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
  71. 71. FUTURO DE JAVASCRIPT
  72. 72. Futuro de JavaScript
  73. 73. Futuro de JavaScript
  74. 74. Futuro de JavaScript ¿Adobe apuesta por HTML5? http://labs.adobe.com/technologies/wallaby/
  75. 75. Futuro de JavaScript Él ya lo anticipó
  76. 76. Futuro de JavaScript FLASH <object width=&quot;425&quot; height=&quot;349&quot;><param name=&quot;movie&quot; value=&quot;http://www.youtube.com/v/2OBZHB5I89A?version=3&amp;hl=es_ES&quot;></param><param name=&quot;allowFullScreen&quot; value=&quot;true&quot;></param><param name=&quot;allowscriptaccess&quot; value=&quot;always&quot;></param><embed src=&quot;http://www.youtube.com/v/2OBZHB5I89A?version=3&amp;hl=es_ES&quot; type=&quot;application/x-shockwave-flash&quot; width=&quot;425&quot; height=&quot;349&quot; allowscriptaccess=&quot;always&quot; allowfullscreen=&quot;true&quot;></embed></object> HTML5 <video src=&quot;movie.ogg&quot; controls=&quot;controls&quot;></video>
  77. 77. Futuro de JavaScript Algunos ejemplos https://developer.mozilla.org/es/demos/ http://www.20thingsilearned.com/ http://media.chikuyonok.ru/ambilight/
  78. 78. 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
  79. 79. JavaScript desde Cero @juansegui @acceseo Gracias por vuestra atención

×