Wallpapers (exteriores)
0
[2] Una vez hecho esto, ya podemos usar el efecto en cualquier entrada, para aplicarlo tenemos que añadir unas líneas de código en la parte de la entrada que vayamos a mantener oculta hasta que pinchemos sobre el texto que usemos como "enlace":
Notas:
EJEMPLO (Texto enlace) ▼
Expandir y contraer partes de un post con Scriptaculous
Antes ya vimos como expandir y contraer cualquier gadget usando el efecto "slide" de Scriptaculous.
En esta ocasión vamos a ver como usar el mismo efecto para expandir y contraer partes de las entradas.
[1] El primer paso es incluir el código necesario para el uso de cualquier efecto con Scriptaculous (como ya vimos en la entrada sobre Scriptaculous, este código solo es necesario incluirlo una vez en la plantilla) así que, si ya lo tenemos incluido nos saltamos este paso.
Colocamos el código antes de </head>:
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>
[2] Una vez hecho esto, ya podemos usar el efecto en cualquier entrada, para aplicarlo tenemos que añadir unas líneas de código en la parte de la entrada que vayamos a mantener oculta hasta que pinchemos sobre el texto que usemos como "enlace":
<a href='#' onclick='Effect.toggle("UNO","slide"); return false'>Texto enlace ▼</a><div id='UNO' style='display: none;'>
Aquí la parte oculta de la entrada
</div>
Notas:
Fijaros que en el código aparece dos veces la palabra "UNO", esa palabra es la id del <div> y tendrá que ser distinta cada vez que usemos el código para que el efecto funcione sin problemas.
Procuraremos incluir el código una vez editada la entrada desde la pestaña "Edición de HTML" del editor y publicar directamente desde ahí, sin volver a la pestaña "Redactar".
Procuraremos incluir el código una vez editada la entrada desde la pestaña "Edición de HTML" del editor y publicar directamente desde ahí, sin volver a la pestaña "Redactar".
EJEMPLO (Texto enlace) ▼
0
Preguntas con posible respuesta
Hace tiempo alguien dejó un comentario que decía ¡Gem@ no te mueras nunca! Me hizo gracia la expresión y lo interpreté como una manifestación espontánea de aprecio. Al poco, en los comentarios de Vagabundia alguien preguntaba algo así como si había pensado en la posibilidad de faltar algún día con una pregunta concreta ¿Cómo lo sabrían sus lectores?
A Eulalia le comentaban el otro día “que los que saben más que ella no visitan su blog” y yo me pregunto ¿hay un medidor para saber hasta dónde llegan nuestros conocimientos? Y aún así ¿cómo se puede tener constancia de las personas que nos visitan o nos leen si no eres el autor del blog? Todo esto me lleva a pensar que muchas veces se escribe bajo la ignorancia y no debería ser así. Para mí es como decirle a alguien “Tú sabes menos que otros” y no es justo ni tampoco es cierto.
El último comentario que me ha llamado la atención es el de alguien “curiosamente anónimo “que pregunta ¿Qué tipo de blog de ayuda es el que lo mismo cuelga un vídeo que un post sobre iconos?
Aquí valdría eso de ¿Qué es un blog de ayuda?Alguna vez he etiquetado Gem@ BLOG como blog de ayuda gran error mío porque la finalidad de este blog no es ayudar, la finalidad es lo que vaya surgiendo en cada momento. Si un día me apetece hablar del tiempo hablaré del tiempo, y si se tercia hablar sobre la araña lobo africana o el agujero de la capa de ozono también lo haré, al otro lo puedo hacerlo sobre Blogger o una herramienta fantástica y aquí no pasa nada.
No hay nada que me guste más que perderme en las entrañas de una plantilla y comprender ese código a veces tan incomprensible y es lógico que cuando algo se hace una y otra vez se tenga cierta facilidad, también es justo reconocer que diariamente aprendemos de otros bloggers y no necesariamente de “blogs de ayuda” sino de cualquier blog que generosamente comparte con otros ideas y soluciones.
Contesto los comentarios sobre Blogger o cualquier otro tema y si no tengo respuesta no me la invento, intento proporcionar el lugar donde obtener información sobre lo que preguntan, a eso alguien que sabe mucho del tema le llama COMPARTIR, tiene usted mucha razón J.Miur y es lógico que no se canse de repetirlo.
Siempre digo que los mejores escritos son los que se hacen sin borrador, aquellos que salen de dentro porque lo pienso y siento aquí y ahora, los que escribimos para nosotros mismos sin tener en cuenta lo que puedan pesar los demás y nos traiga sin cuidado que se rompa la imagen que otros tienen sobre nosotros.
Con los comentarios debería ser de igual forma. Lástima que algunos sean tan espontáneos que rocen la estupidez aunque por suerte sólo se ven de tarde en tarde.
0
Dos herramientas para feeds
A veces, puede ser útil leer los feeds de un sitio y mostrarlos de alguna manera distinta. Estas son dos herramientas online que lo permiten:
rss2html: Genera direcciones independientes que podemos enlazar. Primero, seleccionamos el esquema del diseño y los colores (de listas predefinidas); luego, ingresamos la URL de los feeds que podrían ser la del blog:
http://miBlog.blogspot.com/feeds/posts/default
la de una etiqueta:
http://miBlog.blogspot.com/feeds/posts/summary/-/nombreEtiqueta
la de los comentarios:
http://miBlog.blogspot.com/feeds/comments/default
El resultado, será una URL que podemos enlazar; por ejemplo esta.
FeedSweep: Hace algo similar pero además, eprmite combinar varios feeds en uno. Ingresamos la URL de uno o varios y luego vamos seleccionando entre las múltiples opciones de configuración, tanto gráficas como filtros. El resultado es un código que podemos insertar en cualquier página web.
rss2html: Genera direcciones independientes que podemos enlazar. Primero, seleccionamos el esquema del diseño y los colores (de listas predefinidas); luego, ingresamos la URL de los feeds que podrían ser la del blog:
http://miBlog.blogspot.com/feeds/posts/default
la de una etiqueta:
http://miBlog.blogspot.com/feeds/posts/summary/-/nombreEtiqueta
la de los comentarios:
http://miBlog.blogspot.com/feeds/comments/default
El resultado, será una URL que podemos enlazar; por ejemplo esta.
FeedSweep: Hace algo similar pero además, eprmite combinar varios feeds en uno. Ingresamos la URL de uno o varios y luego vamos seleccionando entre las múltiples opciones de configuración, tanto gráficas como filtros. El resultado es un código que podemos insertar en cualquier página web.
0
tubePlayer: Reproductor de videos de YouTube
tubePlayer es un reproductor de vídeos de Youtube personal creado por unijimpe y que tiene características muy interesantes. Es muy liviano, no necesita scripts adicionales, podemos darle el tamaño que se nos ocurra y tiene todos los controles elementales incluyendo la posibilidad de verlos en pantalla completa.
Para utilizarlo, descargamos el ZIP
, lo descomprimimos y todo lo que necesitamos es alojar el archivo tubePlayer.swf en un servidor, podemos hacerlo en Fileden, en ImageShack, en Xoo Image o donde más nos guste.
Hecho eso, basta agregar el código HTML tal y como lo hacemos normalemnte para incluir cualquier otro reproductor:
Para utilizarlo, descargamos el ZIP
, lo descomprimimos y todo lo que necesitamos es alojar el archivo tubePlayer.swf en un servidor, podemos hacerlo en Fileden, en ImageShack, en Xoo Image o donde más nos guste.Hecho eso, basta agregar el código HTML tal y como lo hacemos normalemnte para incluir cualquier otro reproductor:
<object width="501" height="310" id="movie" type="application/x-shockwave-flash" data="URL_tubeplayer.swf">
<param name="movie" value="URL_tubeplayer.swf" />
<param name="FlashVars" value="videoId=XXXXXXXXXXX" />
<param name="allowFullscreen" value="true" />
</object>
donde:
- en width y height colocamos el tamaño deseado
- reemplazamos URL_tubeplayer.swf por la URL del archivo que hayamos alojado
- y colocamos en XXXXXXXXXXX el ID del video a reproducir
http://www.youtube.com/watch?v=m3_x2I8FQ8QEso es todo. Eventualmente, podemos agregarle el parámetro de autoplay de este modo:
<param name="FlashVars" value="videoId=XXXXXXXXXXX&autoPlay=true" />
0
Rotar, transformar, jugar con CSS
En un foro, alguien comentaba burlonamente: "Esto funcionaba en IE5.5, hace 10 años. Pasó mucho tiempo hasta que se incorporó a navegadores como Safari y recién ahora es posible aplicarlo en Firefox 3.5 ... bueno ... pero, aún le falta implementar la parte de 3D .. tal vez, en algunos años ..."
¿De que hablaba? De una propiedad CSS llamada genéricamente Transform y que permite eso que dice su nombre, transformar el contenido de un elemento.
Tenía razón. Lentamente, los navegadores están incorporando algunos de estos filtros que ya existían aunque les ponen otros nombres y nos obligan a escribir muchas más cosas (¿cómo era ese cuento chino del respeto a los estándares?) ... en fin, no importa, lo importante es que podemos usarlos aunque debamos escribir de más:
¿De que hablaba? De una propiedad CSS llamada genéricamente Transform y que permite eso que dice su nombre, transformar el contenido de un elemento.
Tenía razón. Lentamente, los navegadores están incorporando algunos de estos filtros que ya existían aunque les ponen otros nombres y nos obligan a escribir muchas más cosas (¿cómo era ese cuento chino del respeto a los estándares?) ... en fin, no importa, lo importante es que podemos usarlos aunque debamos escribir de más:
- DXImageTransform.Microsoft.BasicImage (Internet Explorer)
- -webkit-transform (Safari | Chrome)
- -moz-transform (Firefox)
Un tweet de DanielUlczyk me lleva a snook.ca antes de leerlo en los feeds y allí nos muestran un ejemplo aplicado a las fechas estilo calendario. No explican nada pero bueno ... sería algo así:
31July2009
<style type="text/css">
.example-date {
background-color: #123;
border: 1px solid #345;
padding: 45px 5px 0;
position:relative;
width: 60px;
}
.example-date .example-day {
font-size: 45px;
left: 5px;
line-height: 45px;
position: absolute;
top: 0;
}
.example-date .example-month {
font-size: 25px;
text-transform: uppercase;
}
.example-date .example-year {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
display: block;
position: absolute;
right: -5px;
top: 15px;
}
</style>
<div class="example-date">
<span class="example-day">31</span>
<span class="example-month">July</span>
<span class="example-year">2009</span>
</div>
Aplicándolo así, directamente, es poco flexible, el resultado dependerá del tipo de fuente y sobre todo, de la longitud de los textos:
28jul2009 | 28ago2009 | 1dic2009 |
Así que lo mejor es usar unidades relativas como em. Este es un un ejemplo basado en la fecha de los posts:
31jul2009 | 31jul2009 | 28ago2009 | 1dic2009 |
<style type="text/css">
.fechademo {
display: block;
font-family: Verdana,Arial;
font-size: 41px;
font-weight: normal;
height: 1em;
line-height: 18px;
padding: 10px 0 0;
position: relative;
width: 1.8em;
}
.diademo {
color: #789;
display: block;
font-family: Times New Roman;
letter-spacing: -2px;
line-height: .7em;
text-align: center;
width: 1.8em;
}
.mesdemo {
color: #DCDCDC;
display: block;
font-size: 0.4em;
text-align: center;
}
.aniodemo {
color: #D93;
display: block;
font-size: 0.35em;
position: absolute;
right: -0.6em;
top: 16px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>
<div class="fechademo">
<span class="diademo">28</span>
<span class="mesdemo">ago</span>
<span class="aniodemo">2009</span>
</div>
La rotación está definida en grados tanto valores positivos como negativos aunque en IE se define con un código numérico:
-webkit-transform: rotate(VALORdeg);
-moz-transform: rotate(VALORdeg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=VALOR);
donde:
0 es no rotar
1 rota 90 grados
2 rota 180 grados
3 rota 270 grados (-90 grados)
 |  |  |  |
En resumen, hay diferencias y detalles que deberán tenerse en cuenta pero:
Rotar no es el único efecto posible, hay muchos más y vale la pena mirar, tanto para Internet Explorer como para Firefox
0
Páginas estáticas sencillas
Cuando se habla de "páginas estáticas" nos estamos refiriendo a que ciertos accesos al blog, no sean entradas sino algún tipo de página especial, distinta al resto pero, en Blogger, esa posibilidad no está contemplada, sólo pueden agregarse entradas (posts) y estos, se muestran ordenados cronológicamente, partiendo del más reciente y terminando en el más antiguo.
Hay muchas formas de simular esas páginas. La más elemental, si se trata de darles un aspecto gráfico muy especial, es crear otro blog y allí colocar la plantilla que nos guste o copiar la que usamos normalmente y modificarla. Como lo que normalmente uno coloca en esas páginas estáticas es información suplementaria como índices, formularios de contacto, condiciones de uso, etc, no tiene importancia si la URL es otra, es más, sería incluso mejor que no las indexemos en los busadores.
Pero, también es posible simularlas en el propio blog, personalizando los posts para que no parezcan lo que son. Ahora, El escaparate de Rosa
agrega una alternativa más que es una idea muy sencilla y muy inteligente.
Lo que hace el truco es aprovechar los códigos condicionales que ya tiene Blogger, en este caso, la condición:
Hay muchas formas de simular esas páginas. La más elemental, si se trata de darles un aspecto gráfico muy especial, es crear otro blog y allí colocar la plantilla que nos guste o copiar la que usamos normalmente y modificarla. Como lo que normalmente uno coloca en esas páginas estáticas es información suplementaria como índices, formularios de contacto, condiciones de uso, etc, no tiene importancia si la URL es otra, es más, sería incluso mejor que no las indexemos en los busadores.
Pero, también es posible simularlas en el propio blog, personalizando los posts para que no parezcan lo que son. Ahora, El escaparate de Rosa
agrega una alternativa más que es una idea muy sencilla y muy inteligente.Lo que hace el truco es aprovechar los códigos condicionales que ya tiene Blogger, en este caso, la condición:
<b:if cond='data:post.allowComments'>
...
</b:if>
que ejecuta un código si y sólo si, los comentarios de una entrada están habilitados.
En el editor de entrdasa, si hacemos click en el enlace inferior Opciones de entrada, se desplegarán una serie de alternativas que controlan la forma en que se manejarán los comentarios de esa entrada exclusivamente. Podemos establecer una de tres posibilidades y en este caso, marcaremos la última:
En el editor de entrdasa, si hacemos click en el enlace inferior Opciones de entrada, se desplegarán una serie de alternativas que controlan la forma en que se manejarán los comentarios de esa entrada exclusivamente. Podemos establecer una de tres posibilidades y en este caso, marcaremos la última:
Comentarios de los lectores
Permitir
No permitir, mostrar existentes
No permitir, ocultar existentes
Permitir
No permitir, mostrar existentes
No permitir, ocultar existentes
En la misma ventana, cambiamos la fecha por una muy vieja y de esa manera, al publicar la entrada, esta aparecerá al final del blog y no en el home.
Ahora, faltaría condicionar cada sección de las entradas en Diseño | Edidión HTML y, expandiendo los artilugios, buscamos la fecha y agregamos lo que esta en color para que sólo se muestre si los comentarios están habilitados:
Ahora, faltaría condicionar cada sección de las entradas en Diseño | Edidión HTML y, expandiendo los artilugios, buscamos la fecha y agregamos lo que esta en color para que sólo se muestre si los comentarios están habilitados:
<b:if cond='data:post.allowComments'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
</b:if>
Lo mismo haremos con el pié de pagina de las entradas donde, normalmente, se muestra al autor, las etiquetas y todo tipo de información adicional:
<b:if cond='data:post.allowComments'>
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
.......
</div>
<div class='post-footer-line post-footer-line-2'>
.......
</div>
<div class='post-footer-line post-footer-line-3'>
.......
</div>
</div>
</b:if>
Siempre dentro del mismo Elemento Blog, es posible condicionar cualquier otra cosa usando el mismo esquema y así también, agregar estilos CSS que sobrescriban los estilos por defecto:
<b:if cond='data:post.allowComments'>
... los comentarios están habiitados ...
<b:else/>
<style type="text/css">
/* definiciones si los comentarios no están habiitados */
</style>
</b:if>
0
El header de una plantilla Minima viene definido en la hoja de estilos de la siguiente forma [+/-]
Vamos a dividir el header en dos partes nos situamos en
y lo sustituimos por
y en su lugar añadimos
Para eliminar el borde del bloque exterior suprimimos la línea en negrita de:
Ya sólo queda añadir contenido al nuevo gadget para personalizar el bloque si lo deseamos.
El borde gris nos ayuda para saber si el gadget queda centrado, lo podemos eliminar suprimiendo border:1px solid #ccc;
Añadimos un fondo con background: transparent url(url imagen);
Al dividir la cabecera tenemos la comodidad de cambiar de gadget sin necesidad de hacer grandes cambios únicamente añadiendo un nuevo gadget en plantilla de diseño y eliminando el anterior o incluso añadir más de un gadget.
No olvidemos que el gadget de cabecera sigue estando así que si preferimos añadir una imagen en lugar de título podemos hacerlo igual que antes de hacer las modificaciones.
¿Izquierda o derecha? salimos de dudas cambiando la flotación de nuevo gadget (header-derecha) por la flotación del gadget de cabecera de forma que quede así.
Header dividido
El header es una de las cosas a las que más importancia damos en un diseño, es lo primero que vemos al acceder a una página.Personalmente me gustan poco recargados, un título, una imagen que nos caracterice y ya. Pero... la tentación es grande y probar variaciones no cuesta nada así que ¿por qué no hacerlo?
J.Miur nos mostró una serie de entradas sobre el header, aprendimos a entenderlo y jugamos un buen rato cambiando, eliminando y añadiendo imágenes a nuestro antojo.
Pizcos nos explica como añadir un "Header múltiple" algo que más de uno no va a resistirse a probar, estamos a la espera de la segunda parte que promete ser interesante y es lo que más nos gusta a todos la personalización o añadir estilos.
Rosa nos explicaba una idea de BlogU "Dividir la cabecera" el resultado es situar el gadget de cabecera proporcionado por Blogger a la izquierda y añadir a la derecha la posibilidad de añadir un nuevo gadget consiguiendo de esta forma un header con dos bloques para contenido.
No sé si alguien recordará que en lugar del texto "Ni es todo lo que está, ni está todo lo que es" lo que había era el gadget de Twitter, es lo que voy a tratar de explicar porque es la modificación que hice en mi cabecera y me han preguntado más de una ocasión, la respuesta es "El header está dividido en dos bloques"
En mi plantilla tengo las medidas modificadas así que como suelo hacer los ejemplos serán en una plantilla Minima sin modificar, pueden probarse en cualquier otra plantilla pero es recomendable guardar una copia de respaldo o mejor aún probar en otro blog.
El header de una plantilla Minima viene definido en la hoja de estilos de la siguiente forma [+/-]
Vamos a dividir el header en dos partes nos situamos en
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Título de tu blog (cabecera)' type='Header'/>
</b:section>
</div>
y lo sustituimos por
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Título de tu blog (cabecera)' type='Header'/>
</b:section>
<b:section class='header' id='header-derecha' showaddelement='yes'/>
</div>
Ya podemos añadir un nuevo hadget en la cabecera, al establecer showaddelement='yes' podemos añadir más de un gadget si añadimos 'no'sólo podemos añadir un gadget.
Para que todo tome forma deberemos añadir unos estilos al nuevo gadget y modificar la medida del antiguo, buscamos:
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
y en su lugar añadimos
#header {
width: 300px;
float: left;
margin:0 auto 10px;
text-align: center;
color:#333;
border:1px solid #ccc;
}
#header-derecha {
width: 300px;
float: right;
color: #333;
margin:0 auto 10px;
border:1px solid #ccc;
}
Para eliminar el borde del bloque exterior suprimimos la línea en negrita de:
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
También añadiremos el mismo margen que en header y header-derecha margin:0 auto 10px;
Ya sólo queda añadir contenido al nuevo gadget para personalizar el bloque si lo deseamos.
El borde gris nos ayuda para saber si el gadget queda centrado, lo podemos eliminar suprimiendo border:1px solid #ccc;
Si lo que deseamos es darle un toque personal entonces daremos rienda suelta a la imaginación trabajando los estilos de cada bloque.
Subimos o bajamos el nuevo gadget (header-derecha)con margin-top:10px;Añadimos un fondo con background: transparent url(url imagen);
#header-derecha {
width: 300px;
float: right;
color: #333;
margin:0 auto 10px;
margin-top:10px;
background: transparent url(url imagen);
}
Si por el contrario deseamos que la imagen ocupe todo el bloque del header la añadiremos en header-wrapper proporcionándole altura por ejemplo con height:100px; dependiendo el alto que deseamos darle aumentamos el valor en height.
#header-wrapper {
width: 660px;
margin:0 auto 10px;
height:100px;
background: transparent url(url imagen);
}
Y siguiendo con los cambios lo hacemos esta vez en el estilo de fuente, en header h1
#header h1 {
margin-top: 50px;
font-family: Georgia;
font-size: 24px;
letter-spacing: -1px;
padding: 0;
width: 300px;
}
Al dividir la cabecera tenemos la comodidad de cambiar de gadget sin necesidad de hacer grandes cambios únicamente añadiendo un nuevo gadget en plantilla de diseño y eliminando el anterior o incluso añadir más de un gadget.
No olvidemos que el gadget de cabecera sigue estando así que si preferimos añadir una imagen en lugar de título podemos hacerlo igual que antes de hacer las modificaciones.
¿Izquierda o derecha? salimos de dudas cambiando la flotación de nuevo gadget (header-derecha) por la flotación del gadget de cabecera de forma que quede así.
#header {
width: 300px;
float: right;
margin:0 auto 10px;
text-align: center;
color:#333;
border:1px solid #ccc;
}
#header-derecha {
width: 300px;
float: left;
color: #333;
margin:0 auto 10px;
border:1px solid #ccc;
}
Si decidimos cambiar la flotación y para no crear confusiones lo que hacemos es cambiar el nombre del nuevo gadget y en lugar de llamarle #header-derecha le llamaremos #header-izquierda
Lo mismo haremos con el bloque del gadget, donde dice:<b:section class='header' id='header-derecha' showaddelement='yes'/>
cambiaremos header-derecha por header-izquierda
0
Los estándares web
Los estándares web son palabritas que solemos escuchar aquí y allá, todo el tiempo ¿Qué son? ¿Qué ocurrirá si no los sigo? ¿Me expulsarán del paraiso de la www? ¿Seré estigmatizado?
Los estándares web son un serie de recomendaciones dadas por el World Wide Web Consortium (W3C) y otras organizaciones que especifican la forma en que deben crearse sitios web ¿Para qué? Esto es lo importante: para que puedan ser accesibles a la mayor cantidad de usuarios posibles. Digo que esto es lo importante porque muchos confunden el fin con el medio. Los estándares y las recomendaciones son un medio, el fin es otro: los usuarios.
Es que el resto es filosofía webeliana, algo que discuten los teóricos y que, a los usamos internet, apenas nos roza. Nosotros USAMOS la web y elegimos porque cierto servicio nos sirve, porque nos resulta cómodo o porque simplemente, nos gusta. Eso es así hasta que dejamos de ser sólo usuarios y pasamos a ser parte de lo que se define como prosumidores, una mezcla de productor de contenidos y consumidor de contenidos. El ejemplo más sencillo de esto es un blog. Ahí, comenzamos a interesarnos en el tema y a usar palabras como estándares, odiar Internet Explorer y tratar de validar nuestro sitio porque ... ¿por qué?
¿Cuáles son las bases de los estándares? Separar el contenido (HTML) de la apariencia (CSS) lo que permite usar menos código y por lo tanto, cargarlos más rápidamente. El estándard, además, permite que los motores de búsqueda identifiquen e indexen los contenidos de los sitios correctamente. Mejora el posicionamiento porque a los buscadores no les gustan los códigos estrafalarios e ínutiles. Abarata costos al usar menos ancho de banda, etc, etc.
En todo caso, en la práctica, todo se resume en que el ideal de un sitio es que sea compatible con todos los navegadores y dispositivos, que sea flexible, que sea modificable y además, que sea accesible a personas con discapacidades (más información).
¿Hay alguna objeción a esto? En absoluto, no hay peros ... pero ...
Muchos son los que intentan validar sus sitios en Blogger, leen que hay cientos de errores y se asustan ¿Qué deberían hacer? Una sola cosa, aprender y entender lo que esos mensajes nos están diciendo. Esto es lo básico. Nadie nace sabiendo y un blog no es la excepción. Muchos servicios tienen una ventaja, son una forma simple de empezar, pero tienen como consecuencia indeseada, generar en quien lo utiliza, la sensación de que bastan dos o tres clicks para resolver las cosas o solucionar problemas. Esto no es así, jamás. Hay algo peor que no saber: creer que sabemos.
Si usamos cualquier herramienta que analice la estructura de nuestro sitio veremos errores que serán imposibles de corregir ya que son provocados por el mismo sistema y por lo tanto, incorregibles y también veremos errores reales que podemos corregir o, por lo menos, saber porque se identifican como errores o advertencias:
"required attribute "alt" not specified" en cada imagen que no posea un atributo ALT
"required attribute "type" not specified" cuando usamos STYLE o SCRIPT
Habrá que leerlos uno por uno, entenderlos y saber cuál es el límite entre lo ideal y lo posible.
Pero, por si fuera poco, también veremos errores "dudosos", esos que nos dicen que algo debe ser escrito de tal manera y no parecen tener sentido. Y esto también es importante entenderlo ya que en realidad, el estándard es un ideal, un punto hacia el que deberíamos tender, un camino pero no una regla que deba tomarse sin pensamiento crítico, evaluando qué hacer y tomando decisiones subjetivas.
No se trata de infringir las reglas sino de conocerlas ya que de este modo, si las violamos o las eludimos o las cuestionamos, sabremos cuales son las consecuencias y podremos sopesar los pros y los contras de nuestras acciones. No creo en aplicar todas las reglas a ciegas, creo en conocerlas y elegir a conciencia. No nos privamos de hacer ciertas cosas porque hay una ley que lo prohiba, no lo hacemos porque sabemos que está mal y lo evitamos.
Hace poco, CSS Globe publicó un artículo sobre lo que consideran malentendedidos en esto de los estándares web. Vale la pena resumirlos:
Estándares Web = Validación:
La validación es importante pero, debe tomarse como un asistente, sobre todo cuando estamos aprendiendo. Por si misma no significa nada y tampoco implica que se están usando los estándares web ya que estos dependen de muchas otras. Nos muestran un ejemplo interesante:
hola maravilla alegría sin perros seis avenidas
Esa frase no tiene "errores", cualquier herramienta que verifique la ortografía dirá que es correcta y sin embargo, carece de sentido. Valida pero carece de lógica.
Estándares Web = CSS:
Utilizar hojas de estilo no garantiza el estandard. Ni la tecnología ni el CSS ni ninguna otra herramienta garantiza eso, todo depende de cómo son usadas. Por si mismas, nada significan.
Estándares Web = No usar tablas:
"La tablas son demoníacas" "Las creó el diablo-geek y usarlas significa el castigo eterno en un infierno sin computadoras" Es una de las pseudo-verdades más extendidas y es completamente falsa. Ningún elemento HTML es diabolico o malo o está prohibido. Fueron creados por gente inteligente y tienen su propósito. Usarlos sin inteligencia es lo único que podría considerarse pecaminoso.
Estándares Web = Divs:
¿Que hacen muchos diseñadores? Simplemente reemplazan las tablas con DIVs, el resultado, lo mismo pero más confuso, código enredado y lleno de cosas inútiles que incrementan la longitud de las propiedades CSS. No es un tema de DIVs sino de encontrar el camino más simple para mostrar lo que queremos mostrar.
Estándares Web = No IE:
La segunda de las grandes verdades falsas. Podemos echarle culpas al navegador y no dejaremos de tener cierta razón pero, nuestro trabajo es ese: hacer que nuestro sitio web se muestre de manera correcta en un navegador que no respeta los estándares y para eso, debemos chequear como se ve porque lo quieran o no, es el navegador más utilizado y lo seguirá siendo por mucho, mucho tiempo. Negarse a eso es un error elemental y una falta de respeto para quienes visitan nuestro sitio.
Algunos ejemplos prácticos de la W3C sobre estándares:
Los estándares web son un serie de recomendaciones dadas por el World Wide Web Consortium (W3C) y otras organizaciones que especifican la forma en que deben crearse sitios web ¿Para qué? Esto es lo importante: para que puedan ser accesibles a la mayor cantidad de usuarios posibles. Digo que esto es lo importante porque muchos confunden el fin con el medio. Los estándares y las recomendaciones son un medio, el fin es otro: los usuarios.
Es que el resto es filosofía webeliana, algo que discuten los teóricos y que, a los usamos internet, apenas nos roza. Nosotros USAMOS la web y elegimos porque cierto servicio nos sirve, porque nos resulta cómodo o porque simplemente, nos gusta. Eso es así hasta que dejamos de ser sólo usuarios y pasamos a ser parte de lo que se define como prosumidores, una mezcla de productor de contenidos y consumidor de contenidos. El ejemplo más sencillo de esto es un blog. Ahí, comenzamos a interesarnos en el tema y a usar palabras como estándares, odiar Internet Explorer y tratar de validar nuestro sitio porque ... ¿por qué?
¿Cuáles son las bases de los estándares? Separar el contenido (HTML) de la apariencia (CSS) lo que permite usar menos código y por lo tanto, cargarlos más rápidamente. El estándard, además, permite que los motores de búsqueda identifiquen e indexen los contenidos de los sitios correctamente. Mejora el posicionamiento porque a los buscadores no les gustan los códigos estrafalarios e ínutiles. Abarata costos al usar menos ancho de banda, etc, etc.
En todo caso, en la práctica, todo se resume en que el ideal de un sitio es que sea compatible con todos los navegadores y dispositivos, que sea flexible, que sea modificable y además, que sea accesible a personas con discapacidades (más información).
¿Hay alguna objeción a esto? En absoluto, no hay peros ... pero ...
Muchos son los que intentan validar sus sitios en Blogger, leen que hay cientos de errores y se asustan ¿Qué deberían hacer? Una sola cosa, aprender y entender lo que esos mensajes nos están diciendo. Esto es lo básico. Nadie nace sabiendo y un blog no es la excepción. Muchos servicios tienen una ventaja, son una forma simple de empezar, pero tienen como consecuencia indeseada, generar en quien lo utiliza, la sensación de que bastan dos o tres clicks para resolver las cosas o solucionar problemas. Esto no es así, jamás. Hay algo peor que no saber: creer que sabemos.
Si usamos cualquier herramienta que analice la estructura de nuestro sitio veremos errores que serán imposibles de corregir ya que son provocados por el mismo sistema y por lo tanto, incorregibles y también veremos errores reales que podemos corregir o, por lo menos, saber porque se identifican como errores o advertencias:
"required attribute "alt" not specified" en cada imagen que no posea un atributo ALT
"required attribute "type" not specified" cuando usamos STYLE o SCRIPT
Habrá que leerlos uno por uno, entenderlos y saber cuál es el límite entre lo ideal y lo posible.
Pero, por si fuera poco, también veremos errores "dudosos", esos que nos dicen que algo debe ser escrito de tal manera y no parecen tener sentido. Y esto también es importante entenderlo ya que en realidad, el estándard es un ideal, un punto hacia el que deberíamos tender, un camino pero no una regla que deba tomarse sin pensamiento crítico, evaluando qué hacer y tomando decisiones subjetivas.
No se trata de infringir las reglas sino de conocerlas ya que de este modo, si las violamos o las eludimos o las cuestionamos, sabremos cuales son las consecuencias y podremos sopesar los pros y los contras de nuestras acciones. No creo en aplicar todas las reglas a ciegas, creo en conocerlas y elegir a conciencia. No nos privamos de hacer ciertas cosas porque hay una ley que lo prohiba, no lo hacemos porque sabemos que está mal y lo evitamos.
Hace poco, CSS Globe publicó un artículo sobre lo que consideran malentendedidos en esto de los estándares web. Vale la pena resumirlos:
Estándares Web = Validación:
La validación es importante pero, debe tomarse como un asistente, sobre todo cuando estamos aprendiendo. Por si misma no significa nada y tampoco implica que se están usando los estándares web ya que estos dependen de muchas otras. Nos muestran un ejemplo interesante:
hola maravilla alegría sin perros seis avenidas
Esa frase no tiene "errores", cualquier herramienta que verifique la ortografía dirá que es correcta y sin embargo, carece de sentido. Valida pero carece de lógica.
Estándares Web = CSS:
Utilizar hojas de estilo no garantiza el estandard. Ni la tecnología ni el CSS ni ninguna otra herramienta garantiza eso, todo depende de cómo son usadas. Por si mismas, nada significan.
Estándares Web = No usar tablas:
"La tablas son demoníacas" "Las creó el diablo-geek y usarlas significa el castigo eterno en un infierno sin computadoras" Es una de las pseudo-verdades más extendidas y es completamente falsa. Ningún elemento HTML es diabolico o malo o está prohibido. Fueron creados por gente inteligente y tienen su propósito. Usarlos sin inteligencia es lo único que podría considerarse pecaminoso.
Estándares Web = Divs:
¿Que hacen muchos diseñadores? Simplemente reemplazan las tablas con DIVs, el resultado, lo mismo pero más confuso, código enredado y lleno de cosas inútiles que incrementan la longitud de las propiedades CSS. No es un tema de DIVs sino de encontrar el camino más simple para mostrar lo que queremos mostrar.
Estándares Web = No IE:
La segunda de las grandes verdades falsas. Podemos echarle culpas al navegador y no dejaremos de tener cierta razón pero, nuestro trabajo es ese: hacer que nuestro sitio web se muestre de manera correcta en un navegador que no respeta los estándares y para eso, debemos chequear como se ve porque lo quieran o no, es el navegador más utilizado y lo seguirá siendo por mucho, mucho tiempo. Negarse a eso es un error elemental y una falta de respeto para quienes visitan nuestro sitio.
Algunos ejemplos prácticos de la W3C sobre estándares:
- proporcionar a la página un buen título que no sea demasiado corto:
<title>Sección Uno</title> - pero tampoco demasiado largo:
<title>La Guía de la Música Moderna - Sección Uno: Musicalmente hablando, ¿Cuándo comenzó la Época Moderna?</title> - no usar "haz click aquí" como texto de los enlaces ya que si queremos provocar que el usuario haga algo debemos utilizar textos cortos pero significativos, que proporcionen información, que expliquen lo que ofrece el enlace
- no emplear redirecciones en etiquetas meta
- usar <h1> para el encabezado de nivel superior, los títulos de los documentos o de las entradas. Si es demasiado grande (por defecto lo es) usar CSS para dimensionarlo
- usar el atributo alt en las etiquetas img para proporcionar un texto equivalente; esto, facilita el acceso a personas con problemas visuales y ayuda a los motores de búsqueda a indexar correctamente la página (los buscadores "leen" ese atributo)
- si se elige un color, hay que elegir todos. No se puede dejar que sea el navegador quién defina los colores del texto o del fondo.
- tener cuidado con el tamaño del texto, los tamaños pequeños están de moda pero, aún cuando los veamos bien, debemos considerar que a nuestra página se accederá desde otros navegadores, otras plataformas y otros dispositivos así que no todos verán lo que nosotros vemos
Es verdad, no tiene sentido diagramar un sitio web sólo con tablas, será un código larguisimo y poco flexible pero tampoco tiene ningún sentido escribir veinte líneas de propiedades para alinear un conjunto de imágenes y textos si con una tabla lo organizamos rápidamente. No es cosa de buenos y malos, es que estamos eligiendo la herramienta incorrecta o la estamos utilizando mal.
La meta es siempre la misma, simplificar y clarificar. Nosotros somos los responsables, no las etiquetas ni los navegadores y para eso, no hay ley que valga.
Estandares SI. Y también experimentación, rebeldía, juego, espíritu crítico, mente abierta y ser muy conciente de las limitaciones de las herramientas que usamos y de nuestras propias limitaciones. Para todo eso, sólo hacen falta dos cosas: APRENDER y DUDAR.
La meta es siempre la misma, simplificar y clarificar. Nosotros somos los responsables, no las etiquetas ni los navegadores y para eso, no hay ley que valga.
Estandares SI. Y también experimentación, rebeldía, juego, espíritu crítico, mente abierta y ser muy conciente de las limitaciones de las herramientas que usamos y de nuestras propias limitaciones. Para todo eso, sólo hacen falta dos cosas: APRENDER y DUDAR.
0
Agunata.com celebra su segundo aniversario regalando un dominio .com totalmente gratis por un año.
El ganador será elegido al azar usando la página random.org.
La inscripción para el sorteo termina el próximo jueves 6 de Agosto y los requisitos para participar (mínimos) podéis verlos en la entrada al respecto en Agunata.
¡Suerte!
Nota:
Consigue un dominio .com en Agunata
Agunata.com celebra su segundo aniversario regalando un dominio .com totalmente gratis por un año.
El ganador será elegido al azar usando la página random.org.
La inscripción para el sorteo termina el próximo jueves 6 de Agosto y los requisitos para participar (mínimos) podéis verlos en la entrada al respecto en Agunata.
¡Suerte!
Nota:
En el foro de SpamLoco podéis encontrar un magnifico tutorial paso a paso y con imágenes incluidas de como configurar un dominio en Blogger.
0
El botón rojo
Quien nísperos come y bebe cerveza, espárragos chupa y besa a una vieja, ni come, ni bebe, ni chupa ni besa ...
¿Se podrán agregar botones rojos a la lista ... ?
0
Y, sí, Twitter no genera revoluciones y apenas calienta la protesta pero a uno lo vuelve un poquito loco. Algunos usuarios viven allí adentro, otros salen de tanto en tanto a tomar aire pero, sea cual sea el uso que le demos, siempre es bueno disponer 
de íconos, botones e imágenes para adornar nuestra manía, digo, nuestro blog.
Empezamos con los más nuevitos, los creados por BanakaBanaka; son cinco íconos en formato PNG de tres tamaños diferentes:
¿Iconos para Twitter? Bueno, íconos para Twitter
Y, sí, Twitter no genera revoluciones y apenas calienta la protesta pero a uno lo vuelve un poquito loco. Algunos usuarios viven allí adentro, otros salen de tanto en tanto a tomar aire pero, sea cual sea el uso que le demos, siempre es bueno disponer de íconos, botones e imágenes para adornar nuestra manía, digo, nuestro blog.Empezamos con los más nuevitos, los creados por BanakaBanaka; son cinco íconos en formato PNG de tres tamaños diferentes:
El blog de Gem@ 
nos propone otros dos:
nos propone otros dos:el set de Mirjami Manninen 
el set de Icons ETC
El escaparate de Rosa tiene muchas entradas sobre este tema. Entre ellas:
tiene muchas entradas sobre este tema. Entre ellas:el set de webdesignerdepot
 |  |  |
Otro sitio con múltiples entradas es el de Pizcos. Allí nos encontramos con el original set de TypTwiIcons :
:Y muchísmimos otros 1 | 2 | 3 | 4 | 5, incluyendo las galerías de Antonis Theodorakis y de Mau Russo.
 |  |  |
¿Es poco? Ariane de Templates para Novo Blogger tiene una entrada con una lista enorme de recursos para todos los gustos:
 |  |  |  |  |
Bueno ... esto nunca termina así que acá están los propuestos por z-graphics: el set de poeticpixel, Twitter Eggs, Twitter Bottle Caps, Tweeta y "las porristas".
Suscribirse a:
Entradas (Atom)