Taller de Proyectos Digitales

Home Product Gallery Contact
TALLER DE PROYECTOS
DIGITALES
2021
UNIVERSIDAD
DE LIMA
FACULTAD DE
COMUNICACIÓN
TALLER DE PROYECTOS
DIGITALES
Docente:
Shirley Carreño Rojas
scarreno@ulima.edu.pe
Jefe de Practica:
Eymi Basto Morales
ebasto@ulima.edu.pe
ShirleyCarreño
EymiBasto

Hola
Shirley Carreño Rojas
Profesional en Diseño , Ingeniería, Animación,
Web, Móviles e Innovación con un MBA y una
maestría en Educación E-Learning.
Consultora y capacitadora en herramientas
gráficas, plataformas virtuales, Diseño y
Desarrollo Web, Aplicaciones Móviles, UX,UI y
Metodologías ágiles de Innovación.
FACULTAD DE
COMUNICACIÓN
UNIVERSIDAD
DE LIMA

Horario de clases - 650
Miercoles
L3-503
7:00am-10am
Lunes
L3-503
7:00am - 9:00am
Jueves (Asesoria)
D1-3er nivel
4:00pm a 5:00pm

Consideraciones:
● El estudiante debe encontrarse físicamente en el aula para
que se le considere presente, salvo algún caso específico
que les haya informado la Facultad.
● El estudiante que supere el número de faltas permitido será
calificado con 00 en toda la EC2, así haya rendido
evaluaciones en las que haya obtenido calificación
aprobatoria.
● En caso de descubrirse algún tipo de plagio, se debe
informar de inmediato a la Facultad. Si el comité de
disciplina confirma el plagio, el alumno obtendrá de manera
inmediata la calificación de 00 en toda la asignatura.

Evaluación:
Evaluacion continua 1
50%
Semana Peso Tipo Evaluación Caracter Descripción
5 50
Informe
(Etapas de
planificación y AI)
Individual - 60%
Grupal - 40%
El informe desarrolla el brief del proyecto y el
diseño de contenidos para crear un índice del sitio
web (jerarquización y rotulado/etiquetado). La
investigación es con el P.O. para lograr un mapa de
sitio orientado al usuario.
7 50 Examen escrito Individual - 100%
Se desarrolla el análisis de un sitio web donde se
realizan juicios fundamentados en base a la teoría
brindada en clase.

Evaluación:
Evaluación continua 2
50%
Semana Peso Tipo Evaluación Caracter Descripción
11 30
Trabajo de
Investigación
(Validación del
proyecto digital)
Individual - 70%
Grupal - 30%
Se desarrolla la estructura de contenido a través de
wireframes, los cuales son validados tomando en cuenta las
variables ISO 9241-11 de eficacia y eficiencia.
13 10
Informe
(Etapas de diseño
visual y
preproducción)
Grupal - 100%
El informe propone el diseño visual y desarrolla la
preproducción.
16 60 Proyecto Final
Individual - 70%
Grupal - 30%
Entrega del proyecto implementado con las correcciones de la
investigación (evaluación heurística y test de usuario variable
satisfacción ISO 9241-11), respetando los derechos de autor y
del usuario.

Sumilla
El taller propone que el estudiante investigue, diseñe y ejecute
proyectos digitales centrados en el usuario. La asignatura se
enfoca en la gestión del proyecto: planificar, estructurar, diseñar,
implementar y evaluar productos digitales con fines
institucionales, empresariales o sociales.

TALLER DE PROYECTOS
DIGITALES
Semana 1
UNIVERSIDAD
DE LIMA
FACULTAD DE
COMUNICACIÓN

UNIVERSIDAD
DE LIMA
FACULTAD DE
COMUNICACIÓN
Identificar el proceso de
desarrollo web

VIDEOS:
Revisar los siguientes videos y analizarlo con la clase.

• Decisiones tomadas con falta de criterio especializado suelen condenar a morir el
desarrollo de nuestro sitio Web sin apenas haberlo comenzado, a menos que la suerte o
casualidad se cruce en nuestro camino.
Proceso de desarrollo web

Discusión
• Para comenzar el proyecto lo primero
que se hará es tener una pequeña
charla con el cliente.
• En la primera reunión se necesita
establecer el alcance básico del
trabajo, establecer las
responsabilidades, los materiales a
necesitar (contenido, imágenes), etc.

