Asignatura_Diseno_Web_Carrera_Comunicaci

•

Artes

yonny lopex

8/6/2024

¡Este material tiene más páginas!

Vista previa del material en texto

Asignatura: Diseño Web
Carrera: Comunicación Digital

Carrera de Comunicación Digital
Asignatura: Diseño Web

Guía didáctica

Autor:
Mgtr. Víctor Hugo Lobato I.

Comunicación Digital
Modalidad Híbrida

Diseño Web
Guía didáctica
Víctor Hugo Lobato I.

Instituto Superior Tecnológico José Ortega y Gasset

Diagramación y diseño digital:
Maglu Estudio Creativo
098 475968968.
Av. Canónigo Ramos y Juan
Chiriboga.
www.magluestudiocreativo.com
magluestudiocreativo@hotmail.com
Riobamba-Ecuador

http://www.magluestudiocreativo.com/
mailto:edilojainfo@ediloja.com.ec

Diseño Web
TECNOLOGÍAS EN COMUNICACIÓN DIGITAL

DESARROLLO DE LAS UNIDADES

PROCESO DE
APRENDIZAJE

ACTIVIDADES:

1.- Actividades de aprendizaje individual asistidas por el docente:

Planificadas y descritas en la guía didáctica, complementadas con tutorías en línea

2.- Actividades de aprendizaje colaborativo:

Chats, foros, debates.

3.- Actividades prácticas de aplicación y experimentación de los aprendizajes:
Elaboración de material gráfico u objetos, resolución de problemas o casos.

4.- Actividades de aprendizaje autónomo:

Lecturas, investigaciones, visualizaciones, búsqueda en redes, autoevaluaciones.

INSTRUCCIONES
 En el presente programa académico se trabajará con la modalidad híbrida, es decir, a
distancia, con el complemento de tutorías en línea.

 Para la elaboración de las tareas el alumno se apoyará en el estudio de la guía didáctica,
las sesiones tutoriales y su propia experiencia. Las tareas se entregarán al final de cada
unidad.

 En la realización de las tareas el alumno debe atender:

El cuidado y orden en la elaboración.
La corrección en la expresión escrita.
El cumplimiento de todos los requisitos establecidos.

 Las actividades de aprendizaje pueden ser:

Tareas
Prácticas de refuerzo
Actividades de autoaprendizaje
Autoevaluación

 El conocimiento de los orígenes del cine es indispensable para una adecuada formación
en la carrera de Cine y Actuación. Recomendamos realizar el trabajo con seriedad, para
obtener los mejores resultados

FUENTES DE CONSULTA

Recursos audiovisuales:

Links:
1. apr. (01 de 07 de 2022). https://www.aprenderaprogramar.es. Obtenido de
https://www.aprenderaprogramar.es/index.php?option=com_content&view=article&id=435:
ique-es-y-para-que-sirve-html-el-lenguaje-mas-importante-para-crear-paginas-webs-html-
tags-cu00704b&catid=69:tutorial-basico-programador-web-html-desde-cero&Itemid=192
2. arsys. (1 de 07 de 2022). https://www.arsys.es. Obtenido de
https://www.arsys.es/blog/programacion/diseno-web/mejores-editores-html-ide
3. B., G. (29 de 04 de 2022). https://www.hostinger.es. Obtenido de
https://www.hostinger.es/tutoriales/que-es-un-hosting
4. B., G. (29 de 04 de 2022). https://www.hostinger.es. Obtenido de
https://www.hostinger.es/tutoriales/que-es-un-dominio-web
5. definicion.de. (20 de 05 de 2022). https://definicion.de. Obtenido de
https://definicion.de/diseno/
6. definicion.de. (20 de 05 de 2022). https://definicion.de. Obtenido de
https://definicion.de/web-3-0/
7. ecdisis.com. (20 de 05 de 2022). https://ecdisis.com. Obtenido de https://ecdisis.com/que-es-
diseno-web/
8. Gijon, J. (16 de 05 de 2022). https://www.linkedin.com. Obtenido de
https://www.linkedin.com/pulse/hablemos-de-dise%C3%B1o-web-jorge-/?trk=pulse-
article&originalSubdomain=es
9. grupovisuallab.com. (20 de 05 de 2022). https://grupovisuallab.com. Obtenido de
https://grupovisuallab.com/wp-content/uploads/2018/08/desarrollo_web.png
10. Hostinger. (20 de 04 de 2022). https://www.hostinger.com.br. Obtenido de
https://www.hostinger.com.br/tutoriais/o-que-e-um-blog
11. iLB. (29 de 07 de 2022). https://ilifebelt.com. Obtenido de https://ilifebelt.com/que-es-
comunicacion-digital-y-por-que-es-importante-en-las-empresas/2016/09/
12. MDN. (01 de 07 de 2022). https://developer.mozilla.org/es. Obtenido de
https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/HTML_basics

13. milenium. (20 de 05 de 2022). https://www.informaticamilenium.com.mx. Obtenido de
https://www.informaticamilenium.com.mx/es/temas/que-son-los-sitios-web.html
14. moqups. (20 de 05 de 2022). https://moqups.com. Obtenido de
https://moqups.com/es/templates/diagrams-flowcharts/site-maps/
15. Moreno, C. (7 de 08 de 2018). https://www.solucionesmedia.com. Obtenido de
https://www.solucionesmedia.com/que-es-hosting/
16. paccari. (20 de 05 de 2022). https://www.paccari.com. Obtenido de
https://www.paccari.com/dia-de-la-madre/?gclid=Cj0KCQjw-
JyUBhCuARIsANUqQ_JdmbYbQKialAlV9OdPaLYriLS6ySowTerJ72Up9Rg12PezVsBEUe4aAk3SE
ALw_wcB
17. Red de Universidades Anahuac. (29 de 07 de 2022). https://www.anahuac.mx. Obtenido de
https://www.anahuac.mx/blog/comunicacion-digital-una-poderosa-
herramienta#:~:text=La%20comunicaci%C3%B3n%20digital%2C%20a%20diferencia,alcance%
20de%20una%20gran%20mayor%C3%ADa.
18. rockcontent.com. (2020 de 05 de 2022). https://rockcontent.com. Obtenido de
https://rockcontent.com/es/blog/diseno-web/
19. Universidad de Murcia. (01 de 07 de 2022). https://www.um.es. Obtenido de
https://www.um.es/docencia/barzana/DAWEB/Introduccion-a-html-y-
css.html#:~:text=El%20origen%20de%20HTML%20se,hab%C3%ADan%20sido%20desarrollad
os%20a%C3%B1os%20antes.
20. Vega Rosales, A. (12 de 06 de 2022). https://www.monografias.com. Obtenido de
https://www.monografias.com/trabajos-pdf2/manual-elaborar-blog-aplicacion-
educacion/manual-elaborar-blog-aplicacion-educacion.pdf
21. Wikipedia. (15 de 07 de 2022). https://es.wikipedia.org. Obtenido de
https://es.wikipedia.org/wiki/Wix.com
22. wix.com. (15 de 07 de 2022). https://es.wix.com. Obtenido de
https://es.wix.com/blog/2019/04/guia-para-crear-paginas-web/

Índice

PROCESO DE .......................................................................................................................... 5
APRENDIZAJE ........................................................................................................................ 5
ACTIVIDADES: ....................................................................................................................... 5
FUENTES DE CONSULTA .................................................................................................... 6
Datos de Información ............................................................................................................... 15
INTRODUCCIÓN .............................................................................................................. 15
OBJETIVO GENERAL ..................................................................................................... 15
COMPETENCIAS DE LA CARRERA ........................................................................... 16
Unidad 1: ................................................................................................................................. 17
INTRODUCCIÓN .............................................................................................................. 17
Resultado de aprendizaje:.................................................................................................. 17
Contenidos:.......................................................................................................................... 17
1.1 ¿Qué es el Diseño? ..................................................................................................... 17
1.2 ¿Qué es la Web? .........................................................................................................17
1.3 ¿Qué es el Diseño Web? ............................................................................................. 17
1.4 ¿Qué hace un diseñador Web?.................................................................................... 17
1.5 Las 7 fases de desarrollo de un sitio Web optimo ...................................................... 17
¿Diseño? ................................................................................................................................... 17
¿Web? ....................................................................................................................................... 18
¿Qué es la web 3.0? .............................................................................................................. 18
Tarea: ................................................................................................................................ 19
¿Qué es el Diseño Web? ........................................................................................................... 19
Tarea: ................................................................................................................................ 20
A tomar en cuenta antes de empezar a diseñar: ................................................................ 20
¿Qué es un Sitio Web o Website? ........................................................................................ 20
¿Qué es el Hosting? .............................................................................................................. 21
Tarea: ................................................................................................................................ 22
¿Qué es el Dominio?............................................................................................................. 22
file:///C:/Users/Usuario/Desktop/respaldo/ITSOG/GUÍA%20DIDÁCTICA%20DISEÑO%20WEB.docx%23_Toc110040472

