Re-cursos web: webmasters avanzados

Mostrando las entradas con la etiqueta webmasters avanzados. Mostrar todas las entradas

miércoles, 2 de diciembre de 2009

Olvidate del Facebook Twitter Tuenti

Una forma de medir el exito de las redes sociales es la cantidad de imitadores que surgen. Todas las principales tienen su versión bien de pago, bien gratuita de código cerrado y abierto. Me voy a centrar en las gratuitas de código abierto de las cuales existen diferentes opciones y versiones. Si estas cansado de la publicidad y la uniformidad de las grandes redes sociales, aquí podrás encontrar algunas que además de poderlas personalizar a tu gusto permiten incluir tus propios anuncios para sacarle algo de rendimiento e incluso prescindir de la publicidad.
Sobre las de pago sólo ofrezco una lista de las más populares, deciros que pueden variar entre 40 y 1000 euros dependiendo de las funcionalidades, calidad de código, libertad para manipularlo, soporte, etc. Seguro que ya tienes una cuenta o un perfil en alguna de las más conocidas, pero estas te dan la posibilidad de adaptarla a los fines y necesidades de tu empresa o grupo de intereses comunes.

Una de ellas y la que parece ser más potente y llena de funcionalidades, las mismas que Facebook y alguna más, es Social Engine . Enmarcada en un diseño excelente que ya le gustaría a otras, que a pesar de ser muy populares son muy simplonas. El defecto es que es de pago si bien te ofrece una versión de prueba por 15 días y si te gusta pagar por la versión completa.
Aquí puedes probar las demos de la pàgina principal y la de admin. Resulta gracioso que para acceder a la vista del panel de administración has de pasar por el típico paso de insertar en sus respectivos campos el nombre de usuario y clave, que ya vienen por defecto. Luego acceder. Si quieres probar la versión de evaluación por 15 días pincha aquí.

Pero ahora vine lo mejor las versiones opensource (de código abierto) que puedes utilizar. Sin duda la manera más efectiva de tener tu propia red social para tus usos académicos, profesionales, redes institucionales, etc. Olvidate del Facebook el Twitter, Tuenti, Digg, Delicious, Menemame, o de aplicaciones de pago y con código cerrado o por lo menos parte de él. Libres para que las modifiques según tus necesidades y capricho.

Una de ellas es AROUNDMe una aplicación que sirve para crear grupos tipo los grupos de Google o Yahoo, puede crear grupos de colaboración multiple. AROUNDMe requiere un servidor web corriendo bien 1.3/2.x Apache o IIS5/IIS6 con PHP5.x instalado incluyendo Curl, BCMath y la librería GD con MySQL 4.1 o MySQL 5.0 base de datos. AROUNDMe utiliza un nombre de dominio / subdominio como de su grupo.Es necesario poseer o tener acceso a un nombre de dominio para instalar este producto.

Elgg parece ser una de las más completas, permite muchas cosas a la hora de crear redes sociales, Sociedad y Tecnologia es una red social basada en esta herramienta. Sirve para uso como entorno personal de aprendizaje (una de las cosas más interesantes de las redes sociales), escritorio personal, creacion de CV, incorpora detalles como la creacion de planetas basados en los feeds de l@s participantes. Página de demostración de Elgg.

Dolphin de código abierto y que recuerda mucho a Myspace. Pero debes pagar por la licencia del programa, para eliminar los links de BoomEx por un tiempo determinado a partir de 90 dias 39$ hasta 299$ por tiempo ilimitado. y por 998$ además libera los APIS para moviles y otras funciones. Pero no hay de que preocuparse os lo podeis descargar tranquilamente e instalarlo si no os importa que os pongan enlaces y banners de de BoomEX. Para quitarlos, es para lo que hay que pagar alguna de las licencias comerciales. Es escalable, incluidos video chat, grabadora, visor de video, foros, grupos, eventos, messenger, bandeja de correo, aplicaciones de escritorio, compartir fotos y vídeos. Podeis ver la página de demostración basada en Dolphin de BoomEx.

Insoshi otra aplicación para redes sociales que me recuerda vagamente a Tuenti, no se muy bien por que. Desde aquí lo puedes descargar. Programado en Ruby on Rails. Tiene las caracteristicas de la mayoria de las redes sociales, blogs, actividad de los canales, mensajeria, busqueda de personas, etc.

