DPW2 U1 A2 Arsv

…………………………………………………………………………………......
Programación Web II
UNADM
INGENIERÍA EN DESARROLLO DE
SOFTWARE
Docente Angelica Cruz Caloch
Alumno: Arlo Enrique Solís Villa.
Matricula 15030393
JULIO-2019
Unidad 1.
Tecnologías para mi sitio web
Actividad 2.
Documentación y maquetación
de un sitio web.
ARLO ENRIQUE SOLIS VILLA 1

Propósito:
Estructurar un sitio web mediante la maquetación.
Instrucciones
1. Realiza el análisis de un sitio web para una empresa dedicada a ofrecer cursos de
capacitación, la empresa ofrece servicios como: cursos de capacitación, talleres,
diplomados, conferencias y al desarrollo de software.
2. Documenta la descripción del caso seleccionado tal como: objetivo del análisis,
requerimientos de usuario.
3. Crea un prototipo del diseño que tendría un sitio web haciendo uso de la maquetación
utilizando algún software para maquetación de tu elección.
Importante: No programar en web, únicamente se recibirán actividades que se hayan

hecho con software de maquetación, principalmente utilizar los programas de software
mencionados en los contenidos de la Unidad 1, el diseño de la maqueta se hará con base
en los requerimientos del caso seleccionado.
4. Genera un video en donde se muestre el diseño del sitio web que se hizo mediante la
maquetación. (No hacer desarrollos web, solo se pide hacer una maqueta o prototipo,
las maquetas solo son diseños sin funcionalidad). De preferencia el video se deberá
subir a YouTube.
5. Genera la documentación del problema con el siguiente formato.
Características del formato de párrafo y fuente:
➢ Arial 11
➢ Texto justificado
➢ Títulos centrados

Elementos de la actividad:
Carátula. Se deberá integrar con los siguientes elementos:
• -Nombre completo de la institución.

• -Nombre completo de la asignatura.
• -Nombre completo de la unidad.
• -Nombre completo y número de la actividad.
• -Nombre del proyecto analizado
-Nombre completo del (de la) alumno(a)
Datos generales: matrícula (de la) alumno(a), grupo, nombre del(a) Docente en línea,
fecha de entrega.
Descripción del caso:
Requerimientos de usuario, objetivo, maquetación o prototipo, imagen generada.
Conclusiones
Fuentes de consulta (recuerda que deberán ser confiables y evitar tomar contenido
textual, es necesario que sólo te bases en las fuentes y expliques lo que has comprendido
de ellas). Incluir la liga del video para su revisión.

ANÁLISIS DE UN SITIO WEB
Cuando creamos y administramos un sitio web, es muy importante que de vez en cuando
le realicemos un check up para asegurarnos de que todo funciona correctamente o para
detectar qué aspectos podemos mejorar para reforzar la salud de nuestro sitio o una
actualización con alguna novedad tecnológica
Pero, mi pregunta es ¿cómo analizar una página web? Al leer la unidad me doy cuenta
de algunos pasos que debemos de llevar a cabo, asi como realizar una investigación de
los pasos a seguir.
Como ya sabemos el analizar un sitio web es un proceso que puede resultar un poco
costoso la primera vez que se realiza, pero con el siguiente análisis que se realizó, se
puede corrige algunos aspectos y mantener nuestro sitio web nos llevará menos tiempo
analizarla, la practica el estudio nos ayudará a darle un buen mantenimiento a nuestro
sitio que tengamos gozará de muy buena salud.

Objetivo
En primer lugar debemos tener bien claro nuestro objetivo y cuestionarnos ¿de qué trata
la web?, ¿cuál es su propósito?. En nuestro caso se trata de una empresa que se dedicada
a ofrecer sus servicios de cursos de capacitación, talleres, diplomados, conferencias en
el desarrollo de software.
Teniendo en cuenta que el visitante debe tener clara la información, que impacte, sea
visible, no saturar de contenidos y que sea formularios y banners incitando a la
adquisición de productos o servicios, sino que la especialidad, sobre la que trate el sitio
web, tiene que verse claro , sencillo y armonioso.
También es importante no olvidar incluir al menos una llamada a la acción para que los
usuarios que visiten se pongan en contacto contigo, echen un vistazo a la página donde
se muestra los servicios que se ofertan y lean los contenidos más destacados como
puede ser un blog que siempre este actualizado.
Otro parámetro que es importante señalar es tener el logo corporativo con lo que nos
va a identificar los estudiantes que quieran realizar alguno de los cursos que se ofrecen,
con una línea cromática definida, tipografías bien escogidas, un logotipo y otros
parámetros bien diseñados, nos facilitará mucho la tarea de dar forma al sitio web,
teniendo un punto de partida, en este caso se busco un logo en un sitio web que genera
logos gratis https://es.vexels.com/