Tarea: ................................................................................................................................ 22
¿Qué hace un diseñador web? .................................................................................................. 23
Las 7 fases de desarrollo de un sitio web óptimo ..................................................................... 23
Fase 1 – Análisis ................................................................................................................... 23
1. Sitios web de comercio electrónico. ....................................................................... 24
2. Blogs....................................................................................................................... 24
5. Comunidades online. .............................................................................................. 24
Público Objetivo: .............................................................................................................. 24
Fase 2 – Planificación ........................................................................................................... 26
Tarea: ................................................................................................................................ 27
Fase 3 – Diseño..................................................................................................................... 27
Fase 4 – Contenidos .............................................................................................................. 28
Fase 5 – Desarrollo ............................................................................................................... 28
Fase 6 – Pruebas ................................................................................................................... 28
Fase 7 – Lanzamiento .......................................................................................................... 28
Tareas ...................................................................................................................................... 29
Tarea 1: ............................................................................................................................. 29
Tarea 2: ............................................................................................................................. 29
Tarea 3: ............................................................................................................................. 29
Prácticas de refuerzo .......................................................................................................... 29
Actividades de autoaprendizaje ........................................................................................ 29
AUTOEVALUACIÓN ........................................................................................................... 30
(verdadero o falso) .................................................................................................................... 30
Unidad 2: ................................................................................................................................. 31
Diseño de un Sitio Web ...................................................................................................... 31
Resultado de aprendizaje:.................................................................................................. 31
Contenidos:.......................................................................................................................... 31
2.1 ¿Qué es el Blog? ......................................................................................................... 31
2.2 ¿Qué es Blogger? ........................................................................................................ 31
2.3 ¿Cómo cambiamos el Diseño del Blog? ..................................................................... 31
2.4 ¿Cómo añadimos el contenido al Sitio Web? ............................................................. 31
2.5 ¿Cómo añadimos páginas a nuestro Sitio Web? ......................................................... 31
¿Blog? ....................................................................................................................................... 31
¿Blogger? .................................................................................................................................. 32
Crear un blog ........................................................................................................................ 32
Crear un blog ........................................................................................................................ 33
Gestionar el blog ................................................................................................................... 33
file:///C:/Users/Usuario/Desktop/respaldo/ITSOG/GUÍA%20DIDÁCTICA%20DISEÑO%20WEB.docx%23_Toc110040511
file:///C:/Users/Usuario/Desktop/respaldo/ITSOG/GUÍA%20DIDÁCTICA%20DISEÑO%20WEB.docx%23_Toc110040517
file:///C:/Users/Usuario/Desktop/respaldo/ITSOG/GUÍA%20DIDÁCTICA%20DISEÑO%20WEB.docx%23_Toc110040518

Navegadores que puedes utilizar .......................................................................................... 33
¿Cómo cambiamos el Diseño del Blog? ................................................................................... 34
Cambiar el blog con gadgets ............................................................................................ 34
Diseñador de Temas ......................................................................................................... 34
Cambiar ajustes como el fondo y el ancho de las columnas ............................................ 35
Cambiar el tamaño, el color y el tipo de letra ................................................................... 35
¿Cómo seleccionamos el contenido para el Blog? ...................................................................36
Funcionalidades ................................................................................................................ 36
Integración ........................................................................................................................ 36
Limitaciones ..................................................................................................................... 37
El mapa del Sitio Web ...................................................................................................... 37
El contenedor .................................................................................................................... 38
Cargando un video Directamente de mi celular al Blog. .................................................. 38
Crear, editar, gestionar o eliminar una entrada ......................................................................... 39
Escribir una entrada nueva ................................................................................................... 40
Añadir etiquetas a entradas ................................................................................................... 40
Filtrar las entradas con etiquetas .......................................................................................... 40
Publicar una entrada ............................................................................................................. 40
Editar una entrada ................................................................................................................. 40
Eliminar una entrada ............................................................................................................. 40
Contenido que se debe evitar ................................................................................................ 40
Añadir páginas a tu blog ........................................................................................................... 41
Paso 1: Mostrar tus páginas .................................................................................................. 41
Paso 2: Crear, editar o eliminar páginas ............................................................................... 41
Paso 3: Seleccionar las páginas que se mostrarán ................................................................ 41
Tareas ...................................................................................................................................... 42
Tarea 1: ............................................................................................................................. 42
Tarea 2: ............................................................................................................................. 42
Tarea 3: ............................................................................................................................. 42
Prácticas de refuerzo .......................................................................................................... 42
Actividades de autoaprendizaje ........................................................................................ 42
AUTOEVALUACIÓN ........................................................................................................... 43
(verdadero o falso) .................................................................................................................... 43
Unidad 3: ................................................................................................................................. 44
Lenguaje HTML ................................................................................................................. 44
Resultado de aprendizaje:.................................................................................................. 44
Contenidos:.......................................................................................................................... 44
file:///C:/Users/Usuario/Desktop/respaldo/ITSOG/GUÍA%20DIDÁCTICA%20DISEÑO%20WEB.docx%23_Toc110040558
file:///C:/Users/Usuario/Desktop/respaldo/ITSOG/GUÍA%20DIDÁCTICA%20DISEÑO%20WEB.docx%23_Toc110040564
file:///C:/Users/Usuario/Desktop/respaldo/ITSOG/GUÍA%20DIDÁCTICA%20DISEÑO%20WEB.docx%23_Toc110040565

3.1 ¿Qué es el HTML? ..................................................................................................... 44
3.2 ¿Qué es un editor HTML? .......................................................................................... 44
3.3 ¿Manual básico de HTML? ........................................................................................ 44
3.4 ¿Para qué necesitamos conocer HTML? .................................................................... 44
3.5 ¿Cómo creamos un Website con radio Online?.......................................................... 44
¿HTML? ................................................................................................................................... 44
Entonces, ¿qué es HTML en realidad? ..................................................................................... 45
Reseña Histórica del HTML ..................................................................................................... 45
¿Qué es un editor HTML e IDE?.............................................................................................. 47
¿Editor HTML o IDE? .............................................................................................................. 47
Editores de HTML .................................................................................................................... 48
Sublime Text..................................................................................................................... 48
Komodo Edit..................................................................................................................... 48
VIM .................................................................................................................................. 48
PSPad ................................................................................................................................ 48
Notepad++ ........................................................................................................................ 49
Editores IDE ......................................................................................................................... 49
Emacs................................................................................................................................ 49
Komodo IDE..................................................................................................................... 49
Geany ................................................................................................................................ 49
Aptana Studio ................................................................................................................... 50
Visual Studio Express ....................................................................................................... 50
¿Cuál vamos a usar en este curso?........................................................................................ 50
¿Cómo ingresamos al Bloc de notas? ................................................................................... 51
Manual Básico de HTML ......................................................................................................... 51
Anatomía de un elemento HTML ......................................................................................... 51
Anidar elementos .................................................................................................................. 52
Elementos vacíos .................................................................................................................. 52
Estructura básica de una páginaWEB .................................................................................. 53
Anatomía del ejemplo ........................................................................................................... 54
Imágenes ............................................................................................................................... 55
Marcado de texto .................................................................................................................. 55
Encabezados ..................................................................................................................... 55
Párrafos ............................................................................................................................. 56
Listas ..................................................................................................................................... 56
Vínculos ................................................................................................................................ 57
¿Para qué necesitamos conocer HTML? .................................................................................. 57

