0

Desarrollo web Front End

267

Published on

Explicación del desarrollo web front end, html, css, js, jquery, angularjs.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
267
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Desarrollo web Front End"

  1. 1. DESARROLLO WEB 1. Introducción 2. HTML 3. CSS 4. JavaScript 5. jQuery 6. AngularJS 7. Apache Cordova(Phonegap) 8. Otras herramientas
  2. 2. INTRODUCCIÓN FRONTEND + + Comunicación HTTP BACKEND + + + +
  3. 3. DESARROLLO WEB 1. Introducción 2. HTML 3. CSS 4. JavaScript 5. jQuery 6. AngularJS 7. Apache Cordova(Phonegap) 8. Otras herramientas
  4. 4. HTML Es laestructurade lapáginaWeb. <!DOCTYPEhtml> <html> <head> <title>Titulodelapágina</title> </head> <body> <!--Uncomentario--> <div> <p>Unpárrafo.<p> </div> </body> </html> DEMO
  5. 5. DESARROLLO WEB 1. Introducción 2. HTML 3. CSS 4. JavaScript 5. jQuery 6. AngularJS 7. Apache Cordova(Phonegap) 8. Otras herramientas
  6. 6. CSS Se utilizaparadescribir elaspecto yelformato de lapáginaweb. #resultados{ border:2pxsolidblack; } #resultadosth{ color:red; } .highlight{ font-size:30px; } button{ background-color:#66FF44; } DEMO
  7. 7. CSS Existen librerías yframeworks que yatienen un CSS facilitandonos eltener que crear uno de cero. http://getbootstrap.com/ DEMO
  8. 8. DESARROLLO WEB 1. Introducción 2. HTML 3. CSS 4. JavaScript 5. jQuery 6. AngularJS 7. Apache Cordova(Phonegap) 8. Otras herramientas
  9. 9. JAVASCRIPT <> JAVA
  10. 10. JAVASCRIPT Es un lenguaje de programación interpretado mayormente utilizado parahacer las páginas web dinámicas. Es débilmente tipado. Es tipado dinámico. Basado en prototipos. Evaluación en tiempo de ejecución. Funciones de primeraclase.
  11. 11. JAVASCRIPT Se utilizaparadescribir elaspecto yelformato de lapáginaweb. varresultado; functionfactorial(n){ if(n===0){ return1; } returnn*factorial(n-1); } resultado=factorial(5); DEMO
  12. 12. DESARROLLO WEB 1. Introducción 2. HTML 3. CSS 4. JavaScript 5. jQuery 6. AngularJS 7. Apache Cordova(Phonegap) 8. Otras herramientas
  13. 13. http://www.jquery.com
  14. 14. JQUERY Se utilizaparasimplificar lasintaxis yparaevitar problemas de compatibilidad entre navegadores. $("button.continue").html("NextStep..."); varhiddenBox=$("#banner-message"); $("#button-containerbutton").on("click",function(event){ hiddenBox.show(); }); DEMO
  15. 15. DESARROLLO WEB 1. Introducción 2. HTML 3. CSS 4. JavaScript 5. jQuery 6. AngularJS 7. Apache Cordova(Phonegap) 8. Otras herramientas
  16. 16. http://www.angularjs.org
  17. 17. ANGULAR JS Es un framework JavaScriptque ayudaacrear "Single Page App"(SPA). Ayudaaestructurar elcódigo separándolo en Módulos que continen Controladores, Directivas, Filtros yServicios.
  18. 18. ANGULAR JS <!DOCTYPEhtml> <htmlng-app> <head> <scriptsrc="js/angular.min.js"></script> </head> <body> <label>Name:</label> <inputtype="text"ng-model="yourName"> <h1>Hello{{yourName}}!</h1> </body> </html> DEMO
  19. 19. DESARROLLO WEB 1. Introducción 2. HTML 3. CSS 4. JavaScript 5. jQuery 6. AngularJS 7. Apache Cordova(Phonegap) 8. Otras herramientas
  20. 20. http://cordova.apache.org
  21. 21. APACHE CORDOVA Es unaplataformaparaconstruir aplicaciones móviles nativas utilizando HTML, CSS yJavaScript. -CREARDEMO -
  22. 22. DESARROLLO WEB 1. Introducción 2. HTML 3. CSS 4. JavaScript 5. jQuery 6. AngularJS 7. Apache Cordova(Phonegap) 8. Otras herramientas
  23. 23. VERSIONADO
  24. 24. GIT GITHUB Elrepositorio open source más popular. Fácilde utilizar. De formagratuitasólo permite proyectos open source. https://github.com/
  25. 25. GIT BITBUCKET Fácilde utilizar. Permite repositorios privados paraun equipo de máximo 10 personas. https://bitbucket.org/
  26. 26. Estapresentación fué hechacon HTML + CSS + JS utilizando la libreríaReveal.js
  27. 27. ¿PREGUNTAS?
  28. 28. Los ejemplos ylapresentación se encuentran subidos en: https://github.com/ferc/presentacion_web MUCHAS GRACIAS.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×