TRABAJO FINAL POR PROYECTO

Diseño de Páginas Web

Jonatán Andrés Navia Usaquén

Código 1115.073.929

Gustavo Adolfo Osorio

Código 1.115.182.434

Adriana Macela Tovar Cuellar

Código 1.117.492.875

Marly Valencia

Código 1.117.266.062

GRUPO 301122_72

Director curso

Mauricio Perdomo Vargas

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIAUNAD

FACULTAD DE CIENCIAS BASICAS E INGENIERIA

PROGRAMA DE INGENIERIA EN SISTEMAS

Junio de 2014

TABLA DE CONTENIDO

Página 1 Portada.

Página 2. Tabla de contenido.

Página 2, 3. Introducción, Objetivos, Desarrollo actividad, Fase 4 del proyecto.

Página 3 a la 6 .Actividades del trabajo con sustentación.

Página 7 Conclusiones y Bibliografía.

INTRODUCCIÓN

El mejoramiento de la página de corporativa para los funcionarios de la Universidad Nacional Abierta y a Distancia UNAD se aplica posteriormente a las pruebas SEO que se aplicaron en la página y las cuales quedan registradas en este trabajo grupal del examen final que se presenta con los compañeros y sus recomendaciones; También se planteara un plan de mejoramiento para la intranet de la UNAD.

OBJETIVOS

Apropiarse de las competencias establecidas para el curso Diseño de Sitios Web, las cuales son necesarias para el correcto desarrollo de proyectos de Diseño Web de forma estándar y eficaz.

DESARROLLO DE LA ACTIVIDAD

Fase 4. PLAN DE MEJORAMIENTO PARA EL SITIO Universidad Nacional Abierta y a Distancia UNAD de Colombia, debe crear una intranet corporativa para que sus funcionarios por medio de un sistema de Login, que tengan acceso a aplicativos, servicios y contenidos propios de la entidad.

La página es jcrash.esy.es los usuarios y sus correspondientes claves son:

Clave => 12345

Email => luis@unad.edu.co

Nombre => Luis Fernando

Modulo => talento_humano

Clave => 67890

Email => pedro@unad.edu.co

Nombre => Pedro Ramírez

Modulo => gestion_academica

Clave => 54321

Email => andres@unad.edu.co

Nombre => Andrés Pérez

Modulo => calidad

Clave => 09876

Email => popeye@unad.edu.co

Nombre => Popeye Adolfo

Modulo => acreditación

Clave => abcde

Email => tarsan@unad.edu.co

Nombre => Tarsan de Chita

Modulo => convenios

Críticas y Sugerencias de mejoramiento

1. La etiqueta HTML Meta keywork está oficialmente obsoleto desde 2009 por que se ha usado tanto para hacer spam que han decidido ignorarla. Solamente en el caso de portales de noticias deberían usar el meta tag, como decía el ingeniero de Google Matt Cutts.

Solución:

Utilizar contenido con palabras claves y sinónimos, pero sin pasarse del 3%.

Tu TITLE, Description, H1 y URL deben ser diferentes para cada una de las páginas de la web, y diferentes entre sí en una misma página.

Usa variantes, sinónimos, plurales, y derivados. Pero durante el texto y sin forzarlo.

Coloca la palabra clave en el TITLE, Description, y etiquetas h1, h2 y úsalo en las imágenes (nombre de archivo, title, y alt).

Utiliza URL amigables

2. Se encuentra que la velocidad de carga del sitio web puede ser más rápida.

Solución:

A las imágenes se les puede disminuir u optimizar su peso usando el optimizador de imágenes online http://www.webresizer.com/resizer/ el cual presenta herramientas que permiten definir algunos parámetros de calidad para optimizar las imágenes, reduciendo su calidad para su utilización en la web.

No Usar demasiado imágenes PGN con transparencias.

Usar imágenes JPG de menor tamaño.

3. Utilizar GOOGLE analíticas.

No tienes datos del número y comportamiento del tráfico web y visitantes, no se puedes saber que se estás haciendo bien o que debe mejorar en cuanto a las palabras claves utilizadas y sus sinónimos.

Solución:

Se necesita instalar un sistema de rastreo de tráfico que muestre los datos de cuantos visitantes se tiene, de donde la visitan, las fuentes de tráfico, cuánto tiempo se demoraron en la página web. Google ofrece una solución GRATIS que se puede empezar a usar ya mismo – Google Analytics.

4. Mejorar código HTML y CSS

Existe una serie de correcciones HTML y CSS las cuales fueron indicadas por las herramientas: Validación CSS del W3C y Markup Validación Service.

Solución:

Debemos encontrar los archivos base de CSS y HTML y corregir los errores mostrados por las

herramientas de corrección para mejoras tanto la carga como la forma de visualizar

correctamente la página web.

