Sidar, principal.
Edipo >> Documentación >> Desarrolladores

logo del editor de css: Edipo. Edipo
Documentación para Desarrolladores

Índice

  1. Presentación
  2. Justificación
  3. Lo básico
  4. Descripción
  5. Interfaz
  6. Instalación
  7. Funcionamiento
  8. Dudas y tareas pendientes
  9. Contribuir al desarrollo

Presentación

Las Hojas de Estilo en Cascada establecen un balance de poder entre las hojas de estilo del autor y las del usuario. De modo predeterminado, las reglas en una hoja de estilo del autor sustituyen las mismas reglas de la hoja de estilo del usuario.

Sin embargo, con el fin de mejorar la accesibilidad de los documentos otorgando a los usuarios con requerimientos especiales el control sobre la presentación (fuentes grandes, combinaciones de colores, etc.), una declaración !important logra preponderancia sobre una declaración normal y, en ese caso, las reglas del usuario sustituyen a las del autor.

Pero esto es apenas un dato de interés para los diletantes de las CSS si los usuarios no saben cómo crear una hoja de estilo que le permita cambiar la apariencia de las páginas que visitan.

La opción de ofrecer distintas hojas de estilo para su elección siempre resulta una solución limitada por cuanto es difícil abarcar de ese modo todas las necesidades y preferencias de cada usuario.

El modo más práctico de aprovechar el poder que las CSS les brinda a los usuarios es entonces permitirle elegir, del modo más sencillo posible, aquellas características de presentación que le ayudarán a navegar la Web. Con ese propósito, hemos creado Edipo.

Justificación

Las Hojas de Estilo en Cascada (CSS) permiten modificar la presentación de las páginas Web mediante reglas de estilo. Estas reglas pueden tener tres orígenes:

  1. El autor de las páginas, quien define así la apariencia de los elementos que componen cada documento.
  2. El navegador, que posee valores predeterminados que se aplican en caso de que el autor no defina algún aspecto de la página.
  3. El usuario, quien puede aplicar su propia CSS cuando necesita modificar algún aspecto de la presentación.

Esto es especialmente útil para, por ejemplo, los usuarios con deficiencias visuales que pueden necesitar ver siempre todas las páginas Web con unos determinados estilos. También es muy útil para los desarrolladores y diseñadores Web que pueden utilizar hojas de estilo personalizadas para hacer revisiones rápidas de lo que están creando. Pero éste último uso lo explicamos más ampliamente en Uso de hojas de estilo para la revisión, en donde incluimos algunos ejemplos y referimos al lector al Editor de Diagnóstico que estamos preparando en este momento.

Dado que son pocos los usuarios que, requiriendo ciertas características en la presentación, están en condiciones de escribir su propia Hoja de Estilo, la Fundación Sidar proporciona así una herramienta o utilidad que permite automatizar la escritura del código de una CSS para que puedan utilizarla aquellos usuarios que tienen dificultades al consultar la información de algunas páginas Web.

Lo básico

Su nombre viene de: Editor Personal de Opciones de estilo. Y al igual que el Edipo de la mitología griega, que supo descifrar el enigma de la esfinge y así continuar el camino que le llevaría a su destino, nuestro Edipo es capaz de descifrar para el usuario los secretos de las hojas de estilo y facilitarle así su camino por el ciberespacio.

Edipo, consta de una página con opciones para modificar ciertas propiedades de estilo y de otra en la que es posible comprobar el efecto de estas modificaciones.

Cuando los cambios realizados satisfacen las necesidades del usuario, el editor proporciona el código de la hoja de estilo y/o un fichero descargable con el nombre que el usuario indique.

Para aplicar esta hoja de estilo, el usuario debe utilizar la opción correspondiente de su navegador, que varía de una marca a otra y que se explica en "¿Cómo configuro mi navegador?".

Uso de Edipo

La información básica sobre el uso de Edipo se presenta "online"en la Documentación para el usuario, aunque la propia aplicación ofrece unas páginas de ayuda y unas páginas de prueba que le facilitan la comprensión de su uso.

