Una presentación que pretende despertar en el mundo real del web actual.

1. Bienvenidos

2. Optimizando Sitios Web
Rodrigo Polo
IT Consultant & Web Developer
www.rodrigopolo.com

3. ¿Qué son los estándares web?
• Contenido UTF8
• XHTML
• CSS
• JavaScript
• Flash

4. ¿Qué Proponen?

5. Separar el contenido
del diseño

6. Contenido indexable
por buscadores

7. ¿Cuál es el verdadero
objetivo de los
estándares web?

8. The red pill or the blue pill?

9. 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.

10. The red pill or the blue pill?
Remember; all I am offering is the truth,
nothing more.

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

12. W3C
(World Wide Web Consortium)

13. W3C Validator
http://validator.w3.org

14. ¡Sitios no estándar!
Sitio Errores
Google.com 65
Apple.com 2
Microsoft.com 176
Yahoo 32

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

16. Web 2.0 = Comunicación
• Twitter
• Youtube
• Facebook
• Flickr

17. Prioridad de la Comunicación
sobre el web
1. Optimización
2. Estándar Web

18. Google - Gmail
Quirks mode
(No declaración de documento, tablas, poco
amigable con buscadores, etc.)

19. Quirks mode
=
< Bytes
+ Rápido

20. NO usar Quirks Mode

21. ¡Estándares Web con Buen Enfoque!
Optimización Web

22. Estándares Web mal aplicados
www.elcircodelrock.com
(UTF8, XHTML, CSS, JavaScript, etc.)

23. 3MB

25. 3MB
Conexión Tiempo
256kbps 1.36m.
512kbps 48s.

26. Internet Móvil
1KB x Q0.05

27. Internet Móvil
3MB = Q156.60
sólo el home page

28. Error de Validacón
UTF8 Mal aplicado

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

30. Verdadero Estándar
Web (2.0)

31. ¡Optimización!

32. Herramientas
Indispensables
para BUENOS
Webmasters

33. www.mozilla.com

34. www.getfirebug.com

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

36. Web Developer
http://tinyurl.com/devetool

37. YUI Compressor
http://tinyurl.com/yuicomp
http://yui.2clics.net

38. Optimizando

39. 1) Pocas Peticiones
• Unificar JavaScript
• Unificar CSS
• Integrar imágenes
• Ajax

40. 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.

41. 3) Menos Frameworks
• Explotar todas las capacidades
de un sólo frame work
• Buscar Plugins
• Google.com - it

42. .httaccess en Apache
4) Compresión de contenidos
5) Expiración de archivos
6) Eliminación de Etags

43. 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>

44. 5) Expiración
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault quot;access plus 6 monthsquot;
ExpiresByType text/css quot;access plus 6
monthsquot;
ExpiresByType text/javascript quot;access plus
6 monthsquot;
</IfModule>

45. 5) Expiración
• Manejo de versión en nombre
de archivos
mootools-1.2.1.js
jquery-1.3.2.js
sctipt-1.3.r4.js

46. 6) Eliminación de Etags
FileETag none

47. 7) Contenido
• El usuario es humano
• Menos es MÁS
• Una imagen = Mil palabras
• Íconos

48. 7) Contenido

49. 7) Contenido

50. 7) Contenido

51. 8) Contenido Alterno
• Flash
• Quicktime
• Windows Media
• JavaScript

52. 8) Contenido Alterno
<object width=quot;800quot; height=quot;600quot;>
<param name=quot;moviequot; value=quot;flash.swfquot; />
<p>Contenido alterno</p>
</object>

53. 8) Contenido Alterno
<script type=quot;text/javascriptquot;>
$(document)…
</script>
<noscript>
<p>Contenido alterno</p>
</noscript>

54. 9) Flash

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

56. 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

57. 10) Friendly URLs
http://site.org/?cat=libros&pag=1
http://site.org/libros/1

58. 11) Paginación
Comentarios
•
Blogs
•
Categorías
•
Etc.
•

59. 12) Web Móvil
• Detección de plataforma
• Eliminación de contenido no
HTML
• Reducción de contenido
(… [leer artículo completo])

60. Inventando el agua azucarada
• Wordpress
– Permalinks
– WPTouch Plugin
• Joomla
– Joomla SEF Plugin
– PDA-plugin

61. Últimas Notas

62. 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

63. 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

64. 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.

65. ¡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! :)

66. ¿Preocupados por la Economía?

67. Ahorro en Educación Web
Libro GRATUITO Completo de Guía de SEO
(Search engine optimization o Posicionamiento en buscadores):
http://tinyurl.com/guiaseo
Libro GRATUITO Guía Wordpress
http://tinyurl.com/wp-manual
Excelente Libro GRATUITO de Diseño Web Inteligente
(Improving Interface Design)
http://tinyurl.com/uidesign

68. 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 populares
Ideal para buscar lo que otros consideran relevante
http://delicious.com

69. 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

70. Ahorro en Educación Web
¡Todo el mundo del conocimiento en tus manos!
www.google.com - www.wikipedia.org

71. Copia de este documento y video de la presentación
http://rodrigopolo.com/barcamp09

72. ¿Les Gustó?

73. ¿Les Gustó?
¡Inviten al conferencista a una Coca!

74. ¿Preguntas?