Estructura de la web
Es muy importante que cuando se haga la maquetación del sitio web se hayas tenido en
cuenta su estructura, Teniendo una imagen clara en nuestra cabeza de cómo está
construido y organizado nuestro dominio, como se hace en Diseño Gráfico creamos un
boceto del diseño que se va a realizar, para ello es importante tener en cuenta los
aspectos siguientes que se vieron en la pagina para realizar una buena maquetación
https://refrescandonegocios.com/errores-al-disenar-pagina-web/
Errores de diseño
• Error 1. Diseñar tu web en plataformas como Wix o 1&1
• Error 2. No tener una imagen corporativa previa
• Error 3. Improvisar el diseño
• Error 4. Diseño poco profesional
• Error 5. Muchos colores y/o mal combinados
• #Error 6. Escoger mal las tipografías
• #Error 7. Uso de imágenes genéricas (de stock)
• #Error 8. Desequilibrio entre imágenes y textos
• #Error 9. No respetar el espacio en blanco
• #Error 10. Abusar de animaciones y movimientos
• #Error 11. Demasiadas llamadas a la acción
• #Error 12. Uso de carruseles de imágenes (sliders)

La estructura, como se estudió en la unidad es el esqueleto de la web y si hacemos que

sea proporcionado, con elementos bien distribuidos, podremos construir un buen sitio
porque contaremos con una buena y sólida base que sosteniendo el proyecto y además
será agradable para los visitantes. Para el diseño debemos tener en cuenta que hay dos
tipos de estructura y en ocasiones nos confundimos.
Estructura del sitio web
La estructura web establece cómo se organizan y jerarquizan todas las páginas y

contenidos que tengas en tu sitio. En el siguiente ejemplo se muestra cómo se debe
estructurar un sitio web, como lo indica Google de cómo debe estar ordenado el sitio
web, si el buscador encuentra un sitio con buen contenido y bien organizado, lo
premiará con unas buenas posiciones en los resultados de búsqueda.
Cada sitio web cuenta con una estructura diferente en nuestro caso deberemos
reflexionar sobre el contenido del sitio y cuál es la mejor manera de organizar y clasificar
las páginas, categorías y contenidos. En mi caso escogí lápiz y papel y empieces a
construir tu sitio por tu homepage, pensando qué páginas van a estar aquí y cómo van

a quedar ordenas en el sitio de forma jerárquica, como ya tenemos el diseño del logo
con su nombre oficial de la empresa que realiza los cursos de Desarrollo de Software al
que lo haremos referencia Software Development.
Modelo de disposición jerárquica
Como la mayoría de los sitios web se plantean inicialmente este tipo de modelo de
disposición jerárquica, adecuado sobre todo para organizar las páginas más
atemporales que muestran los diferentes servicios de profesionales, organizaciones o
empresas, aquellos en los que basa su principal actividad, como es el caso en estudio.
También es un modelo muy adecuado cuando los conceptos relacionados con las
diferentes páginas atienden a cierta complejidad. Para resolver la manera de entender
qué asociación tienen unos con otros, pudiendo establecerse esta asociación en
diferentes niveles de profundidad.
La mayor autoridad desde el punto de vista del SEO la tendrán las páginas de niveles
superiores, también denominadas “cabeceras de sección”, que a la vez serán las que
utilizará la mayor parte del público para descolgarse hacia otras con información más
específica o especializada, como lo ilustra este ejemplo:

Para ello se tiene muy en cuenta tener una clara la estructura del sitio web, como un
punto fundamental para el SEO (Posicionamiento Orgánico) y para la usabilidad, no es
lo mismo que el usuario llegue a un sitio con 1 clic que con 3 o 5.Además de tener bien
estructurada tu web, cada página debe tener una URL amigable en función de la
categoría o contenido que albergue. Una buena estructura web también influye en
aumentar el nivel de calidad del sitio web.
Esta parte puede que sea una de las más costosas del análisis de nuestra página pero si
nos trabajamos una buena estructura y que sea sólida no tendremos que realizar ningún
cambio más en este aspecto, porque las modificaciones que sufrirá serán mínimas.
En el caso de estudio se desarrollará solo 4 páginas todas enfocadas al desarrollo de

software
• Home page o index

✓ Cursos de capacitación
✓ Talleres y diplomados
✓ Conferencias y asesoría
Posteriormente se irán añadiendo submenús para integrar mas páginas, para ello se
lleva tiempo para el diseño y desarrollo de las páginas, pero debido a los tiempos lo
realizaremos de una forma simple.
Home page
Software
Development
Cursos de
Talleres y Conferencias y
capacitación
Diplomados asesoría
para empresas

Estructura de las páginas web
En este tipo de estructura, en cambio estaremos trabajando la composición de la web

pero a un nivel visual, vamos a pensar cómo queremos organizar las páginas web de
nuestro sitio. Cómo vamos a distribuir los elementos, si vamos a añadir imágenes,
textos, enlaces, botone porque determinará si la experiencia de usuario en nuestra web
es buena o mala.
Contenido
El contenido con el que se alimente el sitio o la página web es uno de los factores más
valiosos, por lo que hay que asegurarte de que el contenido que se tenga sea relevante
para los visitantes y estén relacionados con la especialidad de Ingeniería en Desarrollo
de Software. También se tiene en cuenta que el contenido sea de calidad y propio, por
lo que se elimina o cita correctamente cualquier contenido que no se haya creado para
evitar penalizaciones de la UNADM y de Google.
La web creada debe ser el mejor escaparate para mostrar las habilidades y diferenciarse
del resto de la competencia, además debemos tener en cuenta que dicha página o sitio
es una extensión del negocio de Software Development dándole un toque personal.
El mejor apartado donde se puede desarrollar el contenido, de imagen de marca y de

estilo, es en un Blog. Por lo que se toma en cuenta realizar un apartado en la página web
de un blog esto con la finalidad de ir generando una fuente de tráfico hacia el sitio,
haciendo branding y también se puede acabar crear una comunidad de usuarios afines
a todo lo relacionado con los cursos de Desarrollo de Software, lo que en futuro podrían
ser alumnos o posibles clientes.

Diseño/Usabilidad
Tomando en cuenta la importancia del diseño, la experiencia del usuario y la usabilidad

en las páginas web. En Google cada vez le da más relevancia a estos aspectos tomando
muy en cuenta la calidad de una página web . En las investigaciones realizadas se
menciona a Google Analytics como una herramienta fundamental para tener una idea
de cómo está funcionando el diseño en la web. Analiza los datos de tu tasa de rebote, el
tiempo de permanencia en la página o el flujo del comportamiento del usuario y valora
si los números que obtienes son buenos o podrían ser mejorables, lo que puede servir
como punto de apoyo para la mejora del diseña de la página que se está creando.
Existen muchos factores que condicionan el diseño y la usabilidad web teniendo en

cuenta que la clave está en buscar el equilibrio perfecto entre ambas.
El diseño debe de ser perfecto y estéticamente agradable, con unos colores y tipografías
que inciten a la lectura, teniendo siempre en cuenta al visitante o posibles clientes en
este caso alumnos, quienes deben de tener una experiencia agradable y estar cómodo.
Poco sirve tener un diseño muy maravilloso, si la legibilidad de los textos es muy baja, o
la distribución de los elementos perjudican la navegación de los usuarios.
Por lo que se vio en las diversas fuentes consultadas se debe tener el mismo estilo en
toda la web, siguiendo la misma línea del diseño y los colores tipográficos con las
imágenes, tipografías y demás elementos que añadas a la web.
Velocidad de carga de la web
Otor factor que se ha decidido tomar en cuenta dentro de la usabilidad debemos tener
muy en cuenta la velocidad en la que carga nuestro sitio web. No es lo mismo que el sitio
web se cargue en el navegador de un usuario en 2 segundos que en 10. Para medir

