Repositorio CB | Diseño en 2D para web (2014)
19203
page,page-id-19203,page-template-default,ajax_fade,page_not_loaded,,qode-child-theme-ver-1.0.0,qode-theme-ver-6.6,wpb-js-composer js-comp-ver-4.4.3,vc_responsive

Diseño en 2D para web (2014)

Plan 2014 / Actualizado

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.

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.
ContenidoEnlacesRecomendació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 VisualPara 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 visualRevisa 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 wireframeLee 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 crearlosDespué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 wireframesObserva 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 WebMira el video Carpetas y archivos de una Página Web, anota en una hoja a manera de glosario las consideraciones necesario para nombrar y estructurar la organización de un sitio web.
A partir del mapa de navegación que creaste en el contenido anterior, diseña la estructura de la organización de información, considera que a cada elemento del primer nivel de jerarquía de tu mapa le debe corresponder una carpeta y sus propios archivos multimedia: imágenes, documentos, audios y videos.
Una vez que hayas obtenido la organización, transforma como ejemplo 2 carpetas y 2 archivos de tu elección en url.
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.
ContenidoEnlacesRecomendación
Diseño de objetos para el sitio web
- Imágenes fijas y animadas
- Videos
- Audios
Multimedia en HTMLA 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 botonesRealiza 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 webLee 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 CANVAObserva 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 explicadoMira 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 saberObserva 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 PNGObserva 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 HTMLRevisa 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ácticas de HTML, CSS y HTML, CSS y JavaScript, en la herramienta de 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.
ContenidoEnlacesRecomendació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
Curso de Diseño Web, Capitulo 8 - Servidores Web (Internet)

Curso de Diseño Web, Capitulo 9 - Subir Pagina web a Internet
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 FileZillaMira 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 unoVe 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 webObserva 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 webMira 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: