Anatomía de la Página web Perfecta 5
13
18/1/2014 Anatomía de la Página web Perfecta - Hit Reach http://www.hitreach.co.uk/perfect-web-page/anatomia-de-la-pagina-web-perfecta/#t5_ 1/13 You are here: Home / The Anatomy of a Perfect Web Page / Anatomía de la Página web Perfecta Call: +44 (0) 808 22 444 22 Email: [email protected] 173 Compartir Tweet 60 Anatomía de la Página web Perfecta Anatomía de la Página web 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 elemento 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ón y muchas otras actividades se mezclan cada vez más, tienes que saber cómo todos los elementos de una página forman el éxito de tú sitio web, sea lo que sea tú papel en el proceso. También es importante que conozcas los vínculos que existen entre todos estos elementos. Cada sección es corta y fácil de entender. En esta presentación se encuentran numerosos enlaces hacia otros sitios web que incluyen recursos exhaustivos y de alta calidad para que puedas aprender más sobre cada elemento. ¡Esperamos que os guste! 18 Share 35 Like Home About Services Our Work Clients Testimonials Blog WP Plugins Resources Contact Blogging
-
Upload
luis-ledger -
Category
Documents
-
view
26 -
download
1
Transcript of Anatomía de la Página web Perfecta 5
18/1/2014 Anatomía de la Página web Perfecta - Hit Reach
http://www.hitreach.co.uk/perfect-web-page/anatomia-de-la-pagina-web-perfecta/#t5_ 1/13
You are here: Home / The Anatomy of a Perfect Web Page / Anatomía de la Página web Perfecta
Call: +44 (0) 808 22 444 22
Email: [email protected]
173
Compartir Tweet
60
Anatomía de la Página web Perfecta
Anatomía de la Página web 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 elemento 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ón y muchas otras actividades se
mezclan cada vez más, tienes que saber cómo
todos los elementos de una página forman el
éxito de tú sitio web, sea lo que sea tú papel en
el proceso. También es importante que
conozcas los vínculos que existen entre todos
estos elementos.
Cada sección es corta y fácil de entender. En
esta presentación se encuentran numerosos enlaces hacia otros sitios web que incluyen recursos
exhaustivos y de alta calidad para que puedas aprender más sobre cada elemento.
¡Esperamos que os guste!
18
Share
35
Like
Home About Services Our Work Clients Testimonials Blog WP Plugins
Resources Contact Blogging
18/1/2014 Anatomía de la Página web Perfecta - Hit Reach
http://www.hitreach.co.uk/perfect-web-page/anatomia-de-la-pagina-web-perfecta/#t5_ 2/13
01Diseño &
Contenido
Titular
Navegación
Contenido
Legibilidad
Web Fonts
Imágenes
Sellos de
confianza
Migas de pan
Videos
Pie de página
02Llamadas a la
acción
Llamada a la
acción
principal
Botones para
compartir de
las redes
sociales
Llamadas a la
acción
secundarias
Venta cruzada
& Up-selling
03Posicionamiento
interno
Arquitectura
del sitio web
Estructura de
la URL
Etiqueta « Title
»
Etiqueta «
Meta
Description »
Etiquetas «
Header »
Enlaces
contextuales
Atributo « Alt »
Alojamiento de
videos & Mapa
del sitio
Mapa del sitio
04Marcado
Authorship
markup
Schema.org
Migas de pan «
Markup »
Atributo «
Rel=canonical
»
Protocolo
Open Graph
05Código
Tiempos de
carga
Compresión de
imágenes
Responsive
design
HTML5
CSS3
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
.
1 – Tiempos de carga
01 / Diseño & Contenido
02 / Llamadas a la acción
03 / Posicionamiento interno
04 / Marcado
05 / Código
18/1/2014 Anatomía de la Página web Perfecta - Hit Reach
http://www.hitreach.co.uk/perfect-web-page/anatomia-de-la-pagina-web-perfecta/#t5_ 3/13
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
18/1/2014 Anatomía de la Página web Perfecta - Hit Reach
http://www.hitreach.co.uk/perfect-web-page/anatomia-de-la-pagina-web-perfecta/#t5_ 4/13
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
18/1/2014 Anatomía de la Página web Perfecta - Hit Reach
http://www.hitreach.co.uk/perfect-web-page/anatomia-de-la-pagina-web-perfecta/#t5_ 5/13
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
18/1/2014 Anatomía de la Página web Perfecta - Hit Reach
http://www.hitreach.co.uk/perfect-web-page/anatomia-de-la-pagina-web-perfecta/#t5_ 6/13
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
18/1/2014 Anatomía de la Página web Perfecta - Hit Reach
http://www.hitreach.co.uk/perfect-web-page/anatomia-de-la-pagina-web-perfecta/#t5_ 7/13
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
18/1/2014 Anatomía de la Página web Perfecta - Hit Reach
http://www.hitreach.co.uk/perfect-web-page/anatomia-de-la-pagina-web-perfecta/#t5_ 8/13
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
18/1/2014 Anatomía de la Página web Perfecta - Hit Reach
http://www.hitreach.co.uk/perfect-web-page/anatomia-de-la-pagina-web-perfecta/#t5_ 9/13
« Sección precedente: 04 /
marcado
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 makeover in the
near future
CSS Tricks
Take Advantage of CSS3 to
Achieve Subtle Design de Brant
Steen
18/1/2014 Anatomía de la Página web Perfecta - Hit Reach
http://www.hitreach.co.uk/perfect-web-page/anatomia-de-la-pagina-web-perfecta/#t5_ 10/13
Comments
posicionamiento de páginas web says:
October 9, 2013 at 5:02 am
Enlaces web SEO para mejorar el posicionamiento de páginas webpuede 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
18/1/2014 Anatomía de la Página web Perfecta - Hit Reach
http://www.hitreach.co.uk/perfect-web-page/anatomia-de-la-pagina-web-perfecta/#t5_ 11/13
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.
What Our Clients Say
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 John-
Henry 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
Recent Blog Posts
18/1/2014 Anatomía de la Página web Perfecta - Hit Reach
http://www.hitreach.co.uk/perfect-web-page/anatomia-de-la-pagina-web-perfecta/#t5_ 12/13
Read more Read more more.The answers …
Read more
Let’s 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: [email protected]
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 youcan 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
18/1/2014 Anatomía de la Página web Perfecta - Hit Reach
http://www.hitreach.co.uk/perfect-web-page/anatomia-de-la-pagina-web-perfecta/#t5_ 13/13
Connect with us:
Copyright © 2013 Hit Reach
About Us
Core Values
Meet the Team
Available
Positions
Giving Back
Contact Us
Website Design
Website Reviews
Search Engine
Optimisation
SEO Training
White Label
Agreements
Our Work
Clients
Testimonials
Blog
WordPress
Plugins
Resources
Link Club
Blogging
Terms &
Conditions
Privacy Policy
Disclaimer
