Taller de urbanidad y buenas maneras en los blogs

1
Taller de urbanidad y buenas maneras en los blogs
Madrid, 2 octubre 2006
2
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

3
(0) Introducción Blogs
4
(0) Introducción Blogs

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

5
(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 gtgt conversaciones, redes de interés
• Comentarios gtgt diálogo y debate

6
(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

7
(0) Introducción Blogs
boom blogosfera

• Content Management Systems (CMS)
  herramientas de gestión y edición de contenidos

• 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

8
(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

9
(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

10
(1) Buenas maneras en el diseño y en la
presentación
11
(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)

12
(1) Buenas maneras en el diseño y en la
presentación
13
(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 gt aumenta extensión aparente
• - Pequeña gt dificulta la lectura
• Ancho de línea
• - Largos gt Pocos saltos de línea. No descansa
  la vista.
• - Cortos gt Demasiados saltos de línea. Distraen
  la lectura.
• Márgenes e interlineados

14
(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

15
(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

16
(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.
17
(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

18
(2) Redactar para la Web
19
(2) Redactar para la web

• Escribir para la web gtgt Escribir bien
• Corrección lingüística,
• ortográfica y sintáctica

20
(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
recorremos" la pantalla, repaso visual
intentando identificar áreas de interés
lectura más tranquila, relajada
lectura más cansada
21
(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.

22
(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

23
(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
24
(3) Enlazar qué, cómo, cuándo, cuánto, dónde...
25
(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.

26
(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

27
(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.

28
(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.

29
(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
30
(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_id49)
• ? Libro de estilo del blog de SEDIC (archivo en
  formato PDF, 500 kb)

31
(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.

32
(4) Comentar qué, cómo, cuándo, cuánto, dónde...
33
(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
34
(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.

35
(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.

36
(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.

37
(5) Lo que el blogger debe saber sobre XHTML
38
(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

39
(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...

40
(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)

41
(5) Lo que el blogger debe saber sobre XHTML

• Consejos de adaptación
• Uso de minúsculas y comillas

HTML ltIMG SRClogo_sedic.gifgt
XHTML ltimg src"logo_sedic.gif"gt
Las etiquetas siempre en minúsculas y los valores
siempre entrecomillados
42
(5) Lo que el blogger debe saber sobre XHTML

• Consejos de adaptación
• Hay que cerrar todas las etiquetas

HTML ltpgtLorem ipsum... ltpgtLorem
ipsum...ltbrgt ltIMG SRClogo_sedic.gifgt
XHTML ltpgtLorem ipsum...lt/pgt ltpgtLorem ipsum...ltbr
/gtlt/pgt ltimg src"logo_sedic.gif" /gt
Cerrar siempre TODAS las etiquetas
43
(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" gtgt ACCESIBILIDAD

HTML ltIMG SRClogo_sedic.gifgt
XHTML ltimg src"logo_sedic.gif" alt"Logotipo de
SEDIC" /gt
Descripción textual "alternativa" para imágenes
mediante uso de alt
44
(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 ltpgtIncluye palabras en ltbgtltigtnegrita y
cursivalt/bgtlt/igt.lt/pgt
XHTML ltpgtIncluye palabras en ltbgtltigtnegrita y
cursivalt/igtlt/bgt.lt/pgt
"Anidar" en orden las etiquetas
45
(5) Lo que el blogger debe saber sobre XHTML

• Consejos de adaptación
• No se usan las etiquetas ltbgt, ltigt (indican la
  "apariencia"). Usar los equivalentes ltstronggt y
  ltemgt
• No usar la etiqueta ltfontgt, los estilos se
  indican en las hojas de estilo CSS

XHTML ltemgtcursivalt/emgt énfasis ltstronggtnegritalt/
stonggt más enfasis
HTML ltigtcursivalt/igt cursiva ltbgtnegritalt/bgt
negrita
Etiquetas ltbgt ltigt ltfontgt
46
(5) Lo que el blogger debe saber sobre XHTML

• Consejos de adaptación
• 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.

XHTML lta href"http//blog.sedic.es/" title"Blog
de SEDIC"gtNuestro bloglt/agt
En los enlaces Usar atributo title No usar
atributo target
47
(5) Lo que el blogger debe saber sobre XHTML

• Consejos de adaptación
• Siglas y abreviaturas ltacronymgt y ltabbrgt. Para
  indicar el texto desarrollado usaremos también el
  atributo "title".

XHTML Blog de ltacronym title"Asociacioacuten
Espantildeola de Documentacioacuten e
Informacioacuten"gtSEDIClt/acronymgt
Etiquetas ltacronymgt y ltabbrgt para desarrollar
siglas y abreviaturas
48
(5) Lo que el blogger debe saber sobre XHTML

• Consejos de adaptación
• Citas ltblockquotegt y ltcitegt
• ltblockquotegt cuando se trate de un "bloque" de
  texto, una cita extensa (se muestra por defecto
  sangrado)
• ltcitegt cuando se trate de una cita "incorporada"
  al texto (se muestra por defecto en cursiva)

XHTML ltpgtComo dice ltstronggtJakob
Nielsenlt/stronggt, ltcitegtUsabilidad significa
hacerte las cosas maacutes faacutecileslt/citegt
, y no más difíciles.lt/pgt Como dice Jakob
Nielsen, Usabilidad significa hacerte las cosas
más fáciles, y no más difíciles.
Etiquetas ltblockquotegt y ltcitegt para indicar que
estamos "citando"
49
(5) Lo que el blogger debe saber sobre XHTML

• Consejos de adaptación
• Listas numeradas ltolgt

XHTML ltpgtEjemplo de lista
ltstronggtnumeradalt/stronggtlt/pgt ltolgt ltligtPrimer
ítemlt/ligt ltligtSegundo ítemlt/ligt ltligtTercer
ítemlt/ligt lt/olgt
Ejemplo de lista numerada 1. Primer ítem
2. Segundo ítem 3. Tercer ítem
Listas numeradas ltolgt
50
(5) Lo que el blogger debe saber sobre XHTML

• Consejos de adaptación
• Listas no numeradas ltulgt

XHTML ltpgtLista NO numeradalt/pgt ltulgt ltligtP
rimer ítemlt/ligt ltligtSegundo ítemlt/ligt ltligtTercer
ítemlt/ligt lt/ulgt

• Lista NO numerada
• Primer ítem
• Segundo ítem
• Tercer ítem

Listas no numeradas ltulgt
51
(5) Lo que el blogger debe saber sobre XHTML

• Consejos de adaptación
• Listas de definiciones ltdtgt para los términos y
  ltddgt para las definiciones

Lista de definiciones Primer término
Definición del primer término Segundo término
Definición del segundo término
XHTML ltpgtLista de definicioneslt/pgt ltdlgt lt
dtgtPrimer términolt/dtgt ltddgtDefinición del primer
términolt/ddgt ltdtgtSegundo términolt/dtgt ltddgtDefinici
ón del segundo términolt/ddgt lt/dlgt
Listas de definiciones ltdtgt para los términos y
ltddgt para las definiciones
52
(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)

53
(6) Ejercicio práctico