Los desarrolladores de sitios Web pueden instalar Edipo en su propio sitio para ofrecerlo como un servicio más a sus visitantes o usuarios. Para ello no tienen más que descargar el código fuente y hacer las modificaciones necesarias. Por favor, antes de instalar la aplicación en su sitio, lea atentamente la Licencia de Software.

Cualquier copia, modificación o redistribución, debe ser notificada a edipo@sidar.org y debe hacerse siguiendo los principios del sofware libre o de código abierto de acuerdo con su Licencia.

Descripción

Edipo es una utilidad desarrollada en PHP4 que permite a los usuarios con requerimientos especiales en la presentación de las página Web (personas cortas de vista, daltónicos, etc.) y sin conocimientos sobre las CSS, obtener una hoja de estilo de usuario para utilizar en su navegador.

El editor consta de una página con opciones para seleccionar algunos elementos, propiedades y valores CSS, mientras en otra página se pueden apreciar los resultados de las modificaciones. Cuando los cambios satisfacen al usuario, éste puede obtener el código de la hoja de estilo correspondiente.

Aplicando la CSS en su navegador, el usuario logrará -en la mayoría de los casos- consultar las páginas con el estilo de presentación que definió con ayuda del editor.

Interfaz

Edipo intenta ser una herramienta simple para usuarios con escaso o ningún conocimiento técnico sobre las CSS. Por ese motivo, su interfaz ha sido diseñada en base a los siguientes principios:

Simpleza
Las opciones que se presentan al usuario son las mínimas necesarias para generar una hoja de estilo de propósito general. No se supone que el usuario pueda establecer reglas basadas en clases o que le interese descubrir la estructura de las páginas, por ejemplo.
Facilidad
El usuario selecciona una propiedad a modificar y la página del editor se actualiza a fin de presentar solamente las opciones aplicables a la propiedad elegida. Las páginas de prueba le permiten tener una confirmación visual inmediata de sus elecciones.
Economía
El editor es compacto y se ha intentado reutilizar cada parte del código. Los mismos archivos se utilizan en ambas versiones: con o sin marcos.
Independencia
El editor no requiere ninguna configuración especial en el navegador del usuario. No se usan cookies y las funciones de JavaScript que se utilizan no son esenciales para su funcionamiento.

Instalación

El editor requiere un servidor Web con PHP 4 instalado y el uso de sesiones habilitado. Estos son los documentos que conforman el editor:

En el directorio principal

descarga.php
Facilita la descarga de la CSS generada, creando un fichero con extensión .css y con el nombre que el usuario indique o, abriendo en el navegador del usuario la hoja de estilos. (Esto depende del navegador).
Index.php
Página de inicio. En esta página se puede elegir entre las versiones con y sin marcos del editor.
leeme.txt
Contiene la documentación para desarrolladores, esta página.
Marcos.php
La página de marcos del editor. Contiene dos marcos: "selector" y "resultado".
Resultado.php
Muestra las diversas páginas de prueba. Ocupa el frame "resultado" en la versión con marcos y se abre en una ventana secundaria en la versión sin marcos.
Selayuda.php
Ayuda del editor. Se abre en el marco o la ventana que ocupa selector.php.
Selector.php
Presenta las opciones al usuario y contiene el código principal del script. En la versión con marcos ocupa el frame "selector". En la versión sin marcos, es la página principal del editor.

Archivos que se incluyen dinámicamente:

inc/Font.inc.php
Contiene el bloque de opciones para la selección de fuentes.
inc/Fontsize.inc.php
Ídem para la selección de tamaño de la fuente.
inc/Links.inc.php
Ídem para la selección de otras propiedades de los enlaces.
inc/Paleta.inc.php
Ídem para la selección de color de fondo, del texto y los distintos estados de los enlaces.
inc/Prop.inc.php
Ídem para la selección de propiedades para las imágenes de fondo, tablas y elementos DIV.
inc/Result1.inc.php (1, 2, 3, 4, 5, 6)
Las seis páginas de resultado.

