El documento resume los fundamentos para el diseño de sitios web. Explica conceptos clave como diseño web mobile first, diseño web responsivo, y las diferencias entre desarrollo front-end y back-end. También cubre temas como las herramientas de diseño web, prototipado, sistemas de control de versiones y más. El documento concluye explicando la importancia de comprender estos fundamentos para el desarrollo exitoso de sitios web.

1. www.usat.edu.pe
www.usat.edu.pe
Unidad III
Unidad II
Unidad I
Fundamentos para el Diseño de Sitios Web.
DISEÑO WEB
Ing. Ernesto Nicho Córdova
ncordova@usat.edu.pe
SESIÓN
06

2. www.usat.edu.pe
• Prender cámara Web (Todas
las clases al inicio)
Presentación inicial
• Marcar asistencia

3. www.usat.edu.pe
Objetivo de la sesión:
● Revisa los fundamentos necesarios para la realización de sitios web.
Propósito de la sesión
Competencia del perfil de egreso : La asignatura DISEÑO WEB, que corresponde al área de
estudios de Especialidad, contribuye al logro del perfil de egreso, específicamente a la(s)
competencia(s):
- CE3: DESARROLLO DE SOFTWARE
- CG4: COMUNICACIÓN ORAL Y ESCRITA
Resultado de Aprendizaje de la Unidad 01:
R1: Realiza diseños web con herramientas de diseño gráfico y maquetado web básico.
Contribuye al logro
Contribuye al logro
3

4. www.usat.edu.pe
• El diseño de una pagina web es el proceso de programación o
codificación de un sitio que tiene como propósito fundamental,
garantizar un rendimiento exitoso.
• En este caso se puede tener desde un diseño muy simple como el
diseño de una pagina web estática, con texto sin formato, hasta
aplicaciones de Internet con mayor complejidad basadas en la
plataforma web, negocios online, redes sociales u otros servicios.
4
Fundamentos de diseño Web

5. www.usat.edu.pe
• Cada desarrollador de un sitio
web comienza con el código HTML, que
es el formato básico para el lenguaje de
programación utilizado para la creación
de paginas web.
• Se escribe en forma de elementos que
consisten en etiquetas encerrados en
paréntesis angulares en donde se tiene
el contenido de la pagina web.
5
Fundamentos de diseño Web (2)

6. www.usat.edu.pe
Antes de diseñar un sitio web, es importante considerar algunas
interrogantes:
6
Diseño de un sitio web

7. www.usat.edu.pe
Sitio Web
Alojamiento
Contratación del
hosting o
implementar un
servidor web
Registro de
dominio
Herramientas
de desarrollo
Front - End
HTML
CSS
JavaScript
Back - End
Lenguajes de programación (PHP, Java, etc.)
Base de datos (MySQL, MongoDB, etc.)
¿Cuáles son los requerimientos?
7

8. www.usat.edu.pe
Quienes son los diseñadores
8

9. www.usat.edu.pe
Ir al enlace y leer:
• https://www.slideshare.net/accantu/ux-una-disciplina-para-
curiosos-inconformes-y-locos?
• https://trazos.net/diseno-grafico-web-ui/
• Ir al foro [Actividad formativa 05: Foro] - Diseño UX – UI y
responder a las preguntas propuestas.
9
Actividad 01: Responder en el foro

10. www.usat.edu.pe
Web mobile first Web responsive Web Mobile
10
Filosofías de diseño

11. www.usat.edu.pe
• De forma general, el diseño Web Mobile First es una nueva
filosofía que ha surgido para darle respuesta al aumento de las
búsquedas a través de los dispositivos móviles; es decir, para que
los usuarios puedan tener una grata experiencia al momento de
visitar una Web desde un móvil.
11
¿Qué es el diseño Web Mobile First?

12. www.usat.edu.pe
• El diseño Web responsivo ya tiene algún tiempo codeándose en el
mercado, y no es más que diseñar una página para que sea
multidispositivo; es decir, para que ésta se adapte a cualquier tipo
de dispositivo.
• Sin embargo, este tipo de diseño limita algunas operaciones del
usuario a la hora de navegar y hace que tanto la información de la
Web como su estructura tenga que ser flexible y simple.
12
Diseño Web Responsivo (Responsive Web Design)

13. www.usat.edu.pe
• El diseño Web responsive piensa primero en el usuario desde el
ordenador de sobremesa mientras que, el diseño Web Mobile
First, tienen en cuenta primero al usuario que accede desde un
dispositivo móvil.
• Mobile First hace todo lo contrario, primero piensa en el usuario
que accede desde dispositivos móviles, que actualmente es el
60% de las búsquedas realizadas en Internet. Este método de
diseño Web resulta más eficiente para poder integrar las
búsquedas móviles y las búsquedas tradicionales.
13
Diferencias entre el diseño Web Mobile First y
diseño Web responsive