Lovdbyless tambien programada en Ruby on Rails, para crear una red social sencilla, pero se puede escalar en algunos aspectos. Aqui podeis ver una versión demo en linea. Desde aquí lo podeis descargar. De aspecto impecable me ha gustado mucho su diseño y aspecto. Completamente gratis según parece, esto tengo que probarlo. parece que la instalación es algo liosa y requiere algunos conocimientos de Ruby on Rails, escribir algunos comandos y seguir ciertas instrucciones.

Mahara con este nombre tan cachondo, es una herramienta para E-portfolios y redes sociales especifica para fines y comunidades educativas. Permite la creación ce curriculum digital en linea. Para probar la version demo has de registrarte. Pronto me pondre manos a la obra ya que me he registrado para probarlo.Hare lo mismo con otras aplicaciones de las aquí nombradas y os dare más datos y algunas instrucciones de uso de las versiones demo en linea. Alguna la instalare en mi servidor y tambien os podre contar los pasos necesarios para la instalación de alguna de ellas. En castellano porque en ingles hay información por todas partes. En los sitios web de estas aplicaciones suelen ofrecer alojamiento en sus propios servidores optimizados para cada una.

Y ahora llega el rey, Buddypress de la misma familia que Wordpress y BBpress. Wordpress como sabreis es una aplicación de código abierto libre y gratuita para la creación de blogs y sitios web, BBpress es su versión para foros y Buddypress es una herramienta de código abierto para redes sociales basada en plugins para Wordpress MU (multi usuario). Todavia en desarrollo, pero muy prometedor y del que pronto hablaremos ya que me parece el más importante y el que para mi parecer promete más. Con suerte pronto tendre y podre participar de una red basada en esta aplicación. Muy pero que muy completa. Funciona sobre una instalación de Wordpress MU que ya tengas o sobre una nueva. Aqui podeis ver la versión demo. Requiere WordPress MU version 2.8.4 o superior. Desde aquí la descarga. Sitio de ayuda y soporte de BuddyPress en castellano. Su sitio en Twitter. Tambien el sitio de soporte en castellano ofrecen diferentes planes de alojamiento (hosting). Muy interesantes los planes eco. Te realizan una Instalación Básica de WordPress, WordPress MU, BuddyPress y/o bbPress totalmente Gratis y podrás contratar una Instalación Completa por solo 10€ (pago único. Con muchas plantillas y gadgets. Posiblemente en el futuro el modelo de red social más personificable y flexible que exista. Me gusta escribir es una comunidad basada en Buddypress. Y aquí la comparativa de planes para que puedas empezar a usarlo a partir de 66 centimos al mes, escalable según las necesidades.

Identi.ca es la alternativa libre a Twitter (una de tantas), con una funcion para adjuntar archivos.Un servicio de microbloggin basado en el software libre StatusNet para compartir noticias. Descarga aqui la aplicación. Aquí podeis ver mi cuenta.

Con esto termino esta macedonia de redes sociales. Con esto y un directorio de sitios y artículos sobre el tema algunos de los cuales he usado como fuentes.
Según valla teniendo tiempo ire probando las diferentes plataformas y os contare que tal funcionan.

Fuentes e información varia sobre redes sociales de código abierto:

domingo, 22 de febrero de 2009

Blogger V.S. Wordpress

Las plataformas más conocidas y usadas de blogs que hay son Blogger y Wordpress. Cada una tiene sus particularidades.
Para empezar habría que diferenciar lo que es Wordpress. com de Wordpress.org. En el caso de wordpress.com se trata de blogs ya instalados basados en Wordpress Mu, con registrarte tendrás acceso a al panel de administración y podrás empezar a publicar al instante como en el caso de Blogger. La opción gratuita está bastante limitada y por ejemplo no te permite añadir tus código de AdSense ni ningún otro script, incluso no puedes implementar algunos contadores de visitas o servicios de votación por no ser aceptado el código. También esta limitado el numero de plantillas que puedes usar para cambiar el aspecto del blog ni tampoco puedes acceder a las fuentes para modificar el CSS de la plantilla. El numero de gadgets incluido también es limitado. Existe una versión de pago que te da más posibilidades en este sentido. Yo entre esta versión de Wordpress.com y la de Blogger me quedo con la segunda. Blogger, te permite añadir más códigos, de entrada ya tiene un widget para implementar tus anuncios de AdSense. Puedes modificar la plantilla permitiéndote algunas funcionalidades que no vienen de serie, todo ello gratis. También hay un numero mucho mayor de gadgets de todo tipo. No tienes acceso a la base de datos ni puedes hacer una copia de seguridad como mayores desventajas. Tampoco te da acceso al sitio donde se encuentra hospedado el blog por lo cual no puedes subir ningún archivo.
La tercera opción Wordpress.org te permite descargarte la aplicación para que la instales en tu servidor conectándola a una base de datos. Es un CMS de código abierto con licencia GNU. Es para webmasters algo experimentados que sepan subir archivos por ftp a un servidor, crear una base de datos y conectarla. Pero tampoco es excesivamente complicado si sigues unas pocas instrucciones y tienes unos mínimos conocimientos. Esta versión es completamente gratuita, acepta scripts, dispones de miles de plantillas y cientos de widgets y plugins muy fáciles de instalar a través de un panel de control. Tienes acceso a todos los documentos que componen el sitio y a la base de datos de la que puedes hacer copias de seguridad. Puedes modificar la plantilla de varias partes del sitio si tienes los conocimientos necesarios de CSS y HTML. La mejor opción para los webmasters que quieren total flexibilidad a la hora de modificar y personalizar su blog. La pena es que blogger no libere sus blogs de la misma forma. Diferenciando entre las plataformas para añadir algunas funcionalidades a blogger como por ejemplo la de "leer más" o artículos relacionados resulta bastante farragoso y te obliga a dejarte las pestañas buscando el punto exacto del código donde añadir el nuevo. En Wordpress.com tanto como si tienes uno en tu servidor el leer más es una opción del editor y se hace con un clic. Para por ejemplo los artículos relacionados y otros con instalar un plugin y activarlo lo haces facilmente sin necesidad de pelearte con los códigos para nada. Es algo que Blogger debería de tener en cuenta a lo largo del tiempo han implementado un montón de nuevos widgets de terceros los de siempre no han sufrido evolución alguna y se han quedado algo cutres sobre todo a nivel de configuración. Tampoco el editor de textos para las entradas ha evolucionado para nada y que por ejemplo el leer más todavía no sea una opción propia incluida por defecto me parece un tremendo fallo y que no exista ningún widget para las entradas relacionadas a estas es un "olvido" bastante notable a tener en cuenta.
Viendo esto si estas cansad@ de blogger y tienes pensado cambiar a Wordpress te recomiendo la de Wordpress.org para usar la otra mejor te quedas como estas. Pero si quieres llegar a otro nivel y dar el paso de tener tu propio blog alojado en un servidor tanto gratuito como de pago te recomiendo la versión CMS basada en Wordpress Mu. Quizás el único defecto son las constantes actualizaciones que a veces no te permiten hacerte con el funcionamiento de la actual y a ya están sacando una nueva. Por lo demás perfecto. Por otra parte el el Mu te permite hacer algo que con Blogger es imposible y es crear tu propia plataforma de blogs en la que los usuarios pueden crear su propia bitácora personalizada e independiente. Para ello necesitaras tener un servidor dedicado ya que debes modificar el php.ini y son los unicos que te permiten hacerlo sin impedimentos. Según parece ya hay una versión estable.
Esta en tus manos escoger la que mejor se adapte a lo que buscas. Leer más...

viernes, 19 de diciembre de 2008

Meta_tags

Las meta- tags hoy en día aún siguen siendo importantes a la hora del posicionamiento y de indexar tu web. No te sirve de nada apuntarte en 100 mil buscadores si no tienes las meta-tags correctas para que a la hora de ser visitada e indexada tu web por los robots la pongan en el lugar que le corresponde. Las puedes escribir a mano, la mayoría de los editores de HTML las incrustan en le código html a través de un formulario, de la misma forma existen sitios web donde puedes generar las meta-tags para tu sitio usando también un formulario rellenando los campos de un formulario con los datos que te pide a saber: titulo de la web, autor,tema,descripción, las palabras clave por las que quieras aparecer en las búsquedas separadas por comas,el editor usado,el idioma, cada cuantos días quieres que sea visitada la página por las arañas (bots), distribución si es publica o privada, y que clase de robots quieres que la visiten. esto ultimo también se puede hacer subiendo a la raíz de tu web un archivo llamado robots.txt muy practico en el que le puedes indicar tus preferencias y elegir los robots que quieres que te visiten, cuales no, que tipos de documentos quieres que indexen y cuales no, por ejemplo puedes decir que el googlebot por ejemplo no lea los archivos pdf.Es una lección que queda pendiente. Aquí podéis ver unas meta-tags generadas para este sitio, podéis simplemente copiarlas y cambiar el contenido por los datos de vuestra web o podéis usar alguno de los variados generadores de meta-tags que hay en la red y de los cuales os dejo una lista.
Cubrir los datos en el formulario y cuando lo tengáis todo cubierto decirle generar meta-tags y os aparecerá un código que habéis de copiar y pegar antes de /head en la página principal de vuestra web.

domingo, 14 de diciembre de 2008

Publicidad gratis en internet.

Tener un sitio web no es sólo tener unas imagenes y textos en la red. Normalmente esta creado con alguna intención, dar información sobre eventos, poner en contacto a aficionad@s a algún tema, dará a conocer una asociación, dar algún servicio, gratuito o de pago, promover tu obra o algún producto que quieras vender e incluso tratar de rentabilizarla con publicidad.
Entonces no sirve de nada hacer un sitio web que no sea visible a menos que quieras que sea privado. Si tu sitio es publico y quieres que por alguna razón se difundan tus contenidos.
Hay varias maneras de conseguir que tu página web sea visitada, una la más común y la más buscada es aparecer en los primeros puestos en buscadores. Para eso existen tecnicas de posicionamiento que es una actividad apasionante de la que hablaremos más adelante. Otra forma es hacer una campaña publicitaria de tu sitio web. Puede tratarse simplemente de pegar carteles en fotocopia, flyers pegatinas con algún lema el logo y la dirección de la web, que puedes repartir por tu barrio ciudad y alrededores. Es económico y resulta mejor de lo que te puedas creer, una campaña a nivel nacional o mundial es muy costosa, una a nivel local está al alcance de cualquiera. Además por algún sitio hay que empezar. También puedes promoverte y conseguir visitas por servicios como ZZ visitas en las que a través de un programa navegas las páginas web de otros usuarios registrados al servicio o visitar anuncios para ganar puntos que luego puedes cambiar por visitas a tu web. tiene un sistema de referidos y ganas visitas por ti y por tus referidos.
Otra manera de conseguir visitas sin ser cifras muy espectaculares pero nada despreciables es poner un anuncio en Tablonia.
Tablonia es un servicio de publicidad en la que puedes anunciar cualquier cosa, negocios, cambios. Tiene un enorme directorio con diferentes categorías.
puedes poner anuncios gratuitos o anuncios destacados pagando muy poco. El tener los de pago tiene más ventajas como el autolink que permite que cuando alguien vea tu anuncio sea redireccionado a tu pagina o esta aparezca en una ventana emergente. También aparecerán en los primeros puestos y destacados según el plan de tu elección.
Mantienen tus anuncios durante 3 meses tiempo al cabo del cual expiran, puedes modificarlos ya que tienes un panel de control para ello. Cada cierto tiempo te envían informes sobre tus anuncios y las visitas generadas a tu sitio.
Para crear tu anuncio has de entrar a la página de Tablonia y pinchar el enlace donde dice publica tu anuncio.
aparecerá un formulario que has de rellenar con tus datos y el texto del anuncio, has de escoger una categoría para el anuncio lo más aproximada al contenido de tu web. Puedes subir una imagen para completar el anuncio. Cuando lo hallas registrado con éxito te enviaran un email con el resultado de tu anuncio y el enlace al panel de control de tu anuncio gratuitos puedes tener 4 anuncios diferentes mientras no repitan demasiado lo mismo o sean de lo mismo. los revisan y se guardan el derecho de cambiarlos a otra categoría si piensan que no lo has colocado en la adecuada y a poner el anuncio en varias lo cual te favorece. Cada cierto tiempo te irán llegando los informes de tus anuncios. otra tus anuncios salen muy bien posicionados. Podéis probarlo no perdéis nada y si os convence probar el servicio de pago que es una buena opción para económica para promocionar tu página.

martes, 2 de diciembre de 2008

Botonera con imagenes de fondo en css

Se trata de una lista no ordenada de enlaces y su css correspondiente en un archivo vinculado es un ejercicio para webmasters algo veteranos y que ya se han enfrentado antes con hojas de estilo en cascada. En el CSS se indica la imágen que corresponde a cada enlace dependiendo de si es un link visitado o no y la imagen que se muestra cuando pasas el ratón por encima o en diferentes estados. Los estados de los enlaces son normal, vinculo activo cuando pinchas sobre él, vinculo visitado cuando ya es vinculo que has visitado anteriormente y el enlace cuando pasas el ratón por encima. Esos estados en CSS se traducen como: a, a:link, a:visited, a:hover.
Esos atributos dentro del código los encuentras en:

background-image: url()

Entre los paréntesis has de poner el nombre o la url de la imagen con http://
para la imagen que se ha de ver según la acción del ratón: link activo, visitado o al pasar el ratón. En un principio deberían de verse los botones todos en color morado grisáceo que corresponde al enlace inactivo, si es un enlace ya visitado lo veras en azul claro y al pasar el ratón por encima en verde. Pruebalo
EJEMPLO:
Botonera en css
Descarga:

Los atributos de los enlaces son tal como vienen diciendo en el css del ejemplo:


a:link {
color: #000;
text-decoration:none;
font-size: 30px;
font-family: Verdana,Arial,Georgia,sans-serif;
background-image: url(re_cursos7.gif);
background-repeat: no-repeat;
}

Esto para el link activo text-decotarion: none; indica que el enlace no esta subrayado lo contrario seria underline en vez de none.
Pero para empezar a jugar empecemos por el principio.
Descarga el archivo zip que contienen los documentos HTML, CSS y las imagenes y descomprime dentro encontraras un archivo HTML uno CSS y tres imagenes GIF. Abre los archivos re-cursos_nav.html y re_cursos_nav.css con el block de notas o algún editor de texto sin formato, puedes usar Dreamweaver o Frontpage en Windows, Geany o Bluefish para Linux .
Abre el archivo re-cursos_nav.html con tu navegador (espero que no sea IExplorer) veras la web y podrás navegarla en tu disco duro, veras los cambios al pasar el ratón por encima, etc.
Todo este lío para que empieces a cambiar el archivo del CSS y comience la fiesta de modificar el documento HTML para cambiar su aspecto. Teniendo ya abierto re_cursos_nav.css vamos a cambiar lo que sucede con el link activo y todos los demás:


a:link {
color: #fff;
text-decoration:none;
font-size: 30px;
font-family: Verdana,Arial,Georgia,sans-serif;
background-image: url(re_cursos7.gif);
background-repeat: no-repeat;
}
a:visited {
color: red;
font-size: 30px;
text-decoration:none;
color: red;
font-family: Verdana,Arial,Georgia,sans-serif;
background-image: url(re_cursos1.gif);
background-repeat: no-repeat;
}
a:hover {
color:#000;
text-decoration:none;
background-color: #fff;
font-family: Verdana,Arial,Georgia,sans-serif;
font-size: 31px;
background-image: url(re_cursos5.gif);
background-repeat: no-repeat;
}

Por ejemplo vamos a hacer algo visible como que aparezca una linea por debajo de los enlaces. En a:hover cambiamos text-decoration: none; por text-decoration: underline; y veremos como al pasar el ratón por encima aparece una linea por debajo. El atributo color: corresponde al color de las letras y se lo podéis cambiar también poniendo el nombre del color el código hexadecimal o RGB podéis ver aquí una tabla de colores HTML. Los colores se pueden poner por su nombre en ingles por ejemplo red para el rojo green para el verde y una larga lista de colores que aguantan todos los navegadores, en hexadecimal o su valor RGB.
Vamos por ejemplo a cambiar el color del texto del enlace visitado que tiene como color el blanco (#fff;) deciros que los colores hexagesimales están formados por 6 cifras de 0 a 9, 6 letras o la combinación de ambos como: (# FF0000;) para el rojo. En colores en que los 6 números o letras son el mismo puedes escribir solo la mitad. Por ejemplo para blanco que es #FFFFFF; se usa (#fff;) y para el negro que es (#00000;)se utiliza (#000;) que sirve igual. Vemos que en el enlace visitado tenemos de color el rojo (red) y el enlace al pasar el puntero cambia a negro (#000;). Todo esto sin los paréntesis, ojo. Así escrito:


a:visited {
color: red;
font-size: 30px;
text-decoration:none;
color: red;
font-family: Verdana,Arial,Georgia,sans-serif;
background-image: url(re_cursos1.gif);
background-repeat: no-repeat;
}
a:hover {
color:#000;
text-decoration:none;
background-color: #fff;
font-family: Verdana,Arial,Georgia,sans-serif;
font-size: 31px;
background-image: url(re_cursos5.gif);
background-repeat: no-repeat;
}

Pues hagamos que se al revés cambiamos los atributos de color de uno para el otro:


a:visited {
color: #000;
font-size: 30px;
text-decoration:none;
color: red;
font-family: Verdana,Arial,Georgia,sans-serif;
background-image: url(re_cursos1.gif);
background-repeat: no-repeat;
}
a:hover {
color:red;
text-decoration:none;
background-color: #fff;
font-family: Verdana,Arial,Georgia,sans-serif;
font-size: 31px;
background-image: url(re_cursos5.gif);
background-repeat: no-repeat;
}

De esta forma el enlace visitado se vera en negro y rojo al pasar el ratón por encima. Al revés que en el caso anterior.
Juega con diferentes colores o sus valores.
Si usas (blue)Azul, (cyan) azul claro, (green) verde,(Darkgreen), (gold)dorado, (silver) gris plateado por ejemplo.
Podemos cambiar la imagen que aparece de fondo en cualquier caso como antes vamos a cambiar la imagen del enlace visitado y al pasar el mouse. Como las imagenes tienen el mismo nombre y sólo se diferencian por un numero (1,5,7) lo que habrá que cambiar sera simplemente el numero en el nombre de la imagen.
Ver esto por ejemplo:


a:hover {
color:red;
text-decoration:none;
background-color: #fff;
font-family: Verdana,Arial,Georgia,sans-serif;
font-size: 31px;
background-image: url(re_cursos5.gif);
background-repeat: no-repeat;
}

Así es como se ve en el original. Con la imagen re_cursos5.gif que es el botón verde y lo vamos a cambiar por re_cursos1.gif que es botón azul claro Así:


a:hover {
color:red;
text-decoration:none;
background-color: #fff;
font-family: Verdana,Arial,Georgia,sans-serif;
font-size: 31px;
background-image: url(re_cursos1.gif);
background-repeat: no-repeat;
}

Y al revés en a:visited cambiamos el numero de la imagen por re_cursos5.gif que es el botón verde. Justamente a la inversa.
Antes:


a:visited {
color: #000;
font-size: 30px;
text-decoration:none;
color: red;
font-family: Verdana,Arial,Georgia,sans-serif;
background-image: url(re_cursos1.gif);
background-repeat: no-repeat;
}

.... y después.


a:visited {
color: #000;
font-size: 30px;
text-decoration:none;
color: red;
font-family: Verdana,Arial,Georgia,sans-serif;
background-image: url(re_cursos5.gif);
background-repeat: no-repeat;
}

Podéis jugar con otros atributos como el tipo de fuente (font-family:) estilo de la fuente (font-style: italic;) por ejemplo que pondrá el texto en cursiva podéis probar que el texto se ponga en cursiva al pasar el mouse, o también (font-weight:bold;) para texto en negrita. El tamaño del texto no os recomendaría que lo cambiarais ya que la imagen se ajusta a su tamaño y con tamaño menor de fuente más pequeña se hace la imagen y al revés si hacéis una fuente excesivamente grande se saldrá fuera del botón. Hay una forma de evitar que suceda esto pero ya queda para otra lección. De momento practicar con lo que ya sabéis hasta que lo entendáis a base de prueba error/acierto y ver lo que pasa en el disco duro de vuestro PC antes de subirlo a la web. El código de la lista no ordenada y los enlaces están en el archivo html, en el body se encuentra
la lista la conoceréis por las etiquetas (ul ) y (li) con sus correspondientes cierres. Sobre esto un dato en el CSS hay algo referente a las listas no ordenadas como podréis ver:


ul{list-style-type: none;}

Que quiere decir que no tiene decoración hay variados atributos: square que pone un cuadrado delante de cada elemento de la lista (square;), un circulo (disc), triángulos (triangle). También las hay alfabéticas y numéricas pero en este caso nos viene mejor una lista no ordenada sin decoración y ya le decimos lo que queremos que aparezca delante de cada elemento con css, si queremos una imagen, un color de fondo, etc. Seguro que ya vais adivinando por donde van los tiros, les dedicaremos algún episodio.
Subir la carpeta y los archivos e imagenes a un servidor para pruebas de este tipo usar alguno gratuito. La barra os puede servir para la cabecera de una web metida en una capa (div). En vez de tener la página vinculada a la hoja de estilos podéis incrustar el CSS en el header del HTML antes de entre las etiquetas:
(style type="text/css") y su cierre (/style) sin los paréntesis y con <> y borrando o anulando(link rel="stylesheet" href="re_cursos_nav.css" type="text/css" media="all"/).
Bueno estudiarlo bien y podréis integrar vuestra botonera en cualquier web dentro de una tabla, un marco o una capa al principio del todo del body de la web o si esta en una capa en la posición que le deis. Podéis cambiar las imagenes por una de vuestra creación modificando las que ya vienen con algún editor de imagen tipo Photoshop, El Gimp o Gimpshop (los cuales os recomiendo, es libre, gratis y funciona en cualquier sistema operativo, hay versiones para todos también portables). Crear unas del mismo tamaño o uno adecuado al tamaño de texto que le pongáis a los enlaces y llamarlas de la misma forma o incluso llamarlas como querais y cambiar el atributo de nombre de la imagen de en el CSS: bacgkgroud-image: url(elnombredevuestraimagen.gif); con los paréntesis para encerrar el nombre de la imagen.
Deciros que podeis hacer que los botones en vez de aparecer de forma vertical uno encima de otro podeis alinearlos horizontalmente con lo siguiente:

/*lista no ordenada----------*/
li {float:left;list-style:none;margin: 0px 1px 0px 1px}
ul { margin-left: 180px }

Ver el resultado en el ejemplo:
Barra de navegacion horizontal
Ahora nuestra botonera se ha convertido en una barra de navegación en posición horizontal en vez de una lista vertical indicado por las lineas CSS anteriores. Para que lo entendais (float:left) indica que flote hacia la izquierda, (margin-left:) margen al lado izquierdo, (list-stile:none) que no tiene decoración para que no aparezcan los fatidicos puntos negros si no le indicas eso, margin: son los margenes que guardan las imagenes y funciona en el sentido de las agujas del reloj la primera cifra para el margen superior, la segunda para el derecho, la tercera para el píe de página y la cuarta corresponde con el margen izquierdo . Esto indica unos margenes de 0 desde arriba, 1a la derecha, 0 abajo y 1 por la izquierda. Realmente el que manda es el 1 a la izquierda que es la distancia que mantienen entre ellos. Si los quieres juntitos de todo les pones 0 para todo pero para eso es mejor que lo indiques con una sola cifra así:

li {float:left;list-style:none;margin: 0px}

Si lo haces así:

li {float:left;list-style:none;margin: 0px 1px}

Indicara una de las cifras los margenes de arriba y de abajo y otra los de la derecha y la izquierda. Dependiendo de la precisión que necesiten tus margenes usaras entre una y cuatro cifras expresadas en pixeles y otras unidades. Yo lo he puesto así para tener que explicar todo esto y daros todo este rollo. Eso si deberia de ir incluido en un div o capa para poderle dar otras propiedades como por ejemplo una imagen o un color de fondo para la capa, bordes, etc y poderla situar mejor en su sitio. Este otro rachivo de ejemplo al contrario que el otro que está vinculado a una hoja de estilos en cascada externa al documento HTML, en esta va incrustado en el head del HTML entre las etiquetas style con lo cual sólo teneis que ver el código fuente de la página y copiarlo para poder jugar con ello, comparte las mismas imagenes y con el mismo nombre que las del anterior con el nombre que querais y la extensión htm o html. Para ver el código fuente de cualquier página recuerda en Mozillla control+u y para todos en el menú ver y suele poner algo como ver codigo fuente. Si lo teneis en alguna carpeta de vuestro disco duro podeis guardarlo en esa misma carpeta con el archivo HTML, las imagenes y la hoja de estilos del anterior y listo.
Que largo se ha hecho para el proximo lo hago por fasciculos.
Creo que tenéis deberes suficientes por hoy. Leer más...