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