Taller Urbanidad Blogs[1]

Taller de urbanidad y buenas maneras en los blogs

Madrid, 2 octubre 2006

BLOG DE SEDIC 2 de 53

Contenidos

Introducción: Blogs

Buenas maneras en el diseño y la presentación del blog

Redactar para la web

Enlazar: qué, cuándo, cuánto, dónde...

Comentar: qué, cuándo, cuánto, dónde...

Lo que el blogger debe saber sobre XHTML

Ejercicio práctico


(0) Introducción: Blogs



¿Cuál es la diferencia entre estas páginas?



Características de los blogs que los convierten en un género web propio

Actualización periódica Post = unidad mínima de contenido Orden cronológico de los posts (más reciente

primero) Hiperenlaces >> conversaciones, redes de

interés Comentarios >> diálogo y debate



Anatomía de un post:

Título Texto del post

(hiperenlaces) Fecha de publicación

Autor Permalink o enlace

permanente Comentarios Categorías



Content Management Systems (CMS)

herramientas de gestión y edición de contenidos

“boom” blogosfera

Permiten publicar contenidos en Internet sin necesidad de saber HTML, CSS, XML...

SENCILLEZ, formularios web a través de los que podemos editar y publicar texto, imágenes y archivos



Amplio abanico de posibilidades:

Código propietario / libre

Gratuitos / de pago

Sólo el sistema de edición / CMS + servicios de alojamiento



Crear un blog con cualquiera de estas herramientas es cuestión de 3 minutos, pero...

hay aspectos a los que merece dedicar algo más de tiempo y atención para asegurar la calidad y usabilidad de nuestro blog, factores que contribuyen al éxito de un blog


(1) Buenas maneras en el diseño y en la presentación



Los colores:

Los estudios de usuarios demuestran que la mayoría de las personas que visitan un sitio web por primera vez emplean tan sólo 10 segundos en decidir si les ofrece o no algo de valor; la forma y el diseño y estructura de la información van a jugar, pues, un papel importantísimo.

Jugar con los contrastes. Evitar los fondos con figuras. No utilizar demasiados colores (3 colores hasta 6 tonos)



IntimidatorioSilencio, elegancia.NEGRO

Crea energía negativaModerado, equilibrado, tradicional

VERDE

Depresión, aflicción, pesadumbre

Serenidad, armonía. Equilibrio.AZUL

Agitación, tensiónEnergía, vitalidad, poder, fuerza, agresividad, impulsivo

ROJO

Aumenta la ansiedadEnergíaNARANJA

Produce agotamientoGenera demasiada actividad mental

Tibieza, innovaciónAMARILLO

---EstabilidadGRIS

---Paz, neutralidadPLATA

Cansado y desorientadoEquilibrioLAVANDA

---Pureza, limpieza, simplicidadBLANCO

El exceso produceSensaciónColor



Tipos de letras, márgenes e interlineados juegan un papel importante en la apariencia del texto.

Equilibrio al elegir el tamaño:

- Grande > aumenta extensión “aparente”

- Pequeña > dificulta la lectura Ancho de línea:

- Largos > Pocos saltos de línea. No descansa la vista.

- Cortos > Demasiados saltos de línea. Distraen la lectura.

Márgenes e interlineados



Debemos evitar:

Uso injustificado de MAYUSCULAS

Eskritura ko0l. Textos Multicolores Los subrayados

No debemos abusar de:

Las cursivas Las negritas



Imágenes, las animaciones y la publicidad, pueden distraer la atención del lector y restar profesionalidad al

blog.

Si utilizamos imágenes con frecuencia, pueden ralentizar la navegación

Pondera la necesidad, la pertinencia y el interés de cada imagen que quieras utilizar y procura que sean de la resolución adecuada



Lo importante es que esté bien identificado, bien organizado y contenga la información precisa y

relevante.

El menú del blog

¿A la derecha o izquierda? Mejor corto. Información relevante y

organizada por orden de importancia.



Elementos del menú del blog

Información sobre el blog. Categorías Archivos temporales Últimas entradas. Buscador Elementos de sindicación


(2) Redactar para la Web


(2) Redactar para la web

Escribir para la web >> Escribir bien

Corrección lingüística, ortográfica y sintáctica



No leemos de igual manera en la pantalla de un ordenador que en un papel

leemos de forma secuencial, atenta y detenida

“recorremos" la pantalla, repaso visual intentando identificar áreas de interés

lectura más cansadalectura más tranquila, relajada



Organizar los elementos informativos de nuestros textos de la manera más clara y visualmente estructurada:

Estructurar la información en párrafos: 1 idea = 1 párrafo no superen las 5 o 6 líneas de texto la primera frase debe contener la información principal líneas en blanco entre párrafos ayudan a descansar la

vista

Estilo de pirámide invertida: colocar la conclusión o idea principal del texto al principio

del todo, y desarrollarla, dar los argumentos después.



Escribir de forma clara, concisa y directa: utilizar la voz activa, estilo directo y frases sencillas

Emplear un tono informal, sencillo un tono formal o elegante entorpece la legibilidad e

inteligibilidad del texto

Sintetizar los textos si el texto es muy largo, ofrecer un resumen al principio

Utilizar negritas y cursivas para destacar lo esencial no utilizar subrayado, para no confundir con enlaces



Título breve, claro, sencillo y relevante

Usar listas para enumerar o enunciar recursos, ideas, ejemplos

Tener en cuenta a los usuarios

Organizar, jerarquizar y agrupar elementos informativos de forma que aporten legibilidad al mensaje que queremos transmitir, que hagan "ojeable" su estructura y faciliten la comprensión de la información al usuario al que nos dirigimos


(3) Enlazar: qué, cómo, cuándo, cuánto, dónde...



Una de las características de los blogs, es su contenido de carácter hipertextual.

Qué enlazar:

Recursos que aporten una visión general. Información complementaria o alternativa. Definiciones. Datos sobre los antecedentes del tema Enlaces que permitan contrastar la información. Enlaces de navegación.



Dónde enlazar (dentro de nuestro post):

Enlaces en el texto.Se utilizan cuando elaboramos un texto propio.

Enlaces al final del texto.Se suelen poner al final del texto cuando hacemos una mera cita a una noticia o post ajeno o bien cuando queremos dar al post la apariencia de un artículo científico



Cuántos enlaces:

Un número excesivo de enlaces, interrumpe el flujo narrativo del post y provoca cierta desorientación en el usuario.



Cómo enlazar:

Los términos que usamos para enlazar (anclas): términos significativos, descriptivos de la información a la conducen y representativos.

"Si desea conocer las políticas de publicación de nuestro blog, pulse aquí“

"Para más información, consulte las Políticas de publicación del Blog de SEDIC“.



Cómo enlazar (II):

Extensión de los términos de enlace. Debemos ser concisos y enlazar sólo las palabras precisas para evitar el ruido visual e informativo.

"Haga click aquí para acceder a la sección que muestra a nuestros redactores y colaboradores”

"Conozca al Equipo de redacción del blog de SEDIC”



Cómo enlazar (III):

Selección de la dirección URL a la que se enlaza. ¿Enlazar a páginas concretas o la página general? Depende

del interés potencia de la página general, de la cantidad de información que aglutine, etc.

¿Qué hacemos con los archivos? Mejor enlazar a la página que los contiene que al archivo directamente. Si es inevitable enlazar al archivo, advertirlo.

Libro de estilo del blog de SEDIC (http://blog.sedic.es/?page_id=49) Libro de estilo del blog de SEDIC (archivo en formato PDF, 500 kb)



Cómo enlazar (IV):

Enlazar a artículos y noticias. Cuando el post es una mera cita o extracto de un artículo o noticia es recomendable usar la locución “Visto en” o “Vía” seguido de el nombre de la fuente. En caso de ser un post más elaborado, el enlace irá dentro del texto.

Enazar a post propios. Se considera una buena práctica enlazar a post anteriores para revitalizar antiguos contenidos, aprovechar los comentarios y crear un hilo conductor. Se utiliza la frase “Post relacionados” y el título de la entrada.


(4) Comentar: qué, cómo, cuándo, cuánto, dónde...



Comentarios en nuestro blogDesde el principio debemos poner cuidado en la configuración de los comentarios. Veámos las posibilidades:

- Posibilidad de entrada de spam y comentarios no pertinentes.- Nulo control sobre los comentarios.

- Agilidad para el usuario al comentar.- Fácil “captación” de nuevos usuarios

Comentarios “Libres”

- Tardanza en la publicación del comentario.- Atención por parte del administrador.

- Filtramos el spam y los comentarios no pertinentes

Comentarios moderados

- Desanimamos al usuario a comentar

- Eliminamos el Spam- Control de usuarios

Comentarios con registro previo

InconvenientesVentajasTipos de configuración



Informar al usuario.

Elaborar una política de publicación de comentarios.

Incluir mensajes de aviso sobre el estado del comentario (“Pendiente de moderación” o “Su comentario ha sido publicado”)

En los formularios debe haber un sistema de aviso de errores o los datos “requeridos” (“No se permiten comentarios anónimos” o “e-Mail incorrecto”)

Informar si los comentarios soportan imágenes o lenguaje html.



Respetar las opiniones de los lectores.

Cuando tenemos un blog y además permitimos los comentarios, nos arriesgamos a recibir críticas. Debemos asumir ese riesgo y ser humildes y respetuosos con las opiniones de los demás.

Responder a los comentarios.

No solo por educación se deben responder los comentarios, es una forma de comunicación. Los lectores se toman muchas molestias para dejar su opinión y esperan una respuesta. A veces, si no la obtienen, no vuelven a comentar.



Nuestros comentarios en otros blogs.

Comenta sólo si realmente tienes algo que aportar. Nunca comentes para promocionar tu blog. Usa un tono correcto y respetuoso. Cuida tu ortografía y tu sintaxis. Argumenta tus opiniones. Es aconsejable identificarse. No monopolices la conversación. Evita los comentarios demasiado personales.


(5) Lo que el blogger debe saber sobre XHTML



¿Por qué XHTML?

CMS permite publicar en Internet de forma sencilla, sin tener conocimientos de HTML, CSS, XML...

pero... CMS no siempre poseen todas las funcionalidades que

nos interesan CMS provocan a veces efectos indesados

Unas nociones sencillas de lenguaje de marcado (XTML) nos ayudarán a mejorar la accesibilidad y usabilidad de nuestro blog



¿Qué es XHTML?

eXtensible HyperText Markup Language es un lenguaje de marcado surgido como la evolución de HTML como estándar para la creación de páginas web

Estándar recomendado por el W3C

Ventajas: compatibilidad con aplicaciones XML, separación "semántica" entre contenidos y diseño, reducción del tamaño y tiempo de descarga de los archivos...



¿Qué es XHTML?

Separación entre los contenidos propiamente dichos (estructura de la información) [etiquetas XHTML] y el diseño [hojas de estilo CSS]

XHTML es más "simple" que HTML (porque deja de lado los aspectos de diseño), pero tiende a ser más "estricto" en su sintaxis (tiene que ser compatible con los requisitos de XML)



Consejos de adaptación

Uso de minúsculas y comillas

Las etiquetas siempre en minúsculas y los valores siempre entrecomillados

HTML<IMG SRC=logo_sedic.gif>

XHTML<img src="logo_sedic.gif">




Hay que cerrar todas las etiquetas

Cerrar siempre TODAS las etiquetas

HTMLLorem ipsum...

Lorem ipsum... 

<IMG SRC=logo_sedic.gif>

XHTMLLorem ipsum...

Lorem ipsum... 

<img src="logo_sedic.gif" />




Uso del atributo "alt": exige que, para todas las imágenes que se incluyan, se ofrezca una descripción textual "alternativa" >> ACCESIBILIDAD

Descripción textual "alternativa" para imágenes mediante uso de “alt”

HTML<IMG SRC=logo_sedic.gif>

XHTML<img src="logo_sedic.gif" alt="Logotipo de SEDIC" />




Orden de las etiquetas: deben cerrarse antes las últimas que se han abierto

"Anidar" en orden las etiquetas

HTMLIncluye palabras en negrita y cursiva.

XHTMLIncluye palabras en negrita y cursiva.




No se usan las etiquetas , (indican la "apariencia"). Usar los equivalentes y 

No usar la etiqueta , los estilos se indican en las hojas de estilo CSS

Etiquetas 

HTMLcursiva cursiva

negrita negrita

XHTMLcursiva “énfasis”

negrita</stong> “más enfasis”




Enlaces: usar el atributo “title”

Enlaces: no usar el atributo “target” frecuente en los enlaces HTML, para abrir el enlace en una nueva

ventana (target="_blank") o indicar el frame en el que abrir el enlace. Los frames han caído en desuso y el XHTML "estricto" no los contempla.

En los enlaces: Usar atributo “title” No usar atributo “target”

XHTML<a href="http://blog.sedic.es/" title="Blog de

SEDIC">Nuestro blog</a>




Siglas y abreviaturas: <acronym> y <abbr>. Para indicar el texto desarrollado usaremos también el atributo "title".

Etiquetas <acronym> y <abbr> para desarrollar siglas y abreviaturas

XHTMLBlog de <acronym title="Asociación Española de

Documentación e Información">SEDIC</acronym>




Citas: <blockquote> y <cite>: <blockquote> cuando se trate de un "bloque" de texto, una

cita extensa (se muestra por defecto “sangrado”) <cite> cuando se trate de una cita "incorporada" al texto (se

muestra por defecto en cursiva)

Etiquetas <blockquote> y <cite> para indicar que estamos "citando"

XHTMLComo dice Jakob Nielsen, <cite>Usabilidad significa hacerte las cosas

más fáciles</cite>, y no más difíciles.

Como dice Jakob Nielsen, Usabilidad significa hacerte las cosas más fáciles, y no más difíciles.




Listas numeradas: <ol>

Listas numeradas: <ol>

XHTMLEjemplo de lista numerada<ol><li>Primer ítem</li><li>Segundo ítem</li><li>Tercer ítem</li></ol>

Ejemplo de lista numerada

1. Primer ítem 2. Segundo ítem 3. Tercer ítem




Listas no numeradas: <ul>

Listas no numeradas: <ul>

XHTMLLista NO numerada<ul><li>Primer ítem</li><li>Segundo ítem</li><li>Tercer ítem</li></ul>

Lista NO numerada

● Primer ítem● Segundo ítem● Tercer ítem




Listas de definiciones: <dt> para los términos y <dd> para las definiciones

Listas de definiciones: <dt> para los términos y <dd> para las

definiciones

XHTMLLista de definiciones<dl><dt>Primer término</dt><dd>Definición del primer término</dd><dt>Segundo término</dt><dd>Definición del segundo término</dd></dl>

Lista de definiciones

Primer término

Definición del primer término

Segundo término

Definición del segundo término



¿Cómo saber que lo hemos hecho correctamente?

El W3C ofrece un "validador" automático http://validator.w3.org/ Introducir la URL que queremos comprobar en el campo

de formulario dispuesto a tal fin y pulsar el botón "Check" "Passed validation" (el XHTML de nuestra página es

correcto) "Failed validation: XX errors" (nos indicará qué errores

hemos cometido y en qué lugares de nuestro código para que podamos subsanarlos)

http://validator.w3.org/


(6) Ejercicio práctico

Travel

Taller Urbanidad Blogs[1]