Bienvenidos

Optimizando Sitios Web

Rodrigo PoloIT Consultant & Web Developer

www.rodrigopolo.com

¿Qué son los estándares web?

• Contenido UTF8• XHTML• CSS• JavaScript• Flash

¿Qué Proponen?

Separar el contenido del diseño

Contenido indexable por buscadores

¿Cuál es el verdadero objetivo de los

estándares web?

The red pill or the blue pill?

The red pill or the blue pill?

• You take the blue pill and the story ends. You wake in your bed and believe whatever you want to believe.

• You take the red pill and you stay in Wonderland and I show you how deep the rabbit-hole goes.

The red pill or the blue pill?

Remember; all I am offering is the truth, nothing more.

Comunicación• Comprensible• Rápida• Eficiente• Rentable

W3C(World Wide Web Consortium)

W3C Validatorhttp://validator.w3.org

¡Sitios no estándar!

SitioGoogle.comApple.comMicrosoft.comYahoo

Errores652

17632

P:¿Por Qué?R:Prioridad a la Comunicación

Web 2.0 = Comunicación

• Twitter• Youtube• Facebook• Flickr

Prioridad de la Comunicación sobre el web

1. Optimización2. Estándar Web

Google - GmailQuirks mode

(No declaración de documento, tablas, poco amigable con buscadores, etc.)

Quirks mode=

< Bytes+ Rápido

NO usar Quirks Mode

¡Estándares Web con Buen Enfoque!

Optimización Web

Estándares Web mal aplicados

www.elcircodelrock.com(UTF8, XHTML, CSS, JavaScript, etc.)

3MB

3MBConexión256kbps512kbps

Tiempo1.36m.

48s.

Internet Móvil1KB x Q0.05

Internet Móvil

3MB = Q156.60sólo el home page

Error de Validacón

UTF8 Mal aplicado

Problemas Actuales

• Blogs infinitos• Comentarios infinitos• Divs en vez de Tablas • Muchos Archivos CSS y JS• Contenido JavaScript

Verdadero Estándar Web (2.0)

¡Optimización!

HerramientasIndispensablespara BUENOS Webmasters

www.mozilla.com

www.getfirebug.com

http://developer.yahoo.com/yslow/

YSlow

http://tinyurl.com/devetool

Web Developer

http://tinyurl.com/yuicomphttp://yui.2clics.net

YUI Compressor

Optimizando

1) Pocas Peticiones

• Unificar JavaScript• Unificar CSS• Integrar imágenes• Ajax

2) Minificación de JS y CSS• Proceso por el cual se remueven todos los

caracteres del código fuente sin cambiar su funcionalidad, estos caracteres innecesarios usualmente son espacios en blanco, retorno de carrete, comentarios y en ocasiones delimitadores de bloque; Son usados para obtener lectura humanamente comprensible del código e innecesarios para su ejecución.

3) Menos Frameworks

• Explotar todas las capacidades de un sólo frame work

• Buscar Plugins• Google.com - it

.httaccess en Apache

4) Compresión de contenidos5) Expiración de archivos6) Eliminación de Etags

4) Contenido Compreso

<ifmodule mod_deflate.c> AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript

</ifmodule>

5) Expiración

<IfModule mod_expires.c>ExpiresActive OnExpiresDefault "access plus 6 months"ExpiresByType text/css "access plus 6 months"

ExpiresByType text/javascript "access plus 6 months"

</IfModule>

• Manejo de versión en nombre de archivos

5) Expiración

mootools-1.2.1.js

jquery-1.3.2.js

sctipt-1.3.r4.js

6) Eliminación de Etags

FileETag none

7) Contenido

• El usuario es humano• Menos es MÁS• Una imagen = Mil palabras• Íconos

7) Contenido

7) Contenido

7) Contenido

8) Contenido Alterno

• Flash• Quicktime• Windows Media• JavaScript

<object width="800" height="600">

<param name="movie" value="flash.swf" />

<p>Contenido alterno</p></object>

8) Contenido Alterno

<script type="text/javascript">

$(document)…

</script>

<noscript>

