Acabado el manual de utilización para la hoja de estilos de la wiki y colgado en la wiki del DFWikiteam.
Manual utilización CSS
viernes, 15 de junio de 2007
miércoles, 6 de junio de 2007
Cargar CSS
Hasta la fecha, hemos unificado los estilos de la wiki en el fichero nwiki.css, situado en la carpeta /mod/wiki de la wiki. Esta hoja de estilos esta ampliada con los diferentes formatos utilizados en el código de la nwiki.
Para que moodle cargue la hoja de estilos de la nwiki, es necesario cambiar el archivo styles.php situado dentro de la carpeta de instalación de moodle, en …\moodle\theme\standard\ por el descargado en el paquete de instalación de la nwiki.
Este nuevo archivo styles.php realiza las mismas funciones que el de moodle, pero además añade una función para cargar la hoja de estilos de la nwiki.
Puesto que el fichero modificado se almacena en una carpeta de la wiki siguiendo la misma estructura que moodle, al descomprimir la wiki se nos reemplazará el archivo style.php.
Para que moodle cargue la hoja de estilos de la nwiki, es necesario cambiar el archivo styles.php situado dentro de la carpeta de instalación de moodle, en …\moodle\theme\standard\ por el descargado en el paquete de instalación de la nwiki.
Este nuevo archivo styles.php realiza las mismas funciones que el de moodle, pero además añade una función para cargar la hoja de estilos de la nwiki.
Puesto que el fichero modificado se almacena en una carpeta de la wiki siguiendo la misma estructura que moodle, al descomprimir la wiki se nos reemplazará el archivo style.php.
miércoles, 30 de mayo de 2007
Trabajo CSS
Seguimos reprogramando el código de la nwiki, verificando que cumple el XHTML Strict y utilizando la capa de presentación (Weblib.php)
Además, nos han encargado una nueva tarea, modificar las hojas de estilo que utiliza la nwiki (nwiki.css y wiki_tree.css) unificándolas en un único fichero, ampliarlas y modificar el código de Moodle para que cargue el fichero de estilo de la wiki.
Además, nos han encargado una nueva tarea, modificar las hojas de estilo que utiliza la nwiki (nwiki.css y wiki_tree.css) unificándolas en un único fichero, ampliarlas y modificar el código de Moodle para que cargue el fichero de estilo de la wiki.
jueves, 17 de mayo de 2007
Manual weblib.php
Este manual es una ayuda para que los desarrolladores del DFWikiTeam puedan utilizar el weblib.php. Este fichero complementa al weblib de moodle y actúa como capa de presentación. Contiene una serie de funciones para crear las diferentes etiquetas de HTML que utilizamos.
Puntos importantes para la utilización de weblib.php:
La mayoría de las propiedades de estilo que no cumplan el estándar se pueden definir en el class o style. Estos atributos están contenidos en todas las etiquetas. Su función es la de asignar al tag un formato o estilo, cumpliendo las normas de XHTML Strict. Este formato puede estar definido en una hoja de estilo (css), y por lo tanto utilizaríamos el atributo class para asignarle la clase ya definida, o mediante el style, en caso de que no este declarado.
Ejemplo:
$propiedades->style = 'width:1%;white-space:nowrap';
wiki_change_column($propiedades);
sería
</td> <td style="width:1%;white-space:nowrap">
Todas las funciones siguen también un mismo patrón para el orden de sus parámetros:
Ejemplo de asignación de propiedades a una etiqueta:
$propert->src="image.gif";
$propert->alt="imagen";
wiki_img($propert);
Sería:
<img src="image.gif" alt="imagen">
Los eventos se ubicarán también dentro del objeto. Éstos se escribirán como un string y contendrán los diferentes tipos de eventos y su función. Por ejemplo: $propert->events = 'onfocus="this.select()" onchange="updateMembers(this)" '
En caso de ser false, la función escribiría el tag directamente. Y si lo cambiásemos a true, la función retornaría una variable con la etiqueta.
Estas excepciones son:
Con esto conseguimos más claridad en el código y un manejo más sencillo de las funciones.
wiki_table_start($propert, $return=false)
Inicia tabla, fila y columna, con las respectivas propiedades. El atributo $propert contiene los atributos de la tabla y los de la primera columna creada (los atributos de la columna estarán identificados por un "td" final, por ejemplo $propert->aligntd)
wiki_table_end($return=false)
Cierra una columna, fila y tabla.
wiki_change_column($propert, $return=false)
Cierra columna e inicia una nueva con las propiedades correspondientes.
wiki_change_row($propert, $return=false)
Cierra columna y fila e inicia una nueva fila y una columna con las propiedades correspondientes.
Ejemplo:
$propert->border = '0';
$propert->width = '100%';
$propert->aligntd = 'right';
wiki_table_start($propert);
echo '1';
wiki_change_row();
echo '2';
wiki_table_end();
sería
<table width="100%" border="0">
<tr><td align="right">
1
</td></tr><tr><td>
2
</td></tr>
</table>
wiki_start_ul($propert, $return=false)
Inicia una lista no ordenada y el primer ítem
wiki_end_ul($return=false)
Cierra el último ítem y la lista no ordenada
wiki_change_li($propert, $return=false)
Cambio de ítem
Para las listas ordenadas las funciones son iguales.
Puntos importantes para la utilización de weblib.php:
- CUMPLE XHTML STRICT
La mayoría de las propiedades de estilo que no cumplan el estándar se pueden definir en el class o style. Estos atributos están contenidos en todas las etiquetas. Su función es la de asignar al tag un formato o estilo, cumpliendo las normas de XHTML Strict. Este formato puede estar definido en una hoja de estilo (css), y por lo tanto utilizaríamos el atributo class para asignarle la clase ya definida, o mediante el style, en caso de que no este declarado.
Ejemplo:
$propiedades->style = 'width:1%;white-space:nowrap';
wiki_change_column($propiedades);
sería
</td> <td style="width:1%;white-space:nowrap">
- CREACIÓN DE TAGS
Todas las funciones siguen también un mismo patrón para el orden de sus parámetros:
- PARÁMETRO $INFO
- PARÁMETRO $PROPERT
Ejemplo de asignación de propiedades a una etiqueta:
$propert->src="image.gif";
$propert->alt="imagen";
wiki_img($propert);
Sería:
<img src="image.gif" alt="imagen">
Los eventos se ubicarán también dentro del objeto. Éstos se escribirán como un string y contendrán los diferentes tipos de eventos y su función. Por ejemplo: $propert->events = 'onfocus="this.select()" onchange="updateMembers(this)" '
- PARÁMETRO $RETURN
En caso de ser false, la función escribiría el tag directamente. Y si lo cambiásemos a true, la función retornaría una variable con la etiqueta.
- EXCEPCIONES
Estas excepciones son:
- Creación de Form y Div
Con esto conseguimos más claridad en el código y un manejo más sencillo de las funciones.
- Creación de tablas
wiki_table_start($propert, $return=false)
Inicia tabla, fila y columna, con las respectivas propiedades. El atributo $propert contiene los atributos de la tabla y los de la primera columna creada (los atributos de la columna estarán identificados por un "td" final, por ejemplo $propert->aligntd)
wiki_table_end($return=false)
Cierra una columna, fila y tabla.
wiki_change_column($propert, $return=false)
Cierra columna e inicia una nueva con las propiedades correspondientes.
wiki_change_row($propert, $return=false)
Cierra columna y fila e inicia una nueva fila y una columna con las propiedades correspondientes.
Ejemplo:
$propert->border = '0';
$propert->width = '100%';
$propert->aligntd = 'right';
wiki_table_start($propert);
echo '1';
wiki_change_row();
echo '2';
wiki_table_end();
sería
<table width="100%" border="0">
<tr><td align="right">
1
</td></tr><tr><td>
2
</td></tr>
</table>
- Creación de listas
wiki_start_ul($propert, $return=false)
Inicia una lista no ordenada y el primer ítem
wiki_end_ul($return=false)
Cierra el último ítem y la lista no ordenada
wiki_change_li($propert, $return=false)
Cambio de ítem
Para las listas ordenadas las funciones son iguales.
Nueva modificación Weblib.php
Después de varios días trabajando con la capa de presentación, y aconsejados por algunos miembros del DFWikiteam, modificamos el weblib.php.
Las funciones creadoras de los tags, pasarán a tener como mucho tres parámetros de entrada. Para ello utilizaremos un objeto que contenga todas las propiedades de los tags, en vez de tener un parámetro de entrada para cada atributo. De este modo conseguimos que la capa de presentación sea más sencilla, tanto a la hora de utilizarla, como a la hora de modificarla.
Una de las grandes ventajas de este cambio, es que si necesitamos una nueva propiedad para un tag, únicamente tendríamos que modificar la función, añadiendole al objeto la nueva propiedad. Pero este cambio no supondría modificar todas las llamadas que ya habíamos realizado a esta función, ya que los parámetros seguirían siendo los mismos.
En breve colgaremos un nuevo manual para la utilización del nuevo weblib.php
Las funciones creadoras de los tags, pasarán a tener como mucho tres parámetros de entrada. Para ello utilizaremos un objeto que contenga todas las propiedades de los tags, en vez de tener un parámetro de entrada para cada atributo. De este modo conseguimos que la capa de presentación sea más sencilla, tanto a la hora de utilizarla, como a la hora de modificarla.
Una de las grandes ventajas de este cambio, es que si necesitamos una nueva propiedad para un tag, únicamente tendríamos que modificar la función, añadiendole al objeto la nueva propiedad. Pero este cambio no supondría modificar todas las llamadas que ya habíamos realizado a esta función, ya que los parámetros seguirían siendo los mismos.
En breve colgaremos un nuevo manual para la utilización del nuevo weblib.php
Cumple XHTML Strict
Por fin!!!
Después de semanas de trabajo, modificando el código de los archivos principales de la nwiki, hemos conseguido que cumpla XHTML Strict.
De aquí a final de proyecto, nuestro objetivo es modificar el código de la nwiki, que todos los archivos utilicen el weblib.php, es decir, la nueva capa de presentación. Además, tenemos que ampliar el nwiki.css, creando nuevos estilos propios utilizados para la creación del código html.
Después de semanas de trabajo, modificando el código de los archivos principales de la nwiki, hemos conseguido que cumpla XHTML Strict.
De aquí a final de proyecto, nuestro objetivo es modificar el código de la nwiki, que todos los archivos utilicen el weblib.php, es decir, la nueva capa de presentación. Además, tenemos que ampliar el nwiki.css, creando nuevos estilos propios utilizados para la creación del código html.
miércoles, 25 de abril de 2007
Manual Weblib.php
Este manual es una ayuda para que los desarrolladores del DFWikiTeam puedan utilizar el weblib.php. Este fichero complementa al weblib de moodle y actúa como capa de presentación. Contiene una serie de funciones para crear las diferentes etiquetas de HTML que utilizamos.
Puntos importantes para la utilización de weblib.php:
Puntos importantes para la utilización de weblib.php:
- CUMPLE XHTML STRICT
Todas las funciones tienen como parámetros únicamente aquellos atributos de los tags que se utilizan para el desarrollo de la nwiki y siguen el XHTML Strict. De este modo conseguimos que las etiquetas creadas con la utilización de este fichero cumplan el estándar.
La mayoría de atributos que no cumplan el estándar se pueden definir en el atributo class o style. Estos atributos están contenidos en todas las etiquetas. Su función es la de asignar al tag un formato o estilo, cumpliendo las normas de XHTML Strict. Este formato puede estar definido en una hoja de estilo (css), y por lo tanto utilizaríamos el atributo class para asignarle la clase ya definida, o mediante el style, en caso de que no este declarado.
Ejemplo:
wiki_change_column('', 'top', '', '', '', 'width:1%;white-space:nowrap');
sería
</td><td valign="top" style="width:1%;white-space:nowrap">
En caso de ser false, la función escribiría el tag directamente. Y si lo cambiásemos a true, la función retornaría una variable con la etiqueta.
Si la etiqueta tiene información entre la apertura y cierre de ésta, la función tendrá un primer parámetro ($info), que contendrá dicha información. A excepción de las tablas y listas, que se explicarán más adenate.
Los parámetros estilo y clase siempre se ubican en la penúltima y antepenúlima posición. A excepción de la etiqueta
que no tiene formato.
Como hemos dicho anteriormente, la variable $return está ubicada como último parámetro.
El resto de parámetros dependerá de los diferentes atributos que puedan tener las etiquetas.
wiki_table_start($border=0, $width='', $padding='', $spacing='', $class='', $style='',
$aligntd='', $valigntd='', $colspantd='', $rowspantd='', $classtd='', $styletd='', $return=false)
Inicia tabla, fila y columna, con las respectivas propiedades. Los seis primeros parámetros son atributos de la tabla y los seis siguientes de la primera columna.
wiki_table_end($return=false)
Cierra una columna, fila y tabla.
wiki_change_column($align='', $valign='', $colspan='', $rowspan='', $class='', $style='', $return=false)
Cierra columna e inicia una nueva con las propiedades correspondientes.
wiki_change_row($align='', $valign='', $colspan='', $rowspan='', $class='', $style='', $return=false)
Cierra columna y fila e inicia una nueva fila y una columna con las propiedades correspondientes.
Ejemplo:
wiki_table_start('0','100%','','','','','right');
echo '1';
wiki_change_row();
echo '2';
wiki_table_end();
sería
<table width="100%" border="0">
<tr><td align="right">
1
</td></tr><tr><td>
2
</td></tr>
</table>
wiki_start_ul($class='', $style='', $classli='', $styleli='', $return=false)
Inicia una lista no ordenada y el primer ítem
wiki_end_ul($return=false)
Cierra el último ítem y la lista no ordenada
wiki_change_li($class='', $style='', $return=false)
Cambio de ítem
Para las listas ordenadas las funciones son iguales.
La mayoría de atributos que no cumplan el estándar se pueden definir en el atributo class o style. Estos atributos están contenidos en todas las etiquetas. Su función es la de asignar al tag un formato o estilo, cumpliendo las normas de XHTML Strict. Este formato puede estar definido en una hoja de estilo (css), y por lo tanto utilizaríamos el atributo class para asignarle la clase ya definida, o mediante el style, en caso de que no este declarado.
Ejemplo:
wiki_change_column('', 'top', '', '', '', 'width:1%;white-space:nowrap');
sería
</td><td valign="top" style="width:1%;white-space:nowrap">
- PARÁMETRO RETURN
En caso de ser false, la función escribiría el tag directamente. Y si lo cambiásemos a true, la función retornaría una variable con la etiqueta.
- CREACIÓN DE TAGS
Si la etiqueta tiene información entre la apertura y cierre de ésta, la función tendrá un primer parámetro ($info), que contendrá dicha información. A excepción de las tablas y listas, que se explicarán más adenate.
Los parámetros estilo y clase siempre se ubican en la penúltima y antepenúlima posición. A excepción de la etiqueta
que no tiene formato.
Como hemos dicho anteriormente, la variable $return está ubicada como último parámetro.
El resto de parámetros dependerá de los diferentes atributos que puedan tener las etiquetas.
- Creación de tablas
wiki_table_start($border=0, $width='', $padding='', $spacing='', $class='', $style='',
$aligntd='', $valigntd='', $colspantd='', $rowspantd='', $classtd='', $styletd='', $return=false)
Inicia tabla, fila y columna, con las respectivas propiedades. Los seis primeros parámetros son atributos de la tabla y los seis siguientes de la primera columna.
wiki_table_end($return=false)
Cierra una columna, fila y tabla.
wiki_change_column($align='', $valign='', $colspan='', $rowspan='', $class='', $style='', $return=false)
Cierra columna e inicia una nueva con las propiedades correspondientes.
wiki_change_row($align='', $valign='', $colspan='', $rowspan='', $class='', $style='', $return=false)
Cierra columna y fila e inicia una nueva fila y una columna con las propiedades correspondientes.
Ejemplo:
wiki_table_start('0','100%','','','','','right');
echo '1';
wiki_change_row();
echo '2';
wiki_table_end();
sería
<table width="100%" border="0">
<tr><td align="right">
1
</td></tr><tr><td>
2
</td></tr>
</table>
- Creación de listas
wiki_start_ul($class='', $style='', $classli='', $styleli='', $return=false)
Inicia una lista no ordenada y el primer ítem
wiki_end_ul($return=false)
Cierra el último ítem y la lista no ordenada
wiki_change_li($class='', $style='', $return=false)
Cambio de ítem
Para las listas ordenadas las funciones son iguales.
Comienzo de creación de Weblib.php
Tras varias pruebas decidimos que el enfoque que habíamos dado para crear este fichero no era el correcto, y decidimos seguir otro proceso, creando un fichero, que complementa el weblib de moodle, adaptandose más a nuestras necesidades.
Este fichero contiene una serie de funciones para crear las diferentes etiquetas de HTML que utilizamos, teniendo como parametros únicamente propiedades de los tags que sigan el estándar XHTML Strict.
Este fichero contiene una serie de funciones para crear las diferentes etiquetas de HTML que utilizamos, teniendo como parametros únicamente propiedades de los tags que sigan el estándar XHTML Strict.
Cambio de versión!!!
Tras conseguir que la nwiki para moodle 1.7 cumpliese el XHTML Transitional, el grupo de desarrolladores DFWikiTeam da por cerrada la versión para 1.7, y empezamos el desarrollo de la nwiki para moodle 1.8.
Esta versión utiliza el XHTML Strict y por lo tanto nuestro objetivo es conseguir que la nwiki también lo cumpla.
Este objetivo, además de mejorar la accesibilidad, es actualmente el requisito indispensable para que la nwiki pase a ser el módulo oficial de moodle.
Esta versión utiliza el XHTML Strict y por lo tanto nuestro objetivo es conseguir que la nwiki también lo cumpla.
Este objetivo, además de mejorar la accesibilidad, es actualmente el requisito indispensable para que la nwiki pase a ser el módulo oficial de moodle.
jueves, 8 de marzo de 2007
Nuevo enfoque del proyecto
Durante esta última semana hemos estado arreglando todo el código para que cumpliese el estándar XHTML transitional.
Nos dimos cuenta que en casi todos los ficheros había código html y tras la reunión del miércoles se decidió separar la presentación de los datos.
Para ello crearemos un fichero nuevo llamado weblib.php donde situremos todo lo relacionado con la presentación (todos los tags de html).
Como supone mucho trabajo, hemos decidido realizar el proceso en dos pasos.
A medida que vayamos haciendo nuevas funciones, iremos informado a los proyectistas para que hagan uso de ellas!
Nos dimos cuenta que en casi todos los ficheros había código html y tras la reunión del miércoles se decidió separar la presentación de los datos.
Para ello crearemos un fichero nuevo llamado weblib.php donde situremos todo lo relacionado con la presentación (todos los tags de html).
Como supone mucho trabajo, hemos decidido realizar el proceso en dos pasos.
- Trasladar todo el código html a nuestro fichero sin tener en cuenta si hay información de dominio mezclada.
- Después de haber aislado el código html en un único fichero, crearemos nuevas funciones para conseguir los datos del dominio necesarios, y así separar por completo la presentación, creando una nueva capa.
A medida que vayamos haciendo nuevas funciones, iremos informado a los proyectistas para que hagan uso de ellas!
Nos mudamos a la Farga
SourceForge solo es para versiones estables y después de hablar con parte del DFWikiteam, nos trasladamos a LaFarga!!!!
Además, siguiendo los consejos de Pigui, utilizaremos el cvs que lleva integrado eclipse en vez de Tortoise.
Además, siguiendo los consejos de Pigui, utilizaremos el cvs que lleva integrado eclipse en vez de Tortoise.
lunes, 26 de febrero de 2007
CVS SourceForge.net
Pasos a seguir para Windows:
1. Descarga TortoiseCVS e instálalo.
2. Busca o crea una carpeta en la que quieras que la NWiki sea descargada.
3. Selecciónala con el botón derecho del ratón y selecciona "CVS Checkout" en el menú. Verás una caja de diálogo. 4. Copia este texto en el campo CVSROOT (¡utilizando tu propio nombre de usuario!):
:pserver:anonymous@moodle.cvs.sourceforge.net:/cvsroot/moodle
5. En el campo "Module", teclea "contrib" para obtener el directorio en el que se encuentra la NWiki.
6. Selecciona el botón"OK" y todo debería ser descargado.
Un diálogo debería mostrarte todos los ficheros que están siendo descargados y, tras un rato, deberías tener una copia completa de Moodle. Después de esta primera descarga (checkout) puedes obtener los últimos cambios desde el servidor CVS:
- Con el botón derecho del ratón encima de tu carpeta Moodle (o de cualquier otro fichero) selecciona "CVS Update".
- Siéntate y examina los registros atentamente. Apunta los conflictos que pudieran aparecer si has realizado modificaciones en tu copia local que entran en conflicto con cambios en las versiones que te estás descargando - necesitarás editar estos ficheros y resolver los conflictos manualmente.
Después de modificar ficheros (notarás que sus iconos cambian de verde a rojo) puedes enviar esos cambios al servidor CVS así:
- Con el botón derecho del ratón encima de tu carpeta Moodle (o de cualquier otro fichero) selecciona "CVS Commit...".
- En el diálogo que aparece, introduce una descripción clara de los cambios que estás enviando.
- Selecciona "OK". Tus cambios serán enviados al servidor.
* Situación de la NWiki dentro de la carpeta "contrib":
- Los archivos del core de la wiki estan en: /contrib/plugins/mod/wiki
- El código que define el curso en formato wiki está en: /contrib/plugins/course/format/wiki
- Nuestros bloques estan en:/contrib/plugins/blocks/wiki_XXX
- Por ultimo, la carpeta /lang, se encunetra dentro de la carpeta de la wiki: /contrib/plugins/mod/wiki/lang
viernes, 16 de febrero de 2007
Manual XHTML
Lo primero que debemos hacer para desarrollar un documento XHTML válido, es indicarle al navegador el tipo de documento que va a recibir. Actualmente existen tres tipos de documentos XHTML que podemos usar:
La declaración del tipo utilizado se debe hacer al inicio de cualquier documento que forme parte de la web. A continuación vemos la correcta aplicación de dicha declaración, que conocemos como DOCTYPE:
Se tiene que destacar que siempre que el documento vaya a usar caracteres latinos (acentos y eñes) es necesario indicar una codificación compatible con los mismos. La codificación por default de XHTML es UTF-8, misma que tiene conflictos con algunos caracteres de uso común en nuestra lengua, por eso es importante asegurarse que la codificación sea iso-8859-1, como se ve en el ejemplo de arriba.
A continuación se describe 5 reglas básicas que cubren la mayor parte de los errores de un documento XHTML.
1. Si no lo cierras, no sirve
En XHTML no puede haber elementos sin cierre. Un <p> debe cerrarse con un </p>, un <li> debe cerrarse con un </li>, y así todos los elementos.
Aquellos que son independientes como <br>, <hr> y los <input>, deben cerrarse a si mismos de esta forma: <br />, <hr /> y <input />.
2. Anida de forma lógica
Los elementos en un documento XHTML deben cerrarse en el orden inverso que fueron abiertos.
De tal forma que <div><p><strong> debe cerrarse en el orden </strong></p></div>. No puedes saltarte un cierre, eso convertiría tu documento en "Mal Formado", y fallaría su validación.
3. No uses mayúsculas
Tanto los nombres de las etiquetas como los nombres de los atributos deben escribirse en minúsculas.
Esto quiere decir que la siguiente etiqueta: <DIV CLASS="EncabezadoPrincipal"> es incorrecta, su forma correcta sería: <div class="EncabezadoPrincipal">, nota que el valor del atributo si puede tener mayúsculas, la regla se aplica para los nombres de las etiquetas y atributos, no para los valores o contenido de los mismos.
4. Usa las comillas
Todos los atributos de cualquier etiqueta deben encerrarse entre comillas.
La forma correcta de asignar valores a los atributos de una etiqueta es la siguiente: <img src="mi_imagen.gif" height="50" width="150" alt="Mi Foto">.
5. No lo uses para diseñar
Piensa en XHTML como el medio para organizar y estructurar tu documento, no como un medio para darle formato. Olvidate de los <font>, los <... background>, <...align>, etcétera.
Links de interés:
Guía Breve de XHTML
Especificación oficial de XHTML (inglés)
Guía en línea sobre el lenguaje XHTML
Herramientas para validar nuestro código:
Validador en línea del W3C
Web Developer: extensión para Firefox
Internet Explorer Developer Toolbar Beta 3: extensión para Internet Explorer
- Transicional: permite la utilización de algunas etiquetas de formato dentro del código de las páginas para ser soportadas por navegadores antiguos que tienen problemas con las CSS
- Estricto: se utiliza en combinación con W3C CSS, siguen al pie de la letra las convenciones marcadas separando completamente las etiquetas de formato del contenido (el formato se apoya exclusivamente en la CSS).
- Frameset: se utiliza cuando se divide la pantalla en varios marcos o frames.
La declaración del tipo utilizado se debe hacer al inicio de cualquier documento que forme parte de la web. A continuación vemos la correcta aplicación de dicha declaración, que conocemos como DOCTYPE:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//WC3//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Se tiene que destacar que siempre que el documento vaya a usar caracteres latinos (acentos y eñes) es necesario indicar una codificación compatible con los mismos. La codificación por default de XHTML es UTF-8, misma que tiene conflictos con algunos caracteres de uso común en nuestra lengua, por eso es importante asegurarse que la codificación sea iso-8859-1, como se ve en el ejemplo de arriba.
A continuación se describe 5 reglas básicas que cubren la mayor parte de los errores de un documento XHTML.
1. Si no lo cierras, no sirve
En XHTML no puede haber elementos sin cierre. Un <p> debe cerrarse con un </p>, un <li> debe cerrarse con un </li>, y así todos los elementos.
Aquellos que son independientes como <br>, <hr> y los <input>, deben cerrarse a si mismos de esta forma: <br />, <hr /> y <input />.
2. Anida de forma lógica
Los elementos en un documento XHTML deben cerrarse en el orden inverso que fueron abiertos.
De tal forma que <div><p><strong> debe cerrarse en el orden </strong></p></div>. No puedes saltarte un cierre, eso convertiría tu documento en "Mal Formado", y fallaría su validación.
3. No uses mayúsculas
Tanto los nombres de las etiquetas como los nombres de los atributos deben escribirse en minúsculas.
Esto quiere decir que la siguiente etiqueta: <DIV CLASS="EncabezadoPrincipal"> es incorrecta, su forma correcta sería: <div class="EncabezadoPrincipal">, nota que el valor del atributo si puede tener mayúsculas, la regla se aplica para los nombres de las etiquetas y atributos, no para los valores o contenido de los mismos.
4. Usa las comillas
Todos los atributos de cualquier etiqueta deben encerrarse entre comillas.
La forma correcta de asignar valores a los atributos de una etiqueta es la siguiente: <img src="mi_imagen.gif" height="50" width="150" alt="Mi Foto">.
5. No lo uses para diseñar
Piensa en XHTML como el medio para organizar y estructurar tu documento, no como un medio para darle formato. Olvidate de los <font>, los <... background>, <...align>, etcétera.
Links de interés:
Guía Breve de XHTML
Especificación oficial de XHTML (inglés)
Guía en línea sobre el lenguaje XHTML
Herramientas para validar nuestro código:
Validador en línea del W3C
Web Developer: extensión para Firefox
Internet Explorer Developer Toolbar Beta 3: extensión para Internet Explorer
jueves, 15 de febrero de 2007
XHTML
La primera condición para conseguir que una página sea accesible es que cumpla el estándar XHTML.
XTHML, acrónimo inglés de eXtensible Hypertext Markup Language (lenguaje extensible de marcado de hipertexto), es el lenguaje de marcado pensado para sustituir a HTML como estándar para las páginas web. XHTML es la versión XML de HTML, por lo que tiene, básicamente, las mismas funcionalidades, pero cumple las especificaciones, más estrictas, de XML. Su objetivo es avanzar en el proyecto del World Wide Web Consortium de lograr una web semántica, donde la información, y la forma de presentarla estén claramente separadas. En este sentido, XHTML serviría únicamente para transmitir la información que contiene un documento, dejando para hojas de estilo (como las hojas de estilo en cascada) y JavaScript su aspecto y diseño en distintos medios (ordenadores, PDAs, teléfonos móviles, impresoras...).
XTHML, acrónimo inglés de eXtensible Hypertext Markup Language (lenguaje extensible de marcado de hipertexto), es el lenguaje de marcado pensado para sustituir a HTML como estándar para las páginas web. XHTML es la versión XML de HTML, por lo que tiene, básicamente, las mismas funcionalidades, pero cumple las especificaciones, más estrictas, de XML. Su objetivo es avanzar en el proyecto del World Wide Web Consortium de lograr una web semántica, donde la información, y la forma de presentarla estén claramente separadas. En este sentido, XHTML serviría únicamente para transmitir la información que contiene un documento, dejando para hojas de estilo (como las hojas de estilo en cascada) y JavaScript su aspecto y diseño en distintos medios (ordenadores, PDAs, teléfonos móviles, impresoras...).
Accesibilidad WEB
La accesibilidad web indica la capacidad de acceso a la Web y a sus contenidos por todas las personas, independientemente de las limitaciones propias del individuo (discapacidad) o de las que se deriven del contexto de uso (tecnológicas o ambientales). Esta cualidad está íntimamente relacionada con la usabilidad.
El máximo organismo dentro de la jerarquía de Internet que se encarga de promover la accesibilidad es el W3C, en especial su grupo de trabajo WAI.
Algunos links de interés:
- Guía Breve de Accesibilidad Web
- SIDAR: Seminario de Iniciativas sobre Discapacidad y Accesibilidad en la Red
- Qué es la Accesibilidad Web
- Documento PDF sobre Accesibilidad
Herramientas en español de comprobación de la accesibilidad:
Empezamos!
El primer tema que trataremos en nuestro proyecto es la accesiblidad web de la nwiki.
Allá vamos!
Allá vamos!
Suscribirse a:
Entradas (Atom)