adecuadamente la velocidad de nuestra web existen numerosas herramientas gratuitas
que nos pueden ayudar en esta tarea, como es Pingdom Tools-
Los Dispositivos móviles
Si en una computadora el diseño y la usabilidad es importante, en dispositivos móviles

es aún más importante ya que se cuenta con menos espacio para mostrar la información
y el usuario suele tener menos paciencia para acceder al contenido por ello la
importancia del diseño responsivo, que se estudio en los apuntes de la unidad.
Realizar una Auditoría SEO
Se puede decir que el SEO es una “herramienta” estratégica para ayudar a que se
cumplan nuestros objetivos de posicionamiento. La experiencia ha demostrado que la
auditoría SEO es una especie de análisis que nos ayuda a saber en qué situación se
encuentra la web y si se están cumpliendo correctamente los objetivos o si
necesitamos reorientar la estrategia y sus contenidos. No olvidando que las extensiones
SEO para Google Chrome y los mejores plugins de SEO para WordPress, los cuales
ayudarán mucho a realizar una buena auditoría facilitando mucho las tareas y ahorrando
mucho tiempo.
Optimización de las palabras clave
La selección escoger unas buenas palabras clave es vital para el SEO. Las palabras clave
marcarán los términos clave de tu sitio web para que sean registrados adecuadamente
por los motores de búsqueda. Asegurado de colocar las palabras clave en los títulos y

subtítulos de las páginas, en los encabezados, en los contenidos del blog, en el title de
las imágenes y en las URL.
Contacto
Otro aspecto que es muy importante de tener en cuenta son los apartados de contacto
bien implantados en la paginas web. Si por ejemplo un usuario llega a la web y quiere
adquirir los servicios, cursos o ponerse en contacto contigo y no lo consigue porque
estos apartados no están bien configurados estarás perdiendo oportunidades de
negocio y por consiguiente, dinero. La disyuntiva que tenemos ¿De qué sirve tener una
buena página web si luego no puedes contactar con la persona que ofrece el servicio?
Página de contacto
La solución al apartado anterior seria contar con una página de contacto en el sitio o en
un área específica de la página donde se pueda mostrar toda la información acerca de
cómo contactar, ya sea por teléfono, mediante correo electrónico, dirección física de la
empresa en caso de que quieran hacer una visita a las instalaciones en esta página
importante añadir un formulario de contacto, para facilitar las cosas al usuario en caso
de que quiera ponerse en contacto contigo.
Redes sociales
Si en caso de que Software Development cuenta con redes sociales, también es muy
importante que estén bien configuradas y que al hacer clic sobre las diferentes redes, el
usuario llegue al perfil correspondiente a la empresa. Realizando posteriormente una
auditoría a las redes sociales, para ver cómo está funcionando como estrategia de redes
respecto a la competencia.

Cuando se crea una web, un apartado que habitualmente suele olvidarse de configurar
correctamente las redes sociales para cuando se difunda un contenido del sitio web. Por
ejemplo, en el blog se crean artículos relacionados a la Ingeniería en Desarrollo de
Software, actualmente redactar un artículo sobre un tema funciona muy bien en redes
sociales y es muy compartido. Si se configura bien este apartado, cuando compartan ese
contenido del sitio, se recibirán menciones en las diferentes redes sociales como creador
del contenido.
Esto nos otorgara visibilidad, notoriedad y llegar a un público en específico, facilita

mucho la conversación en las diversas redes sociales ya que puedes dar las gracias a la
persona que lo ha compartido y cuidar a la comunidad. Las redes sociales componen el
escenario perfecto, para que se pueda conversar y agradecer a los lectores, visitantes,
futuros clientes y alumnos.
Conversión
Otra parte importante de un análisis web es comprobar que la página se esté

convirtiendo correctamente. Una conversión puede ser, que por ejemplo los
visitantes de tu web realicen una llamada a tu número de teléfono y pregunte por
algunos de nuestros servicios o bien los interesados envíen un formulario de contacto,
que se descarguen algún contenido del blog, que se suscriban.
Todas estas acciones pueden derivar en un proceso de compra de algún servicio y por
lo tanto se debería de medir este tipo de conversiones.
Google Tag Manager cuenta con una buena herramienta para medir este tipo de
conversiones en tu web.

