18/1/2014

Anatoma de la Pgina web Perfecta - Hit Reach

Call: +44 (0) 808 22 444 22 Email: info@hitreach.co.uk

Blog

Home

About

Services

Our Work

Clients

Testimonials

WP Plugins

Resources

Contact

Blogging

You are here: Home / The Anatomy of a Perfect Web Page / Anatoma de la Pgina web Perfecta

Anatoma de la Pgina web Perfecta

18
Share

173
Compartir

35
Like

60
Tw eet

Anatoma de la Pgina web Perfecta (edicin de 2013) es diseado con el fin de presentarte un resumen, una introduccin y recursos ms completos para cada elemento que forma parte de la pgina web perfecta. Dado que el diseo web, la experiencia de usuario, el SEO, la optimizacin de la tasa de conversin y muchas otras actividades se mezclan cada vez ms, tienes que saber cmo todos los elementos de una pgina forman el xito de t sitio web, sea lo que sea t papel en el proceso. Tambin es importante que conozcas los vnculos que existen entre todos estos elementos. Cada seccin es corta y fcil de entender. En esta presentacin se encuentran numerosos enlaces hacia otros sitios web que incluyen recursos exhaustivos y de alta calidad para que puedas aprender ms sobre cada elemento. Esperamos que os guste!

http://www.hitreach.co.uk/perfect-web-page/anatomia-de-la-pagina-web-perfecta/#t5_

1/13

18/1/2014

Anatoma de la Pgina web Perfecta - Hit Reach

Diseo & Contenido

01

Llamadas a la accin

02

Posicionamiento interno

03

Marcado

04

05
Cdigo
Tiempos de carga Compresin de imgenes Responsive design HTML5 CSS3

Titular Navegacin Contenido Legibilidad Web Fonts Imgenes Sellos de confianza Migas de pan Videos

Llamada a la accin principal Botones para compartir de las redes sociales Llamadas a la accin secundarias Venta cruzada & Up-selling

Arquitectura del sitio web Estructura de la URL Etiqueta Title Etiqueta Meta Description Etiquetas Header Enlaces contextuales Atributo Alt

Authorship markup Schema.org Migas de pan Markup Atributo Rel=canonical Protocolo Open Graph

05 / Cdigo

Pie de pgina

de Un cdigo limpio y bien organizado no Alojamiento 01 Diseo & Contenido videos &/Mapa slo es importante para tus usuarios, del sitio sino que es tambin un factor de 02 / sitio Llamadas a la accin Mapa del ranking para Google. el buscador 03 / Posicionamiento interno otorga una gran importancia a los tiempos de carga rpidos porque 04 / Marcado contribuyen en mejorar la experiencia de usuarios. Le gustar t sitio web a 05 / Cdigo los usuarios y a los bscadores si es rpido, claro y que satisface las necesidades de los usuarios. Existen numerosos mtodos para aumentar la velocidad de t sitio. Puedes realizar la mayora de ellos por ti-mismo con mdulos y plugins. Adems,testear y mejorar los resultados resulta facilsimo .

1 Tiempos de carga

http://www.hitreach.co.uk/perfect-web-page/anatomia-de-la-pagina-web-perfecta/#t5_

2/13

18/1/2014

Anatoma de la Pgina web Perfecta - Hit Reach

La velocidad de t sitio constituye un factor de ranking en Google desde septiembre de 2010. Existen muchas herramientas que puedes utilizar para medir la velocidad de las pginas de t sitio web entre ellas Web Page Test. Google tambin tiene su propia herramienta PageSpeed que puedes utilizar online o instalar como plugin de Chrome o Firefox. Este proceso puede resultar laborioso pero depende de t experienca tcnica y del nivel de control que tienes en t sitio. Sin embargo, hay resultados rpidos que la mayora de los webmasters pueden conseguir fcilmente . Si, por ejemplo, ests en un servidor Apache, puedes utilizar el mdulo de Google modpagespeed que aumenta la velocidad de t sitio web y reduce el tiempo de carga de las pginas web y aplica a las pginas automticamente las mejores prcticas de los rendimientos web as como ventajas asociadas (CSS, JavaScript, imgenes) sin que tengas que cambiar
http://www.hitreach.co.uk/perfect-web-page/anatomia-de-la-pagina-web-perfecta/#t5_ 3/13

18/1/2014

Anatoma de la Pgina web Perfecta - Hit Reach