<p>Contenido alterno</p></noscript>

8) Contenido Alterno

9) Flash

Flash es Excelente Para:• Hotsites• Aplicaciones Multimedia• Video• Juegos• 3D• Presentación de Producto• Banners y Publicidad

Flash NO se debe usar en:

• Remplazo completo de un site• Remplazo de un menú de

navegación de un sitio• Única entrada a un site• Única solución para galerías• Única solución para video

10) Friendly URLs

http://site.org/?cat=libros&pag=1

http://site.org/libros/1

11) Paginación

• Comentarios• Blogs• Categorías• Etc.

12) Web Móvil

• Detección de plataforma• Eliminación de contenido no

HTML• Reducción de contenido

(… [leer artículo completo])

Inventando el agua azucarada

• Wordpress– Permalinks– WPTouch Plugin

• Joomla– Joomla SEF Plugin– PDA-plugin

Últimas Notas

Usen lo que sea necesario según la ocasión

• Tablas HTML para datos, Divs para layout• El estándar es mantener la comunicación en

cualquier medio• Pregúntense a sí mismos que desean

comunicar, con eso encontraran el estándar que necesitan

Traten de cumplir con los estándares, sin sacrificar la optimización

Apple en relación a Ajax:…Microsoft implementó el objeto “XMLHttpRequest” (Ajax) en Internet Explorer 5 para Windows, Los ingenieros de Mozilla implementaron una versión compatible en Mozilla 1.0 (y Netscape7), Apple ha hecho lo mismo desde Safari 1.2…

…Existe una funcionalidad similar propuesta por W3C, el “DOM Load and Save”, sin embargo a causa del creciente soporte al objeto “XMLHttpRequest” ha hecho que éste se vuelva un estándar por defecto por lo que será utilizado en Safari como el estándar a pesar de las especificaciones del W3C… (Actualizado: 2005-06-24)

http://tinyurl.com/applajax

Traten de cumplir con los estándares, sin sacrificar la optimización

Actualmente el W3C sigue discutiendo la adaptación del estándar del objeto “XMLHttpRequest”, sin

embargo este objeto es la solución por defecto, ya que es más rápido, más compatible y más eficiente que el “DOM Load and Save” que propuso el W3C al inicio.

¡Lo más importante!

En todas las carreras relacionadas al Web y a la tecnología se debe ser autodidacta, de lo contrario no se puede estar

al día y ser competitivo.

Un amigo que puede resolver tus inquietudes o asistir a cursos y conferencias es bueno, pero el conocimiento allí queda; el Web puede enseñarte TODO lo que necesitas

saber con un sólo clic y te mantiene actualizado SIEMPRE.

¡Toda la información contenida en este documento salió del web! :)

¿Preocupados por la Economía?

Ahorro en Educación WebLibro GRATUITO Completo de Guía de SEO(Search engine optimization o Posicionamiento en buscadores):http://tinyurl.com/guiaseo

Libro GRATUITO Guía Wordpresshttp://tinyurl.com/wp-manual

Excelente Libro GRATUITO de Diseño Web Inteligente(Improving Interface Design)http://tinyurl.com/uidesign

Ahorro en Educación Web

Cursos XHTML, CSS, XML, JavaScript, AJAX, SQL, ASP, ADO, PHP, .NET ASP, Flash, Web Building, Web Browsers y Web Hosting.http://w3schools.com

Buscador de bookmarks popularesIdeal para buscar lo que otros consideran relevantehttp://delicious.com

Ahorro en Educación Web

Video Tutorial XHTML-CSS (en HD)http://espractico.com

Video Web2.0 (The Machine is Us)http://tinyurl.com/web20vdo

Entendiendo la Web 2.0 (RSS, Wikis, Social Networks)http://tinyurl.com/web20en

Ahorro en Educación Web

¡Todo el mundo del conocimiento en tus manos!www.google.com - www.wikipedia.org

Copia de este documento y video de la presentaciónhttp://rodrigopolo.com/barcamp09

¿Les Gustó?

¿Les Gustó?

¡Inviten al conferencista a una Coca!

¿Preguntas?