Anatomía de la Página web Perfecta 5

18/1/2014

Anatomía de l a Pág i na web Per fecta - Hi t R each

Call: +44 (0) 808 22 444 22 Call: +44 Email: [email protected]

Hom e

About

Resources

Services

Contact

Our W ork

Clients

Tes tim onials

Blog

W P Plugins

Blogging

You Yo u are ar e he re : Home Home / / The Anatomy of a Perfect Web Page / Page / Anatomía de la Página web Perfecta

Anato An atomía mía de la Pá Página gina web web Perfecta Perfecta 18 Share

173 17 3 Compartir

35 Like

60 Tweet

Anatomía de la Página web Anatomía web Perfecta Perfecta (edición de 2013) es diseñado con el fin de presentarte un resumen, una introducción y recursos más completos para cada elemen e lemento to que forma parte de la página web perfecta. Dado que el diseño web, la experiencia de usuario, el SEO, la optimización de la tasa de conversi conv ersión ón y muchas muchas otras activida actividade des s se mezclan mezcl an cada vez más, tienes que saber cómo todos los element elementos os de un una a página pág ina forman el éxito de tú sitio w sitio web eb,, sea lo que sea tú papel en el proceso. También También es importante i mportante qu que e conozcas co nozcas los los vínculos vínculos que existen exi sten entre todos todos estos es tos elementos. elementos. Cada sección es corta y fácil de entender. En esta presentación pre sentación se encuentran encuentran num numerosos erosos enl enlaces aces hacia otros siti sitios os web que i nclu ncluyen yen recursos rec ursos exhaustivos exh austivos y de alta calidad calid ad para que puedas puedas aprender más sobre cada eleme e lemento. nto. ¡Esperamos que os guste!

http://www http://www.hitr .hitreach.co.uk each.co.uk/perfect-web-page/anatom /perfect-web-page/anatomiaia-de-lade-la- pagina-web pagi na-web-perfecta/#t5_ -perfecta/#t5_

1/13

18/1/2014

Anatomía de la Página web Perfecta - Hit Reach

01

02

Diseño &

Llamadas a la

Contenido

acción

Titular Navegación Contenido Legibilidad Web Fonts Imágenes Sellos de confianza Migas de pan Videos

03

Posicionamiento

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

Pie de página

05 / Código Un código limpio y bien organizado no sólo es importante para tus usuarios, sino que es también un factor de ranking para Google. el buscador otorga una gran importancia a los tiempos de carga rápidos porque contribuyen en mejorar la experiencia de usuarios. Le gustará tú sitio web a los usuarios y a los búscadores si es rápido, claro y que satisface las necesidades de los usuarios. Existen numerosos métodos para aumentar la velocidad de tú sitio. Puedes realizar la mayoría de ellos por ti-mismo con módulos y plugins. Además,testear y mejorar los resultados resulta facilísimo .

04

Marcado

05 Código

interno

Arquitectura del sitio web

Authorship markup

Tiempos de carga

Schema.org

Compresión de imágenes

Estructura de la URL

Migas de pan « Markup »

Etiqueta « Title »

Atributo « Rel=canonical »

Etiqueta « Meta Description »

Responsive design HTML5 CSS3

Protocolo Open Graph

Etiquetas « Header » Enlaces contextuales Atributo « Alt » Alojamiento de 01&/ Mapa Diseño & Contenido videos del sitio

02 / Llamadas a la acción

Mapa del sitio

03 / Posicionamiento interno 04 / Marcado 05 / Código

1 – Tiempos de carga

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

2/13

18/1/2014


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 páginas de tú sitio web entre ellas Web Page Test. Google también 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ú experiencía técnica y del nivel de control que tienes en tú sitio. Sin embargo, hay resultados rápidos que la mayoría de los webmasters pueden conseguir fácilmente . Si, por ejemplo, estás en un servidor Apache, puedes utilizar el módulo de Google “modpagespeed” que “aumenta la velocidad de tú sitio web y reduce el tiempo de carga de las páginas web” y “aplica a las páginas automáticamente las mejores prácticas de los rendimientos web así como ventajas asociadas (CSS, JavaScript, imágenes) 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


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 añadir 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 también propone una opción gratuita: https://www.cloudflare.com/plans La minificación de archivos HTML y CSS (que consiste en suprimir todos los espacios en blancos innecesarios y formatear el código) también forma parte de las prácticas estándares. Si tienes un sitio WordPress, puedes encontrar plugins tales como W3 Total Cache que se encargan del proceso entero. Optimizar sus imágenes (ver más abajo), incorporar el cache al lado cliente y utilizar la compresi ón del lado del servidor si es posible constituyen otras buenas prácticas que puedes utilizar. Por último, también es importante que tus desarrolladores localicen puntos de embotellamientos en las consultas de los bases de datos si tienes una plataforma de comercio electrónico 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