14. www.usat.edu.pe
• Mobile First representa el presente y también el futuro. A día de
hoy las búsquedas desde dispositivos móviles son mayores que
las de hace un año atrás, pero las estadísticas muestran que este
tipo de búsquedas se triplicarán para el próximo año, por lo que
vale la pena apostar por una Web Mobile First ahora mismo.
• Los grandes esfuerzos de Google y otros buscadores por estar a
la vanguardia, de lo que el usuario quiere, impulsan a que los
sitios Web también se preocupen por mejorar la experiencia del
usuario y hacerles la vida más fácil.
14
¿Por qué «Mobile First» es tan importante a la
hora de diseñar una Web?

15. www.usat.edu.pe
• front-end es la parte del desarrollo web que se dedica de la
parte frontal de un sitio web, en pocas palabras del diseño de
un sitio web, desde la estructura del sitio hasta los estilos como
colores,
• Un front-end entonces es la persona que se dedica
básicamente al «diseño web», pero esto no signifique que no
toque código, se trabaja con lenguajes mayormente del lado del
cliente, como HTML y CSS para darle estructura y estilo al sitio, y
Javascript para complementar los anteriores y darle dinamismo a
los sitios web.
15
Desarrollo front - end

16. www.usat.edu.pe
• Back-End, el lado opuesto. es el área que se dedica a la parte
lógica de un sitio web, es el encargado de que todo funcione
como debería, el back-end es la parte de atrás que de alguna
manera no es visible para el usuario ya que no se trata de diseño,
o elementos gráficos.
• El Back-end trabaja todo el tiempo con lenguajes de
programacion, lenguajes que requieren de una lógica ya que
esta área es también la encargada de optimizar recursos, de la
seguridad de un sitio y demás. Cosas que el usuario no ve de
primeras pero que existe código detrás que esta haciendo su
trabajo.
16
Desarrollo back - end

17. www.usat.edu.pe
• Formar grupos de trabajo (grupos
actuales):
–Cada grupo tendrá asignado un tema elegido por el
docente
–Realizar un resumen del tema (en una diapositiva)
–Busque mas información relacionada con el tema
asignado
–Realizar una exposición (15 min) con el tema
asignado.
17
Trabajo Grupal

18. www.usat.edu.pe
• Grupo 01: (Las claves de una página web efectiva)
• Grupo 02: (Herramientas para trabajar Diseño
Web)
• Grupo 03: (Herramientas de prototipado)
• Grupo 04: (Sistema de control de versiones - Git)
• Grupo 05: Marcos de desarrollo para diseño Web
• Grupo 06: Alojamiento y dominios para sitio web
18
Asignación de temas

19. www.usat.edu.pe
• El fundamento web nos ayuda a comprender los
elementos necesarios para el diseño de sitios
web
• Tanto UX como UI son necesarios para una
buena experiencia en el desarrollo de sitios web
• Las filosofías de diseño nos enfocan en la forma
como debemos desarrollar e implementar
nuestros sitios web.
• El Desarrollo Back y Front end maneja sus
propias herramientas y metodologías y ambos a
su manera tocan código para su respectivo
trabajo.
19
Conclusiones

20. www.usat.edu.pe
• Exposición de temas asignados
20
Próxima sesión

21. www.usat.edu.pe
[1] Javier, «Mobile First; ¿Qué es y cómo el diseño Web móvil afecta al SEO?,»
2019. [En línea]. Disponible: https://www.xplora.eu/mobile-first/. [Último acceso: 10
abril 2020].
[2] C. Falcon, «Explicando que es Front-End, que es Back-End y sus caracteristicas,»
14 setiembre 2014. [En línea]. Disponible : http://www.falconmasters.com/web-
design/que-es-front-end-y-que-es-back-end/. [Último acceso: 10 abril 2020].
[3] R. Marquina, «Fundamentos Diseño Web,» 26 setiembre 2007. [En línea].
Disponible: https://es.slideshare.net/raymarq/fundamentos-diseo-web. [Último
acceso: 10 abril 2020].
Referencias
21

22. www.usat.edu.pe
http://www.facebook.com/usat.peru
https://plus.google.com/+usateduperu
https://twitter.com/usatenlinea
https://www.youtube.com/user/tvusat
Ing. Ernesto Nicho Córdova
ncordova@usat.edu.pe