SlideShare una empresa de Scribd logo
1 de 9
Identificación de las normas
PARA FILTRAR EL ACCESO
Peso de paginas
•
•

Tamaño de una página web
El tamaño (peso) de las páginas es crítico: la velocidad con la cual las páginas pueden ser
descargadas y ser mostradas.

•

El tiempo de cuanto tardan las peticiones de un usuario en llegar a su pantalla ha sido el tema de
muchas pruebas con usuarios en los últimos años. En general, tiempo de carga debe ser menos
de 10 segundos para tener la atención del usuario; si no, el usuario cancelará la sesión.

•

Los estudios del peso de carga de la página también han probado que los websites que son más
rápidos, consiguen más tráfico.

•
•

¿Cómo deben ser las páginas?
La página debe teenr el tamaño que se puede descargar en el plazo de 10 segundos, asumimos
que la mayoría de los usuarios tendrán acceso a un web de la Red con un módem, puesto que
esta es la situación típica en la mayoría de los casos.

•

Esta tabla indica los tiempos y tamaños de las páginas para alcanzar ambos 1-segundos y de 10
segundos tiempos de descarga:

•
•
•

Sistema de conexión 1 Segundo 10 Segundos
Modem 56K 1,5 KB 25 KB
ADSL 6 KB 110 KB
Peso de paginas
• Esto significa que los Web deben de ser de un tamaño
menor de 150 KB donde sea posible.
• Además, cualquier archivo más grande de sobre 250
KB debe ser separado hacia fuera y ser identificado al
usuario como un archivo grande, preferiblemente con
una indicación de aproximadamente como es de
grande.
• El tamaño total de la página incluye el tamaño de
todos los gráficos utilizados, puesto que tendrán que
ser descargados, también, a menos que se estén
reutilizando. (véase el uso de imágenes en el web).
Peso de paginas
•

•

http://www.1and1.mx/hosting-linux?linkOrigin=webhosting&linkId=hd.tab.packages.hosting
UNA MUY BUENA PAGINA PARA EL COSTEO DE UNA PAGINA WEB
Diagramación de paginas
•
•
•
•

•
•

Diagramación de páginas web
Los proyectos web que generan un resultado de alta calidad se construyen a partir
de un ”concepto creativo” que se compone de las diferentes ideas del cliente, la
visión del diseñador gráfico y la intervención del diseñador (o diagramador) web.
El objetivo fundamental de la diagramación web es lograr la facilidad de
navegación en el sitio, lo que permite al usuario conseguir la información que le
interesa de una manera rápida y eficiente.
El proceso de diagramar una página web, consiste en decidir: ¿Donde colocar sus
elementos y por qué?, al ejecutar este paso con los objetivos básicos de crear
vínculos para que la navegación sea intuitiva y crear una estructura adecuada de
código de programación, se ha empezado por el buen camino.
Diagramar y programar un sitio web partiendo de los objetivos ya mencionados
garantiza la funcionalidad del mismo.
Una página web visualmente atractiva que además sea altamente funcional son los
ingredientes básicos de un proyecto de calidad y con un alcance tan grande como
la misma red.
USO DE PRESENTACION EN FLASH
• La mayoría de las presentaciones "Flash" como página inicial, impiden que
las "arañas" que utilizan los buscadores puedan entrar al sitio y recorrerlo.
Producto de esto, los usuarios que no conozcan su dirección, nunca
podrán ver sus contenidos a partir de un buscador. Y ya se sabe, si no está
en Google, no está en Internet.
• Existe otro problema más importante asociado al uso de páginas de
presentación, para el cual hay dos bandos: por un lado los dueños de los
sitios quieren que su portada muestre algo moviéndose y sonando
llamativamente; por otro, los usuarios sólo esperan presionar el enlace
que los lleve a la información real. Es decir buscan el texto "skip intro" o
"saltar introducción", para no verlo (muchos sitios web ni siquiera incluyen
esta alternativa) ¿Qué le parecería a usted por ejemplo, que el sitio web
de noticias que habitualmente visita decidiera obligarlo a que vea
animación de 30 seg. cada vez que desee leer un artículo? Su objetivo
debe ser siempre atraer usuarios a su sitio web, no alejarlos
• http://www.aeurus.cl/recomendaciones/2006/07/18/presentacionesflash-uso-y-abuso-en-el-diseno-web/
Uso de marcos o frames
•