Planear la estructura del sitio Web
• Tenemos que meditar cómo va ha estar
estructurado el sitio. ¿Qué es importante? ¿Qué
no lo es? ¿Qué va ha ir en cada página?
Dependiendo de la escala del proyecto puede
que se desee crear un mapa del sitio para que
el cliente lo visualice.
• La creación de un mapa del sitio es esencial si
se desea reorganizar el contenido de cualquier
forma.

Estructuras de páginas (Wireframe)
• Un wireframe es el esqueleto de un Sitio Web.
• indicando todos los elementos de la
navegación, de la función y del contenido que
aparecerán en el Sitio Web ﬁnal, pero sin
elementos gráﬁcos.
• Actuará como el modelo para el contenido, el
diseño y el trabajo de construcción.

• Dependiendo del tamaño del sitio Web se deben
tomar las consideraciones al momento de
saber dónde hacerlo, si son sitios pequeños
bastará con hacer diagramas sencillos en
Photoshop o Illustrator, para visualizar los
modelos de las páginas, pero si fuesen mucho
más grandes, sitios más complejos.
• Puede ser que sea necesario crear el wireframe
en HTML para que el cliente pueda navegar por
él, para comprobar que todo está en el lugar
correcto.
Estructuras de páginas (Wireframe)

Planear el contenido
• Luego de haber planeado el mapa del sitio y el
esqueleto del sitio.
• podrá reunirse con el cliente para comenzar a
planear el contenido del sitio, especíﬁcamente el
texto.
• Planear el contenido y el texto es probablemente
la carga de trabajo más grande que el cliente
tendrá durante el proyecto, y puede realmente
tomar un cierto tiempo.

Iniciar el diseño
• Mientras se está planeando el
contenido, el diseñador puede ir
trabajando la base del diseño, la
principal y las páginas principales
del siguiente nivel.

Consultar al cliente
• Cuando la base del diseño esté listo, el
cliente necesita veriﬁcar que se esté
dirigiendo en la dirección correcta y
sugerir ajustes al diseño.

Remodelamiento del diseño
• Luego que el cliente dio su punto de vista
de cómo podría ser el nuevo modelo de la
página, el diseñador pasará nuevamente a
remodelar el diseño de la página base.

Aprobación del cliente
• Este proceso de aprobación del cliente, se
repetirá varias durante el proceso de la
creación del sitio Web, esta es una de las
responsabilidades principales del cliente.
• Pues depende de sus indicaciones
acertadas que se lograra tener un
excelente sitio Web.
• El cliente debe estar seguro de sus
sugerencias y no ser dubitativo.

Diseño adicional de la página
• Luego de ser aprobado el diseño
base, se puede comenzar a trabajar
en la maquetación y el diseño de
cada una de las páginas
individuales del sitio.

Confirmación
• Nuevamente el cliente vuelve a
chequear el diseño de las demás
páginas, se hacen las correcciones
necesarias y ﬁnalmente se acepta el
diseño ﬁnal.

Construyendo el HTML y CSS
• Ahora si se procederá a construir las
páginas HTML.
• Y a construir los estilos CSS

• Es la etapa ﬁnal y consiste en generar todo el sitio en
tecnología html utilizando imágenes y contenidos reales.
• En el caso de un sitio estático, esta etapa corresponderá a
la construcción del sitio.
• En el caso de un sitio dinámico, las páginas que se
generen permitirán que el diseñador genere las plantillas
de trabajo y el desarrollador de software las utilice como
elementos para introducir la programación que sea
necesaria para la creación del sitio.
• Es importante considerar que todas las tareas y
actividades incluidas en esta etapa pueden ser abordadas
por un diseñador que tenga experiencia en diseño Web.
• Esto debe ser parte de los requerimientos solicitados a las
empresas proveedoras de este tipo de servicios.
Construyendo el HTML y CSS

Presentación al cliente
• Nuevamente se le presenta
el trabajo al cliente. Ahora
es un trabajo en conjunto,
tanto el diseñador como el
cliente, para pulir y hacer
algunos retoques hasta
conseguir terminar el sitio
Web.

Prueba
• La etapa ﬁnal de la producción es la
depuración de errores.
• El sitio necesita ser probado a través de todas
las plataformas para detectar cualquier
problema técnico, y ser comprobado a fondo
para saber si contiene errores.
• Naturalmente, a través de esta etapa del
desarrollo HTML y CSS usted debe comprobar
la funcionalidad en el navegador, pero necesita
deﬁnitivamente un chequeo mucho más
amplio.
• Para ello tendría que probarlo en Internet por
un determinado tiempo.

