Escolar Documentos
Profissional Documentos
Cultura Documentos
Enumeremos algunas pautas que nos aclaren como estructurar y colocar las etiquetas en el
PDF:
También podemos asignar las propiedades del documento antes de crear el PDF. Por
ejemplo desde Word en su versión de Office 2007 se hace desde: Preparar-Propiedades.
http://www.consultorweb.es/como-etiquetar-posicionar-archivo-pdf/46/
Un site map (o sitemap) es un archivo XML que lista las páginas en un sitio Web,
organizadas comúnmente de forma jerárquica. Esto ayuda a los visitantes y a los motores
de búsqueda a hallar las páginas en un sitio.
“El Protocolo Sitemap le permite informar a los motores de búsqueda acerca de qué URL de
sus sitios Web se pueden rastrear. En su forma más simple, un Sitemap que utiliza el
Protocolo Sitemap es un archivo XML que enumera las URL de un sitio.” Por Google.
https://www.google.com/webmasters/tools/docs/es/protocol.html
https://www.google.com/webmasters/tools/docs/en/sitemap-generator.html
http://www.javascriptlint.com/online_lint.php
CSS Sprites are the preferred method for reducing the number of image requests. Combine
your background images into a single image and use the CSS background-image and
background-position properties to display the desired image segment.
“Los CSS Sprites es una sencilla y efectiva técnica de CSS que nos permite ahorrar ancho de
banda.”
Image maps combine multiple images into a single image. The overall size is about the
same, but reducing the number of HTTP requests speeds up the page. Image maps only
work if the images are contiguous in the page, such as a navigation bar. Defining the
coordinates of image maps can be tedious and error prone. Using image maps for
navigation is not accessible too, so it's not recommended.
Usa el menor número de archivos posible. Es mejor un sólo archivo de 30Kb que 3 archivos
de 10Kb.
Piensa que para cada uno de los archivos estáticos enlazados desde un documento HTML (
CSS, Javascript, imágenes, etc... ), éste debe realizar una conexión HTTP y lanzar una
petición, con sus correspondientes cabeceras, cookies si las hubiere... todo suma y al final,
tanto en tamaño como en tiempo de descarga, penalizarás al usuario
http://www.csssprites.com/
http://spritegen.website-performance.org/
Avoid Redirects
Redirects are accomplished using the 301 and 302 status codes. Here's an example of the
HTTP headers in a 301 response:
The browser automatically takes the user to the URL specified in the Location field. All the
information necessary for a redirect is in the headers. The body of the response is typically
empty. Despite their names, neither a 301 nor a 302 response is cached in practice unless
additional headers, such as Expires or Cache-Control, indicate it should be. The Meta
refresh tag and JavaScript are other ways to direct users to a different URL, but if you must
do a redirect, the preferred technique is to use the standard 3xx HTTP status codes,
primarily to ensure the back button works correctly.
Iframes allow an HTML document to be inserted in the parent document. It's important to
understand how iframes work so they can be used effectively.
<iframe> pros:
<iframe> cons:
No 404s
HTTP requests are expensive so making an HTTP request and getting a useless response (i.e.
404 Not Found) is totally unnecessary and will slow down the user experience without any
benefit.
http://developer.yahoo.com/performance/rules.html
• En esta Tag pondremos las palabras por las cuales, queremos que nuestro sitio sea
encontrado por los robots de búsqueda, separada por comas. No será conveniente
utilizar palabras repetidas en este apartado, ya que muchos robots de indexación de
páginas las rechazan. Tampoco es conveniente hacer una lista de términos
demasiado larga, normalmente con 20 o 30 palabras es más que suficiente.
• En esta Tag deberemos poner la descripción de nuestra página, y será por la cual
será indexado nuestro sitio por los robots de los buscadores, confeccionaremos, por
tanto, una frase de extensión no muy larga y que describa a la perfección nuestro
sitio. Si no incluimos esta etiqueta, los buscadores pueden presentar nuestra página
simplemente por el título del sitio, o tomando esa cadena de 256 caracteres como
los que aparecen en nuestra página índice, mostrándose al usuario. Al igual que en
la etiqueta Keywords, no es conveniente repetir palabras, ya que muchos robots,
penalizan el spam.
• Por otro lado, si que es conveniente, que en esta cadena de descripción de nuestro
sitio, aparezcan palabras que anteriormente colocamos en la etiqueta Keywords.
Según el W3C (y WDG) los ficheros HTML (páginas Web normales) deben tener una serie de
"cabeceras" o identificadores de la versión que se utiliza. Aunque esto no es estrictamente
necesario, la W3C lo recomienda para que se siga la "norma".
Este es el encabezado que deberían llevar todos los documentos XHTML1.0 estríctos
acordes a las especificaciones de la W3C. Es un aviso para que el agente de usuario sepa
que tipo de documento va a interpretar. Para ser más específicos diremos que al ser un
documento de tipo strict.dtd, los elementos utilizados serán sólo los incluídos en el lenguaje
XHTML 1.0.
Un buen title es la clave del éxito del SEO y un buen posicionamiento en los buscadores. El
Tag Title es el que hace referencia al título de tu página Web y se despliega en la barra de
título de tu navegador.
Como les decía anteriormente, prestemos mucha atención a este tag, yo tengo algunos
pasos y trucos que utilizo cuando hago los títulos.
http://www.chicaseo.com/optimizacin-seo-tag-title-en-wordpress/
http://www.oscatalogo.com/guia-de-optimizacion-para-motores-de-busqueda-seo/
Para mejorar el indexado de todas las páginas del sitio es recomendable utilizar URLs que en
vez de contener datos y números pocos legibles como
http://www.dominio.com/carpeta1/15798436/x1/00004564.html , contengan palabras
relevantes que describan la pagina del sitio como
http://www.dominio.com/articulos/articulos-mas-buscados.html
Con palabras descriptivas que hagan referencia al tema de la pagina.
• Utiliza palabras en las URL. Utilizando categorías y nombres de archivo descriptivos
facilita el rastreo del las paginas de su sitio a los motores de búsqueda.
• Procure utilizar signos de puntuación en sus URL. Una URL como
http://www.example.com/vestido-verde.html es mucho más práctica que una
como http://www.example.com/vestidoverde.html. Le recomendamos el uso de
guiones normales (-) en lugar de guiones bajos (_) en las URL.
• Crea una estructura de directorios simple.
http://www.oscatalogo.com/guia-de-optimizacion-para-motores-de-busqueda-seo/
http://www.google.com/support/webmasters/bin/answer.py?answer=76329&hl=es
Todas las imágenes pueden tener un nombre de archivo definido y un atributo “alt”, de los
cuales podemos aprovecharnos. Usando los Atributos ALT y TITLE Para Mayor Accesibilidad
http://www.adseok.com/tips-seo/google-prefiere-las-etiquetas-alt-para-las-imagenes/
http://googlewebmastercentral.blogspot.com/2007/12/using-alt-attributes-smartly.html
IE6 no soporta esta propiedad tan útil (como tantas otras). La solución: un simple truco de
CSS que involucra !important y cómo IE6 no lo interpreta como debería.
23. ul#menu {
height: auto!important; /* para los browsers buenos */
height: 175px; /* para IE5+ */
min-height: 175px; /* para los browsers buenos */
}
http://www.csslab.cl/2007/10/05/alto-minimos-para-ie6-y-el-resto-claro/
Cuando tratamos de maquetar nuestras páginas con CSS mediante elementos flotantes, no
tarda en aparecer un elemento contenedor, que no rodea a los elementos contenidos, y
esto resulta un verdadero inconveniente, ya que a menudo deseamos que los elementos
con hijos flotantes, se comporten como dios manda y rodeen por completo a sus hijos.
24. clear{
25. clear:both;
26. }
Esta técnica es poco elegante, ensucia nuestro marcado HTML con un elemento ajeno al
contenido, e incluye un elemento "vacío" pero funciona.
La solución definitiva
El valor por defecto es visible, que hace la caja contenedora crezca para adaptarse al
tamaño de sus hijos. El resto de valores mantienen las dimensiones especificadas con width
y height, pero nos permiten controlar el comportamiento de las barras de desplazamiento,
mostrándolas siempre (scroll), ocultándolas siempre (hidden) o mostrándolas solo cuando
sea necesario (auto)
Pues resultan todos los valores posibles, menos visible asumen que se han especificado
unas dimensiones, y si no es así... obliga a que se calculen!!
Con overflow le recordamos a una caja que tiene hijos, flotantes, pero hijos.
27. div.container {
28. border: 1px solid #000;
29. overflow: hidden; /*Para IE bajo MAC y todos*/
30. width:100%; /*es obligatorio establecer el ancho*/
31. }
32.
33. /*DIV sin ningún float y que se adapte al alto */
34. div.pie {
35. border: 1px solid #000;
36. overflow: hidden; /*Para IE bajo MAC y todos*/
37. width:100%; /*es obligatorio establecer el ancho*/
38. clear:both;
39.
40. }
http://www.planseldon.com/blog/hasta-siempre-clearboth/
http://www.quirksmode.org/css/clearing.html
Conditional comments
Conditional comments only work in Explorer on Windows, and are thus excellently suited to
give special instructions meant only for Explorer on Windows. They are supported from
Explorer 5 onwards, and it is even possible to distinguish between 5.0, 5.5 and 6.0.
55. img {
56. -ms-interpolation-mode: bicubic;
57. }
http://msdn.microsoft.com/en-us/library/ms530822(VS.85).aspx
http://samples.msdn.microsoft.com/workshop/samples/author/css/msInterpolation.htm
58. div.container {
59. border: 1px solid #000;
60. overflow:hidden;
61. width:100%;
62. }
63.
64. div.left {
65. width: 45%;
66. float: left; /*flotando izquierda*/
67. border:1px #000 solid;
68. }
69.
70. div.right {
71. width: 45%;
72. float: right; /*flotando derecha*/
73. border:1px #000 solid;
74. }
Método 2
Debe existir una capa contenedora y la novedad es establecer todos los divs (Columnas) con
float: left;
75. div.container {
76. border: 1px solid #000;
77. overflow:hidden;
78. width:100%;
79. }
80.
81. div.columna1 {
82. width: 30%;
83. float: left; /*a la izquierda*/
84. border:1px #000 solid;
85. }
86.
87. div.columna2 {
88. width: 40%;
89. float: left; /*a la izquierda*/
90. border:1px #000 solid;
91. }
92. div.columna3 {
93. width: 30%;
94. float: left; /*a la izquierda*/
95. border:1px #000 solid;
96. }
97. /*Más columnas N */
98. div.columna4 {
99. width: 10%;
100. float: left; /*a la izquierda*/
101. border:1px #000 solid;
102. }
Puede lograrse estableciendo dentro del CSS el alto de línea del texto igual al alto total de
la div. Así, el texto ubicado dentro de la div se centrará verticalmente en ella. El único
problema surge cuando el texto tiene más de una línea, donde se desfasaría todo. Si este es
tu caso prueba con introducir un corte de línea </br> en vez de cerrar y abrir un nuevo
párrafo.
103. #texto-centrado{
height: 150px; /* alto de la div */
line-height: 150px; /* esto es lo que centra el texto verticalmente
*/
104. }
http://www.studiomate.com.ar/blog/css/centrar-texto-verticalmente-con-css
Alineación bottom
CSS 2 no soporta alineación vertical, así que para alinear verticalmente un contenido de una
capa tenemos que utilizar técnicas o trucos alternativos.
Una pequeña puntualización, no es nada aconsejable usar los guiones bajos para
identificadores y clases (en cambio no hay problemas con los guiones medios), no lo
reconocen algunos navegadores (como el Netscape 4).
“En CSS2, los identificadores (incluyendo los nombres de los elementos, clases e ID de los
selectores) pueden contener sólo caracteres [A-Za-z0-9] y los caracteres 161 en adelante en
ISO 10646, más el guión (-); no pueden comenzar con un guión o un número.”
http://www.pixelovers.com/css-consejos-buenas-practicas-11635
http://www.sidar.org/recur/desdi/traduc/es/css/syndata.html#q4
Es muy buena idea empezar tu hoja de estilos general con una serie de declaraciones que
reseteen propiedades como los margin, los padding y los border de los elementos más
comunes. Echa un vistazo al reset.css que ofrece la librería de Yahoo o al artículo de Daniel
que lo comenta más a fondo.
YUI Reset CSS, desarrollado por Yahoo, que normaliza el renderizado por defecto de los
elementos HTML.
http://www.torresburriel.com/weblog/2007/03/11/reset-css-o-como-empezar-de-nuevo-
manejando-estilos/
Css y las tablas
Caption en html
border-collapse
Esta propiedad determina como deben mostrarse los bordes de elementos contiguos de las
tablas.
Admite dos valores: collapse y separate.
border-collapse:collapse indica que los bordes contiguos se solapan, mostrando uno solo.
border-collapse:separate muestra los dos bordes contiguos.
border-collapse:collapse
a b c
d e f
border-collapse:separate
a b c
d e f
http://www.ignside.net/man/css/tablas.php
Web Tools for Quality, Accessibility, Standards Compliance:
• http://valet.htmlhelp.com/
• http://jigsaw.w3.org/css-validator/ W3C
• http://validator.w3.org/check : W3C
• http://floele.flyspray.org/csstidy/css_optimiser.php?lang=en CSS Formatter and
Optimiser. Limpieza automática de código sucio.
• http://cssdrive.com/index.php/main/csscompressor/ Comprime tu CSS para
incrementar la velocidad de carga de tu sitio Web.
• http://www.sidar.org/hera/ : HERA es una utilidad para revisar la accesibilidad de las páginas
Web de acuerdo con las recomendaciones de las Directrices de Accesibilidad para el Contenido Web
1.0 (WCAG 1.0).
• http://www.guiaweb.gob.cl/ Guía Web 2.0