En los primeros sitios web los marcos o frames se utilizaban con mucha frecuencia. Tenía más sentido utilizarlos
para reducir los tiempos de carga con conexiones lentas.

•

Todavía siguen naciendo webs nuevas que utilizan esta tecnología. Es muy típico un marco izquierdo con el menú
de las demás páginas, o una cabecera con el logotipo y una presentación en un marco superior.

•

Los buscadores más importantes han empezado a indexar los contenidos de framesets. De todas maneras
todavía quedan muchos robots que no tienen capacidad de seguir los enlaces incorporados en este tipo de
tecnología.

•

La programación típica de una página con frames aparece de la siguiente manera:

•
<frameset rows="*">
<frame name="principal" src="http://www.delosprimeros.com">
<noframes>
<body>
<p>Esta página utiliza frames, pero su navegador no los soporta</p>
</body>
</noframes>
</frameset> http://www.delosprimeros.com/marcos-y-posicionamiento.htm
Uso de las imágenes de fondo
•

•
•
•

•
•

Cada vez viene siendo más habitual situar las imágenes que aparecen en una web en el archivo css.
La importancia de separar el contenido del diseño adquiere más importancia si estamos trabajando
en un diseño accesible y posicionable. En el posicionamiento en google u otros buscadores esta
separación es obligatoria. Google no entiende de diseños sólo interpreta el texto que lee.
Habitualmente se utiliza para diseño de marcos de la página fondo degradados, esquinas
redondeadas, muy de moda actualmente, pero también se pueden usar en creación de menús con
formas de pestañas.
La utilización de esta técnica es bien sencilla. La sección que va a contener la imagen de fondo
deberá estar identificada mediante un id. Esta identificación sirve para crear la referencia en el
archivo css del siguiente modo:
En el fichero html:
< div id="nombre" >Texto que deberá aparecer por encima de la imágen de fondo< / div >
En el fichero css:
#nombre {
background: color url(”dirección de la imagen”) repeat | no repat …
}
De esta forma conseguimos efectos interesantes sin apenas ensuciar el código html
http://www.abartiateam.com/diseno-web/200602_uso-de-imagenes-de-fondo-en-el-diseno-web
Uso de meta tags adecuadamente
•
•

2. Metatags: un manual de des-uso
1) NO hacer uso del metatag <refresh>. Muy peligroso, sobretodo si hay varias páginas con este metatag, que
apunten a una tuya. Si bién se puede hacer un uso totalmente correcto de éste metatag, el abuso que han hecho
de él muchos webmasters (backdoors), hace que no sea nada recomendable, ni siquiera en su "uso correcto",
olvidar que existe este metatag es lo mejor que se puede hacer, si has de redireccionar una web, utiliza un script,
mejor si el script se halla fuera de la misma.

•

1) No poner muchas palabras en los metatags. En muchos casos es contraproducente, en la resta de casos inútil.

•

2) No poner en los metatags palabras ('gancho'), como sexo, gratis, sex... o cualquier otra que después no salga
en la web. Sinó harás que quien llegue buscando una palabra que después no encuentra marche enseguida, si es
que llega alguien ya que son palabras de fuerte competencia. Además algunos buscadores cuando encuentran
páginas con palabras de tipo sexual, no las indexan.

•

3) No utilizar "metatags superfluos" del tipo author, generator..., pueden dar a algunos motores problemes para
leer el resto de metatags que si que pueden ser interesantes. Muchos de éstos suelen leer el principio de las
páginas, y otros dan mucha importancia a lo primero que encuentran. Además, si no tienen ninguna utilidad, ¿por
que incluirlos?

•

4) No repetir las palabras clave en el mismo metatag. Se considera spam por los principales buscadores.

•

5) Para Google: no hacer mucho caso de los metatags, Google los ignora (es la tendencia también de la mayoría
de buscadores). Los que no ignora hacen bajar el ránking, p.e.: no-cache.

•

6) No utilizar el metatag Keywords, los principales buscadores ya no lo utilizan, convirtiéndose en una pérdida de
tiempo.