Maquetación
Requerimientos
Empresa Software Development
Giro ofrecer cursos de capacitación, la empresa ofrece servicios como: cursos de

capacitación, talleres, diplomados, conferencias y al desarrollo de software.
1ª Sección de cursos de capacitación
2° Sección Talleres y Diplomados
3ª Sección Conferencias
4ª Sección Asesorías
Maquetación de la ventana de navegación, con titulo e inserción de menú

DISEÑANDO INDEX DE SITIO WEB

CURSOS Y DIPLOMADOS
CONTACTO Y UBICACIÓN

Página de cursos

CONCLUSIONES.
Maestra en primer lugar expresarle mi agradecimiento a pesar de mis problemas

crónicos de salud, estoy leyendo y estudiando todo me he tardado en el envió de las
actividades por que vi todos los videos que recomendó y en lo personal me gusto el
del programa de Balsamiq Mockups 3, estuve viendo algunos videos de como
funciona ya no tenía ni idea que existiera un software con estas características.
Me encanto el programa honestamente estoy viendo videotutoriales apara sacarle

más jugo posible pero por cuestiones de tiempo aprendí a usar lo básico, pero voy a
seguir experimentando en este proyecto y aprendiéndolo a usar correctamente, la
verdad es muy buen programa , muy sencillo y muy intuitivo aunque siento que va
más orientado a un formato para IOS, el cual también lo descargue en mi Mac, para
seguir aprendiendo a usar, este me puede servir para realizar la maquetación de
cualquier proyecto web o de otro tipo en un futuro, lo que si vale la pena invertirle
para comprar la licencia, además es única .
Por otro lado concuerdo con los expertos, y con lo que aprendí en Diseño Gráfico no
hay nada mejor que bocetar el diseño con lápiz y una hoja de papel, para cuando
hagamos el prediseño para no batallar tanto y tener la idea más clara de lo que
queremos diseñar, teniendo en cuenta como principal la homepage y de ahí partir en
mi caso me gusta de forma jerárquica y como es en la programación web realizar
todos los vínculos posibles, de todas las demás páginas del sitio.
Con este programa uno se ahorra bastante tiempo en los diseños de las paginas ya
que me recuerda funciones como lo hacemos en PowerPoint, además de que puede
uno ser muy creativo ya que tiene un menú muy competo de todo tipo de diseños
comando y reajustes de una forma muy sencilla.
Agradecer por compartir los videos de como aprender a maquetar ya que sino no
hubiera podido realizar esta actividad.

Realice el video pero creo que me quedo largo debido a que es mucho lo que hay que
explicar en torno al software, su funcionamiento y como se va diseñando o
maquetando el sitio web, se subió a YouTube como indico con la URL
https://youtu.be/baBuXY2C1qY
Continuo con las demás actividades para alcanzarlos lo mas pronto posible, me hace
falta tiempo ya que mi trabajo es muy absorbente, pero me gusta la materia y me
encanto realizar esta actividad ya que fue muy creativa.

Fuentes bibliográficas
Desarrollo de Software, 8° Semestre, Programación WEB 2, Unidad 1.
Tecnologías para mi sitio web, Clave 15144843, UNADM.
Minicurso de Balsamiq Mockups (1) - Los wireframes y la interfaz
https://youtu.be/4WqfxF1QjTM?list=PLqtL7STxm2c3_gk3c_g4irprcY5Iu3_cH
Minicurso de Balsamiq Mockups (2) - La librería de elementos
https://youtu.be/mmjLcW68w24
Minicurso de Balsamiq Mockups (3) - Assets y simbolos
https://youtu.be/oMMwi7F1YoM
Minicurso de Balsamiq Mockups (4, final) - Presentar el proyecto
https://youtu.be/ek3dtaN9iyI?list=PLqtL7STxm2c3_gk3c_g4irprcY5Iu3_cH
Tips para una buena maquetación:

