Optimizacion de sitios web by Miguel Najera

Festival Latinoamericano de Instalación de Software Libre



FLISOL UTEC2009 Optimización de Sitios Web

Optimización de Sitios Web ●

●

Estructuración de Sitios Web –

Reconocimiento del Entorno de Trabajo

–

Mejorando el Rendimiento del Servidor

–

Organizando Carpetas y Archivos

Estructura de un documento HTML –

Meta tag de inicio, etiquetas de cabecera y cuerpo del Documento y cuerpo del documento HTML

–

Separación de Código

–

Peso de una página en un sitio web

Optimización de Sitios Web ●

Herramientas Útiles –

Software (IDES de Desarrollo)

–

Frameworks (Entornos de Trabajo)

–

CMS (Sistemas de Gestión de Contenido)

Optimización de Sitios Web - Estructuración de Sitios Web ●

Estructuración de Sitios Web

Al momento de diseñar sitios web es muy importante definir la estructura y el flujo de la navegación que tendrá nuestro sitio. Estructuración, se refiere al proceso de identificar la forma que tendrá el Sitio Web que se está desarrollando. Una buena estructura permitirá al lector visualizar todos los contenidos de una manera fácil y clara, mientras que un conjunto de páginas web con una mala estructura producirá en el lector una sensación de estar perdido, no encontrará rápidamente lo que busca y terminará por abandonar nuestro sitio. Planifique la estructura antes de empezar.

Optimización de Sitios Web - Estructuración de Sitios Web ●

●

La estructura de un sitio web depende del contenido Existen varios tipos de estructura por ejemplo: –

Estructura Secuencial o Lineal; es la forma más simple de organizar la información, la información que fluye de forma natural como cómo una narrativa lineal o con un orden lógico.

–

Esta estructura se utiliza en tareas de navegación o interacción en las que es necesario que el usuario complete cada uno de los pasos ordenadamente (carrito de compra, registro como usuario,...)

Optimización de Sitios Web - Estructuración de Sitios Web –

Estructura hipertextuales; es una estructura en la cual las páginas se enlazan por similitud o relación directa entre los contenidos, permite al usuario visualizar una página y 'saltar' hacia otras que le puedan interesar.

–

Este tipo de estructura, si bien ofrece mayor libertad y dinamismo a la navegación puede ocasionar desorientación, provocando que el usuario se sienta 'perdido'. Además, hay que tener precaución para que ninguna página quede excesivamente descolgada o de difícil acceso.

Optimización de Sitios Web - Estructuración de Sitios Web –

Estructuras jerárquicas; probablemente la jerárquica es la estructura de información más común.

–

Proporcionan mas flexibilidad y esca labilidad para la organización de grandes cantidades de páginas, y por otro lado resulta muy orientada al usuario en su navegación.

–

En este tipo de estructuras hay que intentar mantener un equilibrio entre ancho y profundidad de la jerarquía. Jerarquías muy profundas pueden provocar que las páginas finales queden muy distanciadas de la página origen, y por tanto de difíciles de recuperar o encontrar. Por otro lado, jerarquías muy anchas pueden desorientar y confundir al usuario.

Optimización de Sitios Web - Estructuración de Sitios Web –

Estructuras mixta; Los estudios de "funcionalidad" indican que los usuarios recuerdan mejor la información con este tipo de estructura (jerárquica con enlaces cruzados del tipo estructura Web), puesto que la estructura jerárquica resulta demasiado restrictiva y la no lineal ofrece demasiada información y lleva a la confusión.

Optimización de Sitios Web - Estructuración de Sitios Web Jacob Nielsen nos da las dos reglas más importantes sobre la estructura de un sitio web: 1.- Puede parecer obvia pero no lo es: tener una estructura y conseguir que refleje el contenido de sitio y sus relaciones. 2.- La estructura no debe reflejar en ningún caso la organización de su compañía. Al usuario no le interesa su organización sino su Web. La estructura debe determinarse por las tareas, incluso si eso significa que varios departamentos tienen que colaborar para realizar un sólo documento. http://es.wikipedia.org/wiki/Jakob_Nielsen

Optimización de Sitios Web - Reconocimiento del Entorno de Trabajo El reconocimiento de entorno de trabajo, se refiere a saber identificar con que tipo de servidor contamos: ● ¿Cual es su tecnología? ● ¿Cual es su capacidad, procesador, memoria y tamaño de disco duro? ● ¿Cual es su Sistema Operativo? ● ¿Cual es el ancho de banda o enlace con el que disponemos ? ● ¿Cual es nuestro Web Server que esta instalado? Y todas esas cosas que nos servirán para trazar una plan de acción para mejorar el rendimiento de nuestro Sitio Web. En ambientes MS-Windows podemos utilizar Free-PC-AUDIT, para auditoria y diagnostico del servidor o nuestra pc. ● http://www.misutilities.com/free-pc-audit/index.html