•
•

http://www.nitium.com/promocion/anti_promo/metatags.htm

Más contenido relacionado

La actualidad más candente (19)

DIFERENCIAS ENTRE UN BLOG Y WEBQUEST
DIFERENCIAS ENTRE UN BLOG Y WEBQUESTDIFERENCIAS ENTRE UN BLOG Y WEBQUEST
DIFERENCIAS ENTRE UN BLOG Y WEBQUEST
 
Blogger
BloggerBlogger
Blogger
 
Diferencias de blogger y web quest ;)
Diferencias de blogger y web quest ;)Diferencias de blogger y web quest ;)
Diferencias de blogger y web quest ;)
 
Glosario de WordPress
Glosario de WordPressGlosario de WordPress
Glosario de WordPress
 
Cómo configurar el seo de tu drupal
Cómo configurar el seo de tu drupal  Cómo configurar el seo de tu drupal
Cómo configurar el seo de tu drupal
 
Diferencias entre blog y webquest
Diferencias entre blog y webquestDiferencias entre blog y webquest
Diferencias entre blog y webquest
 
Marketing con video #cw16
Marketing con video #cw16Marketing con video #cw16
Marketing con video #cw16
 
Seo On Page en WordPress - Ponencia para Meetup WordPress Murcia
Seo On Page en WordPress - Ponencia para Meetup WordPress MurciaSeo On Page en WordPress - Ponencia para Meetup WordPress Murcia
Seo On Page en WordPress - Ponencia para Meetup WordPress Murcia
 
Trabajo de tecnología
Trabajo de tecnologíaTrabajo de tecnología
Trabajo de tecnología
 
BLOG,CARACTERISTICAS E IMPORTANCIA
BLOG,CARACTERISTICAS E IMPORTANCIABLOG,CARACTERISTICAS E IMPORTANCIA
BLOG,CARACTERISTICAS E IMPORTANCIA
 
Computacion básica
Computacion básicaComputacion básica
Computacion básica
 
E-marketing
E-marketingE-marketing
E-marketing
 
Administración de Sitios Web
Administración de Sitios WebAdministración de Sitios Web
Administración de Sitios Web
 
Seo Para Principiantes
Seo Para PrincipiantesSeo Para Principiantes
Seo Para Principiantes
 
Consulta
ConsultaConsulta
Consulta
 
Actividad 2
Actividad 2Actividad 2
Actividad 2
 
Clase wordpres
Clase wordpresClase wordpres
Clase wordpres
 
Yonny alexander blog
Yonny alexander blogYonny alexander blog
Yonny alexander blog
 
blog
blogblog
blog
 

Similar a Normas para optimizar el peso y velocidad de carga de páginas web

Diseño web samanta
Diseño web samanta Diseño web samanta
Diseño web samanta samantaaaaaa
 
Seo técnico para WordPress | GoDaddy España
Seo técnico para WordPress | GoDaddy EspañaSeo técnico para WordPress | GoDaddy España
Seo técnico para WordPress | GoDaddy EspañaGoDaddy
 
Identificación de las normas mínimas para facilitar
Identificación de las normas mínimas para facilitarIdentificación de las normas mínimas para facilitar
Identificación de las normas mínimas para facilitarXoch Flores
 
Elementos y recomendaciones generales
Elementos y recomendaciones generalesElementos y recomendaciones generales
Elementos y recomendaciones generalesga12007
 
Diseño de páginas web
Diseño de páginas webDiseño de páginas web
Diseño de páginas webLuisa Perez
 
Estandares de diseño web
Estandares de diseño webEstandares de diseño web
Estandares de diseño webdwebslide
 
Marketing de contenidos
Marketing de contenidosMarketing de contenidos
Marketing de contenidosCarlos Rios
 
características y las partes que debe tener un sitio web
 características y las partes que debe tener un sitio web características y las partes que debe tener un sitio web
características y las partes que debe tener un sitio webabigailhernandez123
 
Diseño de navegación web
Diseño de navegación webDiseño de navegación web
Diseño de navegación webAlexis Morillo
 
