Estudio 103

Mudanza

2004-12-08T22:57:00.000+01:00

Mi nuevo sitio:
Juglar.
Vayan cambiando sus feeds RSS.

Apuntes de CSS práctico

2004-11-28T13:01:00.000+01:00

Para dar estilo a la primera letra de un elemento de bloque (un párrafo) o a su primera línea:

p:first-letter {color: red;}
p:first-line {color: gray;}

Podemos definir relaciones de contexto entre elementos: si queremos definir que los EM que estén dentro de un H1 sean grises:

h1 em {color: gray;}

Clasificación de los elementos:
- Elementos de bloque. Fuerzan un salto de línea al final de los mismos: párrafos, encabezados, tablas, listas, DIV, BODY.
- Elementos inline. Enlaces, énfasis, SPAN.
- Elementos de lista. Contienen elementos LI.

Podemos cambiar la visualización de bloques o listas mediante la propiedad display. Puede tomar los valores: block, inline, list-item, none (oculta el elemento).

Para que los párrafos (elementos de bloque) se vean en línea:

p {display: inline;}

Ref:
Programacion.com

Agrupaciones de estilos

2004-11-28T01:17:00.000+01:00

Agrupación de selectores

Cuando varios elementos comparten la misma propiedad CSS, podemos agruparlos:

h1, h2, h3, h4, h5, h6 {color: purple;}

h1, h2, h4 {color: purple;}

h2, h3 {background: green;}

h1, h4, b {background: white;}

b3 {color: white;}

b {color: red;}

Agrupación de declaraciones

Podemos agrupar las diferentes reglas que definen a un mismo elemento.

h1 {

   font: 18pt Helvetica;

   color: purple;

   background: aqua;

}

Agrupación de selectores y declaraciones

body {

  background: white; 

  color: gray;

}



h1, h2, h3, h4, h5, h6 {

  font-family: Helvetica, sans-serif;

  color: white; 

  background: black;

}



h1, h2, h3 {

  border: 2px solid gray; 

  font-weight: bold;

}



h4, h5, h6 {

  border: 1px solid gray;

}

Programacion.com

Definir estilos utilizando clases

2004-11-26T21:22:00.000+01:00

El atributo CLASS

Permite crear estilos que se pueden utilizar cuando queramos.

Primero, definimos una regla en el documento CSS (el punto inicial es necesario):

.cita {font-weight: bold; color: red;}

Una vez definida, podemos aplicar la clase en cualquier etiqueta HTML:

<p class="cita">En en lugar de la mancha ...</p>

También, podemos restringir el estilo a un tipo de elemento:

p.cita {font-weight: bold; color: red;}

El atributo ID

Es igual que CLASS, pero sólo puede usuarse en un único elemento. Los estilos ID están precedidos por #:

#first-para {font-weight: bold;}

<p id="first-para">This is the first paragraph, and will be boldfaced.</p>

Ref:
Desarrollo web
Programacion.com

Atributos de las hojas de estilo

2004-11-26T18:31:00.000+01:00

FUENTES

font-size: Tamaño de las fuentes.
Relativos: porcentajes | em
Exactos: unidades de CSS
Predefinidos: xx-small | x-small | small | medium | large | x-large | xx-large
Ej: font-size:12pt; font-size: x-large;

font-family: Familia de tipografia del texto.
Garamond, Arial, Helvetica, sans-serif, Courier, Times New Roman, Tahoma
serif | sans-serif | cursive | fantasy | monospace
Ej: font-family:arial,helvetica; font-family: fantasy;

font-weight: Densidad de los caracteres, es decir, para poner el texto en negrita. Normal = 400, bold = 700.
normal | bold | bolder | lighter | 100 | 200 | 300 | ... | 900
Ej: font-weight:bold; font-weight: 200;

font-style: Estilo de la fuente.
normal | italic | oblique
Ej: font-style:normal; font-style: italic;

font-variant: Si los caracteres serán normales o small-caps (las minúsculas son mayusculas de menor tamaño).
normal | small-caps

TEXTO

line-height: Alto de una línea, es decir, el espaciado entre líneas.
normal y unidades CSS
Ej: line-height: 12px; line-height: normal;

text-decoration: Decoración del texto, es decir, si está subrayado, sobrerayado o tachado.
none | underline | overline | line-through
Ej: text-decoration: none; text-decoration: underline;

text-align: Alineación del texto.
left | right | center | justify
Ej: text-align: right; text-align: center;

text-indent: Sangría de la primera línea.
Unidades CSS, o relativas (%, em).
Ej: text-indent: 10px; text-indent: 2in; text-indent: 2em;

text-transform: Que todas las palabras tengan la primera letra en mayúsculas, todo en mayúsculas o minúsculas.
capitalize | uppercase | lowercase | none
Ej: text-transform: none; text-transform: capitalize;

vertical-align: Alineación vertical del texto en relación con la línea base del texto.
baseline | sub | super | top | text-top | middle | bottom | text-bottom | %
Ej: vertical-align: sub;

letter-spacing: Espaciado entre letras.
normal | unidades CSS
Ej: letter-spacing: 0.5pc;

word-spacing: Espaciado entre palabras.
normal | unidades CSS
Ej: word-spacing: 0.5pc;

COLORES Y FONDOS

color: Color del texto.
Nombre Color | Valor HEX | Rgb (R%,g%,B%) | Rgb(R, G,B)
Ej: color: #009900; color: red;

background-color: Color de fondo de un elemento de la página.
transparent | Nombre Color | Valor HEX | Rgb (R%,g%,B%) | Rgb(R, G,B)
Ej: background-color: green; background-color: #000055;