Tareas ...................................................................................................................................... 66
Tarea 1: ............................................................................................................................. 66
Tarea 2: ............................................................................................................................. 66
Tarea 3: ............................................................................................................................. 66
Prácticas de refuerzo .......................................................................................................... 66
Actividades de autoaprendizaje ........................................................................................ 66
AUTOEVALUACIÓN ........................................................................................................... 67
(verdadero o falso) .................................................................................................................... 67
Unidad 4: ................................................................................................................................. 68
Diseño de un Sitio Web con Wix ....................................................................................... 68
Resultado de aprendizaje:.................................................................................................. 68
Contenidos:.......................................................................................................................... 68
4.1 ¿Qué es Wix.com? ...................................................................................................... 68
4.2 ¿Cómo creamos un sitio web en Wix? ....................................................................... 68
4.3 ¿Cómo Editamos el Sitio Web? .................................................................................. 68
4.4 ¿Cómo añadimos contenido al Sitio Web? ................................................................. 68
4.5 ¿Cómo publicamos nuestro Sitio Web?...................................................................... 68
¿Wix.com? ................................................................................................................................ 68
Elige la plataforma ideal para crear tu sitio web .................................................................. 69
Conozcamos un poco más a fondo las ventajas de crear un sitio web con Wix. .................. 69
Wix Editor ............................................................................................................................ 70
1. Crear un sitio web con plantillas ...................................................................................... 70
2. Crear un sitio web desde cero ........................................................................................... 70
3. Crear un sitio web con Velo ............................................................................................. 71
¿Cómo crear una página web en Wix? ..................................................................................... 72
Inicia sesión en es.wix.com .................................................................................................. 72
¿Cómo editamos el sitio web? .................................................................................................. 77
Para cambiar un texto: .......................................................................................................... 77
Para cambiar una imagen:..................................................................................................... 78
¿Cómo añadimos contenido al sitio Web? ............................................................................... 79
Cargando Fotos, Imágenes o videos Directamente de mi celular al sitio Web. ............... 79
Pasándonos al modo Editor .................................................................................................. 80
¿Cómo grabar, visualizar y publicar nuestro Sitio Web? ..................................................... 80
Tareas ...................................................................................................................................... 82
Tarea 1: ............................................................................................................................. 82
Tarea 2: ............................................................................................................................. 82
Tarea 3: ............................................................................................................................. 82
file:///C:/Users/Usuario/Desktop/respaldo/ITSOG/GUÍA%20DIDÁCTICA%20DISEÑO%20WEB.docx%23_Toc110040607
file:///C:/Users/Usuario/Desktop/respaldo/ITSOG/GUÍA%20DIDÁCTICA%20DISEÑO%20WEB.docx%23_Toc110040613
file:///C:/Users/Usuario/Desktop/respaldo/ITSOG/GUÍA%20DIDÁCTICA%20DISEÑO%20WEB.docx%23_Toc110040614
file:///C:/Users/Usuario/Desktop/respaldo/ITSOG/GUÍA%20DIDÁCTICA%20DISEÑO%20WEB.docx%23_Toc110040640

Prácticas de refuerzo .......................................................................................................... 82
Actividades de autoaprendizaje ........................................................................................ 82
AUTOEVALUACIÓN ........................................................................................................... 83
(verdadero o falso) .................................................................................................................... 83
Unidad 5: ................................................................................................................................. 84
El Diseño Web aplicado en la Comunicación Digital ...................................................... 84
Resultado de aprendizaje:.................................................................................................. 84
Contenidos:.......................................................................................................................... 84
5.1 ¿Qué es la comunicación Digital? .............................................................................. 84
5.2 El Diseño Web Aplicado en la Comunicación Digital ............................................... 84
5.3 Medios de Comunicación Digital Esenciales ............................................................. 84
5.4 Proyecto Final ............................................................................................................. 84
¿Comunicación digital? ............................................................................................................84
¿Qué es la Comunicación Digital? ....................................................................................... 84
Un profesional que se dedique a esta área tiene varias funciones: ................................... 85
La importancia de la comunicación digital para las empresas ............................................. 85
Recordando y Aclarando .......................................................................................................... 86
¿Qué es el diseño web? ..................................................................................................... 86
¿Qué es un diseñador web? .............................................................................................. 87
¿Qué tareas realiza un diseñador web? ............................................................................. 87
¿Para qué sirve el diseño web y cuál es su función? ........................................................ 87
¿Cuáles son los elementos imprescindibles de todo diseño web? .................................... 88
¿Cuáles son las ventajas de invertir en un buen diseño web? .......................................... 88
En conclusión ................................................................................................................... 88
¿Cómo escoger entonces las mejores herramientas de comunicación digital? ................ 89
Categorías de herramientas de comunicación digital más comunes: ................................... 89
Tarea: ................................................................................................................................ 89
5 Medios de Comunicación Digital Esenciales ........................................................................ 90
Tarea: ................................................................................................................................ 92
Proyecto Final ........................................................................................................................... 92
Tareas ...................................................................................................................................... 93
Tarea 1: ............................................................................................................................. 93
Tarea 2: ............................................................................................................................. 93
Prácticas de refuerzo .......................................................................................................... 93
Actividades de autoaprendizaje ........................................................................................ 93
AUTOEVALUACIÓN ........................................................................................................... 94
(verdadero o falso) .................................................................................................................... 94
file:///C:/Users/Usuario/Desktop/respaldo/ITSOG/GUÍA%20DIDÁCTICA%20DISEÑO%20WEB.docx%23_Toc110040646
file:///C:/Users/Usuario/Desktop/respaldo/ITSOG/GUÍA%20DIDÁCTICA%20DISEÑO%20WEB.docx%23_Toc110040647
file:///C:/Users/Usuario/Desktop/respaldo/ITSOG/GUÍA%20DIDÁCTICA%20DISEÑO%20WEB.docx%23_Toc110040674
file:///C:/Users/Usuario/Desktop/respaldo/ITSOG/GUÍA%20DIDÁCTICA%20DISEÑO%20WEB.docx%23_Toc110040679
file:///C:/Users/Usuario/Desktop/respaldo/ITSOG/GUÍA%20DIDÁCTICA%20DISEÑO%20WEB.docx%23_Toc110040680

INTRODUCCIÓN

Si bien es común pensar que un diseñador web es responsable de crear sitios web atractivos y
completamente funcionales, debo indicarles que es más que eso. Incluso me atrevo a decirles
que la parte más importante está en la creación del contenido. Para lo cual se debe dominar
conceptos básicos como: Análisis de contenido, público objetivo, Estructura de sitios Web,
principios de la usabilidad (facilidad de uso para el usuario), UI (interfaz de usuario) y UX
(experiencia del usuario), estos permiten que además del diseño gráfico, el sitio web sea
funcional y más efectivo.
Además, debe aplicar normas y estándares para la redacción de textos, inclusión de imágenes,
videos con optimización para la web y la optimización para motores de búsqueda (SEO). Los
contenidos son la materia prima de nuestro proyecto, de estos depende en gran parte el éxito
porque al fin y al cabo es lo que nuestros usuarios utilizarán.
Posteriormente se desarrollará el sitio web considerando aspectos funcionales como el diseño
adaptativo (responsive size), esto permitirá tener compatibilidad con dispositivos móviles y
llegar a una mayor cantidad de usuarios. Cabe aclarar que actualmente existen sistema de
gestión de contenidos (en inglés, Content Management System o CMS) como, por ejemplo:
WordPress o Joomla. Estas herramientas nos ahorran tiempo y trabajo. Ya que programar un
sitio Web desde cero es un reto que además requiere que el usuario domine herramientas de
programación como PHP y bases de datos cliente servidor como MySQL. La pregunta es
porque aplicar tanto esfuerzo y recurso en algo que ya está construido y que simplemente
debemos reutilizar, cuando lo más importante es direccionar nuestro esfuerzo a la calidad del
contenido.
Aprenderemos a realizar pruebas técnicas para el funcionamiento adecuado de la página web,
revisaremos la compatibilidad con los navegadores web y muy importante verificaremos si el
sitio web cumple con el propósito que se planteó en los objetivos iniciales.
Finalmente publicaremos el sitio web en internet y realizaremos un monitoreo constante para
evitar fallas técnicas o realizar algún ajuste. También es necesario el mantenimiento del sitio
web no solo en temas técnicos sino en actualización de contenidos

OBJETIVO GENERAL

