Blog

Un blog, o en español también una bitácora, es un sitio web periódicamente actualizado que recopila cronológicamente textos o artículos de uno o varios autores, apareciendo primero el más reciente, donde el autor conserva siempre la libertad de dejar publicado lo que crea pertinente. El nombre bitácora está basado en los cuadernos de bitácora. Cuadernos de viaje que se utilizaban en los barcos para relatar el desarrollo del viaje y que se guardaban en la bitácora. Aunque el nombre se ha popularizado en los últimos años a raíz de su utilización en diferentes ámbitos, el cuaderno de trabajo o bitácora ha sido utilizado desde siempre.

Este término inglés blog o weblog proviene de las palabras web y log ('log' en inglés = diario). El término bitácora, en referencia a los antiguos cuadernos de bitácora de los barcos, se utiliza preferentemente cuando el autor escribe sobre su vida propia como si fuese un diario, pero publicado en la web (en línea).

Herramientas para su creación y mantenimiento

Existen variadas herramientas de mantenimiento de blogs que permiten, muchas de ellas gratuitamente, sin necesidad de elevados conocimientos técnicos, administrar todo el weblog, coordinar, borrar o reescribir los artículos, moderar los comentarios de los lectores, etc., de una forma casi tan sencilla como administrar el correo electrónico. Actualmente su modo de uso se ha simplificado a tal punto que casi cualquier usuario es capaz de crear y administrar un blog.

Las herramientas de mantenimiento de weblogs se clasifican, principalmente, en dos tipos: aquellas que ofrecen una solución completa de alojamiento, gratuita (como Freewebs, Blogger y LiveJournal), y aquellas soluciones consistentes en software que, al ser instalado en un sitio web, permiten crear, editar y administrar un blog directamente en el servidor que aloja el sitio (como es el caso de WordPress o de Movable Type). Este software es una variante de las herramientas llamadas Sistemas de Gestión de Contenido (CMS), y muchos son gratuitos. La mezcla de los dos tipos es la solución planteada por la versión multiusuario de WordPress (WordPress MU) a partir de la cual se pueden crear plataformas como Rebuscando. INFO, Wordpress.com o CiberBlog.es o *Blog total.

Las herramientas que proporcionan alojamiento gratuito asignan al usuario una dirección web (por ejemplo, en el caso de Blogger, la dirección asignada termina en "blogspot.com"), y le proveen de una interfaz, a través de la cual puede añadir y editar contenido. Sin embargo, la funcionalidad de un blog creado con una de estas herramientas se limita a lo que pueda ofrecer el proveedor del servicio, o hosting.

Un software que gestione el contenido, en tanto, requiere necesariamente de un servidor propio para ser instalado, del modo en que se hace en un sitio web tradicional. Su gran ventaja es que permite control total sobre la funcionalidad que ofrecerá el blog, permitiendo así adaptarlo totalmente a las necesidades del sitio, e incluso combinarlo con otros tipos de contenido.

Características técnicas

Existe una serie de elementos comunes a todos los blogs.

Comentarios

Mediante un formulario se permite, a otros usuarios de la web, añadir comentarios a cada entrada, pudiéndose generar un debate alrededor de sus contenidos, además de cualquier otra información.

Enlaces

Una particularidad que diferencia a los weblogs de los sitios de noticias es que las anotaciones suelen incluir múltiples enlaces a otras páginas web (no necesariamente weblogs) como referencias o para ampliar la información agregada. Y, además, la presencia de (entre otros):

• Un enlace permanente (permalinks) en cada anotación, para que cualquiera pueda citarla.
• Un archivo de las anotaciones anteriores.
• Una lista de enlaces a otros weblogs seleccionados o recomendados por los autores, denominada habitualmente blogroll.

Enlaces inversos

En algunos casos las anotaciones o historias permiten que se les haga trackback, un enlace inverso (o retroenlace) que permite, sobre todo, saber que alguien ha enlazado nuestra entrada, y avisar a otro weblog que estamos citando una de sus entradas o que se ha publicado un artículo relacionado. Todos los trackbacks aparecen automáticamente a continuación de la historia, junto con los comentarios, pero no siempre es así.

Fotografías y vídeos

Es posible además agregar fotografías y vídeos a los blogs, a lo que se le ha llamado fotoblogs o videoblogs respectivamente.

Redifusión

Otra característica de los weblogs es la multiplicidad de formatos en los que se publican. Aparte de HTML, suelen incluir algún medio para redifundirlos, es decir, para poder leerlos mediante un programa que pueda incluir datos procedentes de muchos medios diferentes. Generalmente, para la redifusión, se usan fuentes web en formato RSS o Atom.

Características sociales

También se diferencian en su soporte económico: los sitios de noticias o periódicos digitales suelen estar administrados por profesionales, mientras que los weblogs son principalmente personales y aunque en algunos casos pueden estar incluidos dentro de un periódico digital o ser un blog corporativo, suelen estar escritos por un autor o autores determinados que mantienen habitualmente su propia identidad.

Un aspecto importante de los weblogs es su interactividad, especialmente en comparación a páginas web tradicionales. Dado que se actualizan frecuentemente y permiten a los visitantes responder a las entradas, los blogs funcionan a menudo como herramientas sociales, para conocer a personas que se dedican a temas similares; con lo cual en muchas ocasiones llegan a ser considerados como una comunidad.

Enemigos del correcto funcionamiento de un blog

Al igual que en los foros, los principales enemigos son el spam, los troles, y los leechers. También suelen provocar problemas los fake (usuarios que se hacen pasar por otros usuarios); y algunos usuarios títeres (usuarios que se hacen pasar por varios y diferentes usuarios).

Aunque no son enemigos, los recién llegados (o newbies) pueden ocasionar problemas en el funcionamiento del blog al cometer errores; ya sea por no poder adaptarse rápidamente a la comunidad, o por no leer las reglas específicas que puede tener el blog en el que acaban de ingresar.

Otro problema es el de la lectura, producto del lenguaje usado por los chaters.

Taxonomía

Algunas variantes del weblog son los openblog, fotolog, los vlogs (videoblogs), los audioblogs y los moblog (desde los teléfonos móviles). Además, cada vez son más los weblogs que incorporan podcast como sistema adicional de información u opinión.

El término weblog fue acuñado por Jorn Barger en diciembre de 1997.

Hispanización de la palabra

Muchas personas denominan bitácora a una bitácora de red o blog, haciendo referencia a la idea de llevar un registro cronológico de sucesos, contando cualquier historia o dándole cualquier otro uso (posiblemente influidos por el uso del término que se hace en la serie de ciencia ficción Star Trek para aludir al diario de a bordo del capitán de la nave).

En el año 2005 la Real Academia Española de la Lengua introdujo el vocablo en el Diccionario Panhispánico de Dudas ^[7] con el objeto de someterlo a análisis para su aceptación como acepción y su posterior inclusión en el Diccionario.

Glosario

Entrada, entrega, posteo o asiento: la unidad de publicación de una bitácora. En inglés se le llama "post" o "entry".

• Borrador: es una entrada ingresada al sistema de publicación, pero que todavía no se ha publicado. Generalmente se opta por guardar una entrada como borrador cuando se piensa corregirla o ampliarla antes de publicarla. En inglés se le llama "draft".
• Fotolog o fotoblog: unión de foto y blog, blog fotográfico.
• Permalink: abr. enlace permanente. El URI único que se le asigna a cada entrada de la bitácora, el cual se debe usar para enlazarla.
• Bloguero: escritor de publicaciones para formato de blog. Es común el uso del término inglés original: "blogger".
• Comentarios: son las entradas que pueden hacer los/as visitantes del blog, donde dejan opiniones sobre la nota escrita por el/la autor/a. En inglés se le llama "comments".
• Plantilla: Documento que contiene pautas de diseño pre-codificado de uso sencillo. En inglés se le llama "template". Estas plantillas, que habitualmente utilizan hojas de estilo en cascada -CSS-, pueden ser modificadas en la mayoría de los casos por los propios usuarios y adaptados a sus necesidades o gustos.
• Bloguear: acción de publicar mensajes en weblogs.
• Blogosfera o blogósfera: conjunto de blogs agrupados por algún criterio específico (localización, temática, idioma). Por ejemplo: blogosfera hispana, blogósfera chilena o la blogosfera política. El término fue acuñado en 2002 por William Quick.^[8]
• Blogonimia: Investigación del origen de los nombres con que los blogueros o dueños de las bitácoras han bautizado sus blogs. El término fue usado por primera vez en el blog eMe.
• Blogalifóbica: calificativo que se aplica a aquellas empresas u organizaciones que no aceptan que sus empleados tengan blogs. Como la palabra indica, sería una fobia a los blogs. Se sustenta en el miedo a que en el blog aparezcan informaciones que puedan dañar la imagen de una empresa, o que perjudiquen a sus beneficios...
• Tumblelog: blog de apuntes, esbozos, citas o enlaces sin exigencias de edición, ni completitud. No admiten comentarios, etiquetas o categorías. Tienen un aire neoweb 1.0.

El uso en comunidades

El método de publicación que usan los weblogs se ha vuelto tan popular que se usan en muchas comunidades, sólo para manejo de noticias y artículos, donde no sólo participa uno sino varios autores llenando la comunidad de artículos.

Clasificaciones

Según el buscador de blogs Wikio, los cinco blogs más influyentes del mundo en enero de 2008 fueron TechCrunch, Mashable!, Engadget, Gizmodo y Boing Boing.El blog en español más influyente fue, de acuerdo con esta clasificación, Microsiervos (España), situado en la décimo tercera posición. Entre los veinte blogs más influyentes de Europa, existían cinco blogs de España, todos en castellano: Microsiervos (2ª posición), Mangas Verdes (6ª), Genbeta (7ª), Loogic (19ª) y Error 500 (20ª).

A nivel exclusivamente de habla hispana, según la clasificación de Alianzo,^[9] los blogs más influyentes en español son los siguientes: Microsiervos (España), Barrapunto (España), Enrique Dans (España), Alt1040 (México), genbeta (España), Dirson (España), FayerWayer (Chile), Kriptópolis (España), Escolar.net (España) y Denken Über (Argentina).

 

 

Pautear

Un ejemplo que me parece ilustrativo a partir de algo que me explicaron hace poco, cómo funciona el pauteo al producir un clip audiovisual. Remezclado aquí, como pasa últimamente, con ideas de Clay Shirky.

Filtra, luego publica

El pauteo es la manera como, digamos, se enseña a registrar y editar material audiovisual profesionalmente. Creo. Al menos esto es lo que he entendido: grabas tu material en video – el cual, además, no grabas a la loca, sino que planificas y desarrollas según un programa, normalmente – y, antes de digitalizarlo para poder editarlo, haces el pauteo. Es decir, como el soporte MiniDV captura en tiempo real, 1:1, para no tener que esperar horas mientras el material es capturado primero haces un pauteo, un listado de los códigos de tiempo y el contenido que hay en esos segmentos. Luego, escoges lo que quieres utilizar y solamente digitalizas esos segmentos, para ahorrar tiempo.

Hay una serie de variables económicas centrales a esta práctica. Lo primero es que los recursos son escasos: normalmente estos equipos son costosos de conseguir, por lo tanto uno debe optimizar al máximo tanto el tiempo que invierte en la producción, como en la edición, de modo que mientras menos tiempo demore uno digitalizando material y además, menos material tenga para escoger al editar, tanto mejor, pues los costos de producción serán menores. Al mismo tiempo, está en consideración el tiempo de las personas que hacen esto: al dedicarse profesional, exclusivamente a este trabajo, deben también hacer el uso más eficiente de su tiempo en la captura y la edición. De allí que existan por los menos tres instancias de filtros antes de la versión final: la planificación de la grabación, el pauteo, y finalmente la edición (que seguramente a su vez será revisada). Así es como, según entiendo, funciona la producción audiovisual tradicional.

Publica, luego filtra

Yo no tengo ningún tipo de formación profesional ni técnica de este tipo. Pero grabo una que otra cosa y disfruto mucho editando clips. Pero mi procedimiento, en consecuencia, es totalmente diferente. Primero que nada, no tengo ninguna planificación de lo que grabo, a lo sumo una idea u objetivo general, y a partir de eso voy capturando cosas que me parecen interesantes. Segundo, no hago ningún tipo de pauteo – simplemente subo a la computadora todo el material que he capturado, y luego voy viendo qué vale o no la pena desde el programa de edición. La digitalización también es en tiempo real, pero simplemente puedo dejar ese proceso en el fondo mientras me dedico a leer o a buscar otra cosa en la computadora. Luego, cuando tengo tiempo, me dedico a revisar y editar.

Lo primero que salta a la vista son, de nuevo, las transformaciones en los costos de transacción. Mis equipos no son nada caros comparados con los equipos profesionales – cámaras amateur, computadoras personales – y no tengo costos mucho mayores por usarlos demasiado. De modo que no tengo, en la práctica, ningún apuro para optimizar el contenido antes de llevarlo a editar. Además, el hecho mismo de que ésta no es la única actividad que realizo significa que puedo dedicarme a otras cosas al mismo tiempo, sin tener que dedicar todos mis esfuerzos o energías a esta “producción”, y de allí que pueda dejarla como trabajo de fondo mientras veo otras cosas. Esto me parece importante en la medida en que refleja cómo en el nuevo panorama mediático cumplimos muchos roles al mismo tiempo, por ratos consumiendo, produciendo, criticando, y demás.

Refleja, además, la manera en la cual el proceso se lleva a cabo cuando se desprofesionaliza, en la misma línea de la explicación de Shirky de las profesiones en función a los costos de transacción y las necesidades sociales a las que responden. Cuando nuestros costos de transacción bajan, se vuelve menos necesario ejercer tantos niveles de filtrado antes de publicar – pero, en cambio, se transfiere esa misma necesidad de filtrado a los consumidores que se ven obligados a adoptar una posición más crítica frente a los contenidos que consumen. Lo cual, claro, genera toda una serie de nuevas necesidades sociales.

No, no estoy tratando de decir que por esto, la profesión audiovisual desaparecerá, o que el pauteo no tiene sentido. Tiene mucho sentido, cuando esos son tus parámetros y esos tus objetivos, y en una buena cantidad de casos, lo siguen siendo. Pero sí se refleja en este paralelo la manera como la ampliación de la base tecnológica abre la posibilidad a nuevos contenidos y nuevos procesos de producción que no se vean limitados por las mismas barreras económicas. Tendrán las suyas propias, por supuesto, y responderán a sus propias necesidades.

 

 

¿Qué es la W3C?

Un sitio XHTML Válido es aquel que cumple con los estándares de la W3C. La W3C es un consorcio internacional que establece estándares web.

Todos los sitios realizados por SETA son XHTML Válido

En nuestra vida diaria o en cualquier disciplina que desarrollemos debemos cumplir con ciertas pautas pre establecidas. Pautas que a veces son respetadas y a veces no. En internet algo similar ocurre, hay pautas de programación que deben ser respetadas para que la página pueda ser accedida en todos los navegadores y sistemas operativos. Dichas pautas son establecidas por la W3C.

¿Para que sirven los estándares de la W3C?

Actualmente las computadoras no son las únicas capaces de navegar en la www, con el constante auge tecnológico cada vez existen más dispositivos como Laptops, PDA´s y Celulares entre otros que pueden acceder a la web. Estos dispositivos se basan en los estándares W3C para visualizar una sitio en la red.

¿Que pasa si un sitio no cumple los estándares?

Que un sitio no cumpla con los estándares de la W3C es muy común hoy en día, de hecho hay grandes empresas cuyos sitios web no son XHTML Válido. Esto significa un problema, ya que existe una probabilidad alta de que la página no pueda ser visualizada correctamente en otros sistemas o navegadores distintos de los conocidos.

¿Existe alguna desventaja de cumplir con los estándares W3C?

Absolutamente ninguna. Cumplir con los estándares web es de sumo beneficio, su sitio tiene una gran ventaja con respecto a los demás sitios que no cumplen el estándar. Primero porque la estructura de la web se encuentra separada de la apariencia, esto permite que los buscadores puedan indexar su sitio con mayor exactitud y así la página pueda generar mas visitas. Segundo por que su web es accedida correctamente no solo en una computadora si no en todo dispositivo capaz de conectarse a internet.

¿Como compruebo si un sitio cumple los estándares?

Simplemente debe acceder al sitio de la W3C e ingresar la dirección de la web que desea comprobar. Si el sitio es válido verá una página con mensaje de felicitaciones (en inglés) con un fondo verde. De lo contrario, el sitio no válido mostrará un mensaje con fondo rojo informando que se han encontrado errores.

En muchos sitios encontrará botones similares a:

que con un simple click le permiten corroborar si el sitio que está viendo es válido o no.

¿Porque hay sitios desarrollados por Soluciones SETA que no validan según el estándar XHTML?

Todos los sitios que desarrollamos cumplen con los estándares de la W3C, el problema es que muchos de los sitios que creamos se basan en Gestores de Contenido que pueden ser administrados por los propietarios del sitio quienes al agregar contenido pueden hacerlo incorrectamente y en consecuencia producir algun error en el estándar XHTML.

¿Cuanto cuesta validar un sitio?

Es totalmente gratuito. Aunque no todos respeten estos estándares nosotros fijamos como requisito indispensable que cualquier sitio que desarrollemos cumpla los estándares W3C.

 

 

¿Qué son estándares web?

Los estándares web son un conjunto de recomendaciones dadas por el World
Wide Web Consortium (W3C) y otras organizaciones internacionales acerca
de cómo crear e interpretar documentos basados en el Web.

Son un conjunto de tecnologías orientadas a brindar beneficios a la
mayor cantidad de usuarios, asegurando la vigencia de todo documento publicado
en el Web.

El objetivo es crear un Web que trabaje mejor para todos, con sitios accesibles
a más personas y que funcionen en cualquier dispositivo de acceso a
Internet.

Los beneficios del uso de estándares web

Un sitio basado en estándares web mostrará una mayor consistencia
visual. Gracias al uso de XHTML para el contenido y CSS para la apariencia,
se puede transformar rápidamente un sitio, sin importar que se trate
de una página web o miles, realizando cambios en un solo lugar.

Los documentos que separan apariencia de contenido usan menos código,
además, CSS permite conseguir efectos que antes requerían el
uso de Javascript e imágenes, por lo que los sitios basados en estándares
utilizan menos ancho de banda y se muestran más rápido a los
usuarios, mejorando dramáticamente la experiencia de estos.

Los documentos basados en XHTML válido son más relevantes para
los motores de búsqueda, contienen mayor información y menos
código, por lo que un sitio basado en estándares web tendrá una
mejor posición.

De igual manera, la posición en directorios, editados por humanos,
se verá beneficiada pues el sitio será más usable.

XHTML es una aplicación de XML, por lo que el contenido puede ser procesado
de muchas formas, permitiendo la creación de sitios extensibles.

El uso de validadores nos permite
crear XHTML bien formado.

Un sitio basado en estándares web es compatible con todos los navegadores
actuales, y lo será con versiones futuras. Funcionará tan bien
en un PC, un navegador aural y un teléfono móvil dentro de diez
años.

Un sitio basado en estándares web es más fácil de mantener
y actualizar, el código es más simple, de esta forma se elimina
la dependencia de un solo desarrollador.

Un sitio basado en estándares web es más accesible, permitiendo
a personas con discapacidades utilizar su contenido.

Diseñando estructuralmente

Hasta ahora gran parte de los diseñadores web creaban sus documentos
desde una perspectiva visual.

Luego de crear nuestro boceto, cortamos y decidimos cuantas tablas crear
y en que celda insertaremos tal o cual parte del diseño. ¿Necesito
un borde de color rojo?, no hay problema, ¡crearé una tabla dentro
de otra y listo!

Cuando se diseña utilizando estándares web se empieza con la
estructura de un documento.

¿Cuales son las piezas de información?, este texto es un título,
estos serán párrafos, aquí tengo una lista ordenada, la
frase siguiente es una cita y aquí insertaré un subtítulo.

Primero se crea la estructura y luego el estilo, o apariencia.

En otras palabras, empezamos con la estructura del contenido y luego vamos
trabajando el diseño visual, en vez de hacerlo al revés.

Esta forma de trabajo puede resultar extraña para todos aquellos acostumbrados
a “dibujar” sus páginas web, puedo escuchar a algunos usuarios gritando “blasfemo!,
hereje!”. Las ventajas de diseñar con estándares web compensarán
con creces el tiempo invertido en aprender el nuevo método, creanme.

Consideremos el siguiente ejemplo:

Hemos creado un diseño en el cual tenemos un bloque de contenido,
compuesto por texto e imágenes. Ese diseño se utiliza en veinte
páginas diferentes del sitio. Nuestro cliente está de acuerdo
en todo salvo que desea que el fondo del bloque no sea azul sino verde, que
los textos empiecen un poco más a la derecha y… “Ah!, ¿Podríamos
ver como queda con un borde fino marrón?”.

Si trabajamos de la forma “tradicional” deberiamos abrir cada una de las
veinte páginas, encontrar el código de las tablas y celdas correspondientes
a la sección por modificar, cambiar algunos bgcolor, modificar el cell
padding (quien pensó en modificar el ancho está peor de lo que
pensaba!) y, tristemente, crear una tabla dentro de otra si queremos “simular” un
borde de un pixel.

Este cambio, repito, se debe realizar en cada una de las veinte páginas.
Cuando volvemos a visitar a nuestro cliente este nos dice: “Perfecto, pero
podríamos probar con rojo en vez de verde y el borde en negro?”. Suele
pasar, lo he vivido cientos de veces.

Creo que va quedando clara la idea.

Si hubieramos diseñado de acuerdo a estándares
web no deberiamos tocar el código HTML, bastaría con cambiar
tres líneas
en nuestro archivo CSS, algo como esto:

#contenido {

background-color: #336699;

padding-left: 5px;

border: 1px solid #336699;

}

El cambio se notaría automáticamente en todas las páginas
usando ese estilo, sean veinte o mil, y no habría necesidad de una segunda
reunión con nuestro cliente (todos sabemos que este proceso de revisión
y reuniones puede ser, a veces, interminable), los cambios se pueden hacer
al instante.

Estoy convencido, ¿Cómo empiezo?

¡Por el principio!

Lamentablemente muchos diseñadores web solamente conocen las aplicaciones,
no menciono nombres pero todos sabemos cuales son, que les permiten generar
sus páginas web y no conocen, o no les interesa conocer, el código
que hace que esas páginas funcionen.

Para poder desarrollar sitios web es necesario tener un conocimiento a fondo
de HTML (Hipertext Markup Language) para crear documentos y CSS (Cascading
Style Sheets) para manejar su apariencia.

En un mundo ideal, un diseñador web debería ser capaz de crear
sus páginas utilizando cualquier editor de texto ASCII.

HTML ha sido actualizado en múltiples ocasiones y existen varias versiones,
cada una con diferentes reglas. Estas reglas son indicadas en documentos conocidos
como DTD (Document Type Definitions).

Recomiendo aprender XHTML 1.1, el sucesor de HTML 4. Una combinación
del clásico HTML y el muy potente XML.

Luego debes aprender el uso de CSS, hojas de estilo en cascada. Empieza con
cambios simples, modificar los fonts y colores de textos, por ejemplo. Luego
entiende los conceptos de cascada y el modelo de cajas (box model).

Cuando estes familiarizado con el poder de CSS, puedes empezar con los conceptos
de posicionamiento.

Recuerda probar tus diseños en un navegador compatible con estándares
web: Mozilla (especialmente el excelente Firefox), Opera o Safari son los recomendables.

También es bueno probar como lucen en navegadores que no soportan
completamente los estándares, como Internet Explorer.

Es obvio, pero vale mencionarlo: Los navegadores 4.x constituyen una minoría
y ninguno interpreta correctamente estándares web. Si tus visitantes
usan navegadores de 1997, la sugerencia lógica es una actualización.
En todo caso, lo bueno de usar estándares web es que el contenido será accesible
incluso para navegadores antiguos, aún cuando los efectos de diseño
no sean los deseados, recuerda la primera ley del Web: El contenido es rey.

Otras sugerencias útiles:

Utiliza el tipo correcto de documento (doctype): Cada página debe
contener, como primer elemento, información sobre el DTD usado. Esto
es importante para que los navgeadores sepan como comportarse, además,
los validadores no podrán verificar las páginas si no se indica
un doctype.

Valida tu código: Este paso es sumamente importante para confirmar
que nuestros documentos han sido creados correctamente, respetando los estándares
recomendados. Al final de este artículo podrás encontrar las
direcciones de los principales validadores.

Elimina todos los elementos de HTML relacionados a la presentación
(como b, i, font, color, bgcolor) y utiliza CSS.

Utiliza tablas HTML para lo que fueron creadas: Presentar datos de forma
tabular, como hojas de cálculo. Muchos aún las utilizan para
lograr efectos de diseño.

Un amigo me comentó que prefería seguir con su diseño “full
tablitas” pues CSS era muy complicado y no le gustaba. Aprender a utilizar
adecuadamente CSS toma tiempo y requiere paciencia, pero no culpemos a la tecnología
de ser complicada o inútil simplemente por ser diferente a lo que estamos
acostumbrados, o mejor dicho: Mal acostumbrados.

Muy interesante pero…

Sé lo que estas pensando: ¿Vale la pena complicarme con todo
esto?

Esto no se trata simplemente de diseño gráfico, estamos hablando
de crear sitios web fáciles de usar y mantener. Al separar estructura
y contenido obtenemos grandes beneficios, podemos cambiar completamente el
aspecto de un sitio en solo horas. Podemos diseñar para todo tipo de
navegador y dispositivo, sin crear múltiples versiones, y además
tener páginas más usables y rápidas en la descarga.

Para decirlo directamente: El diseño web “tradicional”, basado en
HTML de presentación, y no de estructura, será obsoleto en muy
poco tiempo, muchos sitios están
siendo rediseñados basados en estándares web y el paso lógico
es aprender, o mejor dicho re-aprender, los conceptos de diseño web.

Además, ¿Porqué debemos seguir diseñando de manera
errónea para navegadores que no interpretan adecuadamente los estándares?, ¿No
sería mejor diseñar correctamente y obligar a los fabricantes
de software a crear mejores productos?

Considera las nuevas leyes sobre accesibilidad, en muchos paises los sitios
gubernamentales están obligados a ser accesibles.

Como Jeffrey Zeldman comenta: “Por años
nos han obligado a ser los pequeños y buenos diseñadores web,
construyendo sitios que luzcan bien en navegadores que no funcionan”, ahora
tenemos navegadores que por funcionan, empecemos a diseñar correctamente!

Finalmente, he visto comentarios acerca de la simplicidad en el diseño
de los sitios basados en estándares web. Hace dos o tres años,
cuando muchos desarrolladores dieron el salto al uso de estándares web,
esto podía ser cierto, en la actualidad creo que un link vale más
que mil palabras: Zen Garden.

Conclusiones

El uso de estándares web y la separación entre estructura y
presentación ofrece múltiples beneficios para hoy y mañana.

Hoy: Acceso a una mayor audiencia, menor costo de producción y cumplir
con los requerimientos de accesibilidad.

Mañana: Reducir costos de mantenimiento, así como la dependencia
de algún producto de software, flexibilidad para los cambios de presentación
y una puerta abierta al uso de tecnologías como XML.

 

1. COLOR DE TEXTO: color: red;

2. COLOR DE FONDO: background-color: black;

3. REPETIR IMAGEN DE FONDO EN FORMA HORIZONTAL: background: url("/images/back.jpg") repeat-x;

4. REPETIR IMAGEN DE FONDO EN FORMA VERTICAL: background: url("/images/back.jpg") repeat-Y;

5. NEGRITA font-weight: bold;

6. CURSIVA font-style: italic;

7. SUBRAYADO: text-decoration: underline;

8. PARRAFO EN MAYUSCULAS: text-transform: uppercase;

9. LETRA CAPITAL O TEXTO TIPO TITULO: 1.text-transform: capitalize;

10. ELIMINAR SUBRAYADO DE UN ENLACE: a {

               text-decoration: none;               

  }

 

11. @fontface{ familia-fuente; url(url); } Especifca una fuente para ser utilizada dentro del documento. Permite usar una fuente que no se encuentra localmente.

12. @import{ url( url ) } Permite importar una hoja de estilo.

13. { background: trasparent | color || url || repeat || scroll || posición } Especifica el gráfico y/o color, posición y forma de pintado del gráfico que se ubica detrás del texto y otros elementos del documento.

14. { background-attachment: scroll | fixed } Define si la imagen de fondo quedará fija mientras se desplaza el contenido del documento o si se repetirá a todo su largo y ancho.

15. { background-color: color | transparent } Indica al navegador el color del documento o de un elemento.

16. { background-image: url | none } Especifica el URL de la imagen de fondo del documento o de un elemento.

17. { background-position: [ posición ] | largo | {1,2} | [ top | center | bottom ] || [ left | center | right ]}

Indica al navegador la posición inicial de la imagen de fondo dentro del documento.

18. { background-repeat: repeat | repeat-x | repeat-y | no-repeat } Define si la imagen de fondo se repite y de que manera.

19. { background-color: color | transparent } Especifica el color de fondo de un elemento.

20. { border: largo || estilo || color } Especifica uno o varios atributos del tipo de borde que va a ser dibujado alrededor de un elemento o entre marcos.

21. { border-bottom: largo || estilo || color } Se utiliza para especificar uno o varios atributos del tipo de borde que se dibujará en la parte baja del elemento.

22. { border-bottom-color: color } Especifica el color del borde que se dibujará en la parte baja del elemento.

23. { border-bottom-style: none | solid | double | groove | ridge | inset | outset } Define el estilo del borde que se dibujará en la parte baja del elemento.

24. { border-bottom-width: thin | medium | thick | largo } Establece el largo del borde que se dibujará en la parte baja del elemento.

25. border-color: color {1,4} } Define el color de todos o alguno de los bordes.

26. { border-left: largo || estilo || color } Se utiliza para especificar uno o varios atributos del tipo de borde que se dibujará en la parte izquierda del elemento.

27. { border-left-color: color } Especifica el color del borde que se dibujará en la parte izquierda del elemento.

28. { border-left-style: none | solid | double | groove | ridge | inset | outset } Define el estilo del borde que se dibujará en la parte izquierda del elemento.

29. { border-left-width: thin | medium | thick | largo } Establece el largo del borde que se dibujará en la parte izquierda del elemento.

30. { border-right: largo || estilo || color } Se utiliza para especificar uno o varios atributos del tipo de borde que se dibujará en la parte derecha del elemento.

31. { border-right-color: color } Especifica el color del borde que se dibujará en la parte derecha del elemento.

32. { border-right-style: none | solid | double | groove | ridge | inset | outset } Define el estilo del borde que se dibujará en la parte derecha del elemento.

33.  { border-right-width: thin | medium | thick | largo } Establece el largo del borde que se dibujará en la parte derecha del elemento.

34. { border-style: none | solid | double | groove | ridge | inset | outset } Define el estilo del borde.

35. { border-right: largo || estilo || color } Se utiliza para especificar uno o varios atributos del tipo de borde que se dibujará en la parte superior del elemento.

36. { border-top-color: color } Especifica el color del borde que se dibujará en la parte superior del elemento.

37. { border-top-style: none | solid | double | groove | ridge | inset | outset } Define el estilo del borde que se dibujará en la parte superior del elemento.

38. { border-top-width: thin | medium | thick | largo }Establece el largo del borde que se dibujará en la parte superior del elemento.

39. { border-width: [ thin | medium | thick | largo ] {1,4} } Se utiliza para especificar el tamaño de uno o más bordes de un elemento.

40. { clear: none | left | right | both } Causa que el próximo elemento o texto se muestre debaja, a derecha o izquierda, de la imagen.

41. { clip: forma | auto } Especifica como será mostrado un elemento cuando su tamaño excede el de su contenedor.

42. { color: color } Color del texo o de un elemento

{ cursor: auto | crosshair | default | hand | move | e-resize | ne-resize | nw-resize | n-resize | se-rezise | sw-resize | s-rezise | w-reseze | text | wait | help } Especifica que tipo de gráfico contendrá en puntero del mouse cuando éste se pose encima de un elemento.

43. { display: none | texto_vacio } Determina si un elemento estará visible en el documento. Es similar a la propiedad VISIBILITY.

44. { font-family: [[ nombre-fuente | familia-genérica ] , ] * [ nombre-fuente | familia-genérica ] } Establece los tipos de fuentes que se usarán en el elemento. Se pueden establecer mediante su nombre propio o el de su "familia". Se pueden establecer una o más y se tomará la primera de la lista que exista en la PC del cliente. Si no hay ninguna utilizará la predeterminada para el navegador.

45. { filter: blendtrans | revealtrans | alpha | blur | croma | dropshadow | fliph | flipv | glow | gray | invert | light | mask | shadow | wave | xray } Establece o retorna un arreglo (array) con todos los filtros especificados en el estilo de un elemento.

46. { font: [ estilo || variante || grueso ]? tamaño [ / alto-de-linea ]? nombre-familia ] } Define uno o varios atributos de la fuente para un elemento.

47. { font-family: [[ nombre-fuente | familia-genérica ] , ] * [ nombre-fuente | familia-genérica ] } Establece los tipos de fuentes que se usarán en el elemento. E igual a la propiedad FACE.

48. { font-size: xx-large | x-large | large | medium | small | x-small | xx-small | larger | smaller | porcentaje | tamaño } Determina el tamaño de la fuente para el elemento.

49. { font-style: normal | italic | oblique } Establece el estilo de una fuente.

50. { font-variant: normal | small-caps } Especifica si se pondrá en mayúsculas la primera letra de cada palabra.

 

Imagen sin enlace:
<img src="http://www.nombredeldominio.com/nombredelaimagen.gif" alt="descripción de la imagen">

Cambiamos 'www.nombredeldominio.com/nombredelaimagen.gif' por la dirección URL de la imagen elegida y 'descripción de la imagen' por los comentarios deseados.

Imagen con enlace:
<a href="http://www.nombredeldominio.com" target="_blank"><img src="http://www.nombredeldominio.com/nombredelaimagen.gif" alt="descripción de la imagen"></a>

Hacemos los cambios mencionados anteriormente.

Correo electrónico:
<a href="mailto:tuemail@tuemail.com">Contacta</a>

Sustituimos 'tuemail@tuemail.com' por la verdadera dirección de correo electrónico y 'Contacta' por el texto que queramos.

Alinear a la izquierda:
<div align="left"> Texto alineado a la izquierda. </div>

Escribimos <div align="left"> antes del texto que alinearemos a la izquierda y finalizamos el texto con </div>.

Centrar:
<div align="center">Texto centrado </div>

Actuamos de forma análoga al apartado anterior.

Alinear a la derecha:
<div align="right">Texto alineado a la izquierda </div>

Actuamos de forma análoga al apartado anterior.

Salto de línea
<br> o <br />

Si queremos insertar una línea en blanco escribiremos <br> o <br />

Tipo de letra:
<font face="verdana"> Texto escrito en verdana </font>

Utilizamos <font face="verdana"> antes del texto elegido y acabamos con </font>.

Negrita:
<strong>Texto </strong>

Actuamos de forma similar al caso anterior y los casos que vienen a continuación. Cursiva:
<em>Texto </em>

<u>Texto subrayado </u>

Tamaño de letra:
<font size="3">Texto </font>

Subíndice:
_Número₂

Superíndice:
^Número²

Color de letra:
<font color="blue">Texto de color azul </font>


Escribimos <font color="blue"> si hemos elegido el color azul y acabamos con </font>.

También podemos utilizar el siguiente formato:

<font face="Arial" size="3" color="navy"> Texto escrito en arial, tamaño 3 y color azul marino. </font>

Color de la tabla:
<td bgcolor="white"> </td>

Ancho de la tabla:
<td width="750"> </td>

Ajuste superior en la tabla:
<tr valign="top"> </tr>

Eliminar la separación entre las columnas y filas de la tabla, espesor y separación texto y borde de la celda:
<table width="750" CELLSPACING="0" CELLPADDING="0" BORDER="0"> </table>

Color del fondo de pantalla:
<body bgcolor="white"></body>

En este caso se ha elegido el color blanco como fondo de pantalla. Esta etiqueta acompaña a BODY al comienzo del cuerpo de la página y habría que introducirlo así:

<HTML>
<HEAD>
<TITLE>Título</TITLE>
</HEAD>
<BODY bgcolor="white">
</BODY>
</HTML