DISEÑO DE SITIOS WEB

Unidad 3 – Fase 4 -Diseño y Construcción III

Presentado a:
LUIS MARIO AVILA PEREZ
Tutor

Entregado por:

ANDRES MAURICIO PEREZ

Código: 10303531

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD

MAYO 2021
 INTRODUCCION

Para el desarrollo del trabajo se hizo la implementación de paginas web utilizando un framework
CSS aplicando estrategias de posicionamiento para el SEO.
Para realizar el trabajo se usará Bootstrap en las dos paginas de aprendizaje de la fase 3, también
se podrán hacer arreglos a la página web de acuerdo con la retroalimentación que hizo el docente
en la calificación del trabajo de la fase 3.
A continuación, se plasman los dos enlaces funcionales para el trabajo fase 4.

ENLACE DEL REPOSITORIO GITHUB

https://github.com/amperezmu/DSW-mauricioperez.git

ENLACE DEL GITHUB PAGES

https://amperezmu.github.io/DSW-mauricioperez/
 SITIOS RESPONSIVOS CON MEDIA QUERIES

La media queries permiten a las páginas web utilizar diferentes declaraciones de estilo de la hoja
de estilos en base al ancho de la pantalla del dispositivo en el que se visualiza el sitio web. En los
diseños web responsive, una media query es una declaración CSS que se utiliza como parámetro
para saber cuándo utilizar otra declaración de estilo en base a las dimensiones del dispositivo en
donde se visualiza la página web. Hay dos maneras de utilizar una media query: utilizando una
hoja de estilos externa o escribiendo directamente en la hoja de estilos.

Externo:

<link rel="stylesheet"; media="screen and (min-width:320px) and (max-width:480px)";

href="css/mobile.css" />

Directo:

@media screen and (min-width:320px) and (max-width:480px){

/*Style Declarations For This Width Range */

Los códigos presentados anteriormente son ejemplos de dos formas distintas de realizar
declaraciones CSS que solo pueden utilizarse cuando el dispositivo se encuentra entre 320px y
480px. Una buena idea de uso para cada uno de estos parámetros de declaración es utilizando
estilos para móviles que puedan salirse de este rango. Por ejemplo, cargar ciertos estilos para
dispositivos similares en anchura al de los iPhones, pero hacer que sean ignorados por ciertos
dispositivos de BlackBerry.

MEDIDAS PARA MEJORAR EL SEO

Palabras Clave (Keywords) en el SEO on Page

Las keywords son muy importantes. No basta con colocar keywords diseminadas por tu post. En
primer lugar, elige keywords específicas, prevé qué preguntarán a Google los usuarios para que
les aparezca tu post. Si eliges keywords genéricas habrá tantas búsquedas que tu post quedará
perdido en el mar de Google.

Las keywords deberán aparecer:

En el contenido de tu post En el título del post (aquí debe aparecer la más importante). En el tittle
(título que aparece en el buscador) En la descripción (texto de Google que resume el contenido de
tus posts) En las imágenes (Google no lee las imágenes, por ello deberás añadir un texto
alternativo que será lo que identifique Google, ahí podrás meter nuevamente la keyword
principal)
Procura que tus keywords aparezcan de la manera más natural posible, nos las disemines sin
sentido. Crear un contenido de calidad es tan importante como posicionar las palabras clave.
Recuerda que no solo quieres que Google encuentre tu site, sino que los usuarios que lo ven
decidan quedarse.

Las etiquetas y las metaetiquetas:

Todas las páginas de los site son en realidad códigos HTML que interpretan los navegadores. Los
navegadores traducen este código gracias a ciertos atributos o "etiquetas" ("tags" en inglés) que
mostrarán la información de la manera en la que lo ves ahora mismo.

Google y otros buscadores utilizan algunas de estas etiquetas para determinar la relevancia
temática de las páginas, e intentar situarlas en el lugar que le corresponde en las búsquedas.

Es decir, podrás mejorar el posicionamiento de tus páginas, optimizando estos "tags".

El título es el elemento más importante para optimizar tú SEO On Page. Google considera el
título como uno de los factores más significativos para "conocer" la temática de tus páginas. El
título de una página debe corresponder con el contenido de tu post y ser consecuente con él. Por
ello como hemos mencionado anteriormente, debe contener la keyword más relevante.

Dirección URL

Si una dirección parece "sospechosa", o no describe adecuadamente lo que se menciona en el

título, tiene muchas posibilidades de perder clics.

Dependiendo de la plataforma web que utilices podrás editar la dirección de tus páginas
fácilmente.

Encabezados (Header Tags)

Los más importantes son el H1 y el H2. Google interpreta ese texto como texto de mayor
importancia, por lo que procura que contenga contenido importante del tema de tu post e incluso
alguna keyword secundaria.

Enlaces "nofollow"

Cuando colocas en tu post enlaces externos y no quieres que Google los lea/indexe para que no se
muestren en los resultados, coloca rel="nofollow" dentro del código HTML del enlace externo.

Puede que sea porque no queremos perder autoridad o porque la página no tiene que ver con tu
web y tú no la recomiendas, o simplemente estás facilitando a tu lector contenido adicional que le
pueda servir de ayuda.
Enlaces Internos

Mejoran el flujo de información de tu web y ayudarán a los usuarios a acceder a contenido

relacionado dentro de tu site.

En cuanto a tu posicionamiento orgánico, cuando Google llega a una de tus páginas, además de
leer el contenido e indexarlo, comienza a seguir los enlaces internos que apuntan hacia otras
páginas. Al enlazarlas entre sí podrán ser visitadas e indexadas.

Enlaces Externos

En ocasiones se aconseja no colocar enlaces externos para no perder autoridad. Sin embargo, los
enlaces externos si son útiles, proporcionan una mejor experiencia al usuario, y esto es un signo
positivo para Google.

Negritas y Cursivas

Google no presta atención a las palabras destacadas en negrita y cursiva. De cara a tu

posicionamiento orgánico no sirve de nada. Sin embargo, está probado que destacar texto al igual
que añadir imágenes, ayuda al lector a hacer la lectura más llevadera y de esta manera se sentirá
motivado a seguir en tu site.

Contenido de la página

Las keywords que utilices en el contenido de tu blog, deberían estar todas relacionadas con la
keyword principal. De esta manera no confundirás a Google y vinculará tu post al tema exacto
que pretendes posicionar. Así, cuando la gente busque sobre un tema que se relacione con el de tu
post, tu publicación aparecerá en las búsquedas de Google aumentando tu tráfico de manera
gratuita.

Ahora bien, aunque no sea estrictamente necesario que el contenido de tu post sea de calidad para
posicionar tu post, queremos que los usuarios se queden en nuestra página. Sé honesto y genera
un servicio de calidad. Si tu página recibe una gran cantidad de contenidos negativos no solo te
penaliza de cara a tus visitas, sino que Google también te penalizará.

Estructura tu web para mejorar tu SEO

Procura que tu página tenga una estructura lo más horizontal posible. Si pones muchos submenús
y hay que adentrarse mucho para acceder a los contenidos el usuario se perderá en tu web y se irá
a otra parte.

El tipo de estructura que suele ser más beneficiosa para el SEO es la estructura "silo". Este tipo
de estructura en forma de árbol o pirámide te permite encaminar más fácilmente a los usuarios y
llevarlos hacia donde más te interese, como por ejemplo las "Landing Pages" donde quieres que
se lleve a cabo alguna acción (compra, suscripción, etc.)

Google solo lee las categorías principales y se basará en ello para interpretar el contenido de tu
web. No crees estructuras complicadas que no te benefician ni de cara al cliente ni de cara a
buscadores.
 CONCLUSIONES

• Se logro realizar los ajustes pertinentes de acuerdo con la retroalimentación formulada por
el tutor en el trabajo de la fase 3
• Se aplicaron los conocimientos adquiridos en Bootstrap y mejorar la pagina
• Se aprendieron nuevos conceptos que podrán ser aplicados como media queries y SEO los
cuales podrán ser aplicados en el diseño de nuevas páginas web.
 BIBLIOGRAFIA

• Recio García, J. A. (2016). HTML5, CSS3 y JQuery: curso práctico. RA-MA Editorial.
(Pág. 146 a 185) Recuperado de https://elibro-
net.bibliotecavirtual.unad.edu.co/es/ereader/unad/106494?page=146
• Mesa Holguín, M. (2012). Fundamentos de marketing. Ecoe Ediciones. (Pág. 169 a 198).
Recuperado de https://elibro-
net.bibliotecavirtual.unad.edu.co/es/ereader/unad/69209?page=187
• Pedrós Piñón, M. (2018). Manual SEO: Posicionamiento web en Google para un
marketing más eficaz. (Pág. 125 a 150) Recuperado de https://elibro-
net.bibliotecavirtual.unad.edu.co/es/ereader/unad/51300?page=126
• Inercia Digital. 2021. Qué son la media queries en los diseños web responsive. [online]
Available at: <https://blog.inerciadigital.com/2016/11/14/media-queries-disenos-web-
responsive/>
• Isdi.education. 2021. Consejos HTML para mejorar tu SEO. [online] Available at:
<https://www.isdi.education/es/blog/consejos-html-para-mejorar-tu-seo>