miércoles, diciembre 08, 2004

Mudanza

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

domingo, noviembre 28, 2004

Apuntes de CSS práctico

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

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

viernes, noviembre 26, 2004

Definir estilos utilizando clases

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

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

jueves, noviembre 25, 2004

Aplicaciones de las Hojas de Estilo en cascada

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

domingo, noviembre 21, 2004

Introducción al CSS

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

martes, noviembre 16, 2004

Flickr

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

lunes, noviembre 15, 2004

Firefox

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

jueves, noviembre 11, 2004

Plantillas - Templates para Blogger

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

Blogger Help: Templates

iFavoritos

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

miércoles, noviembre 10, 2004

WordPress

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

martes, noviembre 09, 2004

Posicionamiento web en Google

¿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

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:
Ref:
Bicubic: Spyware y Virus.

Consejos HTML

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

Sé creativo
(Presentación Flash)

Creative Commons

Ref:
Noticias Bitacoras.com

lunes, noviembre 08, 2004

CSS y HTML

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

domingo, octubre 31, 2004

Etiquetas básicas en XHTML

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>&lt;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): &lt;
* > (Mayor que): &gt;
* & (símbolo de and): &amp;
* " (comillas dobles): &quot;
* á: &aacute;
* é: &eacute;
* í: &iacute;
* ó: &oacute;
* ú: &uacute;
* ü: &uuml;
*ñ: &ntilde;
*¿: &iquest;


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>


  1. Blogia

  2. Blogger

  3. 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 <!-- comentario -->


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">
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>

Bloglines


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>




Ref:
Plantilla de XHTML Maestra
mailxmail.com

Introducción al HTML

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

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

sábado, octubre 30, 2004

Qué es un blog

- 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

domingo, octubre 24, 2004

Cómo crear una bitácora con Blogger

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/

http://www.blogger.com/


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

http://www.blogger.com/signup.g


"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

Name your blog


"Blog Title": Nombre del Blog.

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

Pulsa en "Continue".


ESTILO

Choose a template


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.

Your blog has been created


Pulsar en "Start posting".


OPCIONES BASICAS

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

Basic Settings


"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

sábado, octubre 23, 2004

Difunde Firefox

Difunde Firefox


Descarga Firefox


viernes, octubre 22, 2004

Otra forma de postear

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.

Instala


Mangas Verdes

martes, octubre 12, 2004

Comandos de búsqueda: Google vs Yahoo

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

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.

Mi Favicon


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

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

domingo, octubre 10, 2004

¿Qué buscáis?

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

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

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

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

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
Who Links Here