Usabilidad y Arquitectura de Información, un pretexto para hablar de la satis...
Usabilidad y Arquitectura de Información, un pretexto para hablar de la satis...Usabilidad y Arquitectura de Información, un pretexto para hablar de la satis...
Usabilidad y Arquitectura de Información, un pretexto para hablar de la satis...Alexa Zárrate
 
Jm checklist
Jm checklistJm checklist
Jm checklistdedarisu
 
PATRONES DE DISEÑO WEB
PATRONES DE DISEÑO WEBPATRONES DE DISEÑO WEB
PATRONES DE DISEÑO WEBMario Martinez
 

Similar a Normas para optimizar el peso y velocidad de carga de páginas web (20)

Diseño web samanta
Diseño web samanta Diseño web samanta
Diseño web samanta
 
Seo técnico para WordPress | GoDaddy España
Seo técnico para WordPress | GoDaddy EspañaSeo técnico para WordPress | GoDaddy España
Seo técnico para WordPress | GoDaddy España
 
Sobre disenno de_sitios_web
Sobre disenno de_sitios_webSobre disenno de_sitios_web
Sobre disenno de_sitios_web
 
Identificación de las normas mínimas para facilitar
Identificación de las normas mínimas para facilitarIdentificación de las normas mínimas para facilitar
Identificación de las normas mínimas para facilitar
 
Elementos y recomendaciones generales
Elementos y recomendaciones generalesElementos y recomendaciones generales
Elementos y recomendaciones generales
 
G:\diseño web
G:\diseño webG:\diseño web
G:\diseño web
 
Diseño de un sitio web
Diseño de un sitio webDiseño de un sitio web
Diseño de un sitio web
 
Diseño de páginas web
Diseño de páginas webDiseño de páginas web
Diseño de páginas web
 
Consejos clave para_crear_proyectos_web
Consejos clave para_crear_proyectos_webConsejos clave para_crear_proyectos_web
Consejos clave para_crear_proyectos_web
 
Estandares de diseño web
Estandares de diseño webEstandares de diseño web
Estandares de diseño web
 
Marketing de contenidos
Marketing de contenidosMarketing de contenidos
Marketing de contenidos
 
Fundamentos DiseñO Web
Fundamentos DiseñO WebFundamentos DiseñO Web
Fundamentos DiseñO Web
 
características y las partes que debe tener un sitio web
 características y las partes que debe tener un sitio web características y las partes que debe tener un sitio web
características y las partes que debe tener un sitio web
 
Diseño web
Diseño webDiseño web
Diseño web
 
Issuu1 a.v.v.m
Issuu1 a.v.v.mIssuu1 a.v.v.m
Issuu1 a.v.v.m
 
Diseño de navegación web
Diseño de navegación webDiseño de navegación web
Diseño de navegación web
 
Usabilidad y Arquitectura de Información, un pretexto para hablar de la satis...
Usabilidad y Arquitectura de Información, un pretexto para hablar de la satis...Usabilidad y Arquitectura de Información, un pretexto para hablar de la satis...
Usabilidad y Arquitectura de Información, un pretexto para hablar de la satis...
 
Jm checklist
Jm checklistJm checklist
Jm checklist
 
Documento pdf
Documento pdfDocumento pdf
Documento pdf
 
PATRONES DE DISEÑO WEB
PATRONES DE DISEÑO WEBPATRONES DE DISEÑO WEB
PATRONES DE DISEÑO WEB
 

Último

CIENCIAS NATURALES 4 TO ambientes .docx
CIENCIAS NATURALES 4 TO  ambientes .docxCIENCIAS NATURALES 4 TO  ambientes .docx
CIENCIAS NATURALES 4 TO ambientes .docxAgustinaNuez21
 
NARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARO
NARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARONARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARO
NARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFAROJosé Luis Palma
 
LINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptx
LINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptxLINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptx
LINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptxdanalikcruz2000
 
Estas son las escuelas y colegios que tendrán modalidad no presencial este lu...
Estas son las escuelas y colegios que tendrán modalidad no presencial este lu...Estas son las escuelas y colegios que tendrán modalidad no presencial este lu...
Estas son las escuelas y colegios que tendrán modalidad no presencial este lu...fcastellanos3
 
SINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptx
SINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptxSINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptx
SINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptxlclcarmen
 
