Aprendiendo HTML

APRENDIENDO HTML
Lleg el momento de hablar sobre HTML, el lenguaje con el que crean las pginas web.
HTML es el lenguaje con el que se definen las pginas web. Bsicamente se trata de un conjunto de etiquetas que sirven para definir la forma en la que presentar el texto y otros elementos de la pgina. El HTML se cre en un principio con objetivos divulgativos. No se pens que la web llegara a ser un rea de ocio con carcter multimedia, de modo que, el HTML se cre sin dar respuesta a todos los posibles usos que se le iba a dar y a todos los colectivos de gente que lo utilizaran en un futuro. Sin embargo, pese a esta deficiente planificacin, si que se han ido incorporando modificaciones con el tiempo, estos son los estndares del HTML. Numerosos estndares se han presentado ya. El HTML 4.01 es el ltimo estndar a febrero de 2001. El HTML es un lenguaje de programacin muy fcil de aprender, lo que permite que cualquier persona, aunque no haya programado en la vida pueda enfrentarse a la tarea de crear una web. HTML es fcil y pronto podremos dominar el lenguaje. Ms adelante se conseguirn los resultados profesionales gracias a nuestras capacidades para el diseo y nuestra vena artista. Una vez conocemos el concepto de HTML os vamos a adelantar algunas cosas ms. Este lenguaje se escribe en un documento de texto, por eso necesitamos un editor de textos para escribir una pgina web. As pues, el archivo donde est contenido el cdigo HTML es un archivo de texto, con una peculiaridad, que tiene extensin .html o .htm (es indiferente cul utilizar). De modo que cuando programemos en HTML lo haremos con un editor de textos, lo ms sencillo posible y guardaremos nuestros trabajos con extensin .html, por ejemplo mipagina.html Por adelantar un poco cmo se utiliza el HTML os diremos que el lenguaje consta de etiquetas que tienen esta forma <B> o <P>. Cada etiqueta significa una cosa, por ejemplo <B> significa que se escriba en negrita (bold) o <P> significa un prrafo, <A> es un enlace, etc. Casi todas las etiquetas tienen su correspondiente etiqueta de cierre, que indica que a partir de ese punto no debe de afectar la etiqueta. Por ejemplo </B> se utiliza para indicar que se deje de escribir en negrita. As que el HTML no es ms que una serie de etiquetas que se utilizan para definir la forma o estilo que queremos aplicar a nuestro documento. <B>Esto est en negrita</B>. Para aprender HTML en profundidad tenemos un manual en DesarrolloWeb.com. Adems se pueden consultar los enlaces a distintos manuales que tenemos en nuestro buscador en la seccin de HTML. Si lo que deseamos es tener una idea global de lo que es la publicacin en Internet y los pasos a seguir para colocar nuestras pginas en la web lo ms adecuado ser consultar el manual de Publicar en Internet. A quin va dirigido este manual y las lecturas aconsejadas antes de abordarlo.
Bienvenidos al manual de HTML de DesarrolloWeb. A travs de todos estos captulos vamos a descubrir el lenguaje utilizado para la creacin de pginas web: el Hyper Text Markup Language, ms conocido como HTML. Puede que en un principio, el hecho de hablar de un lenguaje informtico pare los pies a ms de uno. No os asustis, el HTML no deja de ser ms que una forma un tanto peculiar de dar formato a los textos e imgenes que pretendemos ver por medio de un navegador. Antes de entrar en materia, lo cual haremos de una forma directa y practica, os recomendamos fervorosamente la lectura previa de nuestro manual Publicar en Internet. A partir de esta gua, aprenderis los conceptos ms bsicos necesarios para creacin de un sitio web. Tambin os permitir acceder a este manual con unos conocimientos de base sobre HTML imprescindibles y os dejara bien claro lo que su conocimiento aporta con respecto al simple uso de editores de HTML. El pblico al que va enfocado este manual es a todos aquellos que, con conocimientos mnimos de informtica, desean hacer mundialmente pblico un mensaje, una idea o una informacin usando para ello el medio ms prctico, econmico y actual: Internet. Lo que necesitis como base para llevar a buen trmino el aprendizaje (aparte de leer el manual Publicar en Internet) es: Saber escribir con un teclado Saber manejar un ratn Tener ganas de aprender
Lo que obtendris despus de haber pasado por estos captulos: Capacidad para crear y publicar vuestro propio sitio web con un mnimo de calidad Conocimientos de todo tipo sobre las tecnologas y herramientas empleadas en el mbito de la Red Posiblemente una aficin que puede convertirse en pasin y terminar, en algunos casos, siendo un vicio o un oficio.
Os recordamos que estamos a vuestra entera disposicin para resolveros todo tipo de dudas referentes a este manual. Contactarnos es tan fcil como pinchar sobre el mail del autor del articulo (situado al pie de la pgina). Tambin podis formular vuestras cuestiones y, esperamos que en un futuro ayudar a otros compaeros, en el foro sobre HTML o bien en la lista de correo de DesarrolloWeb. Pasemos pues sin ms prembulos a ver de qu se trata el HTML... Las primeras cosas que debes saber sobre HTML: historia, objetivos y dems conocimientos donde sentar las bases del manual.
HTML es el lenguaje con el que se escriben las pginas web. Las pginas web pueden ser vistas por el usuario mediante un tipo de aplicacin llamada navegador. Podemos decir por lo tanto que el HTML es el lenguaje usado por los navegadores para mostrar las pginas webs al usuario, siendo hoy en da la interface ms extendida en la red. Este lenguaje nos permite aglutinar textos, sonidos e imgenes y combinarlos a nuestro gusto. Adems, y es aqu donde reside su ventaja con respecto a libros o revistas, el HTML nos permite la introduccin de referencias a otras pginas por medio de los enlaces hipertexto. El HTML se cre en un principio con objetivos divulgativos. No se pens que la web llegara a ser un rea de ocio con carcter multimedia, de modo que, el HTML se cre sin dar respuesta a todos los posibles usos que se le iba a dar y a todos los colectivos de gente que lo utilizaran en un futuro. Sin embargo, pese a esta deficiente planificacin, si que se han ido incorporando modificaciones con el tiempo, estos son los estndares del HTML. Numerosos estndares se han presentado ya. El HTML 4.01 es el ltimo estndar a septiembre de 2001. Esta evolucin tan anrquica del HTML ha supuesto toda una seria de inconvenientes y deficiencias que han debido ser superados con la introduccin de otras tecnologas accesorias capaces de organizar, optimizar y automatizar el funcionamiento de las webs. Ejemplos que pueden sonaros son las CSS, JavaScript u otros. Veremos ms adelante en qu consisten algunas de ellas. Otros de los problems que han acompaado al HTML es la diversidad de navegadores presentes en el mercado los cuales no son capaces de interpretar un mismo cdigo de una manera unificada. Esto obliga al webmster a, una vez creada su pgina, comprobar que esta puede ser leda satisfactoriamente por todos los navegadores, o al menos, los ms utilizados. Adems del navegador necesario para ver los resultados de nuestro trabajo, necesitamos evidentemente otra herramienta capaz de crear la pgina en si. Un archivo HTML (una pgina) no es ms que un texto. Es por ello que para programar en HTML necesitamos un editor de textos. Es recomendable usar el Bloc de notas que viene con windows, u otro editor de textos sencillo. Hay que tener cuidado con algunos editores ms complejos como Wordpad o Microsoft Word, pues colocan su propio cdigo especial al guardar las pginas y HTML es nicamente texto plano, con lo que podremos tener problemas. Existen otro tipo de editores especficos para la creacin de pginas web los cuales ofrecen muchas facilidades que nos permiten aumentar nuestra productividad. No obstante, es aconsejable en un principio utilizar una herramienta lo ms sencilla posible para poder prestar la mxima atencin a nuestro cdigo y familiarizarnos lo antes posible con l. Siempre tendremos tiempo ms delante de pasarnos a editores ms verstiles con la consiguiente ganancia de tiempo. Para tener ms claro todo el tema de editores y los tipos que existen, visita los artculos: Editores de HTML.
Bloc de notas. Tambin puedes acceder a descripciones editores ms complejos que el Block de Notas, pero ms potentes como Homesite o UltraEdit.
Es importante tener claro todo ello puesto que en funcin de vuestros objetivos puede que, ms que aprender HTML, resulte ms interesante aprender el uso de una aplicacin para la creacin de pginas. As pues, una pgina es un archivo donde est contenido el cdigo HTML en forma de texto. Estos archivos tienen extensin .html o .htm (es indiferente cul utilizar). De modo que cuando programemos en HTML lo haremos con un editor de textos y guardaremos nuestros trabajos con extensin .html, por ejemplo mipgina.html
Consejo: Utiliza siempre la misma extensin en tus archivos HTML. Eso evitar que te confundas al escribir los nombres de tus archivos unas veces con .htm y otras con .html. Si trabajas con un equipo en un proyecto todava ms importante que os pongis todos de acuerdo en la extensin
Descripcin de la sintaxis con la que se trabaja en el lenguaje HTML.
El HTML es un lenguaje que basa su sintaxis en un elemento de base al que llamamos etiqueta. La etiqueta presenta frecuentemente dos partes: Una apertura de forma general <etiqueta> Un cierre de tipo </ etiqueta> Todo lo incluido en el interior de esa etiqueta sufrir las modificaciones que caracterizan a esta etiqueta. As por ejemplo: Las etiquetas <b> y </b> definen un texto en negrita. Si en nuestro documento HTML escribimos una frase con el siguiente cdigo: <b>Esto esta en negrita</b> El resultado Ser: Esto esta en negrita Las etiquetas <p> y </p> definen un prrafo. Si en nuestro documento HTML escribiramos: <p>Hola, estamos en el prrafo 1</p> <p>Ahora hemos cambiado de prrafo</p> El resultado sera: Hola, estamos en el prrafo 1 Ahora hemos cambiado de prrafo
Partes de un documento HTML
Adems de todo esto, un documento HTML ha de estar delimitado por la etiqueta <html> y </html>. Dentro de este documento, podemos asimismo distinguir dos partes principales: El encabezado, delimitado por <head> y </head> donde colocaremos etiquetas de ndole informativo como por ejemplo el titulo de nuestra pgina. El cuerpo, flanqueado por las etiquetas <body> y </body>, que ser donde colocaremos nuestro texto e imgenes delimitados a su vez por otras etiquetas como las que hemos visto. El resultado es un documento con la siguiente estructura: <html> <head> Etiquetas y contenidos del encabezado Datos que no aparecen en nuestra pgina pero que son importantes para catalogarla: Titulo, palabras clave,... </head> <body> Etiquetas y contenidos del cuerpo Parte del documento que ser mostrada por el navegador: Texto e imgenes </body> </html> Las maysculas o minsculas son indiferentes al escribir etiquetas A notar que las etiquetas pueden ser escritas con cualquier tipo de combinacin de maysculas y minsculas. <html>, <HTML> o <HtMl> son la misma etiqueta. Resulta sin embargo aconsejable acostumbrarse a escribirlas en minscula ya que otras tecnologas que pueden convivir con nuestro HTML (XML por ejemplo) no son tan permisivas y nunca viene mal coger buenas costumbres desde el principio para evitar fallos triviales en un futuro. Vamos a ver cmo se hace una pgina muy sencilla en HTML, que sirva de prctica a los debutantes.
Podemos ya con estos conocimientos, y alguno que otro ms, crear nuestra primera pgina. Para ello, abre tu editor de textos y copia y pega el siguiente texto en un nuevo documento. <html> <head> <title>Cocina Para Todos</title> </head> <body>
<p><b>Bienvenido,</b></p> <p>Ests en la pgina <b>Comida para Todos</b>.</p> <p>Aqu aprenders recetas fciles y deliciosas.</p> </body> </html> Ahora guarda ese archivo con extensin .html o .htm en tu disco duro. Para ello accedemos al men Archivo y seleccionamos la opcin Guardar como. En la ventana elegimos el directorio donde deseamos guardarlo y colocaremos su nombre, por ejemplo mi_pagina.html
Consejo: Utiliza nombres en tus archivos que tengan algunas normas bsicas para ahorrarte disgustos y lios. Nuestro consejo es que no utilices acentos ni espacios ni otros caracteres raros. Tambin te ayudar escribir siempre las letras en minsculas. Esto no quiere decir que debes hacer nombres de archivos cortos, es mejor hacerlos descriptivos para que te aclaren lo que hay dentro. Algn caracter como el guin "-" o el guin bajo "_" te puede ayudar a separar las palabras. Por ejemplo quienes_somos.html
Con el documento HTML creado, podemos ver el resultado obtenido a partir de un navegador. Es conveniente, llegado a este punto, hacer hincapi en el hecho de que no todos los navegadores son idnticos. Desgraciadamente, los resultados de nuestro cdigo pueden cambiar de uno a otro por lo que resulta aconsejable visualizar la pgina en varios. Generalmente se usan Internet Explorer y Netscape como referencias ya que son los ms extendidos. A decir verdad, en el momento que estas lneas son escritas, Internet Explorer acapara la inmensa mayora de usuarios (90% ms o menos) y Netscape esta relegado a un segundo plano. Esto no quiere decir que lo debemos dejar totalmente de lado ya que el 10% de visitas que puede proporcionarnos puede resultar muy importante para nosotros. Por otra parte, parece que se ha hecho publica la intencin de Netscape de desviar un poco su temtica de negocios hacia otros derroteros y abandonar esta llamada "lucha de navegadores" en la cual estaba recibiendo la peor parte. Pues bien, volviendo al tema, una vez creado el archivo .html o .htm, podemos visualizar el resultado de nuestra labor abriendo dicha pgina con un navegador. Para hacerlo, la forma resulta diferente dependiendo del navegador: Si estamos empleando el Explorer, hemos de ir al barra de men, elegir Archivo y seleccionar Abrir. Una ventana se abrir. Pulsamos sobre el botn Examinar y accederemos a una ventana a partir de la cual podremos movernos por el interior de nuestro disco duro hasta dar con el archivo que deseamos abrir. La cosa no resulta ms difcil para Netscape. En este caso, nos dirigimos tambin a la barra de men principal y elegimos File y a continuacin Open File. La misma ventana de bsqueda nos permitir escudriar el contenido de nuestro PC hasta dar con el archivo buscado.
Nota: Tambin puedes abrir el archivo si accedes al directorio donde lo guardaste. En l podrs encontrar tu archivo HTML y vers que tiene como icono el logotipo de Netscape o el de Internet Explorer. Para abrirlo simplemente hacemos un doble click sobre l.
Una vez abierto el archivo podris ver vuestra primera pgina web. Algo sencillita pero por algo se empieza. Ya veris como en poco tiempo seremos capaces de mejorar sensiblemente. Fijaos en la parte superior izquierda de la ventana del navegador. Podris comprobar la presencia del texto delimitado por la etiqueta <title>. Esta es una de las funciones de esta etiqueta, cuyo principal cometido es el de servir de referencia en los motores de bsqueda como Altavista o Yahoo.
Por otro lado, los elementos que colocamos entre la etiqueta <body> y </body> se pueden ver en el espacio reservado para el cuerpo de la pgina. Se puede ver la pgina del ejemplo en funcionamiento aqu. Si ahora hacis click con el botn derecho sobre la pgina y elegs Ver cdigo fuente (o View page source) veris como en una ventana accesoria aparece el cdigo de nuestra pgina. Este recurso es de extremada importancia ya que nos permite ver el tipo de tcnicas empleadas por otros para la confeccin de sus pginas. Con todo esto asimilado ya estamos en condiciones de adentrarnos un poco ms en la descripcin de algunas de las etiquetas ms empleadas del HTML.
Posible problema: Al utilizar el Block de Notas en Windows en ocasiones, aunque le digamos que es un archivo .html, el documento se guarda como si fuera un texto y no una pgina web. Lo que est pasando es que el Block de Notas tiene predeterminado guardar sus archivos con extensin .txt y en realidad lo que est guardando en el disco duro es mi_pagina.html.txt Para conseguir tener el control de las extensiones en el block de notas y en Windows en general podemos acceder a MI-PC y en el men de Ver seleccionis "Opciones de carpeta". En la ventana que sale pulsamos en la solapa "Ver" y nos permite deseleccionar una caja de seleccin que pone algo como "Ocultar extensiones para los tipos de archivos conocidos". (As se hace en Win98, puede variar un poco en otras versiones de Windows.) Con ello conseguiremos que se vea siempre la extensin del archivo con el que estamos trabajando y que el Block de Notas nos haga caso cuando le indicamos que grabe el archivo con otra extensin que no sea .txt
Cmo colocar prrafos y saltos de lnea en pginas web. Tambin vemos los encabezados como prrafos que sirven de titulo.
En los captulos anteriores hemos presentado a titulo de ejemplo algunas etiquetas que permiten dar formato a nuestro texto. En este capitulo veremos con ms detalle las ms ampliamente utilizadas y ejemplificaremos algunas de ellas posteriormente. Formatear un texto pasa por tareas tan evidentes como definir los prrafos, justificarlos, introducir vietas, numeraciones o bien poner en negrita, itlica... Hemos visto que para definir los prrafos nos servimos de la etiqueta <p> que introduce un salto y deja una lnea en blanco antes de continuar con el resto del documento. Podemos tambin usar la etiqueta <br>, de la cual no existe su cierre correspondiente (</br>), para realizar un simple retorno de carro con lo que no dejamos una lnea en blanco sino que solo cambiamos de lnea.
Nota: Existen otras etiquetas que no tienen su correspondiente de cierre, como <img> para las imgenes, las veremos ms adelante. Esto ocurre porque un salto de lnea o una imagen no empiezan y acaban ms adelante sino que slo tienen presencia en un lugar puntual.
Podis comprobar que cambiar de lnea en nuestro documento HTML sin introducir alguna de estas u otras etiquetas no implica en absoluto un cambio de lnea en la pgina visualizada. En realidad el navegador introducir el texto y no cambiara de lnea a no ser que esta llegue a su fin o bien lo especifiquemos con la etiqueta correspondiente. Los prrafos delimitados por etiquetas <p> pueden ser fcilmente justificados a la izquierda, centro o derecha especificando dicha justificacin en el interior de la etiqueta por medio de un atributo align. Un atributo no es ms que un parmetro incluido en el interior de la etiqueta que ayuda a definir el funcionamiento de la etiqueta de una forma ms personal. Veremos a lo largo de este manual cantidad de atributos muy tiles para todo tipo de etiquetas. As, si desesemos introducir un texto alineado a la izquierda escribiramos: <p align="left">Texto alineado a la izquierda</p> El resultado seria: Texto alineado a la izquierda
Para una justificacin al centro: <p align="center">Texto alineado al centro</p> que dara: Texto alineado al centro
Para justificar a la derecha: <p align="right">Texto alineado a la derecha</p> cuyo efecto seria: Texto alineado a la derecha
Como veis, en cada caso el atributo align toma determinados valores que son escritos entre comillas. En algunas ocasiones necesitamos especificar algunos atributos para el correcto funcionamiento de la etiqueta. En otros casos, el propio navegador toma un valor definido por defecto. Para el caso de align, el valor por defecto es left.
Nota: Los atributos tienen sus valores indicados entre comillas ("), pero si no los indicamos entre comillas tambin funcionar en la mayora de los casos. Sin embargo, es aconsejable que pongamos siempre las comillas para acostumbrarnos a utilizarlas, por dar homogeneidad a nuestros cdigos y para evitar errores futuros en sistemas ms quisquillosos.
El atributo align no es exclusivo de la etiqueta <p>. Otras etiquetas muy comunes, que veremos ms adelante, entre las cuales se introducen texto o imgenes, suelen hacer uso de este atributo de una forma habitual. Imaginemos un texto relativamente largo donde todos los prrafos estn alineados a la izquierda (por ejemplo). Una forma de simplificar nuestro cdigo y de evitar introducir continuamente el atributo align sobre cada una de nuestras etiquetas es utilizando la etiqueta <div>. Esta etiqueta por si sola no sirve para nada. Tiene que estar acompaada del atributo align y lo que nos permite es alinear cualquier elemento (prrafo o imagen) de la manera que nosotros deseemos. As, el cdigo: <p align="left">Parrafo1</p> <p align="left"> Parrafo3</p> <p align="left"> Parrafo2</p> es equivalente a: <div align="left"> <p>Parrafo1</p> <p>Parrafo2</p> <p>Parrafo3</p> </div> Como hemos visto, la etiqueta <div> marca divisiones en las que definimos un mismo tipo de alineado. Ejemplo prctico: Para practicar un poco lo que acabamos de ver vamos a proponer un ejercicio que
podis resolver en vuestros ordenadores. Simplemente queremos construir una pgina que tenga, por este orden: 2 Prrafos centrados 3 Prrafos alineados a la derecha Un salto de lnea triple 1 prrafo alineado a la izquierda No vamos a escribir en esta ocasin el cdigo fuente del ejercicio. Podemos verlo en funcionamiento en nuestro navegador y en la ventana podemos obtener el cdigo fuente seleccionando en el men Ver la opcin Cdigo fuente. Ver el ejercicio en marcha.
Ejemplo de formatear prrafos Esto es el resultado: Que son los buscadores que no tienen porque mantener un ndice y que tienen robots que constantemente recorren Internet en busca de nuevas pginas para incluirlas en el buscador. Imaginemos un texto relativamente largo donde todos los prrafos estn alineados a la izquierda (por ejemplo). Que son los buscadores que no tienen porque mantener un ndice y que tienen robots que constantemente recorren Internet en busca de nuevas pginas para incluirlas en el buscador. Estos buscadores suelen tener un formulario accesible desde la pgina inicial, con el enlace correspondiente. No hay que navegar las categoras para acceder al formulario. Esto es que acaba... hasta luego...
Encabezados Existen otras etiquetas para definir prrafos especiales, formateados como ttulos. Son los encabezados o Header en ingls. Como decimos, son etiquetas que formatean el texto como un titular, para lo cual asignan un tamao mayor de letra y colocan el texto en negrita. Hay varios tipos de encabezados, que se diferencian en el tamao de la letra que utilizan. La etiqueta en concreto es la <h1>, para los encabezados ms grandes, <h2> para los de segundo nivel y as hasta <h6> que es el encabezado ms pequeo. Los encabezados implican tambin una separacin en prrafos, as que todo lo que escribamos dentro de <h1> y </h1> (o cualquier otro encabezado) se colocar en un prrafo independiente.
Podemos ver cmo se presentan algunos encabezados a continuacin. <h1>Encabezado de nivel 1</h1> Se ver de esta manera en la pgina:
Encabezado de nivel 1
Los encabezados, como otras etiquetas de HTML, soportan el atributo align. Vemos un ejemplo de encabezado de nivel 2 alineado al centro. <h2 align="center">Encabezado de nivel 2</h2> Se ver de esta manera en la pgina:
Otro ejercicio interesante es construir una pgina web que contenga todos los encabezados posibles. Se puede ver a continuacin. <html> <head> <title>Todos los encabezados</title> </head> <body> <h1>Encabezado <h2>Encabezado <h3>Encabezado <h4>Encabezado <h5>Encabezado <h6>Encabezado </body> </html> Se puede ver el ejercicio en una pgina aparte. de de de de de de nivel nivel nivel nivel nivel nivel 1</h1> 2</h2> 3</h3> 4</h4> 5</h5> 6</h6>
Encabezado de nivel
Consejo: No debemos utilizar las etiquetas de encabezado para formatear el texto, es decir, si queremos colocar un tipo de letra ms grande y en negrita debemos utilizar las etiquetas que existen para ello (que veremos en seguida). Los encabezados son para colocar titulares en pginas web y es el navegador el responsable de formatear el texto de manera que parezca un titular. Cada navegador, pues, puede formatear el texto a su gusto con tal de que parezca un titular.
Vemos como colocar negritas, itlicas, subrayados, subndices y suprendices.
Adems de todo lo relativo a la organizacin de los prrafos, uno de los aspectos primordiales del formateo de un texto es el de la propia letra. Resulta muy comn y prctico presentar texto resaltado en negrita, itlica y otros. Paralelamente el uso de ndices, subndices resulta vital para la publicacin de textos cientficos. Todo esto y mucho ms es posible por medio del HTML a partir de multitud de etiquetas entre las cuales vamos a destacar algunas. Negrita Podemos escribir texto en negrita incluyndolo dentro de las etiquetas <b> y </b> (bold). Esta misma tarea es desempeada por <strong> y </strong> siendo ambas equivalentes. Nosotros nos inclinamos por la primeras por simple razon de esfuerzo. Escribiendo un cdigo de este tipo: <b>Texto en negrita</b> Obtenemos este resultado: Texto en negrita
Nota: Qu diferencia hay entre <b> y <strong>? Aunque las dos etiquetas hacen el mismo efecto, tienen una peculiaridad que las hace distintas. La etiqueta <b> indica negrita, mientras que la etiqueta <strong> indica que se debe escribir resaltado. El HTML lo interpretan los navegadores segn su criterio, es por eso que las pginas se pueden ver de distinta manera en unos browsers y en otros. La etiqueta <H1> quiere decir "encabezado de nivel 1", es el navegador el responsable de formatear el texto de manera que parezca un encabezado de primer nivel. En la prctica los encabezados de Internet Explorer y Netscape son muy parecidos (tamao de letra grande y en negrita), pero otro navegador podra colocar los encabezados con subrayado si le pareciese oportuno. La diferencia entre <b> y <strong> se podr entender ahora. Mientras que <b> significa simplemente negrita y todos los navegadores la interpretarn como negrita, <strong> es una etiqueta que significa que se tiene que resaltar fuertemente el texto y cada navegador es el responsable de resaltarlo como desee. En la prctica <strong> coloca el texto en negrita, pero podra ser que un navegador decidiese resaltar colocando negrilla, subrayado y color rojo en el texto.
Itlica Tambin en este caso existen dos posibilidades, una corta: <i> e </i> (italic) y otra
un poco ms larga: <em> y </em>. En este manual, y en la mayora de las pginas que veris por ah, os encontraris con la primera forma sin duda ms sencilla a escribir y a acordarse. He aqu un ejemplo de texto en itlica: <i>Texto en itlica</i> Que da el siguiente efecto: Texto en itlica Subrayado El HTML nos propone tambin para el subrayado el par de etiquetas: <u> y </u> (underlined). Sin embargo, el uso de subrayados ha de ser aplicado con mucha precaucin dado que los enlaces hipertexto van, a no ser que se indique lo contrario, subrayados con lo que podemos confundir al lector y apartarlo del verdadero inters de nuestro texto. Subndices y suprandices Este tipo de formato resulta de extremada utilidad para textos cientficos. Las etiquetas empleadas son: <sup> y </sup> para los suprandices <sub> y </sub> para los subndices Aqu tenis un ejemplo: La <sup>13</sup>CC<sub>3</sub>H<sub>4</sub>ClNOS es un heterociclo alergeno enriquecido El resultado: La
13
CC3H4ClNOS es un heterociclo alergeno enriquecido
Anidar etiquetas Todas estas etiquetas y por supuesto el resto de las vistas y que veremos ms adelante pueden ser anidadas unas dentro de otras de manera a conseguir resultados diferentes. As, podemos sin ningn problema crear texto en negrita e itlica embebiendo una etiqueta dentro de la otra: <b>Esto slo est en negrita <i>y esto en negrita e itlica</i></b> Esto nos daria: Esto slo est en negrita y esto en negrita e itlica
Consejo: Cuando anides etiquetas HTML hazlo correctamente. Nos referimos a que si abres etiquetas dentro de otra ms principal, antes de cerrar la etiqueta principal cierres las etiquetas que
hayas abierto dentro de ella. Debemos evitar cdigos como el siguiente: <b>Esto est en negrita e <i>itlica</b></i> En favor de cdigos con etiquetas correctamente anidadas: <b>Esto est en negrita e <i>itlica</i></b> Esto es muy aconsejable, aunque los navegadores entiendan bien las etiquetas mal anidadas, por dos razones: 1. Sistemas como XML no son tan permisivos con estos errores y puede que en el futuro nuestras pginas no funcionen correcamente.
2.
A los navegadores les cuesta mucho tiempo de procesamiento resolver este tipo de errores, incluso ms que construir la propia pgina y debemos evitarles que sufran por una mala codificacin.
Seguimos aprendiendo etiquetas que nos sirven para formatear el texto.
A pesar de que por razones de homogeneidad y sencillez de codigo este tipo de formatos son controlados actualmente por hojas de estilo en cascada (de las cuales ya tendremos tiempo de hablar), existe una forma clsica y directa de definir color tamao y tipo de letra de un texto determinado. Esto se hace a partir de la etiqueta <font> y su cierre correspondiente. Dentro de esta etiqueta deberemos especificar los atributos correspondientes a cada uno de estos parmetros que deseamos definir. A continuacin os comentamos los atributos principales de esta etiqueta: Atributo face Define el tipo de letra. Este atributo es interpretado por versiones de Netscape a partir de la 3 y de MSIE 3 o superiores. Otros navegadores las ignoran completamente y muestran el texto con la fuente que utilizan. Hay que tener cuidado con este atributo ya que cada usuario, dependiendo de la plataforma que utilice, puede no disponer de los mismos tipos de letra que nosotros con lo que, si nosotros elegimos un tipo del que no dispone, el navegador se ver forzado a mostrar el texto con la fuente que utiliza por defecto (suele ser Times New Roman). Para evitar esto, dentro del atributo suelen seleccionarse varios tipos de letra separados por comas. En este caso el navegador comprobar que dispone del primer tipo enumerado y si no es as, pasar al segundo y as sucesivamente hasta encontrar un tipo que posea o bien acabar la lista y poner la fuente por defecto. Veamos un ejemplo. <font face="Comic Sans MS,arial,verdana">Este texto tiene otra tipografa</font> Que se visualizara as en una pgina web. Este texto tiene otra tipografa
Nota: Aqu tenemos un ejemplo de atributo cuyo valor debe estar limitado por comillas ("). Habamos dicho que las comillas eran opcionales en los atributos, sin embargo esto no es as
siempre. Si el valor del atributo contiene espacios, como es el caso de: face="Comic Sans MS,arial,verdana" debemos colocar las comillas para limitarlo. En caso de no tener comillas face=Comic Sans MS,arial,verdana se entendera que face=Comic, pero no se tendra en cuenta todo lo que sigue, porque HTML no lo asociara al valor del atributo. En este caso HTML pensara que las siguientes palabras (despus del espacio) son otros atributos, pero como no los conoce como atributos simplemente los desestimar.
Atributo size Define el tamao de la letra. Este tamao puede ser absoluto o relativo. Si hablamos en trminos absolutos, existen 7 niveles de tamao distintos numerados de 1 a 7 por orden creciente. Elegiremos por tanto un valor size="1" para la letra ms pequea o size="7" para la ms grande. <font size=4>Este texto es ms grande</font> Que se visualizara as en una pgina web.
Este texto es ms grande

Podemos asimismo modificar el tamao de nuestra letra con respecto al del texto mostrado precedentemente definiendo el nmero de niveles que queremos subir o bajar en esta escala de tamaos por medio de un signo + o -. De este modo, si definimos nuestro atributo como size="+1" lo que queremos decir es que aumentamos de un nivel el tamao de la letra. Si estabamos escribiendo previamente en 3, pasaremos automticamente a 4. Los tamaos reales que veremos en pantalla dependern de la definicin y del tamao de fuente elegido por el usuario en el navegador. Este tamao de fuente puede ser definido en el Explorer yendo al menu superior, Ver/Tamao de la fuente. En Netscape elegiremos View/Text Size. Esta flexibilidad puede en ms de una ocasin resultarnos embarazosa ya que en muchos casos desearemos que el tamao del texto permanezca constante para que ste quepa en un determinado espacio. Veremos en su momento que esta prefijacin del tamao puede ser llevada a cabo por las hojas de estilo en cascada. Atributo color El color del texto puede ser definido mediante el atributo color. Cada color es a su vez definido por un nmero hexadecimal que esta compuesto a su vez de tres partes. Cada una de estas partes representa la contribucin del rojo, verde y azul al color en cuestin. Podis entender cmo funciona esta numeracin y cules son los colores que resultan ms compatibles a partir de este artculo: Los colores y HTML. Por otra parte, es posible definir de una manera inmediata algunos de los colores ms frecuentemente usados para los que se ha creado un nombre ms memotcnico:
Nombre Color Aqua Black Blue Fuchsia Gray Green Lime Maroon Navy Olive Purple Red Silver Teal White Yellow
<font color="red">Este texto est en rojo</font> Que se visualizara as en una pgina web. Este texto est en rojo Con todo esto estamos ya en disposicion de crear un texto formateado de una forma realmente elaborada. Pongamos pues en practica todo lo que hemos aprendido en estos capitulos haciendo un ejercicio consistente en una pgina que tenga las siguientes caractersticas: Un titular con encabezado de nivel 1, en itlica y color verde oliva. Un segundo titular con encabezado de nivel 2, tambin de color verde oliva. Todo el texto de la pgina deber presentarse con una fuente distinta de la fuente por defecto. Por ejemplo "Comic Sans MS" y en caso de que sta no est en el sistema que se coloque la fuente "Arial".
Se puede ver una posible solucin del ejercicio en este enlace. (Ver el cdigo fuente de la pgina para ver cmo lo hemos resuelto) En este reportaje tratamos de acercarte todos los detalles relativos al buen uso de colores en HTML. Colores compatibles con todos los sistemas.
El la composicin de webs juegan un papel muy importante los colores. Se indican en valores RGB, es decir, que para conseguir un color
Tabla de color
cualquiera mezclaremos cantidades de Rojo, Verde y Azul. Los valores RBG se indican en numeracin hexadecimal, en base 16. (Los dgito pueden crecer hasta 16. Como no hay tantos dgitos numricos se utilizan las letras de la A a la F. 0=0 1=1 2=2 3=3 4=4 5=5 6=6 7=7 8=8 9=9 A=10 B=11 C=12 D=13 E=14 F=15
Para conseguir un color, mezclaremos valores de esta manera:
Donde cada valor puede crecer desde 00 hasta FF. Ejemplo: Cmo se cambiara la fuente para escribir en rojo: <font color="#FF0000">Rojo</font> Al Atributo color le damos un valor RGB en formato hexadecimal. El caracter # se coloca al principio de la cadena. Otros colores: Naranja Azul oscuro #FF8000 #000080 Verde turquesa #339966
RRGGBB
Colores compatibles en todos los sistemas Como las pginas web las tienen que ver todos los usuarios, y los sistemas que utilizan para entrar son distintos, hay que utilizar colores compatibles con la paleta de todos ellos. La forma de conseguir esto es limitando nuestros colores alos que se pueden conseguir utilizando la siguiente norma:
Utilizaremos siempre estos valores:
00 33 66 99 CC FF Ejemplos: #3366FF #FF9900 #666666 Se consiguen los colores siguientes:
#000000 #003300 #006600 #009900 #00CC00 #00FF00 #330000 #333300 #336600 #339900 #33CC00 #33FF00 #660000 #663300 #666600 #669900 #66CC00 #66FF00 #990000 #993300 #996600 #999900 #99CC00 #99FF00 #CC0000 #CC3300 #CC6600 #CC9900 #CCCC00 #CCFF00 #FF0000 #FF3300 #FF6600 #FF9900 #FFCC00 #FFFF00
#0000CC #0033CC #0066CC #0099CC #00CCCC #00FFCC #3300CC #3333CC #3366CC #3399CC #33CCCC #33FFCC #6600CC #6633CC #6666CC #6699CC #66CCCC #66FFCC #9900CC #9933CC #9966CC #9999CC #99CCCC #99FFCC #CC00CC #CC33CC #CC66CC #CC99CC #CCCCCC #CCFFCC #FF00CC #FF33CC #FF66CC #FF99CC #FFCCCC #FFFFCC
#0000FF #0033FF #0066FF #0099FF #00CCFF #00FFFF #3300FF #3333FF #3366FF #3399FF #33CCFF #33FFFF #6600FF #6633FF #6666FF #6699FF #66CCFF #66FFFF #9900FF #9933FF #9966FF #9999FF #99CCFF #99FFFF #CC00FF #CC33FF #CC66FF #CC99FF #CCCCFF #CCFFFF #FF00FF #FF33FF #FF66FF #FF99FF #FFCCFF #FFFFFF
Por ltimo, te ofrecemos unos archivos con programillas en JavaScript que te pueden ayudar a encontrar los colores adecuados. Entro otros, podrs encontrar el script que genera la tabla de arriba. Colores.zip 16Kb Explicamos una serie de atributos que se aplican de manera global a toda la pgina, como el color de fondo el del texto, de los enlaces, mrgenes, etc.
Las pginas HTML pueden construirse con variedad de atributos que le pueden dar un aspecto a la pgina muy personalizado. Podemos definir atributos como el color de
fondo, el color del texto o de los enlaces. Estos atributos se definen en la etiqueta <body> y, como decamos son generales a toda la pgina. Lo mejor para explicar su funcionamiento es verlos uno por uno. Atributos para fondos bgcolor: especificamos un color de fondo para la pgina. En el captulo anterior y en el taller de los colores y HTML hemos aprendido a construir cualquier color, con su nombre o su valor RGB. El color de fondo que podemos asignar con bgcolor es un color plano, es decir el mismo para toda la superficie del navegador. background: sirve para indicar la colocacin de una imagen como fondo de la pgina. La imagen se coloca haciendo un mosaico, es decir, se repite muchas veces hasta ocupar todo el espacio del fondo de la pgina. En captulos ms adelante veremos como se insertan imgenes con HTML y los tipos de imgenes que se pueden utilizar. Ejemplo de fondo Vamos a colocar esta imagen como fondo en la pgina.
La imagen se llama fondo.jpg y suponemos que se encuentra en el mismo directorio que la pgina. En este caso se colocara la siguiente etiqueta <body> <body background="fondo.jpg"> Se puede ver el efecto de colocar ese fondo en una pgina a parte.
Consejo: siempre que coloquemos una imagen de fondo, debemos poner tambin un color de fondo cercano al color de la imagen. Esto se debe a que, al colocar una imagen de fondo, el texto de la pgina debemos colocarlo en un color que contraste suficientemente con dicho fondo. Si el visitante no puede ver el fondo por cualquier cuestin (Por ejemplo tener deshabilitada la carga de imgenes) puede que el texto no contraste lo suficiente con el color de fondo por defecto de la web. Creo que lo mejor ser poner un ejemplo. Si la imagen de fondo es oscura, tendremos que poner un texto claro para que se pueda leer. Si el visitante que accede a la pgina no ve la imagen de fondo, le saldr el fondo por defecto, que generalmente es blanco, de modo que al tener un texto con color claro sobre un fondo blanco, nos pasar que no podremos leer el texto convenientemente. Ocurre parecido cuando se est cargando la pgina. Si todava no ha llegado a nuestro sistema la imagen de fondo, se ver el fondo que hayamos seleccionado con bgcolor y es interesante que sea parecido al color de la imagen para que se pueda leer el texto mientras se carga la imagen de fondo.
Color del texto text: este atributo sirve para asignar el color del texto de la pgina. Por defecto es el negro. Adems del color del texto, tenemos tres atributos para asignar el color de los enlaces de la pgina. Ya debemos saber que los enlaces deben diferenciarse del resto del texto
de la pgina para que los usuarios puedan identificarlos fcilmente. Para ello suelen aparecer subrayados y con un color ms vivo que el texto. Los tres atributos son los siguientes: link: el color de los enlaces que no han sido visitados. (por defecto es azul clarito) vlink: el color de los enlaces visitandos. La "v" viene justamente de la palabra visitado. Es el color que tendrn los enlaces que ya hemos visitado. Por defecto su color es morado. Este color debera ser un poco menos vivo que el color de los enlaces normales. alink: es el color de los enlaces activos. Un enlace est activo en el preciso instante que se pulsa. A veces es difcil darse cuenta cuando un enlace est activo porque en el momento en el que se activa es porque lo estamos pulsando y en ese caso el navegador abandonar la pgina rpidamente y no podremos ver el enlace activo ms que por unos instantes mnimos. Ejemplo de color del texto Vamos a ver una pgina donde el color de fondo sea negro, y los colores del texto y los enlaces sean claros. Pondremos el color de texto balnco y los enlaces amarillos, ms resaltados los que no estn visitados y menos resaltados lo que ya estn visitados. Para ello escribiramos la etiqueta body as: <body bgcolor="#000000" text="#ffffff" link="#ffff33" alink="#ffffcc" alink="ffff00"> El efecto se puede ver en una pgina a parte. Mrgenes Con otros atributos de la etiqueta <body> se pueden asignan espacios de margen en las pginas, lo que es muy til para eliminar los mrgenes en blanco que aparecen a los lados, arriba y debajo de la pgina. Estos atributos son distintos para Internet Explorer y para Netscape Navigator, por lo que debemos utilizarlos todos si queremos que todos los navegadores los interpreten perfectamente. leftmargin: para indicar el margen a los lados de la pgina. Vlido para iexplorer. topmargin: para indicar el margen arriba y debajo de la pgina. Para iexplorer. marginwidth: la contrapartida de leftmargin para Netscape. (Margen a los lados) marginheight: igual que topmargin, pero para Netscape. (Margen arriba y abajo) Tenemos un artculo sobre la utilizacin de estos atributos para hacer diseos avanzados con tablas en distintas definiciones de pantalla, que puede ser interesante de leer. Un ejemplo de pgina sin margen es la propia pgina de DesarrolloWeb.com, que ests visitando actualmente. (Por lo menos a la hora de escribir este artculo) Adems, vamos a ver otra pgina sin mrgenes, por si alguien necesita ver el ejemplo en estas lneas.
<body topmargin=0 leftmargin=0 marginheight=0 marginwidth=0 bgcolor="ffffff"> <table width=100% bgcolor=ff6666><tr><td> <h1>Hola amigos</h1> <br> <br> Gracias por visitarme! </td></tr></table> </body> Esta pgina tiene el fondo blanco y dentro una tabla con el fondo rojo. En la pgina podremos ver que la tabla ocupa el espacio en la pgina sin dejar sitio para ningn tipo de margen. Puede verse el ejemplo en una pgina a parte. Vemos lo que son las listas y los tres tipos que hay. Estudiamos las listas desordenadas.
Las posibilidades que nos ofrece el HTML en cuestin de tratamiento de texto son realmente notables. No se limitan a lo visto hasta ahora, sino que van ms lejos todava. Varios ejemplos de ello son las listas, que sirven para enumerar y definir elementos, los textos preformateados y las cabeceras o ttulos. Las listas son utilizadas para citar, numerar y definir objetos. Tambin son utilizadas corrientemente para desplazar el comienzo de lnea hacia la derecha. Podemos distinguir tres tipos de listas: Listas desordenadas Listas ordenadas Listas de definicin
Las veremos detenidamente una a una. Listas desordenadas Son delimitadas por las etiquetas <ul> y </ul> (unordered list). Cada uno de los elementos de la lista es citado por medio de una etiqueta <li> (sin cierre, aunque no hay inconveniente en colocarlo). La cosa queda as: <p>Pases del mundo</p> <ul> <li>Argentina <li>Per <li>Chile </ul> El resultado: Pases del mundo Argentina Per
Chile
Podemos definir el tipo de vieta empleada para cada elemento. Para ello debemos especificarlo por medio del atributo type incluido dentro de la etiqueta de apertura <ul>, si queremos que el estilo sea vlido para toda la lista,o dentro le la etiqueta <li> si queremos hacerlo especfico de un solo elemento. La sintaxis es del siguiente tipo: <ul type="tipo de vieta"> donde tipo de vieta puede ser uno de los siguientes: circle disc square
Nota: En algunos navegadores no funciona la opcin de cambiar el tipo de vieta a mostrar y por mucho que nos empeemos, siempre saldr el redondel negro. En caso de que no funcione siempre podemos construir la lista a mano con la vieta que queramos utilizando las tablas de HTML. Veremos ms adelante cmo trabajar con tablas.
Vamos a ver un ejemplo de lista con un cuadrado en lugar de un redondel, y en el ltimo elemento colocaremos un crculo. Para ello vamos a colocar el atributo type en la etiqueta <ul>, con lo que afectar a todos los elementos de la lista. <ul type="square"> <li>Elemento 1 <li>Elemento 2 <li>Elemento 3 <li type="circle">Elemento 4 </ul> Que tiene como resultado o Elemento 1 Elemento 2 Elemento 3 Elemento 4
Estudiamos otro tipo de listas: las listas ordenadas.
Continuamos estudiando las listas de HTML, con las que crear estructuras atractivas para presentar la informacin. Listas ordenadas En este caso usaremos las etiquetas <ol> (ordered list) y su cierre. Cada elemento sera igualmente precedido de su etiqueta <li>. Pongamos un ejemplo:
<p>Reglas de comportamiento en el trabajo</p> <ol> <li>El jefe siempre tiene la razn <li>En caso de duda aplicar regla 1 </ol> El resultado es: Reglas de comportamiento en el trabajo 1. El jefe siempre tiene la razn 2. En caso de duda aplicar regla 1 Del mismo modo que para las listas desordenadas, las listas ordenadas ofrecen la posibilidad de modificar el estilo. En concreto nos es posible especificar el tipo de numeracin empleado eligiendo entre nmeros (1, 2, 3...), letras (a, b, c...) y sus maysculas (A, B, C,...) y nmeros romanos en sus versiones maysculas (I, II, III,...) y minsculas (i, ii, iii,...). Para realizar dicha seleccin hemos de utilizar, como para el caso precedente, el atributo type, el cual ser situado dentro de la etiqueta <ol>. Los valores que puede tomar el atributo en este caso son: 1 Para ordenar por nmeros a Por letras del alfabeto A Por letras maysculas del alfabeto i Ordenacin por nmeros romanos en minsculas I Ordenacin por nmeros romanos en maysculas
Nota: Recordamos que en algunos navegadores no funciona la opcin de cambiar el tipo de vieta a mostrar
Puede que en algn caso deseemos comenzar nuestra enumeracin por un nmero o letra que no tiene por qu ser necesariamente el primero de todos. Para solventar esta situacin, podemos utilizar un segundo atributo, start, que tendra como valor un nmero. Este nmero, que por defecto es 1, corresponde al valor a partir del cual comenzamos a definir nuestra lista. Para el caso de las letras o los nmeros romanos, el navegador se encarga de hacer la traduccin del nmero a la letra correspondiente. Os proponemos un ejemplo usando este tipo de atributos: <p>Ordenamos por numeros</p> <ol type="1"> <li>Elemento 1 <li> Elemento 2 </ol> <p>Ordenamos por letras</p> <ol type="a"> <li>Elemento a <li> Elemento b </ol>
<p>Ordenamos por nmeros romanos empezando por el 10</p> <ol type="i" start="10"> <li>Elemento x <li> Elemento xi </ol> El resultado: Ordenamos por nmeros 1. Elemento 1 2. Elemento 2 Ordenamos por letras a. Elemento a b. Elemento b Ordenamos por numeros romanos empezando por el 10 x. xi. Elemento x Elemento xi
Vemos las listas de definicin y aprendemos a anidar listas para crear estructuras lista ms complejas.
Terminamos el tema de listas estudiando las listas de definicin. Veremos tambin la anidacin de listas. Listas de definicin Cada elemento es presentado junto con su definicin. La etiqueta principal es <dl> y </dl> (definition list). La etiquetas del elemento y su definicin son <dt> (definition term) y <dd> (definition definition) respectivamente. Aqu os proponemos un cdigo que podr aclarar este sistema: <p>Diccionario de la Real Academia</p> <dl> <dt>Brujula <dd>Serula montada en una escbula <dt>Oreja <dd>Sesenta minutejos </dl> El efecto producido: Diccionario de la Real Academia Brujula
Serula montada en una escbula Oreja Sesenta minutejos Fijaos en que cada lnea <dd> esta desplazada hacia la izquierda. Este tipo de etiquetas son usadas a menudo con el propsito de crear textos ms o menos desplazados hacia la izquierda. El cdigo: <dl> <dd>Primer nivel de desplazamiento <dl> <dd>Segundo nivel de desplazamiento <dl> <dd>Tercer nivel de desplazamiento </dl> </dl> </dl> El resultado: Primer nivel de desplazamiento Segundo nivel de desplazamiento Tercer nivel de desplazamiento Anidando listas Nada nos impide utilizar todas estas etiquetas de forma anidada como hemos visto en otros casos. De esta forma, podemos conseguir listas mixtas como por ejemplo: <p>Ciudades del mundo</p> <ul> <li>Argentina <ol> <li>Buenos Aires <li>Bariloche </ol> <li>Uruguay <ol> <li>Montevideo <li>Punta del Este </ol> </ul> De esta forma creamos una lista como esta: Ciudades del mundo Argentina 1. Buenos Aires 2. Bariloche Uruguay
1. Montevideo 2. Punta del Este Una referencia til, y una lista completa de los caracteres especiales del HTML.
Una pgina web se ha de ver en paises distintos, que usan conjuntos de caracteres distintos. El lenguaje HTML nos ofrece un mecanismo por el que podemos estar seguros que una serie de caracteres raros se van a ver bien en todos los ordenadores del mundo, independientemente de su juego de caracteres. Este conjunto son los caracteres especiales. Cuando queremos poner uno de estos caracteres en una pgina, debemos sustituirlo por su cdigo. Por ejemplo, la "" (a minscula acentuada) se escribe "á" de modo que la palabra pgina se escribira en una pgina HTML de este modo: página Caracteres especiales bsicos En realidad estos caracteres se usan en HTML para no confundir un principio o final de etiqueta, unas comillas o un & con su correspondiente caracter. < & < & > " > "
Caracteres especiales del HTML 2.0 Á É Í Ó Ú á é í ó ú Ä Ë Ï Ö Ü ä ë ï À È Ì Ò Ù à è ì ò ù Â Ê Î Ô Û â ê î
ö ü Ã Ñ Õ ã ñ õ Ø ø Ð ð ß
ô û å Å Ç ç Ý ý ÿ Þ þ Æ æ
Caracteres especiales del HTML 3.2 ¼ ½ ¾ © ® ª ² ³ ¹ ¯ µ ¶ · ° ¸ ¿ ¡ £ ¥ § ¤ ¦ « ¬ º ´ ¨ ± »
Otros caracteres especiales × ÷ ¢ €

Para descargar la lista de caracteres especiales:
caracteresespeciales.zip 2Kb
Una gua para el correcto diseo de sitios webs accesibles desde PDAs. Por Jos Julio Ruiz.
Una gua para el correcto diseo de sitios webs accesibles desde PDAs. (Personal Digital Assitants)
1. Ser consciente de las limitaciones de los PDAs.
Los ordenadores de bolsillo tienen una pantalla ms reducida, menos memoria y menos velocidad de proceso que los ordenadores convencionales.
2. Definir cuidadosamente la estructura del site.
Con las secciones ms importantes y enlaces a las mismas desde todas las pginas. La primera pgina ya ha de mostrar informacin til para el usuario, evitando pginas de bienvenida o de seleccin de idioma.
3. Evitar el uso de tablas.

En la mayora de los casos basta con dividir el texto con saltos de lnea y prrafos. El procesado de las tablas ralentiza la velocidad de carga de la pgina. Si se utilizan, especificar las dimensiones en porcentajes y sin sobrepasar los 150 pixels de ancho.
4. No utilizar marcos (frames).

Si ya de por s se ha de intentar evitar su uso en el Internet convencional, con ms razn en el Internet mvil: la mayora de los navegadores no los soportan y restan mucho espacio en la pantalla.
5. Publicar contenidos concisos.
Por la limitacin de la memoria y de la pantalla, escoger slo la informacin ms importante y esencial.
6. Organizar la informacin cuidadosamente.
Minimizando la longitud del texto (mximo 3 pantallas de longitud) y escogiendo una distribucin ptima de los links de navegacin (enlaces a otras secciones). Si el texto debe ser extenso, incluir enlaces a distintas partes del mismo para mejorar la navegacin.
7. Optimizar los grficos.
- En dimensin: las pantallas de dispositivos Palm OS tienen un tamao de 150x150, y los Windows CE/Pocket PC de unos 240x320. - En tamao: escogiendo el nmero de colores visibles en el PDA. (16 y 8 bits de color; 16, 4 y 2 escalas de grises).
8. Incluir texto alternativo en todas las imgenes.
Con el tag alt ofrecemos informacin a los usuarios que han deshabilitado la carga de imgenes en su navegador.
9. Aadir el tag handheldfriendly al comienzo de todas las pginas.

AvantGo sabr que la pgina est optimizada para PDAs. <meta name="HandheldFriendly" content="true"> .
10. Utilizar convenientemente el caching de las pginas.
Para aumentar la velocidad de carga de las pginas. No guardar en cach las pginas que se actualizan todos los das (pgina de noticias), y guardar en cache las pginas que se actualizan raramente (pgina de crditos).
Veamos una serie de consejos prcticos para disear un buen men de navegacin.
Resumen. 1. El menu es una lacra de la usabilidad. Procura crear una navegacion mas fluida a traves de (a) buenos contenidos, (b) directorios y (c) buscadores bien indexados. 2. Procura evitar un menu con muchas opciones (mas de 5 puede ser mucho). 3. Es bueno indicar al usuario "donde esta", pero no es necesario desactivar esa opcion. 4. Los colores de enlace "nuevo", "over" y "visitado" deben ser del mismo color pero con diferentes tonalidades. No uses diferentes colores para cada estatus. 5. Si el menu se despliega, procura abrir una pagina por defecto y manten el menu desplegado (no lo cierres sin que el usuario lo haya dicho). 6. El uso de los "bullets" es necesario cuando tenemos opciones que ocupan 2 lineas de texto.
1. Procura evitar un menu con muchas opciones (mas de 5 puede ser mucho). Si los menus de navegacion son una de las lacras de la usabilidad, debemos procurar disearlos (forma y funcion) lo mejor posible para evitar errores y aliviar la navegacion a nuestros usuarios. Una regla basica es eliminar opciones. No hagas menus muy extensos. Mas de 5 opciones son muchas para leer, entender y pinchar. Reduce el numero al maximo y procura que lo que pongas en el menu tenga una importancia real. Es mejor que una opcion del menu agrupe diferentes apartados que tener un menu con muchas opciones "simples". El ejemplo que nos puede sonar es el de agrupar las FAQ, Oficinas, Mapa, Carta del Presidente, Memoria Anual, Historia de la Compaa en una opcion que ponga "Todo sobre Nosotros". Eliminamos opciones y no perdemos accesibilidad. Si existe una necesidad real de tener muchas opciones, procura usar un directorio y ponlo en el medio de la pagina. La gente encontrara las cosas mas rapido y el menu no se perdera por debajo de la linea de scroll. El ejemplo mas practico es en las tiendas donde la barra de "departamentos" suele extenderse hasta mas alla del pixel 768. Es mejor poner los departamentos
relacionados con la categoria donde se encuentra el usuario y una opcion de "ver todos los departamentos". 2. Es bueno indicar donde esta el usuario, pero no es necesario desactivar esa opcion. Una practica habitual en los menus es desactivar la opcion donde se encuentra el usuario para indicar de una forma clara "donde estoy". Si bien es una buena practica, tiene algunos inconvenientes: El usuario no puede volver a pinchar sobre esta opcion si se siente perdido. Debemos procurar usar enlaces subrayados para hacer mas evidente la diferencia. Si los enlaces no estan subrayados, es dificil apreciar la diferencia.
Es recomendable dejar los botones del menu siempre activos y procurar usar la pagina en si para mostrar al usuario la informacion de "donde estoy". Si queremos usar el menu para indicar al usuario "donde estoy", es mejor usar algun elemento grafico en el menu que indique esa diferencia.
3. Los colores de enlace "nuevo", "over" y "visitado" deben ser del mismo color pero con diferentes tonalidades. Las CSS nos permiten manejar con soltura el estilo de nuestro site incluyendo los eventos de enlace "nuevo", "visitado" y (en algunos casos) el evento de "over". Si bien los codigos de color son complejos de entender y la mayoria de los usuario ni siquiera llegan a recibir el mensaje, es bueno usarlos para aquellos usuarios mas avanzados que requieran de mas informacion por parte de nuestra web. La regla general que debemos aplicar es usar un unico color para los enlaces, y 3 tonos para los diferentes eventos. Tendremos un color X (azul es la norma) para los enlaces y un tono mas brillante para el evento de "over" y un tono mas apagado para el enalce visitado. Otra variante para el "over" es usar un color que aparecera en el fondo de la zona enlazada. Ejemplo de diferentes estilos de enlaces. En la imagen inferior, podemos ver ejemplos de eventos en un enlace. El ejemplo A, donde usamos un unico color y 3 tonos diferentes, es el recomendable frente al ejemplo B donde no se usa el subrayado y el color del enlace cambia a cada evento.
Usa colores diferentes si deseas indicar diferentes tipos de enlaces (internos, externos, acceso a diferentes areas, etc...) No hagas del evento "over" una fiesta y procura evitar las metamorfosis a "bold", aparece el "subrayado", etc.
4. Si el menu se despliega, procura abrir una pagina por defecto y manten el menu desplegado (no lo cierres sin que el usuario lo haya dicho). Otra lacra de la usabilidad son los menus que se despliegan. No los uses. Es mejor navegar a traves de paginas donde el usuario ve resultados, y se informa de cuales son las siguientes opciones a ver. Si el usuario se pierde volvera a la "home"o pulsara el boton de "volver" (si ya sabe navegar puede que incluso use la barra de "donde estoy". Si por motivos de fuerza mayor los tienes que usar, procura seguir un par de reglas. No uses menus con rollover. Esta probado que el usuario se siente mas comodo si pincha y el menu se abre. Los menus se abren y se cierran si el usuario lo indica. Si por razones de espacio tienes que cerrar un menu cuando se abre otro, reduce el numero de opciones. Muchas veces, tenemos un menu llamado "Coches". Si pinchamos sobre esta opcion el menu se despliega con las opciones de "Deportivos, 4x4, etc..". Es bueno si ademas de desplegar el menu, abrimos una pagina donde explicamos las opciones mas comunes de esa pagina y/o destacamos algun producto. Ademas de ayudar al usuario a manejar el menu, podemos acercar opciones comunes dentro de esa zona del tipo "ultimas novedades", "buscador", "productos mas demandados".
5. El uso de los "bullets" es necesario cuando tenemos opciones que ocupan 2 lineas de texto. Si tu menu se compone unicamente de texto, procura que quede claro donde empieza y donde acaba cada opcion. Para ello el uso de "bullets" sera lo mas adecuado. Es recomendable usar los bullets del sistema para aliviar el peso de la pagina. Ejemplo de menus con y sin "bullets". Usando los bullets en un menu ayudamos a separar las opciones y el usuario entiende donde empieza y donde acaba cada opcion. Imagen tomada de amazon.com
En un menu sin bullets es mas complejo separar las opciones y cuesta ver donde empieza y acaba cada enlace. Pginas ms ligeras implican ms pginas vistas. Algunos consejos para reducir el peso de tu site.
Resumen. 1. Paginas mas ligeras incrementan el numero de paginas vistas. 2. Elimina las imagenes. Elimina los banners de autopromocion (no dan beneficios). 3. Aprovecha todo lo que el sistema operativo te ofrece (botones, colores, tablas, tipografias). 4. Se flexible con las limitaciones del html. Reduce el peso de tu site. Reducir el peso de un site en un 20% equivale a incrementar en un 20% el numero de paginas vistas. El peso de las paginas es un lastre que hace que el numero de paginas vistas se reduzca por sesion de usuario. Peso de las paginas Site A Site B 30kbs de html + 20kbs de imagenes 15kbs de html + 10kbs de imagenes Total peso / velocidad de conexion 50kbs / 5kbs/seg 25kbs / 5kbs/seg En una sesion de 30segs bajan 3 paginas. bajan 6 paginas.
Tomando como constantes el tiempo de conexion y la velocidad de descarga, la variable donde un site puede tomar ventaja para servir mas paginas es reduciendo el peso. Reduciendo el peso podemos hacer que el usuario se baje mas informacion en el mismo tiempo de conexion. El reducir el peso de las paginas no tiene por que requerir cambios dramaticos. Conseguir una reduccion del 10-20% del peso global del site puede suponer un gran adelanto respecto a la competencia. En un site donde las paginas bajan con rapidez no da pereza pinchar en los botones. No solo se trata de cuidar a los usuarios con modem. Si las paginas pesan poco y la respuesta de la web a las peticiones del usuario es rapida y agil, no da pereza seguir pinchando para comprobar datos y recoger mas informacion. Si el site pesa y cada peticion exige un tiempo de carga, el usuario se desanima y parara de pedir informacion con lo que no finalizara su labor de forma satisfactoria. En internet que un sistema responda de forma rapida es vital para trasmitir valores de
calidad, confianza y seguridad. Es mejor crear 3 paginas de 10kbs que 1 de 30kbs. En internet cuenta mas el acceder a informacion precisa que a mucha informacion. Ofrecer paginas ligeras donde el usuario pueda tomar decisiones rapidas sobre avanzar o retroceder es vital. El camino hacia la informacion final (donde si podremos crear paginas mas completas) debe estar compuesto de paginas simples que ofrezcan rutas claras. El ofrecer todas las rutas no ayuda a tomar una decision. Es mejor ofrecer una pagina sencilla y que sea el usuario el que tome la decion de seguir o retroceder, pero no le intentes enganchar ofreciendo muchas opciones (solo le aturdiras). La regla basica para crear paginas de 10kbs es evitar ponerlo todo en cada pagina. Muchos sites "arrastran" los menus de navegacion de todo el site en todas las paginas cuando por lo general indicar la posicion del usuario en el site junto a un boton de "home" y un buscador resuelven todas las dudas. Elimina el grafismo. Esto incluye los banners de autopromocion. El unico grafico necesario es el logo de tu site. Si es relevante, incluye fotografias del producto, noticias o ilustraciones de la actividad. No pongas banners de autopromocion. Si tu site incluye banners, procura ponerlos solo cuando tengas un patrocinador real. Si no lo tienes evita poner banners internos. Estan incrementando el peso de la pagina, su utilidad es mas o menos nula y estan creando ceguera en el usuario. El problema de los graficos es doble. El peso suele ser alto y generan una conexion con el servidor que suele retrasar el envio del resto de informacion. Procura usar los graficos esenciales. Cuanto menos pese tu pagina mas satisfecho estara tu usuario. Aprovecha lo que el sistema te da. Botones, tablas, paleta de colores, tipografias, menus desplegables. El sistema operativo te ofrece una gran cantidad de herramientas que sabiendo combinar te pueden ayudar a sustituir gran parte del grafismo de tu site. Las tipografias que ofrece el sistema son limitadas pero mas que suficientes para crear titulares, botones, etc. No uses imagenes para crear "solo titulos". Las tablas y los colores del sistema suelen ser mas que suficientes para crear todo tipo de botoneras, lay-outs. La austeridad de este estilo se puede enriquezer con graficos bien seleccionados y fotos. Procura utilizar todo lo que el html crea por defecto como las listas y bullets. El querer cambiar el sistema solo genera paginas mas lentas, nadie va a apreciar la mejora si al final el site va mas lento. Concentra las fuerzas en ofrecer contenido de calidad y en crear herramientas que funcionen mas rapido. Se flexible con las limitaciones del html. El principal motivo por el que las paginas bajan despacio es por que los diseadores (graficos y programadores) de las paginas, pretenden imponer su "estilo de diseo" a
un soporte que tiene ciertas caracteristicas. La precision del html es algo ruda en cuanto al manejo de tipografia, parrafos, margenes y justificaciones, pero es mejor saber moverse con agilidad dentro de estos limites que imponer a base de codigo y graficos unos limites que no mejoran el funcionamiento del site. Se flexible con la herramienta y todo funcionara de forma mas rapida.
Paginas Fluidas
Son las que sus dimensiones se adaptan al tamao del navegador. Cuando usarlas y cuando no.
Resumen. 1. Paginas fluidas: definicion. 2. Para noticias y texto puede ser valido el tener pagina que se redimensionan. 3. Para aplicaciones "web" es mejor usar tamaos fijos.
1. Paginas fluidas: definicion. Dentro del esquema general de una pagina web existen varias opciones: Que la pagina este centrada o justificada a la izquierda. Que la pagina tenga un tamao fijo o se adapte al tamao del navegador.
Cuando el tamao de la pagina se adapta a las dimensiones del navegador tenemos una pagina fluida. Esta adaptacion se consigue haciendo las tablas que componen nuestra pagina con tamaos relativos (%). Amazon.com es una pagina fluida que se puede seguir como ejemplo. 2. Para noticias y texto intensivo es mejor el usar paginas fluidas. Para paginas con texto y noticias es mejor el crear nuestras paginas "fluidas" ya que no perjudicamos la navegacion en resoluciones de monitor bajas (640x480) y si aprovechamos el uso de monitores con mayor resolucion al ofrecer mas informacion en la parte superior (menos scroll). 3. Para aplicaciones "web" es mejor usar tamaos fijos. En el caso de aplicaciones "web" tipo "web mail", "carrito de la compra" y formularios, es mejor usar paginas con tamao fijo ya que en monitores con resolucion de pantalla superior a 1024 la distancia entre la informacion y los botones es muy grande y se pierda el contexto (botones situados en el margen derecho y el campo de texto en el margen izquierdo). Esto no evita que podamos tener la pagina construida con zonas "fluidas" y zonas rigidas. Dentro de una misma pagina, zonas de botones y navegacion es bueno conservar el tamao fijo y zonas de informacion es mejor ofrecer una solucion "fluida".
El inconveniente de usar tamaos "fluidos" es que el navegador Netscape tarda mas en pintar la informacion. Los errores 404 de pgina no encontrada son muy tpicos. Aprende a tratarlos, ofrecer soluciones y corregirlos.
Resumen. 1. Esta pagina existe. 2. Identifica claramente el error y explica por que se ha podido producir. 3. Ofrece soluciones relevantes y procura corregirlos.
1. La pagina de error existe. Motivos mas comunes por los que un site da como respuesta al usuario una pagina de error. Enlace roto. Este error no tiene justificacion. Se debe corregir. Paginas que caducan o se mueven. Este error no tiene justificacion y se debe identificar y corregir. Al escribir o copiar una URL. Este error se puede controlar ofreciendo URL sencillas y consistentes. Entrada de datos en un formulario. Busqueda que no ofrece resultados. Este error no se puede controlar, pero se debe identificar claramente. Sesion expirada. Este error se da cuando la pagina pedida se encuentra bajo un servidor seguro o dentro de la sesion de un usuario. Si la sesion finalizo se debe volver a introducir el nombre de usurio y contrasea. Este error se debe indentificar y explicar claramente.
Estos errores no siempre estan bajo nuestro control, con lo que siempre se debe crear la pagina error. Como minimo esta pagina debe contener una explicacion breve del motivo posible del error junto al logo de la pagina y enlaces a la portada, mapa del web, ayuda, etc. Crear una pagina de error "generica" para todos los errores no es recomendable. Algunos errores no estan bajo nuestro control y esto debe quedar claro al usuario. De igual forma hay errores irreversibles que el usuario debe entender que no tendran solucion (informacion borrada por ejemplo). Identificando los errores y creando paginas especificas se puede ayudar al usuario a continuar con su camino y el site podra tener un registro de "paginas de error mas visitadas" con lo que se podran identificar mas facilmente donde falla el site. 2. Identifica claramente el error y explica por que se ha podido producir. En algunos casos identificar el error y ofrecer la solucion es sencillo. El tipico caso del "error 404", pagina no encontrada se resuelve poniendo una pagina con un texto del estilo "pagina no encontrada en nuestro servidor" y los botones de, portada, mapa,
secciones principales, ayuda y mail. La pagina de error debe tener el mismo "template" que el resto del site pero se debe informar claramente de que ha habido un error. Si la pagina no ofrece claramente esta informacion, el usuario se puede encontrar ante una pagina demasiado ambigua y sentirse perdido. Los errores de escribir o copiar un URL son dificiles de controlar. Este problema suele venir por la trasmision de direcciones por via impresa o vocal. Si alguien tiene que escribir una URL copiando la direccion desde la pagina de publicidad de una revista, es normal que se produzcan errores. Este error es de dificil deteccion ya que suele equivaler a un "404" pagina no encontrada. De nuevo, procura mantener un "template" uniforme, explica lo que ha podido pasar y pon enlaces a la portada y demas. El error de pagina movida o caducada tiene varios remedios. Si vas a mover tu site de servidor y URL, procura hacerlo de forma gradual de tal forma que los usuarios no sientan la diferencia. Procura mantener las paginas el maximo tiempo posible en ambos servidores de tal forma que bookmarks y buscadores te sigan reportando usuarios. Lo que debes hacer es en las paginas viejas cambiar los enlaces por los de las paginas nuevas de tal forma que el usuario que accede a tu site por un bookmark, se traslade sin problemas. Si en tu site las paginas caducan o se mueven, procura explicarlo de forma razonable en la pagina de error. Si no puedes justificar el error de forma razonable, deberias pensar en remediar el problema. Los errores de entrada de datos en un formulario es algo mas complejo y exige analizar cada campo del formulario y entender que se esta pidiendo, que datos puede introducir un usuario y que es lo que queremos que ponga. Una forma sencilla de resolver este tipo de errores en ofrecer ejemplos del tipo de datos que queremos que ponga en la casilla, si nos referimos a un numero de telefono es bueno indicar el numero de cifras minimo, indicar posibles limitaciones (no moviles), y posibles excepciones (indique aqui su extension). Ejemplo de entrada de datos. Numero de telefono: Ext (opcional):
Incluir el prefijo provincial. No telefonos moviles (celulares).
Para ofrecer la explicacion sobre errores en un formulario, se devuelve la misma pagina del formulario con un encabezado donde se indica claramente los errores que se han producido y se ofrecen ayudas generales. Se suelen pintar los campos erroneos con un color "llamativo" de tal forma que el usuario sea capaz de escanear rapidamente el formulario.
La solucion menos convencional de poner alertas del sistema para corregir errores en un formulario tiene estos inconvenientes: La alerta no esta unida "fisicamente" al formulario con lo que es dificil entender la conexion. La alerta del sistema no ofrece interactividad con la pagina con lo que el mensaje de error es pasivo. Una alerta dentro de la pagina web puede ofrecer enlaces a secciones de ayuda, seguridad, etc.
Recomendable seguir el estandar de crear un encabezado dentro del formulario donde se resumen los errores y se ofrece ayuda relevante. El error de buscador que no encuentra nada se puede corregir haciendo un seguimiento de los "terminos" que la gente introduce en nuestro buscador. La pagina de error generica de este caso debe ayudar al usuario a buscar. Si el buscador es ortograficamente correcto se debe indicar para que el usuario lo entienda, pero se ha de saber que esto es algo que se debe corregir haciendo que el buscador encuentro palabras independientemente de su ortografia (acentos y ees no estan disponibles en todos los teclados). Si el buscador es capaz de encontrar las cosas por codigos mas precisos que el "nombre" se debe indicar. En el caso de la bolsa, el ticker de la compaia es mas preciso, en el caso de libros el codigo ISDN es mas preciso. Si no es capaz de buscar por terminos precisos, tambien se debe indicar. En la pagina de error se debe indicar brevemente como funciona la base de datos para que el usuario entienda el funcionamiento del sistema y aprenda a buscar directamente por "titulo", "nombre" o "fecha" o "precio". Ofreciendo informacion de forma sencilla el usuario podra manejar de forma mas precisa las herramientas disponibles.
El error de sesion expirada se debe identificar claramente y ofrecer un mensaje sencillo. Enumerar los motivos por los que una sesion expira y ofrecer el boton de volver a la pagina de identificacion suele ser suficiente. Si la pagina requiere registro, pero no es segura (leer el NYT, ver peliculas en IFILM.com), se debe ofrecer la posibilidad de "recordar" estos datos para no tener que volver a introducirlos. En paginas seguras se debe tender a reconocer al usuario, pero pedirle la confirmacion de su clave. De esta forma la sesion nunca "expira", se dan menos errores y no se pierde seguridad. 3. Ofrece soluciones relevantes y procura corregirlos. Si el error esta identificado correctamente, el siguiente paso es ofrecer soluciones relevantes. En muchos casos la unica solucion pueder ser volver a la pagina anterior y
probar de nuevo. Si es asi, indicalo y no hagas perder el tiempo al usuario con mas opciones de "dudoso" valor. Si la solucion al problema es mas compleja (en un formulario por ejemplo) indicalo y procura ir al grano en la explicacion. Explicaciones muy largar son dificiles de leer y nadie tiene tanto tiempo que perder. El seguir el registro de las paginas de error en el log de visitas es algo que debe formar parte del mantenimiento del site. Estos registros se deben almacenar e indexar para buscar pautas de errores comunes que seran solucionados. Corregir errores es una tarea tediosa. Se debe compilar una lista e ir poniendo metas para fijarlos. Si en el log de visitas las paginas de error aparecen de forma "notable" (mas de un 3% es demasiado) procura tomar medidas para reparar estos errores. Enlaces relacionados: Recopilacion de paginas de errores 404. http://www.plinko.net/404/. Anlisis del uso de banners como herramienta de comunicacin. Consejos para mejorarlos y ms documentacin.
Resumen.
1. El banner funciona. Si bien como soporte de un modelo de negocio esta

cuestionado por el ingresos que es capaz de generar, como medio de comunicacion es algo que se debe aprovechar. 2. En este articulo veremos puntos clave a la hora de disear nuestro banner para lograr una comunicacion efectiva. No loop, si animacin, menor peso, mas grande.
1. El banner funciona. En un estudio se hace referencia a la ceguera al banner. El estudio muestra que los usuarios no son tan ciegos al banner como parece y la impresion del mensaje es efectiva. Desde el punto de vista del anunciante, el banner puede funcionar. Cada vez internet resta mas tiempo a la television (evidentemente mas que los periodicos y revistas) y en internet se encuentran nichos de Recuerdo del banner: mercado que en el mundo real son dificiles de seguir. 43% algo. Por otro lado, en internet tenemos la oportunidad de acceder 57% nada. a un rango de poblacion mas amplio que un medio con limitaciones geograficas, temporales, etc. Incluido el 27.5.2001: Los datos de Site Usability sobre la ceguera al banner despertaron dudas por parte de algunos lectores por lo que se hizo una encuesta propia para saber hasta que punto este dato era cierto. La encuesta que hice da que un 25% de los usuarios recuerdan algun banner de su ultima sesion. Este dato da muy
pocas esperanzas al banner actual con lo que debemos pensar en ir cambiando los banners. Otra idea es ir haciendo las paginas que dependen de ingresos por publicidad mas "ligeras" para que el banner pueda brillar lo mas posible y capte la atencion del usuario. 2. No siempre debe llevar a una pagina. El dato que se toma para medir la eficacia de un banner es el click through. Esto es correcto pero no simpre es valido. Los anuncios sirven para ofrecer informacion, posicionar o darle valor a una marca y para despertar la necesidad de adquirir un determinado producto. El click through esta una dimension mas alla de estos datos ya que ofrece acceso instantaneo a la adquisicion de este producto. El problema es que muchos productos que se anuncian en banners no se pueden adquirir directamente. Un banner sobre el estreno de una pelicula pude ofrecer informacion sobre el dia del estreno y como opcion el visitar la pagina. En este ejemplo, la efectividad del banner no se mide solamente por el click through. La impresion correcta del mensaje es suficiente para justificar la inversion. Este banner sirve para comunicar la fecha de estreno de la pelicula y como opcion de enlace nos invita a ver los grupos de discusion.
3. Debe llevar a una pagina de interes. El enlace que contiene el banner debe llevar a una pagina diseada especificamente para este fin. Si el banner lleva a la portada, el usuario puede sentirse confundido o no encontrar aquello que vio en el banner. Si lo que estamos comunicando es la existencia de nuestro site, se puede preparar una pagina de bienvenida especial donde se explica el proyecto, objetivos, etc. En el caso de este banner de Mixmail.com, pese a invitarnos a darnos de alta en su servicio, el banner te lleva a la portada general.
4. Banners avanzados son interesantes pero la gente no los usa por que no sabe si debe pinchar o usarlo. Estos banners que contienen combos, campos de texto o botones, donde el usuario puede realizar parte de la transaccion antes de ver la pagina. Estan bien en concepto, pero el problema es que mucha gente abusa de este tipo de banners, engaando al usuario haciendo parecer botones del sistema, etc. No son muy recomendables.
Ejemplo de banner avanzado que funciona.
Aqui tenemos dos ejemplos de banners que intentan simulan el ser avanzados.
5. El peso importa. En general haciendo un bonito gif, el banner no deberia pasar de 4kbs. Esto es evidente, pero hay que recordarlo. Haz tu banner ultra ligero. El modelo google de banners en formato texto es el paso mas avanzado en este campo. Quizas sea algo extremo, pero en el mundo google funciona (academido, profesional, usuarios avanzados). Personalmente creo que es otra dimension de la publicidad a la que mucha gente no llega. Este es el ejemplo de banner que se puede encontrar en google.com
Imagen reducida, este enlace permite verla a tamao real.
Si bien este modelo de publicidad es demasiado avanzado, lo que si hay que destacar de google es la forma de comprar publicidad. Todo en formato web bien sencillo. 6. Animacion si, pero procura fijar el mensaje desde el primer momento. Que el gif este animado es parte de la "sorpresa" que ayuda a fijar el mensaje. Procura que la animacion ocurra en una parte del banner mientras el resto permanece estatico ofreciendo claramente el mensaje que quieres transmitir. Pese a esto no se deben hacer loops y se debe fijar el mensaje en el primer frame. Los loops hacen que el mensaje se distorsione al perder la identificacion de "conclusion" e "inicio". Si la gente no sabe donde esta el final, no entenderan cual es el sentido del banner con lo que parte de la efectividad se puede perder. Desde el primer frame se debe fijar el mensaje. Muchas veces la parte superior de la pagina esta presente unos segundos hasta que el usuario hace scroll o cambia de pagina. No pierdas esos segundos contado una historia.
Aqui tenemos un par de banners donde la animacion que conduce al mensaje es muy larga.
Estos dos banners de Marca (periodico deportivo espaol) fallan en casi todos los puntos que hemos visto hasta ahora. Son un loop inifinito, no fijan el mensaje, la duracion es exesiva, etc. 7. Procura que el mensaje no solo sea el logo. Todavia quedan algunos banners donde el frame (entiendase como fotograma) final es el logo de la compaia anunciante. Esto es un error. El frame final debe servir para ofrecer toda la informacion necesaria para trasmitir el mensaje. El incluir la url suele ser parte de este mensaje. El frame final puede ser imprimido, enviado por mail y debe seguir transmitiendo el mensaje con claridad. 8. El banner puede ser un soporte de modelo de negocio. Lo que falla ahora mismo es el formato. Banner que no son rectangulares y que no estan en la parte superior de la pagina. La busqueda de formatos y tecnicas que permitan crear una mejor impresion del mensaje en el usuario es un camino a explorar. Tambien hay que contar con la dimension que internet aade donde el mensaje se puede continuar hasta la compra directa del producto. En un estudio de webreference se vio como colocando el banner un tercio mas abajo de lo normal, el click through se incrementaba un 77%. Seguramente banners gigantes con flash tipo CNET sean un camino a seguir. Permiten explorar internamente el banner, ofrecen mas informacion y no hace falta abandonar
la pagina en la que estamos con lo que podemos seguir con nuestra tarea. Lo que tiene de bueno este banner es el concepto de "poner un trozo de mi web en la tuya". El banner ya no es un anuncio, si no que pasa a ser un trozo de mi web donde te puedes completar una accion sin abandonar el site en el que estas actualmente. Esto tiene mucho sentido si pensamos en la compra de productos. No hace falta abandonar el site en el que aparece el anuncio, puedo comprar el producto directamente sobre el anuncio. Enlaces relacionados:
Webreference. http://webreference.com/dev/banners/onethird.html. Resumen: Based on the above results, we conclude that the placement of the ad 1/3 down the screen, increased click-through 77% (for the Photodisc ad). The Webreference ad showed the same trend, but the result was not statistically significant. Useit. http://www.useit.com/alertbox/9709a.html. Resumen: "... only the top 0.01% of websites can generate sufficient revenues from advertising: in the larger picture, advertising is almost irrelevant for the success of the Web." Useit. http://www.useit.com/alertbox/9704b.html. Resumen: "... In fact, the model predicts that the largest website will run at a rate of about 200 billion pageviews per year by the end of the Year 2000... "
Para cultivar xito en Internet no basta con poseer un alto coeficiente intelectual y conocimientos tcnicos. Necesitamos un buen coeficiente emocional.
Para lograr el xito en Internet hoy da no basta con poseer un alto coeficiente intelectual (CI) y unos conocimientos tcnicos muy grandes. Los cambios del siglo veintiuno estn siendo testigos del predominio del coeficiente emocional (CE), un concepto nuevo que incluye el autoconocimiento y autodominio, el celo y la persistencia, la capacidad de motivarse uno mismo y de lograr resultados en conjunto con otros. Todava quedan algunas personas que desechan del todo la importancia de las emociones; las ven como un campo minado que se debe evitar a toda costa. En muchos casos son precisamente esas personas que, con su nfasis en los nmeros fros y el balance de utilidades, estn ms desconectados del motor del corazn que impulsa al capital humano y produce el trabajo creativo exponencial que se requiere para que una organizacin vaya a la cabeza en su campo en Internet. La Inteligencia emocional es una forma de interactuar con el mundo que tiene muy en cuenta los sentimientos, y engloba habilidades tales como el control de los impulsos, la autoconciencia, la motivacin, el entusiasmo, la perseverancia, la empata, la agilidad mental, etc. Ellas configuran rasgos de carcter como la autodisciplina, la compasin o el altruismo, que resultan indispensables para una buena y creativa adaptacin social. Por otra parte no hay que olvidar que el xito en Internet depende del ms fundamental de todos los principios comerciales: satisfacer al cliente/visitante. Para ello, teniendo en cuenta las claves que nos aporta el estudio de la Inteligencia Emocional, los aspectos que debemos tener en cuenta son los siguientes:
1. Confianza. Generar la sensacin de controlar y dominar el web site, la propia

evolucin y los contenidos aportados. La sensacin de que los servicios/productos tienen muchas posibilidades de xito y que usted cree en
2.
3.
4.
5.
6.
7.
ellos debe transmitirla a sus clientes, tanto desde la propia pgina web como en los mensajes de correo electrnico. Curiosidad. Tener en cuenta la sensacin de que el hecho de descubrir algo es positivo y placentero. Aporte algo nuevo o una nueva vision del algo ya existente o un modo de interactuar/probar el servicio que desea vender: habr despertado curiosidad. Intencionalidad. Mostrar un claro deseo y la capacidad de lograr algo y de actuar en consecuencia. Esta habilidad est ligada a la sensacin y a la capacidad de sentirse competente, de ser eficaz. Tenga claro cul es su objetivo, su intencin con el web y busque la manera de ser competente en su desarrollo. Autocontrol. La capacidad de modular y controlar los productos/servicios en una forma apropiada; la sensacin de control interno. Es usted quien controla la evolucin de sus servicios o depende de las fluctuaciones de variables externas?. Cuanto ms control tenga sobre sus productos/servicios ms fcil ser satisfacer al cliente. Relacin. La capacidad de relacionarse con los clientes, una capacidad que se basa en el hecho de comprenderles y de ser comprendido por ellos. Pngase en el papel del cliente y piense como l Qu pedira, qu necesitara?. Fomente una relacin lo ms personal posible (hay que hacer humano un medio que es totalmente annimo). Capacidad de comunicar. El deseo y la capacidad de intercambiar verbalmente o por escrito ideas, sentimientos y conceptos con los dems. Esta capacidad exige la confianza en los clientes y el placer de relacionarse con ellos. Hable, comunquese, no se esconda tras un perfil. Los dems le quieren oir y saber lo que piensa. Cooperacin. La capacidad de armonizar las propias necesidades con las de los clientes. Recuerde que usted buscar una ganancia (econmica) pero el cliente tambin persigue un beneficio. Y nunca olvidad el soporte y ayuda post-compra.
A nivel personal, todo administrador de un web site debe plantearse la urgencia en "alfabetizarse" emocionalmente. Algunas propuestas que pueden servirle de reflexin son: Autoconciencia emocional: El conocimiento de nuestros sentimientos y sus causas nos ayuda a mejorar modelos de conducta y relaciones. Automotivacin: No esperemos siempre estmulos externos. La capacidad de generarlos nos har ms independientes y capaces en situaciones adversas. Intuicin: Desarrollemos nuestra propia y natural capacidad para captar e interpretar las cosas. Confiemos ms en ella. Toma de decisiones personales: Nuestra opinin nos hace nicos. Atrevmonos a ser un poco ms nosotros mismos. Conciencia de uno mismo: Slo desde ella, podremos tomar autnticas decisiones y vivir de forma consciente y adulta. Capacidad de manejar el estrs: Fundamental en la vorgine de muchas vidas cotidianas. Empata: Captar la sintona con otras personas, aprender a ajustar el ritmo segn el interlocutor, adaptarse... ayudar en cualquier contexto de relaciones humanas.
Cmo saber si el dominio que deseamos es el ms adecuado.
Qu hace de un dominio un gran dominio? Cmos saber si el nombre de dominio que estoy pensando en comprar o registrar es realmente el adecuado para m? Muy fcil, slo hay que tener en cuenta estas siete reglas de oro. 1. Ponlo fcil. sta es la gran regla bsica en el mundo de los dominios en particular y en el del mrqueting y comunicacin en general. A ningn publicista se le olvida la conocida regla KISS (Keep it Simple Stupid) y desde luego nuestro nombre de dominio es la primera forma de publicitar nuestro negocio en la red. Hay que intentar que nuestro nombre de nuestro dominio le resulte fcil de recordar al usuario. El motivo es bien sencillo. Imaginmosnos que, navegando por la red, nos encontramos con dos pginas que nos encantan: eco.com y emeronion.com. Cul es ms probable que volvamos a visitar? 2. Lo breve... dos veces bueno. El dicho se cumple una vez ms en el mundo de los dominios. Cuantos menos caracteres tenga un nombre, mucho ms fcil de recordar y tambin ms cmodo y rpido de teclear. Desgraciadamente, estos dominios son ya muy escasos. El 100% de los dominios con tres caracteres o menos hace tiempo que est registrado. Comprarlos puede ser una solucin pero los dominios breves son, sin duda, los ms valisosos por lo escaso y, por tanto, los ms caros. 3. Dando sentido. Varios estudios han demostrado que las palabras con significado se recuerdan prcticamente un 80% ms que aquellas que no lo tienen. Buscar un nombre que realmente diga algo puede resultar complicado pero merece la pena. Es cierto que hay empresas como Yahoo que han conseguido grandes resultados con un nombre sin significado pero cunto dinero han tenido que invertir en publicidad? 4. Sin confusin. Uno de los problemas comunes con los que se encuentran las empresas de internet es el del trfico desviado desde su pgina a causa de un error de tecleo por parte del usuario. Los juegos de palabras ingeniosos pueden resultar muy divertidos y tiles para captar la atencin pero, en general, son poco efectivos en la red y mucho menos si utilizamos nmeros y guiones. El significado del dominio "love2u.com" puede ser muy sencillo de recordar pero el usuario se encontrar con la duda de si deba escribir "lovetoyou.com" o "loveto-u.com" o quin sabe cuntas combinaciones ms. 5. Somos .com? A la hora de escoger una extensin para nuestro dominio el dilema es el siguiente: qu dominio se adapta mejor a nuestro mercado? Est claro que el estndar de facto en la red es el .com. sta es sin duda la extensin ms codiciada. Pero, si no operamos a nivel internacional, tambin puede resultar una buena idea pensar en los dominios regionales de nuestro campo de actuacin: .es, com.ar, com.mx, etc... Otra alternativa son las extensiones .net y .org consolidadas desde hace tiempo aunque con bastante menos tirada que la .com. Si decidimos tener algo de paciencia, tambin podemos apostar por los .info o .biz que, aunque todava tienen poca implantacin, prometen ser importantes en un futuro. 6. Qu dice de lo que hacemos? Ajustar el nombre de nuestro dominio a nuestra actividad es muy conveniente para conseguir que el usuario nos asocie con un determinado producto o servicio, y de ese modo, se pueda acordar de nosotros cada vez que lo necesite. Calor.com quiz es un gran nombre de dominio pero, si el negocio
para el que que lo utilizamos es una tienda de zapatos on-line, probablemente no nos va a resultar de mucha utilidad. 7. Sin malas lecturas. El ltimo aspecto a tener en cuenta a la hora de elegir un dominio son las connotaciones asociadas al nombre que elijamos. Es importante asegurarse de que nuestro dominio no tiene connotaciones negativas que puedan quedar asociadas a nuestros productos. Y si operamos en un entorno internacional tenemos que asegurarnos de que esto no sucede con nuestra lengua ni tampoco con el resto que podamos considerar importantes para nuestro negocio. Desde luego, "estohuele.com" no sera precisamente la eleccin ms adecuada para nuestra tienda de perfumes. El ttulo de la pgina es la principal clave para que los buscadores indexen tu web en los primeros puestos. Explicamos los errores ms tpicos a la hora de darle ttulo a una pgina.
Casi todos los buscadores consideran la "MetaTag Title" como la ms importante del cdigo HTML de una pgina web. La MetaTag Title es adems la primera informacin que aparece cuando se realiza una bsqueda en la mayora de los grandes buscadores, hacindola mucho ms relevante, ya que es la primera informacin que el Internauta ve acerca de nuestra pgina web y decidir hacer click o no dependiendo de su contenido. Hay muchas pginas web que utilizan fabulosos ttulos para crear una gran campaa de marketing en los buscadores y recibir trfico completamente gratuito, pero tambin hay pginas web que ni siquiera tienen un ttulo y se muestran como "Untitle". Quin va a hacer click en un documento donde la informacin que aparece es simplemente "Untitle"? Que no debes hacer al redactar un ttulo 1- Nunca utilices una lista de palabras claves separadas por comas. Es dficil de leer y no es profesional. Debes de redactar una frase lgica utilizando siempre las palabras clave. 2- No utilices palabras complicadas y difciles, a no ser que tu pgina web sea de un tema muy especfico y busques trfico selecto. 3- No repitas en exceso tus palabras clave, una vez es suficiente. 4- No utilices siempre maysculas en el ttulo, es difcil de leer. Utiliza las maysculas slo cuando correspondan. 5- Dedica tiempo a redactar un ttulo que sea efectivo, exactamente igual a cualquier campaa de publicidad. 6- Redacta un ttulo corto y fcil de leer. El ttulo es como un anuncio de tu pgina web. 7- No olvides incluir el ttulo en TODAS tus pginas interiores y si son ttulos diferentes mucho mejor. La "MetaTag Title" debe ser siempre la primera del cdigo HTML.
8- No utilices nicamente el nombre de tu empresa en el ttulo. Si quieres incluir el nombre de tu empresa debe de ir siempre acompaada de tus palabras clave ms importantes. 9- No utilices caracteres como !!!! o AAA para aparecer el primero de la lista en orden alfabtico. Este recurso ha sido altamante utilizado y puedes ser penalizado por el buscador. 10- Por ltimo no cometas faltas de ortografa ni palabras mal escritas que den aspecto poco profesional a tu pgina web. Dedica tiempo a redactar el ttulo de tu pgina web. Nos adentramos en el mundo de los sistemas multiregistro en buscadores y nos cuestionamos su eficacia. Finalmente, ofrecemos consejos para asegurarnos que el registro se hace correctamente.
Un sistema multiregistro es un programa o aplicacin web con el que podemos registrar una web en muchos buscadores introduciendo una sola vez los datos de la pgina, en lugar de ir buscador a buscador introduciendo los mismos datos para realizar todos los registros. El registro en buscadores es una tarea muy importante si se quiere hacer una buena promocin de la pgina, puesto que no es lo mismo aparecer, entre los resultados de la bsqueda, en un puesto que 100 posiciones ms abajo. Por esta razn, deberamos ser muy concienzudos en el registro, eligiendo las palabras clave y la categora del posible directorio donde incluir nuestro sitio, por lo menos en los buscadores ms importantes, como Yahoo. Sin embargo, existen cientos de buscadores donde querremos figurar, aunque puede que nos importe un poco menos la colocacin entre los resultados... y puede que haya cientos o miles de buscadores donde querremos figurar... As pues, el dilema estara entre: Registrar tu pgina a mano, asegurndote de la calidad del registro, pero utilizando mucho tiempo. Registrar tu pgina en poco tiempo, pero con una calidad menor en el registro y la colocacin de la pgina en el directorio del buscador.
La recomendacin sera hacer a mano los registros ms importantes y tener una herramienta para realizar un registro masivo de la pgina web. Elegimos los directorios donde registrarnos a mano -de 10 a 20 buscadores- y ponemos en marcha un multiregistro para los cientos o miles que faltan. El hecho de que en muchos buscadores haya que introducir la pgina en una categora y que estas categoras varen mucho de un buscador a otro es otra de las razones por las que un multiregistro automtico puede resultar problemtico. Como podis imaginar, a los buscadores les llegan cientos de pginas cada da y si ven algunas que llegan automatizadas, donde la pgina no haya sido bien encajada entre las categoras, pueden desestimarla, dejando de lado su registro. Teniendo en cuenta que los
sistemas multiregistro no pueden mantener al da todas las categoras de todos los buscadores, la idea de registrar la pgina manualmente, por lo menos en los buscadores ms importantes, parece todava ms razonable. Tipos de multiregistro y su eficacia Interfaz web Tenemos un directorio donde podemos encontrar varias de estas herramientas gratuitas. Son pginas web donde el creador se ha preocupado por reunir una buena cantidad de buscadores y automatizar su registro. Por supuesto, este tipo de servicio no ofrece ninguna garanta en lo que respecta su eficacia y, para proyectos comerciales, aconsejamos el uso de herramientas profesionales de pago. Programas windows Tambin existen varios programas que se pueden comprar para realizar un registro mltiple en buscadores. La ventaja de estos programas con respecto a las versiones online con interfaz web, consiste en que detrs de los programas comerciales se encuentra una empresa que se lucra de vender su producto. Por esta razn, la empresa se preocupa mucho de mantener actualizada la base de datos de buscadores, de modo que las herramientas tengan la mayor efectividad posible. Existen varias opciones de programas de este estilo, como Active WebTraffic, EspAadir o SubmitWolf. Si bien nosotros os podemos recomendar Active WebTraffic, ya que es el que utilizamos para realizar nuestros registros masivos. Respecto al envo de altas a directorios donde el rbol de categoras es muy amplio, donde un envio automtico resulta ineficaz, como es el caso de Yahoo, Open Directory o Terra directorio, es recomendable darse de alta manualmente para elegir la categora ms adecuada al contenido de nuestra web. Por eso en la ltima versin del programa Active WebTraffic se ha includo la opcin de "Buscadores manuales", que facilita la inclusin manual es estos directorios donde el registro manual es importante.
Nota: para que el registro de la pgina sea correcto no slo es necesario elegir la categora adecuada, tambin habr que seguir las normas del directorio para asegurarnos que el alta ser aceptada por el editor que revise nuestra solicitud de alta. En el caso de Yahoo estas normas son muy extrictas y el alta manual tiene que ser perfecta para que la pgina sea includa. Al utilizar un software de multiregistro tambin es necesario rellenar todos los campos correctamente siguiendo los consejos que, en el caso de Active WebTraffic, se envan al propietario del software para que el alta sea eficaz. Nunca se debe utilizar el software indiscriminadamente ya que lo nico que se consigue es que nuestra web sea penalizada y no aceptada por el buscador. Como regla general una pgina al da por dominio es suficiente, hay que ser conservador. Si se ha introducido toda la informacin correctamente y se utiliza el software con prudencia, la pgina web ser aceptada, exactamente igual a si se hubiera hecho un alta manual.
Esquema general del registro y posicionamiento en los buscadores, la tarea ms importante para promocionar bien una pgina.
Todas las empresas con cierta entidad, hoy en da disponen de un sitio web, pero muchas de ellas se plantean si esta presencia en la Red ha sido una inversin o un mero gasto de representacin.
Para que nuestra presencia en Internet sea rentable es necesaria la promocin de nuestro sitio, y una de las herramientas ms rentables para dar a conocer nuestro site y generar visitas son los buscadores. Aparecer en los principales buscadores internacionales, nacionales y en los especficos de nuestro sector es principal, pero no lo es menos aparecer en un lugar destacado segn ciertas palabras clave que definan nuestro negocio en la mente de nuestras audiencias. Puesto la mayora de los internautas se conforman con los primeros resultados proporcionados por su buscador favorito. Y para aparecer en un lugar destacado en estas tiles herramientas de bsqueda debemos conocer su funcionamiento interno. Los buscadores se dividen en dos grandes grupos: los ndices y los motores de bsqueda.
Referencia: en nuestro manual de promocin de pginas web podemos encotrar gran parte de la informacin de este artculo, relatada con mayor detalle y ms calmadamente. Tambin tenemos un manual de Posicionamiento en buscadores, que tiene temas ms especficos sobre mejorar la posicin en buscadores.
Los ndices dividen la informacin en un rbol temtico de categoras y subcategoras. Aqu el ejemplo paradigmtico sera Yahoo!, que nos presenta una serie de grandes categoras temticas entre las que encontramos la subcategora "Economa y Negocios", dentro de ella "Empresas", y esta a su vez contiene entre otras "productos y servicios para empresas" y as sucesivamente hasta ir acotando la amplitud de la categora de sitios web, ya que no se nos permitir proponer la inclusin de nuestro sitio web en una categora demasiado amplia. En los ndices lo esencial es encontrar la rama ideal de este rbol temtico en la cual ubicar nuestro sitio web, y digo nuestro sitio, puesto que en los ndices slo es posible incluir una pgina (normalmente la principal) a su directorio, aunque a menudo es posible incluirlo en dos o tres categoras. Para encontrar esta categora ideal en la cual debera estar nuestro web, la estrategia a seguir es puramente marketiniana; ponerse en la piel de nuestro pblico y pensar en qu categora nos buscar. Para ello, podemos ayudarnos de un estudio de mercado, y como no, del sentido comn y de la observacin de en qu categora se encuentran ubicados nuestros principales competidores. Pero cuidado, quiz ellos no lo hayan echo tan bien y no se encuentren en la categora ideal. Lgicamente dependiendo de la amplitud de nuestros productos o servicios, ser ms obvio o ms difcil hallar esta categora ideal. No obstante tras nuestra peticin de alta existe un proceso de revisin humano e incluso podemos proponer una nueva categora si no nos encontramos debidamente definidos por ninguna de las existentes. Y sobre este proceso de revisin humana es sobre el que quiero hablar a continuacin, puesto que es este el segundo factor que ms diferencia a los ndices de Internet de los motores de bsqueda. Cuando proponemos el alta de nuestro sitio en el ndice de turno, se nos pide toda una serie de datos, como: Ttulo de la pgina, URL, Definicin, Ubicacin geogrfica, persona de contacto y correo electrnico... Y finalmente nuestro site es revisado por un surfer (un especialista en catalogar recursos) del ndice que considera si nuestro site cumple con los estndares de calidad requeridos y si est bien clasificado en la categora elegida por nosotros. Vemos que esto es lo nico que conoce el ndice de nuestro sitio web; los datos
suministrados en el formulario de peticin de alta en el buscador. Por lo que debemos ser extremadamente cuidadosos en la definicin que enviamos de nuestro site. El caso de los motores de bsqueda es bien distinto. Podemos tomar como ejemplo a Google, y veremos que la nica informacin que proporcionamos a un motor es la direccin URL (por ejemplo: www.miempresa.com) y quiz una direccin de correo electrnico. El resto del proceso se realiza de forma automtica, ya que nuestra peticin de alta en el buscador entrar en la cola de trabajo de un programa de software llamado spider (araa) que visitar la pgina que hemos dado de alta y a partir de ella todas las que se encuentren enlazadas y as sucesivamente. Simultneamente nuestras pginas sern indexadas utilizando complejos algoritmos, para ser devueltas como resultado cuando un internauta utilizando el buscador, introduzca un trmino que se encuentre en alguna de ellas y haga una peticin de extraccin de informacin de su ingente base de datos. Vemos de esta forma que nuestro web puede aparecer en algn motor de bsqueda por la simple razn de que otra pgina de un tercero que est incluida en el buscador enlaza a ella en Internet. As, en los motores de bsqueda, para obtener una notable posicin, lo esencial es el cdigo de nuestras pginas, algo que era verdaderamente indiferente en el caso de los ndices. Tericamente con slo dar de alta nuestra pgina principal el buscador indexar todas las pginas que cuelgan de ella, pero habitualmente nos encontraremos con problemas derivados de la ventaja que se concede a las altas de pago frente a las gratuitas; el primero es el tiempo a esperar para que nuestro sitio sea introducido en la base de datos del motor de bsqueda, que puede variar entre varias semanas a varios meses segn el motor en cuestin. E incluso a menudo, tras este dilatado periodo de tiempo, no seremos indexados en sus bases de datos. Y esto, en los motores que an admiten el alta gratuita. Como recomendacin, si nuestro tiempo y energas son limitadas deberemos optar por el alta de pago en algunos buscadores. Si conocemos las interacciones entre los distintos buscadores de Internet, descubriremos que la inclusin en alguno de ellos puede suponer la sucesiva inclusin en otros que a menudo son ms "duros" con las admisiones. Una vez que conseguimos que nuestro web aparezca en los buscadores, nuestro trabajo no habr hecho ms que empezar, ya que lo realmente valioso es aparecer en los primeros lugares por aquellas palabras clave que nuestros pblicos utilizan para buscar nuestra categora de productos, y esta s que es una verdadera guerra, puesto que en esa lucha estamos frente a nuestros principales competidores, que tambin batallarn por mejorar la posicin de sus pginas frente a las nuestras y las de otros competidores. Desde luego, que la complejidad depender de la popularidad de las palabras clave por las que queramos aparecer de forma destacada en el buscador. Realmente cada buscador valora de distinta forma el cdigo de nuestras pginas para ubicarla en una u otra posicin de su ranking, as por ejemplo Google valora especialmente cuantas y que tipo de pginas apuntan hacia las nuestras, aplicando una lgica bastante humana, segn la cual si muchos y especialmente importantes hablan de uno, es que uno es importante. Otros motores como AltaVista valoran los Meta Tags (unas lneas de cdigo que informan al motor acerca del contenido de nuestras pginas), etc.
En general, los buscadores se fijan en la frecuencia o densidad y ubicacin con la que aparecen ciertos trminos en nuestras pginas, para ubicarlas en un lugar superior de sus resultados frente a otras pginas, en las cuales la frecuencia y ubicacin de este trmino que el navegante ha introducido en la caja de bsqueda del motor aparece. As, una palabra que est presente en nuestra misma direccin de Internet (www.palabra.com) indica un elevado nivel de coincidencia si es el trmino buscado por el internauta. Despus es especialmente valorada esta palabra, en el ttulo del documento, en el primer prrafo ms que en el segundo... Si est en mayscula es ms valorado, al igual que si est en negrita... Si aparece dos veces en una frase ms que si aparece una, etc. A estas alturas, seguro que a ms de un lector se le ha pasado por la cabeza, la idea de llenar de trminos clave la pgina para que aparezca en las primeras posiciones del buscador, pero lamentablemente esto ya esta contemplado por estas herramientas que si encuentran demasiadas palabras repetidas o un texto de tamao muy pequeo o con el mismo color que el fondo, etc, penalizarn nuestras pginas o incluso las eliminarn de la base de datos por tratarse de tcnicas de spam (tcnicas de promocin ilcitas) Explicamos las razones por las que pginas con frames se promocionan peor que las que no los tienen y damos consejos para mejorar el registro en buscadores de pginas con frames.
Conseguir que una web se encuentre entre los primeros puestos de los buscadores no es una tarea fcil y, si la web ha sido creada por medio de frames, puede complicarse todava un poco ms. En este pequeo artculo vamos a dar algunas razones para justificar la afirmacin anterior, junto con consejos que pueden ayudarnos a conseguir mejores posiciones en las webs con frames.
Referencia: Tratamos los temas de promocin de webs y de frames (tambin llamados marcos) en general en los manuales de promocin y HTML de DesarrolloWeb.com. Manual de promocin Captulos de frames del manual de HTML
La dificultad de promocionar una web con frames se basa en dos puntos, aunque probablemente otras personas encuentren otras ventajas e inconvenientes que no sealemos aqu: La pgina principal del frame no tiene texto y tan solo etiquetas <frameset> y <frame>, as pues, los motores de bsqueda como Google, no pueden extraer palabras clave o una descripcin de nuestra pgina. Las pginas hechas con frames estn compuestas de varias pginas distintas y, segn nuestra interpretacin, si el texto estuviera en un mismo archivo HTML, contendra ms palabras de donde el motor pueda extraer una buena informacin de la pgina. En este punto tambin cabe destacar que la navegabilidad del sitio decrece si no se accede a la web entrando por la declaracin de frames y slo se visualiza un archivo HTML que debera mostrarse dentro de un frame, ya que ese archivo seguramente contenga
menos enlaces y referencias a otras partes del web. Esto motiva que la impresin de un visitante por la pgina pueda ser peor que si accede visualizando los marcos completos. Consejos para mejorar la promocin con frames 1.- Titular correctamente la declaracin de frames Hay muchos desarrolladores que titulan el archivo HTML con la declaracin de frames de forma poco descriptiva o incluso con palabras como "frames", "index.html" o "marcos". Esto es un error muy grave porque todas las pginas de nuestro sitio heredan el ttulo de los frames y no deseamos que nuestra web o la del cliente se llame "marcos", sino algo descritivo como "Almacn de materiales de construccin Hermanos Gutierrez". 2.- Colocar las etiquetas META en la declaracin de frames Ya que no se pueden extraer palabras clave o descripciones de una declaracin de frames porque no tiene texto, es aconsejable que las introduzcamos dentro de las etiquetas META en la cabecera de la pgina. 3.- Cuidar el texto de la etiqueta <NOFRAMES> Algunos motores de bsqueda extraen el texto para palabras clave o descripcin de la pgina de lo que el desarrollador haya colocado entre <noframes> y </noframes>, as que no coloques nicamente algo como "Esta pgina utiliza frames pero su navegador no los admite". Mejor coloca una pgina de inicio completa, con texto, etiquetas <b>, <h1> o imgenes, o lo que desees para que la portada quede bien para ese tipo de exploradores y se puedan extraer palabras clave y descripciones adecuadas. 4.- Las pginas interiores tambin importan Los motores de bsqueda tambin pueden indexar las pginas interiores de los sitios con frames, tratndolas como pginas independientes a pesar que el desarrollador las hayas concebido con marcos. Muchas veces estas pginas son muy adecuadas para obtener una excelente posicin en buscadores, ya que contienen texto sobre el tema de la pgina sin informacin superflua alrededor. As que cuida mucho el modo de realizacin de estas pginas colocando ttulos correctos, etiquetas META, un buen conjunto de palabras clave repetidas entre el texto de la pgina, etc. 5.- Aadir navegabilidad y datos de contacto en las pginas interiores Dado que las pginas incluidas dentro de los frames tambin sern un punto de entrada habitual en la web, aade siempre enlaces para poder volver a la portada, otros contenidos del sitio y a la declaracin de frames en si para que el visitante pueda ver la web con todos sus elementos. Tambin es importante colocar informacin sobre el cliente o la nuestra propia para que se puedan poner en contacto con nosotros y el visitante pueda conocer el propietario de la informacin a la que est accediendo. Adems, en la direccin o datos de la empresa o particular, en muchos de los casos, tenemos palabras clave que pueden ser muy interesantes, como nuestra localidad o actividades. 8.- Registra tambin las pginas interiores que te interese promocionar Algunos buscadores recorren la estructura de tu web entera indexando las distintas pginas. Otros buscadores, generalmente los directorios, ni siquiera tienen esas funcionalidades, pero para los dos casos es interesante registrar las pginas interiores para asegurarnos de que figuren tambin. Este consejo puede servir para todo tipo de webs, pero en el caso de los frames puedes construirte diversas entradas repitiendo la
declaracin de frames en diversos archivos que muestren en el cuerpo de la pgina una informacin distinta. 7.- Crea un "tunel de entrada" Para que tu pgina principal no sea una declaracin de frames, poco promocionable, puedes crear una portada para la pgina en un archivo HTML normal, con texto, imgenes y dems elementos donde introduzcas el contenido de la web, cuidando especialmente en colocar las palabras clave y descripciones que desees conseguir. Esta pgina podra contener el enlace a la declaracin de frames, o enlaces en el caso de que tengamos varias declaraciones. Puede haber otros consejos para promocionar pginas con frames, de hecho, en general todos los consejos para promocionar webs en pginas sin marcos pueden ayudar a una pgina que s los tiene. Esperamos que estas notas sirvan a la correcta realizacin de las pginas con frames desde el punto de vista de su promocin en buscadores. Si alguien le interesa aadir algo puede hacerlo comentando el artculo con un enlace de en la parte de abajo. Comenzando en la promocin de sitios web.
Ms del 90% de las visitas de una pgina Web provienen de los motores de bsqueda. De aquella cifra, Google es responsable del 80% del trfico, mientras que el resto es repartido entre Yahoo, MSN, Altavista, y el resto de los buscadores. Por lo tanto aparecer en las primeras posiciones para determinadas palabras o frases es, sin lugar a dudas, una beneficiosa fuente para promover servicios, productos, o simplemente difundir informacin. Muchas empresas, pequeas, medianas, y grandes, estn llevando a cabo optimizaciones con el fin de aumentar las ventas invirtiendo una cantidad de dinero que rpidamente es recuperada, y es que el cibernauta que viene desde un buscador est visitando un sitio que responde a sus necesidades. Para conocer a fondo la importancia de esta herramienta de marketing conversamos con Bruce Clay y Phil Craven, ambos especialistas reconocidos internacionalmente por sus trabajos de optimizacin. Con cada uno hablamos acerca de sus comienzos, lo beneficioso que resulta aparecer listado en los primeros lugares de una bsqueda, las tcticas y los errores ms comunes, y al mismo tiempo discutimos sobre la tica de las estrategias empleadas hoy en da para alcanzar las posiciones ms altas. Antes de proseguir vamos a definir la palabra SEO, que veremos citada permanentemente en el informe. La misma hace referencia a Search Engine Optimization, lo que traducido a nuestro idioma significa optimizacin para los motores de bsqueda. Por lo tanto se llama SEO a la persona a cargo del posicionamiento de un sitio web en los buscadores. Pues la primera pregunta que le hicimos a cada uno de los expertos tena que ver con sus comienzos, cmo aprendieron lo que saben, y cules son los objetivos de sus sitios webs. Phil Craven nos contaba "comenc a aprender sobre la optimizacin para los motores de bsqueda hace aproximadamente 7 aos atrs, cuando envi mi primer sitio Web a Altavista. Durante el proceso de registro encontr una publicidad de WebPosition Gold, as que descargu la versin de prueba. El programa me ense que los rankings podan ser manipulados si se lo haca apropiadamente. En aquellos das, Altavista indexaba las nuevas pginas de 2 a 4 horas, y pronto
comprob que no apareca posicionado en ningn lado para ciertos trminos de bsqueda. Entonces utilic WebPosition Gold para ayudarme a crear unas pocas pginas para esas palabras, y pocas horas despus, tena el ranking #1 para todas ellas. As es como empec en la optimizacin para los motores de bsqueda. Desde entonces se ha convertido en un negocio de tiempo completo y estoy recibiendo ms consultas de clientes potenciales de las que en realidad puedo manejar. Tengo una actitud sobre SEO en la que muchas personas no se interesan. Mi actitud es hacer lo que sea necesario para lograr top rankings. Prefiero hacerlo de maneras en que los motores de bsqueda estn contentos, pero si lo hago as y ellos an no me dan las mejores posiciones, entonces estoy perfectamente tranquilo hacindolo de maneras en que los buscadores no estn de acuerdo. Lo veo como un negocio, y la forma de como lo ven las cosas los motores no me concierna. Mi sitio Web, WebWorkshop, comenz algunos aos ms tarde explicando todo acerca del PageRank. Desde entonces ha crecido lentamente, pero ahora provee informacin de optimizacin tanto para profesionales SEO como principiantes. Hay mucha informacin SEO mala en la Web, siempre colocada por gente que no conoce nada mejor, por lo que yo trato de brindar informacin ms realista". Bruce Clay, por otro lado responda, "en 1995 estaba buscando otra oportunidad diferente - algo "donde este la accin" -, e Internet cubri mis objetivos. Definitivamente iba a crecer, tena el potencial para ser un gran ecualizador, que permitiera a los pequeos competir con las corporaciones ms grandes. Fue como la "fiebre del oro". Claro que las nicas personas que hicieron dinero realmente en aquellos das fueron los que les vendan provisiones a los mineros. Y es por eso que eleg ese camino, proveer los servicios que necesitan aquellos que quieren reivindicar las riquezas de Internet. Decid que era un nicho tcnico razonable que podra ser divertido y desafiante, y que tendra suficientes aptitudes de marketing para ser un mercado competitivo. SEO es el ltimo juego de mesa, salvo el tablero, ste es muy grande y constantemente cambiante toboganes y escaleras vienen a la mente, pero es ms grande, con millones de jugadores. Realmente no haba entrenadores al principio. Haban sido creados muy pocos sitios web, pero eran irregulares, y la informacin en ellos era sospechosa. El mejor sitio web era SearchEngineWatch, y con eso y con todo el tiempo de investigacin fui a trabajar, aprendiendo en el laboratorio como trabajan los motores de bsqueda. En realidad decid que mi sitio ayude a educar en vez de vender, y estoy muy complacido con esta estrategia. No haba visto nunca HTML, y realmente no tena ningn conocimiento (como cualquier otra persona), pero corra con ventaja era uno de los pioneros. Tena un ttulo en ciencia de la matemtica y de la computacin y un MBA (Master of Business Administration), estuve a cargo de cuatro compaas anteriormente, y tena tiempo y ambicin". Realmente es interesante como iniciaron sus carreras Phil Craven y Bruce Clay en este campo, y efectivamente no hay otra fuente de informacin para convertirse en SEO que la propia Internet. Ser un SEO requiere paciencia y mucha pasin por el tema, debido a que es un aprendizaje constante. Errores y tcticas cometidas por optimizadores de motores de bsqueda en la promocin
Cules son los errores ms comunes que pueden verse en la web? Se lo preguntamos a Bruce Clay, quien nos deca, "Creo que la mayora de los SEOs subestiman las habilidades tcnicas necesarias para ser un veloz seguidor de los motores de bsqueda. SEO es una habilidad avanzada de la web, y realmente hay que trabajar en ello, no tenerlo como un hobby. Muy pocos SEOs han escrito herramientas para el mercado. Estoy seguro de que una gran mayora no ha implementado, la lgica en los motores de bsqueda por s solos. Muy pocos han desarrollado las habilidades para dar cursos de entrenamiento sobre la materia. Y un nmero muy reducido ha presentado en adelanto temas en conferencias en los ltimos cinco aos. Gran parte de mi competencia est haciendo ciruga cerebral con un martillo. Simplemente no estn equipados para realizar proyectos largos y severos. Entonces realizan los proyectos y utilizan proyectos que son sospechosos porque esa es la nica manera que saben para tener xito, aunque sea momentneo. Ser jugador de este juego requiere una importante inversin". Phil Craven comenta, en respuesta a la misma pregunta, "El error ms comn es creer que el contenido es rey para los buscadores. En los orgenes, el contenido de una pgina Web era lo nico que los motores de bsqueda observaban cuando producan los rankings, y era fcil mejorar las posiciones, simplemente optimizando el contenido. Pero luego la popularidad de enlaces surgi y cambi todo. La pginas ya no necesitaban un contenido optimizado, sino que tambin requeran tener links desde otras pginas. El sistema ms conocido de "link popularity" (popularidad de enlaces) es el PageRank de Google, que no slo cuenta los enlaces que apuntan a una pgina, sino tambin la importancia de cada uno. Ese es el error ms comn, pero me preguntaste sobre el error ms grande. Creo que sera estar pagando por "contenido SEO" para promocionar un sitio web en los motores de bsqueda. Otro de los grandes errores que comete la gente que es nueva en esto, es darle mucha importancia al PageRank. PageRank importa, pero no es el factor ms importante en los rankings de Google". Iniciarse en un terreno desconocido como lo es el posicionamiento en los motores de bsqueda, no es para nada fcil. Decidimos entonces pedir algunos consejos. Phil Craven nos recomendaba, "el mejor consejo que le puedo dar a cualquiera que quiera optimizar su propio sitio es que lea la mayor cantidad posible en los foros relacionados al SEO. Hay uno en mi sitio. Y no hay que tener miedo de realizar preguntas bsicas. Todos tuvieron que comenzar, y todos los das hay alguien que esta empezando. Existen un montn de artculos bsicos de SEO por todos lados (tambin hay uno de esos en mi sitio). Una perspectiva general para una campaa de optimizacin para un motor de bsqueda tiene como primera pauta encontrar un nmero de trminos de bsqueda que sean adecuados para el sitio. En reas ms competitivas, es mejor comenzar con trminos de bsqueda que no sean tan competitivos, ya que ser ms fcil obtener rankings altos. El WordTracker es una buena herramienta para encontrarlos, que muchos SEOs utilizan. Luego deben aplicarse las tcnicas bsicas de SEO a las pginas del sitio, y obtener la mayor cantidad posible de conexiones de otros sitios, asegurndose que los textos contengan el objetivo de los trminos de bsqueda". Bruce Clay nos aconsejaba, "aprender. Gastar dinero y tiempo, y todo lo que se pueda para comprender lo que se est haciendo y estar seguro de tener el tiempo necesario
para mantenerse actualizado sobre lo que ocurre con los motores de bsqueda. Tengo un nmero considerable de empleados, y es por eso que puedo dedicar tiempo a la anticipacin de los motores de bsqueda, mientras algunos de los nuevos en la industria estn muy ocupados trabajando para ver que es lo que est pasando a su alrededor. Sugiero fuertemente que tengan un asistente o personal para ayudar en tareas ms productivas y que ellos se mantengan actualizados con los cambios en la industria. Son ticas las estrategias que los optimizadores emplean con los clientes?.
Cules son las estrategias que usan con sus clientes? y cunto debemos esperar para ver el resultado del trabajo? Bruce Clay nos explicaba, "varios clientes (cerca de por semana) completan un cuestionario en nuestro sitio. Estamos de acuerdo con el 2 por ciento de ellos. La mayora tiene sitios con imperfecciones y necesitan un nuevo diseo para tener la esperanza de un ranking alto en los motores de bsqueda. Algunos estn llenos de spam. Y otros no tienen contenido. Nosotros desarrollamos una revisin total durante el proceso de presupuesto y slo aceptamos clientes que quieran realizar cambios apropiados para obtener rankings. El objetivo inicial es la competencia del sitio. Una vez que hemos analizado los planes de los sitios de la competencia, entendido el enfoque de las palabras claves, y aprendido de sus estrategias de conexin, nosotros planeamos nuevamente tu sitio para atacar a la competencia con sus mismas palabras. Tambin enfatizamos las palabras claves proporcionadas por el cliente para alcanzar altas posiciones. Como resultado, la segunda rea de concentracin deber ser obtener la mayor cantidad de links de los mejores sitios apropiados para su tema como sea posible. Algunos de estos importantes motores de bsqueda permiten que la "reputacin" mejore los rankings. La reputacin es determinada contando el nmero de sitios que conectan al tuyo, entonces la mayor cantidad de links de otros sitios a tu sitio, mejora tu ranking".
Phil Craven nos contaba, "si el sitio web del cliente ya ha sido indexado por los motores, entonces significar que sus pginas sern indexadas frecuentemente, y los cambios en las pginas se reflejarn en los resultados rpidamente. Pero un sitio nuevo toma de 2 a 3 meses, y a veces ms, antes de que sus paginas sean indexadas
y clasificadas en donde pertenecen. La optimizacin de los motores de bsqueda puede ser un proceso muy largo, y es necesaria mucha paciencia. He dicho anteriormente que estoy muy contento haciendo lo que se debe para obtener los rankings requeridos, pero prefiero hacerlo dentro de las pautas de los motores si es posible. Mi primerA tarea es realizar la optimizacin bsica en el contenido del sitio para los trminos de bsqueda deseados, que a veces implican alterar la estructura de los links dentro del sitio y cambiar alguno de los textos de enlaces. Si la optimizacin no ha sido exitosa para algunos trminos de bsqueda, y no hay nada ms que pueda hacer dentro de las pautas, comienzo con a emplear tcnicas que estn fuera de las reglas, pero slo con el consentimiento del cliente". Como podrn observar las posiciones de Bruce Clay y Phil Craven son opuestas en relacin a lo que consideran tico en este sector. Bruce defiende las normas aprobadas por los motores de bsqueda, mientras que Phil nos ha dicho en varias oportunidades que no tiene problemas en utilizar mecanismos que manipulan drsticamente a los buscadores. Sin embargo, como nos cuenta en la entrevista, s considera no tico el hecho de posicionar una pgina para una palabra que nada tiene que ver con su contenido. Por ltimos les pedimos sus opiniones y preferencias en relacin al futuro de la pelea Spammers Vs motores de bsqueda, ya que es justamente esta la razn por la cual los buscadores se ven obligados a mejorar constantemente. Para Bruce Clay la lucha, "nunca terminar siempre y cuando hayan huecos en los mecanismos de deteccin de los motores de bsqueda y los rankings equivalgan a dinero. Dudo de que alguna vez haya una legislacin, tiene que haber una pena impuesta por los motores de bsqueda, y los spammers de los motores de bsqueda nunca creern que esa pena sea lo suficientemente severa como para privarlos de nuevas invenciones. Creo que el SEO tico excluye el spam". Phil Craven nos contaba que "preferira que los motores se quedaran como estn para que podamos llevar nuestras pginas al mximo utilizando, si es necesario, las tcnicas de spam :). La bsqueda se dirigir a maneras menos precisas de produccin de resultados relevantes. Google ya ha tenido que ir a una de ellas con Florida. En estos momentos es fcil obtener rankings mximos en Google. Existen varios sistemas e ideas que estn tratando de entender de qu se trata una pgina, y entender la consulta que una persona escribe en el casillero de bsqueda, en vez de slo unir palabras. CIRCA es uno de ellos y es de Google. Cuando un sistema como este ingrese, manipulando los resultados por medio de cualquier mtodo (spam y sin spam) ser mucho ms difcil. Creo que la actualizacin de Florida de Google hizo sonar una alarma para la optimizacin de "todos" los motores de bsqueda y no solamente por el spam". Porqu el DMOZ, el Open Directory, es uno de los sitios ms importantes donde tu web debe estar registrada.
Los directorios de webs son sitios donde se encuentran registradas un montn de webs y clasificadas por categoras en una jerarqua, de lo ms general a lo ms especfico. En contraposicin con los buscadores, que indexan todo tipo de webs por medio de
robots que recorren la telaraa mundial de enlace en enlace, los directorios son administrados por personas y no indexan las pginas automticamente, sino que se hace con mucho control. En la prctica, los directorios de webs han desaparecido casi por completo. Esto es debido a que hay tantas pginas en la web y se renuevan tanto, que mantenerlas clasificadas es casi imposible. Requiere un equipo humano muy grande, que resulta muy difcil de rentabilizar como proyecto empresarial. Por esa razn muchos portales que tenan su directorio de webs, han ido transformndolo en un motor de bsqueda como Google. El directorio que trata este artculo dmoz, con URL http://dmoz.org/, tambin tiene como nombre Open Directory Proyect, porque es un directorio abierto: lo mantienen voluntarios, encargados de secciones o categoras y se puede utilizar libremente en otras pginas web. Al ser un directorio mantenido por voluntarios, es un proyecto viable y que perdura cuando otros han fracasado. Adems, la poltica de permitir utilizarlo en otras pginas hace que su valor sea todava mayor y ms estratgico por lo que a promocin de webs respecta. Digo estratgico, por el hecho que dmoz se utiliza en otros sitios web y portales importantes como directorio. Es decir, hay grande portales que disponen de un directorio, pero realmente este no es suyo, sino que es una rplica del Open Directory. As, si conseguimos que nos pongan un enlace en dmoz, en realidad estamos consiguiendo que ese enlace aparezca en un montn de sitios importantes. Si conseguimos varios enlaces, pues mucho mejor, pues estos se multiplicarn por el nmero de sitios que utilizan dmoz. Para registrar una pgina en dmoz Hay unas normas muy estrictas que hay que cumplir a la hora de enviar una pgina web, lo que resulta muy importante para que sea fcilmente mantenible por los administradores del directorio. Es importante que estas normas se respeten mucho, pues de lo contrario no aceptarn nuestra pgina. Entre las normas estn no enviar sitios con el mismo contenido o similar, no enviar una URL que direccione a otra direccin en el web, que tenga contenido mal visto o ilegal, que sea una pgina en construccin, etc. Todas las normas se pueden leer en la pgina que explica el registro, en el propio dmoz. Las normas son muy claritas y estn en castellano. http://dmoz.org/World/Espa %C3%B1ol/add.html Una vez nuestro sitio cumpla con todas las caractersticas deseables para poder ser listado en dmoz y hemos comprobado que no est ya dentro del directorio, tenemos que navegar por la estructura de categoras, para encontrar la ms adecuada para dar de alta nuestra web. Entonces hay que pulsar el enlace Sugerir URL y enviar la informacin de la pgina en un formulario. Es importante elegir bien la categora, pues si no es la ms adecuada rechazarn la URL. Tambin ser directo y escueto tanto en ttulos como descripciones, porque si estas no son adecuadas podrn rechazar el sitio. No utilizar tampoco lenguaje comercial como el mejor web de tal cosa.
A veces es difcil entrar en dmoz, pues son muy selectivos a la hora de aceptar las pginas. As que no te desanimes si no aceptan tu web a la primera. Sigue mejorndola y vuelve a enviarla pasados unos meses. Explicaciones del funcionamiento de Pagerank de Google y la manera de conocer el Pagerank en nuestras webs.
El Pagerank es una medida de ranking que utiliza Google para las pginas. En concreto se calcula en funcin de los enlaces que tienen otras webs hacia la nuestra. El concepto est explicado en el artculo El Pagerank de Google. Es bueno saber que los enlaces que nos ponen en otras pginas son como votos y dependiendo del Pagerank que tenga esa pgina que nos enlaza, ese voto tendr ms calidad. Tambin se dice que los enlaces de intercambio no se tienen muy en cuenta a la hora de calcular el Pagerank. Tampoco se tienen en cuenta los enlaces que haya en las pginas que google considera como pginas exclusivas de recopilacin de enlaces. Hay que aclarar que Pagerank es una marca registrada de Google y que el algoritmo incluso est patentado, por lo que es tambin secreto. Por ello, podemos saber, o ms bien deducir, cmo funciona el Pagerank, pero nunca sabremos exactamente cmo se calcula. Los enlaces que tenemos nosotros a otras pginas no penalizan nuestro Pagerank, pero s que seramos penalizados en caso de enlazar con pginas que hayan sido penalizadas por Google. Ahora mismo no importa mucho el Pagerank para lo que es la posicin de nuestra pgina, pues google utiliza otros mtodos para clasificar las pginas, no slo a travs del Pagerank. Pero este Pagerank s que sigue siendo una buena medida para conocer la popularidad de una web. Podemos conocer el Pagerank instalando la barra de Google. Tambin podemos conocer el Pagerank de una pgina sin instalar la barra, en algunas pginas como PRchecker. En este sitio se puede incluso utilizar un cdigo para poner nuestra pgina y que aparezca un pequeo botn con la medida del Pagerank que tiene nuestra web. Otro sitio en castellano para conocer el Pagerank es http://www.mipagerank.com/ Existe un algoritmo alternativo al Pagerank llamado HITS (hypertext-induced topic selection) creado por Jon Kleinberg, tambin creado para valorar y ponderar la importancia de las pginas. Se puede obtener ms informacin en http://www2002.org/CDROM/refereed/643/node1.html Aunque el enlace hoy funciona, no funcionan los enlaces que tienen, as que la informacin que ofrece no es muy completa Como Google gestiona los anuncios y estimula al anunciante a cambiar su anuncio si ste no tiene clientes.
El auge de Google es mas que merecido ya que es una empresa que ha innovado en muchos aspectos uno de los cuales es la publicidad on line. Y de que manera. Imagnese que usted contratara un cartel de publicidad con una agencia de publicidad (de las tradicionales) y al cabo de unos das esta lo llamara diciendo "hemos comprobado que su aviso no funciona y que no recibe clientes, le recomendamos cambiar el contenido del mismo o lo cambiamos nosotros, si no cambia el contenido del aviso, este ser dado de baja y deje de gastar dinero " Usted creera que esta soando. Pues bien Google funciona as o cas. Por ejemplo, si desea vender camisas , Google le permite colocar un aviso de tal manera que cada vez que una persona escriba en el buscador general (www.google.com) algo relacionado con camisas, por ejemplo "camisas de abrigo" aparezca su aviso a un costado de la relacin de resultados generales. Usted debe especificar las palabras claves mediante las cuales desea que su aviso sea publicado que para este caso podrn ser: camisas de invierno, camisas de verano, prendas de vestir, etc. Google cobra por cada clic que hagan los usuarios sobre su aviso y usted puede especificar el monto mximo de dinero que esta dispuesto a gastar por da en cantidad de clics. Google cobra 5 euros para activar una cuenta y por los clics que se hagan sobre su aviso . La ganancia de Google proviene de los clics sobre su aviso y por lo tanto le interesar que su aviso sea efectivo para lo cual si detecta que el mismo no ha tenido una cantidad de clics suficientes, le indicara que cambie el aviso, ya sea modificando el contenido del mismo o las palabras claves. Si no lo hace el aviso ser dado de baja y si cambia de palabras claves muy a menudo y no obtiene resultados deber pagar un pequeo cargo extra que es una manera elegante de decir "para que anuncias aqu, estas gastando tu dinero y no da resultado". Tan solo a las 12 hs de configurar un aviso, recibir un mail indicando si el mismo est resultando efectivo y en funcin de ello si debe o no realizar modificaciones al mismo y esto lo pueden hacer gracia a todo el soft que poseen y realiza un relevamiento estadstico de la evolucin de los anuncios que incluso les permite pronosticar el impacto del uso de determinadas palabras clave. Si se quiere Google hace una "presin" sobre el anunciante para que este obtenga resultados ya sea modificando su aviso o cambiando las palabras clave. Es que la ganancia de ellos depende de la efectividad de su aviso! Los publicistas siempre han dicho que lo importante son los resultados pero nunca al punto de solo cobrar si estos se obtienen. Google acta como un "socio" del anunciante y aclara que desea anunciar a sitios relevantes que sern los que tengan los nmeros de clics adecuados. Realmente es muy ingenioso y simple pero a casi nadie se le haba ocurrido hasta ahora. Si bien el cobro por clic se utiliza desde hace tiempo en Internet, la amalgama de distintas modalidades publicitarias que han hecho es nica. Y no es que sean unos santos ni fenmenos, lo que sucedi es que las tcticas tradicionales de publicidad en lnea (banners o cobrar por mostrar un aviso ,etc) no dieron el resultado esperado (lo cual es relativo) y alejaron a muchos anunciantes. Entonces se planteo este nuevo tipo que me parece ms sincero. Se puede conseguir colocando enlaces en otras pginas, pero siempre cuidando del lugar donde lo ponemos.
Este artculo ha sido dado de baja, por pertenecer a un antiguo colaborador que ahora ya no participa en este web. Para conseguir enlaces recprocos, hay que cuidar la forma de comunicarse con el sitio que quieres que te enlace.
Unas ideas sobre conseguir enlaces recprocos, osea, intercambios de enlaces en otras pginas. T pones un enlace en tu web y otros webmasters ponen uno en su pgina. Hay que tener en cuenta que Google poco a poco est dando menos valor a los enlaces recprocos, puesto que un enlace compensa la ganancia de ranking del otro enlace, as que las cosas quedan compensadas. Pero no obstante, siempre es buena idea que nos enlacen, aunque nosotros tengamos que devolver el favor. Ante todo, tenemos que ser educados y evitar los mensajes en masa, pero veremos otros consejos sobre cmo escribir a cada webmaster por separado y con un texto personalizado, para causar una buena impresin. Tenemos que darnos cuenta que, cuando solicitamos un enlace a un administrador de un sitio web, tenemos que ser muy educados y poco intrusivos. Probablemente el webmaster est muy ocupado y no nos pueda contestar en el momento, o ni siquiera nos conteste. Si escribimos de una manera cordial y educada, posiblemente causemos una buena impresin y el administrador de la pgina se preste a contestarnos. Pero atencin, en un primer correo de contacto tampoco podemos esperar que ese webmaster sea nuestro colega y nos ponga el enlace directamente. Posiblemente pase tiempo antes que se alcance una confianza suficiente para conseguir un intercambio. En ese caso no es mal consejo plantearse ir poco a poco. Una buena idea para ganarse la confianza es ayudar a la persona que deseas que intercambie el enlace. Puedes publicar artculos en su pgina web, lo que sin duda le servir de ayuda y tanto mejor si le pasas materiales de calidad. Con cada artculo en esa pgina puedes conseguir un enlace ya a tu web, en la firma de autor del artculo, con lo que tu objetivo ya se ir cumpliendo en parte. Tenemos esta idea mejor explicada en el artculo Ideas para conseguir enlaces. Siempre podemos intentar lanzar regalitos al webmaster, del tipo de crticas muy favorables hacia su sitio. Es cierto que los webmasters nos identificamos mucho con nuestros sitios y que nos gusta recibir crticas buenas, pero por favor! no trates de pasarte, porque puede parecer un poco interesado el comentario. A mi no me resultan muy conmovedores los correos que elogian mi trabajo, si despus de todo hay un inters detrs. Pero lgicamente, si un usuario del sitio me dice que ha sacado gran provecho del sitio, me pongo muy contento. Yo opino que se deberan intentar intercambios con webs que ms o menos tengan el mismo nivel de audiencia. Si tienes un sitio que todava no es muy bueno, tal vez sea difcil conseguir enlaces con otros sitios de una calidad notablemente mayor. Puede ser bueno empezar a hacer contacto con esos sitios web de referencia y empezar a colaborar con ellos para que algn da te tengan en consideracin para un intercambio. Mientras tanto, puede ser bueno intentar conseguir enlaces en pginas que tengan un Pagerank similar.
Si la web que quieres que te ponga un enlace tiene un sistema para mostrar enlaces a otras webs del sector, es decir, tiene un directorio de enlaces como tenemos en http://www.desarrolloweb.com/directorio/, posiblemente sea ms sencillo conseguir que te pongan ah, antes que conseguir un intercambio de enlaces en la portada. Ten en cuenta el llegar a un buen nmero de webs, pero sin pasarte para no poder luego hacer un seguimiento. Es mejor ir poco a poco que enviar cientos de mensajes el mismo da. Porque igual no consigues nada de nadie si intentas hacer algo masivamente y si te dedicas a conseguir enlaces en pocos sitios igual sacas ms provecho, porque puedes empear tu tiempo en ello de una manera ms inteligente. Tambin ten en cuenta que es mejor de cara a buscadores ir consiguiendo los enlaces poco a poco, pero sin pausa, que conseguir todos de golpe y luego ninguno. En general, mi consejo es que no te cierres en banda con la idea de intercambiar enlaces, pues hay otros muchos mtodos para conseguir que enlacen con tu web, como hemos explicado en el artculo Ideas para conseguir enlaces. Conoceremos un sitio web que se encarga desde hace aos de calcular el trfico de las pginas web en todo el mundo. Se trata de Alexa.
Vamos a presentar un servicio interesante como herramienta para medir el trfico de nuestras pginas y compararlo con el de la competencia. Se trata de Alexa, un sitio web que se encarga desde hace aos de calcular el trfico de las pginas web en todo el mundo. Efectivamente, aunque nosotros no lo sepamos, Alexa ha estado contabilizando los accesos a nuestra pgina y podemos consultarlos en cualquier momento. Para hacer los clculos de trfico, Alexa tiene un mecanismo muy interesante, basado en una barra de navegacin que se puede incorporar a Internet Explorer y que enva a los servidores de Alexa la informacin de las pginas que visita el internauta. Cuantos ms usuarios dispone Alexa, ms calidad tienen las estadsticas que realiza. Es decir, cuantas ms personas se bajan la barra de herramientas de Alexa, ms datos recibe el sistema sobre distintas personas y sus costumbres a la hora de navegar. De este modo, a ms usuarios, puede obtener unas estadsticas ms reales, porque los datos donde se deducen el trfico son mayores. La barra de navegacin de Alexa tambin ofrece al usuario ciertas facilidades, como atajos para la bsqueda de pginas web utilizando Google, bloqueo de popups, un listado de pginas similares a la que se est visitando y completos informes sobre el trfico que recibe la pgina y su ranking entre todas las pginas de Internet. Todas las facilidades que ofrece la barra de herramientas estn encaminadas a motivar su uso, porque cuanta ms gente utilice la barra de Alexa, mejor informacin ofrecer de la web. La barra se puede instalar desde la propia pgina de Alexa, en la direccin: http://download.alexa.com Datos sobre el trfico de una web No es necesario tener instalada la barra de herramientas para saber el trfico de un sitio web. Basta con realizar un acceso a la pgina principal de Alexa (http://www.alexa.com/) para empezar a entretenernos explorando la web y los datos
que ofrece: Ranking de las mejores 500 webs, rankings por temas, las pginas que ms han mejorado sus estadsticas recientemente, etc. Una manera de acceder rpidamente a la informacin de una pgina que nos interese es a travs del buscador de Alexa. Simplemente podemos hacer un bsqueda con el criterio que deseemos para que salga la pgina que estamos buscando. Por ejemplo, podramos acceder a los datos de DesarrolloWeb.com a travs de la bsqueda "desarrollo web". Si nos fijamos, cada una de las pginas de resultados que aparecen, tiene un enlace al lado que pone "site info". Pulsndolo podremos acceder a cierta informacin sobre el sitio web seleccionado. Entre los datos que encontraremos podemos sealar: Una imagen actual de la portada del sitio, si es que Alexa dispone de ella Traffic Rank de la pgina (entre todas las pginas que forman la web) Pginas que visitan las mismas personas que acceden a la pgina actual Velocidad del servidor Si utiliza popups Desde cundo est online el sitio
Tambin se puede acceder a una lista ms competa de detalles del trfico de ese sitio, pulsando un enlace "See Traffic Details". Entre los detalles del trfico tenemos los usuarios, ranking, pginas vistas, pero sobretodo llama la atencin el grfico de la evolucin del ranking de la pgina a lo largo del tiempo. Adems, nos ofrece la posibilidad de introducir un nuevo sitio web para comparar el trfico con cualquier otro web que deseemos. Otras utilidades para webmasters Para lo que respecta a los propietarios de pginas, Alexa ofrece algunas posibilidades de inters, todas enfocadas a obtener una informacin mayor del trfico de las pginas web. Una de las opciones es ofrecer a nuestros visitantes la barra de Alexa para su descarga e instalacin. La barra se podra configurar con el logo del sitio web que la ofrece. Por otra parte, tambin se propone incorporar en la pgina web un pequeo recuadro con el ranking del sitio segn Alexa. Estos recuadros pueden incluso reportar ganancias al webmaster si el visitante los pincha y realiza luego compras en Amazon. Los recuadros se enlazan con la tienda Amazon, pues Alexa es un producto de Amazon. Ahora veremos una grfica de sitios web que podemos incorporar gracias a Alexa. Esta grfica se carga con un cdigo que se genera desde la propia pgina de Alexa, indicando los sitios web sobre los que se desea medir el ranking a lo largo del tiempo.
Google ya es capaz de indexar los archivos Flash (Extensin .swf) y asociarlos a palabras clave segn su contenido.
Parece ser que Google toma la iniciativa siendo el primero de los buscadores que es capaz de indexar los archivos de Flash. Esta es una muy buena noticia para todos los amantes de utilizar Flash en el diseo de sus pginas. Hasta ahora el uso de Flash y la promocin de una pgina en lo referente a SEO (Search Engine Optimization) eran dos trminos opuestos. El motivo de esto es que los buscadores eran incapaces de indexar en sus bases de datos aquellas pginas realizadas con Flash, es decir, para ellos una pgina realizada con Flash es simplemente una caja negra de la que nada se sabe. Si por ejemplo la pgina principal de nuestro web, la index, estuviese realizada ntegramente con Flash, los robots al procesar nuestra pgina no obtendran ningn resultado. Esto hara que tanto el contenido de esta pgina como los enlaces hacia otras pginas quedasen sin explorar por el robot, y por lo tanto ignorados por completo. Por este motivo en muchas ocasiones se tiene que decidir entre hacer una pgina con Flash mas llamativa desde el punto de vista del diseo y de la interaccin con el visitante, o realizarla mas sobria en html pero con unas posibilidades de optimizacin en buscadores mayores. Bueno, pues aunque todava es prematuro afirmar que hacer una pgina con Flash tiene las mismas posibilidades desde el punto de vista de SEO que hacerla en html, Google ha empezado ha andar el camino indexando el contenido, los enlaces, etc de nuestras pelculas Flash. Para comprobar como Google indexa las pelculas .swf podemos ir a Google y buscar indicando el termino a buscar y aadiendo al final el tipo de fichero a buscar, como se muestra en el ejemplo: terminoabuscar filetype:swf Todava existen muchos interrogantes respecto al tratamiento que recibirn estos .swf al ser indexados y si estarn equiparados en importancia a los html, pero por el
momento es una buena noticia que una pelcula .swf deje de ser una objeto oscuro para Google. Por qu no aparecen tus nuevas Webs en Google? La respuesta la tienes si conoces el SandBox de Google.
Si hemos publicado una pgina recientemente, habremos observado que no salimos todava en Google. Eso es porque Google no muestra entre los resultados de las bsquedas una web hasta que ha pasado un tiempo de su publicacin, lo que certificara segn ellos, que la web ya est consolidada y puede empezar a resultar interesante para los usuarios del buscador. A eso le llaman el sandbox, la caja de arena, una especie de cajn o purgatorio donde se almacenan las webs que por su reciente publicacin no son todava "dignas" de aparecer en el buscador Google. No podemos saber con certeza el tiempo que Google mantiene en el sandbox una web, pues es una informacin que no ha publicado. No obstante, pienso que es variable y seguramente dependa de los enlaces que otras pginas tienen hacia la nueva web y el ranking de las pginas que la enlazan. Durante el tiempo que una web permanece en el sandbox de Google, la web acumula enlaces hacia ella y puede aumentar su pagerank, pero simplemente no aparecer en los resultados de las bsquedas por las palabras clave que pueda tener, o como mucho, aparecer entre los ltimos puestos. Pero durante este tiempo, si buscamos la web por su nombre de dominio posiblemente s que la veamos, as podremos comprobar si est o no registrada en el buscador. Imaginemos que nuestro dominio es talleresmecanicospepe.com, pues si buscamos en Google por "talleresmecanicospepe" posiblemente la podamos encontrar. En cualquier caso, no desesperes, porque tu direccin no aparezca todava. No hace falta que vuelvas a enviarla a Google, sino ms bien, seguir trabajando, renovando contenidos y consiguiendo links hacia tu web. Para acabar, cabe decir que casi nunca es necesario que envies una URL a Google para que aparezca en el buscador. Google tiene un motor, denominado spyder, que se encarga de recorrer todas las pginas de Internet e indexar sus contenidos. Simplemente si conseguimos algn enlace a una pgina, ms tarde o temprano Google la encontrar y la indexar. Ofrece la posibilidad de saber en qu posicin se encuentra una pgina dentro de los resultados de las bsquedas de Google.
Google Rankings Un sitio web que nos ofrece la posibilidad de saber en qu posicin se encuentra una pgina entre los resultados de la bsqueda frente a cualquier palabra clave. Vamos a presentar un sitio web que tiene una interesante utilidad para conocer la posicin el ranking de Google de cualquier pgina con respecto a cualquier conjunto de
palabras clave. Se trata de Google Rankings http://www.googlerankings.com, un sitio sencillo pero muy curioso. El funcionamiento se basa en introducir unas palabras clave en un campo de texto y la direccin del sitio web que queremos localizar en otro campo. La bsqueda nos devolver la posicin donde ha encontrado la pgina, si es que la encuentra entre los resultados. El sistema se puede limitar para que busque las pginas que estn entre las 100, 200... y hasta 1.000 primeras posiciones. Cuanto ms limitada est la bsqueda, menos tiempo tardar el proceso. Es una utilidad bastante interesante que seguro que nos entretendr por un rato. No obstante, el sitio web ofrece otras herramientas que tambin pueden resultar interesantes como: Determine Best Keywords: una utilidad para saber las palabras clave ms usadas de una pgina y saber qu posicin ocupa el sitio web para cada una de esas palabras. Keyword Density: que permite dar una URL y nos informa sobre las palabras clave que contiene y su densidad (la relacin entre las veces que aparecen y las palabras del texto). Mass Keyword Search: para realizar una bsqueda del ranking con respecto a varios conjuntos de palabras clave de una sola vez. Mass Domain Search: que permite conocer el ranking de varios sitios web con respecto a la misma palabra clave. Contiene tambin otras herramientas, como un buscador de ranking similar, pero para el motor de Yahoo!, que podemos visitar en la direccin http://www.yahoosearchrankings.com/. Este sitio, en el momento de escribir el artculo, todava se encuentra en fase beta.
En definitiva, se trata de otro sitio web que nos puede ayudar a enfocar de una manera ms correcta la promocin de nuestro sitio web, facilitando conocer nuestra posicin en cada momento y en qu puntos fallamos y en cuales estamos fuertes. Creemos que es una pgina muy interesante y, como mnimo, su visita nos entretendr por un rato haciendo bsquedas para conocer la posicin de nuestro sitio web. Analiza a fondo el trfico de tu sitio online.
Informe publicado en la revista impresa NEX IT Specialist, edicin 16. Registrar los movimientos que se suscitan en una pgina en lnea es un aspecto fundamental para comprender y visualizar el crecimiento o los problemas de cualquier proyecto virtual. Llevar un seguimiento de las formas a travs de las cuales los navegantes se chocan con el contenido de la pgina, adems de analizar sus comportamientos frente a la distribucin de publicidades, mens, carros de compra u otros elementos, permiten describir el pblico que recorre el medio digital. En el caso
de un comercio electrnico, identificar las acciones de los usuarios, entre la pgina de entrada y el envo de un pedido de compra, resulta muy beneficioso, completando as el misterioso espacio en blanco. Pero las aplicaciones de anlisis web que recorremos en este informe proveen otras finalidades, tales como medir el rendimiento de una campaa de e-mail, la exposicin de avisos publicitarios, el impacto por la presentacin de cambios de diseo en el sitio web, y ms. Analizar el trfico supone una destacada serie de ventajas que rpidamente son apreciadas, y que contribuyen a mejorar la experiencia de las personas que dan una vuelta por nuestra pgina, siempre y cuando se aproveche la informacin obtenida. Un campo al que se le dedica mucho nfasis es el modo mediante el cual los visitantes conocen nuestro sitio. Teniendo en cuenta que el 90% del trfico llega a partir de los motores de bsqueda, principalmente de Google y Yahoo, los programas presentan funciones que les posibilitan marcar las palabras y frases que ayudaron a que nuestra pgina sea encontrada en los buscadores, adems de indicar cifras globales. Entonces, descubrimos que estas herramientas de marketing son determinantes para comprobar la eficacia de otras tareas que tienen que ver con el desarrollo web, como es el caso de la optimizacin para los motores de bsqueda. Hasta ahora se ha hablado en trminos generales de los beneficios que supone analizar el trfico online, pero ya es tiempo de explicar cmo se llevan a cabo este tipo de reportes. Para conocer en detalle aspectos del funcionamiento y particularidades de los programas destinados a este tipo de tareas, se entrevist a Mike Landis, Director y Socio principal de Mach5 Enterprises, empresa responsable del reconocido software de anlisis de estadsticas FastStats Log Analizar. Para obtener informes sobre el trfico web, se utilizan archivos log. Mike Landis explica que estos registros aparecieron a partir de los apuntalamientos de los servidores web Unix. "Los servidores, y la Internet en general fueron inventados en variantes Unix, y esos sistema operativos, por su naturaleza, registran todo". "El archivo log de un equipo captura un historial de las actividades que se desempean en el servidor. Graba qu documentos fueron servidos, y cundo, as como tambin un sumario de informacin sobre los pedidos de los archivos. Esto ltimo, incluye parmetros del usuario, tales como el referente (dnde estaba el visitante antes de llegar a cada pgina), la direccin IP, informacin de cookies que es enviada por medio del navegador, el estado de cdigos, y el ancho de banda transferido. El servidor web simplemente hace una entrada en su log por cada pedido que recibe. La descarga de una pgina puede involucrar muchos hits a archivos, dado que una pgina web siempre contiene grficos y otros elementos. El servidor enviar cada elemento al explorador del visitante, y registrar cada uno estos, por separado, en el archivo log de la mquina". Por otro lado, Mike destaca que "temprano en la historia de la web, los responsables del mantenimiento de los sitios se dieron cuenta de que los logs contienen una riqueza de datos acerca de cmo los visitantes usan sus pginas. Pero por el volumen y la naturaleza de la informacin registrada - los web logs son muy feos para ver a mano los desarrolladores necesitan un software poderoso para organizar los datos, convirtindolos en informacin til. Y as el mercado para la web analtica y el anlisis de archivos log naci". Los modos de anlisis del trfico
Se sali en bsqueda de aplicaciones de anlisis web, de tal manera de comparar y elegir las mejores propuestas, teniendo en cuenta las caractersticas, la facilidad de uso y la relacin calidad/precio. Pero antes de abordar las revisiones, es importante sealar que existen cuatro modalidades para procesar informes estadsticos. Cada alternativa posee caractersticas propias, y ventajas y desventajas sobre el resto. Cada una de las cuatro propuestas es interesante, pero an ms importante es descubrir cules son las mejores aplicaciones en cada terreno. 1. Aplicaciones del lado del servidor: Estas opciones corresponden a programas que procesan en tiempo real los datos que van siendo almacenados en los archivos log. Corren en el servidor, y el acceso a la informacin del trfico es mediante una interfaz en lnea. Generalmente, este tipo de soluciones vienen incluidas en las ofertas de alojamiento web, ya sea un servidor dedicado o compartido. 2. Servicios de estadsticas: Hoy, es posible encontrar en la red decenas de servicios de anlisis de estadsticas de gran calidad, muchos de los cuales son gratuitos. La forma en la que trabajan consiste en proveerle al desarrollador un pequeo cdigo que debe incluir en cada pgina de su sitio que desea monitorear. Es un sistema muy fcil y rpido, aunque se presentan ciertas limitaciones. Para remitir a un ejemplo, basta remarcar que el cdigo que se incluye en cada pgina debe ser descargado para que los datos del visitante sean registrados, y a veces, especialmente en las opciones gratuitas, debe esperarse bastante tiempo. Esto se debe a que el servicio es alojado en un servidor externo al cual no se tiene acceso, motivo por el cual no puede trabajarse con documentos log, los cuales son generados en nuestra mquina. De este modo, el cdigo al que se est haciendo referencia viene a reemplazar precisamente a los archivos log. 3. Procesadores Log: Esta opcin consiste en la descarga de los archivos log y en el posterior procesamiento de los mismos. Por lo tanto, es necesario tener acceso a los registros de las estadsticas, cuestin que debe consultarse con el proveedor de alojamiento web. En estos casos, el problema de acceso suele darse comnmente en aquellos sitios que tienen contratado un servicio de hosting compartido. Luego, mediante un software especializado que se utiliza en una tpica PC de escritorio, y sin requerir acceso a Internet, se desarrollan informes a fondo, en poco tiempo. ste es uno de los modos ms atractivos y productivos. 4. Soluciones de monitoreo de una red: Esta ltima propuesta necesita hardware dedicado, vinculado a la red que se conecta con el servidor. Interesante para grandes emprendimientos, que operan con varios equipos. Sin embargo, los costos de implementacin son muy altos, por lo que se sugiere echar un vistazo a las tres alternativas anteriores, de precios ms econmicos y fcil administracin.
Bien, sabemos ahora que mediante el uso de los archivos log es posible acceder a cada accin de cada navegante, pero cmo lo utilizan los programas de procesamiento. Le preguntamos entonces a Mike sobre el detrs de escena de su producto estrella, FastStats log Analizar (el mismo est dentro de la tercera categora: es un programa que trabaja en cualquier PC de escritorio, procesando los archivos log, una vez que estos han sido descargados del servidor). l, Cuenta que la aplicacin revisa de forma directa el contenido del archivo log. "Lee en los logs, agrupa las consultas de los usuarios basndose en cookies, direcciones IP, strings de los navegadores, y compila estadsticas de los visitantes mientras los procesa".
"Bajo la capucha, FastStats toma la especificacin de un proyecto en el lenguaje web comn XML, analiza los registros basado en esta especificacin, y produce un informe, tambin en XML. Luego muestra los datos en una conveniente interface. Los componentes de la interfaz grfica se preocupan por tareas extra, tales como convertir los reportes en HTML, exportarlos a un sitio web, descomprimir logs, y configurar el proyecto". A diferencia de otros productos, FastStats no mantiene una base de datos luego del procesamiento de logs, con lo cual el anlisis no queda atado a una mquina en particular. Est optimizado para generar rpidamente los detallados informes del trfico. Las soluciones, una a una AWStats: Fue creado cinco aos atrs por Laurent Destailleur, un engeniero de Pars, por la falta de opciones Open Source que haba en aqul entonces. Su desarrollo se convirti en una de las herramientas ms valoradas a nivel mundial. Es gratuita y lleva a cabo complejos procesos de anlisis, siendo ejecutada en el servidor web. La ltima actualizacin corrige ciertos aspectos de seguridad, no obstante, uno de los principales atractivos est en la interface. Mediante una pgina que se divide en dos bloques, es presentado un extenso men que da acceso a los detalles grficos del trfico. Capaz de registrar todo tipo de informacin, desde los pases de los navegantes, hasta las palabras y frases que se usaron para dar con el sitio a travs de los motores de bsqueda, WebAnalizer es una opcin ptima. Este analizador trabaja en Perl, a modo de CGI (Common Gateway Interface) o desde una lnea de comando, y adems destaca por su versatibilidad con las distintas plataformas, soportando tanto sistemas Linux como Windows. En Internet: awstats.sourceforge.net Webalizer: Otra opcin de cdigo abierto de libre distribucin, que corre en lnea, en el servidor del sitio. En este caso, el desarrollador se encuentra con una pgina en la que se muestra la actividad ocurrida durante un mes determinado, y pueden consultarse tambin perodos anteriores. Su interface es ms rpida y directa, pero tambin ms limitada que AWStats. La aplicacin est desarrollada en C, y desde su sitio se hace referencia una y otra vez a la veloz capacidad de procesamiento de los archivos log. Pensado para correr sobre plataformas Linux, Webalizer es una opcin segura, sin suponer inversiones ni complejos pasos de instalacin. En Internet: www.mrunix.net/webalizer Urchin: Ahora le toca el turno a una aplicacin comercial. Urchin fue comprada el pasado mes de marzo por Google, el principal motor de bsqueda de Internet. Jonathan Rosenberg, Vicepresidente de administracin de producto de Google afirm, "queremos proveer a los dueos de sitios web y publicistas la informacin que necesitan para optimizar las experiencias de sus usuarios, y generar un mayor retorno de inversin a partir de los gastos por publicidad". Se trata de un movimiento muy interesante, que refuerza el liderazgo de la empresa en lo que se refiere a las soluciones de rentabilidad y promocin en Internet, mediante los programas AdSense (destinado a que Webmasters coloquen anuncios en sus pginas online, y as ganar dinero de acuerdo al rendimiento de los mismos) y AdWord (para promover sitios web, exponiendo anuncios a travs de los miembros de AdSense). Pero hablemos ms en detalle sobre Urchin, un sistema de estadsticas que ofrece, entre sus caractersticas, la capacidad de calcular el porcentaje de usuarios que accedi al sitio pero que lo abandon sin visitar otras pginas, a excepcin de la de
entrada; cientos de parmetros acerca de los visitantes y sus comportamientos; una interface funcional, que permite una rpida configuracin y puesta en prctica; funciones de seguimiento de campaas publicitarias, con un toque especial para aquellas relacionadas con los buscadores, lo cual permite observar si se alcanzan o no los objetivos planteados, haciendo comparaciones y exhaustivos anlisis; se presenta un mdulo dedicado al comercio electrnico, que rene datos acerca de las ventas; y ms. Urchin es uno de los lderes, sin lugar a dudas, con poderosos mdulos de anlisis e incluso opciones de expansin. En Internet:www.urchin.com HitsLinks: Es un servicio en lnea de anlisis de estadsticas web, que corre en el servidor de un tercero. Tiempo atrs, la empresa tena una versin gratuita, la cual ha sido discontinuada. Disponible en las ediciones Enterprise y Professional, HitsLink ofrece un nivel de detalle comparable al ofrecido por Urchin, dado que se hace mucho hincapi en temas de comercio electrnico, publicidad y buscadores. Es uno de los servicios ms recomendables que existen hoy, y su rpida instalacin, que se basa en colocar un cdigo en cada pgina del sitio que se desea monitorear, lo hacen una buena eleccin. En Internet: www.hitslink.com Estadsticas Gratis: Como su nombre lo describe, ste es un servicio totalmente gratuito de estadsticas y contadores. Es una de las tantas opciones que nos porponen en la red, pero est en espaol. Provee informacin general, principalmente datos aproximados sobre las visitas e impresiones diarias y mensuales. Este tipo de soluciones deben verse como una posibilidad para pequeos proyectos en lnea, ya que muestran un pantallazo general del trfico. En Internet: www.estadsticasgratis.com ClickTracks: Un software de anlisis de archivos log impecable, pero costoso. Se instala en la PC del escritorio, y una vez descargados los archivos que hacen referencia al trfico, puede comenzarse a investigar la actividad del sitio. Es, con seguridad, una de las aplicaciones ms completas del mercado. Sin embargo, su precio es algo elevado para el bolsillo de muchos. Una vez instalado el programa, y tras procesar el archivo log, se le presentan al usuario informes profundos, adems de posibilitarle la ejecucin de anlisis especficos, lo que permite un control prcticamente total sobre las estadsticas. Aparecen as, muchsimas funciones para realizar comparaciones y comprobar las actitudes generales de los navegantes ante lo que se les presenta en la pgina. De esta forma, ClickTracks est orientado hacia pequeas y grandes empresas, y no hacia usuarios particulares. Su interfaz es totalmente intuitiva y sencilla para cualquier nivel de usuario. Disponible en cinco versiones, ClickTracks satisface las necesidades de miles de sitios web en todo el mundo. En Internet: www.clicktracks.com FastStats Log Analizar: Uno de los favoritos de la seleccin, simplemente por su relacin calidad/precio, que lo colocan como uno de los ms econmicos, pero ello no significa que est por debajo del resto en lo que a caractersticas se refiere. Presenta, a travs de una gil interfaz, el contenido de los archivos log (que han sido descargados del servidor). Se da lugar de este modo, a una serie de opciones de visualizacin acerca de distintos aspectos del trfico. La vista ms interesante es la HyperLink TreeView, que muestra cmo se van moviendo los usuarios por las pginas del sitio; es una especie de organigrama, de mucha utilidad. Adems de contarnos acerca de cmo llegaron los navegantes, aspecto que incluye a los motores de bsqueda, tambin conocemos datos sobre el tiempo de estada de los usuarios, sus
comportamientos generales, y mucho ms. FastStats Analizar viene en una versin normal, Gold, y tambin gratuita. Esta ltima, aunque limitada, permite ver toda la funcionalidad de sus hermanos mayores. En Internet: www.mach5.com WebTrends Analysis Suite: El ltimo pilar del informe. Es uno de los viejos conocidos de la industria, que ha evolucionado y presentado innovadoras funciones con su ltima entrega. En la misma, se incorporan las siguientes herramientas: Email Campaign, muestra el rendimiento de las campaas de correo electrnico; Seach Rank Reporting, informa del impacto que tiene en el sitio la cada de posiciones en los resultados de los buscadores; Dynamic Segmentation ofrece un panorama sobre el efecto de cambios y promociones en los visitantes. Mientras que por otro lado se mantienen utilidades de ediciones anteriores, tales como Visual Path, que muestra de forma clara y rpido la actividad en el sitio, Visual Scenario, que comprende informacin acerca de la entrada y salida de usuarios, y WebTrends SmartView, que permite navegar por el sitio para encontrar maneras de optimizarlo. Estas son slo algunas de las opciones de anlisis que posee este sofisticado software, el cual se puede evaluar antes de realizar la compra. En Internet: www.webtrends.com Explicamos el concepto Keyword Density en ingls- y comentamos algunas herramientas para examinar el estado de nuestra web en cuanto a palabras clave.
La densidad de palabras clave o keyword density es el ratio de apariciones de una palabra o frase clave contra el total de palabras que componen un texto. Por ejemplo, para un texto de 100 palabras, si una palabra aparece 5 veces, su densidad ser del 5%. La densidad de palabras clave es uno de los factores que tienen en cuenta los buscadores para ordenar los resultados de una bsqueda. En principio, cuanta mayor densidad tenga una palabra en una pgina web, provocar que los buscadores la siten ms arriba, cuando se busca por ese criterio. No obstante, siempre hay que mantener una coherencia y no utilizar una palabra en exceso, puesto que los buscadores pueden tratarlo como una trampa y pueden penalizar una pgina que hace excesivo uso de una keyword. Tambin hay que decir que no es tratada igual una palabra dependiendo de dnde est colocada. Por ejemplo, las palabras que estn en el ttulo de la pgina suelen ser tenidas ms en cuenta. Tambin sern tratadas especialmente palabras colocadas en los encabezamientos (etiquetas H1... H6) o como texto de los enlaces. La densidad de palabras clave nos puede ayudar para explicar por qu en ocasiones es ms sencillo aparecer en posiciones buenas en pginas que contienen poco texto que en pginas con textos muy largos. Imaginemos que deseamos que nos encuentren utilizando un criterio de dos palabras. Si estas dos palabras se repiten 3 veces en un texto de 10 palabras, la keyword density ser de 30% para cada una. Ahora bien, si estas palabras estn diluidas en un texto de 100 palabras, la densidad de estas ser 10 veces ms baja, es decir, un 3%. As pues, cuantas ms palabras utilicemos, estaremos dividiendo la densidad de palabras clave de todas las que aparecen en la pgina.
Nota: Para que una pgina sea considerada como relevante, los buscadores tambin tienen en cuenta el nmero de palabras que utilizan en todo su texto. As que no hay que tener cuidado con reducir demasiado el texto de la pgina. De todos modos, nadie no se sabe a ciencia cierta a partir de qu palabras ser considerada como relevante y adems, depender del criterio de cada buscador.
Herramientas para conocer la densidad de palabras clave Ahora vamos a ver unas herramientas para calcular la keyword density de nuestro web. Ello nos puede dar una idea de la importancia de unas palabras frente a otras. Conociendo la densidad de palabras de nuestro sitio podemos ajustar nuestra pgina para que tengan mayor relevancia las palabras por las que deseemos ser encontrados. http://www.ranks.nl/tools/spider.html Esta herramienta calcula la densidad de palabras clave de cualquier URL que le proporcionemos. Adems nos da datos de inters como el nmero de repeticiones, la prominencia o el lugar donde ha encontrado las palabras. Tambin ofrece la densidad de grupos de palabras clave o frases clave, agrupadas por nmero de palabras que componen la frase clave. El mismo sitio ofrece adems otros servicios para ayudar en el posicionamiento. http://www.searchengineworld.com/cgi-bin/kwda.cgi Ofrece un listado bastante sencillo de palabras y frases clave de una URL y su densidad de aparicin. http://www.seochat.com/seo-tools/keyword-density/ Otra sencilla herramienta para obtener listados de palabras clave y su densidad. http://www.virtualpromote.com/tools/keyword-analyzer/ Es la ms sencilla de todas las que hemos presentado, ya que no permite configurar los resultados que ofrece. Existen muchas ms herramientas para calcular la densidad de palabras clave de un sitio web, con una simple bsqueda en google podrs encontrar estas y otras muchas otras utilidades.

Aprendiendo HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Aprendiendo HTML

Uploaded by

Copyright:

Available Formats

APRENDIENDO HTML

Descripcin de la sintaxis con la que se trabaja en el lenguaje HTML.

Partes de un documento HTML

Vemos como colocar negritas, itlicas, subrayados, subndices y suprendices.

CC3H4ClNOS es un heterociclo alergeno enriquecido

Seguimos aprendiendo etiquetas que nos sirven para formatear el texto.

Este texto es ms grande

Para conseguir un color, mezclaremos valores de esta manera:

00 33 66 99 CC FF Ejemplos: #3366FF #FF9900 #666666 Se consiguen los colores siguientes:

Estudiamos otro tipo de listas: las listas ordenadas.

Para descargar la lista de caracteres especiales:

1. Ser consciente de las limitaciones de los PDAs.

2. Definir cuidadosamente la estructura del site.

3. Evitar el uso de tablas.

4. No utilizar marcos (frames).

5. Publicar contenidos concisos.

Por la limitacin de la memoria y de la pantalla, escoger slo la informacin ms importante y esencial.

6. Organizar la informacin cuidadosamente.

7. Optimizar los grficos.

8. Incluir texto alternativo en todas las imgenes.

9. Aadir el tag handheldfriendly al comienzo de todas las pginas.

10. Utilizar convenientemente el caching de las pginas.

Incluir el prefijo provincial. No telefonos moviles (celulares).

1. El banner funciona. Si bien como soporte de un modelo de negocio esta

Ejemplo de banner avanzado que funciona.

Imagen reducida, este enlace permite verla a tamao real.

1. Confianza. Generar la sensacin de controlar y dominar el web site, la propia

Cmo saber si el dominio que deseamos es el ms adecuado.

You might also like