2 – Compresión de imágenes

Como hemos comentado más arriba, es posible reducir el tiempo de carga de la página web al optimizar tus imágenes. Reducir lo más posible, el tamaño de archivos de tus imágenes, permite minimizar el tiempo de carga y mejorar la experiencia de usuario pero es importante que su calidad sea la más buena posible ya que contribuyen en la calidad general de tú sitio. Deberías considerar aquí cuantas imagenes estas sirviendo, el tamaño (tanto las dimensiones que el peso del archivo), y si puedes usar « sprites » (imágenes 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


The Ultimate Guide for Web Images and SEO de IM Ninjas

3 – Responsive Design

El « responsive design » te permite adaptar automáticamente la estructura de tú contenido al tamaño de la pantalla en la que aparece. Los usuarios se conectan a la red a través de muchos tipos de aparatos del iPhone a las pantallas de PC gigantes. El responsive design le permite ver el mismo contenido con una disposición cada vez adaptada al aparato que utilizan. Las grandes pantallas pueden fijar contenido adicional, como por ejemplo más productos a la página, mientras que las pequeñas pantallas fijan un contenido reducido que solamente contiene el “esencial”. Con el responsive design no necesitas crear una versión especifica de un sitio web para un móvil gracias el uso de « Media Queries » (es un módulo CSS3) para apuntar el estilo de algunos tamaños de pantalla. También es importante elaborar en primero el diseño para el móvil 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


usuarios del móvil. Google recomienda que hagas tú propios sitio responsive antes de crear una secunda versión del sitio web para el móvil. 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 más utilizado para crear páginas web. HTML5 es la quinta versión (y la más reciente) del lenguaje HTML estándar. 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 semántico 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


también muy bien para los móviles. Con respecto al posicionamiento web, HTML constituye una buena alternativa a Flash gracias a sus características que permiten a los videos, animaciones y a la interactividad estar integrados dentro de la página. Más importante aún: HTML5 soporte perfectamente CSS3. Observación: Aunque todos navegadores soportan las características HTML5, ninguno de ellos ofrecen un soporte total y no está además reconocido como el lenguaje oficial. Cuando integras elementos, es preciso que testeas tus páginas 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


8/13

18/1/2014


El lenguaje CSS influye en el diseño de tú sitio web. Con el CSS3, los diseñadores web disponen ahora de un número de opciones mucha más 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 imágenes distintas. Además de estas funciones básicas, CSS3 también permite nuevos métodos avanzados de diseño de página con las columnas y el flexbox así como animaciones nativas, transiciones y transformaciones. Todas estas nuevas funcionalidades combinadas permiten realizar diseños muchos más elaborados a la vez de mejoras en rendimiento sobre los métodos 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 « Sección precedente: 04 / marcado


9/13

18/1/2014


Comments posicionamiento de páginas web says: October 9, 2013 at 5:02 am

Enlaces web SEO para mejorar el posicionamiento de páginas 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


10/13

18/1/2014


What Our Clients Say James

Richard

Roger

Agate

Sedley

Green

Managing Director Skyrocket

Director Seren

Director

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.

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.

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

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 …

Optimise This with Mat Bennett of OKO Digital December 20, 2013 by Patrick Hathaway

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 …


Interview with JohnHenry Scherck from SEO Gadget November 30, 2013 by Chris Dyson

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

18/1/2014


Read more

more.The answers …

Read more

Read more

Let’s Talk

We build high quality, cost effective & SEO friendly websites that you can easily update & manage

Want to chat about your project or requirements? If you call now you can talk to me directly:

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.

Call +44 (0) 808 22 444 22 and ask for Chris Email: [email protected] Drop in: Hit Reach, Unit 16c, City Quay, Camperdown St, Dundee, DD1 3JA, United Kingdom

COMPANY

Learn more about us

SERVICES


BITS & PIECES

WEBSITE

12/13

18/1/2014


Connect with us:

Copyright © 2013 Hit Reach

About Us

Website Design

Our Work

Core Values

Website Reviews

Clients

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

White Label Agreements

Testimonials Blog

Terms & Conditions Privacy Policy Disclaimer

WordPress Plugins Resources Link Club Blogging


13/13

Anatomía de la Página web Perfecta 5

Recommend Documents