Publicación
• Por último se procede a publicar el
sitio, pero es recomendable tener una
secuencia del mismo por lo menos por
unos 10 días en que caso de que surja
algún problema imprevisto o en caso
de que sea necesario algún ajuste.

1. https://www.menti.com/w1v62g78xo
2. https://www.menti.com/ppiqmrgydu
3. https://www.menti.com/kp54hgt93d
4. https://www.menti.com/9inanw4y1m
5. https://www.menti.com/xzni8s9khw

DISEÑO WEB: FASES Y
ETAPAS PARA SU DESARROLLO
Contacto inicial
01
Planificación
02
Concepto
03
Diseño
04
Desarrollo
05
Pruebas y lanzamiento
06

CONTACTO INICIAL
01
Fuente: https://www.marketerosagencia.com/blog/diseno-web/fases-etapas-diseno-web/
● Antes de la reunión inicial se
debe deﬁnir una correcta lista
de objetivos a alcanzar para
deﬁnir el alcance del proyecto

Definir los objetivos a
alcanzar
Desarrollar un
briefing para la idea
del proyecto
Benchmarking de la
competencia
CONTACTO INICIAL
01

1. Deﬁnición de objetivos a alcanzar

En esta reunión deben definirse y quedar claros varios puntos de la web:
● ¿Cuál es el objetivo principal? ¿Se trata de una web informativa, comercial o de entretenimiento? Si es
comercial… ¿Son productos o servicios?
● ¿A quién está dirigida? ¿Enfoca un público específico? ¿Se centra en usuarios de una ciudad, de un sexo
específico o en ciudadanos en una franja de edad específica?
● ¿Qué es lo que buscan con la web? ¿Pretenden dar a conocer una información, entrar en un nuevo sector laboral
o iniciarse en el mundillo?
● ¿Qué quieren exactamente que se haga en la web? ¿Será un portal informativo? ¿Incluirá interacción con el
usuario vía ChatBot? ¿Querrá formularios con los que recabar datos de los usuarios?
● ¿La página web busca transmitir el mensaje de una marca? ¿O por el contrario se trata de una estrategia de
marca más amplia que posea su propio enfoque?
● ¿Tiene competencia en su sector? De ser así… ¿Busca similitudes con los competidores más fuertes o por el
contrario prefiere un estilo propio y diferente al resto?
1. Definición de objetivos a alcanzar

2. Desarrollar un brieﬁng para la
idea del proyecto
Básicamente, para realizar un brieﬁng tan solo
necesitas recopilar toda la información
posible alrededor de estas preguntas:
● ¿Qué quieres hacer?
● ¿Para qué?
● ¿Cuándo lo quieres?
● ¿De qué medios dispones para llevarlo a
cabo?

3. Deﬁnición del alcance
● Deﬁnir el tiempo de duración del
proyecto. Desarrollar un Diagrama de
Gantt.

4. Benchmarking de la
competencia
● Proceso continuo por el cual se toma
como referencia a los productos y
servicios de las empresas líder del
sector, con el ﬁn de crear una
comparativa con los de tu propia
empresa, y así visualizar posibles
mejoras para tu negocio.
1. ¿Qué quiero conseguir?
2. ¿A quién voy a analizar?
3. ¿Cómo lo voy a hacer?

PLANIFICACIÓN
02

SiteMap o Mapa de Sitio
Wireframes
UX
PLANIFICACIÓN
02

1. Sitemap o Mapa de Sitio
● Gracias al sitemap, los motores
de búsqueda son capaces de
rastrear fácilmente los
contenidos de nuestra web,
además de proporcionar
estadísticas de acceso, así
como posibles errores de
indexación.

2. Wireframes
● Una vez tenemos el sitemap
creado, nuestro siguiente paso es
la construcción de una maqueta o
plantilla de la estructura ósea de
la web. A esto se le conoce como
Wireframes.

3. UX
● Conjunto de factores y elementos que
deﬁnen la posible percepción positiva o
negativa de un producto o servicio. Esta
depende en gran medida de diferentes
factores de diseño web, tales como el
hardware, el software, la accesibilidad y
mucho más… pero también depende de
otros aspectos más relativos a las
emociones, como la conﬁanza en la
marca.

CONCEPTO
03

Creación de contenidos
Difusión
SEO
CONCEPTO
03