En el pantallazo muestra el test para la conectividad de red de prueba de ping a un servidor en el que se introduce el nombre de host o IP (http://jcrash.esy.es) para realizar un ping o  Traceroute (es una consola de diagnóstico que permite seguir la pista de los paquetes que vienen desde un host) en este caso se eligió un ping y guardar la prueba.También se puede ver por medio de una gráfica el tiempo de respuesta (ms) que va entre 39 a 41. Muestra 5 paquetes con la dirección IP 31.170.165.190 (todos los paquetes provienen de esta dirección IP).

Mejorar el posicionamiento Web en los diferentes motores de búsqueda

HTTP Headers Check (cabeceras HTTP) OK

Head Elements (elementos de la cabecera)

El titulo contiene Stop Words (palabras vacías) que no son recomendadas ya que los motores de búsqueda las ignoran.

La etiqueta título es uno de los factores de clasificación más importantes, por eso la importancia de usar palabras claves, ya que incrementa dramáticamente el ranking en los motores de búsqueda

Meta Description Tag (Descripcion de la etiqueta meta) OK

el tag “keywords” está oficialmente obsoleto desde 2009

el meta tag keyword servía para indicarle al buscador cuales eran las palabras clave de una página

La etiqueta robots sirve para llevar un control exhaustivo de lo que puede o no puede hacer un robot de indexación cuando visita nuestro sitio web.

Recomendación: definir la etiqueta META de robots ya que sirve para personalizar el comportamiento de robots de indexación tipo Google.

PLAN DE MEJORAPrueba realizada

Situación encontrada

Acción por implementar

Recursos necesarios

Responsable Plazo Fecha de inicio estimada

Fecha de conclusión estimada

Observaciones

Markup Validation Service

meta-etiquetas de Palabras Clave (Keywords) título no registrada

Eliminar la meta etiqueta y utilizar solo el <title>

Editor de texto, cliente web, usuario y password de acceso al portal de administración

Gustavo Adolfo Osorio Suarez 1.115.182.434

1 día 15 de junio de 2014

16 de junio de 2014

Esta etiqueta ya está en desuso, y ya no es interpretada por los buscadores como Google o Yahoo, ya que estos solo tienen en cuenta la etiqueta title

Markup Validation Service

Elemento div no permitido como hijo de elemento span

Contener los div dentro de otro div

Editor de texto, cliente web, usuario y password de acceso al portal de administración

Gustavo Adolfo Osorio Suarez 1.115.182.434

1 día 15 de junio de 2014

16 de junio de 2014 un DIV no debe estar dentro

de un SPAN

span: “abarcar”Es un contenedor en línea. Sirve para aplicar estilo al texto o agrupar elementos en línea.

<span> se usa dentro de un elemento a nivel de bloque<div> se usa para agrupar uno o más elementos a nivel de bloque

Optimización de imágenes para la web

Imágenes de gran tamaño

Optimizar el peso reduciendo el tamaño de la imagen y su calidad

Optimizador de imágenes online http://www.webresizer.com/resizer/

Jonathan Andrés Navia

1 día 16 de junio de 2014

17 de junio de 2014

Se deben utilizar en mayor medida las imágenes de tipo JPG ya que este es un formato estándar para la web.

No se deben utilizar imágenes de alta definición o de gran tamaño ya que ralentiza la carga de toda la página web.

Implementar herramienta de medición de trafico web GoogleAnalytics

No hay un control para la medición de tráfico del aplicativo web para los funcionarios

copiar el código javascript dado por Google Analytics en nuestro aplicativo web

Cuenta en Google

Herramienta de google, Google Analytics

Copiar Codigo generado por Google Analytics para el seguimiento del tráfico en nuestro index del aplicativo web

Jonathan Andrés Navia

2 días

18 de junio de 2014

20 de junio 2014

Pasos completos para la utilización de Google Analytics https://support.google.com/a/answer/1180499?hl=es

El proceso para la utilización de Google Analytics puede tomar un día mientras recopila información por y se verifica que todo esté funcionando.

contenido Flash

No hay contenido flash que logra vincular texto, imágenes, sonidos e interacciones

Realizar nuestro propio contenido con las herramientas a nuestra disposición

con dreamweaver, flash, photoshop y ActionScript

Adriana MarcelaTovar Cuellar1.117.492.875

2 días

17 de junio de 2014

19 de junio de 2014

Los pasos a dar es elegir o crear las imágenes que queremos usar, retocarlas o mejorarlas en photoshop, hacer un tipo de animación para hacer la página más atractiva y crear etiquetas en dreamweaver e insertar la animación deseada;  le agregamos un lenguaje de programación (llamado ActionScript) integrado, tenemos un contenido flash.

Compatibilidad Se necesita Permitir que si se  Software Adriana 2 16 de 18 de junio Las plataformas de

Cross plataform

comprobar si el sitio es cruza en cualquier plataforma

accede a la intranet sin importar si utiliza Mac, linux o Window se puede acceder sin ningún inconveniente; también poder utilizar cualquier navegador (Firefox, Google Chrome, Safari, etc)

multiplataformaLos ejemplos de las plataformas de software incluyen:Android para teléfonos inteligentes y pcJava, Linux, BSDMac OS X (x86)Microsoft Windows (x86, ARM ), etc

MarcelaTovar Cuellar1.117.492.875

días junio de 2014

de 2014 software logran ser un sistema operativo o entorno de programación, aunque más comúnmente se trata de una mezcla de ambos

Velocidad Se usa un ancho de banda normal.

Determinar la velocidad de trasmisión de datos;Aumento de ancho de banda que permita tener mayor flexibilidad y acceso a la multimedia donde mejore la interacción del usuario.

Medir la velocidad del modem con test de velocidad, en una conexión en el host de velocidad del servicio de 10 Mbps

Adriana MarcelaTovar Cuellar1.117.492.875

5 días

16 de junio de 2014

21 de junio de 2014

La velocidad de transmisión de datos calcula el tiempo que tarda un host o un servidor en poner en la línea de transmisión el paquete de datos a enviar. El tiempo de transmisión se mide desde el momento en que se pone el primer bit en la línea hasta el último bit del paquete a transmitir.

CONCLUSIONES

Aprendimos a crear, diseñar, implementar, probar, analizar las pruebas de SEO y a dar mejoras para el sitio web para intranet corporativa de la Universidad UNAD de Colombia en su versión BETA, de un servidor local de prueba pasado a un Hosting gratuito. Además se genera un plan de mejoramiento que permita alcanzar los objetivos planteados para la creación del portal para la intranet que el caso hipotético de las necesidades que tiene la UNAD.

Puntos que debe tener el trabajo.

1. Para el desarrollo de este examen el grupo deberá usar como insumo el documento PDF entregado por parte del equipo colaborativo en la actividad Trabajo Colaborativo No. 3.

2. El grupo deberá verificar los resultados de las Pruebas o Test realizados al sitio web de la intranet diseñada para la Universidad UNAD de Colombia a lo largo del curso, este mismo fue diseñado y migrado al internet por parte el grupo a lo largo de las actividades colaborativas del curso.

3. El grupo realizara una discusión y un análisis de los resultados de las pruebas o test de la Actividad Colaborativa no. 3, se debe evidenciar en el foro de la actividad que existe una discusión y un análisis crítico por parte del grupo, a su vez se debe evidenciar que todos los miembros del equipo colaborativo participen.

4. De acuerdo a la discusión y análisis hecho por el grupo, se deberá construir un plan de mejoramiento para el sitio, en este se debe describir de forma técnica y con sustentos teóricos, los aspectos a mejorar en el sitio web frente a los resultados de las pruebas o test realizados en el trabajo colaborativo 3. En este plan de mejoramiento se debe hacer claridad sobre el elemento del sitio, la evaluación o test realizada para este y la propuesta de mejoramiento que el grupo plantea para este mismo.

NOTA: Todos los resultados que contengan observaciones en las pruebas o test del trabajo colaborativo 3, deben poseer una propuesta de mejoramiento dentro del plan de mejora que solicita el examen final en su guía.

5. El grupo consolidara por medio de un editor de texto, un documento con el plan de mejoramiento diseñado por el equipo.

BIBLIOGRAFÍA

(Aula virtual: Diseño de sitios webBiblioteca Virtual UNAD)

(http://bibliotecavirtual.unad.edu.co:2048/login)

(http://66.165.175.211/campus13_20141/mod/forum/view.php?id=1550)

(Wikipedia)

(www.colombiahosting.com )

(www.q_ingenieros-modelo-presupuesto )

(http://www.tecnicaseo.com/seo/tecnicas/meta-tag-keywords-posicionamiento)

(https://www.google.com.co/search?hl=es-CO&source=hp&biw=&bih=&q=logos&oq=logos&gs_l=firefox-hp.3..0l10.12126.13361.0.14100.5.5.0.0.0.0.267.980.0j2j3.5.0....0...1ac.1.34.firefox-hp..1.4.759.KBSryVNB1oc)

(http://www.youtube.com/user/codigofacilito )

(http://www.sav.us.es/formaciononline/creaciondesitiosWeb/apartados/apartado1-0.asp Creación proyecto Web) estructura navegación.

(http://docs.emmet.io/cheat-sheet/ Atajos programar en sublime)

(http://www.htmlya.com.ar/index.php?inicio=0)Composición HTML)

(http://www.w3.org/style . evolución CSS)

(http://getbootstrap.com/css/ Estilos elementos en HTML)

(www.flation.com Iconos HTML)

(www.youtube.com/watch?v=yJcoqOBklK4)

(www.cerotec.net/herramientas_online/)

(http://www.lawebera.es/diseno-web/optimizacion-de-imagenes-para-paginas-web.php)

Universidad Nacional Abierta y a Distancia UNAD. (2010).Modulo Diseños de páginas Web. Extraído el 6 de Junio de 2014 desde: http://66.165.175.253/campus06_20141/course/view.php?id=12