Procesos Didácticos en Educación Inicial .pptx
Procesos Didácticos en Educación Inicial .pptxProcesos Didácticos en Educación Inicial .pptx
Procesos Didácticos en Educación Inicial .pptxMapyMerma1
 
Tarea 5_ Foro _Selección de herramientas digitales_Manuel.pdf
Tarea 5_ Foro _Selección de herramientas digitales_Manuel.pdfTarea 5_ Foro _Selección de herramientas digitales_Manuel.pdf
Tarea 5_ Foro _Selección de herramientas digitales_Manuel.pdfManuel Molina
 
La Función tecnológica del tutor.pptx
La  Función  tecnológica  del tutor.pptxLa  Función  tecnológica  del tutor.pptx
La Función tecnológica del tutor.pptxJunkotantik
 
TEST DE RAVEN es un test conocido para la personalidad.pdf
TEST DE RAVEN es un test conocido para la personalidad.pdfTEST DE RAVEN es un test conocido para la personalidad.pdf
TEST DE RAVEN es un test conocido para la personalidad.pdfDannyTola1
 
Uses of simple past and time expressions
Uses of simple past and time expressionsUses of simple past and time expressions
Uses of simple past and time expressionsConsueloSantana3
 
5° SEM29 CRONOGRAMA PLANEACIÓN DOCENTE DARUKEL 23-24.pdf
5° SEM29 CRONOGRAMA PLANEACIÓN DOCENTE DARUKEL 23-24.pdf5° SEM29 CRONOGRAMA PLANEACIÓN DOCENTE DARUKEL 23-24.pdf
5° SEM29 CRONOGRAMA PLANEACIÓN DOCENTE DARUKEL 23-24.pdfOswaldoGonzalezCruz
 
LA ECUACIÓN DEL NÚMERO PI EN LOS JUEGOS OLÍMPICOS DE PARÍS. Por JAVIER SOLIS ...
LA ECUACIÓN DEL NÚMERO PI EN LOS JUEGOS OLÍMPICOS DE PARÍS. Por JAVIER SOLIS ...LA ECUACIÓN DEL NÚMERO PI EN LOS JUEGOS OLÍMPICOS DE PARÍS. Por JAVIER SOLIS ...
LA ECUACIÓN DEL NÚMERO PI EN LOS JUEGOS OLÍMPICOS DE PARÍS. Por JAVIER SOLIS ...JAVIER SOLIS NOYOLA
 
c3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptx
c3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptxc3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptx
c3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptxMartín Ramírez
 
TRIPTICO-SISTEMA-MUSCULAR. PARA NIÑOS DE PRIMARIA
TRIPTICO-SISTEMA-MUSCULAR. PARA NIÑOS DE PRIMARIATRIPTICO-SISTEMA-MUSCULAR. PARA NIÑOS DE PRIMARIA
TRIPTICO-SISTEMA-MUSCULAR. PARA NIÑOS DE PRIMARIAAbelardoVelaAlbrecht1
 
Fundamentos y Principios de Psicopedagogía..pdf
Fundamentos y Principios de Psicopedagogía..pdfFundamentos y Principios de Psicopedagogía..pdf
Fundamentos y Principios de Psicopedagogía..pdfsamyarrocha1
 
RAIZ CUADRADA Y CUBICA PARA NIÑOS DE PRIMARIA
RAIZ CUADRADA Y CUBICA PARA NIÑOS DE PRIMARIARAIZ CUADRADA Y CUBICA PARA NIÑOS DE PRIMARIA
RAIZ CUADRADA Y CUBICA PARA NIÑOS DE PRIMARIACarlos Campaña Montenegro
 

Último (20)

Sesión La luz brilla en la oscuridad.pdf
Sesión  La luz brilla en la oscuridad.pdfSesión  La luz brilla en la oscuridad.pdf
Sesión La luz brilla en la oscuridad.pdf
 
CIENCIAS NATURALES 4 TO ambientes .docx
CIENCIAS NATURALES 4 TO  ambientes .docxCIENCIAS NATURALES 4 TO  ambientes .docx
CIENCIAS NATURALES 4 TO ambientes .docx
 
