Presentación de la desconferencia de José Román Hernández Martín ( Emezeta blog ) sobre desarrollo y gestión web para la Descon2 de Tenerife LAN Party 2009.

1. GESTIÓN DE UN SITIO
WEB CON ÉXITO
José Román Hernández
JoseRomanHernandez@gmail.com
http://www.emezeta.com/

2. Objetivos
Idea:
Partir de un concepto sencillo.
Ejemplo: Twitter, Spotify...
Demanda:
Si es posible, buscar una necesidad y dominarla.
Ejemplo: Comunicarse, Escuchar música…
Rendimiento:
Conseguir que el proyecto tenga éxito.
Ejemplo: Usabilidad, Marketing, SEO…

3. Errores comunes
Dinero:
Crear un sitio o negocio web sólo y
exclusivamente para ganar dinero.
Originalidad:
Partir de conceptos ya existentes.
No ser original y revolucionario.
Usuario:
No pensar en el cliente final del producto.
Usabilidad, Utilidad y ¿por qué no? Accesibilidad.

4. Todos hemos sido novatos
La máquina del tiempo de Internet: Ver
versiones antiguas de páginas web actuales.

5. Estructura ideal
Famoso concepto “separar presentación del contenido”.
 Independencia ante modificaciones de código
 Independencia de la tecnología utilizada
 Modularidad ante migraciones

6. Bases de datos
 Normalización de base de datos
 Evitar datos repetidos
 Contradicciones en los datos
 Consultas SQL lentas
 Utilizar mysql_slow_queries
 Consultas sin buffer
 Ahorro memoria
 Rapidez: Inicio en fila #1
 Optimizing MySQL (Jesse Farmer)
 Índices, Dividir tablas, etc.

7. Motor
 Optimizar código
 Evitar operaciones inútiles
 Reducir complejidad
 Incluir sólo código necesario
 Include / Require
 Include_once / Require_once
 Niveles de error (error_reporting)
 Uso de isset()
 Referencia PHP: PHP Cheat Sheet

8. Idea generalizada de lo que es un
Blogger, Webmaster o Emprendedor

9. Idea generalizada de lo que es un
Blogger, Webmaster o Emprendedor
ANTES

10. Idea generalizada de lo que es un
Blogger, Webmaster o Emprendedor
ANTES AHORA

11. Presentación (Estructura)
 Validar HTML (Código estándar)
 Limpieza y tamaño HTML
 Compatibilidad navegadores y SO
 SEO o Posicionamiento
 Título
 Descripción META
 H1 o textos alternativos
 META Canonical
 Enlaces nofollow
 Mapas de sitio / Sitemaps
 Google webmaster tools
 Yahoo site explorer
 Bing webmaster

12. Presentación (Estructura)
Uso de navegadores en España (Fuente: Global StatCounter)

13. Presentación (Apariencia)
 Incluir ficheros CSS en la parte superior
 Agrupar imágenes frecuentes
 DataURL
 Mapas de imagen
 CSS Sprites (SpriteGen)
 Optimizar imágenes
 PNG: OptiPNG
 JPG: jpegtran
 No escalar imágenes con HTML o CSS
 Utilizar subdominios paralelos

14. Presentación (Interactividad)
 Incluir JS en ficheros externos
 Colocar JS al final de la página (/body)
 Evitar bloqueo navegadores
 Google Analytics
 Ofuscar o minimizar CSS / JS
 JSPacker
 JUICompressor
 JSMinify
 Proporcionar alternativas sin JS
 Tag noscript
 Accesibilidad

15. Preparación ante las críticas
Autor: J.R.Mora

16. Comunicación con cliente
 Compresión “al vuelo” Gzip
 mod_gzip (Apache 1.3)
 mod_deflate (Apache 2.0)
 Cachear contenidos
 Client-side: Utilizar Expiración
 Server-side: Utilizar ETag
 Server-side: Contenido estático
 Consejos webmaster
 Emezeta Rank
 Google webmasters blog
 Let's make the web faster

17. Sistema antispam
Más información: Sistema antispam con CSS oculto

18. Usabilidad y Accesibilidad
 Facilidad de uso  Accesible para todos
 Búsqueda visible  Independiente del javascript
 Opción de contacto  Independiente del sistema op.
 Logotipo para ir al home  Independiente del navegador
 Uso de tabindex en forms  Dispositivos móviles
 Ayuda / FAQ  Discapacidades físicas
Más información: Usabilidad y Accesibilidad

20. Créditos
Iconos:
 StudioMx (Earth)
 WebDesigner Depot (Bulb, Puzzle, Dolar)
 Everaldo (Error, Tetris, User, ok)
 Oxygen Team (BDD, Write, Zip, Paper)
 NewMoon (XML)
 DryIcons (Paint)
 Morcha (IE, Firefox, Chrome, Safari)
 Abdylas Tynyshov (Arrow green)
 Narjisnaqvi (Social icons)
Imágenes:
 J.R.Mora (Papá Gurú)
 Nerd (Barry Rudolph)
 Guiguis (Checking mail)
Documentos:
 Best practices for speeding up your website (Yahoo)
 Directrices para webmasters (Google)
 Let's make the web faster (Google)
 Image Optimization for web (Stoyan Stefanov)
 50 CSS techniques (Smashing Magazine)
Páginas recomendadas:
 Google webmasters blog (Google)
 Foro Xeoweb (Posicionamiento y buscadores)