1. Las 6Ws de la creación de contenidos

2. Difusión
● Una página puede ser o no atractiva
dependiendo de factores tan
diversos como el interés que
despierta el contenido en sí, como
por la forma en que se presenta, ya
sea la tipografía, los elementos
estructurales, etc.

3. SEO
● La segunda función del contenido para
nuestra web es la de aumentar su
visibilidad en los motores de búsqueda.
● Este proceso, el cual se basa en optimizar
el contenido con el ﬁn de mejorar nuestro
posicionamiento en los buscadores, es
conocido como optimización del motor de
búsqueda o SEO (Search Engine
Optimization).

DISEÑO
04

Diseño baja fidelidad
Diseño mediana
fidelidad
Mockup o Diseño
Visual
DISEÑO
04

1. Diseño baja fidelidad
● Los prototipos de baja fidelidad
sirven como visiones iniciales
prácticas de tu producto o
servicio. Estos prototipos simples
solo comparten algunas
características con el producto
final. Son ideales para probar
conceptos amplios y validar ideas.
Se trabaja a mano usando hoja y
lápiz.

2. Diseño mediana fidelidad
● Los prototipos de mediana
fidelidad nos dan una idea más
cercana de cómo será la web final,
se hace uso de alguna herramienta
digital para ubicar los elementos
gráficos y la distribución sin
demorar mucho en los detalles
estéticos.

3. Mockup o alta ﬁdelidad
● Los Mockups son
fotomontajes que permiten a
los diseñadores web mostrar al
cliente cómo quedará su
diseño, permitiendo
rectiﬁcaciones en caso de ser
necesarias, las cuales serán
mucho más sencillas de
realizar antes de la publicación
de la web.

DESARROLLO
05

DESARROLLO
05
● El desarrollo se podría deﬁnir como el
punto en el que los desarrolladores
maquetan el mockup en versión web.
Se trata del paso en el que nos
encargamos de las características y
funciones internas de la página, o lo
que es lo mismo, crea la parte interna
de la web, como son los sistemas de
funcionamiento, contenidos, base de
datos, etc

PRUEBAS Y LANZAMIENTO
06

06
● Es importante que se pruebe a
fondo cada una de las páginas que
daremos de alta, asegurándonos
de que todos los enlaces
funcionen correctamente, así
como corroborar que la carga de
la web se ejecuta correctamente
en todos los diferentes
dispositivos y navegadores que
existen..

06
● Es el proceso mediante el cual la
pagina es alojada en un servidor
web para ser vista en internet,
pero previo a esto se debe realizar
pruebas en un servidor de
pruebas por un lapso de 10 días,
una vez que no se detectan
errores la web puede ser lanzada
a internet de forma deﬁnitiva.

UNIVERSIDAD
DE LIMA
FACULTAD DE
COMUNICACIÓN
Profesionales
que intervienen

Proyect Manager
Es la figura que ejerce como coordinadora en todo este proceso y que, por tanto, se
responsabiliza de que el proyecto web se resuelva satisfactoriamente. Para eso, tiene
que controlar bien los distintos equipos de trabajo que hay y que cada uno actúe cuando
es preciso, planificando los tiempos y periodos de entrega, así como supervisando el
trabajo del resto de roles involucrados. De él, depende que todo fluya.
Profesionales de la comunicación que intervienen
Diseñador Gráﬁco
Es el arquitecto de la web. Se encarga de definir la imagen de la página web, y es capaz
de transmitir mensajes visuales optimizados para cada cliente. Ninguna web es igual
porque ninguna empresa se parece a otra.
Fuente: https://madridnyc.es/profesionales-para-desarrollar-web/

Programador web
Crea la estructura de la web, y consigue que todo funcione. Es el encargado de toda la
parte técnica, programando todas las acciones, como los registros, las opciones de
búsqueda, los filtros o la creación de bases de datos.
Desarrollador de apps
Este perfil consigue llevar tu marca a cualquier sitio. Con el desarrollo de aplicaciones
móviles conseguirás que tu producto esté al alcance de todo el mundo, a cualquier hora
y en cualquier dispositivo.