Optimización de Sitios Web - Reconocimiento del Entorno de Trabajo En ambientes Unix/Linux Basta con ser usuario root o tener un algún usuario con suficientes privilegios para poder y revisar alguno archivos que se encuentran en el directorio /proc ● cpuinfo ● meminfo ● swaps Y usar algún comando como: ● # df -h, comando que nos da un listado de filesystem asociados a discos duros su capacidad, espacio disponible, utilizado y otro tipo de información Para monitoreo del trafico de nuestro sitio ● AWSTAT http://awstats.sourceforge.net/ ● MRTG (Multi Router Traffic Grapher(http://oss.oetiker.ch/mrtg/) Sitios que ofrecen la medición y estadísticas del trafico de nuestros sitios ● ●

http://www.sitemeter.com/ http://www.google.com/analytics/

Optimización de Sitios Web - Mejorando el Rendimiento del Servidor Teniendo la información del entorno de trabajo de nuestro servidor web, podemos diseñar un plan de acción con el fin de logran el tan ansiado “mejoramiento del rendimiento” En realidad no hay una formula efectiva que nos asegure que los cambios que hagamos nos den resultados definitivos, pero si podemos llegar a obtener buenos resultados con los siguientes consejos:

Optimización de Sitios Web - Mejorando el Rendimiento del Servidor ●

●

Tratar de encontrar el balance entre PROCESADOR-RAM-DISCO DURO Tener un monitoreo constante del trafico de visitas a nuestro sitio

●

Optimizar las consultas SQL.

●

Limitar la memoria RAM que usa PHP

●

Utilizar cache en los scripts

●

Habilitar la compresión Gzip

●

Evitar poner imágenes de gran peso

Optimización de Sitios Web - Mejorando el Rendimiento del Servidor ●

Puedes auxiliarte de sitios que ofrecen herramientas gratuitas de análisis de carga de tu sitio web por ejemplo: –

Websiteoptimization

–

http://www.websiteoptimization.com/services/analyze/

–

Pingdom

–

http://tools.pingdom.com/

Optimización de Sitios Web - Organizando Carpetas y Archivos Ahora vamos a ocuparnos de la estructura física, de la organización interna de los directorios o carpetas y archivos o documentos. Es aconsejable crear una estructura de directorios para dividir la información de acuerdo con las secciones y subsecciones del sitio. Si nuestro sitio web es muy grande, es posible que se haga necesario subdividir aún más los directorios de imágenes, creando un directorio para cada sección de la página web.

Optimización de Sitios Web - Estructura de un Documento HTML ●

●

Un documento HTML 4 se compone de tres partes: Una línea que contiene información sobre la versión de HTML, Una sección de cabecera declarativa (delimitada por el elemento HEAD), Un cuerpo, que contiene el contenido real del documento. El cuerpo puede ser especificado mediante el elemento BODY o mediante el elemento FRAMESET. Las secciones 2 y 3 deberían estar delimitadas por el elemento HTML.

Aquí tenemos un ejemplo de un documento HTML sencillo: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>Mi primer documento</TITLE> </HEAD> <BODY> <P>¡Hola mundo!</P> </BODY> </HTML>

Optimización de Sitios Web - Meta tag de inicio, etiquetas de cabecera y cuerpo del Documento ●

Meta tag de inicio

contiene información sobre el documento actual, como el título, palabras clave que pueden ser de utilidad para motores de búsqueda, y otros datos que no se consideran parte del contenido del documento. ●

Tag Importantes para los crawlers

Optimización de Sitios Web - Meta tag de inicio, etiquetas de cabecera y contenido del Documento ●

Etiquetas de cabecera

Las etiquetas de cabecera (no confundirse con la etiqueta HTML <head> o las cabeceras HTTP) se utilizan para ofrecer la estructura de una página a los usuarios. Hay seis tamaños de etiquetas de cabecera, empezando con <h1>, la más importante, y terminando con <h6>, la de menor importancia.

Evita: ● colocar texto en las etiquetas de cabecera que no ayudaría a definir la estructura de la página. ● usar las etiquetas de cabecera cuando otras etiquetas como <em> y <strong> puedan ser más adecuadas. ● cambiar de un tamaño de cabecera a otro sin ninguna lógica ● el uso excesivo de las etiquetas de cabecera en las páginas. ● poner todo el texto de una página en una etiqueta de cabecera. ● usar las etiquetas de cabecera para darle formato a un texto y no para presentar la estructura de la página.

Optimización de Sitios Web - Meta tag de inicio, etiquetas de cabecera y contenido del Documento ●

Contenido del Documento

