Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
GESTIÓN DE UN SITIO
  WEB CON ÉXITO




              José Román Hernández
             JoseRomanHernandez@gmail.com
     ...
Objetivos

Idea:
Partir de un concepto sencillo.
Ejemplo: Twitter, Spotify...


Demanda:
Si es posible, buscar una necesid...
Errores comunes

Dinero:
Crear un sitio o negocio web sólo y
exclusivamente para ganar dinero.

Originalidad:
Partir de co...
Todos hemos sido novatos




       La máquina del tiempo de Internet: Ver
       versiones antiguas de páginas web actual...
Estructura ideal




Famoso concepto “separar presentación del contenido”.


  Independencia ante modificaciones de códig...
Bases de datos

        Normalización de base de datos
            Evitar datos repetidos
            Contradicciones e...
Motor

  Optimizar código
      Evitar operaciones inútiles
      Reducir complejidad

  Incluir sólo código necesario...
Idea generalizada de lo que es un
Blogger, Webmaster o Emprendedor
Idea generalizada de lo que es un
Blogger, Webmaster o Emprendedor




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




  ANTES                AHORA
Presentación (Estructura)


             Validar HTML (Código estándar)
                  Limpieza y tamaño HTML
       ...
Presentación (Estructura)




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


            Incluir ficheros CSS en la parte superior
            Agrupar imágenes frecuente...
Presentación (Interactividad)

             Incluir JS en ficheros externos

             Colocar JS al final de la pági...
Preparación ante las críticas




                          Autor: J.R.Mora
Comunicación con cliente


             Compresión “al vuelo” Gzip
                 mod_gzip (Apache 1.3)
              ...
Sistema antispam




 Más información: Sistema antispam con CSS oculto
Usabilidad y Accesibilidad




 Facilidad de uso                 Accesible para todos
     Búsqueda visible            ...
Créditos
Iconos:
 StudioMx (Earth)
 WebDesigner Depot (Bulb, Puzzle, Dolar)
 Everaldo (Error, Tetris, User, ok)
 Oxyge...
Gestión web con éxito
Upcoming SlideShare
Loading in …5
×

Gestión web con éxito

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.

  • Login to see the comments

Gestión web con éxito

  1. 1. GESTIÓN DE UN SITIO WEB CON ÉXITO José Román Hernández JoseRomanHernandez@gmail.com http://www.emezeta.com/
  2. 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. 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. 4. Todos hemos sido novatos La máquina del tiempo de Internet: Ver versiones antiguas de páginas web actuales.
  5. 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. 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. 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. 8. Idea generalizada de lo que es un Blogger, Webmaster o Emprendedor
  9. 9. Idea generalizada de lo que es un Blogger, Webmaster o Emprendedor ANTES
  10. 10. Idea generalizada de lo que es un Blogger, Webmaster o Emprendedor ANTES AHORA
  11. 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. 12. Presentación (Estructura) Uso de navegadores en España (Fuente: Global StatCounter)
  13. 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. 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. 15. Preparación ante las críticas Autor: J.R.Mora
  16. 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. 17. Sistema antispam Más información: Sistema antispam con CSS oculto
  18. 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
  19. 19. 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)

×