El estudiante será capaz de elaborar diferentes tipos de soluciones gráficas digitales que permitan promocionar la marca, producto y/o servicio de una empresa; empleando su creatividad, originalidad, experiencia y trabajo colaborativo, satisfaciendo las necesidades del cliente.
Diseño en 2D para web (2014)
Plan 2014 / Actualizado
| Define la interfaz y navegación de la página web publicitaria para el cliente. | ||
|---|---|---|
| Propósito del corte El estudiante será capaz de definir la interfaz y navegación de la página web publicitaria, mediante el uso de técnicas de maquetación y prototipado, para su elaboración. | ||
| Contenido | Enlaces | Recomendación |
| Técnicas de diseño visual y definición del estilo • Equilibrio e inestabilidad • Simetría y asimetría • Economía y profusión • Coherencia y variación | La Comunicación Visual | Para comenzar con el corte 1, observa el video La Comunicación Visual, y elabora un mapa mental sobre el contenido que se aborda. |
| Técnicas de comunicación visual | Revisa la presentación Técnicas de comunicación visual y responde: ¿Por qué es importante conocer las técnicas de diseño visual en la creación de páginas web? Busca imágenes referentes al equilibrio-inestabilidad, simetría-asimetría, economía-profusión, coherencia-variación y analiza cómo puedes emplear estos conceptos en tu próxima página web. | |
| Maquetación con diseño web adaptable • Bocetado • Clasificación de objetos • Distribución de objetos Prototipado • Diseños preliminares de bajo coste | Cómo crear un boceto web o wireframe | Lee el artículo Cómo crear un boceto web o wireframe. A partir de la información elabora un infograma indicando qué es, los elementos que lo componen y sus ventajas, con el objetivo de que puedas recordar fácilmente como realizar uno. |
| Wireframes: Qué son y cómo crearlos | Después de leer la página Wireframes Qué son y cómo crearlos, crea tu primer boceto a mano alzada, o empleando las plantillas predeterminadas que se ofrecen como opción. Es importante que tengas en claro qué quieres desarrollar y con qué objetivo, puede ser para diseñar tu propia tienda online, para publicar artículos de interés, ofrecer podcast, etc. | |
| Mapas de navegación y wireframes | Observa el video Mapas de navegación y wireframes y elabora un mapa mental en el cual el tema principal sea Wireframes y mapas de navegación. | |
| Prototipado Mapa de navegación descriptivo | Que es un "MAPA DE NAVEGACIÓN" | Ve el video Qué es un Mapa de navegación, toma notas y desarrolla el mapa de navegación a mano alzada tomando como base el wireframe que has diseñado con anticipación. |
| Prototipado Mapa de navegación descriptivo Organización de la información (Carpetas y archivos) | Carpetas y Archivos de una Página Web | Observa el video Carpetas y archivos de una Página Web, toma nota de la forma correcta de nombrar y estructurar la organización de un sitio web. Posteriormente, retoma el mapa de navegación que creaste en la actividad anterior, y propón la organización correcta de la información de un sitio web. Considera que cada elemento del primer nivel de jerarquía corresponde a una carpeta y a sus archivos multimedia, imágenes, documentos, audios y videos. |
| Selección de material realizada por la profesora: Ann Margareth Meza Rodriguez Plantel 14 Milpa Alta |
||
| Revisión pedagógica: | ||
| Diseña una página web, utilizando herramientas para el tratamiento de elementos multimedia | ||
|---|---|---|
| Propósito del corte El estudiante será capaz de elaborar una página web, utilizando las herramientas para el tratamiento de elementos multimedia y lenguajes de programación; para obtener un producto de calidad de acuerdo con los requerimientos del cliente. | ||
| Contenido | Enlaces | Recomendación |
| Diseño de objetos para el sitio web - Imágenes fijas y animadas - Videos - Audios | Multimedia en HTML | A partir de la lectura de la página Multimedia en HTML, elabora un mapa mental que responda las siguientes preguntas: ¿Cómo se aplica el concepto multimedia en los sitios web?, ¿qué tipo de elementos multimedia se pueden integrar en un sitio web?, Describe a cada uno de dichos elementos: Imágenes, videos, objetos y audios. Por cada uno describe: qué es, en qué casos es mejor emplearlo, y si todos los navegadores soportan dicho elemento o qué sucede en caso de que no sea compatible el tipo de elemento. |
| Diseño de objetos para el sitio web Botones | Guía rápida del diseño de botones | Realiza la lectura de los artículos Botones Efectivos en Diseño Web: Guía Rápida y Qué es una CTA o call to action, para qué sirve y cómo funciona, y al concluir integra al mapa mental el tema, respondiendo las siguientes preguntas: ¿Qué función tienen los botones en las páginas web?, ¿Qué consideraciones debes seguir al diseñar botones para una página web (forma, color, texto, consistencia, ubicación, proporción, tamaño) ?, Diferencia entre acciones primarias y secundarias, checklist del diseño de botones. |
| Botones CTA | ||
| Diseño de objetos para el sitio web Menús | Tipos de menús para un sitio web | Lee la página 6 ejemplos de menú navegación para tu página web, elabora un cuadro comparativo en el cual por cada tipo de menú (onepage, vertical, horizontal, desplegable, megamenú y hamburguesa) responde: ¿en qué consiste?, características principales, ¿en qué casos es mejor utilizarlo?, ventajas, desventajas, imagen de ejemplo. |
| Diseño de objetos para el sitio web Banners | Diseño de banners con CANVA | Observa el video Diseño de banners para web presencia con Canva, y elabora un banner que refleje la identidad del sitio web y permita que al ingresar un usuario de manera inmediata pueda ver que productos o servicios ofrece el sitio. |
| Herramientas de diseño del sitio web • Javascript | ¿Por qué aprender Javascript? | Ve los videos ¿Por qué aprender Javascript? y Para qué sirve Javascript y elabora una tabla de comparación, con base en el boceto web que has diseñado, argumenta cuáles son las ventajas y desventajas al utilizar Javascript. |
| Para qué sirve Javascript | ||
| Herramientas de diseño del sitio web • PHP | ¿Qué es PHP? bien explicado | Mira los videos ¿Qué es PHP? y ¿Vale la pena aprender PHP en 2021? y en la tabla comparativa que ya elaboraste integra el tema y analiza cuál es la mejor opción para construir tu página o sitio web. |
| ¿Vale la pena aprender PHP en 2021? | ||
| Herramientas de diseño del sitio web • Python | ¿Qué es Python y para qué sirve? | Python es otro lenguaje de programación muy útil para programar páginas web. Revisa los videos ¿Qué es Python y para qué sirve? y ¿En qué se usa Phyton? para que tengas una idea más clara de lo que puedes realizar. En la tabla de comparación que has llenado con los otros lenguajes, integra el tema. |
| ¿En qué se usa Phyton? | ||
| Herramientas de diseño del sitio web • HTML | ¿Qué es HTML? - 10 cosas que debes saber | Observa el video ¿Qué es HTML? - 10 cosas que debes saber te introducirá al lenguaje HTML y su historia. Completa tu tabla comparativa argumentando los beneficios que tienes con este lenguaje de etiquetas. También responde ¿Qué es la CSS? |
| Herramientas de diseño del sitio web • HTML5 | ¿Qué es... HTML5? | Ve los videos ¿Qué es... HTML5? y HTML5 desde cero #1 Introducción relacionados con HTML5, finaliza tu tabla comparativa con este lenguaje de etiquetas. |
| HTML5 desde cero #1 Introducción | ||
| Herramientas de diseño del sitio web | ¿Qué lenguaje de programación debes aprender primero? | Si has realizado las actividades anteriores, ya tienes nociones de los lenguajes de programación que hemos visto. Junto con la tabla comparativa que elaboraste y con la ayuda de los videos ¿Qué lenguaje de programación debes aprender primero? y Lenguajes de programación que debes aprender este 2019 responde: ¿Qué lenguaje de programación te agrada? ¿Qué lenguaje de programación es mejor para elaborar tu boceto web? y ¿Qué lenguaje de programación es de los mejor pagados? |
| Lenguajes de programación que debes aprender este 2019 | ||
| Programación del Sitio Web 1.Sentencias HTML 2.Hojas de estilo CCS 3.Sentencias JavaScript | Tutorial para crear botones de forma sencilla en CSS y PNG | Observa el video Tutorial para crear botones de forma sencilla en CSS y PNG, y diseña todos los botones del sitio web creado en el corte anterior (mínimo 5, entre primarios y secundarios), tomando en cuenta el checklist del diseño de botones visto en el contenido específico anterior. |
| Programación del Sitio Web 1.Sentencias HTML 2.Hojas de estilo CCS 3.Sentencias JavaScript | Ejemplos de cómo escribir etiquetas HTML | Revisa las páginas Etiquetas HTML. Qué son y cómo se usan, Listado de elementos o etiquetas HTML5, CSS, Tutorial CSS comenzando con HTML + CSS, Diseñando una página web con HTML, CSS y Javascript, al concluir realiza las práctica propuesta en la página Laboratorio HTML-CSS-JavaScript, y observa qué cambios se muestran en cuanto se mueven los valores de los atributos, es importante que las revises de forma conjunta. |
| Lista de etiquetas HTML y HTML5 | ||
| Lista de elementos CSS y ejemplos | ||
| Práctica HTML y CSS | ||
| Práctica HTML, CSS y JavaScript | ||
| Laboratorio HTML-CSS-JavaScript | ||
| Selección de material realizada por la profesora: Ann Margareth Meza Rodriguez Plantel 14 Milpa Alta |
||
| Revisión pedagógica: | ||
| Publica una página web en un host gratuito o de pago | ||
|---|---|---|
| Propósito del corte El estudiante será capaz de publicar una página web en un host gratuito o de pago, mediante el uso de herramientas administrativas; para publicitar el bien o el servicio del cliente. | ||
| Contenido | Enlaces | Recomendación |
| Servidor para alojar página web • Dominio | ¿Qué es un Dominio? | Realiza la lectura de la página ¿Qué es un domino?, una vez que hayas finalizado, elabora un texto, en el cual se respondas las siguientes preguntas ¿Qué es un dominio y el ¿por qué de su importancia?, ¿cómo se estructuran los dominios y subdominios?, ¿Cuáles son los diferentes tipos de dominios que existen?, Describe de manera breve el ciclo de vida de un dominio, ¿Cómo se registra un dominio y cómo se elige la extensión de un dominio? |
| Servidor para alojar página web • Tipos de hosting | ¿Qué es un hosting o Alojamiento Web? ¿Tipos de hosting? | Observa el video ¿Qué es un hosting o Alojamiento Web? ¿Tipos de hosting? responde las siguientes preguntas: ¿Qué es hosting? ¿Qué tipos de hosting hay? ¿Cuál es la diferencia de un servidor cloud y un servidor virtual? y ¿Qué necesitas considerar para decidir qué hosting utilizar? |
| Servidor para alojar página web • Tipos de hosting • Instalación de aplicaciones | Descubre qué tipo de hosting necesitas para tu proyecto | Ve el video Descubre qué tipo de hosting necesitas para tu proyecto y elabora un cuadro comparativo, en el cual expliques los diferentes tipos de hosting; la información a comparar es: definición, características, para qué tipos de sitios es recomendable utilizarlos. |
| Publicación de sitio web • Tipos de archivos a subir por FTP | Subir archivos al servidor por FTP con FileZilla | Mira el video Subir archivos al servidor por FTP con FileZilla, enseguida descarga FileZilla y realiza la configuración necesaria para subir tus archivos y comenzar a administrarlos. Realiza las pruebas necesarias. |
| Publicación de sitio web • Implementación y pruebas de funcionamiento | ¿Qué es un entorno de pruebas? Aprende cómo usar uno | Ve el video ¿Qué es un entorno de prueba? Aprende cómo usar uno y responde las siguientes preguntas: ¿Qué es un entorno de prueba? ¿Qué características y ventajas tiene el entorno de prueba? ¿Es factible para que lo utilices en tu sitio web? |
| Publicación de sitio web • Administración | Administrar un sitio web | Observa el video Administrar un sitio web, ¿cuáles son las funciones de un administrador? Si tienes oportunidad de administrar uno, hazlo con las recomendaciones que se sugieren en el video. |
| Publicación de sitio web • Administración • Uso de aplicaciones | Hosting gratuito de Google, cómo subir tu página web | Mira el video Hosting gratuito de Google, cómo subir tu página web. Ahora prueba subir tu página o sitio web y adminístralo. |
| Selección de material realizada por la profesora: Ann Margareth Meza Rodriguez Plantel 14 Milpa Alta |
||
| Revisión pedagógica: | ||