Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Curso de desarrollo web para principiantes

547 vues

Publié le

Curso de desarrollo HTML5

Publié dans : Internet
  • Identifiez-vous pour voir les commentaires

  • Soyez le premier à aimer ceci

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

×