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.

Curso de desarrollo web para principiantes

467 views

Published on

Curso de desarrollo HTML5

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Curso de desarrollo web para principiantes

  1. 1. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s Curso de Desarrollo web desde cero.
  2. 2. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s Sobre el instructor ➢ Alexandro Colorado es programador web desde el 2001 ➢ Es versado en tecnologías estándares de la w3c ➢ Es programador web profesional desde el 2003
  3. 3. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s Sobre el curso ➢ HTML, XHTML y HTML5 similitudes y diferencias ➢ Cuando HTML5 no es HTML ➢ CSS y su evolución ➢ Frameworks y micro lenguajes
  4. 4. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s Introducción a la web La web se basa en servidores distribuidos por todo el mundo WEB
  5. 5. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s Uno puede conectar estos puntos por direcciones IP DNS funciona como un directorio de nombres global
  6. 6. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s Al acceder un sitio, puedes ir por varios lugares hasta llegar a la dirección final
  7. 7. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s IP DNS HTTP Términos de la web
  8. 8. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s En la web existen sitios estáticos y dinámicos
  9. 9. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s Sitio Estático WEB Hola Mundo:
  10. 10. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s Base de Datos WEB Formulario: Enviar Sitio dinámico
  11. 11. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s Que es HTML? ➢ Significa Hypertext Memory Language ➢ Es lenguaje de marcado únicamente. – solo clasifica el contenido ➢ No existe procesos lógicos en HTML como en un lenguaje de programación ➢ HTML define encabezados, titulos, parrafos y estilos, etc.
  12. 12. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s Logo Remitente Despedida Oficio tradicional <img src=”mi_logo.jpg”> <p>Parrafo.... </p>
  13. 13. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s Práctica 1: Crea tu primera página
  14. 14. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s La evolución de HTML en el tiempo. ➢ La W3C gobierna el lenguaje y los estándares a usarse por los navegadores ➢ HTML ha subido de versión hasta 4.0.x (1999) ➢ XHTML fue la evolución de HTML con la intención de hacerlo mas estructurado (2000) ➢ HTML5 fue a su vez la evolución al hacerlo mas dinámico (2007)
  15. 15. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s Lo nuevo dentro de HTML5 ➢ Trae consigo una serie de soportes de API en el navegador – Geolocalización – Almacenamiento local – App Cache – Multimedia ➢ Nuevas etiquetas y estructuras de acuerdo a la web típica – <area>, <article>, <nav>, <audio>, <video> – Etc.
  16. 16. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s (x)HTML vs HTML5 ➢ <div id=”menu”></div> ➢ <div id=”header”></div> ➢ <div id=”footer”></div> ➢ <div id=”banners”></div> ➢ <nav></nav> ➢ <header></header> ➢ <footer></footer> ➢ <aside></aside>
  17. 17. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s Header Articulo: Titulo del articulo Footer NAV
  18. 18. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s Formularios en HTML5 ➢ Tipos de entradas <input type>: – search – email – url – tel – number – range – date – week – time – color – month
  19. 19. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s @grupocecacl alex@grupocecacl.com Validación
  20. 20. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s Practica 2: Estructura tu página personal
  21. 21. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s Filosofía del estilo y contenido ➢ HTML contiene atributos y etiquetas que pueden dar estilos – Ejemplo: <p color=”red”> ➢ El problema al haber muchas paginas el sitio se vuelve poco manejable
  22. 22. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s My Diario My Diario Pag 2 CSS
  23. 23. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s CSS hace que el estilo este centralizado en un solo archivo.
  24. 24. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s CSS es otro lenguaje estructurado H1 { color: blue; weight: bolder; } .boton { background-color: rgba(255, 230,150, .05); }
  25. 25. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s CSS y los estilos CSS tiene 3 formas de ser declarado: – Dentro del contenido, como atributo – Dentro del sitio – En su propio archivo 3 tipos de declaraciones: – Etiquetas, del html – Clases, las cuales pueden ser múltiples – Identificadores, las cuales son únicas
  26. 26. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s Práctica 3: Estiliza tu sitio
  27. 27. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s Lo nuevo de CSS3 ➢ CSS3 incluye nuevas propiedades que incluyen: ➢ Nuevos selectores ➢ Mejoras en el soporte de fuentes ➢ Nuevos espectros de color como: – CMYK – HLS (Hue, Luminosity, Saturation) – Opacidad ➢ Soporte para múltiples fondos ➢ Mejora en degradados, bordes, y sombras
  28. 28. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s Tipografías Font-face es un selector para importar nuevas fuentes: @font-face { font-family: Mi_nueva_fuente; src: funete.otf; }
  29. 29. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s Columnas Column-count – especifica el numero de columnas a dividir el contenido Column-width – el ancho de estas Column-gap – el espacio entre estas Column-rule – una division entre estas
  30. 30. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s Bordes y sombras #marco_imagen { border-image: url(“mi_imagen.png”) 12 repeat round; } .sombra { box-shadow: 10px 10px 5px #999; }
  31. 31. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s Uso de Medios (Media) ➢ Nos permite especificar el estilo de acuerdo a nuevas características de la pantalla ➢ Nos permite asignar estilos de acuerdo a esta condición. Ej:
  32. 32. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s <link rel=”stylesheet” media=”all and (orientation: portrait)” href=”vertical.css” />
  33. 33. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s @media screen and (min- width: 400px) { color: black; }
  34. 34. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s Mi sitio web Mi sitio web Tamaño color http://www.mypagina.com.mx
  35. 35. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s CSS3 e Imagenes Uso de filtros avanzados como en un editor de imagenes: – Multiply, screen, darker, lighten, color- dodge, color-burn, hard-light, etc. Posicionamiento en pantalla: – Background-size, background-clip, background-origin, background-attachment
  36. 36. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s Transformación, Transición, Animación Transformación estatica – cambia valor de una propiedad Transición dinámica – cambia entre dos estados Animación, “serie” de transiciones
  37. 37. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s Práctica 4: Mejora la forma de estilizar tu sitio aplicando CSS3
  38. 38. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s CSS y mas allá ➢ Frameworks de CSS ayuda a estandarizar los estilos ➢ Ingresan sus propios tipos de selectores, clases e identificadores ➢ Implementan condicionales para web responsiva
  39. 39. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s Práctica 5: PureCSS y Bootstrap
  40. 40. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s Javascript, programación en el navegador ➢ Es un lenguaje integrado al navegador ➢ puede insertar, manipular o eliminar contenido de un sitio de forma dinámica ➢ puede manipular el navegador y sus componentes como ventana, menú, paneles, etc.
  41. 41. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s Variables, condicionales y bucles. ➢ Las variables son contenedores, pueden asignar a un contenido o valor. ➢ Los arreglos son variables con múltiples valores. ➢ Booleanos son condicionales, sean opciones de verdadero o falso o pueden ser arbitrarias. ➢ Bucles son ciclos que se repiten seriada o infinitamente.
  42. 42. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s Practica 6: Creando un widget en Javascript
  43. 43. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s Uso de funciones y objetos ➢ Las funciones nos permite agrupar código y procesos. ➢ Objetos son componentes más completos que pueden incluir múltiples funciones. – Los objetos pueden incluir propiedades, métodos y otros objetos.
  44. 44. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s JQuery el framework de Javascript ➢ Es un framework de Javascript que toma los selectores de CSS para manipular el HTML. ➢ JQuery incluye una serie de funciones que hacen más facil su uso. ➢ Reimplementa tecnología como AJAX más fácil de procesar. ➢ JQuery trabaja en los navegadores más populares.
  45. 45. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s Como implementar JQuery <head> <script src="jquery.min.js"></script> </head>
  46. 46. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s Syntaxis en JQuery ➢ La syntaxis básica es: $(selector).acción() ➢ $ es un simbolo que define el acceso a Jquery ➢ Un (selector) que busca un elemento del HTML ➢ Una acción() de Jquery hecha en un elemento.
  47. 47. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s Función típica de JQuery $(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); });
  48. 48. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s Práctica 7: Instala y configura JQuery
  49. 49. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s Práctica 8: Instala y configura Bootstrap
  50. 50. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s Javascript y el backend ➢ AJAX varias tecnologías que incluyen Javascript para hacer sitios dinámicos – XML, Apache (servidor web) son las otras tecnologías. – Ejemplo: Crea formularios y envialos a una base de datos sin refrescar el sitio. ➢ Node.js es un servidor de backend de Javascript
  51. 51. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s Pyros y Nodejs

×