Ficheros gráficos

img/ayuda.gif
icono de ayuda
img/bgimage.gif
icono de eliminación o mantenimiento de los fondos gráficos
img/bgimage1.gif
Fondo gráfico de la página de prueba para fondos
img/bgimage2.gif
Fondo gráfico de una capa de la página de prueba de fondos
img/bgimage3.gif
Otro fondo gráfico de una de las capas de la página de prueba de fondos
img/divs.gif
icono de de eliminación o mantenimiento de medidas exactas en las capas
img/logosidar.org
logosímbolo SIDAR
img/p1.gif,. p2.gif, ... p6.gif
iconos de número de página
img/paleta135.gif
paleta de colores
img/px.gif
icono de página actual
img/tablas.gif
icono de eliminación o mantenimiento de medidas exactas en las tablas
img/usercss.gif
logo de Edipo

Documentación

doc/copy.html
Aviso y Licencia de uso del software, que debe incluirse en cualquier copia, redistribución o modificación.
doc/gpl.html
Traducción al español del texto de la Licencia Pública General o licencia de software libre.
doc/gpl-en.html
Texto original en inglés de la Licencia Pública General.
uso/index.php
Documentación de uso redactada para los usuarios.

Funcionamiento

En construcción...

Dudas y tareas pendientes

¿La interfaz es clara? ¿Los textos son adecuados?
Hemos aplicado nuestra mejor voluntad en el diseño y hemos hecho pruebas de usuario que nos han ayudado mucho, pero siempre es posible mejorar. Esperamos sus sugerencias.
¿Qué características se pueden agregar?
Creemos que puede resultar útil que se listen, de algún modo, las propiedades que se vayan modificando o que exista una forma de limpiar todas las opciones a la vez.
¿El código de la CSS funciona de acuerdo a lo esperado?
Por ejemplo, encontramos que en Opera, la propiedad background-color no tiene efecto en algunas páginas. ¿Existe una solución?
¿Existen otros elementos o propiedades que resultaría útil modificar?
Sin establecer CLASS o ID (nuestros usuarios no saben de esas cosas). Por ejemplo: los títulos tienen igual tamaño que el resto de los textos: ¿sería conveniente ampliarlos? En caso afirmativo: ¿qué opciones de poca complejidad se pueden presentar al usuario?
El código JavaScript no funciona bien en ciertos navegadores.
Al elegir un color de la paleta o escribir un color, en Opera no se actualiza el color de muestra y el botón para copiar al portapapeles el código de la CSS sólo funciona para IExplorer. Necesitamos ayuda al respecto.

Contribuir al desarrollo de Edipo

¡Únete al equipo de desarrolladores y colaboradores de Edipo! Para contribuir al desarrollo de Edipo no hace falta más que apuntarse a su lista de distribución y hacer tus aportaciones en ella. La lista está alojada en: http://groups.yahoo.com/group/edipo-sidar/

Para suscribirse sólo hay que enviar un mensaje a: edipo-sidar-subscribe@yahoogroups.com, o bien:

pulsa para suscribirte a la lista edipo-sidar.
Página para suscribirse a edipo-sidar

Te recomendamos que antes de nada leas la relación de tareas pendientes, que hay más arriba en esta misma página, y que repases los mensajes anteriormente enviados a la lista de distribución, entrando en su página.

Apoyo a la Fundación Sidar

Edipo es software libre lo que supone que cualquier persona puede copiarlo y distribuirlo, incluso cobrando por su distribución, pero la Fundación Sidar proporciona esta y otras utilidades de forma gratuita, necesitando sin embargo recursos para su desarrollo y mantenimiento. Considera, por favor, la posibilidad de hacer una donación a la Fundación Sidar y contribuir al mantenimiento y desarrollo del trabajo que lleva a cabo para favorecer la accesibilidad de la Sociedad de la Información y del Conocimiento.