El Diseño web tiene por objetivo desarrollar conocimiento, competencias y técnicas en los
estudiantes; para planificar, diseñar, mantener y crear sitios web a través del uso de
herramientas como el HTML, pero principalmente utilizando sistema de gestión de
contenidos (en inglés, Content Management System o CMS).

Datos de Información

COMPETENCIAS DE LA CARRERA

 Conocer los fundamentos conceptuales de la comunicación, el periodismo y el diseño,
la interculturalidad, las leyes laborales y los preceptos de la ética profesional
 Manejar los programas informáticos Windows, Word, Excell, Power point, Ilustrador,
Phtoshop, Wix, Google site, Herramientas Web 2.0, In design, para ejecutar trabajos de
diseño digital, diseño Web y diseño publicitario.
 Aplicar los elementos de la Web 2.0, el E-learning, el E-commerce y el Community
managment, para realizar comercio, interactividad, promoción y publicidad.
 Manejar los principales métodos y técnicas de investigación de la opinión pública,
investigación de mercados, marketing, publicidad, sondeos y encuestas, para apoyar la
planificación y promoción publicitaria.
 Desenvolverse con eficiencia en medios de comunicación realizando reportajes,
crónicas, noticias, entrevistas.
 Usar los preceptos básicos de la atención al cliente y las relaciones públicas para lograr
una óptima comunicación con los clientes.
 Conocer y utilizar en su trabajo profesional las formas ancestrales de comunicación,
impulsar la aplicación de la comunicación intercultural con el apoyo de su conocimiento
del idioma quichua.
 Entender, desarrollar y manejar los medios digitales de comunicación: emisoras de radio
digitales, periódicos digitales y canales de TV. on-line.
 Manejar las técnicas para realizar campañas publicitarias de diversas clases: puntos de
venta, campañas comerciales, públicas, políticas, de imagen corporativa.
 Manejar los nuevos formatos de comunicación para optimizar su trabajo profesional y
realizar community managment.

Unidad 1:INTRODUCCIÓN

Resultado de aprendizaje:

Contenidos:

1.1 ¿Qué es el Diseño?
1.2 ¿Qué es la Web?
1.3 ¿Qué es el Diseño Web?
1.4 ¿Qué hace un diseñador Web?
1.5 Las 7 fases de desarrollo de un sitio Web optimo

¿Diseño?
Del italiano disegno, la palabra diseño se refiere a un boceto, bosquejo o esquema que se
realiza, ya sea mentalmente o en un soporte material, antes de concretar la producción de algo.
El término también se emplea para referirse a la apariencia de ciertos productos en cuanto a sus
líneas, forma y funcionalidades. (definicion.de, 2022)
 Informarse sobre que es el Diseño Web
 Aprender los conceptos básicos para
elaborar un sitio web.
 Conocer las fases o etapas para elaborar
un sitio web.
1.1 ¿Qué es el Diseño?
El alumno reconocerá que para elaborar un sitio web y
publicarlo se debe cumplir con ciertas etapas, además
aprenderá los fundamentos básicos para elaborarlo,
establecerá un contenido acorde a los requerimientos del
cliente.

Ilustración 1 Fases del Desarrollo de un sitio web.
Elaborado por: (grupovisuallab.com, 2022)

¿Web?
Web es un vocablo inglés que significa “red”, “telaraña” o “malla”. El concepto se utiliza en el
ámbito tecnológico para nombrar a una red informática y, en general, a Internet (en este caso,
suele escribirse como Web, con la W mayúscula). El término, de todas formas, tiene varios
usos.
La noción de web se emplea para nombrar a una red informática y, en especial, a Internet. La
idea de web 3.0 alude a una especie de extensión o de formato particular de la red tradicional.
Es importante tener en cuenta que el concepto no tiene una definición concreta, sino que suele
ser motivo de debate entre especialistas. En principio, para entender qué es la web 3.0, hay que
conocer a qué se refieren las dos “versiones” anteriores de la web.
La web 1.0 es Internet en su sentido clásico: una red descentralizada de computadoras
(ordenadores), vinculadas a través de un protocolo específico. Ingresar al sitio web de
un diario sería un ejemplo del funcionamiento típico de la web 1.0: la información se
encuentra en una computadora y los usuarios, a través de otro equipo, acceden a una
copia de la misma para leerla de forma local.
La web 2.0 se vincula a los servicios que permiten compartir datos e interactuar con gran
facilidad. Las redes sociales y las plataformas de colaboración constituyen la base de
esta evolución de Internet.
¿Qué es la web 3.0?
La idea de web 3.0, en este contexto, está relacionada a lo que se conoce como web
semántica. Los usuarios y los equipos, en este marco, pueden interactuar con la red
mediante un lenguaje natural, interpretado por el software. De esta manera, acceder a la
información resulta más sencillo. Dicho de otro modo, todos los datos alojados en la
web 3.0 deberían ser “entendidos” por las máquinas, que podrían procesarlos con
rapidez.
La web 3.0, en definitiva, está relacionada con la inteligencia artificial. Los sitios web
incluso tendrían la capacidad de conectarse entre sí de acuerdo a los intereses del
usuario. (definicion.de, 2022)

1.2 ¿Qué es la Web?

Ilustración 2 La web 3.0 se asocia a una mayor accesibilidad.
Elaborado por: (definicion.de, 2022)
Tarea: Elaborar un ensayo de 5 hojas sobre la Web 3.0 /10 p.

¿Qué es el Diseño Web?
El Diseño web es aquella actividad consistente en planificar, diseñar, mantener y crear sitios
web. Se aleja del término más tradicional del diseño en cuanto a que engloba una gran variedad
de aspectos diferentes, como pueden ser el diseño de la interfaz1, el diseño del material gráfico
o incluso la experiencia del usuario con el sitio.
Es la principal disciplina a tener en cuenta a la hora de montar una web, ya que de ella depende
el grado de usabilidad de la misma y la mejora de cara al visitante. Si este no recibe una
experiencia agradable, con una interactividad, arquitectura de información, navegabilidad y
usabilidad adecuadas, probablemente se desplace a la competencia o no saque real partido de lo
que brinda la página. (ecdisis.com, 2022)

1 Presentación gráfica de la aplicación, programa o Sitio Web. Es decir, las pantallas que visualiza el usuario.
1.3 ¿Qué es el Diseño Web?

Ilustración 3 Ejemplo de Sitio Web
Elaborado por: (paccari, 2022)
Tarea: Investigar en Internet de acuerdo a su criterio 5 ejemplos de excelentes Sitios Web,
elaborar un documento con capturas de pantalla, la dirección (URL) de cada Sitio Web y una
breve descripción o explicación de porqué usted lo considera un excelente sitio web.

A tomar en cuenta antes de empezar a diseñar:
El Diseño Web nos permitirá desarrollar conocimiento y habilidades para crear sitios web
(Website). Sin embargo, antes de empezar es importante que nos familiaricemos con un par de
términos:
Una vez creado el sitio web, este debe ser almacenado en una computadora (Hosting) que esté
conectada permanentemente al internet y además debemos asignarle un nombre (Dominio) a
nuestro sitio web. Debemos también comprender que el Hosting y el Dominio son servicios de
alquiler que tienen un costo mensual, anual, quinquenal o como se lo contrate. El valor varía de
acuerdo a ciertos factores técnicos.
¿Qué es un Sitio Web o Website?
Un sitio web es un conjunto de archivos electrónicos y páginas web referentes a un tema
en particular, incluyendo una página inicial de bienvenida generalmente denominada
home page, a los cuales se puede acceder a través de un nombre de dominio y dirección
en Internet específicos. El World Wide Web, o simplemente Web como se le llama
comúnmente, está integrado por sitios web y éstos a su vez por páginas web. La gente
suele confundir estos términos, pero un sitio web es en realidad un conjunto de páginas
web. A manera de ejemplo, el ministerio de Turismo de Ecuador cuenta con un sitio web
que se puede visitar a través de la siguiente dirección https://www.turismo.gob.ec/ y
cada tema (vínculo) que se puede consultar dentro de este sitio representa una página
web.
Los sitios web son empleados por las instituciones públicas y privadas, organizaciones
e individuos para comunicarse con el mundo entero. En el caso particular de las
empresas, este mensaje tiene que ver con la oferta de sus bienes y servicios a través de
Internet, y en general para ser eficientes en sus funciones de mercadotecnia.
El sitio web no necesariamente debe localizarse en el sistema de cómputo de su negocio.
Los archivos y documentos que integran el sitio web pueden ubicarse en un equipo en
otra localidad, inclusive en otro país. El único requisito es que el equipo en el que se
almacenen los documentos esté conectado a la red mundial de Internet. Este equipo de
cómputo o Servidor Web, como se le denomina técnicamente, puede contener más de
https://www.turismo.gob.ec/

un sitio Web y atender concurrentemente a los visitantes de cada uno de los diferentes
sitios.
Al igual que los edificios, oficinas y casas, los Sitios Web requieren de una dirección
particular para que los usuarios puedan acceder a la información contenida en ellos.
Estas direcciones, o URLs (por sus siglas en inglés Uniform Resource Locator),
aparecen cotidianamente en todos los medios de comunicación como son prensa escrita,
radio, televisión, revistas, publicaciones técnicas y en el propio Internet a través de los
motores de búsqueda (por su denominación en inglés search engines). Los nombres de
estos sitios Web (dominios) obedecen a un sistema mundial de nomenclatura y están
regidos por el ICANN (Internet Corporation for Assigned Names and Numbers).
Los Sitios Web pueden ser de diversos géneros, destacando los sitios de negocios,
servicio, comercio electrónico en línea, imagen corporativa, entretenimiento, redes
sociales y sitios informativos. (milenium, 2022)

¿Qué es el Hosting?Un hosting es un servicio de alojamiento en línea que te permite publicar un sitio o
aplicación web en Internet. Cuando obtienes un hosting, básicamente alquilas un espacio
en un servidor que almacena todos los archivos y datos de tu sitio web para que funcione
correctamente.
Un servidor es una computadora física que funciona ininterrumpidamente para que tu
sitio web esté disponible todo el tiempo para cualquier persona que quiera verlo. Tu
proveedor de alojamiento es el responsable de mantener el servidor en funcionamiento,
protegerlo de ataques maliciosos y transferir tu contenido (como texto, imágenes, etc)
desde el servidor a los navegadores de tus visitantes.
Cuando decides crear una página web nueva, tienes que encontrar una empresa de
hosting que te proporcione espacio en un servidor. Tu proveedor de hosting almacena
todos tus archivos, medios y bases de datos en el servidor. Cada vez que alguien escribe
tu nombre de dominio en la barra de direcciones de su navegador, tu servidor transfiere
todos los archivos nece sarios para atender la solicitud.
Así que, debes elegir el plan de hosting que mejor se adapte a tus necesidades. De hecho,
el hosting web funciona de manera similar al alquiler de viviendas; tienes que pagar el
alquiler regularmente para poder mantener el servidor funcionando continuamente. (B.,
https://www.hostinger.es, 2022)

Ilustración 4 Hosting
Elaborado por: (Moreno, 2018)

Tarea: Visualizar el video que se encuentra en el siguiente enlace
https://youtu.be/YZWRvLeT_KU consulte varias ofertas de hosting, capture las
pantallas y elabore un documento con toda la información.

¿Qué es el Dominio?

Un nombre de dominio es una
dirección web compuesta por un nombre de sitio web y una extensión de dominio. El
nombre lo eliges tú, siempre que esté formado por letras, números y guiones y que siga
estando disponible, mientras que la extensión del dominio suele ser una combinación
fija de unas pocas letras.
Al igual que una dirección física ayuda a la gente a encontrar un lugar concreto, la
finalidad de un dominio es ayudar a los usuarios a encontrar un sitio web. Sin nombres
de dominio, los usuarios sólo pueden acceder a los sitios web mediante direcciones de
Protocolo de Internet (IP).
Sin embargo, las direcciones IP son difíciles de recordar, ya que consisten en una serie
de números aparentemente aleatorios, lo que hace que no sean fáciles de compartir. Los
nombres de dominio, por el contrario, pueden ayudar a dirigir el tráfico a tu sitio web.
(B., https://www.hostinger.es, 2022)

Tarea: Consultar los tipos de Dominio que existen y elaborar un documento con
ejemplos de direcciones de internet por cada tipo.

https://youtu.be/YZWRvLeT_KU
https://istog.edu.ec/

¿Qué hace un diseñador web?
Si bien es común pensar que un diseñador web es responsable de crear sitios web atractivos y
completamente funcionales, hacen más que eso.
Los diseñadores web tienen en su trabajo tareas rutinarias relacionadas con la creación de un
diseño para medios digitales y la creación de contenido.
Por lo tanto, deben analizar tanto las necesidades del cliente como los objetivos para configurar
un sitio web a fin de brindar a los visitantes la mejor experiencia.
Además, diseñadores web deben saber cómo insertar gráficos, usar lenguajes como HTML y
actualizar el sitio cuando sea necesario. (rockcontent.com, 2022)

Las 7 fases de desarrollo de un sitio web óptimo

Ilustración 5 Fases para el desarrollo de un Sitio Web óptimo
Elaborado por: (grupovisuallab.com, 2022)
Fase 1 – Análisis
En esta fase se debe identificar el propósito del sitio web, los objetivos y el público
al que irá dirigido.

Lo primero, hay que definir sobre qué tratará el sitio web. Hay muchas ideas que
valen la pena considerar, desde una página web personal a sitios de negocios online. Con la
ejecución correcta, éstas tienen el potencial de generar muy buen dinero online.
Comenzamos por decidir el propósito principal y la funcionalidad que se desea tener. Algunos
de los tipos de sitios más populares incluyen:
1.4 ¿Qué hace un diseñador Web?
1.5 Las 7 fases de desarrollo de un sitio web óptimo

1. Sitios web de comercio electrónico. Las tiendas online son uno de los tipos de sitios más
visitados en la actualidad. Con la popularidad del dropshipping creciendo cada vez más
rápido, cualquier persona tiene la oportunidad de iniciar un negocio online en paralelo a
su trabajo principal. Puedes vender tanto productos digitales como físicos a grandes
audiencias de todo el mundo (lo que no sería tan simple con una tienda física).
2. Blogs. Muchos webmasters exitosos comenzaron su viaje con una simple consulta en un
buscador: cómo crear un blog. Con la posibilidad de abarcar una variedad de temas, los
blogs pueden ser tanto un negocio (por ejemplo, afiliados, reseñas, blogs especializados)
o una actividad de ocio (viajes, comida, música, libros).
3. Sitios web educativos. ¿Tienes bastante experiencia en una habilidad particular? ¿Por
qué no crear tus propios cursos digitales o un sitio web de membresía? Si eres un gran
aficionado a un pasatiempo o una habilidad en particular, crear una página web
educativa puede ayudarte a posicionarte como un experto en el nicho.
4. Sitios de noticias. En esta era del caos online, hacer una página web de noticias es más
fácil que nunca. Las personas buscan información todos los días a través de diversas
fuentes. Si te interesa publicar historias innovadoras, crear una web hará que sea mucho
más fácil transmitir tu mensaje.
5. Comunidades online. La gran cantidad de comunidades online exitosas es un mensaje
claro de que lo más importante es comenzar. Dado que la creación de grandes audiencias
lleva mucho tiempo, cuanto antes comiences, mejor.
6. Sitios de portafolio. Puedes crear una página web profesional para mostrar tus
habilidades y fortalezas. Esto puede mejorar enormemente tu presencia y visibilidad en
línea. Además, los portafolios online pueden darte la ventaja en entrevistas de trabajo,
concursos y negocios.
Algunas funciones son bastante comunes en casi todos los sitios:
 presentar una línea de productos y servicios;
 ayudar a las personas a encontrar tu ubicación, es decir, la dirección física de la empresa;
 reforzar la fiabilidad de la marca a través de testimonios de clientes, casos de éxito o
presentaciones del equipo;
 difundir materiales educativos y otras ofertas para generar leads;
 abrir un canal de contacto con la empresa;
 entre otros.
Todas estas funciones pueden estar bien distribuidas en la web, pero te recomendamos
que definas un objetivo principal para evitar que la página de inicio se sobrecargue con
información excesiva.
Tu objetivo tiene mucho que ver con tu estrategia de Marketing Digital: dar a conocer la
empresa, generar leads (potenciales clientes) para el equipo de ventas, entre otros.
Entonces, en esta etapa, tómese el tiempo para pensar en quién es su audiencia, qué contenido
esperan encontrar en su sitio y cómo organizar las páginas para que los usuarios estén
satisfechos y quieran explorar otros contenidos
Público Objetivo: Qué es, cómo definirlo y cuál es su importancia en las estrategias de
Marketing. En el mundo del marketing digital, definir los futuros clientes es una de las tareas
más importantes para alcanzar metas. De hecho, una estrategia de marketing se define según el
nicho de mercado que se quiere capitalizar, por eso en este apartado hablaremos sobre cómo
definir el público objetivo.
Mientras tenga un público objetivo bien definido, mejor podrá conocerlos y, sobre todo, saber
cómo ofrecer justo lo que ellos necesitan.

A continuación, encontraremos una serie de pasos que se debe seguir para empezar a definir el
público objetivo.
1. Investigar a tu audiencia
¿Cómo puedes saber quién quiere comprar el producto o servicio que ofreces? Pues, elprimer
paso que debes dar es profundizar un poco en los datos de quienes ya son tus clientes.
Cuando conozcas qué características los definen, entonces podrás empezar a captar a un nuevo
público que se perfile con las mismas particularidades.
Una forma de recolectar estos datos es a través de los pequeños cuestionarios que nos invitan a
rellenar siempre que creamos un perfil en alguna página web o nos damos de alta en alguna
suscripción.
En este sentido, es aconsejable esquematizar un buen cuestionario para recolectar la cantidad
de datos justos sin que esto represente una molestia para el usuario. Recuerda que es algo que
puede cansar al público que finalmente podría terminar abandonando la compra.
¿Qué datos básicos debes recolectar de tu audiencia?
edad: basta con saber en qué década se encuentran o a qué generación pertenecen;
ubicación: saber al menos en qué país reside tu cliente, te permitirá saber en qué momento
programar anuncios publicitarios para que estos tengan mayor visualización;
idioma: el hecho de que viva en Ecuador, no significa que domine perfectamente el español.
Nunca asumas nada, siempre es mejor contar con los datos que te proporciona directamente el
cliente;
intereses: además de los servicios y productos que ofreces, ¿qué otros intereses tienen tus
clientes? ¿qué le gusta hacer?;
intención de compra: ¿cómo realiza la búsqueda de productos cuando visita tu página web?
¿qué orden de filtros utiliza? ¿por precio? ¿según las características del producto?
2. Analizar las redes sociales
Para complementar la base de datos que te ayudará a definir el público objetivo, también puedes
acudir a las analíticas de las redes sociales. Esto también te permitirá tener una visión más
amplia de los gustos y preferencias de tus potenciales clientes.
Además, podrás llenar esos vacíos de información que muchas veces quedan sin responder en
los cuestionarios de registros de los que hablamos anteriormente.
Esto además te permitirá estudiar cómo interactúan tus clientes en las redes sociales, cuáles
utilizan más y en qué momento.
3. Estudiar a la competencia
Echar un vistazo sobre tu competencia también podría ayudarte a definir mejor tu público
objetivo y también saber si tu competencia persigue los mismos objetivos y mercados que tú.
Podrás entender si ellos llegan a algunos segmentos que antes no considerabas y también qué
estrategias aplican para posicionar sus marcas.
4. Valorar el servicio o producto que ofrecerás
Para definir el público objetivo es importante tener claro cuál es el valor real del servicio o
producto que vas a ofrecer. Como estrategia de Marketing, debes explorar, crear y entregar
valor para satisfacer las necesidades de tu público objetivo.
¡Es importante diseñar anuncios publicitarios donde tu producto sea la solución!
Definir los beneficios de tu producto también te ayudarán a dar con tu público objetivo. A
medida que vayas creando la lista de beneficios, verás de forma más clara a qué tipo de público
deberás dirigirlo. Encuestar a los clientes es una herramienta útil para recopilar información
valiosa.
5. Declarar tu mercado meta
Cuando has dado con todos los datos de tu investigación, tendrás más claro el tipo de público
con el que trabajarás, por lo tanto, podrás diseñar las estrategias de posicionamiento de tu marca.
6. Probar los anuncios publicitarios con el público objetivo

El éxito se alcanza con ensayo y error. Cuando ya tienes definido tu público objetivo, empieza
a probar tus estrategias de marketing y anuncios de publicidad.
Prueba primero creando anuncios para redes sociales que vayan específicamente dirigidos al
perfil del mercado que lograste definir con tu investigación.
Ten en cuenta que, el idioma que utilices transmita el contenido apropiado al público objetivo.
Las imágenes seleccionadas para acompañar tu campaña deben ser lo más adecuadas posible y
sobre todo, que den sentido al contexto que estás creando.
Recuerda elegir los canales adecuados para poner en marcha tu campaña. Según la red social
que elijas, la estrategia cambiará, pero la orientación del mensaje seguirá siendo la misma.
Lo que sigue es mantener un seguimiento de los anuncios publicados y valorar los resultados
para corregir sobre la marcha.
7. Revisar la investigación del público objetivo constantemente
En este punto debes enfocarte en revisar constantemente los resultados que has obtenido desde
que empezaste a definir tu público objetivo.
Ahora ya cuentas con información que no tenías cuando empezaste con este proceso, por ende,
puedes evaluar los cambios que debes hacer, verificar si la definición de tu producto cumple
con las expectativas de tu buyer persona y si deben hacerse mejoras.
Con el tiempo tu mercado objetivo puede llegar a cambiar, por lo tanto, debes asegurarte de
mantener tus objetivos actualizados con la realidad y la evolución de tu marca en el tiempo.

Fase 2 – Planificación
Es importante definir el mapa del sitio, para dimensionar la magnitud y el alcance
del proyecto que se va a realizar, también nos permite crear la estructura y las
tecnologías que debemos utilizar para nuestra página web.

¿Qué es un mapa de sitio?
Un mapa de sitio visualiza la estructura de una aplicación o un sitio web para mostrar la relación
jerárquica entre sus páginas y ofrecer una visión clara de su contenido.
Las plantillas de mapa de sitio pueden ahorrar tiempo a tu equipo – y ayudar a reducir costes –
al acelerar el proceso de planificación y organización de sitios web de gran tamaño.

Ilustración 6 Ejemplo de un mapa de un sitio web
Elaborado por: (moqups, 2022)
Los mapas de sitio contribuyen en gran medida al éxito de un sitio web
Al mapear la estructura de un sitio web de forma eficiente y aclarar la relación entre sus distintos
elementos, los mapas de sitio mejoran la capacidad de los motores de búsqueda para escanear,
rastrear e indexar sus páginas.
Los mapas de sitio son un punto de discusión, planificación, colaboración y referencia esencial
para los Arquitectos de la Información, los Diseñadores de UX, los Estrategas de Contenido,
los Analistas de Negocios, los Desarrolladores y los Equipos de Marketing; también pueden
utilizarse como ayuda a la navegación de cara al público.
Una plantilla de mapa de sitio puede ayudar a tu equipo a identificar problemas estructurales –
y posibles causas de fricción con el usuario – como solapamientos, duplicaciones, callejones sin
salida y niveles de información innecesarios.
Tarea: Te invitamos a explorar en el siguiente enlace:
https://www.lucidchart.com/pages/es/ejemplos/mapa-de-sitio-online elabora un mapa para un
sitio web, captura las pantallas y elabora un documento para presentarlo como tarea.
Fase 3 – Diseño
Durante esta etapa debemos concentrarnos en el diseño visual del sitio, que tenga
una comunicación clara, colores que representen la marca o producto. Es importante
centrarse en la utilización de los principios de la usabilidad (facilidad de uso para el
usuario), UI (interfaz de usuario) y UX (experiencia del usuario), estos permiten
que además del diseño gráfico, el sitio web sea funcional y más efectivo.
https://www.lucidchart.com/pages/es/ejemplos/mapa-de-sitio-online

Fase 4 – Contenidos
En esta etapa debemos concentrarnos en la redacción de textos correctamente,
inclusión de imágenes, videos con optimización para la web y la optimización para
motores de búsqueda (SEO). Los contenidos son la materia prima de nuestro
proyecto, de estos depende en gran parte el éxito porque al fin y al cabo es lo que
nuestros usuarios utilizarán.
Fase 5 – Desarrollo
En este punto se desarrolla el sitio utilizando lenguajes de programación como
HTML, CSS, PHP y bases de datos. También es importante aspectos funcionales
como el diseño adaptativo (responsive size), esto permitirá tener compatibilidad con
dispositivos móviles y llegar a una mayor cantidad de usuarios.
Fase 6 – PruebasSe deben realizar pruebas técnicas para el funcionamiento adecuado de la página
web, se revisa la compatibilidad con los navegadores web y muy importante revisar
si el sitio web cumple con el propósito que se plantea en los objetivos iniciales.

Fase 7 – Lanzamiento
Una vez se publique el sitio web en internet para el público, se debe realizar un
monitoreo constante para evitar fallas técnicas o realizar algún ajuste. También es
necesario el mantenimiento del sitio web no solo en temas técnicos sino en
actualización de contenidos.

Tareas presentes en la guía:
Tarea 1: Elaborar un ensayo de 5 hojas sobre la Web 3.0 /10 p.
Tarea 2: Investigar en Internet de acuerdo a su criterio 5 ejemplos de excelentes Sitios Web,
elaborar un documento con capturas de pantalla, la dirección (URL) de cada Sitio Web y una
breve descripción o explicación de porqué usted lo considera un excelente sitio web.
Tarea 3: Consultar los tipos de Dominio que existen y elaborar un documento con ejemplos de
direcciones de internet por cada tipo.

Otras tareas para asignar en tutorías:

4.- Visualizar el video que se encuentra en el siguiente enlace https://youtu.be/YZWRvLeT_KU
consulte varias ofertas de hosting, capture las pantallas y elabore un documento con toda la
información.

Prácticas de refuerzo

Prácticas presentes en la guía:

1.- Reforcemos: investiga todo lo relacionado a los costos que representa un Hosting y un
Dominio y elabora un documento con los puntos más importantes.

Otras prácticas para asignar en tutorías:

2.- En Relevancia y calidad: Te invitamos a explorar en el siguiente enlace:
https://www.lucidchart.com/pages/es/ejemplos/mapa-de-sitio-online elabora un mapa para un
sitio web, captura las pantallas y elabora un documento para presentarlo como tarea.

Actividades de autoaprendizaje

Actividades presentes en la guía:

1.- Elabore una investigación de la arquitectura de un sitio web y elabore un cuadro de la
información extraída.
Tareas
https://youtu.be/YZWRvLeT_KU
https://www.lucidchart.com/pages/es/ejemplos/mapa-de-sitio-online

V F El Diseño Web es únicamente la creación de páginas web.
V F Una vez creado el sitio Web debemos dar seguimiento para determinar si cumple
con su objetivo.
V F Para crear un sitio Web existen 7 fases o etapas
V F Lo más importante al crear un sitio web es la programación del mismo
V F El Dominio y el Hosting son completamente gratis.
V F Podemos crear sitios Web sin necesidad de dominar la programación
V F Para crear sitios Web podemos utilizar sistemas de gestión de contenidos
V F El primer sitio Web que aprendemos a crear es un Blog

AUTOEVALUACIÓN
(verdadero o falso)

Unidad 2:

Diseño de un Sitio Web

Resultado de aprendizaje:

Contenidos:

2.1 ¿Qué es el Blog?
2.2 ¿Qué es Blogger?
2.3 ¿Cómo cambiamos el Diseño del Blog?
2.4 ¿Cómo añadimos el contenido al Sitio Web?
2.5 ¿Cómo añadimos páginas a nuestro Sitio Web?

¿Blog?
Un Blog puede definirse de forma sencilla como un sitio Web donde el usuario puede hacer
publicaciones diarias, con un orden cronológico de archivos, sobre cualquier tema: Un diario
personal, Un espacio de colaboración, Una fuente de noticias impactantes, Una colección de
 Informarse sobre que es un Blog
 Aprender los conceptos básicos para
elaborar un sitio web Blog.
 Elaborar un sitio web Blog.
2.1 ¿Qué es el Blog?
El alumno será capaz de elaborar un Blog y publicarlo.
Construirá contenido multimedia y lo incluirá en el Blog.

vínculos, etc. Además de tener la posibilidad de insertar un sistema de comentarios para que los
lectores puedan participar. (Vega Rosales, 2022)

Ilustración 7. ¿Qué es un Blog?
Elaborado por: (Hostinger, 2022)
Escribir un blog es uno de los mejores ejercicios intelectuales hoy en día, desde nuestro
particular punto de vista, los blogs representan el pilar de la web 2.0 ya que es uno de los mejores
medios para insertar información a la web y el mejor medio para recuperarla, las redes sociales
son extraordinarios métodos de difusión, pero la cantidad y diversidad de contenido no permite
captar la atención sobre un tema o actividad específica.

El blog tiene esa capacidad, además de ser un medio de practica y aprendizaje muy eficaz. En
lo particular un blog puede ser un inmenso laboratorio en donde puedes experimentar en
diferentes niveles el potencial de la web 2.0, así como de otras herramientas y técnicas que
desees aprender. Un blog es muy versátil y puede ser usado en la educación, en la empresa, el
periodismo, entre otros.

Otra de las grandes ventajas del blog es que nos ayuda a fortalecer nuestras competencias en la
comunicación escrita; además que nos enseña a ser constantes y pacientes, dos valores que hoy
en día son necesarios para tener éxito en nuestras actividades. En fin, un blog es una gran
herramienta que podemos aplicar para conseguir nuestros objetivos.

¿Blogger?
Blogger es un servicio creado por Pyra Labs y posteriormente adquirida por Google para crear
y publicar una bitácora (blog) en línea. El usuario no tiene que escribir ningún código o instalar
programas de servidor o de scripting. Blogger acepta para el alojamiento de las bitácoras su
propio servidor (Blogspot).

Los blogs alojados en Blogger generalmente están alojados en los servidores de Google dentro
del dominio blogspot.com. Hasta el 30 de abril de 2010, Blogger permitió publicar bitácoras a
través de FTP.

Crear un blog
Con Blogger puedes crear y gestionar tu propio blog.
2.2 ¿Qué es Blogger?

Crear un blog
1. Inicia sesión en Blogger o iniciar sesión en Google, luego clic en el botón Aplicaciones de Google
y de allí, clic en Blogger
2. Puede ser que sea tu primera vez en esta aplicación y entonces te aparecerá una batalla con un
botón principal Crear Nuevo Blog; pero si no fuera el caso, en la parte superior izquierda de la
pantalla, debes hacer clic en la flecha hacia abajo .
3. Luego, haz clic en Nuevo blog.
4. Escribe el nombre que quieras ponerle a tu blog (no hay restricciones)
5. A continuación, damos clic en Siguiente.
6. Elige una dirección o URL para tu blog (nombre corto seguido y en minúsculas, fíjate que no te
aparezca un mensaje en letras rojas que te indique que es nombre ya está ocupado. En ese caso te
sugerimos añadir al nombre las siglas de vuestro nombre).
7. Finalmente, haz clic en Guardar.
Gestionar el blog
 Puedes establecer quién tiene permiso para editar y leer tu blog. Consulta cómo controlar el acceso
a tu blog.
 Puedes elegir el aspecto que quieres que tenga tu blog.
Navegadores que puedes utilizar
 Chrome
 Firefox
 Safari
 MS Edge

Ilustración 8. Pantalla de Edición de Blogger
Elaborado por: Víctor Lobato

¿Cómo cambiamos el Diseño del Blog?
Puede cambiar el diseño y el esquema de colores de tu blog.

Cambiar el blog con gadgets
Utiliza gadgets para mostrar el archivo, insertar las etiquetas en una lista o incluir tu perfil en
todas las páginas.
Añadir un gadget al blog:
1. En el menú de la izquierda, haz clic en Diseño.
2. En el área en que quieras modificar, haz clic en Añadir un gadget.
3. En la ventana que se abre, elige el gadget y haz clic en Añadir .
4. Abajo a la izquierda, haz clic en Guardar.
 Para cambiar la configuración de un gadget, haz clic en Editar.
Diseñador de Temas

Existen preestablecidos
diferentes temas (plantillas)
de entre las cuales podemos
seleccionar la que más nos
convenga en incluso luego se
puede cambiar la combinación
de colores.

2.3 ¿Cómo cambiamos el diseño del Blog?

1. En el menú de la izquierda, haz clic en Tema.
2. Selecciona el tema y, en la parte inferior, haz clic en Aplicar.
 Para guardar una copia del tema, haz clic enMás Copia de
seguridad Descargar arriba a la derecha.
Utilizar un tema de Vistas dinámicas
Cuando usas un tema de Vistas dinámicas:
 Blogger contabiliza cada entrada que se muestra como una vista de una página.
 Tus lectores pueden cambiar su vista predeterminada.
Para usar Vistas dinámicas, tienes que compartir contenidos en otros sitios web.
Cambiar ajustes como el fondo y el ancho de las columnas

1. En el menú de la izquierda, haz clic en Tema.
2. En “Mi tema”, haz clic en Personalizar.
 Para personalizar la imagen de fondo u otros ajustes, utiliza el menú de la
izquierda.
3. Abajo a la derecha, haz clic en Guardar .
Cambiar el tamaño, el color y el tipo de letra

Puedes cambiar el tamaño, color y tipo de fuente en todo el blog.
1. En el menú de la izquierda, haz clic en la Opción avanzado.
2. Elige el formato del texto.
 Puedes aplicar distintos tipos de letra, colores y tamaños a los textos de
tu entrada.
3. Abajo a la derecha, haz clic en Guardar .

¿Cómo seleccionamos el contenido para el Blog?
Lo primero que debemos realizar es crear una carpeta denominada contenido y dentro de esta
organizar carpetas con: Imágenes, Fotografías, Logos, Texto, Video, Sonido, Enlaces para otros
sitios y en general todo el material multimedia que deseamos añadir a nuestro sitio Web. Ahora
es importante considerar los siguientes aspectos: Funcionalidades, Integración y Limitación.

Funcionalidades
 Editor de entradas, que pueden ser programadas.
 Diseñador de plantillas, que permite personalizar el aspecto del blog sin tener
conocimientos de HTML o CSS.
 Publicación en dominios personalizados, cambiando la dirección de publicación por
defecto en blogspot.com a cualquier dominio de internet.
 Adición de imágenes y vídeos a través del editor de entradas.
 Acceso público o restringido al blog.
 Archivo anual, mensual, semanal o diario de entradas del blog.
 Vistas dinámicas, que permiten visualizar el contenido de un blog a través de una
interfaz que aprovecha las bondades de jQuery, HTML5 y CSS3.
 Plantillas para dispositivos móviles.
 Comentarios opcionales en entradas y páginas del blog, con respuestas de segundo nivel.
 Páginas asíncronas con contenido estático.
 Publicación a través de telefonía móvil mediante el servicio de mensajes cortos, sistema
de mensajería multimedia y aplicaciones oficiales para dispositivos con sistemas
operativos iOS o Android.
 Publicación a través de correo electrónico.
 Sindicación RSS de entradas del blog, entradas por etiquetas, comentarios del blog,
comentarios por entradas, páginas estáticas y comentarios por páginas.
 Lightbox, un visualizador nativo de fotografías para las publicaciones del blog.
 Metatags de descripción y rastreo de robots para el blog y cada una de las entradas.
 Página de error 404 personalizada.
 Redireccionamientos de URL 301 y 302 personalizados.
 Archivo robots.txt personalizado.
 Integración con aplicaciones de terceros, así como una API de datos para desarrollar
aplicaciones propias.

Integración
 La barra de Google tiene una funcionalidad llamada "Blog This!" que permite a los
usuarios de Blogger publicar entradas directamente hacia sus blogs.
 Se pueden publicar entradas desde Microsoft Word 2007, que provee una aplicación
nativa de publicación en bitácoras en múltiples plataformas, entre ellas, Blogger.
 Se puede integrar con Google AdSense y con Amazon Associates para monetizar el
blog y generar ingresos.
 Se puede integrar con Google Analytics para realizar mediciones de analítica web.
 Permite la administración de blogs entre múltiples autores, permitiendo crear blogs
grupales o colaborativos.
 Google Docs y Álbumes Web de Picasa permiten publicar contenido directamente hacia
Blogger.
2.4 ¿Cómo añadimos el contenido al sitio Web?

 Windows Live Writer, una aplicación independiente para Windows Live suite, permite
publicar directamente hacia Blogger.
 Se puede integrar con Google+ para unificar perfiles de usuario, compartir contenido
directamente a perfiles o páginas de Google+ y contabilizar +1 que se han realizado en
entradas del blog.
 Se puede utilizar para la elaboración de un portafolio digital, o bien parte de él
integrando el blog dentro de otras plataformas.
 Se puede importar con los formatos xslt, xbl, xsl, xml, text y txt.

Limitaciones
 Número de publicaciones por blog: Ilimitado.
 Tamaño de publicaciones individuales: Sin límite.
 Tamaño de páginas: Las páginas individuales, como la página principal o las páginas de
archivos, en las que se suelen mostrar varias entradas del blog, tienen un límite de
1 Mb en tamaño.
 Número de comentarios: Las entradas individuales y las páginas estáticas no tienen
límite de comentarios. Sin embargo, y aunque no se liste en los artículos de ayuda oficial,
existe una limitación de 5000 comentarios por entrada, aunque existen algunas
publicaciones visibles con un mayor número de comentarios.
 Número de imágenes: Hasta 1 Gb de almacenamiento compartido con el servicio
de Google Fotos.
 Tamaño de las imágenes: Si se publica a través de Blogger Móvil las imágenes pueden
tener un tamaño máximo de 250 Kb. Por otros medios de publicación no hay límite en
tamaño.
 Miembros del equipo: Un blog puede tener hasta 100 miembros con roles de
administradores o autores.
 Número de etiquetas: Hasta 2000 etiquetas únicas por blog y 20 etiquetas o 200
caracteres por entrada de blog.
 Descripción del blog: Limitada a 500 caracteres, sin código HTML.

Según lo anteriormente expuesto podemos determinar el contenido, su dimensión, la
actualización y su manejo en general.

El mapa del Sitio Web
Es momento de elaborar el mapa del sitio Web

Recuerden en la unidad anterior ya se habló de este tema e incluso realizaron una tarea al
respeto, utilizando una herramienta online o también el PowerPoint.

El contenedor
Llego el momento de decidir dónde vamos a almacenar el contenido del Sitio Web, si
directamente en el servidor Blogspot de Blogger, considerando las limitaciones o como
estrategia para optimizar el recurso de almacenamiento usamos plataformas externas y
enlazamos a nuestro sitio Web los objetos. Por ejemplo, si elaboro un video y los quiero cargar
en mi Blog, tengo un límite de almacenamiento; pero con la misma cuenta de Google puedo
subirlos al YouTube y luego enlazarlos en mi blog. Basados en este último ejemplo vamos a
realizar los dos procesos:

Cargando un video Directamente de mi celular al Blog.
1. Grabamos y editamos un video con mi celular y las herramientas
nativas del equipo.
2. Lo descargamos a nuestro computador. (podemos usar el cable
USB, podemos subirlo directamente a YouTube desde nuestro
equipo o grabarlo en el Google Drive.
3. Ingresamos al navegador y a nuestra cuenta de Google.
4. En el botón de Aplicaciones de Google, seleccionamos YouTube.
5. En la parte Superior derecha de YouTube Damos clic en el botón
Crear,
6. Seleccionamos el Archivo a subir o lo arrastramos hasta la ventana.
7. Ingresamos los datos que nos va solicitando la plataforma. (Recuerden los derechos de
Autor).

8. No se olviden de la Restricción de edad

9. Ahora para ingresar este video en nuestro blog. Primero debemos comprender que hay
2 maneras de hacerlo. Directamente desde el Blog a través del botón Insertar Video

10. Seleccionamos el botón YouTube y damos clic en el botón Añadir un vídeo, Subidas

11. Allí aparecen todos los videos que subimos a nuestra cuenta de YouTube

12. Damos clic en el Vídeo que insertaremos y damos clic en el botón seleccionar.

Podemos Subir el vídeo directamente desde nuestro equipo:
1. Damos clic en Insertar Vídeo
2. Luego seleccionamos la opción
3. A continuación o lo arrastramos hasta la ventana
4. Recuerden tenemos limitaciones y la carga puede ser un proceso muy