Primera Sesión
Diseño Web
Bienvenida Presentación del Presentación Explicación del Explicación del
docente y expectativas de los sílabo sistema de evaluación
estudiantes
Bienvenida
Presentación del docente
• Delia Esperanza Montes Neyra
• Analista y programadora de sistemas con 16 años dedicada a la
docencia así como a la consultoría, Certificada por la Microsoft
o Expectativas: Lograr que el alumno domine las herramientas
tecnológicas para el correcto Diseño e implementación de un sitio
Web.
Presentación y expectativas de los
estudiantes
• Conozcámonos más…
Explicación del sílabo
• Datos generales
• Sumilla
• Capacidad de aprendizaje
• Logros esperados
• Contenidos
Explicación del sistema de evaluación
• Calificación
• Instrumentos
• Retroalimentación
• Asistencias e inasistencias
Sistema de evaluación
Calificación
Sistema de evaluación
Instrumentos
Parcial Final
Elaboración y presentación de su proyecto Web. Presentación del proyecto final
Sistema de evaluación
Retroalimentación
• Tendrás 2 evaluaciones calificadas
• Cada evaluación tendrá una oportunidad de práctica o entrega preliminar
• Cada práctica o entrega preliminar deben cargarla en EVA
• No se admitirán entregas extemporáneas
• Tus resultados detallados con retroalimentación a cada práctica o entrega preliminar estarán en EVA
• Habrá una sesión de retroalimentación por cada evaluación
Aprovecha las oportunidades previas a cada
evaluación calificada, para mejorar tu desempeño y
alcanzar mejores aprendizajes y calificaciones.
Sistema de evaluación
Cronograma de 18 semanas
Sistema de evaluación
Asistencias
Recuerda que, para aprobar la unidad didáctica, debes asistir
al menos al 70% de las clases sincrónicas (sean virtuales o
presenciales). Es decir, si acumulas 30% o más de
inasistencia sin justificadas, desaprobarás la unidad didáctica
por inasistencia con la calificación mínima.
Bienvenida
14
Presentación del docente
• Delia Esperanza Montes Neyra
• Analista y programadora de sistemas con 16 años dedicada a la
docencia, así como a la consultoría, Certificada por la Microsoft
o Expectativas: Lograr que el alumno domine las herramientas
tecnológicas para el correcto Diseño e implementación de un
sitio Web.
Presentación del docente
15
Presentación del curso
• Sílabo: línea funcional, objetivo de la unidad,
temas y logros de aprendizaje
• Sistema de evaluación: tipos de evaluaciones,
porcentajes, momentos (días de evaluación)
Presentación del curso
16
Evaluación Diagnóstica
• Permite conocer el conocimiento previo con el que los
estudiantes llegan a la unidad.
• Criterios de evaluación.
• Cuestionario
• Fecha de Evaluación Diagnóstica
Evaluación Diagnóstica
17
SESIÓN 1
Fundamentos de un proyecto web
• Generalidades
• Internet
• Servidores web
• Hosting y dominios
• Navegadores
• Etapas de un proyecto web
• Mapa de sitio
• Wireframes
LOGRO 1:
Elaborar un mapa de sitios web
INTRODUCCIÓN
INTRODUCCIÓN
Tener un sitio web es más que sólo tener
contenidos, links y una apariencia atractiva
para los usuarios. Detrás de cada
tipografía, cada color, cada imagen y
elemento que conforma el diseño de la
página web hay toda una planeación
creada por expertos con el objetivo de
enganchar al público meta y asegurarse
que, aunque sea muy breve, la experiencia
de los usuarios en el sitio web sea bastante
buena, al menos lo suficiente para alcanzar
los objetivos.
INTRODUCCIÓN
Términos:
UI: Interfaz del usuario
UX: Experiencia del usuario
FRONTEND Enfocado al sitio web que interactúa con
los usuarios, Los desarrolladores
frontend crean los componentes visuales
de un sitio web. a menudo utilizan
herramientas HTML, CSS y JavaScript o
frameworks como Bootstrap o Tailwind,
que les permiten crear sus interfaces web
de forma rápida y sencilla.
INTRODUCCIÓN
BACKEND Accede al servidor, que es una
aplicación especializada que
entiende la forma en la que el
navegador hace solicitudes. Los
desarrolladores backend se
encargan de hacer que la lógica
del sitio funcione
correctamente. Java, C ++,
Ruby on Rails, PHP o Python
INTRODUCCIÓN
INTERNET
Internet se le define
como una red mundial
de computadoras, se
encuentran
interconectadas a través
de satélites, líneas
telefónicas, fibra óptica,
etc., utilizan un
protocolo (TCP/IP), que
permite a millones de
usuarios estar
conectados.
Internet
GENERALIDADES
PROTOCOLO DE INTERNET
Es un conjunto de reglas formales, permite transmitir los datos entre
dos o más computadoras conectado a una red.
El protocolo más utilizado es el:
TCP/IP (Protocolo de Control de
Transmisión / Protocolo de Internet)
Este protocolo especifica cómo las
computadoras encaminan la
información desde la computadora
emisor hasta la computadora
receptor.
PROTOCOLO DE INTERNET
Entre los más utilizados:
IPv6 será la próxima generación de
protocolos de Internet, ampliará
la capacidad de conexión debido
al crecimiento de dispositivos y
el aumento de equipos
portátiles.
FTP es un protocolo de transferencia
de archivos de un ordenador a
otro, de un servidor remoto a
uno local y viceversa.
PROTOCOLO DE INTERNET
Entre los más utilizados:
HTTP protocolo de transferencia de
Hipertextos, protocolo más
utilizado por los servidores de la
WWW (World Wide Web),
permite intercambiar (enlaces)
de las páginas web.
SMTP protocolo de transmisión de
correo , permite recibir correos
electrónicos y junto con el se
encuentra el protocolo POP.
PROTOCOLO DE INTERNET
Entre los más utilizados:
POP (protocolo de oficinas de correo)
es usado por los ordenadores
personales para administrar el
correo electrónico.
TELNET es un protocolo que permite la
conexión remota a otro
ordenador.
SITIOS WEB
SITIOS WEB
Se le conoce como Site, un sitio web es
un conjunto de páginas web,
relacionadas a un dominio de Internet ,
tiene una página de inicio (Home) que
es el primer documento que ve el
usuario cuando ingresa en el sitio web
escribiendo su dirección URL en el
navegador.
SITIOS WEB
La persona encargada de
administrar un sitio web es el
WebMaster. Esta persona es la
responsable de todo el sitio web:
decide las tecnologías que se van
a utilizar, los servidores, la
estructura de las páginas.
SITIOS WEB
Los sitios web se pueden clasificar en dos tipos:
Sitios Estáticos: El visitante y el administrador Web no pueden
interactuar con la página para modificar su
contenido. No acceden a una base de datos
para obtener el contenido ni se requiere
programación.
Sitios Dinámicos: Son aquellos que puede interactuar con el
visitante y/o administrador Web, pudiéndose
modificar el contenido de la página. Estos
sitios acceden a una base de datos y
requieren de programación Web:
Java, ASP, [Link], PHP, etc. el cual se
denomina BACK END.
HOSTING & DOMINIOS
HOSTING
Es el servicio que provee a los
usuarios de Internet en
almacenar información,
imágenes, vídeo, o cualquier
contenido accesible vía web,
conocido como alojamiento de
páginas web.
DOMINIO
Es un nombre de un sitio web ,
cada dominio tiene que ser
único en Internet, por ejemplo
“[Link]” es el
nombre del dominio de la
página web banco Interbank.
NAVEGADORES
NAVEGADORES
Conocido como Web browser, es un programa que
permite visualizar la información que contiene una
página web la cual puede estar alojada en un servidor
dentro de la red Mundial, o en un local.
El navegador interpreta el código, HTML (Lenguaje de
Marcador de Hipertexto),el que está escrita en la
página web y lo presenta en pantalla son esenciales
para el acceso y circulación por Internet.
NAVEGADORES
Tipos de navegadores:
✓ Google Chrome
✓ Mozilla Firefox
✓ Opera, safari
✓ Microsoft Edge, etc.
ETAPAS DE UN PROYECTO WEB
ETAPAS DE UN PROYECTO WEB
ETAPAS DE UN PROYECTO WEB
ETAPAS DE UN PROYECTO WEB
ETAPAS DE UN PROYECTO WEB
ETAPAS DE UN PROYECTO WEB
ETAPAS DE UN PROYECTO WEB
ETAPAS DE UN PROYECTO WEB
ETAPAS DE UN PROYECTO WEB
Crear un mapa del sitio
Para ello podemos acceder a cualquier
generador de sitemap:
o GitMind
o Miro
o Creately
o Milanote
o GlooMaps
o Moqups
o Flowmapp
o Dyno Mapper
o Writemaps
o Slickplan
ETAPAS DE UN PROYECTO WEB
Crear un mapa del sitio
Haga clic: [Link]
Por defecto nos muestra una plantilla general de sitemap(mapa de sitio)
ETAPAS DE UN PROYECTO WEB
Crear un mapa del sitio
Si hacemos doble clic sobre el nombre de cada uno de los recuadros podemos editarlos
ETAPAS DE UN PROYECTO WEB
Crear un mapa del sitio
La página inicial será el Home, y jerárquicamente en un nivel inferior registraremos los
nombres de las páginas de Inicio, Productos y Servicios
ETAPAS DE UN PROYECTO WEB
Crear un mapa del sitio
Si deseamos eliminar alguno de los cuadros del diagrama, sencillamente lo seleccionamos
y hacemos clic en el signo menos que se muestra en la parte superior izquierda
ETAPAS DE UN PROYECTO WEB
Crear un mapa del sitio
Ahora vamos a agregar un elemento que representará a otra página al mismo nivel que
Productos, Servicios e Inicio, situamos el puntero del mouse sobre Servicios y mostrará
dos botones para agregar elementos al mismo nivel o a un nivel inferior
ETAPAS DE UN PROYECTO WEB
Crear un mapa del sitio
Agregaremos un nuevo elemento y registramos el nombre Contáctenos
ETAPAS DE UN PROYECTO WEB
Crear un mapa del sitio
A continuación, dentro de productos agregaremos dos elementos a un nivel inferior
ETAPAS DE UN PROYECTO WEB
Crear un mapa del sitio
Finalmente podremos exportar nuestro sitemap (sitio de mapa) a pdf o formato de
imagen , haciendo clic en el icono que se encuentra en la parte superior derecha
ETAPAS DE UN PROYECTO WEB
Crear un mapa del sitio
Finalmente podremos exportar nuestro sitemap (sitio de mapa) a pdf o formato de
imagen , haciendo clic en el icono que se encuentra en la parte superior derecha
ETAPAS DE UN PROYECTO WEB
Crear un mapa del sitio
Contamos con distintos formatos para exportar el mapa del sitio
ETAPAS DE UN PROYECTO WEB
Crear un mapa del sitio
Contamos con distintos formatos para exportar el mapa del sitio
ETAPAS DE UN PROYECTO WEB
Crear un mapa del sitio
Contamos con distintos formatos para exportar el mapa del sitio
ETAPAS DE UN PROYECTO WEB
Crear un mapa del sitio
Listo
WIREFRAME
ETAPAS DE UN PROYECTO WEB
Diseñar un WireFrame
Wireframe:
Es un boceto básico de baja
calidad del desarrollo de una
página web o el diseño de una
interfaz, tiene como objetivo
proporcionar la visualización del
diseño o las funcionalidades de un
sitio web(site) diseño real. A ellos
debe sumarse, simular el
funcionamiento.
ETAPAS DE UN PROYECTO WEB
Diseñar un WireFrame
Existe una variedad de software que nos permite crear estos tipos de wireframes:
Nombre Ubicación
o Mockingbird: [Link]
o Balsamig: [Link]
o Lovely Charts: [Link]
o Mockflow : [Link]
o Gliffy: [Link]
GRACIAS