Crear contenido interesante para un sitio es probablemente lo que mas influye en el establecimiento de un sitio exitoso. ● Consejos: ● Escribe textos de fácil lectura. ● Céntrate en un tema especifico, dale identidad a tu sitio ● Usa un lenguaje adecuado. ● Crea contenido único y original ● Ofrece contenido y servicios exclusivos ● Crea contenido principalmente para los usuarios, no para los motores de búsqueda. ● Escribe links o enlaces de calidad

Optimización de Sitios Web - Separación de Código Hay varios motivos que fundamentan por qué es vital separar el HTML/XHTML, el CSS y el código JavaScript. Estos tipos de código tienen objetivos muy diferentes, y cómo usarlos debe ser pensado con cuidado.

Razones principales para la separación ●

●

Velocidad: los archivos externos .css y .js se guardan en el caché del navegador del usuario después de la primera carga, esto disminuye los tiempos de carga y mejorará la experiencia de uso. Claridad: es más fácil saber donde buscar y colocar el código, cada parte cumple su propio objetivo. Reusabilidad: puede fácilmente comentar y referenciar el codigo. Y reutilizarlo en todo el sitio. Mantenimiento: El código HTML o XHTML está en una ubicación central, y se desprende el código de presentación (css) e interaccion (js) en archivos externos. Siendo muy fácil aplicarlos a todas las páginas del sitio.

Optimización de Sitios Web - Peso de una página en un sitio web De forma general y tomando como referente el código HTML el peso de una página en la que su contenido total es solo texto, sin incluir imagines y otro contenido multimedia, debería de ser no menos de 100k o 101k como lo dice el “Manual de Posicionamiento Web”, que forma parte de la documentación que GOOGLE, proporciona a webmaster y SEOS que están interesados en el tema de “Posicionamiento Web”

Consejos: ●

●

Intenta que tus páginas no tengan excesivo 'peso' Si puede el peso aproximadamente ideal para una página debería de ser de 30k o menos. Evita poner imaginas que sobre pasen los 20k Evita el uso excesivo de código javascript, css y de archivos flash embebidos en los documentos html

Optimización de Sitios Web - Herramientas útiles ●

Software (IDES de Desarrollo) –

DreamWeaver, cualquier versión ó

–

Amaya - Open Source, excelente IDE que tiene grandes cualidades (http://www.w3.org/Amaya/).

–

PhpDesigner 2008 ó Eclipse – PDT, excelente extensión para el ya famoso Eclipse que permite el depurador de código en tiempo de ejecución, marcado de sintaxis y otras características (http://www.eclipse.org/pdt/).

–

Si lo que se necesita es escribir solo código se puede utilizar:

–

notpad++ (http://notepad-plus.sourceforge.net/es/site.htm)

–

Pspad (http://www.pspad.com/es/)

–

Y el gEdit (http://projects.gnome.org/gedit/)

Optimización de Sitios Web - Herramientas útiles ●

Frameworks (Entornos de Trabajo)

Un framework, en el desarrollo de software, es una estructura de soporte definida, mediante la cual otro proyecto de software puede ser organizado y desarrollado,puede incluir soporte de programas, bibliotecas y un lenguaje interpretado entre otros software de desarrollo y unir los diferentes componentes de un proyecto. –

JPolite es un muy liviano framework portal que utiliza jQuery para crear una interfaz similar a Netvibes. Es sólo HTML puro con los enlaces a la biblioteca jQuery. (http://www.trilancer.com/jpolite/#t1)

–

EXT JS es un framework Javascript diseñado para construir aplicaciones de Internet (RIA), basta sólo con examinar las demostraciones que hay en su sitio, para ver las potentes opciones que este ofrece. (http://extjs.com/)

–

CakePHP, es un framework para PHP basado en el patrón de diseño MVC(Model View Controller). http://cakephp.org/

–

Symfony, es otro framework para PHP basado en MVC ( http://www.symfony-project.org/)

–

Spring, es un framework para JAVA (http://www.springsource.org/)

–

Ruby on Rails es un framework para desarrollo de aplicaciones web escrito en el lenguaje de programación Ruby (http://rubyonrails.org/)

Optimización de Sitios Web - CMS (Content Management System) ●

Sistemas de Gestión de Contenido

Un Sistema de gestión de contenidos (Content Management System en inglés, abreviado CMS) es un programa que permite crear una estructura de soporte (framework) para la creación y administración de contenidos, principalmente en páginas web, por parte de los participantes, entre ellos se puede destacar los siguientes: ●

JOOMLA CMS (http://www.joomla.org/)

●

DRUPAL CMS (http://drupal.org/)

●

WORDPRESS (http://drupal.org/)

●

PLONE (http://plone.org/)

●

WIKIMEDIA (http://www.mediawiki.org/wiki/Installation)

●

MOODLE (http://moodle.org/)