https://www.youtube.com/watch?v=UqXlU3nP4hg
https://www.youtube.com/watch?v=kjCiIxxAacI
https://refrescandonegocios.com/errores-al-disenar-pagina-web/
Tutoriales de maquetadores:
https://www.youtube.com/watch?v=VOSiCSgaTok
https://www.youtube.com/watch?v=gm6MoRJ2JPY
https://www.youtube.com/watch?v=QR6fu-gI9QY
https://www.youtube.com/watch?v=Bu3Y5AHYjKc
https://www.youtube.com/watch?v=OOM_liyC3QI
https://www.youtube.com/watch?v=-SE4kPKIBq8
Creación de logotipos gratis.
https://es.vexels.com/
Balsamiq para escritorio página oficial de la descarga
https://balsamiq.com/wireframes/desktop/

DPW2 U1 A2 Arsv

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

DPW2 U1 A2 Arsv

Hochgeladen von

Copyright:

Verfügbare Formate

…………………………………………………………………………………......

Docente Angelica Cruz Caloch

Alumno: Arlo Enrique Solís Villa.

Tecnologías para mi sitio web

ARLO ENRIQUE SOLIS VILLA 1

Estructurar un sitio web mediante la maquetación.

Importante: No programar en web, únicamente se recibirán actividades que se hayan

5. Genera la documentación del problema con el siguiente formato.

Características del formato de párrafo y fuente:

ARLO ENRIQUE SOLIS VILLA 2

Carátula. Se deberá integrar con los siguientes elementos:

• -Nombre completo de la institución.

-Nombre completo del (de la) alumno(a)

Descripción del caso:

Requerimientos de usuario, objetivo, maquetación o prototipo, imagen generada.

ARLO ENRIQUE SOLIS VILLA 3

ANÁLISIS DE UN SITIO WEB

ARLO ENRIQUE SOLIS VILLA 4

ARLO ENRIQUE SOLIS VILLA 5

• Error 1. Diseñar tu web en plataformas como Wix o 1&1

• Error 2. No tener una imagen corporativa previa

• Error 3. Improvisar el diseño

• Error 4. Diseño poco profesional

• Error 5. Muchos colores y/o mal combinados

• #Error 6. Escoger mal las tipografías

• #Error 7. Uso de imágenes genéricas (de stock)

• #Error 8. Desequilibrio entre imágenes y textos

• #Error 9. No respetar el espacio en blanco

• #Error 10. Abusar de animaciones y movimientos

• #Error 11. Demasiadas llamadas a la acción

• #Error 12. Uso de carruseles de imágenes (sliders)

ARLO ENRIQUE SOLIS VILLA 6

La estructura, como se estudió en la unidad es el esqueleto de la web y si hacemos que

Estructura del sitio web

La estructura web establece cómo se organizan y jerarquizan todas las páginas y

ARLO ENRIQUE SOLIS VILLA 7

Modelo de disposición jerárquica

ARLO ENRIQUE SOLIS VILLA 8

En el caso de estudio se desarrollará solo 4 páginas todas enfocadas al desarrollo de

• Home page o index

ARLO ENRIQUE SOLIS VILLA 9

Estructura de las páginas web

En este tipo de estructura, en cambio estaremos trabajando la composición de la web

El mejor apartado donde se puede desarrollar el contenido, de imagen de marca y de

ARLO ENRIQUE SOLIS VILLA 10

Tomando en cuenta la importancia del diseño, la experiencia del usuario y la usabilidad

Existen muchos factores que condicionan el diseño y la usabilidad web teniendo en

Velocidad de carga de la web

ARLO ENRIQUE SOLIS VILLA 11

adecuadamente la velocidad de nuestra web existen numerosas herramientas gratuitas

que nos pueden ayudar en esta tarea, como es Pingdom Tools-

Los Dispositivos móviles

Si en una computadora el diseño y la usabilidad es importante, en dispositivos móviles

Realizar una Auditoría SEO

Optimización de las palabras clave

ARLO ENRIQUE SOLIS VILLA 12

ARLO ENRIQUE SOLIS VILLA 13

Esto nos otorgara visibilidad, notoriedad y llegar a un público en específico, facilita

Otra parte importante de un análisis web es comprobar que la página se esté

ARLO ENRIQUE SOLIS VILLA 14

Empresa Software Development

Giro ofrecer cursos de capacitación, la empresa ofrece servicios como: cursos de

1ª Sección de cursos de capacitación