Introducción al Desarrollo de Páginas Web
Transcript of Introducción al Desarrollo de Páginas Web
![Page 1: Introducción al Desarrollo de Páginas Web](https://reader034.fdocuments.net/reader034/viewer/2022052004/6285b16fa5412f597a6267fe/html5/thumbnails/1.jpg)
Plantel Sahuayo
Introducción al Desarrollo de Páginas Web
Programación y aplicaciones web y Móviles
Clave 23PAWM-2018-EXT-SA-44
Duración del programa: 120 hrs
Nombre del diseñador: Carlos Eduardo Fonseca Sandoval
Fecha de elaboración: 15/12/2017
Dirección Técnico-Académica / Programas de Estudio
![Page 2: Introducción al Desarrollo de Páginas Web](https://reader034.fdocuments.net/reader034/viewer/2022052004/6285b16fa5412f597a6267fe/html5/thumbnails/2.jpg)
Lic. Iván Madero NaranjoDirector General
Ing. Jorge Conejo CárdenasDirector Técnico Académico
Lic. Susana Ochoa LópezDirector de plantel
Lic. Manuel Vladimir Carachure Juárez Jefe de Capacitación
Ing. Carlos Eduardo Fonseca SandovalInstructor
DIRECTORIO
![Page 3: Introducción al Desarrollo de Páginas Web](https://reader034.fdocuments.net/reader034/viewer/2022052004/6285b16fa5412f597a6267fe/html5/thumbnails/3.jpg)
PRESENTACIÓN
Con el auge de las Tecnologías de la Información y Comunicación, se vuelveindispensable tener presencia en internet y dar a conocer tu marca, tus productoso ideas. Por tanto, es necesario conocer las tecnologías que permiten que esto seaposible. El desarrollo web en las últimas décadas ha ido transformando eimpulsado la evolución de Internet, cada día son más grandes los avances,involucrando directamente el ingenio propio de cada desarrollador.Las etapas del desarrollo de los sitios web actuales y sus lenguajes de programaciónson bien complejos por su código extenso y variado. Por lo tanto se requiereconocer herramientas que proporciona la actualidad para desarrollardinámicamente las páginas web.
![Page 4: Introducción al Desarrollo de Páginas Web](https://reader034.fdocuments.net/reader034/viewer/2022052004/6285b16fa5412f597a6267fe/html5/thumbnails/4.jpg)
POBLACIÓN OBJETO
El curso está dirigido a la población en general; jóvenes, profesionistas, estudiantes,amas de casa, etc.
![Page 5: Introducción al Desarrollo de Páginas Web](https://reader034.fdocuments.net/reader034/viewer/2022052004/6285b16fa5412f597a6267fe/html5/thumbnails/5.jpg)
PERFIL DE INGRESO
Personas mayores de 15 años.
Saber leer y escribir.
Conocimientos básicos del manejo de la computadora.
PERFIL DE EGRESO
Al finalizar el curso, el egresado podrá realizar páginas web que se adaptan acualquier pantalla y puede ser visto en cualquier dispositivo, tanto computadoras,tabletas y teléfonos inteligentes. Conocerá y aplicará las tecnologías principales parael desarrollo de las páginas como son HTML5, CSS3 y Javascript . Además aplicará lasmedidas de seguridad e higiene pertinente en el equipo de cómputo utilizado.
![Page 6: Introducción al Desarrollo de Páginas Web](https://reader034.fdocuments.net/reader034/viewer/2022052004/6285b16fa5412f597a6267fe/html5/thumbnails/6.jpg)
El capacitando conocerá el proceso de creación de una página web básica así comolas tecnologías involucradas para el desarrollo de la misma. Podrá crear elmaquetado de una página con el lenguaje HTML5, implementará el diseño con eluso de las hojas de estilo CSS3 y agregará el comportamiento de las páginas con ellenguaje de programación Javascript. Además tomará las medidas de seguridad ehigiene pertinente en el equipo de cómputo utilizado, ejercerá su capacitación deuna manera eficiente y de calidad en cada una de las actividades que desarrolle.
OBJETIVO GENERAL DEL PROGRAMA
![Page 7: Introducción al Desarrollo de Páginas Web](https://reader034.fdocuments.net/reader034/viewer/2022052004/6285b16fa5412f597a6267fe/html5/thumbnails/7.jpg)
ESTRUCTURA DEL PROGRAMA
Modular
MODALIDAD DIDACTICA
Teórico - Práctico
![Page 8: Introducción al Desarrollo de Páginas Web](https://reader034.fdocuments.net/reader034/viewer/2022052004/6285b16fa5412f597a6267fe/html5/thumbnails/8.jpg)
MAPA CONCEPTUAL
Introducción
Generalidades Herramientas HTML, CSS y JS Sintaxis Estructura General
![Page 9: Introducción al Desarrollo de Páginas Web](https://reader034.fdocuments.net/reader034/viewer/2022052004/6285b16fa5412f597a6267fe/html5/thumbnails/9.jpg)
SUB-MÓDULO DE APRENDIZAJE: 1. IntroducciónDURACIÓN
“15 hrs”OBJETIVO DEL SUB-MODULO: Conocer los aspectos generales de las páginas web y los elementos que las componen.
TEMAS Y SUBTEMASTÉCNICA
DIDÁCTICAAPOYOS
DIDÁCTICOSACTIVIDADES INSTRUCTOR EVALUACIÓN
1.1 Generalidades Expositiva y Demostrativa
Proyector, PC Exponer una breve historia de las páginas web, las diferentes versiones y las características actuales.
Formativa
1.2 Herramientas Expositiva y Demostrativa
Proyector, PC Presentar las herramientas y recursos útiles necesarios para el desarrollo de una página web.
Formativa
1.3 HTML, CSS y JS Expositiva y Demostrativa
Proyector, PC Exponer las tecnologías disponibles para el desarrollo de una página web y la interacción entre ellas.
Formativa
1.4 Sintaxis Expositiva y Demostrativa
Proyector, PC Presentar la sintaxis y las reglas para la definición de una página web.
Formativa
1.5 Estructura General Expositiva y Demostrativa
Proyector, PC Exponer la estructura básica para cualquier diseño y desarrollo de una página web.
Formativa
![Page 10: Introducción al Desarrollo de Páginas Web](https://reader034.fdocuments.net/reader034/viewer/2022052004/6285b16fa5412f597a6267fe/html5/thumbnails/10.jpg)
MAPA CONCEPTUAL
HTML5
Etiquetas y Atributos
Contenedores Textos Multimedia Navegación
![Page 11: Introducción al Desarrollo de Páginas Web](https://reader034.fdocuments.net/reader034/viewer/2022052004/6285b16fa5412f597a6267fe/html5/thumbnails/11.jpg)
SUB-MÓDULO DE APRENDIZAJE: 2. HTML5
DURACIÓN“30 hrs”
OBJETIVO DEL SUB-MODULO: Conocer la definición del documento HTML5y utilizar las etiquetas para realizar cualquier tipo de maquetado y navegación de una página web.
TEMAS Y SUBTEMASTÉCNICA
DIDÁCTICAAPOYOS
DIDÁCTICOSACTIVIDADES INSTRUCTOR EVALUACIÓN
2.1 Etiquetas y Atributos Expositiva y Demostrativa
Proyector, PC Exponer las diferentes etiquetas y atributos principales y más usados en HTML.
Formativa
2.2 Contenedores Expositiva y Demostrativa
Proyector, PC Presentar los contenedores y su importancia semántica en un documento.
Formativa
2.3 Textos Expositiva y Demostrativa
Proyector, PC Presentar la forma de insertar texto, independientemente del idioma, en un documento.
Formativa
2.4 Multimedia Expositiva y Demostrativa
Proyector, PC Exponer el proceso para insertar elementos multimedia tales como: imágenes, audio y video.
Formativa
2.5 Navegación Expositiva y Demostrativa
Proyector, PC Presentar la forma de navegar dentro y fuera de un documento mediante enlaces.
Formativa
![Page 12: Introducción al Desarrollo de Páginas Web](https://reader034.fdocuments.net/reader034/viewer/2022052004/6285b16fa5412f597a6267fe/html5/thumbnails/12.jpg)
MAPA CONCEPTUAL
CSS3
SelectoresFondos, Bordes,
Colores y FuentesClases Animaciones
Diseño Adaptativo: Fundamentos
![Page 13: Introducción al Desarrollo de Páginas Web](https://reader034.fdocuments.net/reader034/viewer/2022052004/6285b16fa5412f597a6267fe/html5/thumbnails/13.jpg)
SUB-MÓDULO DE APRENDIZAJE: 3. CSS3DURACIÓN
“30 hrs”OBJETIVO DEL SUB-MODULO: Conocer y elaborar hojas de estilo para establecer el diseño en un documento HTML utilizando CSS3.
TEMAS Y SUBTEMASTÉCNICA
DIDÁCTICAAPOYOS
DIDÁCTICOSACTIVIDADES INSTRUCTOR EVALUACIÓN
3.1 Selectores Expositiva y Demostrativa
Proyector, PC Exponer la naturaleza y funcionalidad de los selectores y pseudoselectoresde CSS.
Formativa
3.2 Estilos Expositiva y Demostrativa
Proyector, PC Presentar las propiedades y atributos necesarios para establecer fondos, bordes, colores, sombras, fuentes, etc., a cualquier elemento.
Formativa
3.3 Clases Expositiva y Demostrativa
Proyector, PC Exponer las reglas para la creación y jerarquía de clases.
Formativa
3.4 Animaciones Expositiva y Demostrativa
Proyector, PC Presentar el proceso básico la realización de animaciones en CSS3.
Formativa
3.5 Diseño Adaptativo: Fundamentos
Expositiva y Demostrativa
Proyector, PC Exponer los fundamentos para para lograr un diseño adaptable a cualquier resolución de pantalla.
Formativa
![Page 14: Introducción al Desarrollo de Páginas Web](https://reader034.fdocuments.net/reader034/viewer/2022052004/6285b16fa5412f597a6267fe/html5/thumbnails/14.jpg)
MAPA CONCEPTUAL
JavaScript
SintaxisOperadores y
VariablesEstructuras de
ControlObjetos Eventos
![Page 15: Introducción al Desarrollo de Páginas Web](https://reader034.fdocuments.net/reader034/viewer/2022052004/6285b16fa5412f597a6267fe/html5/thumbnails/15.jpg)
SUB-MÓDULO DE APRENDIZAJE: 4. JavaScript
DURACIÓN“30 hrs”
OBJETIVO DEL SUB-MODULO: Conocer los aspectos básicos del lenguaje de programación de JavaScript y aprender a agregar funcionalidad a los documentos HTML.
TEMAS Y SUBTEMASTÉCNICA
DIDÁCTICAAPOYOS
DIDÁCTICOSACTIVIDADES INSTRUCTOR EVALUACIÓN
4.1 Sintaxis Expositiva y Demostrativa
Proyector, PC Presentar las características y sintaxis del lenguaje de programación de JavaScript.
Formativa
4.2 Operadores y Variables Expositiva y Demostrativa
Proyector, PC Exponer los operadores y el uso de variables.
Formativa
4.3 Estructuras de Control Expositiva y Demostrativa
Proyector, PC Presentar las diferentes estructuras de control existentes en JavaScript.
Formativa
4.4 Objetos Expositiva y Demostrativa
Proyector, PC Exponer el uso e implementación de objetos en JavaScript.
Formativa
4.5 Eventos Expositiva y Demostrativa
Proyector, PC Presentar la creación de Eventos en Javascript
Formativa
![Page 16: Introducción al Desarrollo de Páginas Web](https://reader034.fdocuments.net/reader034/viewer/2022052004/6285b16fa5412f597a6267fe/html5/thumbnails/16.jpg)
MAPA CONCEPTUAL
Interacción
Formularios Librerias JS Librerías CSS Flexbox
![Page 17: Introducción al Desarrollo de Páginas Web](https://reader034.fdocuments.net/reader034/viewer/2022052004/6285b16fa5412f597a6267fe/html5/thumbnails/17.jpg)
SUB-MÓDULO DE APRENDIZAJE: 5. Complementos
DURACIÓN“15 hrs”
OBJETIVO DEL SUB-MODULO: Conocer y aplicar los aspectos fundamentales de los formularios y su interacción con las páginas mediante el uso de librerías de JavaScript y CSS3, además del diseño web mediante Flexbox.
TEMAS Y SUBTEMASTÉCNICA
DIDÁCTICAAPOYOS
DIDÁCTICOSACTIVIDADES INSTRUCTOR EVALUACIÓN
4.1 Formularios Expositiva y Demostrativa
Proyector, PC Exponer las etiquetas para la elaboración de los formularios así como su interacción mediante JS.
Formativa
4.2 Librerías JS Expositiva y Demostrativa
Proyector, PC Presentar el uso e implementación librerías para facilitar la interacción de las páginas web tales como JQuery.
Formativa
4.3 Librerías CSS Expositiva y Demostrativa
Proyector, PC Presentar el uso e implementación de librerías CSS para facilitar el diseño de una página web tales como Bootstrap.
Formativa
4.4 Flexbox Expositiva y Demostrativa
Proyector, PC Exponer el uso e implementación de diseño adaptativo mediante Flexbox.
Formativa
![Page 18: Introducción al Desarrollo de Páginas Web](https://reader034.fdocuments.net/reader034/viewer/2022052004/6285b16fa5412f597a6267fe/html5/thumbnails/18.jpg)
MATERIALES NOCONSUMIBLES A UTILIZAR
CANTIDAD DESCRIPCIÓNUNIDAD
![Page 19: Introducción al Desarrollo de Páginas Web](https://reader034.fdocuments.net/reader034/viewer/2022052004/6285b16fa5412f597a6267fe/html5/thumbnails/19.jpg)
CRÉDITOS
Lic. Iván Madero NaranjoDirector General
“Lic. Susana Ochoa López ”Director de plantel
“Lic. Manuel Vladimir Carachure Juárez ” Jefe de Capacitación
Área Técnico AcadémicaAsesoría pedagógica
“Ing. Carlos Eduardo Fonseca Sandoval”Diseñó y elaboró
![Page 20: Introducción al Desarrollo de Páginas Web](https://reader034.fdocuments.net/reader034/viewer/2022052004/6285b16fa5412f597a6267fe/html5/thumbnails/20.jpg)
BIBLIOGRAFÍA
“McDONALD, Matthew. HTML5: The Missing Manual. 2nd Edition. EUA: O’Reilly, 2014.”
“GAUCHAT, John. HTML5 for Masterminds. 3rd Edition. EUA: CreateSpaceIndependent Publishing Platform, 2017.”
“RUVALCABA, Zak. & DELAMATER, Mary. Murach's JavaScript and jQuery. 3rd Edition. EUA: Mike Murach & Associates. 2017.”
“HUSSAIN, Frahaan. Responsive Web Design by Example. 3rd Edition. EUA: PacktPublishing. 2017.”