CUADERNO DE TRABAJO DE DE PRIMER PARCIAL DE SUBMODULO I
27 Pages • 7,971 Words • PDF • 1.5 MB
Uploaded at 2021-09-24 16:21
This document was submitted by our user and they confirm that they have the consent to share it. Assuming that you are writer or own the copyright of this document, report to us by using this DMCA report button.
“2021. Año de la Consumación de la Independencia y la Grandeza de México”
CBT NO 2 JOCOTITLÁN CCT 15ECT0159G MÓDULO III DESARROLLA APLICACIONES WEB Y MÓVILES SUBMÓDULO I Desarrolla aplicaciones web
CUARTO SEMESTRE NOMBRE DEL DOCENTE: MTRA. FANNY GONZÁLEZ MONROY
SEGUNDO SEMESTRE DEL CICLO ESCOLAR 2020-2021
CBT NO 2 JOCOTITLÁN
SUBMÓDULO I Desarrolla aplicaciones web Cuarto Semestre
PRESENTACIÓN ¡Estimado estudiante! La Educación Tecnológica en nuestro país, continuamente motiva cambios estructurales que repercuten en la reordenación de la política educativa del nivel medio superior hacia una modernidad que contrarreste el rezago científico-tecnológico originado por el fenómeno de la globalización. Hoy en día, los jóvenes de la Educación Media Superior transitan hacia la vida adulta, interactúan en un mundo que evoluciona de la sociedad del conocimiento hacia la sociedad del aprendizaje y la innovación (Joseph Stiglitz, 2014; Ken Robinson, 2015; Richard Gerver, 2013; y Marc Prensky, 2015; entre otros); procesan enormes cantidades de información a gran velocidad y comprenden y utilizan, de manera simultánea, la tecnología que forma parte de su entorno cotidiano y es relevante para sus intereses. Con el auge de la globalización, ha provocado que sea más habitual la utilización de las computadoras en las actividades diarias del ser humano, por ejemplo, como medio que permita la comunicación e intercambio de información, la cual se genera con una rapidez exorbitante; derivado de la necesidad de su uso radica la importancia de la programación, refiriéndonos al ámbito informático, ya que hace posible la adaptación del potencial que se deriva del uso de las computadoras sujetas a las necesidades del hombre, para la generación de procesos automáticos que tengan un beneficio generalizado en la sociedad. Es por eso que la carrera de Técnico en Informática, ofrece las competencias profesionales que permiten al estudiante realizar actividades dirigidas a analizar, diseñar, desarrollar, instalar y mantener software de aplicación tomando como base los requerimientos del usuario. Todas estas competencias posibilitan al egresado su incorporación al mundo laboral o desarrollar procesos productivos independientes, de acuerdo con sus intereses profesionales y necesidades de su entorno social. De acuerdo al trayecto formativo de esta carrera, posibilita al técnico al ámbito laboral en diversos sitios de inserción como: edición de software y edición de software integrada con la reproducción, servicios de diseño de sistemas de cómputo y servicios relacionados, escuelas de computación del sector privado y/o público, edición y difusión de contenido exclusivamente a través de internet, servicios de búsqueda en la red, entre otros. La formación profesional, comienza en primer semestre con la materia Dinámicas Productivas Regionales, con una carga de 80 horas, esta es común a todas las carreras técnicas del Bachillerato
CBT NO 2 JOCOTITLÁN
SUBMÓDULO I Desarrolla aplicaciones web Cuarto Semestre
Tecnológico estatal, misma que retoma los nodos productivos establecidos en la entidad; en los semestres subsecuentes la carrera técnica se desarrolla a través una estructura modular, haciendo mención que los primeros tres módulos tienen una duración de 340 horas cada uno y los dos últimos de 240, dando un total de 1580 horas. Cabe destacar que los módulos de formación profesional tienen carácter transdisciplinario, por cuanto corresponden con objetos y procesos de transformación que implica la integración de saberes de distintas disciplinas. La estructura reticular que se establece para este plan de estudios está integrada de 43 materias y 5 Módulos. Comprende una carga horaria 41 horas/semana/mes en promedio por semestre. Los estudiantes laboran en promedio un total de 8 horas diarias. Los módulos que integra esta carrera son: Módulo I. Desarrolla e instala software de aplicación utilizando programación estructurada, con almacenamiento persistente de los datos. Módulo II. Desarrolla software de aplicación utilizando programación 16 orientada a objetos, con almacenamiento persistente de los datos. Módulo III. Desarrolla aplicaciones web y móviles. Módulo IV. Administra sistemas operativos de aplicaciones y servicios. Módulo V. Determina las competencias profesionales a través de la estadía. Así, el presente “Cuaderno de trabajo” es producto de la responsabilidad, compromiso y la colaboración de la maestra de la institución, para que desarrolles los conocimientos, las habilidades y los valores del Submódulo I Desarrolla aplicaciones web durante el 4° semestre. La Mtra. Fanny González Monroy del CBT NO 2 JOCOTITLÁN te da la más cordial bienvenida al 4° semestre, hacerte saber que una de mi mayor preocupación estriba en ofrecerte con calidad el servicio educativo que recibes en esta institución, con fundamento en las políticas educativas emanadas del Gobierno del Estado de México. Esperando que aproveches el contenido al máximo, te deseo éxito en la realización de las actividades y ejercicios presentes en este material. ¡Mucho Éxito estimado Estudiante!
CBT NO 2 JOCOTITLÁN
SUBMÓDULO I Desarrolla aplicaciones web Cuarto Semestre
LINEAMIENTOS DE TRABAJO Me permito enlistar los lineamentos de normas de convivencia, que se deberán llevar a cabo durante el transcurso del semestre, en el Submódulo I Desarrolla aplicaciones web 1. Realizar las actividades como se indican cumpliendo con las fechas estipuladas. 2. El docente enviara el CUADERNO DE TRABAJO AL ALUMNO al correo institucional del alumno, se compartirá el cuaderno de trabajo por medio del grupo de WhatsApp grupal que habrá donde solo se usara para compartir el cuaderno, ya que las dudas serán por vía telefónica y las evidencias al correo ya que no se cuenta con suficiente memoria para recibir y trabajos por WhatsApp. 3. El enlace del grupo de WhatsApp es https://chat.whatsapp.com/LOB2EGPHfMjHYt9YOLaYzY para que pueda tener información de los seguimientos y del cuaderno. 4. Cada semana hay una temática a leer para poder resolver la actividad solicitada. 5. En caso de tener dudas realizar una llamada telefónica al teléfono 7121073847 en el horario de clase así mismo se realizará la retroalimentación de los temas, evitar hablar después de las ocho de la noche. 6. Las entregas de actividades serán al correo [email protected] colocando en la hoja de la actividad el nombre del alumno, módulo, submódulo y grupo.
MATERIALES DE TRABAJO •
Páginas de lecturas o videos
•
Cuaderno de trabajo
DATOS DE IDENTIFICACIÓN DE LA ASIGNATURA
CBT NO 2 JOCOTITLÁN
SUBMÓDULO I Desarrolla aplicaciones web Cuarto Semestre
MÓDULO I
•Desarrolla aplicaciones web y móviles
SUBMÓDULO I
•Desarrolla aplicaciones web
COMPONENTE
•PROFESIONAL
CAMPO DISCIPLINAR
•FORMACIÓN PROFESIONAL
CARGA HORARIA
•CUATRO HORAS A LA SEMANA
PROPÓSITO DEL MÓDULO I Desarrolla aplicaciones web y móviles Instalar y desarrollar software de aplicación utilizando programación estructurada y orientada a objetos en ambientes web y móviles, con almacenamiento persistente de datos, así como la configuración y administración de plataforma e-learning y comercio electrónico. SUBMÓDULO I Desarrolla aplicaciones web El Submódulo I. Desarrolla aplicaciones web, tiene como finalidad introducir al estudiante técnico bachiller en el desarrollo de aplicaciones web, estableciendo los fundamentos teórico prácticos de software de diseño, WYSIWYG y lenguaje de páginas dinámicas. Está integrado por una unidad de aprendizaje, la cual está conformada por 3 resultados de aprendizaje, que contempla el diseño de interfaces, el desarrollo
CBT NO 2 JOCOTITLÁN
SUBMÓDULO I Desarrolla aplicaciones web Cuarto Semestre
de aplicaciones web estáticas y dinámicas.
RESULTADOS DE APRENDIZAJES
1. Desarrolla aplicaciones web estáticas y dinámicas
Diseña los elementos visuales de la interfaz web, utilizando herramientas de diseño gráfico digital.
Desarrolla aplicaciones web estáticas, a partir del modelado de catálogo de productos existentes en el mercado.
Desarrolla aplicaciones web dinámicas utilizando sistemas de gestión de contenidos, incorporando almacenamiento persistente de los datos.
ALINEACIÓN DE COMPETENCIAS Y DOSIFICACIÓN DEL PROGRAMA
De acuerdo al número de semanas a trabajar, considerando los tiempos de propedéutico, vacaciones, etc. PERIODO DE
RESULTADO DE
EVALUACIÓN
APRENDIZAJE
COMPETENCIA GENÉRICA
COMPETENCIA DISCIPLINAR
M1 Construye e interpreta modelos • Primer Parcial
Diseña
los
visuales
de
elementos la
web,
interfaz
utilizando
herramientas de diseño gráfico digital.
8.3
Asume
una
actitud
matemáticos
deterministas
o
constructiva, congruente con
aleatorios mediante la aplicación de
los
procedimientos
conocimientos
habilidades
con
los
y que
algebraicos,
aritméticos, geométricos
y
cuenta dentro de distintos
variacionales, para la comprensión y
equipos de trabajo.
análisis
de
situaciones
reales
o
formales • Segundo Parcial
Desarrolla
aplicaciones
8.3
Asume
una
actitud
web estáticas, a partir del
constructiva, congruente con
M8 Interpreta tablas, gráficas, mapas,
modelado de catálogo de
los
diagramas y textos con símbolos
productos existentes en el
habilidades
mercado.
cuenta dentro de distintos
conocimientos con
los
y que
matemáticos y científicos.
CBT NO 2 JOCOTITLÁN
SUBMÓDULO I Desarrolla aplicaciones web Cuarto Semestre
equipos de trabajo. •
Tercer Parcial
Desarrolla
aplicaciones
8.3
Asume
una
actitud
web dinámicas utilizando
constructiva, congruente con
sistemas de gestión de
los
contenidos, incorporando
habilidades
almacenamiento
cuenta dentro de distintos
persistente de los datos.
equipos de trabajo.
conocimientos con
los
y que
M8 Interpreta tablas, gráficas, mapas, diagramas y textos con símbolos matemáticos y científicos.
ESTRATEGIA DE EVALUACIÓN PRIMER PARCIAL RESULTADO DE APRENDIZAJES
PRODUCTO ESPERADO
INSTRUMENTO DE EVALUACIÓN
AGENTE EVALUADOR
% EVALUACIÓN SUMATIVA
Lista de cotejo
HE
15%
Diseño de la interfaz
Lista de cotejo
HE
35%
Infografía de herramientas
Lista de cotejo
HE
15%
Interfaz gráfico de pagina
Lista de cotejo
HE
35%
Mapa mental de diseño Diseña
los
elementos
visuales de la interfaz web, utilizando herramientas de diseño gráfico digital
gráfico de herramientas
SUMA
PRIMER PARCIAL Diagnóstico 1. ¿Qué significa html? 2. En que páginas se puede realizar una página web 3. ¿Qué entiendes por una herramienta digital? 4. ¿Cómo consideras que debe de ser el diseño de una página web? 5. ¿Cuáles son los elementos básicos para la elaboración de un diseño de página web?
100
CBT NO 2 JOCOTITLÁN
SUBMÓDULO I Desarrolla aplicaciones web Cuarto Semestre
PRIMER PARCIAL
20 HORAS
Resultado de Aprendizaje Diseña los elementos visuales de la interfaz web,
utilizando
herramientas
de
diseño
Competencia genérica
gráfico digital
Trabaja en forma colaborativa
ATRIBUTO:
8. Participa y colabora de manera efectiva en
8.3
Asume
congruente
una con
actitud los
constructiva,
conocimientos
equipos diversos
y
habilidades con los que cuenta dentro de distintos equipos de trabajo
Contenido Específico Interfaz de software de diseño. Operaciones básicas
Competencia disciplinar
Crear objetos Trabajar con objetos Aplicar rellenos Aplicar color de borde, grosor y estilos Soldar, intersectar y recortar Transformar objetos Dibujar libremente
M1
Dibujar a partir de nodos
matemáticos
Aplicar efectos tridimensionales
mediante la aplicación de procedimientos
Efectos varios con imágenes
aritméticos,
de
interpreta
deterministas algebraicos,
o
modelos aleatorios
geométricos
de situaciones reales o formales
Producto esperado mental
e
y
variacionales, para la comprensión y análisis
Trabajar con textos
Mapa
Construye
diseño
herramientas Diseño de la interfaz Infografía de herramientas Interfaz gráfico de pagina
gráfico
de
CBT NO 2 JOCOTITLÁN
SUBMÓDULO I Desarrolla aplicaciones web Cuarto Semestre
ACTIVIDADES DE APRENDIZAJE ACTIVIDADES A REALIZAR
ESPECIFICACIONES A computadora con el uso de procesador de textos, en caso de no tener ordenador se podrá realizar en una hoja en blanco con letra legible y colores. El trabajo se debra realizar en padetl para colocar
Mapa mental de diseño gráfico de herramientas
la información e imágenes dentro de la línea del
Diseño de la interfaz
tiempo
Infografía de herramientas Interfaz gráfico de pagina Elaboración de una presentación por medio de en línea de forma libre Prezzie o Genially
La infografía se deberá realizar por medio del programa CANVA Las evidencias de las actividades se tendrán que enviar en foto legible al correo institucional del docente [email protected] se solicita enviar al correo por la saturación de información en el celular y no tengo espacio para recibir información.
Materiales de apoyo para análisis de formación en la actividad 1 Interfaz de software de diseño. El diseño de la interfaz de usuario crea un medio eficaz de comunicación entre los seres humanos y la computadora. Siguiendo un conjunto de principios de diseño de la interfaz, el diseño identifica los objetos y acciones de ésta y luego crea una pantalla que constituye la base del prototipo de la interfaz de usuario. ¿Cuáles son los pasos? El diseño de la interfaz de usuario comienza con la identificación de los requerimientos del usuario, la tarea y el ambiente. Una vez identificadas las tareas del usuario, se crean y analizan los escenarios para éste y se
CBT NO 2 JOCOTITLÁN
SUBMÓDULO I Desarrolla aplicaciones web Cuarto Semestre
define un conjunto de objetos y acciones de la interfaz. Esto forma la base para crear una plantilla de la pantalla que ilustra el diseño gráfico y la colocación de los iconos, la definición de textos descriptivos, la especificación y títulos de las ventanas, y la especificación de aspectos mayores y menores del menú. Con el empleo de herramientas, se hace el prototipo, se implementa en definitiva el modelo del diseño y se evalúa la calidad del resultado. El plano de una casa (su diseño arquitectónico) no está completo sin la representación de puertas, ventanas y conexiones de servicios para el agua, electricidad y teléfono (por no mencionar la televisión por cable). Las «puertas, ventanas y conexiones de servicios» del software informático es lo que constituye el diseño de la interfaz de usuario El diseño de la interfaz se centra en tres áreas de interés: (1) el diseño de la interfaz entre los componentes del software; (2) el diseño de las interfaces entre el software y los otros productores y consumidores de información no humanos (esto es, otras entidades externas) y (3) el diseño de la interfaz entre el hombre (esto es, el usuario) y la computadora Operaciones básicas Existen tres reglas de oro para el diseño de la interfaz: 1.
Dejar el control al usuario
La mayor parte de las restricciones y limitaciones impuestas por el diseñador se han pensado para simplificar el modo de interacción. Pero, ¿para quienes? En muchos casos es posible que el diseñador introduzca limitaciones y restricciones para simplificar la implementación de la interfaz. Y el resultado puede ser una interfaz fácil de construir, pero frustrante de utilizar. Se definirán una serie de principios de diseño que permiten que el usuario tenga el control:
Definir los modos de interacción de manera que no obligue a que el usuario realice acciones
innecesarias o no deseadas.
Tener en consideración una interacción flexible.
Permitir que la interacción del usuario sea interrumpible y también reversible.
Facilitar la interacción a medida que aumenta la habilidad y permitir que aquella se personalice.
Ocultar los tecnicismos internos al usuario ocasional.
CBT NO 2 JOCOTITLÁN
SUBMÓDULO I Desarrolla aplicaciones web Cuarto Semestre
Diseñar la interacción directa con objetos que aparezcan en la pantalla.
2.
Reducir la necesidad de que el usuario memorice
Cuanto más tenga que recordar un usuario, más propensa a errores será su interacción con el sistema. Esta es la razón por la que una interfaz de usuario bien diseñada no pondrá a prueba la memoria del usuario. Siempre que sea posible, el sistema deberá «recordar» la información pertinente y ayudar a que el usuario recuerde mediante un escenario de interacción, se definen los principios de diseño que hacen posible que una interfaz reduzca la carga de memoria del usuario: Reducir la demanda de memoria a corto plazo.
Cuando los usuarios se ven involucrados en tareas complejas, exigir una memoria a corto plazo puede ser significativo. La interfaz se deberá diseñar para reducir los requisitos y recordar acciones y resultados anteriores. Hacer que lo preestablecido sea significativo.
El conjunto inicial de valores por defecto tendrá que ser de utilidad para al usuario, pero un usuario también deberá tener la capacidad de especificar sus propias preferencias. Definir atajos que sean intuitivos. Cuando para diseñar un sistema se utiliza la mnemónica (por
ejemplo, alt-P para invocar la función de imprimir), ésta deberá ir unida a una acción que sea fácil de recordar (por ejemplo, la primera letra de la tarea que se invoca). La distribución visual de la interfaz debe basarse en una metáfora del mundo real. Por ejemplo, en
un sistema de pago de facturas se deberá utilizar la metáfora de la chequera y el registro del cheque para conducir al usuario por el proceso del pago de facturas. Revelar información de manera progresiva.
La interfaz debe estar organizada de manera jerárquica. Es decir, la información acerca de una tarea, objeto o comportamiento debe presentarse primero en un nivel de generalización elevado. Después de que con el ratón el usuario manifieste interés, deben darse más detalles. Por ejemplo, para muchas aplicaciones de procesamiento de textos, se tiene la función de subrayar. La función en sí es una de varias en el menú estilo del texto. No obstante, no se enlista cada una de las herramientas para subrayar. El usuario debe hacer clic en la opción de subrayar; después se presentan todas las opciones para esta función (una raya, doble raya, línea punteada, etc.). 3.
Hacer consistente la interfaz.
La interfaz debe presentar y obtener información en forma consistente. Esto implica: 1) que toda la
CBT NO 2 JOCOTITLÁN
SUBMÓDULO I Desarrolla aplicaciones web Cuarto Semestre
información se organice de acuerdo con reglas de diseño que se respeten en todas las pantallas desplegadas, 2) que los mecanismos de entrada se limiten a un conjunto pequeño usado en forma consistente en toda la aplicación, y 3) que los mecanismos para pasar de una tarea a otra se definan e implementen de modo consistente. Estas reglas de oro forman en realidad la base para los principios del diseño de la interfaz de usuario que servirán de guía para esta actividad de diseño de software tan importante.
ACTIVIDAD 1 MAPA MENTAL DE DISEÑO GRAFICO DE HERRAMIENTAS Instrucciones Elabora un mapa mental con la información proporcionada más adelante recuerda que en el mapa vas a colocar imagenes. Fecha de entrega: 26 de febrero INSTRUMENTO DE EVALUACIÓN LISTA DE COTEJO 15% MÓDULO III DESARROLLA APLICACIONES WEB Y MÓVILES
SUBMÓDULO I Desarrolla aplicaciones web NOMBRE DEL ALUMNO
INDICADORES DE UN MAPA MENTAL 1. El alumno describe las ideas de acuerdo al diseño de pagina 2. Hace mención de las herramientas de diseño grafica 3. El alumno hace relación de las herramientas de diseño 4. Considera el alumno los beneficios del uso de herramientas 5. Hace la conexión adecuada a las actividades 6. Las imágenes son entendibles 7. Muestra limpieza al realizar el trabajo 8. Cuida la ortografía al elaborar el mapa 9. El alumno comprende y desarrolla la competencia 8.3 Asume una actitud constructiva, congruente con los conocimientos y habilidades con los que cuenta dentro de distintos equipos de trabajo 10. Con la actividad el alumno desarrolla el resultado de aprendizaje que es “ Diseña los elementos visuales de la interfaz web, utilizando herramientas de diseño gráfico
SI
NO
OBSERVACIONES
CBT NO 2 JOCOTITLÁN
SUBMÓDULO I Desarrolla aplicaciones web Cuarto Semestre
digital.”
Materiales de apoyo para análisis de formación en la actividad 2 Crear objetos, Trabajar con objetos, Aplicar rellenos, Aplicar color de borde, grosor y estilos Soldar, intersectar y recortar, Transformar objetos
20 herramientas geniales para el diseño de páginas web y blogs ¿Quieres crear la mejor página web del mundo? Ya sea para potenciar tu marca personal o para darle mayor visibilidad a tu negocio, a la hora de construir un sitio web, es imprescindible conocer las mejores herramientas de diseño de páginas web y blogs para poder obtener un resultado totalmente profesional.
Pero no solo eso, sino que también te ayudarán a tardar menos tiempo en el proceso de creación y ser más eficiente en todos tus proyectos.
Y lo mejor de todo es que no importa si utilizas WordPress, Joomla, Prestashop u otro CMS de creación de sitios web, ya que muchas de las herramientas citadas a continuación las podrás utilizar en cualquier proyecto.
Colorzilla Quizás te haya pasado alguna vez. Entras en una web con una combinación de colores que te gusta tanto que quieres comenzar a utilizarla tú también en tu sitio web. El problema es que a veces no es fácil descubrir el código de color exacto aunque miremos el CSS. ¿O sí? Para conocer el código de color exacto de cualquier elemento de una web hay una herramienta que te facilita mucho esta tarea. Hablo de Colorzilla. ColorZilla es una extensión para navegadores como Google Chrome y Mozilla Firefox muy sencilla de utilizar. Basta con que selecciones el cuentagotas que aparece al lado de la barra de direcciones y pases el ratón por encima del elemento del que quieres averiguar el color. Cuando lo tengas, ya solo tienes que copiar el código y llevártelo a los elementos de tu web que quieras colorear.
Adobe Color CC La elección de las tonalidades de tu web no debes tomarla a la ligera. Es uno de los pilares fundamentales de tu proyecto, ya que cada combinación de colores transmite una primera impresión distinta. Por eso, y porque
CBT NO 2 JOCOTITLÁN
SUBMÓDULO I Desarrolla aplicaciones web Cuarto Semestre
combinar colores no siempre es fácil, Adobe Color CC es una de las herramientas de diseño de páginas web y blogs que todo diseñador web debe conocer. Se trata de una plataforma en la que podrás ver miles de combinaciones que han sido realizadas por profesionales del sector y que puedes ordenar por su popularidad. De este modo, nunca te equivocarás en la elección de la paleta de tu web. Combinar bien los colores de tu web es algo básico si quieres un resultado profesional Click To Tweet
Ideas Plan Contenidos BlogGoogle Fonts ¿Cansado de las clásicas tipografías? Si quieres destacar por encima de tu competencia, diferénciate escogiendo una buena fuente. Olvida las típicas que todo el mundo utiliza y sé original cuando vayas a elegirlas.
Lo mejor es que pongas a los títulos una tipografía y a los contenidos otra distinta para que hagan contraste y así facilitar la lectura de tus textos. No hace falta que sean muy distintas una de la otra, aunque sí es recomendable que una sea con serifa y otra sin ella.
¿Y cuál es la mejor herramienta para ello? Sin duda alguna, Google Fonts.
Se trata de una de las mayores bases de tipografías gratuitas del mundo en la que podrás encontrar fuentes de cualquier estilo: Monospace, Handwriting, Display, Sans Serif y Serif. No importa qué estilo quieras darle a tu página web, con Google Fonts siempre encontrarás una tipografía que se adapte a ello. Para Aula CM, esta son las mejores Google Fonts que te servirán para mejorar el diseño de tu web.
WhatFont Navegando por internet, o quizás leyendo algún blog, puede que hayas encontrado una tipografía que te ha gustado mucho y que quieres utilizar en tus diseños. No obstante, no sabes su nombre y quieres averiguar de qué fuente se trata. No te preocupes porque en este listado de herramientas de diseño de páginas web y blogs te traigo una para darle solución a este pequeño problema. Se trata de WhatFont. WhatFont es una extensión de Google Chrome que te permitirá seleccionar un texto y saber qué tipografía está utilizando el autor. Tan simple como activar la extensión y hacer clic en un texto.
CBT NO 2 JOCOTITLÁN
SUBMÓDULO I Desarrolla aplicaciones web Cuarto Semestre
Page Ruler Por si no lo sabías, de cara a mejorar la velocidad de tu web, es muy importante que subas las imágenes al tamaño exacto al que luego se van a mostrar.
Si tus imágenes las vas a mostrar en unas dimensiones de 800x500px y las subes a 1600x1000px, estás haciendo trabajar más al navegador y a la vez que aumentas el peso de las imágenes. Esto hace que tu web cargue de forma más lenta afectando a la experiencia de usuario y, por tanto, empeorando tu posicionamiento SEO.
Para que esto no ocurra, lo mejor es medir cada imagen antes de subirla. Por ejemplo, si tenemos un blog y queremos saber cuál es el espacio destinado a las imágenes de cabecera de nuestras entradas, con Page Ruler podremos saber exactamente las dimensiones y ahorrarnos unos cuantos kb por el camino.
Lector copywriting Mock Flow MockFlow es una de las herramientas de diseño de páginas web más utilizada en las primeras fases de cualquier proyecto. Gracias a ella, podrás crear borradores de la estructura que quieres que tengan tus páginas, pudiendo presentar varios bocetos al cliente antes de comenzar con el diseño de la web.
De este modo, si alguna vez te topas con algún cliente que no tiene claro cómo quiere el diseño de su página, podrás hacer con él un pequeño borrador y así luego diseñar sobre una estructura ya definida.
Pero MockFlow no solo sirve para crear bocetos de cara al cliente, también es muy útil cuando quieres reestructurar los contenidos y páginas de tu sitio web. Antes de ponerte a cambiar las cosas sin estrategia, lo mejor es construir un pequeño borrador para optimizar la estructura y potenciar las conversiones de tu web.
Fotos BlogPixabay Si hay algún elemento que haga que una página web fracase y tenga un aspecto mediocre, ese es el relacionado con las imágenes.
No importa que tengas una buena estructura y unos colores muy bien elegidos, si las imágenes que has escogido no van en consonancia con el resto de la web o su calidad es mala, la impresión que se llevarán los usuarios será la de una web amateur.
CBT NO 2 JOCOTITLÁN
SUBMÓDULO I Desarrolla aplicaciones web Cuarto Semestre
¿Y dónde puedes descargar imágenes de calidad para tu web de manera gratuita? En Pixabay. Pixabay es una de las plataformas con mayor número de fotos de todo internet. Tiene una amplia colección de fotografías gratuitas de todos los estilos y sectores, por lo que te resultará sencillo encontrar la foto que buscas.
Canva Si tienes un blog, debes que saber que las imágenes de cabecera para tus entradas son muy importantes.
Es lo primero que verán los usuarios cuando entren en tu blog, por lo que es imprescindible causar una buena impresión. Además, si alguien comparte alguna de tus entradas en redes sociales, la imagen que aparecerá será la que hayas subido como imagen destacada. Por tanto, si es llamativa, obtendrás muchos más visitas. Para realizar buenas imágenes para tus artículos no hace falta estudiar diseño gráfico online, utilizar herramientas como Adobe Illustrator o ser experto en diseño gráfico. Existe una herramienta muy útil a la hora de crear contenidos para tu web o blog, que es gratuita y online. Se llama Canva.
Cuida el apartado visual de tu blog con buenas imágenes de cabecera con Canva
Al entrar en la herramienta lo primero que verás es un enorme listado con plantillas predeterminadas. Una vez elegida, llegarás a un lienzo con las dimensiones escogidas en el que podrás arrastrar y soltar diversos elementos para ir diseñando la pieza: fondos, iconos, ilustraciones, fotografías, títulos, sellos, etc. Tendrás un sinfín de posibilidades para hacer que las imágenes de tu web o blog sean únicas y marquen la diferencia con tu competencia.
Tinypng Siguiendo con las herramientas de diseño de páginas web enfocadas a las imágenes, ahora vamos con una imprescindible a la hora de su optimización: Tinypng, un compresor que disminuirá el peso de tus contenidos gráficos.
Es muy sencilla de utilizar, ya que solo hay que arrastrar las imágenes al recuadro que aparece en pantalla y Tinypng las optimizará automáticamente. Sin duda, toda una ventaja que tus usuarios y Google agradecerán.
Contenido indexado y rastreadoIconfinder Una de las mejores formas de presentar los servicios que ofreces en la página de inicio de tu web es mediante
CBT NO 2 JOCOTITLÁN
SUBMÓDULO I Desarrolla aplicaciones web Cuarto Semestre
un icono y una breve descripción. Queda muy profesional, aporta cercanía y es mucho más fácil de leer.
Los iconos también son muy útiles a la hora de darle un toque de creatividad a tus contenidos del blog. Puedes ponerlos junto a los títulos para romper la monotonía del texto o para ser más original cuando escribas entradas con muchos puntos a tratar.
¿Y cuál es la mejor fuente de iconos gratuitos? Iconfinder.
Se trata de una base de iconos enorme en la que podrás encontrar todos los iconos del mundo en varios formatos y colores. Y lo mejor de todo es que dispone de un buscador que te permitirá filtrar los iconos por el estilo o la tipología. De tipo flat, 3d, handdrawn, de tipo cartoon, etc.
Stylebot Si quieres iniciarte en la personalización de tu web mediante código CSS pero no te atreves a modificarlo directamente, Stylebot es una de las mejores herramientas de diseño de páginas web y blogs para que pierdas el miedo a ello.
Es una extensión para tu navegador con la que podrás modificar visualmente cualquier web a tu antojo, y luego sacar el código CSS de dicha modificación. De este modo, luego solo tendrás copiar dicho código que se ha generado y pegarlo en la hoja de estilos de tu página web.
Posicionamiento WebSublime Text Si eres desarrollador y quieres crear tu página web con lenguajes de etiquetas y programación como HTML, CSS y JavaScript, tu herramienta se llama Sublime Text.
Sublime Text es un editor de código sencillo de utilizar que está concebido para programar sin distracciones. Tiene una interfaz muy intuitiva con muchas opciones y la posibilidad de configurar los documentos en multitud lenguajes de etiquetas y programación.
Una de las ventajas es que Sublime Text te marcará cada etiqueta, atributo, valor, etc, en un color distinto para que puedas identificar más rápido todos los elementos y tu código esté más organizado.
Además, es posible configurar la herramienta en varios colores oscuros para cuidar los ojos y cansar menos la
CBT NO 2 JOCOTITLÁN
SUBMÓDULO I Desarrolla aplicaciones web Cuarto Semestre
vista durante esas largas jornadas de desarrollo web.
Sin duda, es otra de las grandes herramientas de diseño de páginas web que existen en la actualidad.
Definir Canales Plan Contenidos BlogNotepad++ Al igual que Sublime Text, Notepad++ es una de las mejores herramientas de diseño de páginas web para programadores que quieren crear páginas sin la necesidad de utilizar un CMS como WordPress o Joomla.
Algunas de las características que lo convierten en una buena herramienta es su sistema de sintaxis y coloreado. Notepad++ es capaz de identificar las expresiones propias del lenguaje utilizado y resaltarlas en una combinación de colores que facilitan la lectura y el escaneo por parte del ojo humano.
GTMetrix Si bien no es una herramienta de diseño de páginas web y blogs como tal, sí que es muy útil a la hora de optimizar una web tras acabar su diseño.
GTMetrix te permite analizar el tiempo de carga de tu web para que sepas exactamente lo que tarda en mostrarse. Y lo mejor de todo, es que te dice que es lo que está causando que tu web cargue lentamente y te da una serie de recomendaciones para mejorarla.
Tras diseñar tu web comienza la fase de optimización. Conoce los fallos de velocidad con GTMetrix Click To Tweet
Como norma general, tu sitio web debe cargar en el menor tiempo posible, siendo 4 segundos el tiempo máximo deseado.
¿Y por qué es tan importante que tu web sea veloz? Principalmente por dos razones.
Por un lado, es importante que tu web cargue rápidamente porque los usuarios nos hemos vuelto algo impacientes y, si vemos que algo tarda en cargar, volvemos atrás y nos vamos a otra página.
Por otro lado, de un tiempo a esta parte, Google toma muy en cuenta la velocidad de carga de tu web a la hora de posicionarte en su listado de resultados. Por tanto, cuanto menos tarde en cargar, mejor
CBT NO 2 JOCOTITLÁN
SUBMÓDULO I Desarrolla aplicaciones web Cuarto Semestre
posicionamiento SEO tendrás.
gtmetrix es una de las herramientas de diseño de páginas web
Herramientas de diseño de páginas web y blogs para WordPress
Visual Composer Si utilizas WordPress como principal herramienta de diseño de páginas web, Visual Composer es tu mejor aliado.
Visual Composer es un plugin de maquetación visual que te permite elegir entre multitud de elementos creativos que puedes incrustar en cualquier lugar de tu página para dotarla de un diseño totalmente profesional con unos pocos clics.
Dispone de una interfaz muy intuitiva y te proporciona un enorme listado de opciones como bloques de texto, imágenes, iconos con texto, contadores dinámicos, pestañas, mapas interactivos de Google Maps, botones, y un largo etcétera.
Por su versatilidad, y porque es el maquetador visual más usado y extendido de WordPress, sin duda es la mejor elección a la hora de crear páginas web.
Bloom ¿Te has fijado en esos formularios de suscripción tan chulos que están de moda últimamente? Sirven para captar usuarios a los que les haya gustado el contenido de la web y poder luego avisarles de que hay nuevos contenidos y traerlos de vuelta. También para enviarles ofertas y cupones de descuento en caso de ser un ecommerce.
Antes de que existiera WordPress y los plugins, realizar un formulario de suscripción a una lista de correo o newsletter era una tarea algo tediosa. Había que crear el código HTML, luego modificar el aspecto mediante código CSS y posteriormente realizar la vinculación a servicios de email marketing vía programación. Hoy en día, con WordPress + Bloom, es posible crear formularios de suscripción totalmente personalizados con un par de clics.
CBT NO 2 JOCOTITLÁN
SUBMÓDULO I Desarrolla aplicaciones web Cuarto Semestre
Bloom te permite diseñar formularios de suscripción combinando imágenes, bloques de texto, pequeñas animaciones y todo lo que se te pueda ocurrir. Después de diseñarlo podrás vincularlo fácilmente con todas las plataformas de email marketing como Mailchimp y colocarlo en cualquier sitio de la web.
Personalmente, creo que es una de las grandes herramientas de diseño de páginas web y blogs del momento.
Ninja Forms Ya sea para contratar algún servicio, comprar algún producto o para informar sobre algún problema o sugerencia de tu página, es imprescindible que haya un buen formulario de contacto que cree una vía de comunicación con tus usuarios. Si utilizas WordPress para diseñar tus páginas, una de las mejores opciones es Ninja Forms.
Es un plugin que facilita mucho el diseño y la inserción de formularios de contacto.
Podrás insertar formularios con todos los campos que se te puedan ocurrir, desde los típicos inputs de correo electrónico, teléfono y nombre, hasta los más avanzados como listas de opciones con desplegables, checkbox con selecciones múltiples e incluso campos para adjuntar documentos (por ejemplo, para que los usuarios quieran adjuntar su CV si dispones de sección “Trabaja con nosotros”).
Contact Form 7 El clásico entre los clásicos. Contact Form 7 es el plugin de formularios de contacto para WordPress más utilizado en el mundo. Tanto es así, que viene por defecto en muchas plantillas.
Al igual que Ninja Forms, podrás crear formularios de contacto con todos los campos que quieras e incrustarlo en cualquier página o entrada mediante un shortcode que se genera automáticamente cuando creas un formulario.
Plan Twitter Galería ArtePlantillas o temas premium Si utilizas WordPress para crear tus páginas web, una de las grandes ventajas que tiene respecto a cualquier otro CMS es la enorme cantidad de plantillas disponibles. Éstas permiten crear una página web bien estructurada, con los colores muy bien escogidos y con contenido de demostración que puedes aprovechar para que el proceso de creación de tu web sea rápido y el resultado sea totalmente profesional.
CBT NO 2 JOCOTITLÁN
SUBMÓDULO I Desarrolla aplicaciones web Cuarto Semestre
Las plantillas WordPress son las que determinan la estructura y apariencia que va a tener tu página web. Normalmente traen varias diseños predeterminados para puedas escoger el que más se ajuste a lo que quieres transmitir en tu sitio web. Gracias a las plantillas, podrás diseñar una página web completa en cuestión de horas.
WordPress Theme Detector Seguramente te haya pasado en algún momento. Entras a una web hecha en WordPress que te gusta tanto que quieres saber qué plantilla y qué plugins está utilizando para implementar algunos de esos elementos y funcionalidades en tu web. No obstante, si no conoces al propietario de esa página, quizás te de corte preguntar o simplemente el diseñador no te lo quiera decir para que no le copies. Pero no te preocupes, porque tengo la herramienta definitiva: WordPress Theme Detector.
Tan solo tienes que insertar la web que quieres analizar y dejar que la herramienta trabaje por tí. Tras unos segundos, aparecerá el tema y los plugins que utiliza la web siempre y cuando esté realizada sobre WordPress. Sencillamente impresionante.
ACTIVIDAD 2 •Elabora un diseño de interfaz de una pagina Instrucciones Realiza diseño de una página web de la escuela Fecha de entrega: 5 de marzo INSTRUMENTO DE EVALUACIÓN LISTA DE COTEJO 35% MÓDULO III DESARROLLA APLICACIONES WEB Y MÓVILES
SUBMÓDULO I Desarrolla aplicaciones web NOMBRE DEL ALUMNO
INDICADORES DE UN DISEÑO DE INTERFAZ 1. El alumno coloca su nombre en un encabezado de página y en el pie de página coloca el semestre que está cursando. 2. El alumno coloca el logo de la institución 3. Coloca iconos de acuerdo a las áreas que hay en la institución 4. Muestra limpieza al realizar el trabajo 5. Cuida la ortografía al elaborar el informe documental 6. El alumno comprende y desarrolla la competencia 8.3 Asume una actitud constructiva, congruente con los conocimientos y
SI
NO
OBSERVACIONES
CBT NO 2 JOCOTITLÁN
SUBMÓDULO I Desarrolla aplicaciones web Cuarto Semestre
habilidades con los que cuenta dentro de distintos equipos de trabajo 7. Con la actividad el alumno desarrolla el resultado de aprendizaje que es “ Diseña los elementos visuales de la interfaz web, utilizando herramientas de diseño gráfico digita”
Materiales de apoyo para análisis de formación en la actividad 3 Y 4 Dibujar libremente, Dibujar a partir de nodos, Aplicar efectos tridimensionales 9 TIPOS DE RECURSOS Y HERRAMIENTAS PARA DISEÑO WEB De modo que, te presento mis recursos habituales en función del tipo de tarea que me permiten desarrollar. Espero que quede claro 🙂 #1 Diseño gráfico Como ya he contado en varios artículos, lo primero que hago cuando empiezo una página web en WordPress es diseñar toda la parte gráfica: logo, banners, cabeceras, etc. Mi herramienta favorita para todo lo que tiene que ver con diseño gráfico es Photoshop. Es la que uso cada día para diseñar logotipos, banners, portadas de posts o creatividades. Otra del paquete Adobe, pero que requiere conocimientos más avanzados es Illustrator, programa que uso cuando tengo que trabajar con Vectores. Si no tienes grandes conocimientos en diseño gráfico, puedes probar otras como Canva, una opción realmente interesante para crear diseños de forma rápida y sencilla: 5 herramientas de diseño alternativas a PhotoshopLEER AHORA #2 Paletas y combinaciones de colores Una tarea estrechamente relacionada con el diseño gráfico es la creación de la paleta de colores del sitio web. Para crear combinaciones de colores también utilizo Phososhop, aunque que recurro a otras páginas y herramientas para buscar inspiración: 9 herramientas con las que crear paletas de colores para diseño webLEER AHORA De todas ellas, mis dos favoritas a la hora de inspirarme son: Design Seeds y Color Hunt. Como ya sabes si eres lector de esto blog, siempre recomiendo escoger un color principal y dos o tres complementarios. Aquí puedes ver a qué me refiero en mi propia paleta de colores: paleta de colores de esta web #3 Tipografías Otra de las tareas relacionadas con la identidad y la parte visual de la web son las tipografías. Como en el caso de la paletas de colores, para las tipografías también recomiendo crear combinaciones sencillas: una fuente para el cuerpo de texto y otra (dos como mucho) para los
CBT NO 2 JOCOTITLÁN
SUBMÓDULO I Desarrolla aplicaciones web Cuarto Semestre
elementos destacados de la web (botones, títulos, subtítulos, llamadas a la acción, etc). De hecho, la dificultad de las tipografías no está en elegirlas, sino en combinarlas correctamente, pues hay miles de opciones diferentes y a veces es complicado. La herramienta que más utilizo para buscar tipografías es Google Fonts, aunque hay otras que también me gustan: Tipografías para web: herramientas + consejos para combinarlasLEER AHORA #4 Plantilla y maquetador visual Una vez tienes lista toda la parte gráfica del sitio web, es el momento de escoger la plantilla y/o maquetador visual que vas a usar. En este punto tienes dos opciones: 1.
Escoger y comprar una plantilla cuyo diseño te guste y puedas adaptar a tu proyecto.
2.
Trabajar con un editor visual y maquetar tu web desde cero. Si optas por la primera opción, puedes encontrar plantillas muy interesante en Theme Forest, un marketplace que cuenta con miles de temas premium para WordPress. Mis plantillas favoritas de todas las que he probador a lo largo de estos años: Divi, Salient, Bridge, RedWood y SimpleMag. Si prefieres tener un diseño exclusivo y tienes conocimientos más avanzados, te recomiendo trabajar con un maquetador visual en tu web. En cuanto a maquetadores para WordPress, hay varios en el mercado (Divi, Elementor, Visual Composer). Solo tienes que ver cuál es el que mejor se adapta a tus necesidades. Ya sabes que Divi es mi favorito y el que siempre uso en mis diseños.
Las mejores plantillas WordPress premium.
Las mejores plantillas WordPress gratis. #5 Plugins Fundamental a la hora de hacer una página web en WordPress, es utilizar los mejores plugins (tanto gratuitos como de pago). Como en el mercado de plugins existen varios miles de opciones, quiero compartir contigo cuáles son los fundamentales que utilizo en mis diseños: 15 tipos de plugins para WordPress que necesitas en tu webLEER AHORA
404page – your smart custom 404 error page. Plugin para personalizar la página de error 404.
Antispam Bee para evitar spam en los comentarios.
Bloom para la captación de suscriptores a través de Email Marketing.
GDPR Cookie Consent para mostrar que la web cumple con la Ley de cookies de la UE (GRPD).
Limit Login Attempts. Plugin de seguridad para evitar posibles ataques.
Monarch para compartir entradas y páginas en redes sociales.
CBT NO 2 JOCOTITLÁN
SUBMÓDULO I Desarrolla aplicaciones web Cuarto Semestre
Redirection para crear redirecciones personalizadas.
WP Smush para comprimir y optimizar imágenes.
Table of Contents Plus para mostrar una tabla de contenidos en los artículos.
TinyMCE Advanced para añadir funcionalidades extras en el editor de WordPress.
WordPress Related Posts para mostrar entradas relacionados al final de los posts.
WP Rocket. Plugin premium para la WPO, caché, carga, base de datos…
Yoast SEO, plugin universal para los temas de SEO. Por supuesto, utilizo más plugins, pero esos son mis imprescindibles. #6 CSS Otra tipo de herramientas para diseño web son las que ayudan a generar código CSS y crear elementos del diseño diferentes a los que vienen por defecto. Para esta tarea te recomiendo un par de herramientas online:
1.
CSS3 Generator
2.
CSS Code Generators Y para crear botones personalizados, te recomiendo CSS Button Generator, un recurso que utilizo cuando quiero botones más exclusivos. Aquí puedes ver un ejemplo: #7 Bancos de imágenes, iconos y recursos visuales En los proyectos en los que el cliente no dispone de imágenes propias o no tiene recursos para contratar a un fotógrafo, trabajo con varios bancos. En estos bancos busco imágenes, vídeos, vectores e iconos. Los cuatro que utilizo son:
Shutterstock. Es un banco de pago en el que tengo cuenta y que utilizo para encontrar imágenes, vídeos, vectores e ilustraciones con mucha calidad.
Unsplash. Se trata de un banco donde puedes encontrar imágenes con muchísima calidad de forma gratuita. Es el recurso que utilizo cuando quiero buscar fotografías más exclusivas y que no estén tan vistas.
Freepik. Es el banco que utilizo para buscar y descargar vectores.
Flaticon. Herramienta que uso para encontrar iconos cuando necesito algo diferente a los que trae por defecto la plantilla. #8 Comprimir y optimizar imágenes Otra de las tareas imprescindibles a la hora de diseñar una web es la de comprimir y optimizar todas las imágenes que subo para aligerar su peso y ganar en velocidad de carga. Para esta tarea utilizo varias herramientas:
Photoshop. La funcionalidad «guardar para web» es mi preferida.
CBT NO 2 JOCOTITLÁN
SUBMÓDULO I Desarrolla aplicaciones web Cuarto Semestre
Compressor.io es la aplicación web que utilizado para comprimir imágenes sin perder calidad.
El plugin Smush para ajustar los tamaños de las imágenes en WordPress (ya lo he mencionado cuando he hablado de plugins). 7 herramientas para optimizar imágenes en WordPressLEER AHORA #9 Herramientas complementarias Por último, no son herramientas para diseño web como tal, pero te quiero mencionar una serie de herramientas y servicios complementos en todo proyecto web. La mayoría son servicios que necesitas dar de alta y vincular con tu página web; otros son plataformas para mejorar tu sitio. Te cuento más sobre todos ellos:
1.
Analytics. Es la herramienta de Google que permite medir analizar los datos y estadísticas de una web: visitas, usuarios, tecnología, procedencia del tráfico, etc.
2.
Search Console. Otra herramienta de Google para administradores de sitios web. Permite analizar una página a ojos de Google, conocer su estado de indexación, eliminar errores, agregar redirecciones o subir un sitemap, entre otras opciones.
3.
Keyword Planner de AdWords. Se trata de una herramienta más de Google. Sirve para buscar palabras clave, así como su nivel de competencia y dificultad de posicionamiento. Fundamental para los artículos del blog.
4.
Medidores de velocidad de carga. Conocer los datos y tiempos de carga de tu web es fundamental para optimizarlos y mejorar así el SEO.
ACTIVIDAD 3 ELABORACIÓN DE INFOGRAFÍA DE LAS HERRAMIENTAS DE DISEÑO Instrucciones El alumno elabora una infografía de acuerdo a las herramientas de diseño Fecha de entrega: 12 de marzo INSTRUMENTO DE EVALUACIÓN LISTA DE COTEJO 35% MÓDULO III DESARROLLA APLICACIONES WEB Y MÓVILES
SUBMÓDULO I Desarrolla aplicaciones web NOMBRE DEL ALUMNO
INDICADORES DE UNA INFOGRAFÍA 1. Coloca el título del tema en la elaboración de la infografía
SI
NO
OBSERVACIONES
CBT NO 2 JOCOTITLÁN
SUBMÓDULO I Desarrolla aplicaciones web Cuarto Semestre
2. Coloca alguna imágenes de las herramientas 3. El alumno hace uso del programa 4. Realiza la investigación del uso de las herramientas 5. Muestra la creatividad al elaborar la infografía 6. Muestra limpieza al realizar el trabajo 7. Cuida la ortografía al elaborar la infografía 8. El alumno comprende y desarrolla la competencia 8.3 Asume una actitud constructiva, congruente con los conocimientos y habilidades con los que cuenta dentro de distintos equipos de trabajo 9. Con la actividad el alumno desarrolla el resultado de aprendizaje que es “ Diseña los elementos visuales de la interfaz web, utilizando herramientas de diseño gráfico digita”
ACTIVIDAD 4 INTERFAZ GRAFICO DE PÁGINA
Instrucciones Realiza una interfaz con imágenes de tu diseño web Fecha de entrega: 19 de marzo INSTRUMENTO DE EVALUACIÓN LISTA DE COTEJO 35% MÓDULO III DESARROLLA APLICACIONES WEB Y MÓVILES
SUBMÓDULO III. Administra y configura plataformas e-learning NOMBRE DEL ALUMNO
INDICADORES DE UNA INTERFAZ 1. El alumno coloca su nombre en un encabezado de página y en el pie de página coloca el semestre que está cursando. 2. El alumno coloca el logo de la institución 3. Coloca iconos de acuerdo a las áreas que hay en la institución 4. Muestra limpieza al realizar el trabajo 5. Cuida la ortografía al elaborar el informe documental 6. El alumno comprende y desarrolla la competencia 8.3 Asume una actitud constructiva, congruente con los conocimientos y habilidades con los que cuenta dentro de distintos equipos
SI
NO
OBSERVACIONES
CBT NO 2 JOCOTITLÁN
SUBMÓDULO I Desarrolla aplicaciones web Cuarto Semestre
de trabajo 7. Con la actividad el alumno desarrolla el resultado de aprendizaje que es “ Diseña los elementos visuales de la interfaz web, utilizando herramientas de diseño gráfico digita” 8. El alumno comprende y desarrolla la competencia 8.3 Asume una actitud constructiva, congruente con los conocimientos y habilidades con los que cuenta dentro de distintos equipos de trabajo 9. Con la actividad el alumno desarrolla el resultado de aprendizaje que es “ Diseña los elementos visuales de la interfaz web, utilizando herramientas de diseño gráfico digital.”
ELABORÓ
REVISÓ Y AUTORIZÓ
PROFRA. FANNY GONZÁLEZ MONROY RESPONSABLE DEL SUBMÓDULO III INSTRUMENTA LA PRACTICA
PROFRA. JOSEFINA MARTÍNEZ HERRERA SUBDIRECTORA ESCOLAR
Vo. Bo.
PROFRA. ARACELI MARGARITO SANTIAGO DIRECTORA ESCOLAR
CBT NO 2 JOCOTITLÁN CCT 15ECT0159G MÓDULO III DESARROLLA APLICACIONES WEB Y MÓVILES SUBMÓDULO I Desarrolla aplicaciones web
CUARTO SEMESTRE NOMBRE DEL DOCENTE: MTRA. FANNY GONZÁLEZ MONROY
SEGUNDO SEMESTRE DEL CICLO ESCOLAR 2020-2021
CBT NO 2 JOCOTITLÁN
SUBMÓDULO I Desarrolla aplicaciones web Cuarto Semestre
PRESENTACIÓN ¡Estimado estudiante! La Educación Tecnológica en nuestro país, continuamente motiva cambios estructurales que repercuten en la reordenación de la política educativa del nivel medio superior hacia una modernidad que contrarreste el rezago científico-tecnológico originado por el fenómeno de la globalización. Hoy en día, los jóvenes de la Educación Media Superior transitan hacia la vida adulta, interactúan en un mundo que evoluciona de la sociedad del conocimiento hacia la sociedad del aprendizaje y la innovación (Joseph Stiglitz, 2014; Ken Robinson, 2015; Richard Gerver, 2013; y Marc Prensky, 2015; entre otros); procesan enormes cantidades de información a gran velocidad y comprenden y utilizan, de manera simultánea, la tecnología que forma parte de su entorno cotidiano y es relevante para sus intereses. Con el auge de la globalización, ha provocado que sea más habitual la utilización de las computadoras en las actividades diarias del ser humano, por ejemplo, como medio que permita la comunicación e intercambio de información, la cual se genera con una rapidez exorbitante; derivado de la necesidad de su uso radica la importancia de la programación, refiriéndonos al ámbito informático, ya que hace posible la adaptación del potencial que se deriva del uso de las computadoras sujetas a las necesidades del hombre, para la generación de procesos automáticos que tengan un beneficio generalizado en la sociedad. Es por eso que la carrera de Técnico en Informática, ofrece las competencias profesionales que permiten al estudiante realizar actividades dirigidas a analizar, diseñar, desarrollar, instalar y mantener software de aplicación tomando como base los requerimientos del usuario. Todas estas competencias posibilitan al egresado su incorporación al mundo laboral o desarrollar procesos productivos independientes, de acuerdo con sus intereses profesionales y necesidades de su entorno social. De acuerdo al trayecto formativo de esta carrera, posibilita al técnico al ámbito laboral en diversos sitios de inserción como: edición de software y edición de software integrada con la reproducción, servicios de diseño de sistemas de cómputo y servicios relacionados, escuelas de computación del sector privado y/o público, edición y difusión de contenido exclusivamente a través de internet, servicios de búsqueda en la red, entre otros. La formación profesional, comienza en primer semestre con la materia Dinámicas Productivas Regionales, con una carga de 80 horas, esta es común a todas las carreras técnicas del Bachillerato
CBT NO 2 JOCOTITLÁN
SUBMÓDULO I Desarrolla aplicaciones web Cuarto Semestre
Tecnológico estatal, misma que retoma los nodos productivos establecidos en la entidad; en los semestres subsecuentes la carrera técnica se desarrolla a través una estructura modular, haciendo mención que los primeros tres módulos tienen una duración de 340 horas cada uno y los dos últimos de 240, dando un total de 1580 horas. Cabe destacar que los módulos de formación profesional tienen carácter transdisciplinario, por cuanto corresponden con objetos y procesos de transformación que implica la integración de saberes de distintas disciplinas. La estructura reticular que se establece para este plan de estudios está integrada de 43 materias y 5 Módulos. Comprende una carga horaria 41 horas/semana/mes en promedio por semestre. Los estudiantes laboran en promedio un total de 8 horas diarias. Los módulos que integra esta carrera son: Módulo I. Desarrolla e instala software de aplicación utilizando programación estructurada, con almacenamiento persistente de los datos. Módulo II. Desarrolla software de aplicación utilizando programación 16 orientada a objetos, con almacenamiento persistente de los datos. Módulo III. Desarrolla aplicaciones web y móviles. Módulo IV. Administra sistemas operativos de aplicaciones y servicios. Módulo V. Determina las competencias profesionales a través de la estadía. Así, el presente “Cuaderno de trabajo” es producto de la responsabilidad, compromiso y la colaboración de la maestra de la institución, para que desarrolles los conocimientos, las habilidades y los valores del Submódulo I Desarrolla aplicaciones web durante el 4° semestre. La Mtra. Fanny González Monroy del CBT NO 2 JOCOTITLÁN te da la más cordial bienvenida al 4° semestre, hacerte saber que una de mi mayor preocupación estriba en ofrecerte con calidad el servicio educativo que recibes en esta institución, con fundamento en las políticas educativas emanadas del Gobierno del Estado de México. Esperando que aproveches el contenido al máximo, te deseo éxito en la realización de las actividades y ejercicios presentes en este material. ¡Mucho Éxito estimado Estudiante!
CBT NO 2 JOCOTITLÁN
SUBMÓDULO I Desarrolla aplicaciones web Cuarto Semestre
LINEAMIENTOS DE TRABAJO Me permito enlistar los lineamentos de normas de convivencia, que se deberán llevar a cabo durante el transcurso del semestre, en el Submódulo I Desarrolla aplicaciones web 1. Realizar las actividades como se indican cumpliendo con las fechas estipuladas. 2. El docente enviara el CUADERNO DE TRABAJO AL ALUMNO al correo institucional del alumno, se compartirá el cuaderno de trabajo por medio del grupo de WhatsApp grupal que habrá donde solo se usara para compartir el cuaderno, ya que las dudas serán por vía telefónica y las evidencias al correo ya que no se cuenta con suficiente memoria para recibir y trabajos por WhatsApp. 3. El enlace del grupo de WhatsApp es https://chat.whatsapp.com/LOB2EGPHfMjHYt9YOLaYzY para que pueda tener información de los seguimientos y del cuaderno. 4. Cada semana hay una temática a leer para poder resolver la actividad solicitada. 5. En caso de tener dudas realizar una llamada telefónica al teléfono 7121073847 en el horario de clase así mismo se realizará la retroalimentación de los temas, evitar hablar después de las ocho de la noche. 6. Las entregas de actividades serán al correo [email protected] colocando en la hoja de la actividad el nombre del alumno, módulo, submódulo y grupo.
MATERIALES DE TRABAJO •
Páginas de lecturas o videos
•
Cuaderno de trabajo
DATOS DE IDENTIFICACIÓN DE LA ASIGNATURA
CBT NO 2 JOCOTITLÁN
SUBMÓDULO I Desarrolla aplicaciones web Cuarto Semestre
MÓDULO I
•Desarrolla aplicaciones web y móviles
SUBMÓDULO I
•Desarrolla aplicaciones web
COMPONENTE
•PROFESIONAL
CAMPO DISCIPLINAR
•FORMACIÓN PROFESIONAL
CARGA HORARIA
•CUATRO HORAS A LA SEMANA
PROPÓSITO DEL MÓDULO I Desarrolla aplicaciones web y móviles Instalar y desarrollar software de aplicación utilizando programación estructurada y orientada a objetos en ambientes web y móviles, con almacenamiento persistente de datos, así como la configuración y administración de plataforma e-learning y comercio electrónico. SUBMÓDULO I Desarrolla aplicaciones web El Submódulo I. Desarrolla aplicaciones web, tiene como finalidad introducir al estudiante técnico bachiller en el desarrollo de aplicaciones web, estableciendo los fundamentos teórico prácticos de software de diseño, WYSIWYG y lenguaje de páginas dinámicas. Está integrado por una unidad de aprendizaje, la cual está conformada por 3 resultados de aprendizaje, que contempla el diseño de interfaces, el desarrollo
CBT NO 2 JOCOTITLÁN
SUBMÓDULO I Desarrolla aplicaciones web Cuarto Semestre
de aplicaciones web estáticas y dinámicas.
RESULTADOS DE APRENDIZAJES
1. Desarrolla aplicaciones web estáticas y dinámicas
Diseña los elementos visuales de la interfaz web, utilizando herramientas de diseño gráfico digital.
Desarrolla aplicaciones web estáticas, a partir del modelado de catálogo de productos existentes en el mercado.
Desarrolla aplicaciones web dinámicas utilizando sistemas de gestión de contenidos, incorporando almacenamiento persistente de los datos.
ALINEACIÓN DE COMPETENCIAS Y DOSIFICACIÓN DEL PROGRAMA
De acuerdo al número de semanas a trabajar, considerando los tiempos de propedéutico, vacaciones, etc. PERIODO DE
RESULTADO DE
EVALUACIÓN
APRENDIZAJE
COMPETENCIA GENÉRICA
COMPETENCIA DISCIPLINAR
M1 Construye e interpreta modelos • Primer Parcial
Diseña
los
visuales
de
elementos la
web,
interfaz
utilizando
herramientas de diseño gráfico digital.
8.3
Asume
una
actitud
matemáticos
deterministas
o
constructiva, congruente con
aleatorios mediante la aplicación de
los
procedimientos
conocimientos
habilidades
con
los
y que
algebraicos,
aritméticos, geométricos
y
cuenta dentro de distintos
variacionales, para la comprensión y
equipos de trabajo.
análisis
de
situaciones
reales
o
formales • Segundo Parcial
Desarrolla
aplicaciones
8.3
Asume
una
actitud
web estáticas, a partir del
constructiva, congruente con
M8 Interpreta tablas, gráficas, mapas,
modelado de catálogo de
los
diagramas y textos con símbolos
productos existentes en el
habilidades
mercado.
cuenta dentro de distintos
conocimientos con
los
y que
matemáticos y científicos.
CBT NO 2 JOCOTITLÁN
SUBMÓDULO I Desarrolla aplicaciones web Cuarto Semestre
equipos de trabajo. •
Tercer Parcial
Desarrolla
aplicaciones
8.3
Asume
una
actitud
web dinámicas utilizando
constructiva, congruente con
sistemas de gestión de
los
contenidos, incorporando
habilidades
almacenamiento
cuenta dentro de distintos
persistente de los datos.
equipos de trabajo.
conocimientos con
los
y que
M8 Interpreta tablas, gráficas, mapas, diagramas y textos con símbolos matemáticos y científicos.
ESTRATEGIA DE EVALUACIÓN PRIMER PARCIAL RESULTADO DE APRENDIZAJES
PRODUCTO ESPERADO
INSTRUMENTO DE EVALUACIÓN
AGENTE EVALUADOR
% EVALUACIÓN SUMATIVA
Lista de cotejo
HE
15%
Diseño de la interfaz
Lista de cotejo
HE
35%
Infografía de herramientas
Lista de cotejo
HE
15%
Interfaz gráfico de pagina
Lista de cotejo
HE
35%
Mapa mental de diseño Diseña
los
elementos
visuales de la interfaz web, utilizando herramientas de diseño gráfico digital
gráfico de herramientas
SUMA
PRIMER PARCIAL Diagnóstico 1. ¿Qué significa html? 2. En que páginas se puede realizar una página web 3. ¿Qué entiendes por una herramienta digital? 4. ¿Cómo consideras que debe de ser el diseño de una página web? 5. ¿Cuáles son los elementos básicos para la elaboración de un diseño de página web?
100
CBT NO 2 JOCOTITLÁN
SUBMÓDULO I Desarrolla aplicaciones web Cuarto Semestre
PRIMER PARCIAL
20 HORAS
Resultado de Aprendizaje Diseña los elementos visuales de la interfaz web,
utilizando
herramientas
de
diseño
Competencia genérica
gráfico digital
Trabaja en forma colaborativa
ATRIBUTO:
8. Participa y colabora de manera efectiva en
8.3
Asume
congruente
una con
actitud los
constructiva,
conocimientos
equipos diversos
y
habilidades con los que cuenta dentro de distintos equipos de trabajo
Contenido Específico Interfaz de software de diseño. Operaciones básicas
Competencia disciplinar
Crear objetos Trabajar con objetos Aplicar rellenos Aplicar color de borde, grosor y estilos Soldar, intersectar y recortar Transformar objetos Dibujar libremente
M1
Dibujar a partir de nodos
matemáticos
Aplicar efectos tridimensionales
mediante la aplicación de procedimientos
Efectos varios con imágenes
aritméticos,
de
interpreta
deterministas algebraicos,
o
modelos aleatorios
geométricos
de situaciones reales o formales
Producto esperado mental
e
y
variacionales, para la comprensión y análisis
Trabajar con textos
Mapa
Construye
diseño
herramientas Diseño de la interfaz Infografía de herramientas Interfaz gráfico de pagina
gráfico
de
CBT NO 2 JOCOTITLÁN
SUBMÓDULO I Desarrolla aplicaciones web Cuarto Semestre
ACTIVIDADES DE APRENDIZAJE ACTIVIDADES A REALIZAR
ESPECIFICACIONES A computadora con el uso de procesador de textos, en caso de no tener ordenador se podrá realizar en una hoja en blanco con letra legible y colores. El trabajo se debra realizar en padetl para colocar
Mapa mental de diseño gráfico de herramientas
la información e imágenes dentro de la línea del
Diseño de la interfaz
tiempo
Infografía de herramientas Interfaz gráfico de pagina Elaboración de una presentación por medio de en línea de forma libre Prezzie o Genially
La infografía se deberá realizar por medio del programa CANVA Las evidencias de las actividades se tendrán que enviar en foto legible al correo institucional del docente [email protected] se solicita enviar al correo por la saturación de información en el celular y no tengo espacio para recibir información.
Materiales de apoyo para análisis de formación en la actividad 1 Interfaz de software de diseño. El diseño de la interfaz de usuario crea un medio eficaz de comunicación entre los seres humanos y la computadora. Siguiendo un conjunto de principios de diseño de la interfaz, el diseño identifica los objetos y acciones de ésta y luego crea una pantalla que constituye la base del prototipo de la interfaz de usuario. ¿Cuáles son los pasos? El diseño de la interfaz de usuario comienza con la identificación de los requerimientos del usuario, la tarea y el ambiente. Una vez identificadas las tareas del usuario, se crean y analizan los escenarios para éste y se
CBT NO 2 JOCOTITLÁN
SUBMÓDULO I Desarrolla aplicaciones web Cuarto Semestre
define un conjunto de objetos y acciones de la interfaz. Esto forma la base para crear una plantilla de la pantalla que ilustra el diseño gráfico y la colocación de los iconos, la definición de textos descriptivos, la especificación y títulos de las ventanas, y la especificación de aspectos mayores y menores del menú. Con el empleo de herramientas, se hace el prototipo, se implementa en definitiva el modelo del diseño y se evalúa la calidad del resultado. El plano de una casa (su diseño arquitectónico) no está completo sin la representación de puertas, ventanas y conexiones de servicios para el agua, electricidad y teléfono (por no mencionar la televisión por cable). Las «puertas, ventanas y conexiones de servicios» del software informático es lo que constituye el diseño de la interfaz de usuario El diseño de la interfaz se centra en tres áreas de interés: (1) el diseño de la interfaz entre los componentes del software; (2) el diseño de las interfaces entre el software y los otros productores y consumidores de información no humanos (esto es, otras entidades externas) y (3) el diseño de la interfaz entre el hombre (esto es, el usuario) y la computadora Operaciones básicas Existen tres reglas de oro para el diseño de la interfaz: 1.
Dejar el control al usuario
La mayor parte de las restricciones y limitaciones impuestas por el diseñador se han pensado para simplificar el modo de interacción. Pero, ¿para quienes? En muchos casos es posible que el diseñador introduzca limitaciones y restricciones para simplificar la implementación de la interfaz. Y el resultado puede ser una interfaz fácil de construir, pero frustrante de utilizar. Se definirán una serie de principios de diseño que permiten que el usuario tenga el control:
Definir los modos de interacción de manera que no obligue a que el usuario realice acciones
innecesarias o no deseadas.
Tener en consideración una interacción flexible.
Permitir que la interacción del usuario sea interrumpible y también reversible.
Facilitar la interacción a medida que aumenta la habilidad y permitir que aquella se personalice.
Ocultar los tecnicismos internos al usuario ocasional.
CBT NO 2 JOCOTITLÁN
SUBMÓDULO I Desarrolla aplicaciones web Cuarto Semestre
Diseñar la interacción directa con objetos que aparezcan en la pantalla.
2.
Reducir la necesidad de que el usuario memorice
Cuanto más tenga que recordar un usuario, más propensa a errores será su interacción con el sistema. Esta es la razón por la que una interfaz de usuario bien diseñada no pondrá a prueba la memoria del usuario. Siempre que sea posible, el sistema deberá «recordar» la información pertinente y ayudar a que el usuario recuerde mediante un escenario de interacción, se definen los principios de diseño que hacen posible que una interfaz reduzca la carga de memoria del usuario: Reducir la demanda de memoria a corto plazo.
Cuando los usuarios se ven involucrados en tareas complejas, exigir una memoria a corto plazo puede ser significativo. La interfaz se deberá diseñar para reducir los requisitos y recordar acciones y resultados anteriores. Hacer que lo preestablecido sea significativo.
El conjunto inicial de valores por defecto tendrá que ser de utilidad para al usuario, pero un usuario también deberá tener la capacidad de especificar sus propias preferencias. Definir atajos que sean intuitivos. Cuando para diseñar un sistema se utiliza la mnemónica (por
ejemplo, alt-P para invocar la función de imprimir), ésta deberá ir unida a una acción que sea fácil de recordar (por ejemplo, la primera letra de la tarea que se invoca). La distribución visual de la interfaz debe basarse en una metáfora del mundo real. Por ejemplo, en
un sistema de pago de facturas se deberá utilizar la metáfora de la chequera y el registro del cheque para conducir al usuario por el proceso del pago de facturas. Revelar información de manera progresiva.
La interfaz debe estar organizada de manera jerárquica. Es decir, la información acerca de una tarea, objeto o comportamiento debe presentarse primero en un nivel de generalización elevado. Después de que con el ratón el usuario manifieste interés, deben darse más detalles. Por ejemplo, para muchas aplicaciones de procesamiento de textos, se tiene la función de subrayar. La función en sí es una de varias en el menú estilo del texto. No obstante, no se enlista cada una de las herramientas para subrayar. El usuario debe hacer clic en la opción de subrayar; después se presentan todas las opciones para esta función (una raya, doble raya, línea punteada, etc.). 3.
Hacer consistente la interfaz.
La interfaz debe presentar y obtener información en forma consistente. Esto implica: 1) que toda la
CBT NO 2 JOCOTITLÁN
SUBMÓDULO I Desarrolla aplicaciones web Cuarto Semestre
información se organice de acuerdo con reglas de diseño que se respeten en todas las pantallas desplegadas, 2) que los mecanismos de entrada se limiten a un conjunto pequeño usado en forma consistente en toda la aplicación, y 3) que los mecanismos para pasar de una tarea a otra se definan e implementen de modo consistente. Estas reglas de oro forman en realidad la base para los principios del diseño de la interfaz de usuario que servirán de guía para esta actividad de diseño de software tan importante.
ACTIVIDAD 1 MAPA MENTAL DE DISEÑO GRAFICO DE HERRAMIENTAS Instrucciones Elabora un mapa mental con la información proporcionada más adelante recuerda que en el mapa vas a colocar imagenes. Fecha de entrega: 26 de febrero INSTRUMENTO DE EVALUACIÓN LISTA DE COTEJO 15% MÓDULO III DESARROLLA APLICACIONES WEB Y MÓVILES
SUBMÓDULO I Desarrolla aplicaciones web NOMBRE DEL ALUMNO
INDICADORES DE UN MAPA MENTAL 1. El alumno describe las ideas de acuerdo al diseño de pagina 2. Hace mención de las herramientas de diseño grafica 3. El alumno hace relación de las herramientas de diseño 4. Considera el alumno los beneficios del uso de herramientas 5. Hace la conexión adecuada a las actividades 6. Las imágenes son entendibles 7. Muestra limpieza al realizar el trabajo 8. Cuida la ortografía al elaborar el mapa 9. El alumno comprende y desarrolla la competencia 8.3 Asume una actitud constructiva, congruente con los conocimientos y habilidades con los que cuenta dentro de distintos equipos de trabajo 10. Con la actividad el alumno desarrolla el resultado de aprendizaje que es “ Diseña los elementos visuales de la interfaz web, utilizando herramientas de diseño gráfico
SI
NO
OBSERVACIONES
CBT NO 2 JOCOTITLÁN
SUBMÓDULO I Desarrolla aplicaciones web Cuarto Semestre
digital.”
Materiales de apoyo para análisis de formación en la actividad 2 Crear objetos, Trabajar con objetos, Aplicar rellenos, Aplicar color de borde, grosor y estilos Soldar, intersectar y recortar, Transformar objetos
20 herramientas geniales para el diseño de páginas web y blogs ¿Quieres crear la mejor página web del mundo? Ya sea para potenciar tu marca personal o para darle mayor visibilidad a tu negocio, a la hora de construir un sitio web, es imprescindible conocer las mejores herramientas de diseño de páginas web y blogs para poder obtener un resultado totalmente profesional.
Pero no solo eso, sino que también te ayudarán a tardar menos tiempo en el proceso de creación y ser más eficiente en todos tus proyectos.
Y lo mejor de todo es que no importa si utilizas WordPress, Joomla, Prestashop u otro CMS de creación de sitios web, ya que muchas de las herramientas citadas a continuación las podrás utilizar en cualquier proyecto.
Colorzilla Quizás te haya pasado alguna vez. Entras en una web con una combinación de colores que te gusta tanto que quieres comenzar a utilizarla tú también en tu sitio web. El problema es que a veces no es fácil descubrir el código de color exacto aunque miremos el CSS. ¿O sí? Para conocer el código de color exacto de cualquier elemento de una web hay una herramienta que te facilita mucho esta tarea. Hablo de Colorzilla. ColorZilla es una extensión para navegadores como Google Chrome y Mozilla Firefox muy sencilla de utilizar. Basta con que selecciones el cuentagotas que aparece al lado de la barra de direcciones y pases el ratón por encima del elemento del que quieres averiguar el color. Cuando lo tengas, ya solo tienes que copiar el código y llevártelo a los elementos de tu web que quieras colorear.
Adobe Color CC La elección de las tonalidades de tu web no debes tomarla a la ligera. Es uno de los pilares fundamentales de tu proyecto, ya que cada combinación de colores transmite una primera impresión distinta. Por eso, y porque
CBT NO 2 JOCOTITLÁN
SUBMÓDULO I Desarrolla aplicaciones web Cuarto Semestre
combinar colores no siempre es fácil, Adobe Color CC es una de las herramientas de diseño de páginas web y blogs que todo diseñador web debe conocer. Se trata de una plataforma en la que podrás ver miles de combinaciones que han sido realizadas por profesionales del sector y que puedes ordenar por su popularidad. De este modo, nunca te equivocarás en la elección de la paleta de tu web. Combinar bien los colores de tu web es algo básico si quieres un resultado profesional Click To Tweet
Ideas Plan Contenidos BlogGoogle Fonts ¿Cansado de las clásicas tipografías? Si quieres destacar por encima de tu competencia, diferénciate escogiendo una buena fuente. Olvida las típicas que todo el mundo utiliza y sé original cuando vayas a elegirlas.
Lo mejor es que pongas a los títulos una tipografía y a los contenidos otra distinta para que hagan contraste y así facilitar la lectura de tus textos. No hace falta que sean muy distintas una de la otra, aunque sí es recomendable que una sea con serifa y otra sin ella.
¿Y cuál es la mejor herramienta para ello? Sin duda alguna, Google Fonts.
Se trata de una de las mayores bases de tipografías gratuitas del mundo en la que podrás encontrar fuentes de cualquier estilo: Monospace, Handwriting, Display, Sans Serif y Serif. No importa qué estilo quieras darle a tu página web, con Google Fonts siempre encontrarás una tipografía que se adapte a ello. Para Aula CM, esta son las mejores Google Fonts que te servirán para mejorar el diseño de tu web.
WhatFont Navegando por internet, o quizás leyendo algún blog, puede que hayas encontrado una tipografía que te ha gustado mucho y que quieres utilizar en tus diseños. No obstante, no sabes su nombre y quieres averiguar de qué fuente se trata. No te preocupes porque en este listado de herramientas de diseño de páginas web y blogs te traigo una para darle solución a este pequeño problema. Se trata de WhatFont. WhatFont es una extensión de Google Chrome que te permitirá seleccionar un texto y saber qué tipografía está utilizando el autor. Tan simple como activar la extensión y hacer clic en un texto.
CBT NO 2 JOCOTITLÁN
SUBMÓDULO I Desarrolla aplicaciones web Cuarto Semestre
Page Ruler Por si no lo sabías, de cara a mejorar la velocidad de tu web, es muy importante que subas las imágenes al tamaño exacto al que luego se van a mostrar.
Si tus imágenes las vas a mostrar en unas dimensiones de 800x500px y las subes a 1600x1000px, estás haciendo trabajar más al navegador y a la vez que aumentas el peso de las imágenes. Esto hace que tu web cargue de forma más lenta afectando a la experiencia de usuario y, por tanto, empeorando tu posicionamiento SEO.
Para que esto no ocurra, lo mejor es medir cada imagen antes de subirla. Por ejemplo, si tenemos un blog y queremos saber cuál es el espacio destinado a las imágenes de cabecera de nuestras entradas, con Page Ruler podremos saber exactamente las dimensiones y ahorrarnos unos cuantos kb por el camino.
Lector copywriting Mock Flow MockFlow es una de las herramientas de diseño de páginas web más utilizada en las primeras fases de cualquier proyecto. Gracias a ella, podrás crear borradores de la estructura que quieres que tengan tus páginas, pudiendo presentar varios bocetos al cliente antes de comenzar con el diseño de la web.
De este modo, si alguna vez te topas con algún cliente que no tiene claro cómo quiere el diseño de su página, podrás hacer con él un pequeño borrador y así luego diseñar sobre una estructura ya definida.
Pero MockFlow no solo sirve para crear bocetos de cara al cliente, también es muy útil cuando quieres reestructurar los contenidos y páginas de tu sitio web. Antes de ponerte a cambiar las cosas sin estrategia, lo mejor es construir un pequeño borrador para optimizar la estructura y potenciar las conversiones de tu web.
Fotos BlogPixabay Si hay algún elemento que haga que una página web fracase y tenga un aspecto mediocre, ese es el relacionado con las imágenes.
No importa que tengas una buena estructura y unos colores muy bien elegidos, si las imágenes que has escogido no van en consonancia con el resto de la web o su calidad es mala, la impresión que se llevarán los usuarios será la de una web amateur.
CBT NO 2 JOCOTITLÁN
SUBMÓDULO I Desarrolla aplicaciones web Cuarto Semestre
¿Y dónde puedes descargar imágenes de calidad para tu web de manera gratuita? En Pixabay. Pixabay es una de las plataformas con mayor número de fotos de todo internet. Tiene una amplia colección de fotografías gratuitas de todos los estilos y sectores, por lo que te resultará sencillo encontrar la foto que buscas.
Canva Si tienes un blog, debes que saber que las imágenes de cabecera para tus entradas son muy importantes.
Es lo primero que verán los usuarios cuando entren en tu blog, por lo que es imprescindible causar una buena impresión. Además, si alguien comparte alguna de tus entradas en redes sociales, la imagen que aparecerá será la que hayas subido como imagen destacada. Por tanto, si es llamativa, obtendrás muchos más visitas. Para realizar buenas imágenes para tus artículos no hace falta estudiar diseño gráfico online, utilizar herramientas como Adobe Illustrator o ser experto en diseño gráfico. Existe una herramienta muy útil a la hora de crear contenidos para tu web o blog, que es gratuita y online. Se llama Canva.
Cuida el apartado visual de tu blog con buenas imágenes de cabecera con Canva
Al entrar en la herramienta lo primero que verás es un enorme listado con plantillas predeterminadas. Una vez elegida, llegarás a un lienzo con las dimensiones escogidas en el que podrás arrastrar y soltar diversos elementos para ir diseñando la pieza: fondos, iconos, ilustraciones, fotografías, títulos, sellos, etc. Tendrás un sinfín de posibilidades para hacer que las imágenes de tu web o blog sean únicas y marquen la diferencia con tu competencia.
Tinypng Siguiendo con las herramientas de diseño de páginas web enfocadas a las imágenes, ahora vamos con una imprescindible a la hora de su optimización: Tinypng, un compresor que disminuirá el peso de tus contenidos gráficos.
Es muy sencilla de utilizar, ya que solo hay que arrastrar las imágenes al recuadro que aparece en pantalla y Tinypng las optimizará automáticamente. Sin duda, toda una ventaja que tus usuarios y Google agradecerán.
Contenido indexado y rastreadoIconfinder Una de las mejores formas de presentar los servicios que ofreces en la página de inicio de tu web es mediante
CBT NO 2 JOCOTITLÁN
SUBMÓDULO I Desarrolla aplicaciones web Cuarto Semestre
un icono y una breve descripción. Queda muy profesional, aporta cercanía y es mucho más fácil de leer.
Los iconos también son muy útiles a la hora de darle un toque de creatividad a tus contenidos del blog. Puedes ponerlos junto a los títulos para romper la monotonía del texto o para ser más original cuando escribas entradas con muchos puntos a tratar.
¿Y cuál es la mejor fuente de iconos gratuitos? Iconfinder.
Se trata de una base de iconos enorme en la que podrás encontrar todos los iconos del mundo en varios formatos y colores. Y lo mejor de todo es que dispone de un buscador que te permitirá filtrar los iconos por el estilo o la tipología. De tipo flat, 3d, handdrawn, de tipo cartoon, etc.
Stylebot Si quieres iniciarte en la personalización de tu web mediante código CSS pero no te atreves a modificarlo directamente, Stylebot es una de las mejores herramientas de diseño de páginas web y blogs para que pierdas el miedo a ello.
Es una extensión para tu navegador con la que podrás modificar visualmente cualquier web a tu antojo, y luego sacar el código CSS de dicha modificación. De este modo, luego solo tendrás copiar dicho código que se ha generado y pegarlo en la hoja de estilos de tu página web.
Posicionamiento WebSublime Text Si eres desarrollador y quieres crear tu página web con lenguajes de etiquetas y programación como HTML, CSS y JavaScript, tu herramienta se llama Sublime Text.
Sublime Text es un editor de código sencillo de utilizar que está concebido para programar sin distracciones. Tiene una interfaz muy intuitiva con muchas opciones y la posibilidad de configurar los documentos en multitud lenguajes de etiquetas y programación.
Una de las ventajas es que Sublime Text te marcará cada etiqueta, atributo, valor, etc, en un color distinto para que puedas identificar más rápido todos los elementos y tu código esté más organizado.
Además, es posible configurar la herramienta en varios colores oscuros para cuidar los ojos y cansar menos la
CBT NO 2 JOCOTITLÁN
SUBMÓDULO I Desarrolla aplicaciones web Cuarto Semestre
vista durante esas largas jornadas de desarrollo web.
Sin duda, es otra de las grandes herramientas de diseño de páginas web que existen en la actualidad.
Definir Canales Plan Contenidos BlogNotepad++ Al igual que Sublime Text, Notepad++ es una de las mejores herramientas de diseño de páginas web para programadores que quieren crear páginas sin la necesidad de utilizar un CMS como WordPress o Joomla.
Algunas de las características que lo convierten en una buena herramienta es su sistema de sintaxis y coloreado. Notepad++ es capaz de identificar las expresiones propias del lenguaje utilizado y resaltarlas en una combinación de colores que facilitan la lectura y el escaneo por parte del ojo humano.
GTMetrix Si bien no es una herramienta de diseño de páginas web y blogs como tal, sí que es muy útil a la hora de optimizar una web tras acabar su diseño.
GTMetrix te permite analizar el tiempo de carga de tu web para que sepas exactamente lo que tarda en mostrarse. Y lo mejor de todo, es que te dice que es lo que está causando que tu web cargue lentamente y te da una serie de recomendaciones para mejorarla.
Tras diseñar tu web comienza la fase de optimización. Conoce los fallos de velocidad con GTMetrix Click To Tweet
Como norma general, tu sitio web debe cargar en el menor tiempo posible, siendo 4 segundos el tiempo máximo deseado.
¿Y por qué es tan importante que tu web sea veloz? Principalmente por dos razones.
Por un lado, es importante que tu web cargue rápidamente porque los usuarios nos hemos vuelto algo impacientes y, si vemos que algo tarda en cargar, volvemos atrás y nos vamos a otra página.
Por otro lado, de un tiempo a esta parte, Google toma muy en cuenta la velocidad de carga de tu web a la hora de posicionarte en su listado de resultados. Por tanto, cuanto menos tarde en cargar, mejor
CBT NO 2 JOCOTITLÁN
SUBMÓDULO I Desarrolla aplicaciones web Cuarto Semestre
posicionamiento SEO tendrás.
gtmetrix es una de las herramientas de diseño de páginas web
Herramientas de diseño de páginas web y blogs para WordPress
Visual Composer Si utilizas WordPress como principal herramienta de diseño de páginas web, Visual Composer es tu mejor aliado.
Visual Composer es un plugin de maquetación visual que te permite elegir entre multitud de elementos creativos que puedes incrustar en cualquier lugar de tu página para dotarla de un diseño totalmente profesional con unos pocos clics.
Dispone de una interfaz muy intuitiva y te proporciona un enorme listado de opciones como bloques de texto, imágenes, iconos con texto, contadores dinámicos, pestañas, mapas interactivos de Google Maps, botones, y un largo etcétera.
Por su versatilidad, y porque es el maquetador visual más usado y extendido de WordPress, sin duda es la mejor elección a la hora de crear páginas web.
Bloom ¿Te has fijado en esos formularios de suscripción tan chulos que están de moda últimamente? Sirven para captar usuarios a los que les haya gustado el contenido de la web y poder luego avisarles de que hay nuevos contenidos y traerlos de vuelta. También para enviarles ofertas y cupones de descuento en caso de ser un ecommerce.
Antes de que existiera WordPress y los plugins, realizar un formulario de suscripción a una lista de correo o newsletter era una tarea algo tediosa. Había que crear el código HTML, luego modificar el aspecto mediante código CSS y posteriormente realizar la vinculación a servicios de email marketing vía programación. Hoy en día, con WordPress + Bloom, es posible crear formularios de suscripción totalmente personalizados con un par de clics.
CBT NO 2 JOCOTITLÁN
SUBMÓDULO I Desarrolla aplicaciones web Cuarto Semestre
Bloom te permite diseñar formularios de suscripción combinando imágenes, bloques de texto, pequeñas animaciones y todo lo que se te pueda ocurrir. Después de diseñarlo podrás vincularlo fácilmente con todas las plataformas de email marketing como Mailchimp y colocarlo en cualquier sitio de la web.
Personalmente, creo que es una de las grandes herramientas de diseño de páginas web y blogs del momento.
Ninja Forms Ya sea para contratar algún servicio, comprar algún producto o para informar sobre algún problema o sugerencia de tu página, es imprescindible que haya un buen formulario de contacto que cree una vía de comunicación con tus usuarios. Si utilizas WordPress para diseñar tus páginas, una de las mejores opciones es Ninja Forms.
Es un plugin que facilita mucho el diseño y la inserción de formularios de contacto.
Podrás insertar formularios con todos los campos que se te puedan ocurrir, desde los típicos inputs de correo electrónico, teléfono y nombre, hasta los más avanzados como listas de opciones con desplegables, checkbox con selecciones múltiples e incluso campos para adjuntar documentos (por ejemplo, para que los usuarios quieran adjuntar su CV si dispones de sección “Trabaja con nosotros”).
Contact Form 7 El clásico entre los clásicos. Contact Form 7 es el plugin de formularios de contacto para WordPress más utilizado en el mundo. Tanto es así, que viene por defecto en muchas plantillas.
Al igual que Ninja Forms, podrás crear formularios de contacto con todos los campos que quieras e incrustarlo en cualquier página o entrada mediante un shortcode que se genera automáticamente cuando creas un formulario.
Plan Twitter Galería ArtePlantillas o temas premium Si utilizas WordPress para crear tus páginas web, una de las grandes ventajas que tiene respecto a cualquier otro CMS es la enorme cantidad de plantillas disponibles. Éstas permiten crear una página web bien estructurada, con los colores muy bien escogidos y con contenido de demostración que puedes aprovechar para que el proceso de creación de tu web sea rápido y el resultado sea totalmente profesional.
CBT NO 2 JOCOTITLÁN
SUBMÓDULO I Desarrolla aplicaciones web Cuarto Semestre
Las plantillas WordPress son las que determinan la estructura y apariencia que va a tener tu página web. Normalmente traen varias diseños predeterminados para puedas escoger el que más se ajuste a lo que quieres transmitir en tu sitio web. Gracias a las plantillas, podrás diseñar una página web completa en cuestión de horas.
WordPress Theme Detector Seguramente te haya pasado en algún momento. Entras a una web hecha en WordPress que te gusta tanto que quieres saber qué plantilla y qué plugins está utilizando para implementar algunos de esos elementos y funcionalidades en tu web. No obstante, si no conoces al propietario de esa página, quizás te de corte preguntar o simplemente el diseñador no te lo quiera decir para que no le copies. Pero no te preocupes, porque tengo la herramienta definitiva: WordPress Theme Detector.
Tan solo tienes que insertar la web que quieres analizar y dejar que la herramienta trabaje por tí. Tras unos segundos, aparecerá el tema y los plugins que utiliza la web siempre y cuando esté realizada sobre WordPress. Sencillamente impresionante.
ACTIVIDAD 2 •Elabora un diseño de interfaz de una pagina Instrucciones Realiza diseño de una página web de la escuela Fecha de entrega: 5 de marzo INSTRUMENTO DE EVALUACIÓN LISTA DE COTEJO 35% MÓDULO III DESARROLLA APLICACIONES WEB Y MÓVILES
SUBMÓDULO I Desarrolla aplicaciones web NOMBRE DEL ALUMNO
INDICADORES DE UN DISEÑO DE INTERFAZ 1. El alumno coloca su nombre en un encabezado de página y en el pie de página coloca el semestre que está cursando. 2. El alumno coloca el logo de la institución 3. Coloca iconos de acuerdo a las áreas que hay en la institución 4. Muestra limpieza al realizar el trabajo 5. Cuida la ortografía al elaborar el informe documental 6. El alumno comprende y desarrolla la competencia 8.3 Asume una actitud constructiva, congruente con los conocimientos y
SI
NO
OBSERVACIONES
CBT NO 2 JOCOTITLÁN
SUBMÓDULO I Desarrolla aplicaciones web Cuarto Semestre
habilidades con los que cuenta dentro de distintos equipos de trabajo 7. Con la actividad el alumno desarrolla el resultado de aprendizaje que es “ Diseña los elementos visuales de la interfaz web, utilizando herramientas de diseño gráfico digita”
Materiales de apoyo para análisis de formación en la actividad 3 Y 4 Dibujar libremente, Dibujar a partir de nodos, Aplicar efectos tridimensionales 9 TIPOS DE RECURSOS Y HERRAMIENTAS PARA DISEÑO WEB De modo que, te presento mis recursos habituales en función del tipo de tarea que me permiten desarrollar. Espero que quede claro 🙂 #1 Diseño gráfico Como ya he contado en varios artículos, lo primero que hago cuando empiezo una página web en WordPress es diseñar toda la parte gráfica: logo, banners, cabeceras, etc. Mi herramienta favorita para todo lo que tiene que ver con diseño gráfico es Photoshop. Es la que uso cada día para diseñar logotipos, banners, portadas de posts o creatividades. Otra del paquete Adobe, pero que requiere conocimientos más avanzados es Illustrator, programa que uso cuando tengo que trabajar con Vectores. Si no tienes grandes conocimientos en diseño gráfico, puedes probar otras como Canva, una opción realmente interesante para crear diseños de forma rápida y sencilla: 5 herramientas de diseño alternativas a PhotoshopLEER AHORA #2 Paletas y combinaciones de colores Una tarea estrechamente relacionada con el diseño gráfico es la creación de la paleta de colores del sitio web. Para crear combinaciones de colores también utilizo Phososhop, aunque que recurro a otras páginas y herramientas para buscar inspiración: 9 herramientas con las que crear paletas de colores para diseño webLEER AHORA De todas ellas, mis dos favoritas a la hora de inspirarme son: Design Seeds y Color Hunt. Como ya sabes si eres lector de esto blog, siempre recomiendo escoger un color principal y dos o tres complementarios. Aquí puedes ver a qué me refiero en mi propia paleta de colores: paleta de colores de esta web #3 Tipografías Otra de las tareas relacionadas con la identidad y la parte visual de la web son las tipografías. Como en el caso de la paletas de colores, para las tipografías también recomiendo crear combinaciones sencillas: una fuente para el cuerpo de texto y otra (dos como mucho) para los
CBT NO 2 JOCOTITLÁN
SUBMÓDULO I Desarrolla aplicaciones web Cuarto Semestre
elementos destacados de la web (botones, títulos, subtítulos, llamadas a la acción, etc). De hecho, la dificultad de las tipografías no está en elegirlas, sino en combinarlas correctamente, pues hay miles de opciones diferentes y a veces es complicado. La herramienta que más utilizo para buscar tipografías es Google Fonts, aunque hay otras que también me gustan: Tipografías para web: herramientas + consejos para combinarlasLEER AHORA #4 Plantilla y maquetador visual Una vez tienes lista toda la parte gráfica del sitio web, es el momento de escoger la plantilla y/o maquetador visual que vas a usar. En este punto tienes dos opciones: 1.
Escoger y comprar una plantilla cuyo diseño te guste y puedas adaptar a tu proyecto.
2.
Trabajar con un editor visual y maquetar tu web desde cero. Si optas por la primera opción, puedes encontrar plantillas muy interesante en Theme Forest, un marketplace que cuenta con miles de temas premium para WordPress. Mis plantillas favoritas de todas las que he probador a lo largo de estos años: Divi, Salient, Bridge, RedWood y SimpleMag. Si prefieres tener un diseño exclusivo y tienes conocimientos más avanzados, te recomiendo trabajar con un maquetador visual en tu web. En cuanto a maquetadores para WordPress, hay varios en el mercado (Divi, Elementor, Visual Composer). Solo tienes que ver cuál es el que mejor se adapta a tus necesidades. Ya sabes que Divi es mi favorito y el que siempre uso en mis diseños.
Las mejores plantillas WordPress premium.
Las mejores plantillas WordPress gratis. #5 Plugins Fundamental a la hora de hacer una página web en WordPress, es utilizar los mejores plugins (tanto gratuitos como de pago). Como en el mercado de plugins existen varios miles de opciones, quiero compartir contigo cuáles son los fundamentales que utilizo en mis diseños: 15 tipos de plugins para WordPress que necesitas en tu webLEER AHORA
404page – your smart custom 404 error page. Plugin para personalizar la página de error 404.
Antispam Bee para evitar spam en los comentarios.
Bloom para la captación de suscriptores a través de Email Marketing.
GDPR Cookie Consent para mostrar que la web cumple con la Ley de cookies de la UE (GRPD).
Limit Login Attempts. Plugin de seguridad para evitar posibles ataques.
Monarch para compartir entradas y páginas en redes sociales.
CBT NO 2 JOCOTITLÁN
SUBMÓDULO I Desarrolla aplicaciones web Cuarto Semestre
Redirection para crear redirecciones personalizadas.
WP Smush para comprimir y optimizar imágenes.
Table of Contents Plus para mostrar una tabla de contenidos en los artículos.
TinyMCE Advanced para añadir funcionalidades extras en el editor de WordPress.
WordPress Related Posts para mostrar entradas relacionados al final de los posts.
WP Rocket. Plugin premium para la WPO, caché, carga, base de datos…
Yoast SEO, plugin universal para los temas de SEO. Por supuesto, utilizo más plugins, pero esos son mis imprescindibles. #6 CSS Otra tipo de herramientas para diseño web son las que ayudan a generar código CSS y crear elementos del diseño diferentes a los que vienen por defecto. Para esta tarea te recomiendo un par de herramientas online:
1.
CSS3 Generator
2.
CSS Code Generators Y para crear botones personalizados, te recomiendo CSS Button Generator, un recurso que utilizo cuando quiero botones más exclusivos. Aquí puedes ver un ejemplo: #7 Bancos de imágenes, iconos y recursos visuales En los proyectos en los que el cliente no dispone de imágenes propias o no tiene recursos para contratar a un fotógrafo, trabajo con varios bancos. En estos bancos busco imágenes, vídeos, vectores e iconos. Los cuatro que utilizo son:
Shutterstock. Es un banco de pago en el que tengo cuenta y que utilizo para encontrar imágenes, vídeos, vectores e ilustraciones con mucha calidad.
Unsplash. Se trata de un banco donde puedes encontrar imágenes con muchísima calidad de forma gratuita. Es el recurso que utilizo cuando quiero buscar fotografías más exclusivas y que no estén tan vistas.
Freepik. Es el banco que utilizo para buscar y descargar vectores.
Flaticon. Herramienta que uso para encontrar iconos cuando necesito algo diferente a los que trae por defecto la plantilla. #8 Comprimir y optimizar imágenes Otra de las tareas imprescindibles a la hora de diseñar una web es la de comprimir y optimizar todas las imágenes que subo para aligerar su peso y ganar en velocidad de carga. Para esta tarea utilizo varias herramientas:
Photoshop. La funcionalidad «guardar para web» es mi preferida.
CBT NO 2 JOCOTITLÁN
SUBMÓDULO I Desarrolla aplicaciones web Cuarto Semestre
Compressor.io es la aplicación web que utilizado para comprimir imágenes sin perder calidad.
El plugin Smush para ajustar los tamaños de las imágenes en WordPress (ya lo he mencionado cuando he hablado de plugins). 7 herramientas para optimizar imágenes en WordPressLEER AHORA #9 Herramientas complementarias Por último, no son herramientas para diseño web como tal, pero te quiero mencionar una serie de herramientas y servicios complementos en todo proyecto web. La mayoría son servicios que necesitas dar de alta y vincular con tu página web; otros son plataformas para mejorar tu sitio. Te cuento más sobre todos ellos:
1.
Analytics. Es la herramienta de Google que permite medir analizar los datos y estadísticas de una web: visitas, usuarios, tecnología, procedencia del tráfico, etc.
2.
Search Console. Otra herramienta de Google para administradores de sitios web. Permite analizar una página a ojos de Google, conocer su estado de indexación, eliminar errores, agregar redirecciones o subir un sitemap, entre otras opciones.
3.
Keyword Planner de AdWords. Se trata de una herramienta más de Google. Sirve para buscar palabras clave, así como su nivel de competencia y dificultad de posicionamiento. Fundamental para los artículos del blog.
4.
Medidores de velocidad de carga. Conocer los datos y tiempos de carga de tu web es fundamental para optimizarlos y mejorar así el SEO.
ACTIVIDAD 3 ELABORACIÓN DE INFOGRAFÍA DE LAS HERRAMIENTAS DE DISEÑO Instrucciones El alumno elabora una infografía de acuerdo a las herramientas de diseño Fecha de entrega: 12 de marzo INSTRUMENTO DE EVALUACIÓN LISTA DE COTEJO 35% MÓDULO III DESARROLLA APLICACIONES WEB Y MÓVILES
SUBMÓDULO I Desarrolla aplicaciones web NOMBRE DEL ALUMNO
INDICADORES DE UNA INFOGRAFÍA 1. Coloca el título del tema en la elaboración de la infografía
SI
NO
OBSERVACIONES
CBT NO 2 JOCOTITLÁN
SUBMÓDULO I Desarrolla aplicaciones web Cuarto Semestre
2. Coloca alguna imágenes de las herramientas 3. El alumno hace uso del programa 4. Realiza la investigación del uso de las herramientas 5. Muestra la creatividad al elaborar la infografía 6. Muestra limpieza al realizar el trabajo 7. Cuida la ortografía al elaborar la infografía 8. El alumno comprende y desarrolla la competencia 8.3 Asume una actitud constructiva, congruente con los conocimientos y habilidades con los que cuenta dentro de distintos equipos de trabajo 9. Con la actividad el alumno desarrolla el resultado de aprendizaje que es “ Diseña los elementos visuales de la interfaz web, utilizando herramientas de diseño gráfico digita”
ACTIVIDAD 4 INTERFAZ GRAFICO DE PÁGINA
Instrucciones Realiza una interfaz con imágenes de tu diseño web Fecha de entrega: 19 de marzo INSTRUMENTO DE EVALUACIÓN LISTA DE COTEJO 35% MÓDULO III DESARROLLA APLICACIONES WEB Y MÓVILES
SUBMÓDULO III. Administra y configura plataformas e-learning NOMBRE DEL ALUMNO
INDICADORES DE UNA INTERFAZ 1. El alumno coloca su nombre en un encabezado de página y en el pie de página coloca el semestre que está cursando. 2. El alumno coloca el logo de la institución 3. Coloca iconos de acuerdo a las áreas que hay en la institución 4. Muestra limpieza al realizar el trabajo 5. Cuida la ortografía al elaborar el informe documental 6. El alumno comprende y desarrolla la competencia 8.3 Asume una actitud constructiva, congruente con los conocimientos y habilidades con los que cuenta dentro de distintos equipos
SI
NO
OBSERVACIONES
CBT NO 2 JOCOTITLÁN
SUBMÓDULO I Desarrolla aplicaciones web Cuarto Semestre
de trabajo 7. Con la actividad el alumno desarrolla el resultado de aprendizaje que es “ Diseña los elementos visuales de la interfaz web, utilizando herramientas de diseño gráfico digita” 8. El alumno comprende y desarrolla la competencia 8.3 Asume una actitud constructiva, congruente con los conocimientos y habilidades con los que cuenta dentro de distintos equipos de trabajo 9. Con la actividad el alumno desarrolla el resultado de aprendizaje que es “ Diseña los elementos visuales de la interfaz web, utilizando herramientas de diseño gráfico digital.”
ELABORÓ
REVISÓ Y AUTORIZÓ
PROFRA. FANNY GONZÁLEZ MONROY RESPONSABLE DEL SUBMÓDULO III INSTRUMENTA LA PRACTICA
PROFRA. JOSEFINA MARTÍNEZ HERRERA SUBDIRECTORA ESCOLAR
Vo. Bo.
PROFRA. ARACELI MARGARITO SANTIAGO DIRECTORA ESCOLAR
Related documents
CUADERNO DE TRABAJO DE DE PRIMER PARCIAL DE SUBMODULO I
27 Pages • 7,971 Words • PDF • 1.5 MB
ACUERDOS DE TRABAJO VIRTUAL C.F.M.A
3 Pages • 712 Words • PDF • 138.8 KB
TRABAJO 5 TIPOS DE PAISAJES
2 Pages • 406 Words • PDF • 475 KB
AVALIAÇÕES DE PROGRESSÃO PARCIAL- GEOGRAFIA_2015-2016
7 Pages • 1,928 Words • PDF • 638 KB
PRACTICA Nº1 TRABAJO DE RECUPERACION - COCINA ITALIANA
13 Pages • 3,042 Words • PDF • 3 MB
RU¦üBRICA MODALIDAD 3 TRABAJO DE TITULACION
5 Pages • 963 Words • PDF • 291.8 KB
PLANO DE ENSINO - INFANTIL I
38 Pages • 6,323 Words • PDF • 380.1 KB
Marketing De Afiliados de AaZ
32 Pages • 7,894 Words • PDF • 886.1 KB
CADERNO DE ATIVIDADES DE ALFABETIZAÇÃO
13 Pages • 475 Words • PDF • 1.6 MB
Roteiro de Projeto de Intervenção
2 Pages • 451 Words • PDF • 453.6 KB
MECANISMO DEL TRABAJO DE PARTO-2
1 Pages • 575 Words • PDF • 584.6 KB
TP 3- TRABAJO DE CAMPO- OLIVAREZ
4 Pages • 257 Words • PDF • 776.9 KB