Curso de desarrollo web para principiantes
Descargar como ODP, PDF0 recomendaciones619 vistas
Este documento presenta un curso de desarrollo web para principiantes. El instructor, Alexandro Colorado, ha sido programador web desde 2001 y es experto en tecnologías estándares de la W3C. El curso cubre temas como HTML, CSS, JavaScript, frameworks y más. Incluye prácticas para que los estudiantes apliquen los conceptos aprendidos y desarrollen sus propias páginas y sitios web.
Curso de desarrollo web para principiantes
- 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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