el contenido existente o t flujo de trabajo. Puedes reducir el tiempo de espera y la latencia al evitar las redirecciones de servidores y al aadir ventajas a t sitio con un Content Delivery Network (CDN). Se encuentran numerosos proveedores de CDN tales como Max CDN, Akamai y Amazon CloudFront. Cloudfare tambin propone una opcin gratuita: https://www.cloudflare.com/plans La minificacin de archivos HTML y CSS (que consiste en suprimir todos los espacios en blancos innecesarios y formatear el cdigo) tambin forma parte de las prcticas estndares. Si tienes un sitio WordPress, puedes encontrar plugins tales como W3 Total Cache que se encargan del proceso entero. Optimizar sus imgenes (ver ms abajo), incorporar el cache al lado cliente y utilizar la compresin del lado del servidor si es posible constituyen otras buenas prcticas que puedes utilizar. Por ltimo, tambin es importante que tus desarrolladores localicen puntos de embotellamientos en las consultas de los bases de datos si tienes una plataforma de comercio electrnico dado que stos son muy habituales. Otros recursos recomendados: Site speed: case studies, tips and tools for improving your conversion rate de David Moth
http://www.hitreach.co.uk/perfect-web-page/anatomia-de-la-pagina-web-perfecta/#t5_ 4/13

18/1/2014

Anatoma de la Pgina web Perfecta - Hit Reach

2 Compresin de imgenes

Como hemos comentado ms arriba, es posible reducir el tiempo de carga de la pgina web al optimizar tus imgenes. Reducir lo ms posible, el tamao de archivos de tus imgenes, permite minimizar el tiempo de carga y mejorar la experiencia de usuario pero es importante que su calidad sea la ms buena posible ya que contribuyen en la calidad general de t sitio. Deberas considerar aqu cuantas imagenes estas sirviendo, el tamao (tanto las dimensiones que el peso del archivo), y si puedes usar sprites (imgenes que se combinan en una), si las imagenes son redimensionadas durante su descarga, si han sido comprimidas adecuadamente y si contienen solo los metadatos necesarios. Otros recursos recomendados: Everything You Need to Know About Image Compression de Cameron Chapman 6 tools to compress your website image de Jayhan Sim
http://www.hitreach.co.uk/perfect-web-page/anatomia-de-la-pagina-web-perfecta/#t5_ 5/13

18/1/2014

Anatoma de la Pgina web Perfecta - Hit Reach

The Ultimate Guide for Web Images and SEO de IM Ninjas

3 Responsive Design

El responsive design te permite adaptar automticamente la estructura de t contenido al tamao de la pantalla en la que aparece. Los usuarios se conectan a la red a travs de muchos tipos de aparatos del iPhone a las pantallas de PC gigantes. El responsive design le permite ver el mismo contenido con una disposicin cada vez adaptada al aparato que utilizan. Las grandes pantallas pueden fijar contenido adicional, como por ejemplo ms productos a la pgina, mientras que las pequeas pantallas fijan un contenido reducido que solamente contiene el esencial. Con el responsive design no necesitas crear una versin especifica de un sitio web para un mvil gracias el uso de Media Queries (es un mdulo CSS3) para apuntar el estilo de algunos tamaos de pantalla. Tambin es importante elaborar en primero el diseo para el mvil con el fin de incrementar la experiencia de
http://www.hitreach.co.uk/perfect-web-page/anatomia-de-la-pagina-web-perfecta/#t5_ 6/13

18/1/2014

Anatoma de la Pgina web Perfecta - Hit Reach

usuarios del mvil. Google recomienda que hagas t propios sitio responsive antes de crear una secunda versin del sitio web para el mvil. Otros recursos recomendados: How Responsive Design Boosts Mobile Conversions de Peep Laja Responsive Web Design de Ethan Marcotte Mobile First de Luke Wroblewski Responsive Patterns de Brad Frost

4 HTML 5

HyperText Markup Language (HTML) es el lenguaje marca ms utilizado para crear pginas web. HTML5 es la quinta versin (y la ms reciente) del lenguaje HTML estndar. Al igual que para la marca de los datos estructurados como schema.org , se encuentra en HTML muchos elementos que sirven para enriquecer el contenido semntico de los documentos. HTML5 conviene
http://www.hitreach.co.uk/perfect-web-page/anatomia-de-la-pagina-web-perfecta/#t5_ 7/13

18/1/2014

Anatoma de la Pgina web Perfecta - Hit Reach

tambin muy bien para los mviles. Con respecto al posicionamiento web, HTML constituye una buena alternativa a Flash gracias a sus caractersticas que permiten a los videos, animaciones y a la interactividad estar integrados dentro de la pgina. Ms importante an: HTML5 soporte perfectamente CSS3. Observacin: Aunque todos navegadores soportan las caractersticas HTML5, ninguno de ellos ofrecen un soporte total y no est adems reconocido como el lenguaje oficial. Cuando integras elementos, es preciso que testeas tus pginas web en los distintos navegadores. Otros recursos recomendados: Dive Into HTML5 de Mark Pilgrim HTML5 Rocks HTML5 Doctor HTML5 Specification de The World Wide Web Consortium
Note: Very heavy technical documentation

5 CSS3