Power Point: "Defendamos la verdad".pptx
Power Point: "Defendamos la verdad".pptxPower Point: "Defendamos la verdad".pptx
Power Point: "Defendamos la verdad".pptx
 
NARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARO
NARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARONARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARO
NARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARO
 
LINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptx
LINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptxLINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptx
LINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptx
 
Estas son las escuelas y colegios que tendrán modalidad no presencial este lu...
Estas son las escuelas y colegios que tendrán modalidad no presencial este lu...Estas son las escuelas y colegios que tendrán modalidad no presencial este lu...
Estas son las escuelas y colegios que tendrán modalidad no presencial este lu...
 
SINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptx
SINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptxSINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptx
SINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptx
 
Procesos Didácticos en Educación Inicial .pptx
Procesos Didácticos en Educación Inicial .pptxProcesos Didácticos en Educación Inicial .pptx
Procesos Didácticos en Educación Inicial .pptx
 
Tarea 5_ Foro _Selección de herramientas digitales_Manuel.pdf
Tarea 5_ Foro _Selección de herramientas digitales_Manuel.pdfTarea 5_ Foro _Selección de herramientas digitales_Manuel.pdf
Tarea 5_ Foro _Selección de herramientas digitales_Manuel.pdf
 
Earth Day Everyday 2024 54th anniversary
Earth Day Everyday 2024 54th anniversaryEarth Day Everyday 2024 54th anniversary
Earth Day Everyday 2024 54th anniversary
 
Tema 7.- E-COMMERCE SISTEMAS DE INFORMACION.pdf
Tema 7.- E-COMMERCE SISTEMAS DE INFORMACION.pdfTema 7.- E-COMMERCE SISTEMAS DE INFORMACION.pdf
Tema 7.- E-COMMERCE SISTEMAS DE INFORMACION.pdf
 
La Función tecnológica del tutor.pptx
La  Función  tecnológica  del tutor.pptxLa  Función  tecnológica  del tutor.pptx
La Función tecnológica del tutor.pptx
 
TEST DE RAVEN es un test conocido para la personalidad.pdf
TEST DE RAVEN es un test conocido para la personalidad.pdfTEST DE RAVEN es un test conocido para la personalidad.pdf
TEST DE RAVEN es un test conocido para la personalidad.pdf
 
Uses of simple past and time expressions
Uses of simple past and time expressionsUses of simple past and time expressions
Uses of simple past and time expressions
 
5° SEM29 CRONOGRAMA PLANEACIÓN DOCENTE DARUKEL 23-24.pdf
5° SEM29 CRONOGRAMA PLANEACIÓN DOCENTE DARUKEL 23-24.pdf5° SEM29 CRONOGRAMA PLANEACIÓN DOCENTE DARUKEL 23-24.pdf
5° SEM29 CRONOGRAMA PLANEACIÓN DOCENTE DARUKEL 23-24.pdf
 
LA ECUACIÓN DEL NÚMERO PI EN LOS JUEGOS OLÍMPICOS DE PARÍS. Por JAVIER SOLIS ...
LA ECUACIÓN DEL NÚMERO PI EN LOS JUEGOS OLÍMPICOS DE PARÍS. Por JAVIER SOLIS ...LA ECUACIÓN DEL NÚMERO PI EN LOS JUEGOS OLÍMPICOS DE PARÍS. Por JAVIER SOLIS ...
LA ECUACIÓN DEL NÚMERO PI EN LOS JUEGOS OLÍMPICOS DE PARÍS. Por JAVIER SOLIS ...
 
c3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptx
c3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptxc3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptx
c3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptx
 
TRIPTICO-SISTEMA-MUSCULAR. PARA NIÑOS DE PRIMARIA
TRIPTICO-SISTEMA-MUSCULAR. PARA NIÑOS DE PRIMARIATRIPTICO-SISTEMA-MUSCULAR. PARA NIÑOS DE PRIMARIA
TRIPTICO-SISTEMA-MUSCULAR. PARA NIÑOS DE PRIMARIA
 
Fundamentos y Principios de Psicopedagogía..pdf
Fundamentos y Principios de Psicopedagogía..pdfFundamentos y Principios de Psicopedagogía..pdf
Fundamentos y Principios de Psicopedagogía..pdf
 
