Download administracion de portales municipales inpro

ADMINISTRACION DE PORTALES
MUNICIPALES INPRO
Desarrollado por INPRO
Fecha: 18 de febrero de 2009
Versión: 1.0
Curso Administración de Portales Municipales INPRO
1.
Objetivos del Curso................................................................ 4
2.
Estándares WEB .................................................................... 4
3.
2.1.
Sugerencias útiles ..................................................................... 6
2.2.
Conclusiones............................................................................ 6
2.3.
Recursos importantes ................................................................. 8
Diseño Web.......................................................................... 9
3.1.
Conceptos Generales.................................................................. 9
3.2.
Nociones HTML ....................................................................... 11
3.2.1.
3.3.
Nociones CSS ......................................................................... 13
3.3.1.
3.3.2.
3.3.3.
3.4.
Xnview .................................................................................... 17
Conversor de vídeos .................................................................... 17
Estructura y Organización de los Portales Municipales de INPRO ......18
4.1.
Estructura de carpetas en OpenCMS.............................................. 18
4.1.1.
4.1.2.
4.2.
Pestañas de los menús principales: .................................................. 18
Resto de carpetas....................................................................... 19
Contenidos en Base de Datos ...................................................... 20
4.2.1.
4.2.2.
4.2.3.
4.2.4.
4.2.5.
5.
Reutilización de imágenes............................................................. 16
Animaciones en la web................................................................. 16
El formato más eficiente para sus imágenes ....................................... 16
Herramientas ......................................................................... 17
3.5.1.
3.5.2.
4.
Cómo funcionan ......................................................................... 13
Hojas de estilo incrustadas............................................................ 14
Hojas de estilo en línea................................................................ 15
Diseño gráfico ........................................................................ 15
3.4.1.
3.4.2.
3.4.3.
3.5.
Códigos HTML básicos .................................................................. 11
Utilidades ................................................................................ 20
Enlaces de Oficina Virtual ............................................................. 21
Canales de suscripción ................................................................. 21
Encuestas................................................................................. 21
Libro de visitas .......................................................................... 21
ADMINISTRACIÓN DE LOS PORTALES MUNICIPALES DE INPRO ............22
5.1.
Administrador OpenCMS ............................................................ 22
5.1.1.
Definición de Contenidos estructurados de OpenCMS............................. 22
5.1.1.1
RSS ..................................................................................... 22
5.1.1.2
Bandos y Boletines .................................................................. 22
5.1.2.
Carpetas Extendidas.................................................................... 23
Página 2 de 33
Curso Administración de Portales Municipales INPRO
5.2.
Administrador de Base de Datos .................................................. 23
5.2.1.
5.2.2.
6.
ACCESIBILIDAD Y USABILIDAD...................................................24
6.1.
Conceptos (Usabilidad y accesibilidad) .......................................... 24
6.1.1.
6.1.2.
6.2.
Usabilidad ................................................................................ 24
Beneficios de la usabilidad ............................................................ 25
Pautas de accesibilidad en la Web................................................ 25
6.2.1.
6.2.2.
Pautas..................................................................................... 26
Accesibilidad del contenido: 10 pasos............................................... 26
6.3.
Herramientas de evaluación ....................................................... 27
6.4.
Enlaces de interés de accesibilidad .............................................. 27
6.5.
Consejos de usabilidad.............................................................. 28
6.5.1.
7.
Empresas Municipales .................................................................. 23
Formulario de Alta de Empresarios .................................................. 24
¿Cuales son las 8 reglas de Oro sobre la usabilidad? .............................. 28
PROTECCIÓN DE DATOS ..........................................................30
7.1.
Qué es la Protección de Datos..................................................... 30
7.2.
Leyes LSSI y LOPD.................................................................... 30
7.3.
Obligaciones .......................................................................... 30
7.4.
Consejos............................................................................... 30
Página 3 de 33
Curso Administración de Portales Municipales INPRO
1. Objetivos del Curso
El objetivo principal de este curso es el de conseguir que los administradores de los
Portales Municipales de INPRO saquen un mayor partido de las herramientas puestas
a su disposición haciendo que sus Portales sean más eficientes, usables y accesibles.
Imagen 1
Para alcanzar este objetivo es necesario que el administrador cambie su forma de
trabajo actual mediante la aceptación de una serie de normas.
Otro de los objetivos es el de conocer un poco mejor la herramienta actual y
mostraros algunas novedades.
2. 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.
Imagen 2
Son un conjunto de tecnologías orientadas a 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.
Lamentablemente muchos diseñadores web solamente conocen las aplicaciones,
que les permiten generar sus páginas web y no conocen, el código que hace que esas
páginas funcionen.
Para poder desarrollar sitios web es necesario tener conocimientos de:
Página 4 de 33
Curso Administración de Portales Municipales INPRO
•
HTML (Hipertext Markup Language – Lenguaje de Marcas de Hipertexto) para
crear documentos. En la actualidad, la versión de HTML más recomendada es
XHTML 1.1, el sucesor de HTML 4. Una combinación del clásico HTML y el muy
potente XML. 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 en
los buscadores.
•
CSS (Cascading Style Sheets – Hojas de Estilo en Cascada) para manejar su
apariencia.
•
DTD (Document Type Definitions), indica las reglas de HTML que estamos
usando en una página web. Cada página debe contener, como primer
elemento, información sobre el DTD usado. Esto es importante para que los
navegadores sepan como comportarse, y para que además, los validadores
puedan verificar las páginas.
Debes probar tus diseños en un navegador compatible con los estándares web:
Mozilla Firefox, Opera o Safari son los recomendables. También es necesario
probar como lucen en navegadores que no soportan completamente los
estándares, como Internet Explorer. Desgraciadamente, este navegador es el más
utilizado por los usuarios en todo el mundo.
Imagen 3
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: El contenido es rey.
Página 5 de 33
Curso Administración de Portales Municipales INPRO
Añadir enlace a artículo: documentos\el_contenido_el_rey.pdf
2.1. Sugerencias útiles
Las siguientes sugerencias le ayudarán a tener un sitio web estándar cuyos
contenidos podrán ser accedidos por el mayor número de navegadores y de personas:
Valida tu código: Este paso es sumamente importante para confirmar
que nuestros documentos han sido creados correctamente, respetando los estándares
recomendados. Veremos como realizar este paso en el apartado de accesibilidad.
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.
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.
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 navegadores y dispositivos, 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?
2.2. 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.
Página 6 de 33
Curso Administración de Portales Municipales INPRO
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.
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.
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 cellpadding (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.
Página 7 de 33
Curso Administración de Portales Municipales INPRO
2.3. Recursos importantes
•
Algunos recursos útiles para continuar tu estudio del uso de estándares web:
•
El weblog de Steve Smith ha recolectado una lista de links que podrían ser
considerados la crema y nata del diseño basado en estándares web.
•
La mejor lista de discusión sobre CSS: CSS Discuss.
•
La guía de estilo de la biblioteca de Nueva York tiene una serie de reglas
sumamente útiles para el uso de XHTML.
•
Si quieres entender CSS rápidamente, Wendy Peck nos explica lo básico en
CSS 101.
•
Validador HTML.
•
Validador CSS.
•
Mayor información sobre estándares web en los sitios de Web Standards
Project y World Wide Web Consortium W3C.
Página 8 de 33
Curso Administración de Portales Municipales INPRO
3. Diseño Web
3.1. Conceptos Generales
Existen tres cuestiones generales a tener en cuenta en el diseño de una página web.
Estas cuestiones están sacadas de la experiencia diaria en el uso de páginas web y
son las siguientes:
1. Los usuarios tienen muy poca paciencia con los sitios web con un diseño
pobre. Una buena organización da al usuario confianza de que va a encontrar
aquello que busca.
2. Los usuarios no quieren utilizar barras de desplazamiento. La información que
no aparece en primer lugar en la página, sólo es accedida por las personas
muy interesadas.
3. Los usuarios no quieren leer. La velocidad de lectura es menor en una
pantalla que en papel. Los usuarios suelen pasar texto sin interés, como
mensajes de bienvenida o introducción, y buscan aquello que destaca, como
los enlaces de hipertexto.
Un estudio realizado por la universidad de Stanford, concluye en que las personas no
emplean criterios rigurosos al evaluar la credibilidad de un sitio Web.
En dicho estudio, realizado el 25/1/07 se determina que: el diseño visual fue el
aspecto más señalado con el 46,1% de las 2,684 personas participantes para valorar si
una Web es o no creíble.
Los resultados analizados demuestran que crear un sitio Web solamente con
información de calidad no es suficiente para ganar credibilidad en las mentes de los
usuarios. Aspectos tales como la disposición de los elementos en la pantalla, la
elección de la tipografía, el tamaño de las fuentes utilizadas, los espacios en blanco,
las imágenes y los esquemas de color, entre otras cosas, influyen en la percepción de
los usuarios de manera determinante.
Es decir, el diseño visual será la primera prueba en la credibilidad de un sitio. Si
falla en este criterio, los usuarios probablemente abandonarán el mismo y buscarán
otras fuentes de información y de servicios.
Es importante observar que “verse bien” es interpretado a menudo como ser bueno y
ser creíble.
Los tópicos más influyentes revelados por el estudio sobre “que hacer” y “que no
hacer” a la hora de diseñar visualmente para la credibilidad son los siguientes:
•
Organizar la información pensando en el usuario:
Página 9 de 33
Curso Administración de Portales Municipales INPRO
•
•
o
Un sitio bien organizado es la antítesis de un sitio que confunda y
engañe al usuario hacia anuncios u otras promociones.
o
Los usuarios emplean poco tiempo en cada página, moviéndose
rápidamente entre ellas. Según el estudio, los sitios fáciles de navegar
fueron percibidos como los más creíbles.
o
Cómo se estructure y presente la información será crítico para el éxito
del sitio en la Web, y ha demostrado contribuir en las opiniones sobre
credibilidad. La razón detrás de esta constante no está
completamente clara. Se podría especular que proporcionando una
estructura de información ordenada y clara, el equipo de diseño
involucrado demuestra maestría a los usuarios. Los usuarios pueden
entonces asumir que esta maestría se extiende a la calidad de la
información del sitio.
Foco de la información en relación a la función:
o
Un sitio bien enfocado es visto como más creíble. Cómo se jerarquizan
y disponen los temas presentados en la pantalla impactan al momento
de percibir un sitio Web.
o
Se sospecha que en muchos de los casos, al navegar la Web los
usuarios no necesariamente leen en profundidad toda la información
brindada. Pero que simplemente teniéndola disponible, se produce la
sensación de credibilidad.
o
Dependiendo del tipo de sitio visitado, los usuarios tienen expectativas
más claras sobre el foco. Se especula que las expectativas sobre el
foco del sitio son más altas para los tipos de sitios con información que
la gente conoce mejor.
Publicidad:
o
No proporcionar una línea clara entre la publicidad y el sitio mismo se
ha demostrado afecta la credibilidad del sitio.
o
Cuando la publicidad invade el contenido del sitio Web es mal
percibido por los usuarios, ya que en mucho de los casos lo conducen a
creer que el contenido del sitio es controlado por el patrocinador o
que el contenido está conectado con el anuncio.
o
Los popups publicitarios son ampliamente los peor percibidos.
o
Contar visualmente con una línea clara entre el contenido y los
anuncios es importante, de modo que los patrocinadores no
comprometan la información del sitio Web.
En la mayoría de los de los casos los diseñadores de sitios Web necesitaremos
también centrarnos en la impresión que el diseño visual generará, creando un sitio
Página 10 de 33
Curso Administración de Portales Municipales INPRO
que alcance lo que describieron muchos de los participantes del estudio como
"mirada limpia, ordenada y profesional."
Para consultar el informe completo (PDF 1,21MB):
http://www.consumerwebwatch.org/pdfs/stanfordptl.pdf
3.2. Nociones HTML
Un lenguaje de marcas es una forma de indicar el aspecto que va a presentar un
documento de texto, mediante unas instrucciones incluidas en el mismo documento.
Por ejemplo: [comienzo_negrita] Inpro [fin_negrita].
Indica que el texto “Inpro” debe aparecer en negrita. Las cadenas
[comienzo_negrita] y [fin_negrita] son parte del lenguaje de marcas.
Por lo tanto, un lenguaje de marcas como es el HTML, no es más que una colección
de código dentro de un documento de texto, que especifican el formato deseado
para dicho texto.
3.2.1. Códigos HTML básicos
<html>: define el inicio del documento HTML, le indica al navegador que lo que
viene a continuación debe ser interpretado como código HTML.
<head>: define la cabecera del documento HTML, esta cabecera suele contener
información sobre el documento que no se muestra directamente al usuario. Como
por ejemplo el título de la ventana del navegador. Dentro de la cabecera <head>
podemos encontrar:
Un ejemplo de código HTML con coloreado de sintaxis.
<title>: define el título de la página. Por lo general, el título aparece en la barra de
título encima de la ventana
Página 11 de 33
Curso Administración de Portales Municipales INPRO
<link>: para vincular el sitio a hojas de estilo o iconos Por ejemplo:<link
rel="stylesheet" href="/style.css" type="text/css">
<style>: para colocar el estilo interno de la página, ya sea usando CSS, JavaScript u
otros lenguajes similares. No es necesario colocarlo si se va a vincular a un archivo
externo usando la etiqueta <link>
<body>: define el contenido principal o cuerpo del documento. Esta es la parte del
documento html que se muestra en el navegador; dentro de esta etiqueta pueden
definirse propiedades comunes a toda la página, como color de fondo y márgenes.
Dentro del cuerpo <body> podemos encontrar numerosas etiquetas. A continuación se
indican algunas a modo de ejemplo:
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>: encabezados o títulos del documento con
diferente relevancia.
<table>: define una tabla
<tr>: fila de una tabla
<td>: celda de datos de una tabla
<a>: Hipervínculo o enlace, dentro o fuera del sitio web. Debe definirse el parámetro
de pasada por medio del atributo href. Por ejemplo: <a
href="http://www.dipusevilla.es">Diputación de Sevilla</a> se representa como
Diputación de Sevilla).
<div>: área de la página
<img>: imagen. Requiere del atributo src, que indica la ruta en la que se encuentra
la imagen. Por ejemplo: <img src="./imagenes/mifoto.jpg" />
<li><ol><ul>: Etiquetas para listas.
<strong>: texto en negrita
<em>: texto en cursiva
<u>: texto subrayado
La mayoría de etiquetas deben cerrarse como se abren, pero con una barra ("/") tal
como se muestra en los siguientes ejemplos:
<table><tr><td>Contenido de una celda</td></tr></table>
Seleccionando la opción Ver código fuente en el navegador, se puede ver realmente
la información que está recibiendo éste y cómo la está interpretando.
Página 12 de 33
Curso Administración de Portales Municipales INPRO
3.3. Nociones CSS
Las Hojas de Estilo (o CSS, por Cascading StyleSheets) son un mecanismo que
permiten aplicar formato a los documentos escritos en HTML (y en otros lenguajes
estructurados, como XML) separando el contenido de las páginas de su apariencia.
Para el diseñador, esto significa que la información estará contenida en la página
HTML, pero este archivo no debe definir cómo será visualizada esa información. Las
indicaciones acerca de la composición visual del documento estarán especificadas en
el archivo de la CSS.
3.3.1. Cómo funcionan
Veamos primero como trabaja el código HTML. En HTML, las etiquetas (tags) le
indican al navegador los elementos que componen la página y éste aplica el formato
a cada elemento en particular, por ejemplo:
<H1>Título</H1>
Especifica que el texto "Título" es un Encabezado (Heading) de nivel 1 dentro de los 6
niveles definidos por HTML. El navegador aplicará a ese texto el formato
predeterminado (que varía un poco si se trata de Internet Explorer, Netscape, o si
usamos Windows, Mac o Linux).
Si quisiéramos componer los encabezados H1 con tipografía Arial, de 19 puntos, en
color azul y alineación central, deberíamos especificarlo del siguiente modo:
<H1 ALIGN="center">
<FONT FACE="Arial" COLOR="#0000FF" SIZE="5">Título</FONT>
</H1>
Por supuesto, esto debería repetirse en cada encabezado H1 de cada página de
nuestro sitio.
Las Hoja de Estilo no utilizan el archivo de la página Web para especificar el formato
de la página (en realidad, a veces pueden hacerlo, como veremos más adelante). En
su lugar, usan un archivo de texto puro con extensión .CSS que luego se vincula a la
página.
Este archivo contiene reglas que constan de un selector (en este ejemplo, H1) y una
o más declaraciones (en el ejemplo tenemos cuatro declaraciones). Cada declaración
tiene dos partes: una propiedad (por ejemplo, FONT SIZE) y un valor (en este caso,
19pt). Estas reglas son las que determinan cómo deberá mostrarse la página.
Nuevamente, si quisiéramos componer los encabezados H1 con tipografía Arial, de 19
puntos, en color azul y alineación central, el archivo CSS debería contener el
siguiente texto:
H1 {
Página 13 de 33
Curso Administración de Portales Municipales INPRO
font-family: Arial, Sans-serif;
font-size: 19pt;
color: #0000FF;
text-align: center;
}
Luego, en cada página de nuestro sitio agregamos un link a la Hoja de Estilo:
<LINK REL="stylesheet" HREF="hoja_de_estilo.css" TYPE="text/css">
El elemento LINK especifica:
•
•
•
el tipo de vínculo: a una hoja de estilo ("stylesheet")
la ubicación de la hoja de estilo a través del atributo "href"
el tipo de hoja de estilo que se vincula: "text/css"
Ahora, todos los encabezado H1 de las páginas que contienen la referencia al archivo
de la CSS tendrán el aspecto que hemos definido.
3.3.2. Hojas de estilo incrustadas
Hemos visto cómo las reglas de estilo se especifican en un archivo externo. Este
método es el más recomendable y el que permite mayor flexibilidad: los estilos
pueden cambiarse sin tocar el código HTML y la CSS puede ser compartida por varias
páginas.
También existe la posibilidad de poner la hoja de estilo dentro de una página HTML
usando el elemento STYLE.
<HTML>
<HEAD>
<TITLE>CSS incrustada</TITLE>
<STYLE type="text/css">
H1 { color: blue }
</STYLE>
</HEAD>
<BODY>
<H1>Título color azul</H1>
<P>Un párrafo cualquiera...</P>
</BODY>
</HTML>
Como se ve en el ejemplo, el elemento STYLE se usa dentro del encabezado
(<HEAD></HEAD>) de la página, especificando el tipo de hoja de estilo:
<STYLE type="text/css">
H1 { color: blue }
... (aquí se agregan todas las reglas de estilo) ...
</STYLE>
Página 14 de 33
Curso Administración de Portales Municipales INPRO
Este método permite aplicar la hoja de estilo solamente a la página que la contiene.
Si bien no es tan práctico como usar una CSS externa, resulta útil cuando en nuestro
sitio tenemos algunas pocas páginas que usan un formato distinto al resto.
En muchos casos convendrá usar ambos métodos simultáneamente: poner un link a
una hoja externa para aplicar un estilo general y luego crear una hoja incrustada en
la que solamente deberemos definir las reglas específicas para esa página. Por las
leyes de cascada de las CSS, en caso de existir una misma regla (una en la hoja
externa, otra en la hoja incrustada) con distintos valores, tiene preponderancia la
definida en la hoja incrustada.
3.3.3. Hojas de estilo en línea
Por último, también es posible aplicar el estilo directamente en la etiqueta HTML:
<P STYLE="text-align: left; text-indent: 1em">
Por supuesto, la definición del estilo dentro de la propia etiqueta (tag) no es la
manera más eficaz de utilizar las hojas de estilo, pero pueden existir casos que lo
justifiquen. La existencia de una regla como la del último ejemplo constituye por sí
misma una hoja de estilo por lo que debemos declarar en el encabezado de la página
el tipo de CSS que estamos usando.
<STYLE type="text/css"></STYLE>
Esta declaración no será necesaria si en la misma página estamos usando una hoja de
estilo incrustada o si existe una referencia a una hoja externa.
Esta forma de aplicar la hoja de estilo directamente en la etiqueta es similar al modo
usado en el código HTML, pero con dos importantes diferencias:
1. El conjunto de propiedades que se pueden aplicar es mucho mayor y
2. Los estilos especificados en una hoja de estilo (cualquiera sea su origen) tienen
preferencia por sobre los formatos aplicados con HTML.
Esto significa que si en nuestra hoja de estilo hemos definido:
P {text-align: left}
Todos los párrafos quedarán alineados por la izquierda y, si en un párrafo
determinado, usamos: <P align="center">, el párrafo seguirá estando alineado por la
izquierda porque las reglas de las CSS tienen más fuerza que el formato aplicado con
HTML.
3.4. Diseño gráfico
Página 15 de 33
Curso Administración de Portales Municipales INPRO
Uno de los factores que más dan que hablar es la inclusión de imágenes de todas las
clases - las fotografías, diagramas, ilustraciones, multimedia etc.
Los usuarios culparon a las imágenes por muchos de los problemas de carga y de
utilidad que pueblan la red. Las imágenes atraen y distraen a usuarios por igual, es
importante limitar los gráficos. La reducción de imágenes es también una
herramienta para asegurarse de que sus Web están en un tamaño apropiado.
3.4.1. Reutilización de imágenes
Cuando utiliza una imagen, considere el reutilizarla en otras páginas. Los
navegadores de hoy pueden guardar imágenes, lo que significa que no tiene que ser
descargada otra vez la próxima vez que una página se cargue con esa imagen.
La reutilización también tiene la ventaja de dar al usuario un sentido de la
familiaridad con su sitio. Dentro de un web, reutilice cualquier tipo de recurso
flechas, botones, o iconos. También puede utilizar una foto distinta en cada página
de su web, si así lo desea, pero intente que estas imágenes pesen lo menos posible,
el usuario se lo agradecerá.
3.4.2. Animaciones en la web
Las animaciones son particularmente molestas y pueden conducir a los usuarios a
alejarse de un web o de un sitio. No utilice la animación a menos que sea realmente
necesaria para el contenido de su página.
El movimiento gratuito en las páginas del web, molesta a usuarios y no tiene en
cuenta el hecho de que muchos de ellos tienen viejas versiones de navegadores o no
tienen los más nuevos sistemas de reproducción disponibles, (contrario a lo que
creen algunos diseñadores, los usuarios no descargarán un plug-in nuevo, porque su
página lo requiera).
3.4.3. El formato más eficiente para sus imágenes
En una página web, únicamente pueden visualizarse imágenes con los formatos JPG,
GIF y PNG. Usar un formato inadecuado puede doblar o triplicar el tamaño del
archivo y del tiempo de la transferencia desde el servidor.
Utilice siempre el formato más eficiente para sus imágenes. Para las fotografías,
utilice el JPEG con tanta compresión como sea posible aunque para que no se pierda
mucho su calidad, se recomienda una compresión del 80%. La reducción en la
resolución mejora la transferencia directa de la imagen. Las imágenes JPG no
admiten transparencias.
Página 16 de 33
Curso Administración de Portales Municipales INPRO
Las imágenes GIF, sin embargo son más indicadas para imágenes con pocos colores, o
bien, imágenes que contengan gran cantidad de texto ya que permiten que se lea con
más claridad. Admiten las transparencias y no se pierde calidad de la imagen al
comprimir con gif.
PNG (Portable Network Graphics) es un formato gráfico desarrollado en buena parte
para solventar las deficiencias del formato GIF, como por ejemplo su limitación a
paletas de 8 bits de 256 colores como máximo, es capaz de soportar millones de
colores. Además, mejora su método de compresión y también admite transparencias.
Recomendaciones importantes para formatear adecuadamente las imágenes para la
web son:
•
Las imágenes deben tener una resolución de 72 o 75 ppp (píxeles por
pulgada). Un monitor de ordenador es incapaz de mostrar una imagen con una
resolución mayor a esa, por lo tanto, rebajando la resolución, conseguimos
que se vea igual de bien, disminuyendo el tamaño de la imagen.
•
No es recomendable insertar en una página imágenes demasiado grandes. Una
sóla página de una web pesa la suma de todas las imágenes, animaciones,
textos, etc… que carga al llamarla. Por ejemplo, si una página tiene 3
imágenes de 150 Kb. cada una y 30 Kb. de texto, la página pesa 3x150 + 30, es
decir, 480 Kb., el tiempo de descarga en este caso es bastante grande. No se
recomienda que una página pese más de 200 Kb. en total, así que el tamaño
de las imágenes debe ser lo más pequeño posible, siempre teniendo en cuenta
el diseño de la web. Se recomiendan unos 20 Kb. por imagen, por ejemplo.
Una imagen debe ser de alta de resolución únicamente si está destinada a ser
impresa (puesto que las impresoras necesitan una resolución mucho más alta).
No olvide de incluir el atributo ALT (descripción del gráfico) a cada imagen. Este
atributo representa el texto alternativo que se mostrará si la imagen no aparece o
bien el navegador no es capaz de mostrarla. Esto es primordial para mantener la web
accesible.
3.5. Herramientas
3.5.1. Xnview
Enlaza con el manual que hay en el curso de administración de Portales Municipales.
3.5.2. Conversor de vídeos
Enlaza con el manual que hay en el curso de administración de Portales Municipales.
Página 17 de 33
Curso Administración de Portales Municipales INPRO
4. Estructura y Organización de los Portales Municipales
de INPRO
4.1. Estructura de carpetas en OpenCMS
En la imagen se muestra la estructura completa de nuestro portal web. Esa es la
imagen que se muestra al acceder al administrador OpenCMS y corresponde a la raiz
de vuestro sitio.
Entre las distintas carpetas existentes, vamos a destacar las siguientes:
4.1.1. Pestañas de los menús principales:
Por defecto, nuestros portales cuentan con unas pestañas que forman el menú
principal de los mismos, esas pestañas son:
o
Municipio: Esta carpeta contiene los contenidos de la opción municipio:
álbumes de fotos, historia, asociaciones, población y actividad (empresas
privadas, polígonos industriales y población), situación y transportes, y
una nueva funcionalidad que permite añadir videos a los contenidos de los
portales.
o
Ayuntamiento: Esta carpeta contiene los contenidos de la opción
ayuntamiento: bandos, delegaciones, empresas públicas, corporación
municipal y partidos políticos, plenos, bienvenida de/la Alcalde/sa,
escudo, etc…..
o
Servicios: Esta carpeta contiene los servicios que la web ofrece a los
ciudadanos, entre ellos: la encuesta, otras noticias, otros eventos, RSS,
boletín electrónico, datos de interés, descarga de documentos,
ordenanzas municipales, libro de visitas y alta de usuarios.
o
Turismo: Esta carpeta muestra la información turística del municipio que
se obtiene directamente de la web de Turismo de la Provincia de Sevilla.
Esta información se actualiza diariamente.
Página 18 de 33
Curso Administración de Portales Municipales INPRO
Además de estas carpetas principales, podemos crear nuestras propias pestañas.
Nos remitimos al apartado del curso correspondiente.
4.1.2. Resto de carpetas
Pasamos a explicar brevemente el resto de carpetas y su utilidad:
•
•
•
•
•
actualidad: Carpeta donde se almacenan todas las noticias del portal.
anuncios: Tablón de anuncios.
ayuda: Página de ayuda del portal.
banners: Donde se almacenan los banners de la web.
banners-agenda: sólo para los diseños 1 y 2. Carpeta donde se incluyen
banners que se visualizan en la zona izquierda del portal.
Página 19 de 33
Curso Administración de Portales Municipales INPRO
•
•
•
•
•
•
•
•
enlaces: Enlaces de interés.
FAQ: Preguntas frecuentes.
formularios: Carpeta donde se crean los distintos formularios que se puede
usar en el portal creados por el administrador.
galeriaEnlaces: Carpeta extendida donde se recomienda guardar los enlaces
externos principalmente, aunque también pueden guardarse los internos.
galeriaArchivos: Carpeta extendida donde se recomienda guardar todos los
ficheros que no son imágenes, como pueden ser pdf, zip, doc, odt,…..
galeriaInterior: Carpeta extendida donde se recomienda guardar todas las
imágenes del portal.
imagenDia: Carpeta donde se guardan las imágenes del día que van en la
portada. Estas imágenes cambian aleatoriamente cada vez que se actualiza la
página.
impresos: Impresos para descargar o rellenar e imprimir.
4.2. Contenidos en Base de Datos
No todos los contenidos de los portales web se almacenan en la base de datos de
OpenCMS. Por motivos de programación, existen algunas herramientas cuyos
contenidos se guardan en una base de datos distinta. El administrador para guardar
dichos contenidos es el que llamamos “administrador de base de datos”. Las
herramientas de las que dispone son las siguientes:
4.2.1. Utilidades
•
Eventos de la Agenda Municipal: Aquí se crean eventos para la agenda de
actualidad que se encuentra en la portada y también en la opción Servicios /
Actualidad. Esta información se puede consultar fácilmente usando el
calendario.
•
Delegaciones Municipales: Aquí se introducen los nombres de las
delegaciones, que serán los que se usen posteriormente en la agenda de
actualidad, para asignar cada evento a su delegación correspondiente. Antes
de crear un evento, debe existir alguna delegación en el municipio. Por
defecto se crea una general.
•
Partidos Políticos: Se guarda información sobre los partidos políticos del
municipio.
•
Composición de la Corporación: Se guarda el listado de concejales y alcalde
del municipio.
•
Empresas: Se crean empresas del municipio. Estas empresas se pueden
guardar como privadas o publicas y dependiendo de esto, aparecerán en el
apartado de municipio o ayuntamiento respectivamente. Una nueva
funcionalidad, un formulario de alta para empresarios, permite que dichos
empresarios puedan darse de alta ellos mismos en la base de datos de
Página 20 de 33
Curso Administración de Portales Municipales INPRO
empresas. El administrador será el encargado de verificar los datos de dicha
empresa antes de activarla, mientras tanto permanecerá desactivada.
4.2.2. Enlaces de Oficina Virtual
Mediante esta herramienta podemos crear nuevos enlaces en el apartado “Oficina
Virtual” que aparece en la portada.
4.2.3. Canales de suscripción
Esta herramienta nos permite crear canales de información a los que pueden
suscribirse los usuarios dados de alta en el sistema. Posteriormente, el
administrador, podrá enviar información relativa a cada canal a los usuarios
suscritos.
•
Canales: Permite crear nuevos canales de información, modificar los
existentes o eliminarlos.
•
Envíos: Permite enviar un mensaje masivo a todos los usuarios suscritos a un
determinado canal. Muestra los mensajes pendientes de enviar puesto que
estos no se envían automáticamente sino de madrugada para no quitar ancho
de banda al servidor.
•
Consulta de Inscripciones: Desde aquí podemos ver los distintos canales
existentes y los usuarios suscritos a los mismos.
4.2.4. Encuestas
Herramienta que nos permite crear encuestas.
4.2.5. Libro de visitas
Administramos los mensajes que los usuarios de libre acceso en la web, introducen
mediante el libro de visitas. Podemos contestar los mensajes, activarlos,
desactivarlos, o bien eliminarlos.
Página 21 de 33
Curso Administración de Portales Municipales INPRO
5. ADMINISTRACIÓN DE LOS PORTALES MUNICIPALES DE
INPRO
5.1. Administrador OpenCMS
Además de los contenidos estructurados ya conocidos, en esta nueva versión de
OpenCMS disponemos de algunos más que se describen a continuación:
5.1.1. Definición de Contenidos estructurados de OpenCMS.
5.1.1.1 RSS
RSS es una familia de formatos de fuentes web codificados en XML. Se utiliza para
suministrar a suscriptores, una información actualizada frecuentemente. El formato
permite distribuir contenido sin necesidad de un navegador, utilizando un software
diseñado para leer estos contenidos RSS (agregador).
A pesar de eso, es posible utilizar el mismo navegador para ver los contenidos RSS.
Las últimas versiones de los principales navegadores permiten leer los RSS sin
necesidad de software adicional (Mozilla Firefox). RSS es parte de la familia de los
formatos XML desarrollado específicamente para todo tipo de sitios que se actualicen
con frecuencia y por medio del cual se puede compartir la información y usarla en
otros sitios web o programas. A esto se le conoce como redifusión web o sindicación
web (una traducción incorrecta, pero de uso muy común).
Se han creado los contenidos estructurados RSS Global y RSS por delegaciones, que
crean contenido RSS que puede ser enlazable.
RSS Global: Este contenido se utiliza cuando la carpeta que contiene la información a
mostrar, está dividida en subcarpetas. Por ejemplo, un RSS Global debería usarse
para sindicar las noticias de actualidad.
•
RSS por delegaciones: Este contenido se usa cuando la información a sindicar
se encuentra en una única carpeta sin subcarpetas.
Actualmente pueden sindicarse los contenidos de: noticias, plenos, bandos, boletines
y anuncios.
5.1.1.2 Bandos y Boletines
•
Bandos: En la carpeta ayuntamiento, existe un nuevo directorio. En él,
podemos crear contenidos estructurados de tipo Bando. Una vez enlazada la
carpeta desde la web, se mostrarán los bandos por orden inverso de creación.
Página 22 de 33
Curso Administración de Portales Municipales INPRO
También da la posibilidad de ordenar por fecha.
•
Boletines electrónicos: Este contenido estructurado funciona igual que el
anterior. Los boletines se ubican en la carpeta servicios > informacionGeneral
>boletinElectronico. Al enlazar la carpeta, se muestran los boletines
ordenados por orden inverso a su creación y también ofrece la posibilidad de
ordenar por fechas.
5.1.2. Carpetas Extendidas.
En opencms existen dos tipos de carpetas, las normales que se limitan a organizar los
archivos, y las extendidas, que, además de esta función, tienen otras ventajas.
Existen tres tipos de carpetas extendidas en opencms, las de imágenes, las de
ficheros y las de enlaces.
En nuestros portales, la carpeta “galeriaInterior” es una carpeta extendida donde se
almacenan todas las imágenes de la web; la carpeta “galeriaFicheros” es una carpeta
extendida de ficheros donde se guardan todos los archivos que no son imágenes; y la
carpeta galeriaEnlaces, guarda enlaces externios o interno que pueden ser
posteriormente utilizados.
¿Cuál es la ventaja de crear una carpeta extendida en vez de una normal? Pues que,
cuando edito un contenido estructurado que tiene un campo para incluir texto,
imágenes, enlaces… al seleccionar los iconos de las carpetas extendidas, aparece una
ventana que representa dicha carpeta y todo su contenido. A través de esta ventana
puedo subir, publicar o seleccionar fcheros,
Para crearlas, debes pulsar el botón Nuevo y luego seleccionar “extender Carpeta”.
Elegimos el tipo de galeria que queremos crear, pero, procuramos siempre guardarla
dentro de las carpetas extendidas que vienen por defecto y de las que hemos hablado
al principio.
5.2. Administrador de Base de Datos
Además de las herramientas que se pueden gestionar actualmente desde este
administrador, existen un par de novedades:
5.2.1. Empresas Municipales
En la herramienta de alta de empresas, ahora también existe la posibilidad de
distinguir si una empresa es pública o privada. En el caso de que sea pública,
podremos verla en la web, dentro del apartado del Ayuntamiento, mientras que si es
privada, accederemos a ella desde el municipio, como siempre.
Página 23 de 33
Curso Administración de Portales Municipales INPRO
5.2.2. Formulario de Alta de Empresarios
A través de este formulario, los usuarios podrán incluir los datos de su empresa en el
portal de su municipio. Estos datos se darán de alta directamente en la base de datos
de empresas con estado inactivo. Una vez que el administrador del portal haya
comprobado que los datos son correctos, podrá activar la empresa para que aparezca
en el portal de su municipio.
6. ACCESIBILIDAD Y USABILIDAD
6.1. Conceptos (Usabilidad y accesibilidad)
Hablar de Accesibilidad Web es hablar de un acceso
universal a la Web, independientemente del tipo de
hardware, software, infraestructura de red, idioma,
cultura, localización geográfica y capacidades de los
usuarios.
La idea principal radica en hacer la Web más accesible
para todos los usuarios independientemente de las
circunstancias y los dispositivos involucrados a la hora de
acceder a la información. Partiendo de esta idea, una
página accesible lo será tanto para una persona con
discapacidad, como para cualquier otra persona que se
encuentre bajo circunstancias externas que dificulten su acceso a la información (en
caso de ruidos externos, en situaciones donde nuestra atención visual y auditiva no
estén disponibles, pantallas con visibilidad reducida, etc.).
En España una de las asociaciones que trabaja en este campo es el SIDAR .
6.1.1. Usabilidad
Se define coloquialmente como facilidad de uso, ya sea de una página web, una
aplicación informática o cualquier otro sistema que interactue con un usuario.
La Organización Internacional para la Estandarización (ISO) dispone de dos
definiciones de usabilidad
"La usabilidad se refiere a la capacidad de un software de ser comprendido,
aprendido, usado y ser atractivo para el usuario, en condiciones específicas de uso"
"Usabilidad es la efectividad, eficiencia y satisfacción con la que un producto
permite alcanzar objetivos específicos a usuarios específicos en un contexto de uso
específico"
Página 24 de 33
Curso Administración de Portales Municipales INPRO
6.1.2. Beneficios de la usabilidad
•
•
•
•
•
•
Reducción de los costes de aprendizaje.
Disminución de los costes de asistencia y ayuda al usuario.
Optimización de los costes de diseño, rediseño y mantenimiento de los sitios.
Aumento de la tasa de conversión de visitantes a clientes del sitio web.
Mejora la imagen y el prestigio del sitio web.
Mejora la calidad de vida de los usuarios del sitio, ya que reduce su estrés,
incrementa la satisfacción y la productividad.
6.2. Pautas de accesibilidad en la Web.
Para hacer el contenido Web
accesible, se han desarrollado las
denominadas Pautas de Accesibilidad
al Contenido en la Web (WCAG), cuya
función principal es guiar el diseño
de páginas Web hacia un diseño
accesible, reduciendo de esta forma
barreras a la información. WCAG
consiste
en
14
pautas
que
proporcionan soluciones de diseño y
que
utilizan
como
ejemplo
situaciones comunes en las que el
diseño de una página puede producir
problemas de acceso a la información. Las Pautas contienen además una serie de
puntos de verificación que ayudan a detectar posibles errores.
Cada punto de verificación está asignado a uno de los tres niveles de prioridad
establecidos por las pautas.
•
Prioridad 1: son aquellos puntos que un desarrollador Web tiene que cumplir
ya que, de otra manera, ciertos grupos de usuarios no podrían acceder a la
información del sitio Web.
•
Prioridad 2: son aquellos puntos que un desarrollador Web debería cumplir ya
que, si no fuese así, sería muy difícil acceder a la información para ciertos
grupos de usuarios.
•
Prioridad 3: son aquellos puntos que un desarrollador Web debería cumplir ya
que, de otra forma, algunos usuarios experimentarían ciertas dificultades
para acceder a la información.
En función a estos puntos de verificación se establecen los niveles de conformidad:
•
Nivel de Conformidad "A": todos los puntos de
Página 25 de 33
Curso Administración de Portales Municipales INPRO
verificación de prioridad 1 se satisfacen.
• Nivel de Conformidad "Doble A": todos los puntos de
verificación de prioridad 1 y 2 se satisfacen.
•
Nivel de Conformidad "Triple A": todos los puntos de
verificación de prioridad 1,2 y 3 se satisfacen.
6.2.1. Pautas
Las pautas explican cómo hacer accesibles los contenidos de la Web a personas con
discapacidad. Las pautas están pensadas para todos los desarrolladores de contenidos
de la Web (creadores de páginas y diseñadores de sitios) y para los desarrolladores de
herramientas de creación . El fin principal de estas pautas es promover la
accesibilidad.
De cualquier modo, siguiéndolas, se hará la Web más asequible también para todos
los usuarios, cualquiera que sea la aplicación de usuario que esté utilizando (Por
ejemplo, navegador de sobremesa, navegador de voz, teléfono móvil, PC de
automóvil, etc.), o las limitaciones bajo las que opere (Por ejemplo, entornos
ruidosos, habitaciones infra o supra iluminadas, entorno de manos libres, etc.).
Seguir estas pautas ayudará también a que cualquier persona encuentre información
en la Web más rápidamente. Estas pautas no desalientan a los desarrolladores en la
utilización de imágenes, vídeo, etc., por el contrario explican cómo hacer los
contenidos
multimedia
más
accesibles
a
una
amplia
audiencia.
6.2.2. Accesibilidad del contenido: 10 pasos
Esta guía es sólo una primera aproximación a modo de resumen
Imágenes y animaciones: Use el atributo alt para describir la función de cada
elemento visual.
Mapas de imagen: Use el elemento map y texto para las zonas activas.
Multimedia: Proporcione subtítulos y transcripción del sonido, y descripción del
vídeo.
Enlaces de hipertexto: Use texto que tenga sentido leído fuera de contexto. Por
ejemplo, evite "pincha aquí".
Organización de las páginas: Use encabezados, listas y estructura consistente. Use
CSS para la maquetación donde sea posible.
Figuras y diagramas: Describalos brevemente en la pagina o use el atributo longdesc.
Página 26 de 33
Curso Administración de Portales Municipales INPRO
Scripts, applets y plug-ins: Ofrezca contenido alternativo si las funciones nuevas no
son accesibles.
Marcos: Use el elemento noframes y títulos con sentido.
Tablas: Facilite la lectura línea a línea. Resuma.
Revise su trabajo: Verifique. Use las herramientas, puntos de comprobación y pautas
de http://www.w3.org/TR/WCAG.
6.3. Herramientas de evaluación
La evaluación del nivel de conformidad de nuestra web con las pautas de
accesibilidad nos ayudará a determinar si cumple con los requisitos para alcanzar un
determinado nivel: A, AA o AAA.
Para ello se emplea un método de evaluación que emplea tests manuales,
semiautomáticos y automáticos y que puede ser llevado a cabo tanto durante el
proceso de desarrollo de la web, como para evaluar un sitio ya existente.
Los pasos a seguir para evaluar la accesibilidad de nuestro sitio web son los
siguientes:
•
•
•
•
Determina el ámbito de evaluación
Usa herramientas de evaluación de la accesibilidad
Evalúa de forma manual las páginas más representativas
Realiza un informe de resultados
6.4. Enlaces de interés de accesibilidad
A continuación se detallan enlaces de interés a páginas donde poder ampliar los
conocimientos sobre accesibilidad.
•
Web de la Fundación SIDAR.Acceso Universal.
Conceptos y Definiciones
•
•
•
Usabilidad
Accesibilidad Web
¿Qué es la accesibilidad web?. No solo usabilidad journal.
Borradores de trabajo y recomendaciones del W3C (Traducciones)
•
"Como utilizan la Web las personas con discapacidad".
Página 27 de 33
Curso Administración de Portales Municipales INPRO
•
•
•
•
•
•
•
"Beneficios Auxiliares del Diseño Web Accesible"
"Pautas de Accesibilidad al Contenido en la Web 1.0"
Tabla de Puntos de Verificación para las Pautas de Accesibilidad al Contenido
en la Web 1.0
Introducción a la Accesibilidad Web
Guía Breve de Accesibilidad Web
Componentes esenciales de Accesibilidad Web
Guía breve para crear sitios webs accesibles
Documentos de la W3C (Inglés)
•
•
•
•
•
Social Factors in Developing a Web Accessibility Business Case for Your
Organization
Policies Relating to Web Accessibility
Web Accessibility Initiative
Evaluating Web Sites for Accessibility: Overview
Web Accessibility Evaluation Tools: Overview
Test accesibilidad
•
•
•
Test acesibilidad web (TAW)
Herramientas online de validación de accesibilidad
Hera. Utilidad para revisar accesibilidad de SIDAR.
6.5. Consejos de usabilidad
6.5.1. ¿Cuales son las 8 reglas de Oro sobre la usabilidad?
1. En internet el usuario es el que manda.
Esto quiere decir que sin usuarios tu pagina muere, asi que mas te vale
que los cuides y les des lo que te piden, de lo contrario te quedaras solo.
2. En internet la calidad se basa en la rapidez y la fiabilidad.
En internet cuenta que tu pagina sea mas rapida que bonita, fiable que
moderna, sencilla que compleja, directa.
3. Seguridad.
Si en el mundo real a veces nos cuesta fiarnos del banco de la esquina,
imaginate como se siente la gente en internet cuando llega a tu site.
Procura que todo funcione como un reloj para que la gente pueda fiarse
de tu site.
Página 28 de 33
Curso Administración de Portales Municipales INPRO
4. La confianza es algo que cuesta mucho ganar y se pierde con un mal
enlace.
Esto quiere decir que tal y como esta la competencia en internet, no
puedes perder ni un solo visitante por tener un enlace mal hecho. Es
mejor salir con algo sencillo e irlo complicando poco a poco, que salir con
todo y ver "que es lo que pasa". Versiones 1.0 son buenas mientras lo que
este puesto este bien asentado y genere confianza. Poco a poco y con el
feedback de los usuarios, podras ir complicando la pagina. Pero asegura
antes de arriesgar.
5. Si quieres hacer una pagina decente, simplifica, reduce, optimiza.
La gente no se va a aprender tu site por mucho que insistas, asi que por lo
menos hazlo sencillo, reutiliza todos los elementos que puedas, para que
de este modo los usuarios se sientan comodos y no se pierdan cada vez
que necesiten encontrar algo en tu site.
6. Pon las conclusiones al principio.
El usuario se sentira mas comodo si ve las metas al principio. De esta
forma no tendra que buscar lo que necesita y perdera menos tiempo en
completar su tarea. Si completa su tarea en menos tiempo se sentira
comodo y quizas se dedique a explorar tu site o quizas se lo recomiende a
un amigo.
7. No hagas perder el tiempo a la gente con cosas que no necesitan.
Cuidado con cruzar promociones, si lo haces por lo menos hazlo con
cuidado. Procura que la seleccion de productos a cruzar sea consecuente y
no lo quieras "vender todo" en todas las paginas. Segun avance el usuario
en su navegacion procura dejarle mas espacio libre. Puede ocurrir que
cuando este punto de comprar algo vea una oferta que le distraiga y
pierdas esa venta.
8. Buenos contenidos.
Escribir bien para internet es todo un arte. Pero siguiendo las reglas
basicas de (1) poner las conclusiones al principio y (2) escribir como un
25% de lo que pondrias en un papel, se puede llegar muy lejos. Leer en
pantalla cuesta mucho, por lo que, en el caso de textos para internet,
reduce y simplifica todo lo que puedas.
Página 29 de 33
Curso Administración de Portales Municipales INPRO
7. PROTECCIÓN DE DATOS
7.1. Qué es la Protección de Datos
La LOPD establece una serie de obligaciones relativas a la recogida de los datos,
consentimiento, almacenaje, conservación, uso, datos especialmente protegidos,
comunicación o cesión de datos, acceso, rectificación, creación de ficheros, alta en
el Registro de la Agencia de Protección de Datos, etc.
La gran mayoría de paginas web, recogen información personal y confidencial y debe
ser tratada con la normativa oficial.
7.2. Leyes LSSI y LOPD
Para mayor información:
•
Agencia española de protección de datos
https://www.agpd.es/index.php?idSeccion=72
•
Ley de servicios de la sociedad de la información
http://www.lssi.es/
Con la entrada en vigor de la Ley de Servicios de la Sociedad de la Información y de
Comercio Electrónico (LSSICE, Ley 34/2002 de 11 de julio en vigor desde octubre de
2003) y la Ley Orgánica de Protección de Datos (LOPD, Ley 15/1999 de 13 de
diciembre, de Protección de Datos de Carácter Personal), es que los propietarios de
páginas Web o portales comerciales deben cumplir con una serie de requisitos
específicos para no ser sancionados por el organismo regulador: la Agencia Española
de Protección de Datos (AEPD).
Página 30 de 33
Curso Administración de Portales Municipales INPRO
7.3. Obligaciones
Entre las obligaciones para los Prestadores de Servicios de la Sociedad de la
Información y del Comercio electrónico que incluye la Ley podemos citar a modo de
ejemplo:
•
Proporcionar información detallada en la Web sobre su titular.
•
Notificar las direcciones y nombres de dominio que se utilicen en Internet.
•
Establecer determinados procedimientos en relación con la contratación de
servicios y compra de productos en línea.
•
Cumplimiento de determinados requisitos en relación con la actividad
promocional que se lleve a cabo en Internet, tales como la práctica conocida
como SPAM. “Queda prohibido el envío de comunicaciones publicitarias o
promocionales por correo electrónico u otro medio de comunicación
electrónica equivalente que previamente no hubieran sido solicitadas o
expresamente autorizadas por los destinatarios de las mismas.
•
Deberes de colaboración con las autoridades y órganos diversos perteneciente
a la administración.
•
Cumplimiento de la LOPD:
o
Inscripción de los ficheros en el Registro General de la Protección de
Datos (Artículo 26 LOPD. Artículos. 5 y 6 R.D 1332/1994, de 20 de
Junio). Esta inscripción debe realizarse con carácter previo a la
creación del fichero de datos de carácter personal.
o
Elaboración conforme a las prescripciones legales, un documento de
seguridad.
o
Elaboración de las cláusulas de aceptación por parte de los usuarios a
incluir en los formularios de recogida de datos de su página Web.
o
Comunicar las consecuencias y la finalidad sobre la obtención de los
datos.
o
Ofrecer la posibilidad de ejercer los derechos de acceso, rectificación,
cancelación y oposición sobre la información capturada.
o
Garantizar la seguridad de los datos objeto de tratamiento
implantando las medidas de seguridad de índole técnica y
organizativas necesarias.
o
Auditoria periódica del cumplimiento de la normativa y de las medidas
de seguridad implantadas.
Página 31 de 33
Curso Administración de Portales Municipales INPRO
La LOPD afecta a todas las Administraciones Públicas, incluidos los Ayuntamientos y
Diputaciones Provinciales, que posean ficheros con datos de carácter personal
y establece la obligación de poner en marcha diversas medidas destinadas a
garantizar la protección de dichos datos.
7.4. Consejos
La LOPD indica que los interesados a los que se soliciten datos personales deberán ser
previamente informados de modo expreso, preciso e inequívoco:
•
De la existencia de un fichero o tratamiento de datos de carácter personal, de
la finalidad de la recogida de estos y de los destinatarios de la información.
•
Del carácter obligatorio o facultativo de su respuesta a las preguntas que le
sean planteadas.
•
De las consecuencias de la obtención de los datos o de la negativa a
suministrarlos.
•
De la posibilidad de ejercitar los derechos de acceso, rectificación,
cancelación y oposición.
•
De la identidad y dirección del responsable del fichero o su representante.
Por lo tanto, en el momento en que una Entidad vaya a realizar una recogida de
datos de carácter personal, y se utilicen cuestionarios u otros impresos, se podrá
añadir como cláusula las advertencias anteriores.
MODELO DE CLAÚSULA DE RECOGIDA DE DATOS DE CARÁCTER PERSONAL
TEXTO SIN CESIÓN DE DATOS
Los datos recabados, conforme a lo previsto en la Ley Orgánica 15/1999 de
Protección de Datos de Carácter Personal, en el presente contrato serán incluidos en
un fichero denominado (Nombre del fichero ante la AEPD), inscrito en el Registro
General de la Agencia Española de Protección de Datos y cuya titularidad pertenece
a (nombre de la Entidad dirección), en adelante Responsable del Fichero.
La finalidad de esta recogida de datos de carácter personal es (indicar finalidades).
En caso de negarse a comunicar los datos, podría ser imposible mantener cualquier
tipo de relación (administrativa, comercial o laboral) con usted. Vd. da, como
titular de los datos, su consentimiento y autorización al Responsable del Fichero
para la inclusión de los mismos en el fichero ut supra detallado. En cualquier caso,
podrá ejercitar gratuitamente los derechos de acceso, rectificación, cancelación y
posición (siempre de acuerdo con los supuestos contemplados por la legislación
vigente) dirigiéndose a (nombre de la entidad), con dirección (dirección), o bien y
Página 32 de 33
Curso Administración de Portales Municipales INPRO
con carácter previo a tal actuación, solicitar con las mismas senas que le sean
remitidos los impresos que el Responsable del Fichero dispone a tal efecto.
Por todo ello, para que conste a los efectos oportunos, Vd. Muestra su conformidad
con lo que en esta cláusula detallado, de acuerdo con la firma estampada en el
documento al que esta cláusula figura anexionado.
MODELO DE CLAÚSULA DE RECOGIDA DE DATOS DE CARÁCTER PERSONAL
TEXTO CON CESIÓN DE DATOS
Los datos recabados, conforme a lo previsto en la Ley Organiza 15/1999 de
Proyección de Datos de Carácter Personal, en el presente contrato serán incluidos en
un fichero denominado (Nombre del fichero ante la AEPD), inscrito en el Registro
General de la Agencia Española de Protección de Datos y cuya titularidad pertenece
a (nombre de la Entidad dirección), en adelante Responsable del Fichero.
Asimismo, el titular de los datos autoriza expresamente a ceder los mismos a las
siguientes organizaciones: (listado de empresas u organizaciones), con la finalidad
de que estas compañías puedan remitir, por cualquier medio, información sobre sus
respectivos servicios, productos, ofertas o promociones especiales (incluir más u
otras finalidades si fuere oportuno). Para ello el Responsable del Fichero cederá,
con la finalidad indicada, los siguientes datos de carácter personal: (listado de datos
cedidos), pudiendo Vd. en todo caso ejercitar los derechos que le asisten y que, a
renglón seguido, se especifican.
La finalidad de esta recogida de datos de carácter personal es: (indicar la finalidad
de la recogida). En caso de negarse a comunicar los datos, podría ser imposible
mantener cualquier tipo de relación (administrativa, comercial o laboral) con usted.
Vd. da, como titular de los datos, su consentimiento y autorización al Responsable
del Fichero para la inclusión de los mismos en el fichero ut supra detallado.
Asimismo, declara estar informado de las condiciones y cesiones detalladas en la
presente cláusula y, en cualquier caso, podrá ejercitar gratuitamente los derechos
de acceso, rectificación, cancelación y oposición (siempre de acuerdo con los
supuestos contemplados por la legislación vigente) dirigiéndose a (nombre de la
entidad), con dirección (dirección), o bien y con carácter previo a tal actuación,
solicitar con las mismas senas que le sean remitidos los impresos que el Responsable
del Fichero dispone a tal efecto.
En caso de que se oponga a la cesión de sus datos en los términos previstos marque
una cruz en esta casilla. En caso contrario, se entenderá que presta su
consentimiento tácito a tal efecto.
ANEXO I: LEY ORGÁNICA 15/1999, DE PROTECCIÓN DE DATOS DE CARÁCTER
PERSONAL.
ANEXO II: REAL DECRETO 1720/2007 REGLAMENTO DE DESARROLLO DE LA
LEY ORGÁNICA DE PROTECCIÓN DE DATOS.
ANEXO III: MODELO DE DOCUMENTO DE SEGURIDAD DE LA AGENCIA ESPAÑOLA DE
PROTECCIÓN DE DATOS.
Página 33 de 33