http://www.hitreach.co.uk/perfect-web-page/anatomia-de-la-pagina-web-perfecta/#t5_

8/13

18/1/2014

Anatoma de la Pgina web Perfecta - Hit Reach

El lenguaje CSS influye en el diseo de t sitio web. Con el CSS3, los diseadores web disponen ahora de un nmero de opciones mucha ms amplia. CSS3 ofrece por fin funcionalidades que permiten realizar cosas sencillas como formas redondeados, gradientes y sombras sin que necesites hacer manipulaciones demasiadas complicadas o que utilices centenas de imgenes distintas. Adems de estas funciones bsicas, CSS3 tambin permite nuevos mtodos avanzados de diseo de pgina con las columnas y el flexbox as como animaciones nativas, transiciones y transformaciones. Todas estas nuevas funcionalidades combinadas permiten realizar diseos muchos ms elaborados a la vez de mejoras en rendimiento sobre los mtodos antiguos. Otros recursos recomendados: CSS Zen Garden Classic example of the power of CSS. Is
also getting a CSS3 mak eover in the near future

CSS Tricks Take Advantage of CSS3 to Achieve Subtle Design de Brant Steen Seccin precedente: 04 / marcado

http://www.hitreach.co.uk/perfect-web-page/anatomia-de-la-pagina-web-perfecta/#t5_

9/13

18/1/2014

Anatoma de la Pgina web Perfecta - Hit Reach

Comments
posicionamiento de pginas web says: October 9, 2013 at 5:02 am

Enlaces web SEO para mejorar el posicionamiento de pginas web puede encontrar en PosicionamientodeUnaWeb.com desde 49,90. Reply

Leave a comment
Name * Email * Website

six +

=9

Post Comment

Notify me of follow-up comments via e-mail

http://www.hitreach.co.uk/perfect-web-page/anatomia-de-la-pagina-web-perfecta/#t5_

10/13

18/1/2014

Anatoma de la Pgina web Perfecta - Hit Reach

What Our Clients Say

James Agate Managing Director Skyrocket SEO Chris and his team are patient, responsive and have a sense of humour even when I asked them to change something that I'd insisted upon initially. Would definitely recommend to anyone looking for an awesome WordPress development and design team. Richard Sedley Director Seren Hit Reach were really easy to deal with and provide exemplary service. They implemented exactly what we wanted and guided us when we were uncertain about the solution. A highly professional and cost effective solution what's not to love. Roger Green Director

Best4tyres.com Hit Reach got it absolutely right. They embraced the challenge and complexity of the site, and exceeded expectation with quick response times and great service.

Recent Blog Posts

The Porn Viewing Habits of Scots

January 8, 2014 by Chris Dyson

Optimise This with Mat Bennett of OKO Digital

December 20, 2013 by Patrick Hathaway

Interview with JohnHenry Scherck from SEO Gadget

November 30, 2013 by Chris Dyson

Pornhub the worlds largest porn site and one of the top 100 most trafficed sites in the world have released data insights on their UK audience. As we like

In our latest episode of Optimise This I was joined by Mat Bennett from OKO Digital talking about their recent rebranding and the new Google Adsense

For this Blogvember feature, I had the pleasure of interviewing John-Henry Scherck from SEO Gadget about free tools, scraping and much
11/13

http://www.hitreach.co.uk/perfect-web-page/anatomia-de-la-pagina-web-perfecta/#t5_

18/1/2014

Anatoma de la Pgina web Perfecta - Hit Reach

Read more

Read more

more.The answers
Read more

Lets Talk
Want to chat about your project or requirements? If you call now you can talk to me directly: Call +44 (0) 808 22 444 22 and ask for Chris Email: chris.gilchrist@hitreach.co.uk Drop in: Hit Reach, Unit 16c, City Quay, Camperdown St, Dundee, DD1 3JA, United Kingdom

We build high quality, cost effective & SEO friendly websites that you can easily update & manage
Unlike other web design companies who just build you a site, we strive to understand your core challenges first and then our team of web designers work passionately with you to develop tools that help you deliver real business solutions. Learn more about us

COMPANY

SERVICES

BITS & PIECES

WEBSITE

http://www.hitreach.co.uk/perfect-web-page/anatomia-de-la-pagina-web-perfecta/#t5_

12/13

18/1/2014

Anatoma de la Pgina web Perfecta - Hit Reach

Copyright 2013 Hit Reach

Connect with us:

About Us Core Values

Website Design Website Reviews

Our Work Clients Testimonials Blog WordPress Plugins Resources Link Club Blogging

Terms & Conditions Privacy Policy Disclaimer

Meet the Team Search Engine Optimisation Available Positions SEO Training Giving Back Contact Us White Label Agreements

http://www.hitreach.co.uk/perfect-web-page/anatomia-de-la-pagina-web-perfecta/#t5_

13/13