RAIZ CUADRADA Y CUBICA PARA NIÑOS DE PRIMARIA
RAIZ CUADRADA Y CUBICA PARA NIÑOS DE PRIMARIARAIZ CUADRADA Y CUBICA PARA NIÑOS DE PRIMARIA
RAIZ CUADRADA Y CUBICA PARA NIÑOS DE PRIMARIA
 

Normas para optimizar el peso y velocidad de carga de páginas web

  • 1. Identificación de las normas PARA FILTRAR EL ACCESO
  • 2. Peso de paginas • • Tamaño de una página web El tamaño (peso) de las páginas es crítico: la velocidad con la cual las páginas pueden ser descargadas y ser mostradas. • El tiempo de cuanto tardan las peticiones de un usuario en llegar a su pantalla ha sido el tema de muchas pruebas con usuarios en los últimos años. En general, tiempo de carga debe ser menos de 10 segundos para tener la atención del usuario; si no, el usuario cancelará la sesión. • Los estudios del peso de carga de la página también han probado que los websites que son más rápidos, consiguen más tráfico. • • ¿Cómo deben ser las páginas? La página debe teenr el tamaño que se puede descargar en el plazo de 10 segundos, asumimos que la mayoría de los usuarios tendrán acceso a un web de la Red con un módem, puesto que esta es la situación típica en la mayoría de los casos. • Esta tabla indica los tiempos y tamaños de las páginas para alcanzar ambos 1-segundos y de 10 segundos tiempos de descarga: • • • Sistema de conexión 1 Segundo 10 Segundos Modem 56K 1,5 KB 25 KB ADSL 6 KB 110 KB
  • 3. Peso de paginas • Esto significa que los Web deben de ser de un tamaño menor de 150 KB donde sea posible. • Además, cualquier archivo más grande de sobre 250 KB debe ser separado hacia fuera y ser identificado al usuario como un archivo grande, preferiblemente con una indicación de aproximadamente como es de grande. • El tamaño total de la página incluye el tamaño de todos los gráficos utilizados, puesto que tendrán que ser descargados, también, a menos que se estén reutilizando. (véase el uso de imágenes en el web).
  • 5. Diagramación de paginas • • • • • • Diagramación de páginas web Los proyectos web que generan un resultado de alta calidad se construyen a partir de un ”concepto creativo” que se compone de las diferentes ideas del cliente, la visión del diseñador gráfico y la intervención del diseñador (o diagramador) web. El objetivo fundamental de la diagramación web es lograr la facilidad de navegación en el sitio, lo que permite al usuario conseguir la información que le interesa de una manera rápida y eficiente. El proceso de diagramar una página web, consiste en decidir: ¿Donde colocar sus elementos y por qué?, al ejecutar este paso con los objetivos básicos de crear vínculos para que la navegación sea intuitiva y crear una estructura adecuada de código de programación, se ha empezado por el buen camino. Diagramar y programar un sitio web partiendo de los objetivos ya mencionados garantiza la funcionalidad del mismo. Una página web visualmente atractiva que además sea altamente funcional son los ingredientes básicos de un proyecto de calidad y con un alcance tan grande como la misma red.
  • 6. USO DE PRESENTACION EN FLASH • La mayoría de las presentaciones "Flash" como página inicial, impiden que las "arañas" que utilizan los buscadores puedan entrar al sitio y recorrerlo. Producto de esto, los usuarios que no conozcan su dirección, nunca podrán ver sus contenidos a partir de un buscador. Y ya se sabe, si no está en Google, no está en Internet. • Existe otro problema más importante asociado al uso de páginas de presentación, para el cual hay dos bandos: por un lado los dueños de los sitios quieren que su portada muestre algo moviéndose y sonando llamativamente; por otro, los usuarios sólo esperan presionar el enlace que los lleve a la información real. Es decir buscan el texto "skip intro" o "saltar introducción", para no verlo (muchos sitios web ni siquiera incluyen esta alternativa) ¿Qué le parecería a usted por ejemplo, que el sitio web de noticias que habitualmente visita decidiera obligarlo a que vea animación de 30 seg. cada vez que desee leer un artículo? Su objetivo debe ser siempre atraer usuarios a su sitio web, no alejarlos • http://www.aeurus.cl/recomendaciones/2006/07/18/presentacionesflash-uso-y-abuso-en-el-diseno-web/
  • 7. Uso de marcos o frames • En los primeros sitios web los marcos o frames se utilizaban con mucha frecuencia. Tenía más sentido utilizarlos para reducir los tiempos de carga con conexiones lentas. • Todavía siguen naciendo webs nuevas que utilizan esta tecnología. Es muy típico un marco izquierdo con el menú de las demás páginas, o una cabecera con el logotipo y una presentación en un marco superior. • Los buscadores más importantes han empezado a indexar los contenidos de framesets. De todas maneras todavía quedan muchos robots que no tienen capacidad de seguir los enlaces incorporados en este tipo de tecnología. • La programación típica de una página con frames aparece de la siguiente manera: • <frameset rows="*"> <frame name="principal" src="http://www.delosprimeros.com"> <noframes> <body> <p>Esta página utiliza frames, pero su navegador no los soporta</p> </body> </noframes> </frameset> http://www.delosprimeros.com/marcos-y-posicionamiento.htm
  • 8. Uso de las imágenes de fondo • • • • • • Cada vez viene siendo más habitual situar las imágenes que aparecen en una web en el archivo css. La importancia de separar el contenido del diseño adquiere más importancia si estamos trabajando en un diseño accesible y posicionable. En el posicionamiento en google u otros buscadores esta separación es obligatoria. Google no entiende de diseños sólo interpreta el texto que lee. Habitualmente se utiliza para diseño de marcos de la página fondo degradados, esquinas redondeadas, muy de moda actualmente, pero también se pueden usar en creación de menús con formas de pestañas. La utilización de esta técnica es bien sencilla. La sección que va a contener la imagen de fondo deberá estar identificada mediante un id. Esta identificación sirve para crear la referencia en el archivo css del siguiente modo: En el fichero html: < div id="nombre" >Texto que deberá aparecer por encima de la imágen de fondo< / div > En el fichero css: #nombre { background: color url(”dirección de la imagen”) repeat | no repat … } De esta forma conseguimos efectos interesantes sin apenas ensuciar el código html http://www.abartiateam.com/diseno-web/200602_uso-de-imagenes-de-fondo-en-el-diseno-web
  • 9. Uso de meta tags adecuadamente • • 2. Metatags: un manual de des-uso 1) NO hacer uso del metatag <refresh>. Muy peligroso, sobretodo si hay varias páginas con este metatag, que apunten a una tuya. Si bién se puede hacer un uso totalmente correcto de éste metatag, el abuso que han hecho de él muchos webmasters (backdoors), hace que no sea nada recomendable, ni siquiera en su "uso correcto", olvidar que existe este metatag es lo mejor que se puede hacer, si has de redireccionar una web, utiliza un script, mejor si el script se halla fuera de la misma. • 1) No poner muchas palabras en los metatags. En muchos casos es contraproducente, en la resta de casos inútil. • 2) No poner en los metatags palabras ('gancho'), como sexo, gratis, sex... o cualquier otra que después no salga en la web. Sinó harás que quien llegue buscando una palabra que después no encuentra marche enseguida, si es que llega alguien ya que son palabras de fuerte competencia. Además algunos buscadores cuando encuentran páginas con palabras de tipo sexual, no las indexan. • 3) No utilizar "metatags superfluos" del tipo author, generator..., pueden dar a algunos motores problemes para leer el resto de metatags que si que pueden ser interesantes. Muchos de éstos suelen leer el principio de las páginas, y otros dan mucha importancia a lo primero que encuentran. Además, si no tienen ninguna utilidad, ¿por que incluirlos? • 4) No repetir las palabras clave en el mismo metatag. Se considera spam por los principales buscadores. • 5) Para Google: no hacer mucho caso de los metatags, Google los ignora (es la tendencia también de la mayoría de buscadores). Los que no ignora hacen bajar el ránking, p.e.: no-cache. • 6) No utilizar el metatag Keywords, los principales buscadores ya no lo utilizan, convirtiéndose en una pérdida de tiempo. • • http://www.nitium.com/promocion/anti_promo/metatags.htm