background-image: Imagen de fondo en un elemento de la página.
none | url(dirección relativa o absoluta)
Ej: background-image: url(mármol.gif) ; background-image: url(http://www.x.com/fondo.gif)

background-repeat: Si la imagen de fondo se repetirá por todo el fondo del elemento, sólo horizontalmente, sólo verticalmente, o no se repetirá.
repeat | repeat-x | repeat-y | no-repeat
Ej: background-repeat: repeat-y;

background-attachment: Si la imagen debe desplazarse o permanecer fija con respecto a la ventana cuando el usuario baja hacia abajo.
scroll | fixed

background-position: Fija la posición de la imagen en el elemento por medio de coordenadas de longitud o porcentaje con respecto a la esquina superior izquierda, o palabras reservadas.
uds CSS | % | top | center | bottom | left | right
background-position: top center;

MARGENES Y PADDING

Margin: Tamaño de los márgenes.
unidades CSS | % | auto
margin-left: 1cm; margin-left: 0,5in; margin-right: 5%; margin-right: 1in; margin-top: 10px; margin-bottom: 0pt;

Con "auto" el navegador da un valor adecuado.
Podemos especificar todos los valores de los margenes de una sola vez:

margin: ancho1 ancho2 ancho3 ancho4;

Si sólo especificamos "ancho1" se refiere a los cuatro margenes. Si se especifican dos valores, "ancho1" se refiere al superior e inferior, y "ancho2" al izquierdo y derecho. Si ponemos los tres primeros, "ancho1" se refiere al superior, "ancho2" al izquierdo y derecho, y "ancho3" al inferior.

Padding: Distancia entre el borde superior y el contenido.
unidades CSS | %
padding-left: 0.5in; padding-left: 1px; padding-right: 0.5cm; padding-right: 1pt; padding-top: 10pt; padding-bottom: 0;

padding: valor1 valor2 valor3 valor4;

BORDES

Border-color: Color del borde de un elemento de la página. Se puede poner colores por separado con los atributos border-top-color, border-right-color, border-bottom-color, border-left-color.
nombre del color | valor HEX | Rgb (R%, G%, B%) | Rgb (R,G,B)
Ej: border-color: red; border-color: #ffccff;

Border-style: Estilo del borde. Los valores significan: none=ningun borde, dotted=punteado, dashed=discontinuo, solid=solido, double=doble borde, y los demás son efectos 3D.
none | dotted | dashed |solid | double | groove | ridge | inset | outset
Ej: border-style: solid; border-style: double;

border-width: Ancho del borde del elemento.
unidades CSS | thin | medium | thick
Ej: border-width: 10px; border-top-width: thin; border-width: thin thick medium

Podemos especificar el ancho de cada borde: border-top-width, border-bottom-width, border-left-width, border-right-width.

border: Especificar todas las propiedades de un borde: anchura, estilo y color. O de cada uno con: border-top, border-bottom, border-left, border-right.
Ej: border: 1px solid #000;

OTROS

float: Alinear un elemento a la izquierda o la derecha.
none | left | right
Ej: float: right;

clear: Si este elemento tiene a su altura otros elementos alineados a la derecha o la izquierda, con el atributo clear hacemos que se coloque en un lugar donde ya no tenga esos elementos a el lado que indiquemos.
none | right | left
Ej: clear: right;

Unidades de medida:

Medidas absolutas:
Pixels (px).
Pulgadas (in).
Centímetros (cm).
Milímetros (mm).
Puntos (pt). Para fuentes.
Picas (pc). Para fuentes.

Medidas relativas:
em. Para fuentes.
ex. Para fuentes.

Ref:
Desarrollo web
Programacion.com

Aplicaciones de las Hojas de Estilo en cascada

2004-11-25T16:18:00.000+01:00

En unas palabras

Para definir estilos en una parte pequeña de una página se utiliza la etiqueta <span>. Con el atributo style indicamos las características del estilo.

<p>

Esto es un párrafo con algunas palabras <span style="color:green">en color verde</span>.

</p>

Esto es un párrafo con algunas palabras en color verde.

En una parte de la página

Para hacer que toda una etiqueta muestre un estilo determinado, por ejemplo, un párrafo entero, utilizamos el atributo style.

<p style="color:#990000">

Esto es un párrafo de color rojo.

</p>

<p style="color:#000099">

Esto es un párrafo de color azul.

</p>

Esto es un párrafo de color rojo.

Esto es un párrafo de color azul.

Con la etiqueta <div> podemos definir estilos a todo un bloque de la página de una vez.

<div style="color:#000099; font-weight:bold">

<h3>Estas etiquetas van en <em>azul y negrita</em></h3>

<p>

Seguimos dentro del DIV, luego permanecen los etilos

</p>

</div>

Estas etiquetas van en azul y negrita

Seguimos dentro del DIV, luego permanecen los estilos

En toda una página

Para definir estilos que sean aplicados a toda la página, se utiliza la etiqueta style colocada en la cabecera de la página. Se coloca el nombre de la etiqueta de la que queremos definir los estilos, y entre llaves {} colocamos las características de estilos.



<html>

<head>

<title>Título de la página</title>

<style type="text/css">

h1 {text-decoration: underline; text-align:center}

p {font-Family:arial,verdana; color: white; background-color: black}

body {color:black;background-color: #cccccc; text-indent:1cm}

</style>

</head>



<body>

<h1>Título dentro de la página</h1>

<p>Párrafo de texto</p>

</body>

</html>

La etiqueta h1 se presentará subrayada y centrada.

En toda la página (etiqueta <body>) se aplicará color del texto negro, color del fondo grisaceo, margen lateral de 1 cm. Si aplicamos estilos a la etiqueta <body>, estos serán heredados por el resto de las etiquetas del documento, siempre que no se vuelvan a definir esos estilos en las siguientes etiquetas, en cuyo caso el estilo de la etiqueta será el que prevalezca.

En todo un sitio web

La programación con hojas de estilos permite, de una vez, definir los estilos de todo un sitio web, creando un archivo donde colocamos los estilos de la página y enlazando todas las páginas a ese archivo. Así, si cambiamos el archivo de estilos, cambiarán todas las páginas. También se ahorra en código HTML, reduciendo el peso del documento.

Proceso para incluir estilos con un fichero externo.

1- Creamos un fichero de estilos, en formato de texto, con la extensión .css.

2- Enlazamos la hoja de estilos en la página web, colocando la etiqueta:
<link rel="stylesheet" type="text/css" href="estilos.css">
Siendo estilos.css el nombre del archivo de estilos.

<html>
<head>
<link rel="stylesheet" type="text/css" href="estilos.css">
<title>Título de la página</title>
</head>

<body>
...
</body>
</html >

También podemos incluir estilos en un archivo externo con la sintaxis @import url("estilo.css").

Se debe incluir entre las etiquetas <style type="text/css"> y </style>, que se colocan en la cabecera del documento. La importación del archivo CSS se debe escribir en la primera línea de la declaración de estilos:

<style type="text/css">

@import url ("estilo.css");

body{

   background-color:#ffffcc;

}

</style>

Este método se utiliza cuando hay unas pautas básicas de estilos (que se definen en el archivo a importar) y unos estilos específicos para cada página (que se definen entre las etiquetas </style>).

Reglas de importancia en los estilos

Jerarquía para resolver conflictos entre declaraciones de estilos distintas para una misma porción de página (de menor a mayor importancia en caso de contradicción):

* Declaración de estilos con fichero externo.
* Declaración de estilos para toda la página. (etiqueta style en la cabecera de la página)
* Estilos definidos en una parte de la página. (etiqueta div)
* Definidos en una etiqueta en concreto. (etiquetas con atributo style)
* Declaración de estilo para una porción pequeña del documento. (etiqueta span)

Desarrollo web

Introducción al CSS

2004-11-21T14:40:00.000+01:00

CSS (Cascading Style Sheets - Hojas de Estilo en Cascada) es la tecnología desarrollada por el World Wide Web Consortium (W3C) con el fin de separar el contenido de la presentación en una página web.

Ventajas del CSS:
- Evitamos hacer a los archivos demasiado pesados.
- Definimos el estilo de un sitio entero sin necesidad de hacerlo etiqueta por etiqueta. Cualquier cambio hecho a un estilo CSS, se reflejará en todos los elementos que sean referidos a éste, automáticamente.

Con CSS podemos reemplazar las tablas enteramente, pero no es recomendable aún, hasta que los estándares se acepten totalmente en todos los navegadores. Se recomienda utilizar tablas, moderadamente, para la organización del "layout", y CSS para el resto.

Opciones de estilos CSS:
- Redefiniciones de etiquetas HTML: Se aplican de manera automática a un tipo de elementos.
- Estilos personales, o clases (class): Requieren de un atributo class que identifique al elemento. Si definimos una clase llamada ".especial", y la queremos aplicar a un elemento específico:

<span class="especial">Contenido aquí</span>

Formas de implementar estilos CSS:

- Incrustar las definiciones de estilo dentro del <head>, por medio de la etiqueta <style type="text/css">:

- Vincular el documento HTML a la hoja de estilos, por medio del siguiente código dentro del <head>:

<link rel=stylesheet type="text/css" href="url" title="titulo">

- Importarla con el siguiente código:

<style type="text/css">

<!--

@import url(url/nombre_de_documento.css);

-->

</style>

El cuerpo del documento CSS consiste entonces en los nombres de los estilos y sus reglas. La sintaxis es así:

SELECTOR { REGLA1: VALOR; REGLA2: VALOR; }

Los nombres de las clases deben ir precedidos de un punto (.), y las redefiniciones de HTML no.



body { 

(...)

} 



.comCuerpoCentr {

(...)

}

Reglas sintácticas de los estilos CSS:

- La sintaxis empieza con el nombre del estilo: (selector).
- El selector va seguido de un corchete de apertura "{".
- Después va la regla, seguida de dos puntos ":".
- Los valores van precedidos de un espacio en blanco, y seguidos de un punto y coma ";".
- Cuando hay varias reglas van separadas por puntos y comas y un espacio en blanco.
- La hilera de reglas acaban en un corchete de cierre "}".
- Se introduce un salto de línea para especificar el estilo siguiente.
- Se recomienda utilizar minúsculas para todo el texto.
- Se recomienda que todos los elementos vayan delimitados por un espacio en blanco.

Ejemplos de redefiniciones:

En <body> ponemos las reglas que herederarán todos los demás estilos, si no se especifica lo contrario para alguno de ellos.



body {

font-family: arial, helvetica, sans-serif; font-size: 12px; margin: 0px;

}

La serie "a" especifica los estilos de los enlaces.
a:link; los enlaces en general.
a:visited; los visitados
a:active; los activos (cuando le haces click)
a:hover; cuando pasamos el ratón sobre él



a:link {

color: #0000cc; font-weight: bold; text-decoration: none; 

}

a:visited {

color: #990099; font-weight: bold; text-decoration: none; 

}

a:active {

color: #ff9900; font-weight: bold; text-decoration: none; 

}

a:hover {

color: #3333ff; text-decoration: underline; 

}

Por defecto, los navegadores suelen mostrar los enlaces siempre subrayados. Al especificar text-decoration: none; los links se mostrarán sin subrayado, y con text-decoration: underline; con subrayado.

También podemos definir el estilo de cada enlace en la propia etiqueta <a>, con el atributo style, para hacer que determinados enlaces se vean distintos.

<a href="#" style="color:#ff0000">Mi enlace</a>

Enlaces
Especificaciones CSS nivel 1
Especificación CSS nivel 2

Ref:
Maestros del web

Flickr

2004-11-16T22:58:00.000+01:00

Flickr es un sistema gratuito para publicar, organizar y compartir fotografías, con muchos servicios añadidos.

Podemos añadir notas sobre secciones de la foto, que aparecerán al pasar el ratón por encima. Permite recibir comentarios de cada foto. Además, nosotros elegimos que una foto sea pública o no para todos o para un grupo de usuarios. Y tenemos la opción de aplicar a nuestras fotos las licencias Creative Commons.

Opciones para subir las imágenes: en la misma página, por correo electrónico, o desde tu propio ordenador mediante las herramientas que te proporciona. En la versión gratuíta te permite subir hasta 10 Mb/mes, y en la de pago llega hasta 1GB/mes.

Una vez subidas, podemos ver las fotos de una en una manualmente o con una presentación automática en flash. También ofrece una vista en calendario, para ver las fotos que has subido cada día. Te permite crear una dirección fácil para tus fotos.

Tiene una sencilla herramienta en flash (Organizr) que permite ordenar fácilmente tus fotos en carpetas personales o albums. Además, puedes crear una coleccion de fotos favoritas (tanto de tus fotos como de las de otros usuarios).

A cada fotografía le podemos añadir unas etiquetas (tags) para facilitar su búsqueda. Esto permite crear feeds sobre un tema determinado (por ejemplo, Egipto, con las fotos que tengan la misma etiqueta, entre todos los usuarios.

Funciona como las redes sociales, pudiendo invitar a nuevos usuarios, organizar nuestros contactos por categorías, crear grupos o comunidades, mandar mensajes, etc...

Cada grupo, etiqueta y página personal cuenta con su respectiva sindicación en varios formatos (RSS, RDF, Atom), para seguir las novedades de tus temas, usuarios o grupos favoritos.

Podemos colocar una muestra aleatoria de las fotos subidas a Flickr en nuestra web (por ejemplo, tus últimas fotos en la barra lateral de tu blog). También te ayuda a configurar un fotoblog en tu hosting. Incluso podemos postear una imagen a nuestro blog, directamente desde flickr (compatible con blogger, wordpress, movable type, typedad, etc...).

En el Blog Flickr te muestran las últimas novedades.

Ref:
Estamosdeacuerdo.net
Atalaya
Finis Coronat Opus
Distrito Internautas
Ratzo.net
micrographic
Vida Vacía
b3co.com
pjorge.com

Firefox

2004-11-15T19:00:00.000+01:00

Firefox es un navegador que pretende ser la alternativa gratuita a Internet Explorer.

Ventajas de Firefox:

- Es gratuito.

- Es muy rápido al cargar páginas.

- Es muy seguro. Reduce el riesgo de virus y spyware.

- Bloquea las ventanas pop-up.

- Sistema de pestañas para tener abiertas varias páginas a la vez en una sola ventana, en vez de tener que abrir una ventana por cada página.

- Permite instalar extensiones que aumentan las posibilidades del navegador, sólo las que el usuario desee.

- Función de agregador de feeds con el que se puede acceder a las últimas entradas de las páginas sindicadas desde el menú de favoritos.

Descargas en castellano para Windows desde:
Mozilla, Hispalinux, Error500.

Enlaces:
Página oficial de Firefox
Página oficial europea en castellano
Difunde Firefox
Página de inicio de Google y Firefox
Extensiones para Firefox en Moonshadow

Ref:
google.dirson.com
minid.net
ALT1040
Error 500

Plantillas - Templates para Blogger

2004-11-11T23:37:00.000+01:00

Bitacoras.com
Blog Templates Brasil
Point of Focus
Blog Templates
BlogSkins
Blogger Templates
Templates 4 free
Comunidade Blogueira

Blogger Help: Templates

iFavoritos

2004-11-11T13:06:00.000+01:00

iFavoritos es un gestor de favoritos online. Es la alternativa en castellano a del.icio.us.

Te registras y ya puedes empezar a almacenar tus páginas favoritas, teniéndolas disponibles desde cualquier ordenador. Para organizar las direcciones web, se les puede añadir palabras clave, que funcionan como categorías.

Todas las cuentas son visibles para todos los usuarios, por lo que se puede navegar por el listado global delimitando las claves-categorías o con la opción de búsqueda de palabras en los títulos.

Las cuentas individuales se pueden consultar mediante feeds RSS. Incluso te permite el seguimiento por RSS del listado global filtrado por palabras clave.

Ayuda para iFavoritos

Ref:
Abraldes.net

WordPress

2004-11-10T13:14:00.000+01:00

Descripción de WordPress

WordPress es un sistema de gestión de contenidos utilizado para publicar weblogs. Está escrito en código abierto y es gratuíto.

En OpensourceCMS puedes simular su funcionamiento.

Ofrece muchas posibilidades: más que Blogger y tantas como Movable Type.

Alojamiento de un blog con WP

Blogthing.com: Ofrece WordPress preinstalado. Es fácil de usar. Puedes editar los estilos CSS para personalizar la apariencia del blog. Inconvenientes: publicidad de google, no se pueden hacer copias de seguridad, ni añadir plugins a WP, ni editar todas las páginas.

Servidores gratuitos: tripod, iespana y miarroba.com. Deben tener soporte para PHP y MySQL. Inconvenientes: lentos, inestables y mucha publicidad. Mucho mejor es el servicio de bitacoras.com, pero la entrada está muy restringida.

Servidores de pago: phi-hosting, mibitacora.com, etc.

Instalación

Descarga de la última versión de WP y seguir las instrucciones de instalación.
Tutorial en castellano.

Importación de los posts de tu antiguo blog

Movable Type: http://miblog.com/wp-admin/import-mt.php
Blogger: http://miblog.com/wp-admin/import-blogger.php

Ayudas para WordPress

Plantillas: Alexking.org, Kubrick.
Traducción de WP al castellano.
Instalar plugins para WP: para hacer fotologs, para llevar un registro de los comentarios, etc.
Weblog sobre WP en bitacoras.com
Foro de WP en bitácoras.com
Documentación en el sitio oficial de WP

Bitacoras con sección WP
Mangas Verdes
minid.net
FrancoG
Bicubic
micrographic

Ref:
Micrographic.net

Posicionamiento web en Google

2004-11-09T21:29:00.000+01:00

¿Cómo aparecer en las primeras posiciones de las búsquedas de Google?

BUENOS CONTENIDOS

Si los contenidos de tu página merecen la pena vas a conseguir más enlaces de otros sitios web, y tener muchos enlaces es fundamental para tener un buen posicionamiento en Google.

Además, si renuevas los contenidos frecuentemente, consigues que Google pase más a menudo por tu sitio web.

Las palabras claves (keywords) son por las que quieres aparecer en los primeros resultados de Google cuando se buscan. Debes destinar 2 o 3 palabras claves por página.

Herramientas que sugieren palabras clave:
Generador de palabras clave - Espotting Media
Overture - Keyword Selector Tool

Conviene revisar las clasificaciones de palabras más buscadas:
Google
Yahoo
Ask Jeeves
Lycos

DONDE SITUAR LAS PALABRAS CLAVES

TITLE: Es el lugar más importante. En el título de la página web deben aparecer las palabras claves deseadas.

ALT: La etiqueta ALT que está dentro de las etiquetas de imágenes, Google la tiene en cuenta, sobre todo si la imagen es un enlace a otra página web.

META TAGS: Google NO tiene en cuenta los contenidos de META NAME="keywords" y META NAME="description". Aunque es recomendable utilizarlos, ya que algunos buscadores siguen usándolos.

URL: Google valora que la URL contenga las palabras claves, aunque no le da demasiado peso. En las URLs intenta separar los nombre con guiones 'normales' ("-"), y no con un guión 'bajo' ("_").

En el resto de tu página web, intenta situar varias veces las palabras clave que intentas optimizar.

Google estima que determinadas etiquetas reflejan mayor importancia del texto. Por ejemplo, al situar un texto entre las etiquetas <H1> o <strong>, Google las tendrá más en cuenta.

Hay herramientas que obtienen la densidad de palabras claves de tu sitio web: busca keyword density analyzer.

Intenta que las palabras claves aparezcan en los links que apuntan hacia tus páginas web.

Repasa las palabras claves con que los usuarios llegan a tu web mediante los buscadores (la mayoría de los sistemas de estadísticas ofrecen esta función).

Si tu dominio recoge palabras clave, también usarán dichas palabras cuando te enlacen.

XHTML-CSS

Utilizar XHTML y CSS te puede ayudar a mejorar tu posicionamiento web en Google:
- El código de tus páginas web será más claro para el robot de Google.
- Aumentarás la densidad de las palabras clave dentro de los contenidos, ya que usarás muchas menos etiquetas.
- Menor peso para tus páginas web.
- Podrás cambiar rápidamente los estilos de ciertas palabras, modificando su importancia.

SENCILLEZ

Realizar páginas web con un diseño claro y sencillo es muy importante.

El robot de Google solo rastrea el texto de tus páginas web y los enlaces que existan. No reconoce la información insertada en JavaScript, DHTML, Flash, Frames.
Es más, cuantos más elementos superflúos insertes, menor densidad de palabras claves vas a conseguir.

Google ve tu página web, como se ve en el navegador Lynx: en modo texto, sin imágenes ni JavaScript, Flash, etc... Si usas Windows o MAC, puedes acceder a un emulador de Lynx (Lynx Viewer) para conocer cómo ve Google tu página.

La caché de Google solamente almacena hasta un límite de 101 kb (solo de texto HTML, no tiene en cuenta imágenes, Flash, etc.).

ALTA EN GOOGLE

El método oficial:
http://www.google.com/intl/es/addurl.html

Pero Google no asegura en cuánto tiempo aparecerá en Google, ni tan siquiera se garantiza que aparezca.

El método más eficaz es consiguiendo enlaces. Si consigues un enlace en un sitio web que sí aparece en Google, en el plazo de unos días tu sitio web será dado de alta en Google.

El robot de Google rastrea periódicamente las páginas web de su Base de Datos, y sigue los enlaces que aparecen en estas páginas.

No utilices los sistemas automáticos que prometen dar de alta tu sitio web en cientos de buscadores. Es mejor que lo hagas personalmente, porque muchos buscadores detectan envíos automáticos, y desestiman las páginas web enviadas por estos métodos.

CONSEGUIR ENLACES

Conseguir enlaces a tu página es vital para el posicionamiento web en Google.

Google otorga un valor numérico (PageRank) a cada página web de su Base de Datos. Cuanto mayor sea el PageRank, mayor importancia para Google. El valor depende de los sitios web que enlacen a tu página. Y si los sitios web que te enlazan tienen un PageRank elevado, el valor crecerá más. Se tienen en cuentra tanto los enlaces internos como los externos.Este valor varía entre 0 y 10.

Para conocer el PageRank de una página:
- Instalar la barra Google Toolbar (sólo para Explorer), que muestra el PageRank de cada página que visitas.
- Si usas Firefox, hay una extensión específica para el Google Pagerank.
- Simplemente, visitar The Google PageRank Value Report.

Se debe intentar que nos enlacen mediante las palabras claves en las que pretendemos posicionarnos. Así, Google te premiará cuando el usuario las busque.

Lo ideal es intentar conseguir enlaces de páginas web de temática parecida a la tuya y con un valor de PageRank elevado.

También debes intentar que te enlacen los principales directorios: DMOZ, Yahoo.

Google toma DMOZ como referencia para construir su propio directorio.

Revisa los enlaces rotos que pueda haber en tu página web. Se sospecha que Google penaliza a las páginas web con excesivos enlaces rotos.

PENALIZACIONES

Google no permite que los webmasters intenten situar algunas páginas en las primeras posiciones de los resultados mediante prácticas fraudulentas. Puede penalizar estas páginas web: borrarlos de sus resultados, disminuir su PageRank, etc.

En algunas búsquedas en las que se cometen bastantes abusos, Google incluye un formulario para que el usuario comente los resultados que no le satisfacen. También dispone de un espacio para informar sobre casos de 'spam', en el que cualquiera puede avisar a Google de usos abusivos.

Comportamientos que conllevan penalizaciones:

Cloaking: Programar una página web para devolver contenidos distintos cuando pasa el robot de Google (muestra muchas palabras clave) que cuando un usuario normal la visita (ya que la otra le resultaría ilegible).

Páginas doorway: Se diseña una página optimizada para los buscadores, repitiendo las palabras claves en el TITLE, en los H1, etc. Cuando llega el visitante, se le redirige a otra página diseñada para los visitantes.

Texto oculto: Se insertan multitud de palabras claves o enlaces del mismo color que el fondo de la web. Así, aumenta la densidad de las palabras claves, manteniendo el aspecto de la página.

Páginas duplicadas: Se genera el mismo contenido en dos o más páginas web, desde las que enlazar a la que realmente se quiere promocionar.

Spam: Usar los comentarios en blogs y los libros de visitas para posicionarse. Insertan como nombre las palabras clave, y como enlace el de la página web que quieren promocionar.

Abuso de palabras clave: Situar palabras clave en un montón de elementos de una página web.

AYUDA

Foro de Google

Ref: google.dirson.com

Programas gratuitos Antiparásitos y Antivirus

2004-11-09T17:15:00.000+01:00

Los programas espías, o Spyware envían información sobre la navegación, sitios visitados, etc. Se cuelan en el PC simplemente por darle a un enlace o porque van incrustados en alguna aplicación gratuita.

El Spyware se divide en:

Secuestradores, que modifican la página de inicio del navegador o lo redirigen a donde quieren
Cookies maliciosas, que roban datos introducidos en formularios, como la dirección de correo
Dataminer, que espían la navegación del internauta
Adware, que muestran anuncios
Dialers, que desconectan al usuario y llaman a teléfonos de alta tarificación.

Antiparásitos gratuitos más populares:

Antivirus gratuitos:

Cortafuegos:

Zone Alarm

Ref:
Bicubic: Spyware y Virus.

Consejos HTML

2004-11-09T11:00:00.000+01:00

Tipo de documento

La primera línea de la página debe ser el DOCTYPE. Es obligatoria. Es para decirle al navegador qué versión de HTML es la que usas en la página.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Estructura básica de una web

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Título</title>

</head>

<body>

Contenido

</body>

</html>

Título

El elemento title es lo más importante de una web, porque lo usan los buscadores para indexar la página.

Etiquetas

Deben ir en minúsculas y cerrarse.

Juego de caracteres (charset)

Tu servidor normalmente mandará el tipo MIME del documento (text/html) y la codificación (ISO-8859-1 para el español). Pero, por si acaso puedes especificarlo con esta etiqueta (dentro del <head>):

<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">

Formato

<span>: Para dar formato a unas cuantas palabras, sin romper el flujo del texto.
<div>: Para dar formato a unos cuantos elementos juntos, rompiendo el flujo de texto (que se le dedique una línea nueva y toda la anchura de la página).

Márgenes

Para hacer que la primera línea de cada párrafo quede un poco más a la derecha, se debe usar párrafos y aplicarles la siguiente hoja de estilos:

p {text-indent: 20px}

Con esto, todos los párrafos tendrán la primera línea 20 píxels a la derecha del margen.

Centrados

Para centrar el contenido de dentro de un elemento, basta con el estilo text-align:center;.

<div style="border:1px solid black; width:70%; text-align:center">Este texto está centrado.</div>

Este texto está centrado.

Para centrar el propio elemento, y no su contenido, tienes que darle una anchura (width), y decir que el navegador se ocupe de los márgenes. Se hace con margin-left:auto; margin-right:auto;, o, abreviado: margin: 0 auto;.

<div style="border:1px solid black; width:70%; margin: 0 auto;">Centrado el div</div>

Centrado el div

Enfasis

La etiqueta <em> sirve para marcar las palabras a las que quieres dar énfasis, y <strong> para dar un énfasis mayor. Normalmente los navegadores las representan en cursiva y en negrita, respectivamente, pero puedes cambiarlo con CSS.

Para especificar un estilo concreto:
font-weight:bold para negrita
font-style:italic para cursiva
text-decoration:underline para subrayado
text-decoration:overline para una línea por encima
text-decoration:line-through para tachado.

Listas

Usando CSS para las listas (<ul> y <ol>) se pueden hacer menús de navegación, botones, pestañas, tablas, etc.

En Listamatic tienes muchas posibilidades de listas.

Identificar elementos

Para aplicar un estilo a varios elementos a la vez, inventamos un nombre (clase) para ellos, con el atributo class, y cambiamos el estilo a todos los de la clase a la vez con el CSS.

Por ejemplo, en los <div> de ayuda pondremos <div class="ayuda">.

Y aplicamos CSS:
div.ayuda {border:2px solid black; background:yellow;}

Cuando quieres dar estilo a un único elemento, se le da un identificador con el atributo id; por ejemplo <div id="titulo">.

Y en la hoja de estilos:

div#titulo {border:12px solid blue; background:gray; color:black;}

Si todos los párrafos que hay dentro de un <div> son especiales, en vez escribir <p class="especial"> para cada párrafo, define la regla CSS como div p { ........... }, que quiere decir todos los <p> que estén dentro de un <div>), y pon sólo <p> en cada párrafo.

Tamaño del texto

Para cambiar el tamaño del texto, usa el CSS font-size, no las cabeceras <h1>, <h2>,...

Ref:
Cómo hacer buenas páginas web

Qué son las licencias Creative Commons

2004-11-09T10:07:00.000+01:00

Sé creativo
(Presentación Flash)

Creative Commons

Ref:
Noticias Bitacoras.com

CSS y HTML

2004-11-08T22:31:00.000+01:00

Para qué sirve el CSS

El HTML sirve para estructurar el texto en secciones, párrafos, enlaces, cabeceras, citas, imágenes, etc.

Con el CSS le aplicamos un estilo: las cabeceras van en rojo y subrayadas, las imágenes tienen 2 cm. de margen y un borde de 1 píxel, el interlineado es de 1'5, y la primera fila de cada tabla tiene el fondo azul.

El CSS sirve para aplicar un estilo a todos los elementos del mismo tipo a la vez.

Cómo puede combinarse con el HTML

Lo normal es escribir el código CSS en un fichero externo, de extensión css, y luego incluir en el <head> de cada página el código:

<link rel="stylesheet" href="archivo.css" type="text/css">

Esto permite usar el mismo estilo para varias páginas HTML distintas. Además, así te llevas el diseño a otro archivo, de forma que los navegadores que no soportan hojas de estilo, no tendrán que cargar código innecesario.

Si prefieres dejar el código CSS en la misma página (sin usar archivos externos), se hace desde dentro del <head> con la etiqueta <style>:

<style type="text/css">

/* Aquí va el código CSS */

</style>

También se puede definir un estilo para un solo elemento, escribiendo el código dentro de su atributo style, aunque no es recomendable porque complica el código.

Formas de aprender CSS

Mirar el código fuente de las páginas que te gusten.

Consultar la especificación CSS del W3C.

Sitios donde aprender CSS:
minid - CSS
Toad - XHTML y CSS
CSS Zen Garden
Camaleón CSS

Cómo hacer buenas páginas web

Etiquetas básicas en XHTML

2004-10-31T19:20:00.000+01:00

El W3C es el creador de la especificación XHTML.

Mostramos las etiquetas o tags más elementales, que se introducen dentro del cuerpo del documento (entre <body> y </body>).

TITULOS

Son encabezados que describen brevemente el tema de la sección que introducen. Hay seis niveles de encabezados en XHTML, siendo <h1> el más importante y <h6> el menos importante.

Ejemplo:

<h3>Encabezado h3</h3>

Resultado:

Encabezado h3

BLOQUES

La presentación del documento ignora los espacios y tabulaciones del texto fuente. Por eso se utilizan una serie de etiquetas que sustituyen a estos elementos:

<p>
Sirve para representar párrafos. No puede contener elementos en bloque.

<p>El hipertexto es la escritura multimedia, que integra texto con imágenes, videos, animaciones y sonidos.</p><p>Además, posibilita el desplazamiento hacia otros documentos a través de los hiperenlaces.</p>

El hipertexto es la escritura multimedia, que integra texto con imágenes, videos, animaciones y sonidos.

Además, posibilita el desplazamiento hacia otros documentos a través de los hiperenlaces.

La diferencia entre ambas es que la separación de líneas que provoca <p> es algo mayor que la de <br>.

<pre>
Sirve para indicar que el texto está "preformateado", por lo que los navegadores respetarán los espacios en blanco y los "intros". Mostrará un tipo de letra más pequeña que la del texto normal.

<pre>My my, hey hey

Rock and roll is here to stay</pre>

My my, hey hey

Rock and roll is here to stay

<blockquote>
Sirve para designar citas de otras fuentes. Se suele representar con tabulaciones a izquierda y derecha.

<blockquote>My my, hey hey

Rock and roll is here to stay</blockquote>

My my, hey hey
Rock and roll is here to stay

<hr />
Sirve para representar una línea separadora horizontal. Tiene seis tamaños diferentes: <hr size=1>, <hr size=2>, <hr size=3>, etc.

My my, hey hey<hr />Rock and roll is here to stay

My my, hey hey

Rock and roll is here to stay

MARCADO DE FRASES

<em>
Sirve para dar énfasis. El navegador representará el texto en cursiva, si no se indica lo contrario.

Rock and roll is here to <em>stay</em>
Rock and roll is here to stay

<strong>
Sirve para dar un enfasis mayor. El navegador representará el texto con negrita, si no se indica lo contrario.

Rock and roll is here to <strong>stay</strong>
Rock and roll is here to stay

<tt>
Representa como texto de teletipo o ancho fijo, similar al de una máquina de escribir.

El hipertexto es la <tt>escritura multimedia</tt>.
El hipertexto es la escritura multimedia.

<acronym>
Sirve para identificar un acrónimo.
<acronym title="HyperText Markup Language">HTML</acronym>
HTML

<code>
Sirve para designar un fragmento de código de ordenador.

Un enlace se crea escribiendo <code><a href="..."></code>.

Un enlace se crea escribiendo <a href="...">.

<del>
Sirve para marcar secciones del documento que han sido borradas con respecto a otra versión del documento.

Rock and roll is here to <del title="No seamos derrotistas"> stay</del>

Rock and roll is here to ~~die~~ stay

Caracteres especiales: Existen unos caracteres especiales del lenguaje HTML que se refieren a las vocales acentuadas, la letra "ñ", y al uso de símbolos que significan algo en HTML, como el de menor que (<) o el signo inglés de "and" (&).

* < (Menor que): <
* > (Mayor que): &gt;
* & (símbolo de and): &
* " (comillas dobles): &quot;
* á: á
* é: é
* í: í
* ó: ó
* ú: ú
* ü: ü
*ñ: ñ
*¿: ¿

LISTAS

Listas sin orden:

<ul>

<li title="Blogia">Blogia</li>

<li>Blogger</li>

<li>Blogthing</li>

</ul>

Blogia

Blogger

Blogthing

Listas ordenadas:

<ol>

<li title="Blogia">Blogia</li>

<li>Blogger</li>

<li>Blogthing</li>

</ol>

Blogia

Blogger

Blogthing

Listas de definiciones:
Consiste en un término (dt) y su definición (dd).

<dt>Término:</dt>

<dd>Definición del término.</dd>

</dl>

Término:

Definición del término.

Comentarios:
Son aclaraciones que no aparecen en la presentación final del documento. Se encierran entre los símbolos 

ENLACES

Enlace a otra página

<a href="http://www.blogpocket.com/">Visita blogpocket.com</a>
Visita blogpocket.com

Enlace dentro de la misma página

<a href="#ejemplomarcador">Ejemplo del enlace en una página o marcador </a>

Y en el sitio a donde se quiere saltar, se debe poner:
<a name="ejemplomarcador">Enlace dentro de una página</a>

IMAGENES
Para incluir una imagen en el documento:

<img src="http://www.bloglines.com/images/sub_modern1.gif" alt="Bloglines" title="Icono de Bloglines">

Las imágenes pueden estar en el propio servidor, o en uno ajeno.

alt="texto" sirve para proponer un texto alternativo a una imagen. Este texto aparecerá cuando se esté usando un programa sin capacidades gráficas (Lynx). Conviene utilizarlo cuando las imágenes sirven como enlaces.

Una imagen que enlaza:

<a href="http://www.bloglines.com"><img src="http://www.bloglines.com/images/sub_modern1.gif" alt="Bloglines" title="Icono de Bloglines"></a>

MARCOS
Sirve para insertar un marco dentro de un bloque de texto. Permite insertar un documento HTML en medio de otro.

<iframe src="http://www.bloglines.com/blog/Juglar" width="350" height="350" scrolling="auto" frameborder="1">

[Su agente de usuario no soporta marcos o está actualmente configurado para no mostrar marcos. Sin embargo, puede visitar

<a href="http://www.bloglines.com/blog/Juglar">el documento relacionado.</a>]

</iframe>

[Su agente de usuario no soporta marcos o está actualmente configurado para no mostrar marcos. Sin embargo, puede visitar
el documento relacionado.]

Ref:
Plantilla de XHTML Maestra
mailxmail.com

Introducción al HTML

2004-10-31T11:04:00.000+01:00

QUE ES HTML

HTML es el lenguaje que permite describir hipertexto, es decir, texto estructurado, con enlaces a otros documentos relacionados, y con multimedia (imágenes, sonido...). Es el lenguaje que se utiliza para presentar información en Internet.

La descripción se basa en especificar en el texto la estructura del contenido (títulos, párrafos de texto normal, enumeraciones, etc.), y los efectos que se quieren dar (cursiva, negrita, etc.).

HTML: HyperText Markup Language: Es un conjunto de estilos (indicados por etiquetas o tags) que definen los componentes de un documento web.

Para crear documentos HTML sólo necesitamos un procesador de texto. Los documentos HTML están en formato de texto sencillo (también conocido como ASCII). El procesador de texto se utiliza para escribir el documento en lenguaje HTML, que será posteriormente interpretado por el navegador (siempre que el documento esté guardado en formato: "sólo texto").

El texto tiene dos partes, el contenido de la información y el conjunto de etiquetas del lenguaje HTML, que permiten determinar el estilo de la presentación final y que pueda ser leído por un programa cliente.

METODO DE TRABAJO

Con el procesador de textos se crea un fichero con extensión html.

Existen programas que automatizan este proceso (editores de lenguaje HTML), pero es conveniente comenzar a hacerlo de manera manual para comprender el lenguaje HTML.

Un navegador del WWW (o programa cliente) permite el acceso a páginas WWW de Internet. El programa cliente permite ver una página antes de introducirla en un servidor. Así, comprobamos que las modificaciones que hacemos en la página son correctas.

El lenguaje HTML usa etiquetas (tags) para indicarle al navegador cómo mostrar el texto. Las etiquetas están formadas por caracteres metidos entre los signos <> y </>. Ejemplo: <title> para abrir y </title> para cerrar.

ESTRUCTURA DE UN DOCUMENTO HTML

Un documento HTML comienza con la etiqueta <html>, y termina con </html>.

Hay dos zonas en un documento HTML:

Encabezamiento, delimitado por <head> y </head>, que define diversos valores para todo el documento.
Cuerpo, delimitado por <body> y </body>, donde reside la información del documento.

La estructura básica quedaría así:

<html>
<head>
<title>Título del documento</title>
</head>
<body>
Texto del documento
</body>
</html>

El elemento title especifica el título de un documento HTML. Este título no aparece en el documento, sino que sirve como título de la ventana del programa que la muestra.

mailxmail.com

HTML: El Hipertexto

2004-10-31T10:08:00.000+01:00

QUE ES HTML

El hipertexto es la escritura multimedia, que integra texto con imágenes, videos, animaciones y sonidos. Además, posibilita el desplazamiento hacia otros documentos a través de los hiperenlaces.

Todas las páginas web de Internet están basadas en el lenguaje HTML (Hypertext Markup Language). Cada documento en HTML contiene texto formateado con indicaciones sobre su apariencia (fuente, tamaño, color...) y su disposición (párrafos, listas...)

EL LENGUAJE HTML

El HTML trabaja con etiquetas. Ejemplo: para resaltar un texto en negrita utilizaríamos la etiqueta <b> y su negación </b>, delimitando el texto que queremos que aparezca en negrita.

Cada navegador tiene sus propias etiquetas, por lo que un documento HTML puede verse de distinta manera en navegadores diferentes. El tamaño de los documentos HTML es importante, ya que los demasiado grandes tardan en cargarse.

El XML (Extended Markup Language o lenguaje de Mercado Extendido) suple algunas de las limitaciones del HTML. El XML identifica si un párrafo de texto es una descripción de un libro, el nombre de un autor o un precio. Esta información estructurada permite a diferentes programas buscar aquello que le interesa. Los documentos se convierten en pequeñas bases de datos.

COMPONENTES DEL LENGUAJE HTML

Objetos que pueden estar presentes en una web:
-Imágenes: formatos .gif .jpeg .png
-Vídeos: formatos .avi .mov
-Animaciones: gif animados, archivos flash o swish (swf)
-Bases de datos
-Texto
-Sonidos: wav, midi, mp3

mailxmail

Qué es un blog

2004-10-30T17:02:00.000+02:00

- Un blog, weblog o bitácora es una página web cuyo contenido tiene estructura cronológica, como un diario, y que suele actualizarse con bastante frecuencia. En un Blog se puede escribir sobre cualquier tema. Se pueden tratar temas personales, tecnológicos, políticos, culturales...

- Los blogs son páginas web que suelen estar constituidas por piezas cortas, informales, que se actualizan frecuentemente y que se colocan cronológicamente. Las Blogs facilitan la comunicación entre internautas, de una manera más simple y fácil que los tradicionales emails y los foros de discusión. Un blog es un sitio web fácil de usar en el que puede expresar rápidamente sus opiniones e interactuar con otros usuarios.

- Definición en la Wikipedia.

Ref:
mailxmail
El Blog de Enrique Dans

Cómo crear una bitácora con Blogger

2004-10-24T01:29:00.000+02:00

Ver también "Cómo crear una bitácora con Blogia" en Blog d'una profe (pdf) y en Boulesis.com (pps).

Con Blogger podemos disponer de nuestra propia bitácora en unos minutos y sin tener conocimientos informáticos. Se gestiona directamente desde su página web, de forma muy sencilla.

DARSE DE ALTA

Entrar en http://www.blogger.com/

Pulsar sobre el botón naranja: Create Your Blog Now.

"Choose a user name": Nombre de usuario con el que te identificarás en Blogger.

"Enter a password" y "Retype password": Contraseña de acceso.

"Display name": Nombre que aparecerá en la firma de los artículos de tu Blog.

Poner tu e-mail, hacer clic sobre el recuadro de "Acceptance of Terms", y pulsar el botón "Continue".

NOMBRE Y DIRECCION

"Blog Title": Nombre del Blog.

"Blog address(URL)" Dirección por la que los lectores accederán al blog.

Pulsa en "Continue".

ESTILO

Escoger uno de los estilos pulsando al lado del nombre. Puedes ver una muestra pulsando sobre View en cada estilo.

Pulsa en "Continue" y nuestro Blog estará creado.

Pulsar en "Start posting".

OPCIONES BASICAS

Entrar en la carpeta "Settings" y la opción "Basic".

"Title": Título del Weblog.

"Description": Descripción que aparecerá debajo del título, la cual debe resumir el contenido del blog.

Add your Blog to our listings?: Marcar Yes si queremos que al publicar una nota en nuestro Blog aparezca en la página de últimas actualizaciones de Blogger.

Show Quick Editing on your Blog?: Marcar Yes si queremos poder modificar los posts de nuestro blog mientras lo estamos leyendo.

Show Email Post links?: Marcar Yes si queremos que nuestro lectores puedan mandar un post de tu blog por email mientras lo están leyendo.

Show Compose Mode for all your blogs?: Marcar Yes si al redactar un post queremos tener la opción Compose, además de editar en HTML.

Para cualquier cambio que realicemos debemos:
- Guardar los cambios pulsando: "Save Settings"
- Publicar los cambios pulsando: "Republish".

OPCIONES DE TIEMPO

Settings - Formatting.

Show: Cuántos días o posts queremos que aparezcan en nuestra página principal. Los anteriores se almacenarán en las notas archivadas por meses.

Date Header Format: Formato de la fecha que aparecerá al comienzo de la serie de posts escritos en el mismo día.

Archive Index Date Format: Formato de los textos archivados.

Timestamp Format: Formato de fecha y hora que aparecerá al final de cada post.

Time Zone: Zona horaria.

Date Language: Nuestro lenguaje.

Encoding: Alfabetos disponibles.

Convert line breaks: Marcar Yes si queremos que los "Intros" que hagamos al editar nuestras notas aparezcan como saltos de párrafo.

Show Title Field: Que los posts tengan título.

Show Link Field: Que los títulos de los posts sean un enlace.

Post Template: Preformato para todos los posts.

COMENTARIOS

Settings - Comments

"Show": Permitir comentarios. "Hide": Ocultar los comentarios.

Who Can Comment?: A quién permitimos que comente:
- Only registered users: solo usuarios de Blogger.
- Anyone: cualquier usuario.
- Only members of this blog: solo usuarios de nuestro Blog.

Comments notification address: Para recibir una notificación por mail cuando recibamos un comentario.

ARCHIVOS

"Settings" - "Archiving": Indicar cómo queremos que queden clasificados nuestros posts antiguos: "Archive Frequency": por días, semanas, meses.

Enable Post Pages?: Que los archivos antiguos aparezcan en una nueva ventana.

MIEMBROS

"Settings" - "Members": Vemos todos los usuarios de nuestro Blog. Si deseamos añadir un usuario pulsaremos: "Add team member(s)" y añadiremos los mails de las personas que deseamos formen parte de nuestro Blog.

DISEÑO

"Template" - "Edit current": Podemos modificar el formato o plantilla del blog: colores, enlaces fijos, formatos de letra, inserción de fondos... Se precisan conocimientos previos de HTML.

Es recomendable que antes de grabar los cambios realices una vista previa, pulsando en "Preview".

"Template" - "Pick new": Si queremos cambiar el estilo de nuestro blog. Los cambios que hayamos hecho manualmente en el template original se borrarán, sólo permanecerán los posts.

ESCRIBIR UN POST

"Posting" - "Create": Para publicar un nuevo post.

"Title": Título del post.

"Post": Texto del post. Podemos utilizar instrucciones de HTML.

Podemos poner negrita y cursiva, seleccionando las palabras a cambiar y pulsando los botones "b" y "i", respectivamente.

"Insert link": Para poner un enlace.

"Preview": Vista previa del post.

"Save as draft": Guardar el post sin publicarlo.

"Publish post": Publicar el post.

EDITAR UN POST

"Posting" - "Edit posts": Para ver todas las notas publicadas.

Sobre estas notas podremos hacer lo siguiente:
- "Edit": Modificar.
- "View": Ver el post.
- "Delete": Borrar el post.

mailxmail

Difunde Firefox

2004-10-23T19:40:00.000+02:00

Otra forma de postear

2004-10-22T21:19:00.000+02:00

JustBlogIt te permite postear directamente desde Mozilla o Firefox. Sirve para varios sistemas de publicación y realiza una captura inteligente del contenido en algunos agregadores de noticias.

Funciona con Blogger, Drupal, LiveJournal, Movable Type, Radio Userland, TextPattern, TypePad y WordPress, así como en los agregadores Bloglines, Rojo, Radio Userland y Amphetadesk.

Funcionamiento: estás en una página que te interesa, seleccionas el texto que quieras (o no seleccionas nada), pulsas el botón derecho de tu ratón, eliges la opción JustBlogIt! del menú desplegable y te muestra directamente un post redactado en tu CMS, listo para publicar. En el caso de los agregadores, el programa selecciona directamente la información relevante del blog más cercano aunque no hayas seleccionado texto alguno.

Mangas Verdes

Comandos de búsqueda: Google vs Yahoo

2004-10-12T21:19:00.000+02:00

Comandos Google:

" " : Para buscar cadenas exactas.
"estudio 103"

+ : Condición de que estén todas las palabras buscadas en los resultados.
estudio +103

- : Condición de que los resultados no posean el término restado.
estudio +103 -bitacoras

OR : Muestra resultados con algún término de los buscados.
estudio 103 OR 102 OR 101 OR 100

n°..n°: Búsquedas por rango de números.
1980..1990 bitacoras

link: Muestra los enlaces apuntan a una página.
link:estudio103.blogspot.com

allinurl: Muestra las páginas que tienen las palabras buscadas en su url.
allinurl:bitacoras
Sirve también para conocer todas las páginas indexadas de un dominio.
allinurl:estudio103.blogspot.com

allintitle: Muestra las páginas que tengan todas las palabras buscadas en su título.
allintitle:estudio 103

allintext: Muestra las páginas que tengan todas las palabras buscadas en su texto.
allintext:estudio 103

allinanchor: Páginas que tengan en el texto que las enlazan las palabras buscadas.
allinanchor:estudio 103

site: Búsqueda dentro de un dominio.
site:www.bitacoras.com +estudio

info: Nos muestra información sobre la página principal de un dominio.
info:estudio103.blogspot.com

inurl: Para buscar páginas en cuya url aparezca cierta palabra
inurl:bitacoras

intitle: Para buscar una página web cuyo título contenga una palabra:
intitle:bitacoras

cache: Nos lleva a la versión que tiene google de una determinada página.
cache:estudio103.blogspot.com

filetype: Busca un tipo de documento especificado que contenga una palabra.
filetype:pdf bitacoras

related: Busca páginas similares o relacionadas.
related:www.marca.es

Comandos Yahoo:

link: Muestra los enlaces apuntan a una página.
link:http://estudio103.blogspot.com
link:http://estudio103.blogspot.com +bitacoras

linkdomain: Nos devuelve todos los enlaces a cualquiera de las páginas de un dominio.
linkdomain:estudio103.blogspot.com
linkdomain:estudio103.blogspot.com +bitacoras

Podemos combinar el comando link con otros comandos:
linkdomain:estudio103.blogspot.com intitle:bitacoras
linkdomain:estudio103.blogspot.com -inurl:estudio103.blogspot.com

Yahoo ofrece mayor flexibilidad para hacer búsquedas combinadas entre comandos que Google.

Ref:
XeoWeb: 1 y 2
Bitacora de webmaster: 1 y 2
Google Help: 1 y 2

Favicon: Icono de favoritos

2004-10-12T15:41:00.000+02:00

Un favicon es una imagen pequeña que acompaña a la url de una página en la barra de direcciones del navegador.

Para crear un favicon para tu web necesitas un editor de imágenes que guarde en formato .ico. Aunque lo más rápido para crear tu propio icono es hacerlo en FavIcon From Pics.

El icono debe tener 16x16 píxeles, 16 colores (4 bits), y formato ICO, (no BMP, no GIF, no JPG).

Para insertarlo en nuestra web, debemos poner, entre las etiquetas <HEAD> y </HEAD>:

<link rel="shortcut icon" href="http://www.tudominio.com/favicon.ico">

En Internet Explorer tiene que añadirse la página a favoritos para que se vea el favicon. Una vez hecho debería salir el icono tanto en el menú de favoritos como en la barra de direcciones, a la izquierda de la dirección de la página.

En Mozilla sale directamente en la barra de direcciones sin añadir la página a tu lista de marcadores. El icono no saldrá en la lista de marcadores, sólo en la barra de direcciones.

Ref:
Blogpocket.com
Favicon.net

Fuentes de texto

2004-10-12T02:03:00.000+02:00

Sitios donde bajar fuentes de texto grátis:
1001 Free Font
Acid Fonts
Abstract Font
Download Free Fonts
High Fonts
Font Freak
DaFont
Free Fonts Free Fonts
Font Heaven
Beautiful Fonts for Free
LaLogotheque.com
Absolute Fonts Archive

Ref:
Bitácora de Webmaster
Ideas Freelance

¿Qué buscáis?

2004-10-10T20:11:00.000+02:00

Qué buscan mis visitantes según el sistema de estadísticas eXTReMe Tracking.

Sería una instructiva actividad intentar resolver sus dudas...

Google: tutorial fotolog wordpress
Google: cuanto dura el redireccionamiento tk
Google: blogia contador
Google: iframes invisibles
Google: templates gratis para blogger
Google: scripts redireccionamiento automatico webs
Google: wikipedia comparativa navegadores
Google: ordenar marcadores en firefox
Google: importar blogia + wordpress
Google: como poner nedstat a blogspot
Google: alojamiento wordpress wanadoo

¿Sabéis alguna?

Promocionar tu página web en buscadores

2004-10-10T18:13:00.000+02:00

Los buscadores tienen dos partes: un programa que busca páginas, y otro programa que almacena todas las palabras de todas las páginas, realiza las búsquedas y establece los rankings. Al primer programa se le suele llamar araña.

Una araña revisa todos los sitios que están almacenados en la base de datos cada cierto tiempo, comprueba si todavía existen, sigue todos los enlaces que encuentran en la página, y almacena en la base de datos lo nuevo.

Los resultados de la búsqueda se dan por orden de relevancia (relación entre el documento y la palabra de búsqueda), y eso se calcula teniendo en cuenta las veces que aparece la palabra en el documento y cómo aparece (por ejemplo, si aparece en negrita, o cursiva, o en el título de la página, o dentro de un tag o etiqueta H1).

Algunos buscadores modernos (Google), no sólo tienen en cuenta el peso de los términos, sino el peso de las páginas que apuntan a cada página; se supone que una página es más relevante cuanto más apuntada. Y también hay otros que le asignan más relevancia a las páginas según el dinero que hayan pagado.

Para que una página aparezca en un buscador, es suficiente con que la enlacen desde otra página que sí aparezca en un buscador. También puede darse de alta directamente en los buscadores más importantes. O utilizar algún sitio que dé automáticamente de alta en varios buscadores, por ejemplo, Eureka.

Para ser capturados directamente por los buscadores, se forman sociedades que se enlazan los unos a los otros. Una de estas sociedades son los anillos web o webrings, que son grupos de páginas donde cada una enlaza a la siguiente, y que tienen un tema en común. Eso garantiza que los buscadores las encuentren a todas, y que de una de ellas se atraigan visitantes hacia la siguiente. Estos anillos se dan de alta en sitios tales como AnilloWeb o Webring, que proporcionan el código para ir a la lista de todos los sitios, o al anterior y siguiente del anillo.

Es conveniente poner el término por el que queremos que encuentren nuestra página entre etiquetas "relevantes": dentro del título (<TITLE></TITLE>), tags H1, campos ALT de las imágenes o etiquetas de énfasis (EM). También será importante que no se usen frames (sub-ventanas, cuadros, marcos). Otro medio es usar tags invisibles, que no aparecen en la página, pero sí aparecen en los fuentes de la página. Por ejemplo:

<meta name="keywords" content="blog, bitacora, internet, tutorial, publicar, estudio, 103, juglar">

La mayoría de los buscadores permiten que, previo pago, nuestra página aparezca destacada en los listados, o bien que aparezca como un anuncio pagado.

Los catálogos funcionan de otra forma. Hay que darse de alta explícitamente. Conviene aparecer en los catálogos de más calidad como Yahoo o Terra.

Recursos para posicionamiento en buscadores:
Guía básica
Posiciona tu web
Poodle Predictor
Ablewise
Bruceclay
Marketleap
-----------------
Ref:
Curso de webmaster: Publicando en internet

Redireccionamiento

2004-10-10T18:11:00.000+02:00

Hay sitios que proporcionan direcciones alternativas a páginas que tienen direcciones largas y complicadas de recordar. Esos sitios no alojan físicamente páginas, sino simplemente cuando reciben una dirección la redireccionan al sitio que uno quiera. Podéis probar en Pagina.de o en Lanzadera.

Otra alternativa es usar dominios de primer o segundo nivel gratuitos. Por ejemplo Tokelau ofrece dominios .tk gratis (siempre que tengas un mínimo de visitas). Eu.org y JoyNic dominios de segundo y tercer nivel.

El inconveniente es la publicidad que has de soportar.

Resultados:
http://pagina.de/estudio103
http://www.gueb.de/juglar103
http://www.estudio103.tk/
http://estudi.es.tt/

-----------------
Ref:
Curso de webmaster: Publicando en internet

Qué es un dominio

2004-10-10T18:08:00.001+02:00

Un dominio está dividido en varias partes:

www.mipagina.com

.com: Es un dominio de nivel superior. Se dividen, en general, en dominios geográficos, que corresponden a un país o zona geográfica, como ".es" (España); y los dominios temáticos, que corresponden, aunque no necesariamente, a un tipo de sitio determinado: .aero, .biz, .com, .coop, .edu, .gov, .info, .int, .mil, .museum, .name, .net, .org, .pro.

.mipagina: Es el dominio de primer nivel. Esto es lo que se puede comprar. Hay algunos gratis (los .cx o los .tk), pero son muy limitados y generalmente no dura mucho tiempo. Se ofrecen dominios baratos en GoDaddy o en Stargate. Otro sitio donde comprar dominios: Registrars acreditados. Para conocer quién es propietario de un dominio: Whois.

www: Es el dominio de segundo nivel.

Ref:
Curso de webmaster: Publicando en internet

Alojamiento de una pagina web

2004-10-10T18:08:00.000+02:00

Comunidades virtuales

Las comunidades virtuales te permiten colocar tu página, con la única condición de que se servirá publicidad junto ella.

La mayoría de estos sitios permiten transferir páginas por FTP, es decir, usando programas (que se pueden bajar de TUCOWS o Softonic), o bien, directamente desde la página web usando un formulario. A veces, proporcionan un editor para modificar las páginas sin salir del web.

* Internacionales: GeoCities, Tripod, AngelFire.
* Nacionales: Personales, iEspana, Telepolis (Wanadoo), wwwpuntocom, Vivelared, Unlugar, MetropoliGlobal, Espacio Latino.

Estos sitios incluyen una serie de restricciones. La mayoría restringe el ancho de banda. Las imágenes sólo se sirven si están incluidas en páginas servidas desde el mismo sitio. Algunos incluyen como requisito un número mínimo de visitas. Los grandes portales que ofrecen alojamiento son casi siempre la mejor opción.

Aquí tienes una comparativa de alojamientos web.

Suelen ofrecer servicios: contadores, estadísticas, chats, foros.

Conviene tener siempre copia de tu página y/o tenerlas en dos o tres sitios, por si el sitio pierde tu página.

Son la mejor opción si uno solo tiene acceso a Internet a través de medios ajenos o bien sólo acceso ocasional.

ISP gratuitos

Son los proveedores gratuitos de Internet. Ofrecen cuentas de correo y espacio Web (3-5Mb). Solo se paga el coste de la llamada.

Ofrecen diferentes opciones:

- Acceso identificado o acceso genérico. En algunos casos, todos los ususarios acceden con la misma contraseña, lo cual impide usar una cuenta de correo particular. En otros casos, se usa acceso identificado, con cuentas de correo propias.

- Medio de acceso: Casi siempre usan la red de acceso a Internet de Telefónica. Actualmente, se han generalizado el uso de los números 908, que permiten usar tarifa plana.

- Correo web o correo POP/SMTP: Usar el correo en las páginas web del sitio, o bien poder bajárselo usando un cliente como Outlook o Netscape, y poder subirlo cuando esté uno conectado. La mayoría ofrecen correo web, pero algunas, Tiscali y Telefonica.net, ofrecen correo POP.

En la mayoría de los casos, cualquier comunidad virtual es más recomendable que estos ISPs gratuitos.

ISPs normales

Son los proveedores que cobran por usarse. Se suele contratar tarifa plana: un horario para conectarse por un coste fijo al mes.

Los usuarios de pago de los proveedores tienen más espacio web, y otros servicios, como más cuentas de correo. O permiten acceso de alta velocidad usando red digital de servicios integrados (RDSI).

Ejemplos de proveedores: Wanadoo, Sarenet, Arrakis.

El coste será las llamadas a su proveedor. Si se usa tarifa plana, el precio ronda los 20 euros al mes.

Proveedores de Internet de banda ancha

- Proveedores de ADSL: ADSL (Asymmetric Digital Subscriber Line), es un método que usa líneas normales, aunque hace falta modificar las centrales (modems) para que entiendan el tráfico como digital. Permiten acceder a Internet a unos desde 256 KBits/segundo, aunque la conexión es asimétrica (la subida es de 128 KBits por segundo). Los precios están alrededor de los 30 € al mes. Aparte de la conectividad, suelen dar espacio web y cuentas de correo.
Proveedores.
Comparativa entre proveedores de ADSL.

- Proveedores de cable: La mayor parte de los proveedores de cable pertenecen a AunaCable (antigua Retevisión), el resto se reparten geográficamente. Los precios son ligeramente inferiores a los del ADSL, pero tienen la desventaja de que se tiene uno que conformar con el proveedor que haya en su demarcación geográfica. Las velocidades de acceso son similares al ADSL.

-----------------
Ref:
Curso de webmaster: Publicando en internet

Cómo evitar errores de diseño

2004-10-07T16:29:00.000+02:00

- Accesibilidad:
Test de Accesibilidad Web
Herramientas para la Revisión y reparación de la Accesibilidad
Herramientas de accesibilidad
Diseño Accesible de Páginas Web
Bobby

- Simulación de Navegadores:
AnyBrowser.com
Lynx Viewer

- Tamaño:
Si se quiere poner muchas cosas "pesadas", se debe poner en diversas páginas, y poner imágenes pequeñas que haya que pulsar para traer la imagen completa. Una página principal no debería tener más de 50 o 70 Ks. Para saber cuánto ocupa una página se puede usar la opción Page Info del menú View del navegador (o Archivo-Propiedades). Es mucho mejor usar una sola imagen, aunque uno vaya a presentarla en diferentes tamaños, y regular el tamaño con los atributos del tag <image>, en vez de hacerlo con imágenes de diferente tamaño. Para comprobar el tamaño de la página se puede usar: SEO Tools.

- Enlaces rotos:
Para comprobar que los enlaces de nuestra página siguen existiendo: Link Checker de la W3

- Validación:
Validador de HTML de la W3C
Validador de CSS de la W3C

------------------------
Ref:
Interactivos
Curso de webmaster: Publicando en internet
Cómo hacer buenas páginas web

Color

2004-09-25T23:42:00.000+02:00

Formas de expresar los colores:

- Nombres de colores: aqua, gray, navy, silver, black, green, olive, teal, blue, lime, purple, white, fuchsia, maroon, red, yellow.
- Valores RGB: por porcentajes (color: rgb(100%,80%,60%)), o números entre 0 y 255 (color: rgb(255,0,0)).
- Valores hexadecimales: (color: #FF0000). Puede abreviarse cuando sus valores se repiten para cada par (color: #000).
- Colores web-safe: su visualización se mantendrá entre navegadores. Se obtienen mediante incrementos del 20%, 51 unidades o 33 en hexadecimal (rgb(40%,100%,80%), rgb(0,204,153) o #669933).

Ayudas para colores:
Color Blender
Super Color Chart
Color Calculator
Color Scheme
Color Schemer
ColorMatch Remix
Color Wheel
The Man In Blue
Color Palette Creator
Weg Page Colour Composer

Colorblind Web Page Filter te permite probar variaciones de colores en el diseño de una web, introduciendo la URL.

Ref:
Furilo
Mangas Verdes
Cómo hacer una buena página web
Programacion.com

Utilidades para internautas

2004-09-23T13:19:00.000+02:00

Correo electrónico
Hotmail
Yahoo
Gmail. (Herramientas)
Xasamail
Terra
Mixmail
Latinmail
Tiscali

YouSendIt ofrece envío de emails de hasta 1GB, vía web directamente.

Curiosidades para correo electrónico:
Postales:LatinCards
Bloody Finger Mail
Eye Maker
FutureMe

Chat, comunidades y mensajería instantánea:
MSN Grupos
MSN Messenger
MSN Web Messenger, eMessenger: Para usar MSN Messenger desde la web.
Dropload: Permite dejar archivos (de hasta 100Mb) y hacerlos recoger por alguien más tarde. Una vez depositados los archivos en dropload, se envía un correo electrónico al destinatario con instrucciones sobre como transferir dicho archivo. Los archivos son eliminados del sistema a los 7 días.

Enciclopedias
Wikipedia
Enciclopedia MSN Encarta

Diccionarios
Real Academia de la Lengua
Diccionarios.com
elmundo.es

Traductores
Google
Babel Fish Altavista
WordReference
Free Translation
Systran
WorldLingo
Internostrum: Catalán.
Thesaurus Visual: Muestra sinónimos visualmente.

Teléfonos
Paginas Blancas

Mapas y Callejeros
Paginas Amarillas
Vía Michelín

Juegos
Orisinal
Crimson Room (soluciones) - Viridian Room (soluciones) - The Blue Chamber (soluciones)
Samorost - The Polyphonic Spree
Ajedrez Online

Libros digitales
Conocimientos
Biblioteca-Libros Gratis

Descargas gratis
Softonic
Recursos Gratis
Error 500
Tucows

Noticias
El Mundo
Noticias.com

Imágenes:
Para compartir nuestras fotos, podemos usar el programa PictureToExe, que crea presentaciones de imágenes autoejecutables (.EXE). Puedes añadir música de fondo, textos, e indicar los tipos de transiciones entre imágenes.

Para crear un mosaico con tus fotos, podéis usar: Andrea Mosaic

Ref:
Directorio de Recursos para Webmasters
Oficina de Objetos Perdidos
Bitácora de Webmaster
La NaciOn Line
Blog de Esther Fuldauer

Lectores de RSS

2004-09-18T22:23:00.000+02:00

Pasos para usar un lector de RSS:
- Descargar e instalar un lector, o sólo suscribirte si se lee en web.
- Ir a un weblog, y buscar el enlace al archivo RSS, RDF, XML o ATOM.
- Copiar el enlace del RSS, y agregarlo al lector.
- El lector te avisará cuando se actualice el weblog, y en él podrás leer sus últimos posts.

La principal ventaja de los lectores online es que puedes leer tus blogs favoritos desde cualquier ordenador.

Lectores de RSS por sitio web:
Bloglines
Feedmanía
NewsApp
RocketInfo
zFeeder

Lectores de RSS por programa:
FeedDemon
FeedReader (tutorial)
NewzCrawler
BottomFeeder
Ampheta Desk (tutorial)
SharpReader
WinRSS
Clevercactus
RssReader (tutorial)
NewsDesk (tutorial)

Directorios de lectores:
RSS Info
News Aggregators Directory.

Firefox
También se pueden leer feeds con Firefox. Si visitas una página con firefox, y hay feeds disponibles te aparece un icono RSS en la parte de abajo del navegador, a la derecha. Al seleccionar uno de los feeds se abrirá la ventana de favoritos y podrás elegir la carpeta en la que quieres guardarlo. Cuando vayas a tus favoritos y elijas un feed que hayas añadido, verás que los últimos posts de ese sitio.

Buscadores y Directorios de RSS
BlogStreet
el Sindicón
Feedster
Syndic8.com

Generadores de RSS
Blogmatrix
myRSS

Conversores de RSS para Web
Feedroll
Flash Rss Reader using PHP with XML and MySQL
Flash/PHP Blog/RSS Reader Sample

Noticias en RSS:
Alertas de Google permite la suscripción por correo o por RSS a búsquedas basadas en las palabras clave que nosotros determinemos.
iMente: Noticias por categorías temáticas.

Bloglines
Bloglines permite mantener un blog con el perfil público de los blogs/páginas que lees y los posts que más te interesen:
http://www.bloglines.com/public/Juglar
http://www.bloglines.com/public/ecuaderno

Para poder compartir tu perfil, debes pinchar: My Feeds - Options - Blog Settings - Show my Blog - Yes, publish my Blog and/or Blogroll.

Tutorial: Cómo gestionar titulares con Bloglines

También puedes exportar cualquier perfil público, pinchando en Export Subscriptions y esto genera un archivo OPML, el cual luego puedes importar a otro lector de feeds.

En Bloglines Firefox Center tenemos dos extensiones para Firefox que permiten usar Bloglines durante la navegación:

- Bloglines Toolkit permite postear en el blog de Bloglines desde cualquier página, encontrar referencias a la página y subscribirse a ella. También notifica las actualizaciones de nuestros feeds.

- LiveLines detecta ficheros XML, RSS o ATOM, dentro de las páginas que Firefox está visualizando, para subscribir ese feed en Bloglines.

Ref:
Web de Blogs
ALDv3
Mató Tu Onda
minid.net
Alzado.org
Microsiervos
ALDv3
Bitacoras.com
tomatoma.WS
blogpocket.com

Sindicación con RSS

2004-09-17T11:11:00.000+02:00

El RSS sirve para ofrecer un resumen de las últimas actualizaciones de un sitio web o de un blog. Se utiliza para conocer en una página o programa un resumen de los últimos posts de todos los blogs que lees, para luego visitarlos y leerlos en su totalidad si al usuario le interesan las novedades. Es una de las herramientas de distribución de información más eficientes que hay actualmente en internet.

Se utiliza un lector de RSS para leer su contenido. El lector puede ser un programa o una página web. Lo que debes hacer es copiar el lugar donde se encuentra el feed (archivos RSS), y luego pegar dicho enlace en tu lector, ese paso recibe el nombre de subscripción a esa bitácora o página. Luego cada vez que ingreses al programa podrás ver las últimas actualizaciones de esa página.

Hay dos tipos de RSS:
- RDF (o Rich) Site Summary "resumen rico del Web" (RSS 1.0). Basado en RDF. Los archivos tienen la extensión .rdf.
- Really Simple Syndication "sindicación realmente simple".(RSS 2.0). Basado en XML. Los archivos tienen la extensión .xml.

RDF es el acrónimo de Resource Description Framework, "marco de descripción de recursos". El RDF está concebido como una serie de datos para definir otros datos. El RDF es un derivado de XML.

XML es el acrónimo de eXtensible Markup Language, "lenguaje de etiquetado extensible", una forma de transmitir datos con etiquetas que los describen, y ese conjunto de etiquetas puede ampliarse.

Un archivo RSS es una descripción estructurada de un sitio web. Puesto que la información tiene un formato estructurado, al ser captada por un servicio remoto puede ser manipulada, mostrada de acuerdo a variados templates y ser objeto de búsquedas inteligentes. Pero lo mas importante es que permite crear el contenido una sola vez y al mismo tiempo distribuirlo y volverlo accesible desde/hacia diferentes sitios webs.

Su estructura está pensada para compartir de forma sencilla titulares de noticias. Dentro de un archivo RSS se encuentran los datos básicos de una bitácora: nombre, dirección web, autor, fecha de última actualización, etc, y un resumen de su contenido, por ejemplo, los últimos posts. Para cada entrada se detalla como mínimo su título, las primeras líneas, y un link directo.

El principal objetivo de los archivos RSS es facilitar la sindicación de contenidos, que significa ponerlos a disposición de otros sitios mediante un archivo XML en un formato RSS. La utilidad de la sindicación de contenidos reside en producir listas de novedades sobre cualquier tema.

En resumen, para visitar tus weblogs favoritos puedes:
- Abrirlos con tu navegador, uno por uno.
- Suscribirte a sus índices RSS o XML, por medio de un lector que te avisará cuando se produzcan cambios en dichos weblogs. Cuando se visitan muchas webs, es más cómodo mantenerse al tanto de las últimas novedades empleando un lector de RSS.

Es recomendable poner un enlace del RSS de vuestra web (a ser posible de las 2 versiones: RSS 1.0 y RSS 2.0), para que todos puedan acceder a él.

Casi todos los sistemas de publicación permiten generar o generan directamente el archivo RSS.(Tutorial para Movable Type en Bitácoras.net).

FeedForAll es un programa para crear, editar y publicar feeds rss.

Manual de sindicación de contenidos.

-------------------
Ref:
ALDv3
Alzado.org
Educ.ar
Ethek
Fabian
Gen7es
Mató Tu Onda
the mixer

Tutoriales para webmasters

2004-09-15T18:23:00.001+02:00

Cybercursos
Aulaclic
AulaFácil
Emagister.com
Conocimientos
EsMucho
Tabla del Código ASCII
Scour Design
Javascript
Tutoriales de JJ Merelo
Tutoriales de Geneura
Con Clase
Mailxmail.com

Actividad en blogs

2004-09-15T13:41:00.000+02:00

Últimas actualizaciones de bitácoras
Weblogs.com
Bitácoras.net
Bitácoras.com
Blogdir.com
Blogger

Referencias
Technorati: Sitios que te enlazan ("referrers").
Track referers. True Fresco: Enlaces a tu bitácora.
Recommended Reading: Weblogs con enlaces similares ("vecindario").
URLinfo

Alta en servicios gratuitos de estadísticas:
Nedstat
Site Meter
BlogPatrol
Estadísticas gratis
Re Invigorate
eXTReMe Tracking
Weboscope Free

Rankings
Nedstat's Top 1000 Weblogs. (España).Ránking de bitácoras por número de visitantes, que usen un contador Nedstat Basic.
BlogShares (Top Spanish): Blogs cotizando en una Bolsa imaginaria.
Technorati Top 100: Bitácoras más enlazadas.
Vecindario: Quién enlaza a quién.
Bitácoras.com Top 500: Bitácoras más enlazadas.
Blog Census
Feedmania Top
Ranking.com: Actividad en internet.
Alexa (Español): Los sitios más populares de la red.

Ref:
Wiki de la blogosfera - Actividad
Weblogs FAQs

Accesorios para blogs

2004-09-15T11:08:00.000+02:00

Weatherpixie: El tiempo meteorológico en tu blog.
BlogTree: Genealogía de los blogs.
Bloglet: Para que tus visitantes puedan recibir un email sobre tus actualizaciones.
Bloglinker: Los que enlazas, te enlazan automáticamente.
Poll123: Encuestas para el blog.
Nerds on site: Contador de visitantes online.
Blogchat
Noticias de Bitacoras.com: Cómo integrarlas en tu blog.

Alojamiento gratuito de bitácoras

2004-09-15T10:34:00.000+02:00

En castellano:
Bitacoras.com: Blogger, Movable Type, Greymatter, pMachine, WordPress.
Diario Gratis: Movable Type, WordPress, pLog.
Zonalibre: Movable Type (preinstalado).
Blogalia: Web-based.
Blogia: Web-based.
Blogs Ya.com: Web-based.
Bloxus: Web-based.
Acelblog: Web-based.
Barrapunto
Libertonia
Barcelona Blogs

En inglés:
Blogger: Web-based.
Blogthing: WordPress (preinstalado).
Motime
Blog.com
Pitas.com

Comparativas de alojamientos:
Tiscar

Ref:
Introducción a los Weblogs
Wiki de la blogosfera - Alojamientos
Bitacoras.org

Sistemas de comentarios

2004-09-02T23:57:00.000+02:00

Los sistemas gratuitos de comentarios son ideales para aquellos CMS's como Blogger que no cuentan con su propia herramienta de publicación de comentarios con el que los usuarios de nuestra bitácora puedan reflejar sus opiniones.

Blog Extra Back Blog
Descripción: Abres gratuitamente una cuenta y automáticamente te facilitan dos scripts (unas líneas de código), el primero tendrás que insertarlo entre las etiquetas HEAD y /HEAD y, el segundo, en el lugar de la página en que quieras que aparezca el enlace a los comentarios.

Puedes personalizar el pop up de tus comentarios acorde al estilo de tu bitácora, borrar comentarios agresivos o malintencionados, agregar smilies así como seleccionar time zone, fecha, el idioma así como los mensajes cuando no hay comentarios, cuando hay un único comentario. Gran variedad de plantillas diseñadas por sus usuarios a las que tienes acceso libre y en las que no hay publicidad o texto publicitario.

Haloscan
Descripción: Igual de personalizable y fácil que el sistema anterior aunque en Haloscan has de donar 10 dólares si quieres modificar el html. El css lo puedes modificar gratuitamente así como las otras opciones de texto. Puedes editar los comentarios desde tu cuenta de usuario así como borrar los comentarios que consideres oportuno. Posibilidad de exportar los comentarios a Movable Type.

Otros
http://www.squawkbox.tv/
---------------
Referencias:
Bitacoras.com

Plantillas/Templates

2004-09-02T23:45:00.000+02:00

Las plantillas (templates) determinan la estética de la bitácora: colores, tipos de fuente, cabeceras, marcos, enlaces, etc.

Layout-o-matic: Para crear una plantilla para tu blog, con CSS y sin tablas. (permite crearla con dos o tres columnas).

CSS Creator: Otro generador de layout vía web.

Plantillas para Blogger
Bitacoras.com
Blog Templates Brasil
Point of Focus
Blog Templates
BlogSkins
Blogger Templates
Templates 4 free
Comunidade Blogueira

Ayuda para plantillas en Blogger:
Blogger Help: Templates

Otros:
Miz Graphics!

Ref:
Bitacoras.com
blogpocket
Bitacora de webmaster

Sistemas de Gestión de Contenidos

2004-09-01T23:45:00.000+02:00

Un Sistema de Gestión de Contenidos o CMS (Content Management System) es un programa orientado a la gestión y publicación de contenidos, que nos permite crear un blog.

Hay dos tipos de CMS's: los programas que instalamos en nuestro ordenador y los que editamos directamente desde una página web (web-based).

Movable Type
Tipo: Descarga e instalación. En inglés.
Descripción: Incluye buscador, sistema de comentarios (con protección anti-spam), ping, y trackback. Precisa servidor con soporte para PHP y base de datos. Para usuarios medios-avanzados.
Bitácora sobre Movable Type
Foro de Movable Type.
Tutoriales: Bitacoras.net, Blogdir.

Word Press
Tipo: Descarga e instalación. En inglés.
Descripción: WordPress es un sistema de publicación fácil de usar, construido en PHP y MySQL. Es altamente personalizable con una gran variedad de diseños y de uso fácil.
WordPress en Estudio 103
Bitácora sobre Wordpress
Foro de Word Press

PMachine
Tipo: Descarga e instalación. En inglés.
Descripción: Sencillo de instalar. Cuenta con sus propias etiquetas (tags).
Foro de pMachine

Blogger
Tipo: Web-based. En inglés.
Descripción: Es el sistema más popular y sencillo para administrar bitácoras. Posee sistema de comentarios. Podemos alojar nuestro blog en Blogspot (con publicidad) o bien configurar el sistema para publicar en otro servidor.
Tutorial en Bitácoras.net, Tutorial en Blogdir.com.
Foro en Bitacoras.com, Foro en Blogdir.com, Blogger help, Tutorial en Estudio103.

Blogalia
Tipo: Web-based. En castellano.

Blogia
Tipo: Web-based. En castellano.

Blogs.ya.com
Tipo: Web-based. En castellano.
Tutoriales: Trucos

Acelblog
Tipo: Web-based. En castellano.

Utilidades:
- Cómo importar a WordPress los artículos de una bitácora de Blogger. (Vía: eCuaderno)
- OpensourceCMS: Portal que permite probar programas CMS de código abierto sin tener que instalarlos: WordPress, pMachine, etc. (Vía: Manuls).
- Cuadro comparativo de características de CMS-programa: Blog Software Chart.

Ref:
Bitacoras.com
Interactivos

Biblioteca Virtual Miguel de Cervantes

2004-09-01T20:24:00.000+02:00

Catálogo General: Búsqueda por Autor o Título de textos, vídeos y sonidos de la cultura hispánica.
Búsqueda avanzada en textos
Obras más consultadas

Glosario de términos de internet

2004-08-31T19:58:00.000+02:00

ATI, Asociación de Técnicos de Informática
InterDic

------------------
Referencias:
Escritura No Lineal 2000-2001

Servicios blog

2004-08-29T23:52:00.001+02:00

Directorios temáticos de bitácoras:
Bitácoras.net (Alta en "Añadir")
Bitacoras.com (Alta)
Blogdir (Alta)
Bitadir (Alta)

Buscadores de "posts"
Bloglines
Technorati
Feedster
PubSub: Alertas sobre palabras en tiempo real.

Notificar cada vez que publiques un post: Ping manual
Bitacoras.net
Ping-O-Matic

-------------
Referencias:
Weblogs FAQs
Wiki de la blogosfera

Imágenes

2004-08-29T23:15:00.000+02:00

Formatos

JPG: Se pierde calidad, pero ocupa poco.
PNG: No se pierde calidad, y ocupa muy poco.
GIF: Para imagen animada. Ocupa mucho.
PCX, GIF, BMP, PNM, TIFF, TGA: Son anticuados, y ocupan demasiado.

Texto alternativo: alt

Las imágenes deben tener un texto alternativo, que se mostrará si el usuario no quiere o no puede verlas.

<img src="urlimagen" alt="Texto alternativo">

Texto al pasar el ratón: title

<img src="urlimagen" alt="Texto alternativo" title="Titulo de la imagen">

Altura (height), anchura (width) y borde (border) con CSS

<img src="urlimagen"alt="" style="height:280px; width:210px; border: 1px solid black;">

EJEMPLOS:

Imagen-enlace centrada
<p align="center"><a href="urlenlace"><img src="urlimagen" alt="textoalternativo" title="tituloimagen"></a></p>

Imagen a la izquierda y rodeada de texto
<p><a href="urlenlace"><img src="urlimagen" alt="textoalternativo" align="left" vspace="5" hspace="5"></a></p>

Imagen a la derecha y rodeada de texto alineado a la derecha

<p align="right"><a href="urlenlace"><img src="urlimagen" alt="textoalternativo" align="right" vspace="5" hspace="5"></a></p>

vspace="X" y hspace="X" se refieren al espacio vertical (vspace) y al espacio horizontal (hspace) que quedará entre la imagen y el texto. Se mide en pixels.

Servicios gratuitos de alojamiento de imágenes:
Buzznet
Fotolog.net
PhotoBlog
Photobucket
Pix8.net
Textamerica
Flickr
UploadHut.com

Servicios de alojamiento de fotologs:
Fotopages.com
Photoblogs.org

Páginas con imágenes interesantes:
Worth1000.com
Chromogenic.net
Pixel Perfect Digital
mytinygarden
Portland Studios
Simon Larbalestier
Juan García Alvarez

Fondos para páginas web:
Squidfingers

Botones para páginas web:
Button Gallery

Ref:
Interactivos
Cómo hacer buenas páginas web
Ideasfreelance

Buscadores

2004-07-29T22:23:00.000+02:00

Buscadores en inglés:
Alexa
All the Web
AltaVista
AOL Search
Dogpile
Excite
Gigablast
Go
Google
HotBot
Ixquick
MSN Search
Netscape Search
Open Directory
SurfWax
Webcrawler
Yahoo!

Buscadores en español:
AltaVista España
Buscopio
Google en español
MSN Search español
Telépolis
Terra
HispaVista
Lycos
Ya
Yahoo! España
PlexMatrix

Buscadores de imágenes
Google
Altavista
Toogle

Buscadores de archivos de audio
Altavista

Buscadores de archivos de video
Altavista

Buscadores de noticias
Google News España

Buscadores de libros
Biblioteca Virtual Miguel de Cervantes
El Oteador
Inlibris

Buscadores de cine
Buscacine

Buscadores de música
All Music Guide

Metabuscadores
Buscopio
Dogpile
MetaCrawler

Búsqueda por palabras clave
A9.com
Mamma

Búsqueda por categorías
Buscadores Temáticos

Búsquedas avanzadas
Google: Búsqueda Avanzada
Altavista: Búsqueda Web Avanzada

Búsqueda por agrupación de resultados:
Vivísimo
Kartoo
Clusty
Exalead

Las búsquedas más populares
Google Zeitgeist
Yahoo

Recursos de Google
Googlert
Google Personalized Search
Google WebSearch and SiteSearch: Para crear un buscador Google en tu blog.

Sitios sobre Buscadores
google.dirson.com noticias de google en español
Métodos de Búsqueda
XeoWebLog

Programas de búsqueda:
Blinkx: Es un programa (solo para Windows) que rastrea dentro de los documentos MS Office, emails y PDFs. Así, además de enlaces web, también nos ofrece resultados dentro de nuestros ficheros.
------------------

Referencia:
Portal de buscadores
Google.dirson

Comienza el estudio

2004-07-25T22:47:00.000+02:00

Pretendo que esta bitácora sirva simplemente para organizar el estudio de este mundo de internet, y especialmente del mundo de las bitácoras. Supongo que cuando me invada la inconstancia, derivaré a otros temas como la cultura.

Pongámonos a estudiar.