Social Media Manager
Es el que busca desarrollar y transmitir una correcta estrategia empresarial.
Especialmente al equipo de redacción de contenido y a los community managers de la
empresa. Esta persona, como te imaginarás, ofrece la perspectiva comercial de la
comunicación, explica cómo comunicar con el público para hacer que este se llegue a
interesar por el producto. Gracias a su labor, tu imagen online mejorará, ya que se
encargará de mejorar tu reputación online y ofrecerá un diálogo fluido entre los clientes y
tu negocio.
Community Manager
Es el responsable de las redes sociales y de los ecosistemas digitales. No debes caer en
el error típico de pensar que basta con desarrollar una web para que el público la visite.
Hay que llamar su atención para que lo hagan y , eso, implica ir a buscarles a donde
quiera que estén. Podemos definirlos como los malabaristas del contenido, dado que
desarrollan contenidos específicos para una acción en concreto; ventas, fidelización o
captación de clientes.

Consultor de estrategia digital
Se encargan de definir la estrategia adecuada para cada acción que desarrollemos en
nuestra empresa; desde la creación del concepto hasta la implementación del mismo.
SUs acciones pueden ir desde una acción de formación, a una solución para aumentar
las ventas de un producto determinado o para el refuerzo de una marca.
Copywriter o creador de contenidos
Es el profesional encargado de redactar los textos que aparecerán en la web. Por tanto,
es quien dota de profesionalidad al tono comunicativo que tiene una empresa, así como
el encargado de escribir los textos y desarrollar la idea creativa alrededor de la que gira
la estrategia publicitaria.

SEO/SEM Strategist
El perfil anterior se complementa muy bien con un profesional del lenguaje SEO y SEM,
el encargado de diseñar o modificar los textos del creador de contenidos para que sean
más fácilmente localizables por los buscadores como Google. Son los encargados de
definir, planificar y coordinar todas las estrategias de marketing online. Para ello, también
crean las campañas de optimización en buscadores y analizan el tráfico en Google
Adwords, mejorando el posicionamiento online.
Content Marketing Manager
Es el profesional que busca viralizar el contenido que hay en una web. A diferencia del
community, su labor no es simplemente gestionar las redes sociales. Lo que debe hacer
el content es que se vea atractivo ese contenido y que pueda ser adaptable a todos los
medios posibles.

UNIVERSIDAD
DE LIMA
FACULTAD DE
COMUNICACIÓN
Proyecto Web

Consideraciones:
● Proyecto grupal: Organizar 5 equipos de trabajo de 5 o 6
integrantes.
● Definir un tema de investigación, preferentemente proyectos
de innovación con impacto social o emprendimientos.
● Realizar un sitio web responsive en Wordpress de mínimo 15
páginas que incluya un blog e integre al menos 6
plataformas digitales externas e internas diferentes (red
social, audio, video, mapa, publicaciones en línea, infografía,
línea de tiempo, app, entre otras).
● A partir de la elaboración de un brief y la investigación del
público objetivo se debe planificar, estructurar, diseñar,
implementar y validar un proyecto digital para un
emprendimiento o servicio de innovación centrado en
el usuario.

Consideraciones:
● Informe de las etapas de planificación y arquitectura de
información del proyecto que incluye investigación (EC1
50%)
● Trabajo de investigación: Validación del proyecto digital
grupal (EC2 30 %)
● Informe de las etapas de diseño visual y preproducción del
proyecto (EC2 10%)
● Proyecto: implementación del site con las correcciones en
base a la investigación (EC2 60%)
● Los proyectos son grupales pero tienen un componente de
evaluación INDIVIDUAL.

2021
1ra Etapa del
proyecto
(21/09)
Brief (Datos de la Empresa o Institución,
Overview del proyecto, Publico objetivo
Benchmarking (Investigación de gabinete)
https://drive.google.com/drive/folders/1_wUawuUnaZzzJRxUU7ti98d1NZyIU7BA?usp=sharing
PLANIFICACIÓN
01
Entrevistas sobre contenido para el proyecto
(Elaborar cuestionario con preguntas ﬁltro y
guía de preguntas y realizar la entrevista por
cada alumno)
Validación de la primera versión del mapa de
sitio con público objetivo
Reﬂexión general de todas las
investigaciones.
ARQUITECTURA DE LA INFORMACIÓN
02

https://www.un.org/sustainabledevelopment/es/objetivos-de-desarrollo-sostenible/

Taller de Proyectos Digitales

Recomendados

Recomendados

Más contenido relacionado

Similar a Taller de Proyectos Digitales

Similar a Taller de Proyectos Digitales (20)

Más de Shirley Carreño Rojas

Más de Shirley Carreño Rojas (20)

Último

Último (20)

Taller de Proyectos Digitales