Bootstrap vs wordpress
Preliminar al curso
Bienvenido al curso de Diseño Web Avanzado.
En este curso reforzaremos lo que se abordó en otros cursos y el objetivo será que refuerces los conocimientos de programación web con HTML y CSS. Además, potencializar tus capacidades de desarrollo con WordPress y el tema DIVI.
Al final deberás demostrar tu capacidad de gestión y producción de sitios para un cliente real.
Aprenderemos en un aula invertida
Durante décadas la enseñanza ha estado basada en seguir instrucciones dentro del salón de clase y hay una tendencia a cuestionar poco el conocimiento del profesor.
Este curso te invita a cambiar la forma de aprender
¿Sabías que sobre los temas que enseña tu profesor ha sido 100% autodidacta?
En este curso implementaremos el aula invertida donde principalmente tu serás el responsable de tu avance y siempre serás acompañado de tu docente para ampliar tu conocimiento.
En la imagen te muestro los aspectos esenciales del aula invertida.
Consideraciones para la ejecución correcta del curso.
Este curso requiere como antecedente que hayas aprobado las materias de Diseño Aplicado a la Web y de Programación para la Web.
Si no las cursaste con el Dr. Víctor Martínez es indispensable el estudio de los videos y ejercicios de las asignaturas pasadas.
Ejercicio 1: Coffee time
Diseño de un sitio responsivo con bootstrap
Instrucciones de ejercicio:
En este tutorial contarás con los siguientes elementos o recursos:
1) ZIP: recursos de imágenes mostradas en el tutorial
2) Vínculo a sitio de SUBLIME para descargar editor HTML
3) Video 1: realización de estructura HTML considerando las clases que se ocupan en Bootstrap.
4) Video 2: aplicación de contenidos para la página de inicio.
5) Video 3: definición de parámetros para hacer el sitio responsivo.
Video: primera parte
Video: segunda parte
Descarga las imágenes para realizar la segunda parte.
Video: tercera parte
Realiza la segunda sección y footer de la página de inicio.
Video: cuarta parte
Ajustes para hacer la página de inicio responsiva.
Video: quinta parte
Aplica un carrusel y una galería para el menú de la cafetería.
Ejercicio 2
Café en wordpress
Objetivo
Comprender y reforzar los conocimientos básicos en el uso de WordPress con el uso del tema DIVI. Además, implementar en una página el diseño responsivo.
2) Ingresar a tu cuenta de WordPress. Si no has instalado el tema de DIVI debes instalarlo, el siguiente video te dice como (a partir del minuto 12:55):
a. En ella deberás de realizar tu versión para escritorio de la misma manera con el mismo tipo de contenido del proyecto realizado para el primer parcial.
b. Usa mismos textos y mismas imágenes
c. Escoge la tipografía que más se asemeje a la utilizada en tu proyecto anterior.
5) Para verificar tu entrega, llena el siguiente forms
¡ÉXITO CON LA ACTIVIDAD!
Ejercicio 3: VIDEO en WordPress
Objetivos:
Comprender el uso de plug-ins e instalar un tema hijo. Además, ejecutar diversas inclusiones de video dentro de un sitio web por medio de WordPress y el tema DIVI.
INSTRUCCIONES
1) Ver el video sobre inclusión de videos por medio de DIVI.
2) Desarrollarás una landing page para algún comercio local que invite a aprovechar alguna promoción de la pequeña empresa. Ejemplos 2×1, cupón de descuento, cupón de regalo, etc.
3) Para conocer las características de una landing page revisa el siguiente video:
4) Elementos que debemos incluir de acuerdo con la parte técnica (elementos de video) y las características de una landing:
-
- Inclusión de un video como elemento de fondo
- Explicación de la promoción (dar una promesa clara)
- Explicar los beneficios del producto
- Llamada a la acción: formulario de contacto
- Video relacionado con el producto (desarrollado por el alumno y subido a un canal de Youtube (duración de 1 minuto, formato horizontal).
Nota importante: los elementos de video que coloques en el servidor de estudio K no deberán de pesar más de 6 MB (por eso será un pequeño video de unos 5 a 8 segundos). Para efectos prácticos y educativos, en este caso el video de fondo podrá tener 1200 píxeles de ancho en lugar de 1400 como se explica en el video (recuerda sacar tu regla de tres para la altura del video).
5) Como parte de las características solicitadas se pide colocar un formulario, para comprender como utilizar el módulo, ver el siguiente video.
6) Este formulario es el registro de control de trabajo de la actividad del 13 de octubre de 2022.
Deberás subir el URL de tu página terminada la estructura de la página con la inclusión del video de fondo (el video realizado por el alumno de promoción se deberá entregar el 12 de octubre de 2022 a las 23:59). verificar tu trabajo en clase, llena el siguiente forms:
La fecha límite es el 13 de octubre a las 23:59
¡ÉXITO CON LA ACTIVIDAD!
Un poco de seguridad para WP
Instrucciones de ejercicio:
Para evitar la vulnerabilidad es necesario proteger nuestra instalación de WordPress. Por lo cual se le instalará un plug-in de seguridad.
Este será el plug-in que instalarás
Video 1: ver el tutorial y activar el plug-in y hacer las configuraciones recomendadas.
Video 2: cambiar mi pass dentro de WP.