Taller de urbanidad y buenas maneras en los blogs
Download
Report
Transcript Taller de urbanidad y buenas maneras en los blogs
Taller de urbanidad y buenas
maneras en los blogs
Madrid, 2 octubre 2006
Contenidos
(1) Introducción: Blogs
(2) Buenas maneras en el diseño y la presentación del blog
(3) Redactar para la web
(4) Enlazar: qué, cuándo, cuánto, dónde...
(5) Comentar: qué, cuándo, cuánto, dónde...
(6) Lo que el blogger debe saber sobre XHTML
(7) Ejercicio práctico
BLOG DE SEDIC
2 de 53
(0) Introducción: Blogs
BLOG DE SEDIC
3 de 53
(0) Introducción: Blogs
¿Cuál es la diferencia entre estas páginas?
BLOG DE SEDIC
4 de 53
(0) Introducción: Blogs
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
BLOG DE SEDIC
5 de 53
(0) Introducción: Blogs
Anatomía de un post:
Título
Texto del post
(hiperenlaces)
Fecha de publicación
Autor
Permalink o enlace
permanente
Comentarios
Categorías
BLOG DE SEDIC
6 de 53
(0) Introducción: Blogs
Content Management
Systems (CMS)
herramientas de gestión
y edición de contenidos
BLOG DE SEDIC
“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
7 de 53
(0) Introducción: Blogs
Amplio abanico de
posibilidades:
Código propietario /
libre
Gratuitos / de pago
Sólo el sistema de
edición / CMS + servicios
de alojamiento
BLOG DE SEDIC
8 de 53
(0) Introducción: Blogs
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
BLOG DE SEDIC
9 de 53
(1) Buenas maneras en el diseño
y en la presentación
BLOG DE SEDIC
10 de 53
(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)
BLOG DE SEDIC
11 de 53
(1) Buenas maneras en el diseño y en la presentación
BLOG DE SEDIC
Color
Sensación
El exceso produce
BLANCO
Pureza, limpieza, simplicidad
---
LAVANDA
Equilibrio
Cansado y desorientado
PLATA
Paz, neutralidad
---
GRIS
Estabilidad
---
AMARILLO
Tibieza, innovación
Produce agotamiento
Genera demasiada
actividad mental
NARANJA
Energía
Aumenta la ansiedad
ROJO
Energía, vitalidad, poder, fuerza,
agresividad, impulsivo
Agitación, tensión
AZUL
Serenidad, armonía. Equilibrio.
Depresión, aflicción,
pesadumbre
VERDE
Moderado, equilibrado,
tradicional
Crea energía negativa
NEGRO
Silencio, elegancia.
Intimidatorio
12 de 53
(1) Buenas maneras en el diseño y en la presentación
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
BLOG DE SEDIC
13 de 53
(1) Buenas maneras en el diseño y en la presentación
Debemos evitar:
Uso injustificado de
MAYUSCULAS
Eskritura ko0l.
Textos Multicolores
Los subrayados
No debemos abusar de:
Las cursivas
Las negritas
BLOG DE SEDIC
14 de 53
(1) Buenas maneras en el diseño y en la presentación
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
BLOG DE SEDIC
15 de 53
(1) Buenas maneras en el diseño y en la presentación
El menú del blog
¿A la derecha o izquierda?
Mejor corto.
Información relevante y
organizada por orden de
importancia.
Lo importante es que esté bien identificado, bien
organizado y contenga la información precisa y
relevante.
BLOG DE SEDIC
16 de 53
(1) Buenas maneras en el diseño y en la presentación
Elementos del menú del blog
Información sobre el blog.
Categorías
Archivos temporales
Últimas entradas.
Buscador
Elementos de sindicación
BLOG DE SEDIC
17 de 53
(2) Redactar para la Web
BLOG DE SEDIC
18 de 53
(2) Redactar para la web
Escribir para la web >> Escribir bien
Corrección lingüística,
ortográfica y sintáctica
BLOG DE SEDIC
19 de 53
(2) Redactar para la web
No leemos de igual manera en la pantalla de un
ordenador que en un papel
leemos de forma secuencial,
atenta y detenida
lectura más tranquila,
relajada
BLOG DE SEDIC
“recorremos" la pantalla,
repaso visual intentando
identificar áreas de interés
lectura más cansada
20 de 53
(2) Redactar para la web
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.
BLOG DE SEDIC
21 de 53
(2) Redactar para la web
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
BLOG DE SEDIC
22 de 53
(2) Redactar para la web
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
BLOG DE SEDIC
23 de 53
(3) Enlazar: qué, cómo,
cuándo, cuánto, dónde...
BLOG DE SEDIC
24 de 53
(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.
BLOG DE SEDIC
25 de 53
(3) Enlazar: qué, cómo, cuándo, cuánto, dónde...
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
BLOG DE SEDIC
26 de 53
(3) Enlazar: qué, cómo, cuándo, cuánto, dónde...
Cuántos enlaces:
Un número excesivo de enlaces, interrumpe el flujo
narrativo del post y provoca cierta desorientación en
el usuario.
BLOG DE SEDIC
27 de 53
(3) Enlazar: qué, cómo, cuándo, cuánto, dónde...
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“.
BLOG DE SEDIC
28 de 53
(3) Enlazar: qué, cómo, cuándo, cuánto, dónde...
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”
BLOG DE SEDIC
29 de 53
(3) Enlazar: qué, cómo, cuándo, cuánto, dónde...
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)
BLOG DE SEDIC
30 de 53
(3) Enlazar: qué, cómo, cuándo, cuánto, dónde...
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.
BLOG DE SEDIC
31 de 53
(4) Comentar: qué, cómo,
cuándo, cuánto, dónde...
BLOG DE SEDIC
32 de 53
(4) Comentar: qué, cómo, cuándo, cuánto, dónde...
Comentarios en nuestro blog
Desde el principio debemos poner cuidado en la configuración de los
comentarios. Veámos las posibilidades:
Tipos de configuración
Ventajas
Inconvenientes
Comentarios con
registro previo
- Eliminamos el Spam
- Control de usuarios
- Desanimamos al usuario a
comentar
Comentarios
moderados
- Filtramos el spam y los
comentarios no pertinentes
- Tardanza en la publicación
del comentario.
- Atención por parte del
administrador.
Comentarios “Libres”
- Agilidad para el usuario al
comentar.
- Fácil “captación” de nuevos
usuarios
- Posibilidad de entrada de
spam y comentarios no
pertinentes.
- Nulo control sobre los
comentarios.
BLOG DE SEDIC
33 de 53
(4) Comentar: qué, cómo, cuándo, cuánto, dónde...
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.
BLOG DE SEDIC
34 de 53
(4) Comentar: qué, cómo, cuándo, cuánto, dónde...
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.
BLOG DE SEDIC
35 de 53
(4) Comentar: qué, cómo, cuándo, cuánto, dónde...
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.
BLOG DE SEDIC
36 de 53
(5) Lo que el blogger debe
saber sobre XHTML
BLOG DE SEDIC
37 de 53
(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
BLOG DE SEDIC
38 de 53
(5) Lo que el blogger debe saber sobre XHTML
¿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...
BLOG DE SEDIC
39 de 53
(5) Lo que el blogger debe saber sobre XHTML
¿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)
BLOG DE SEDIC
40 de 53
(5) Lo que el blogger debe saber sobre XHTML
Consejos de adaptación
Uso de minúsculas y comillas
HTML
<IMG SRC=logo_sedic.gif>
XHTML
<img src="logo_sedic.gif">
Las etiquetas siempre en minúsculas y
los valores siempre entrecomillados
BLOG DE SEDIC
41 de 53
(5) Lo que el blogger debe saber sobre XHTML
Consejos de adaptación
Hay que cerrar todas las etiquetas
HTML
<p>Lorem ipsum...
<p>Lorem ipsum...<br>
XHTML
<p>Lorem ipsum...</p>
<p>Lorem ipsum...<br /></p>
<IMG SRC=logo_sedic.gif>
<img src="logo_sedic.gif" />
Cerrar siempre TODAS las etiquetas
BLOG DE SEDIC
42 de 53
(5) Lo que el blogger debe saber sobre XHTML
Consejos de adaptación
Uso del atributo "alt": exige que, para todas las
imágenes que se incluyan, se ofrezca una descripción
textual "alternativa" >> ACCESIBILIDAD
HTML
<IMG SRC=logo_sedic.gif>
XHTML
<img src="logo_sedic.gif" alt="Logotipo de SEDIC" />
Descripción textual "alternativa" para
imágenes mediante uso de “alt”
BLOG DE SEDIC
43 de 53
(5) Lo que el blogger debe saber sobre XHTML
Consejos de adaptación
Orden de las etiquetas: deben cerrarse antes las
últimas que se han abierto
HTML
<p>Incluye palabras en <b><i>negrita y cursiva</b></i>.</p>
XHTML
<p>Incluye palabras en <b><i>negrita y cursiva</i></b>.</p>
"Anidar" en orden las etiquetas
BLOG DE SEDIC
44 de 53
(5) Lo que el blogger debe saber sobre XHTML
Consejos de adaptación
No se usan las etiquetas <b>, <i> (indican la
"apariencia"). Usar los equivalentes <strong> y
<em>
No usar la etiqueta <font>, los estilos se indican en
las hojas de estilo CSS
HTML
<i>cursiva</i> cursiva
<b>negrita</b> negrita
XHTML
<em>cursiva</em> “énfasis”
<strong>negrita</stong> “más enfasis”
Etiquetas <b> <i> <font>
BLOG DE SEDIC
45 de 53
(5) Lo que el blogger debe saber sobre XHTML
Consejos de adaptación
Enlaces: usar el atributo “title”
XHTML
<a href="http://blog.sedic.es/" title="Blog de
SEDIC">Nuestro blog</a>
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”
BLOG DE SEDIC
46 de 53
(5) Lo que el blogger debe saber sobre XHTML
Consejos de adaptación
Siglas y abreviaturas: <acronym> y <abbr>.
Para indicar el texto desarrollado usaremos también
el atributo "title".
XHTML
Blog de <acronym title="Asociación Española de
Documentación e Información">SEDIC</acronym>
Etiquetas <acronym> y <abbr> para
desarrollar siglas y abreviaturas
BLOG DE SEDIC
47 de 53
(5) Lo que el blogger debe saber sobre XHTML
Consejos de adaptación
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)
XHTML
<p>Como dice <strong>Jakob Nielsen</strong>, <cite>Usabilidad significa hacerte las cosas
más fáciles</cite>, y no más difíciles.</p>
Como dice Jakob Nielsen, Usabilidad significa hacerte las cosas más fáciles, y no más difíciles.
Etiquetas <blockquote> y <cite> para
indicar que estamos "citando"
BLOG DE SEDIC
48 de 53
(5) Lo que el blogger debe saber sobre XHTML
Consejos de adaptación
Listas numeradas: <ol>
XHTML
<p>Ejemplo de lista
<strong>numerada</strong></p>
<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 numeradas: <ol>
BLOG DE SEDIC
49 de 53
(5) Lo que el blogger debe saber sobre XHTML
Consejos de adaptación
Listas no numeradas: <ul>
XHTML
<p>Lista NO numerada</p>
<ul>
<li>Primer ítem</li>
<li>Segundo ítem</li>
<li>Tercer ítem</li>
</ul>
Lista NO numerada
●
●
●
Primer ítem
Segundo ítem
Tercer ítem
Listas no numeradas: <ul>
BLOG DE SEDIC
50 de 53
(5) Lo que el blogger debe saber sobre XHTML
Consejos de adaptación
Listas de definiciones: <dt> para los términos y
<dd> para las definiciones
XHTML
Lista de definiciones
<p>Lista de definiciones</p>
<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>
BLOG DE SEDIC
Primer término
Definición del primer término
Segundo término
Definición del segundo término
Listas de definiciones: <dt> para los
términos y <dd> para las
definiciones
51 de 53
(5) Lo que el blogger debe saber sobre XHTML
¿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)
BLOG DE SEDIC
52 de 53
(6) Ejercicio práctico
BLOG DE SEDIC
53 de 53