diff --git a/html2005.ico b/html2005.ico new file mode 100644 index 0000000..ae35d60 Binary files /dev/null and b/html2005.ico differ diff --git a/html2005/0introduccion.htm b/html2005/0introduccion.htm new file mode 100644 index 0000000..14a419a --- /dev/null +++ b/html2005/0introduccion.htm @@ -0,0 +1,17 @@ + + + + +Edición en HTML + + + + + + + + + + + + diff --git a/html2005/10estilos.htm b/html2005/10estilos.htm new file mode 100644 index 0000000..8758e2c --- /dev/null +++ b/html2005/10estilos.htm @@ -0,0 +1,16 @@ + + + + +Edición en HTML + + + + + + + + + + + diff --git a/html2005/11publicacion.htm b/html2005/11publicacion.htm new file mode 100644 index 0000000..93b2f5f --- /dev/null +++ b/html2005/11publicacion.htm @@ -0,0 +1,16 @@ + + + + +Edición en HTML + + + + + + + + + + + diff --git a/html2005/12recursos.htm b/html2005/12recursos.htm new file mode 100644 index 0000000..2e1fa84 --- /dev/null +++ b/html2005/12recursos.htm @@ -0,0 +1,16 @@ + + + + +Edición en HTML + + + + + + + + + + + diff --git a/html2005/13accesibilidad.htm b/html2005/13accesibilidad.htm new file mode 100644 index 0000000..15f4698 --- /dev/null +++ b/html2005/13accesibilidad.htm @@ -0,0 +1,16 @@ + + + + +Edición en HTML + + + + + + + + + + + diff --git a/html2005/14bugs.htm b/html2005/14bugs.htm new file mode 100644 index 0000000..74abb6e --- /dev/null +++ b/html2005/14bugs.htm @@ -0,0 +1,16 @@ + + + + +Edición en HTML + + + + + + + + + + + diff --git a/html2005/1base.htm b/html2005/1base.htm new file mode 100644 index 0000000..df81607 --- /dev/null +++ b/html2005/1base.htm @@ -0,0 +1,16 @@ + + + + +Edición en HTML + + + + + + + + + + + diff --git a/html2005/2tablas.htm b/html2005/2tablas.htm new file mode 100644 index 0000000..ef3fc67 --- /dev/null +++ b/html2005/2tablas.htm @@ -0,0 +1,16 @@ + + + + +Edición en HTML + + + + + + + + + + + diff --git a/html2005/3multimedia.htm b/html2005/3multimedia.htm new file mode 100644 index 0000000..2200d62 --- /dev/null +++ b/html2005/3multimedia.htm @@ -0,0 +1,16 @@ + + + + +Edición en HTML + + + + + + + + + + + diff --git a/html2005/4vinculos.htm b/html2005/4vinculos.htm new file mode 100644 index 0000000..854d887 --- /dev/null +++ b/html2005/4vinculos.htm @@ -0,0 +1,16 @@ + + + + +Edición en HTML + + + + + + + + + + + diff --git a/html2005/5validacion.htm b/html2005/5validacion.htm new file mode 100644 index 0000000..0ad294c --- /dev/null +++ b/html2005/5validacion.htm @@ -0,0 +1,16 @@ + + + + +Edición en HTML + + + + + + + + + + + diff --git a/html2005/6plantillas.htm b/html2005/6plantillas.htm new file mode 100644 index 0000000..f45b5b0 --- /dev/null +++ b/html2005/6plantillas.htm @@ -0,0 +1,16 @@ + + + + +Edición en HTML + + + + + + + + + + + diff --git a/html2005/7formularios.htm b/html2005/7formularios.htm new file mode 100644 index 0000000..610d4ee --- /dev/null +++ b/html2005/7formularios.htm @@ -0,0 +1,16 @@ + + + + +Edición en HTML + + + + + + + + + + + diff --git a/html2005/8marcos.htm b/html2005/8marcos.htm new file mode 100644 index 0000000..d089438 --- /dev/null +++ b/html2005/8marcos.htm @@ -0,0 +1,16 @@ + + + + +Edición en HTML + + + + + + + + + + + diff --git a/html2005/9xhtml.htm b/html2005/9xhtml.htm new file mode 100644 index 0000000..8f99601 --- /dev/null +++ b/html2005/9xhtml.htm @@ -0,0 +1,16 @@ + + + + +Edición en HTML + + + + + + + + + + + diff --git a/html2005/Images/Thumbs.db b/html2005/Images/Thumbs.db new file mode 100644 index 0000000..f6c0880 Binary files /dev/null and b/html2005/Images/Thumbs.db differ diff --git a/html2005/Images/autores-02.jpg b/html2005/Images/autores-02.jpg new file mode 100644 index 0000000..3162d3f Binary files /dev/null and b/html2005/Images/autores-02.jpg differ diff --git a/html2005/Images/autores-03.jpg b/html2005/Images/autores-03.jpg new file mode 100644 index 0000000..3572c54 Binary files /dev/null and b/html2005/Images/autores-03.jpg differ diff --git a/html2005/Images/autores-04.jpg b/html2005/Images/autores-04.jpg new file mode 100644 index 0000000..84b33b3 Binary files /dev/null and b/html2005/Images/autores-04.jpg differ diff --git a/html2005/Images/autores-05.jpg b/html2005/Images/autores-05.jpg new file mode 100644 index 0000000..3d8a25e Binary files /dev/null and b/html2005/Images/autores-05.jpg differ diff --git a/html2005/Images/autores.jpg b/html2005/Images/autores.jpg new file mode 100644 index 0000000..a2c6a30 Binary files /dev/null and b/html2005/Images/autores.jpg differ diff --git a/html2005/Images/autoresover-03.jpg b/html2005/Images/autoresover-03.jpg new file mode 100644 index 0000000..861be43 Binary files /dev/null and b/html2005/Images/autoresover-03.jpg differ diff --git a/html2005/Images/cabecera.jpg b/html2005/Images/cabecera.jpg new file mode 100644 index 0000000..252b6d0 Binary files /dev/null and b/html2005/Images/cabecera.jpg differ diff --git a/html2005/Images/flechadcha.gif b/html2005/Images/flechadcha.gif new file mode 100644 index 0000000..f579691 Binary files /dev/null and b/html2005/Images/flechadcha.gif differ diff --git a/html2005/Images/flechaizq.gif b/html2005/Images/flechaizq.gif new file mode 100644 index 0000000..662c99b Binary files /dev/null and b/html2005/Images/flechaizq.gif differ diff --git a/html2005/Thumbs.db b/html2005/Thumbs.db new file mode 100644 index 0000000..70a41e1 Binary files /dev/null and b/html2005/Thumbs.db differ diff --git a/html2005/accesibilidad/accesibilidad.htm b/html2005/accesibilidad/accesibilidad.htm new file mode 100644 index 0000000..dafa032 --- /dev/null +++ b/html2005/accesibilidad/accesibilidad.htm @@ -0,0 +1,133 @@ + + + + + + Accesibilidad + + + + + + + + + + + + +
+

Accesibilidad

+ +
+
+ +
+
+ +
+ + +
+

Accesibilidad

+

El crecimiento de la WEB ha hecho que se convierta, +posiblemente, en una de las principales fuentes de +información de las que disponemos en el momento actual. +Ahora bien, no estaría de más pararnos a pensar +que el plural que acabo de utilizar engloba, especialmente en el +contexto en que se escribe este documento, a un grupo de +población al que podríamos atribuirle las +siguientes características:

+ + + +

Como suele ocurrir habitualmente tendemos a establecer los +parámetros que pueden definir nuestra situación +como lo habitual, olvidando en muchos casos la existencia de otros +grupos humanos afectados por situaciones que pueden llegar a ser muy +distantes de nuestros criterios cotidianos.

+ +

Bastará con formular las condiciones anteriores en +negativo para darnos cuenta de que el acceso a los contenidos de la WEB +puede convertirse en una tarea bastante más dificultosa de +lo que podíamos imaginar.

+ +

La siguientes palabras de Tim Berners Lee, creador de Internet +y director del World Wide Web Consortium (W3C) encabezan la +sección de accesibilidad de dicho organismo (WAI-Web +Accessibility Initiative):

+ +
+ El poder de la red está en su +universalidad. El acceso de todos y cada uno sin que influyan las +deficiencias es un aspecto esencial. +
+ +

Del trabajo de la WAI han surgido una serie de documentos que +establecen unas pautas y unos criterios de comprobación de +las mismas para obtener webs accesibles. Dichos documentos constituyen +una especificación que se encuentra en su versión +1.0 cuyas siglas son WCAG (Web Content Accessibility Guidelines - +Directrices de Accesibilidad para el Contenido WEB)

+ +

No todas las pautas afectan en el mismo grado a la +accesibilidad, por lo que se aplican con tres diferentes prioridades, +de forma que los criterios de prioridad 1 serían de +cumplimiento prácticamente obligatorio para aumentar de +forma muy significativa el grado de accesibilidad de la +página en la que se cumplen. En grado decreciente en cuanto +a su incidencia están los criterios de prioridad 2 y, por +último los de prioridad 3 que garantizarían que +la página sería accesible para la totalidad de +los visitantes independientemente de los dispositivos que utilicen o +las discapacidades motoras o sensoriales que puedan padecer.

+ +

En función del cumplimiento de dichas pautas se han +creado unos logotipos de certificación de conformidad con la +especificación

+ +

Logotipo de conformidad WAI Nivel ANivel "A" de +Conformidad: Se han satisfecho todos los +puntos de verificación de Prioridad 1.

+ +

Logotipo de conformidad WAI Nivel Doble ANivel +"Doble-A" de Conformidad: Se han satisfecho todos +los puntos de verificación de Prioridad 1 y 2

+ +

Logotipo de conformidad WAI Nivel Triple ANivel +"Triple-A" de Conformidad: Se han satisfecho todos +los puntos de verificación de Prioridad 1, 2, y 3

+ +
+ +

 

+ +

 

+ +
 
+ +

 

+ +

+ + + diff --git a/html2005/accesibilidad/accesibilidadaccesibleAAA.htm b/html2005/accesibilidad/accesibilidadaccesibleAAA.htm new file mode 100644 index 0000000..a7ef72f --- /dev/null +++ b/html2005/accesibilidad/accesibilidadaccesibleAAA.htm @@ -0,0 +1,94 @@ + + + + + +Algunos recursos en la red + + + + + + + + +

 

+

El crecimiento de la WEB ha hecho que se convierta, posiblemente, en una de + las principales fuentes de información de las que disponemos en el momento + actual. Ahora bien, no estaría de más pararnos a pensar que el + plural que acabo de utilizar engloba, especialmente en el contexto en que se + escribe este documento, a un grupo de población al que podríamos + atribuirle las siguientes características:

+ +

Como suele ocurrir habitualmente tendemos a establecer los parámetros + que pueden definir nuestra situación como lo habitual, olvidando en muchos + casos la existencia de otros grupos humanos afectados por situaciones que pueden + llegar a ser muy distantes de nuestros criterios cotidianos.

+

Bastará con formular las condiciones anteriores en negativo para darnos + cuenta de que el acceso a los contenidos de la WEB puede convertirse en una + tarea bastante más dificultosa de lo que podíamos imaginar.

+

La siguientes palabras de Tim Berners Lee, creador de Internet y director del + World Wide Web Consortium (W3C) encabezan la sección de accesibilidad + de dicho organismo (WAI-Web Accessibility Initiative):

+
+

El poder de la red está en su universalidad. El acceso de todos + y cada uno sin que influyan las deficiencias es un aspecto esencial.

+
+

Del trabajo de la WAI han surgido una serie de documentos que establecen unas + pautas y unos criterios de comprobación de las mismas para obtener webs + accesibles. Dichos documentos constituyen una especificación que se encuentra + en su versión 1.0 cuyas siglas son WCAG (Web Content Accessibility Guidelines + - Directrices de Accesibilidad para el Contenido WEB)

+

No todas las pautas afectan en el mismo grado a la accesibilidad, por lo que + se aplican con tres diferentes prioridades, de forma que los criterios de prioridad + 1 serían de cumplimiento prácticamente obligatorio para aumentar + de forma muy significativa el grado de accesibilidad de la página en + la que se cumplen. En grado decreciente en cuanto a su incidencia están + los criterios de prioridad 2 y, por último los de prioridad 3 que garantizarían + que la página sería accesible para la totalidad de los visitantes + independientemente de los dispositivos que utilicen o las discapacidades motoras + o sensoriales que puedan padecer.

+

En función del cumplimiento de dichas pautas se han creado unos logotipos + de certificación de conformidad con la especificación

+ + + + + + + + + + + + + +
Logotipo de conformidad WAI Nivel A

Nivel "A" de Conformidad: Se han satisfecho todos los puntos + de verificación de Prioridad 1

Logotipo de conformidad WAI Nivel Doble A

Nivel "Doble-A" de Conformidad: Se han satisfecho todos los + puntos de verificación de Prioridad 1 y 2

Logotipo de conformidad WAI Nivel Triple A

Nivel "Triple-A" de Conformidad: Se han satisfecho todos + los puntos de verificación de Prioridad 1, 2, y 3

+ + + + + + + diff --git a/html2005/accesibilidad/directrices.htm b/html2005/accesibilidad/directrices.htm new file mode 100644 index 0000000..0cf5baa --- /dev/null +++ b/html2005/accesibilidad/directrices.htm @@ -0,0 +1,227 @@ + + + + + + Directrices + + + + + + + + + + + + +
+

Accesibilidad>>Directrices

+ +
+
+ +
+
+ +
+ + +
+

Directrices de Accesibilidad para el Contenido en la Web

+ +
+ +
1 - Proporcione alternativas equivalentes +para el contenido visual y sonoro
+ +
Incorporando un contenido que, cuando sea presentado al +usuario, cumpla esencialmente la misma función o +propósito que el contenido visual o sonoro. En ocasiones +tendrá un carácter primordialmente descriptivo +del contenido (Ej.: descripción de una imagen o +transcripción de un texto) mientras que en otras los +esencial será informar de la función (Ej.: +Notificar el destino al que se dirigirá la +pulsación sobre un enlace soportado por un +gráfico)
+ +
2 - No confíe sólo en +el color
+ +
Habrá que asegurarse de que los textos y +gráficos son comprensibles cuando se vean sin color.
+ +
3 - Utilice marcadores y hojas de estilo, y +hágalo apropiadamente
+ +
Marque los documentos con los elementos estructurales +apropiados. Controle la presentación con hojas de estilo en +vez de con atributos y elementos de presentación. (Los +puntos de verificación de esta directriz son de prioridad 2)
+ +
4 - Aclare el lenguaje natural usado
+ +
Marcar con las etiquetas adecuadas para facilitar la +pronunciación o interpretación del texto +abreviado o en idioma extranjero.
+ +
5 - Cree tablas que se transformen airosamente
+ +
Asegúrese de que las tablas tienen el marcado +necesario para ser transformadas por navegadores accesibles y otras +aplicaciones de usuario.
+ +
6 - Asegúrese de que las +páginas que incluyen nuevas tecnologías se +transfiguran airosamente
+ +
Asegúrese de que las páginas son +accesibles incluso cuando las tecnologías más +recientes no son soportadas o se deshabilitan, para lo que +habría que proporcionar versiones alternativas en el caso de +que ello no sea posible.
+ +
7 - Garantice al usuario el control sobre los +cambios del contenido tempo-sensible
+ +
Se trata de proporcionar al usuario procedimientos +accesibles para que puedan ser pausados o detenidos los contenidos o +páginas que se mueven, parpadean, se desplazan o se +actualizan automáticamente.
+ +
8 - Garantice la accesibilidad directa de las +interfaces de usuario incrustadas
+ +
Asegúrese de que las interfaces de usuario +siguen los principios del diseño accesible: acceso a la +funcionalidad independiente del tipo de dispositivo, operabilidad a +través del teclado, interfaz por voz, etc. (Esta directriz +se considera de prioridad 1 cuando afecta a funcionalidades importantes +no presentadas de forma alternativa. Si se trata de funciones poco +importantes pasa a ser de prioridad 2)
+ +
9 - Diseñe para la independencia +del tipo de dispositivo
+ +
Use características que permitan la +activación de los elementos de la página a +través de diversos dispositivos de entrada.
+ +
10 - Utilice soluciones provisionales
+ +
Use soluciones de accesibilidad provisionales de manera que +las ayudas técnicas y los navegadores antiguos puedan +funcionar correctamente.(Directriz de prioridad 2 y 3)
+ +
11 - Utilice las tecnologías y +directrices del W3C
+ +
Utilice las tecnologías del W3C (de +acuerdo con la especificación) y siga las directrices de +accesibilidad. Cuando no sea posible utilizar una tecnología +del W3C, +o hacerlo da como resultado un material que no se transforma +airosamente, proporcione una versión alternativa del +contenido que sea accesible.
+ +
12 - Proporcione información de +contexto y orientación
+ +
La función de la información de +contexto y orientación será ayudar a los usuarios +a entender los elementos o páginas complejas.
+ +
13 - Proporcione mecanismos de +navegación claros
+ +
El objetivo es incrementar la probabilidad de que una +persona encuentre lo que está buscando en el sitio para lo +que se recomienda incorporar información orientativa, barras +de navegación, un mapa del sitio, etc. (Se trata de una +directriz de prioridad 2 y 3)
+ +
14 - Asegúrese de que los +documentos sean claros y sencillos
+ +
La +utilización de el lenguaje más claro y sencillo +posible, unida a la +aplicación del mismo principio en cuanto al estilo y +diseño general son +las bases de esta directriz.
+ +
+ +

La documentación al respecto, incluyendo las pautas +de comprobación para cada una de las directrices y las +técnicas necesarias se encuentra publicada en Internet. +Obviamente puedes recurrir a las fuentes originales +que son las únicas que tienen el respaldo pleno del W3C, pero +que tendrás que leer en inglés. Si lo prefieres +puedes recurrir a las traducciones de los diferentes documentos que se +han ido realizando que, si bien no tienen autorización +oficial del W3C, +pueden considerarse plenamente fiables. De hecho puedes encontrarlas a +partir de la página del Seminario de Iniciativas sobre +Discapacidad y Accesibilidad en la Red (SIDAR) impulsado y +patrocinado por el Real Patronato sobre Discapacidad, de donde se han +obtenido las referencias para elaborar esta introducción a +la accesibilidad.

+ +

Una primera aproximación para el trabajo puedes ser +la siguiente guía

+ +

Guía breve para crear sitios Web accesibles

+ +
    + +
  1. Imágenes y animaciones: Use texto alternativo +(atributo alt) para describir la +función de los elementos visuales.
    2. + +
  2. Mapas de imagen: Use mapas de cliente y texto alternativo +para las zonas activas.
    3. + +
  3. Multimedia: Facilite subtítulos y +trascripción de los ficheros de sonido, +descripción de los vídeos y versiones accesibles +en el caso de usar formatos no accesibles.
    4. + +
  4. Enlaces de hipertexto: Use texto que tenga sentido cuando +se lea fuera de contexto. Por ejemplo, no usar "pincha +aquí".
    5. + +
  5. Organización de las páginas: Use +encabezados (h1, h2, + h3,...), listas y estructura consistente. +Use Hojas de Estilo en Cascada (CSS) para +maquetación y estilo, donde sea posible.
    6. + +
  6. Gráficos de datos: Resuma o use el atributo longdesc. +
    7. + +
  7. Scripts, applets y plug-ins: Ofrezca alternativas +accesibles en el caso de que las características activas no +sean accesibles o no tengan soporte.
    8. + +
  8. Marcos (Frames): +Etiquete con los atributos title o name.
    9. + +
  9. Tablas: Realícelas de manera que se puedan leer +línea a línea. Incluya un resumen. Evite el uso +de tablas para dar formato a las páginas.
    10. + +
  10. Revise su trabajo: Valide el código HTML. Use +herramientas de evaluación y navegadores +sólo-texto para verificar la accesibilidad.
    11. + +
+ +

 

+ +

 

+
+ + diff --git a/html2005/accesibilidad/directricesaccesible.htm b/html2005/accesibilidad/directricesaccesible.htm new file mode 100644 index 0000000..e772f7b --- /dev/null +++ b/html2005/accesibilidad/directricesaccesible.htm @@ -0,0 +1,138 @@ + + + + + +Algunos recursos en la red + + + + + + + + +

Directrices de Accesibilidad para el Contenido en la Web +

+
+
1 - Proporcione alternativas equivalentes para el contenido visual + y sonoro
+
Incorporando un contenido que, cuando sea presentado al usuario, cumpla + esencialmente la misma función o propósito que el contenido visual o sonoro. + En ocasiones tendrá un carácter primordialmente descriptivo + del contenido (Ej.: descripción de una imagen o transcripción + de un texto) mientras que en otras los esencial será informar de la + función (Dé: Notificar el destino al que se dirigirá + la pulsación sobre un enlace soportado por un gráfico)
+
2 - No confíe sólo en el color
+
Habrá que asegurarse de que los textos y gráficos son comprensibles + cuando se vean sin color.
+
3 - Utilice marcadores y hojas de estilo, y hágalo apropiadamente
+
Marque los documentos con los elementos estructurales apropiados. Controle + la presentación con hojas de estilo en vez de con atributos y elementos de + presentación. (Los puntos de verificación de esta directriz son de + prioridad 2)
+
4 - Aclare el lenguaje natural usado
+
Indicar con las etiquetas adecuadas para facilitar la pronunciación o interpretación + del texto abreviado o en idioma extranjero.
+
5 - Cree tablas que se transformen airosamente
+
Asegúrese de que las tablas tienen el marcado necesario para ser transformadas + por navegadores accesibles y otras aplicaciones de usuario.
+
6 - Asegúrese de que las páginas que incluyen nuevas + tecnologías se transfiguran airosamente
+
Asegúrese de que las páginas son accesibles incluso cuando las tecnologías + más recientes no son soportadas o se deshabilitan, para lo que habría + que proporcionar versiones alternativas en el caso de que ello no sea posible.
+
7 - Garantice al usuario el control sobre los cambios del contenido + tempo-sensible
+
Se trata de proporcionar al usuario procedimientos accesibles para que puedan + ser pausados o detenidos los contenidos o páginas que se mueven, parpadean, + se desplazan o se actualizan automáticamente.
+
8 - Garantice la accesibilidad directa de las interfaces de usuario + incrustadas
+
Asegúrese de que las interfaces de usuario siguen los principios del diseño + accesible: acceso a la funcionalidad independiente del tipo de dispositivo, + operabilidad a través del teclado, interfaz por voz, etc. (Esta directriz + se considera de prioridad 1 cuando afecta a funcionalidades importantes no + presentadas de forma alternativa. Si se trata de funciones poco importantes + pasa a ser de prioridad 2)
+
9 - Diseñe para la independencia del tipo de dispositivo
+
Use características que permitan la activación de los elementos de la página + a través de diversos dispositivos de entrada.
+
10 - Utilice soluciones provisionales
+
Use soluciones de accesibilidad provisionales de manera que las ayudas técnicas + y los navegadores antiguos puedan funcionar correctamente.(Directriz de prioridad + 2 y 3)
+
11 - Utilice las tecnologías y directrices del W3C
+
Utilice las tecnologías del W3C (de acuerdo con la especificación) y siga + las directrices de accesibilidad. Cuando no sea posible utilizar una tecnología + del W3C, o hacerlo da como resultado un material que no se transforma airosamente, + proporcione una versión alternativa del contenido que sea accesible.
+
12 - Proporcione información de contexto y orientación
+
La función de la información de contexto y orientación será + ayudar a los usuarios a entender los elementos o páginas complejas.
+
13 - Proporcione mecanismos de navegación claros
+
El objetivo es incrementar la probabilidad de que una persona encuentre + lo que está buscando en el sitio para lo que se recomienda incorporar información + orientativa, barras de navegación, un mapa del sitio, etc. (Se trata de una + directriz de prioridad 2 y 3)
+
14 - Asegúrese de que los documentos sean claros y sencillos
+
La utilización de el lenguaje más claro y sencillo posible, unida a la aplicación del mismo principio en cuanto al estilo y diseño general son las bases de esta directriz.
+
+

La documentación al respecto, incluyendo las pautas de comprobación para cada + una de las directrices y las técnicas necesarias se encuentra publicada en Internet. + Obviamente puedes recurrir a las fuentes originales + que son las únicas que tienen el respaldo pleno del W3C, pero que tendrás + que leer en inglés. Si lo prefieres puedes recurrir a las traducciones + de los diferentes documentos que se han ido realizando que, si bien no tienen + autorización oficial del W3C, pueden considerarse plenamente fiables. + De hecho puedes encontrarlas a partir de la página del Seminario de Iniciativas + sobre Discapacidad y Accesibilidad en la Red (SIDAR) + impulsado y patrocinado por el Real Patronato sobre Discapacidad, de donde se + han obtenido las referencias para elaborar esta introducción a la accesibilidad.

+

Una primera aproximación para el trabajo puedes ser la siguiente guía +

+

Guía breve para crear sitios Web accesibles.

+
    +
  1. Imágenes y animaciones: Use texto alternativo (atributo alt) para + describir la función de los elementos visuales.
    2. +
  2. Mapas de imagen: Use mapas de cliente y texto alternativo para las zonas + activas.
    3. +
  3. Multimedia: Facilite subtítulos y trascripción de los ficheros + de sonido, descripción de los vídeos y versiones accesibles + en el caso de usar formatos no accesibles.
    4. +
  4. Enlaces de hipertexto: Use texto que tenga sentido cuando se lea fuera de + contexto. Por ejemplo, no usar "pincha aquí".
    5. +
  5. Organización de las páginas: Use encabezados (H1, H2, H3,...), + listas y estructura consistente. Use Hojas de Estilo en Cascada (CSS) para + maquetación y estilo, donde sea posible.
    6. +
  6. Gráficos de datos: Resuma o use el atributo longdesc.
    7. +
  7. Scripts, applets y plug-ins: Ofrezca alternativas accesibles en el caso + de que las características activas no sean accesibles o no tengan soporte. +
    8. +
  8. Marcos (Frames): Etiquete con los atributos title o name.
    9. +
  9. Tablas: Realícelas de manera que se puedan leer línea a línea. + Incluya un resumen. Evite el uso de tablas para dar formato a las páginas. +
    10. +
  10. Revise su trabajo: Valide el código HTML. Use herramientas de evaluación + y navegadores sólo-texto para verificar la accesibilidad.
    11. +
+

 

+

 

+ + + + + + + + + diff --git a/html2005/accesibilidad/pautas.htm b/html2005/accesibilidad/pautas.htm new file mode 100644 index 0000000..10c1445 --- /dev/null +++ b/html2005/accesibilidad/pautas.htm @@ -0,0 +1,2296 @@ + + + + + + + + + + + + + Programas y recursos + + + + + + + + + + + +
+

Accesibilidad>>Programas y recursos

+ +
+
+ +
+
+ +
+ + +
+ +

Programas y recursos sobre accesibilidad web

+ +

Una de las recomendaciones que se incluye en los textos del WAI es la de complementar + las herramientas automáticas de revisión con un análisis + manual. Esto se debe a que las herramientas de revisión automática + no tienen capacidad para asegurar categóricamente si un determinado componente + de la página cumple o no ciertos puntos de verificación de las + directrices. Un programa de este tipo localizará inequívocamente + la ausencia del atributo alt en una imagen y lo marcará + para su corrección. No podrá, sin embargo, valorar si el texto + incluido en un atributo alt cumple su función descriptiva + y dará como válida el elemento respecto a ese criterio por el + mero hecho de la existencia. Sería lo que ocurriría si las imágenes + de unas flechas que se utilicen como indicadores de vínculos para navegar + por un conjunto de páginas llevan un atributo alt del tipo "pincha + aquí", lo cual no parece que aclare mucho a quien no puede ver el + sentido de cadad una de las flechas.

+ + + +

A pesar de ello la utilización de alguno de estos programas puede simplificar + considerablemente el trabajo de adaptación de un sitio web para hacerlo + accesible, puesto que llamará nuestra atención sobre una parte + importante de los posibles puntos conflictivos.

+ + + +

Aunque se podrían consultar algunas utilidades en línea parece + que resulta más cómodo poder disponer de una herramienta que trabaje + en modo local y nos permita realizar las correcciones en la fase previa a la + publicación.

+ + + +

En la categoría de analizador cabe destacar el programa Test de Accesibilidad + Web (TAW). Se trata de una aplicación basada en Java que se puede descargar + gratuitamente e instalar en nuestra máquina para poder analizar las páginas + en modo local. Al tratarse de una aplicación Java está disponible + en dos versiones: una versión ligera (3,2 MB) para quienes ya tienen + instalada en su ordenador los componentes de la máquina virtual Java + y otra versión completa (18,4 MB)que incluye la máquina virtual + Java para quienes no la tengan instalada. En la carpeta de programas + se han incluido los instaladores para Windows de la versión 3 (Existen + también versiones del programa que corren sobre Linux, Solaris, AIX, + Unix y HP-UX).

+ + + +

Un paso más allá va otra aplicación denominada A-prompt. + Además de realizar la comprobación de criterios apunta toda una + serie de comprobaciones que se deberán realizar manualmente para poder + certificar la accesibilidad. El propio programa va haciendo las preguntas pertinentes + y nos permite modificar directametne el código de la página cuando + las estamos revisando en modo local. El problema con el que nos encontramos + es que la aplicación está en inglés, aunque dado su interés + supongo que transcurrido un cierto plazo encontraremos una versión en + castellano. Se trata de una aplicación gratuita cuya versión 1.0.6 + se puede obtener desde esta + página del proyecto A-prompt.

+ + + +

Por último, no estaría de más contar con un navegador + que nos permitiera enfrentarnos a las páginas web con la misma herramienta + con que podría hacerlo un invidente: un lector de páginas web. Algunas alternativas pueden ser: 

+ + + + + + + +

Otro recurso muy interesante es el libro Diseño accesible de páginas + Web, de Carlos + Egea García y Alicia + Sarabia Sánchez, publicado por el Ministerio de Trabajo y Asuntos + Sociales y la Consejería de Trabajo y Política Social de la Región + de Murcia, que puede descargarse en formato pdf desde http://usuarios.discapnet.es/disweb2000/PautaWAI/LibroDisWeb.pdf

+ + + +

Precisamente de estos autores se ha obtenido la siguiente tabla de verificación + de prioridades para poder tenerla como guía impresa.

+ + + +

Puntos de verificación Prioridad 1

+ + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + +
En general
+ + + + 		Sí + No + N/A
Proporcione un texto equivalente para todo elemento no textual (por + ejemplo, a través de "alt", "longdesc" o en el contenido del elemento). + Esto incluye: imágenes, representaciones gráficas del texto, + mapas de imagen, animaciones (por ejemplo, GIFs animados), "applets" + y objetos programados, "ASCII + art", marcos, scripts, imágenes usadas como viñetas en las listas, espaciadores, + botones gráficos, sonidos (utilizados con o sin interacción), archivos + exclusivamente auditivos, banda sonora del vídeo y vídeos. +   +   +  
Asegure que toda la información transmitida a través de los colores + también esté disponible sin color, por ejemplo mediante el contexto + o por marcadores. +   +   +  
Identifique claramente los cambios en el idioma original del texto + del documento y en cualquier texto equivalente (por ejemplo, leyendas). +   +   +  
Organice el documento de forma que pueda ser leído sin hoja de estilo. + Por ejemplo, cuando un documento HTML es interpretado sin asociarlo + a una hoja de estilo, tiene que ser posible leerlo. +   +   +  
Asegure que los equivalentes de un contenido dinámico son actualizados + cuando cambia el contenido dinámico. +   +   +  
Hasta que las aplicaciones de usuario permitan controlarlo, evite + provocar parpadeo en la pantalla. +   +   +  
Utilice el lenguaje apropiado más claro y simple para el contenido + de un sitio. +   +   +  
+ + + +
Y si utiliza imágenes y mapas de imagen
+ + + + 		Sí + No + N/A
Proporcione vínculos de texto redundantes con cada zona activa de + un mapa de imagen del servidor. +   +   +  
Proporcione mapas de imagen controlados por el cliente en lugar de + por el servidor, excepto donde las zonas sensibles no puedan ser definidas + con una forma geométrica. +   +   +  
+ + + +
Y si utiliza tablas
+ + + + 		Sí + No + N/A
En las tablas de datos, identifique los encabezamientos de fila y + columna. +   +   +  
Para las tablas de datos que tienen dos o más niveles lógicos de encabezamientos + de fila o columna, utilice marcadores para asociar las celdas de encabezamiento + y las celdas de datos. +   +   +  
+ + +
Y si utiliza marcos (" frames")
+ + + + 		Sí + No + N/A
Titule cada marco para facilitar la identificación y navegación de + los mismos. +   +   +  
+ + +
Y si utiliza "applets" y "scripts"
+ + + + 		Sí + No + N/A
Asegure que las páginas sigan siendo utilizables cuando se desconecten + o no se soporten los scripts, applets u otros objetos de programación. + Si esto no es posible, proporcione información equivalente en una página + alternativa accesible. +   +   +  
+ + +
Y si utiliza multimedia
+ + + + 		Sí + No + N/A
Hasta que las aplicaciones de usuario puedan leer automáticamente + el texto equivalente de la banda visual, proporcione una descripción + auditiva de la información importante de la banda visual de una presentación + multimedia. +   +   +  
Para toda presentación multimedia tempodependiente (por ejemplo, una + película o animación) sincronice alternativas equivalentes (por ejemplo, + subtítulos o descripciones de la banda de visual) con la presentación. +   +   +  
+ + +
Y si todo lo demás falla
+ + + + 		Sí + No + N/A
Si, después de los mayores esfuerzos, no puede crear una página accesible, + proporcione un vínculo a una página alternativa que use tecnologías + W3C, sea accesible, tenga información equivalente (o funcional) y sea + actualizada tan a menudo como la página (original) inaccesible. +   +   +  
+ + + +
+ + + +

Puntos de verificación Prioridad 2.

+ + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
En general
+ + + + 		Sí + No + N/A
Asegure que las combinaciones de los colores de fondo y primer plano + tengan el suficiente contraste para que sean percibidas por personas + con deficiencias de percepción de color o por pantallas en blanco y + negro [Prioridad 2 para las imágenes. Prioridad 3 para los textos]. +   +   +  
Cuando exista un marcador apropiado, use marcadores en vez de imágenes + para transmitir la información. +   +   +  
Cree documentos que estén validados por las gramáticas formales publicadas. +   +   +  
Utilice hojas de estilo para controlar la maquetación y la presentación. +   +   +  
Utilice unidades relativas en lugar de absolutas al especificar los + valores en los atributos de los marcadores de lenguaje y en los valores + de las propiedades de las hojas de estilo. +   +   +  
Utilice elementos de encabezado para transmitir la estructura lógica + y utilícelos de acuerdo con la especificación. +   +   +  
Marque las listas y los puntos de las listas correctamente. +   +   +  
Marque las citas. No utilice el marcador de citas para efectos de + formato tales como sangrías. +   +   +  
Asegure que los contenidos dinámicos son accesibles o proporcione + una página o presentación alternativa. +   +   +  
Hasta que las aplicaciones de usuario permitan controlarlo, evite + el parpadeo del contenido (por ejemplo, cambio de presentación en periodos + regulares, así como el encendido y apagado). +   +   +  
Hasta que las aplicaciones de usuario proporcionen la posibilidad + de detener las actualizaciones, no cree páginas que se actualicen automáticamente + de forma periódica. +   +   +  
Hasta que las aplicaciones de usuario proporcionen la posibilidad + de detener el redireccionamiento automático, no utilice marcadores para + redirigir las páginas automáticamente. En su lugar, configure el servidor + para que ejecute esta posibilidad. +   +   +  
Hasta que las aplicaciones de usuario permitan desconectar la apertura + de nuevas ventanas, no provoque apariciones repentinas de nuevas ventanas + y no cambie la ventana actual sin informar al usuario. +   +   +  
Utilice tecnologías W3C cuando estén disponibles y sean apropiadas + para la tarea, y use las últimas versiones cuando sean soportadas. +   +   +  
Evite características desaconsejadas por las tecnologías W3C. +   +   +  
Divida los bloques largos de información en grupos más manejables + cuando sea natural y apropiado. +   +   +  
Identifique claramente el objetivo de cada vínculo. +   +   +  
Proporcione meta datos para añadir información semántica a las páginas + y sitios. +   +   +  
Proporcione información sobre la maquetación general de un sitio (por + ejemplo, mapa del sitio o tabla de contenidos). +   +   +  
Utilice los mecanismos de navegación de forma coherente. +   +   +  
+ + +
Y si utiliza tablas
+ + + + 		Sí + No + N/A
No utilice tablas para maquetar, a menos que la tabla tenga sentido + cuando se alinee. Por otro lado, si la tabla no tiene sentido, proporcione + una alternativa equivalente (la cual debe ser una versión alineada). +   +   +  
Si se utiliza una tabla para maquetar, no utilice marcadores estructurales + para realizar un formateo visual. +   +   +  
+ + +
Y si utiliza marcos ("frames")
+ + + + 		Sí + No + N/A
Describa el propósito de los marcos y cómo éstos se relacionan entre + sí, si no resulta obvio solamente con el título del marco. +   +   +  
+ + +
Y si utiliza formularios
+ + + + 		Sí + No + N/A
Hasta que las aplicaciones de usuario soporten explícitamente la asociación + entre control de formulario y etiqueta, para todos los controles de + formularios con etiquetas asociadas implícitamente, asegure que la etiqueta + está colocada adecuadamente. +   +   +  
Asocie explícitamente las etiquetas con sus controles. +   +   +  
+ + +
Y si utiliza "applets" y "scripts"
+ + + + 		Sí + No + N/A
Para los scripts y applets, asegure que los manipuladores de eventos + sean entradas independientes del dispositivo. +   +   +  
Hasta que las aplicaciones de usuario permitan congelar el movimiento + de los contenidos, evite los movimientos en las páginas. +   +   +  
Haga los elementos de programación, tales como scripts y applets, + directamente accesibles o compatibles con las ayudas técnicas [Prioridad + 1 si la funcionalidad es importante y no se presenta en otro lugar; + de otra manera, Prioridad 2]. +   +   +  
Asegure que cualquier elemento que tiene su propia interfaz pueda + manejarse de forma independiente del dispositivo. +   +   +  
Para scripts, especifique manipuladores de eventos lógicos mejor que + manipuladores de eventos dependientes de dispositivos. +   +   +  
+ + + +
+ + + +

Puntos de verificación Prioridad 3

+ + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
En general
+ + + + 		Sí + No + N/A
Especifique la expansión de cada abreviatura y acrónimo en el documento + cuando aparezcan por primera vez. +   +   +  
Identifique el idioma principal de un documento. +   +   +  
Cree un orden lógico para navegar con el tabulador a través de vínculos, + controles de formulario y objetos. +   +   +  
Proporcione atajos de teclado para los vínculos más importantes (incluidos + los de los mapas de imagen de cliente), los controles de formulario + y los grupos de controles de formulario. +   +   +  
Hasta que las aplicaciones de usuario (incluidas las ayudas técnicas) + interpreten claramente los vínculos contiguos, incluya caracteres imprimibles + (rodeados de espacios), que no sirvan como vínculo, entre los vínculos + contiguos. +   +   +  
Proporcione la información de modo que los usuarios puedan recibir + los documentos según sus preferencias (por ejemplo, idioma, tipo de + contenido, etc.). +   +   +  
Proporcione barras de navegación para destacar y dar acceso al mecanismo + de navegación. +   +   +  
Agrupe los vínculos relacionados, identifique el grupo (para las aplicaciones + de usuario) y, hasta que las aplicaciones de usuario lo hagan, proporcione + una manera de evitar el grupo. +   +   +  
Si proporciona funciones de búsqueda, permita diferentes tipos de + búsquedas para diversos niveles de habilidad y preferencias. +   +   +  
Localice la información destacada al principio de los encabezamientos, + párrafos, listas, etc. +   +   +  
Proporcione información sobre las colecciones de documentos (por ejemplo, + los documentos que comprendan múltiples páginas). +   +   +  
Proporcione un medio para saltar sobre un ASCII art de varias líneas. +   +   +  
Complemente el texto con presentaciones gráficas o auditivas cuando + ello facilite la comprensión de la página. +   +   +  
Cree un estilo de presentación que sea coherente para todas las páginas. +   +   +  
+ + +
Y si utiliza imágenes o mapas de imagen
+ + + + 		Sí + No + N/A
Hasta que las aplicaciones de usuario interpreten el texto equivalente + para los vínculos de los mapas de imagen de cliente, proporcione vínculos + de texto redundantes para cada zona activa del mapa de imagen de cliente. +   +   +  
+ + +
Y si utiliza tablas
+ + + + 		Sí + No + N/A
Proporcione resúmenes de las tablas. +   +   +  
Proporcione abreviaturas para las etiquetas de encabezamiento. +   +   +  
Hasta que las aplicaciones de usuario (incluidas las ayudas técnicas) + interpreten correctamente los textos contiguos, proporcione un texto + lineal alternativo (en la página actual o en alguna otra) para todas + las tablas que maquetan texto en paralelo, en columnas de palabras. +   +   +  
+ + +
Y si utiliza formularios
+ + + + 		Sí + No + N/A
Hasta que las aplicaciones de usuario manejen correctamente los controles + vacíos, incluya caracteres por defecto en los cuadros de edición y áreas + de texto. +   +   +  
+ + + +
+ + + +

 

+ + + +

 

+ + + +

 

+ + + +

 

+ + +
+ + + diff --git a/html2005/accesibilidad/t28.htm b/html2005/accesibilidad/t28.htm new file mode 100644 index 0000000..a42e6b0 --- /dev/null +++ b/html2005/accesibilidad/t28.htm @@ -0,0 +1,26 @@ + + + + + Untitled + + + + + + + + + + +

+ +

+ + + + + + diff --git a/html2005/accesibilidad/t29.htm b/html2005/accesibilidad/t29.htm new file mode 100644 index 0000000..e0023a3 --- /dev/null +++ b/html2005/accesibilidad/t29.htm @@ -0,0 +1,26 @@ + + + + + Untitled + + + + + + + + + + +

+ +

+ + + + + + diff --git a/html2005/accesibilidad/t30.htm b/html2005/accesibilidad/t30.htm new file mode 100644 index 0000000..d38caac --- /dev/null +++ b/html2005/accesibilidad/t30.htm @@ -0,0 +1,26 @@ + + + + + Untitled + + + + + + + + + + +

+ +

+ + + + + + \ No newline at end of file diff --git a/html2005/autores.html b/html2005/autores.html new file mode 100644 index 0000000..29d0c05 --- /dev/null +++ b/html2005/autores.html @@ -0,0 +1,59 @@ + + +autores + + + + + + + + + + +
+ + + + + + + + + + + +
portada
+ + \ No newline at end of file diff --git a/html2005/barracapitulos.html b/html2005/barracapitulos.html new file mode 100644 index 0000000..6ee2e31 --- /dev/null +++ b/html2005/barracapitulos.html @@ -0,0 +1,271 @@ + + + + + + index + + + + + + + + + + + +
+ +
+ + + + diff --git a/html2005/bugs/errores.css b/html2005/bugs/errores.css new file mode 100644 index 0000000..842ec49 --- /dev/null +++ b/html2005/bugs/errores.css @@ -0,0 +1,14 @@ +/* Generated by CaScadeS, a stylesheet editor for Mozilla Composer */ +.prohibited { background-color: rgb(204, 0, 0); +color: rgb(255, 255, 255); +font-weight: bold; +} +.missing { color: rgb(255, 255, 255); +font-weight: bold; +background-color: rgb(255, 153, 102); +} +.muddle { background-color: rgb(255, 255, 102); +color: rgb(0, 0, 0); +font-weight: normal; +} + diff --git a/html2005/bugs/errores.html b/html2005/bugs/errores.html new file mode 100644 index 0000000..922ead8 --- /dev/null +++ b/html2005/bugs/errores.html @@ -0,0 +1,907 @@ + + + + + + Errores de N|VU + + + + + + + + + + + + + + +
+

Errores

+ +
+ + +
+ +
+ + +
+

Algunos +errores conocidos de N|VU 1.0

+ +Como programa en desarrollo que es, N|VU presenta algunos errores o +comportamientos no previsibles que pueden hacernos perder mucho tiempo +si no sabemos de su existencia. Vamos a aprovechar el trabajo de +recopilación realizado por Charles Cooke, publicado en +inglés en su página http://web.onetel.net.uk/%7Echarlescooke/nvubugs10.htm, +en el que me he basado para elaborar las siguientes notas, que son en +gran parte una traducción del original con algunos +añadidos que he podido ir descubriendo con el uso del programa. +Dado que su trabajo +de soporte pretende conseguir repercutir en las futuras mejoras de NVU +vamos a omitir sus valoraciones de los errores, que él mismo +indica que son personales. Sin embargo sí que +incluiré alguna valoración de los mismos basada +en mi propia experiencia, ya que toda esta documentación +está elaborada utilizando el N|VU, por lo que +podría perfectamente colocarse el icono Hecho con N|VU +
+
    +
  1. Hojas +de estilo externas
    2. +
  2. Declaración +del tipo de documento incompleta
    3. +
  3. Especificación +del tipo de documento en las +preferencias
    4. +
  4. Creación +de códigos no acordes con el +tipo de DTD
    5. +
  5. Manejo +de capas
    6. +
  6. Modificaciones +ortográficas no disparan el +guardado al cerrar
    7. +
  7. Subrayado +automático de errores no se mantiene al abrir +páginas guardadas
    8. +
  8. Funcionamiento +irregular de las sugerencias ortográficas
    9. +
  9. Listas +anidadas
    10. +
  10. Aplicación +de ID
    11. +
  11. Inactivación +de barra de formato
    12. +
  12. Numeración +de líneas
    13. +
  13. Pérdida +del foco de la pestaña activa
    14. +
  14. Tablas
    15. +
  15. Tablas +de contenido (TOC)
    16. +
  16. Formularios. +Teclas de accesibilidad en campos de texto
    17. +
  17. Formularios. +Propiedades de botones de opción y casillas de +verificación
    18. +
  18. Formularios. +Propiedades de listas y cuadros de selección
    19. +
  19. Limpiador +de código
    20. +
  20. Cerrar +sin salvar estilos en línea
    21. +
  21. Administrador +de sitios
    22. +
  22. Editor +CSS
    23. +
  23. Tabla +de códigos generados por N|VU según las +circunstancias
    24. +
+ +
+ +
+ +

Hojas +de estilo externas

+ +
+ +
Descripción:
+ +
El enlace al archivo CSS +aparece siempre como ruta absoluta. Una vez que una página +se mueva a una localización distinta, por +ejemplo  desde una máquina local a un servidor no +se podrá localizar el archivo de hoja de estilos, salvo que +esta transferencia se realice con el gestor de sitios de N|VU que +enviará el archivo CSS, junto con el resto de archivos +complementarios a la carpeta que indiquemos modificando la ruta para +que se convierta en relativa.
+ +
Solución provisional:
+ +
+
    + +
  1. Publicar la página utilizando el +administrador +de sitios de N|VU (menos recomendable)
    2. + +
  2. Modificar manualmente la ruta desde la +pestaña Código fuente +para convertirla +en relativa (más recomendable)
    3. + +
+ +
+ +
Repercusión:
+ +
Los usuarios principiantes pueden encontrarse con que sus +páginas no se muestran como esperan, desaprovechando una de +las funciones más potentes y recomendables del +programa. 
+ +
Valoración:
+ +
Error importante
+ +
+ +

Declaración +del tipo de documento incompleta

+ +
+ +
Descripción:
+ +
La declaración de tipo de documento cuando se +opta por +documentos HTML (opción por defecto) es incompleta porque +omite +el URL del DTD. Los tipos permitidos están enumerados en el +párrafo 7.2 de las especificaciones HTML 4.01 del +W3C.
+ +
Solución provisional:
+ +
+
    + +
  1. Modificar con un editor de texto externo la +página base y guardarla como plantilla (no puede hacerse +desde +N|VU porque no guarda las modificaciones en la DTD
    2. + +
  2. Crear las nuevas páginas +basándose en esa plantilla.
    3. + +
+ +
+ +
Repercusión:
+ +
Algunos navegadores pueden reaccionar de modo caprichoso, +por lo +que pueden mostrar tamaños incorrectos de letra y deteriorar +la +compatibilidad para diversos navegadores que se hubiera +perseguido. 
+ +
Valoración:
+ +
Error de importancia media.
+ +
+ +

Especificación +del tipo de documento en las +preferencias

+ +
+ +
Descripción:
+ +
A pesar de que se indique un tipo de documento +predeterminado en +las preferencias generales (herramientas preferencias) dicha +opción solo persiste hasta que se crea un documento +de un +tipo diferente,momento en el que esta elección +sobreescribe +las preferencias generales.
+ +
Solución provisional:
+ +
Aunque se establezca un tipo de documento +predeterminado no confiar en esta condición y estar atentos +en +cada nuevo documento a que el tipo sea el que realmente pretendemos.
+ +
Repercusión:
+ +
Puede ocurrir, por ejemplo, que establezcamos como tipo +predeterminado HTML 4.01 strict, pero una vez que creemos un documento +de tipo HTML 4.01 transitional todos los demás se +crearán +con este tipo.
+ +
Valoración:
+ +
Error importante que puede resultar difícil de +detectar +para quienes no validen o hagan poco uso de la revisión de +código.
+ +
+ +

Creación +de códigos no acordes con el +tipo de DTD

+ +
+ +
Descripción:
+ +
La aplicación de formato a zonas o elementos del +documento puede producir:
+ +
    + +
  1. que se aplique un formato que no es compatible con el +tipo de DTD especificado 
    2. + +
  2. que se genere código que no tiene efecto +sobre el formato 
    3. + +
  3. que opciones que deberían poder utilizarse +según el DTD especificado no estén accesibles.
    4. + +
+ +Todas estas situaciones se producen según se encuentre +marcada o no en las preferencias la opción para "usar css..." y en +función del tipo de DTD especificado.
+ +
Solución provisional:
+ +
Para los expertos, si todo el formato se realiza +utilizando CSS no habrá problemas.
+ +Para el resto, si se elige usar +estilos css en lugar de elementos y atributos html en las +preferencias y se utiliza un DTD transitional no habrá +problemas de validación.
+ +Para quienes quieran usar DTD strict y seguir utilizando los botones o +las opciones de menú consultar la tabla para evitar errores. +
+ +
Repercusión:
+ +
Se producirán errores de validación. +Puede requerir tiempo para las correcciones manuales.
+ +
Valoración:
+ +
Error importante, especialmente para principiantes, ya que +puede desconcertar mucho la inactivación de opciones.
+ +
+ +

Manejo +de capas

+ +
+ +
Descripción:
+ +
Cada capa puede moverse de posición +fácilmente si +arrastramos el tirador de posición que aparece en la zona +superior izquierda. Si se han creado varias capas y, al +moverlas, el contorno de una de ellas oculta completamente el +tirador de posición de otra será imposible volver +a +acceder a él para mover esa capa. Incluso, aunque el valor +z-index de la capa que tiene el tirador oculto sea mayor +seguirá +produciéndose esa situación.
+ +
Solución provisional:
+ +
+
    + +
  1. Activar la cuadrícula de fijación +(formato a continuación +rejilla de posicionamiento) +con una medida de 20 píxeles facilita la vuelta de cada capa +a su +posición original y deja suficiente libertad de +posicionamiento.
    2. + +
  2. Modificar temporalmente la posición de la +capa +que oculta +el tirador para hacerlo accesible y situar la capa donde se desee. +Restaurar luego la posición de la capa que movimos para +acceder +al tirador.
    3. + +
+ +
+ +
Repercusión:
+ +
Puede ser muy molesto al obligar a realizar varias +operaciones para obtener un resultado que debería ser muy +simple.
+ +
Valoración:
+ +
Error ligero salvo que se utilicen muchas capas +posicionadas absolutamente. 
+ +
+ +
+ +
+ +

Modificaciones +ortográficas no disparan el +guardado al cerrar

+ +
+ +
Descripción:
+ +
Si se ha activado el subrayado de palabras mal escritas y +modificamos alguna palabra con la opción sugerida al pulsar +con +el botón derecho se muestra el cambio en pantalla pero no +cambia +el estado del documento a modificado. 
+ +
Solución provisional:
+ +
Cuando se hagan correcciones ortográficas por +sugerencias +en el menú contextual no guardar sin haber realizado una +modificación tal como añadir y borrar un +espacio. 
+ +
Repercusión:
+ +
Si se cierra el +documento no +preguntará si se quieren guardar los cambios y se +perderán las modificaciones, guardándose la +página con los errores ortográficos.
+ +
Valoración:
+ +
Error importante que puede provocar errores involuntarios +al +hacer que se publiquen con errores páginas que los autores +consideran corregidas.
+ +
+ +
+ +
+ +

Subrayado +automático de errores no se mantiene al abrir +páginas guardadas

+ +
+ +
Descripción:
+ +
Si se abre una página ya guardada en +vista Normal no +se subrayan las palabras mal escritas a pesar de que esté +especificado así en las preferencias.
+ +
Solución provisional:
+ +
Pulsar la pestaña Código fuente y volver a la +pestaña Normal +activa el subrayado de los errores ortográficos.
+ +
Repercusión:
+ +
Puede provocar errores involuntarios al hacer +que se publiquen con errores ortográficos páginas +que los autores consideran correctas.
+ +
Valoración:
+ +
Error importante. 
+ +
+ +

Funcionamiento +irregular de las sugerencias ortográficas

+ +
+ +
Descripción:
+ +
Cuando  subrayar +las palabras mal escritas +está activado suele presentarse la opción de +sugerencias +ortográficas en el menú contextual, pero no +siempre es +así. En ocasiones desaparece la opción de las +sugerencias.
+ +
Solución provisional:
+ +
Desactivar en las preferencias subrayar +las palabras mal escritas y volver a reactivarlo.
+ +
Repercusión:
+ +
Provoca acciones innecesarias
+ +
Valoración:
+ +
Error moderado que provoca molestias al usuario. Dados los +errores que presenta esta función parece poco aconsejable +mantenerla activa, siendo preferible recurrir a la +corrección +ortográfica de todo el documento al finalizarlo.
+ +
+ +

Listas +anidadas

+ +
+ +
Descripción:
+ +
Las actuales especificaciones consideran incorrecta la +anidación de una lista dentro de otra si se ha cerrado el +elemento <li> +precedente. Cuando dentro de una lista +pulsamos el botón de sangrar texto de la barra de formato se +anida una lista para crear los elementos de segundo nivel pero se +cierra el elemento con su etiqueta </li>
+ +
Solución provisional:
+ +
Utilizar la opción de menú  herramientas a continuación limpiador +de código y +volver a reactivarlo.
+ +
Repercusión:
+ +
Se producirán errores de validación, +lo cual puede suponer que algún navegador muestre de forma +errónea la anidación.
+ +
Valoración:
+ +
Error moderado. Aunque la mayoría de los +navegadores presentarán correctamente los diferentes niveles +del listado puede no ocurrir así en el futuro. La +solución es sencilla y, de paso, podemos localizar otros +elementos innecesarios en el código.
+ +
+ +

Aplicación +de ID

+ +
+ +
Descripción:
+ +
Puede aplicarse el mismo ID a +varios elementos.
+ +
Solución provisional:
+ +
Revisar manualmente el código para evitarlo
+ +
Repercusión:
+ +
Si se utiliza inadvertidamente podrían +producirse +aplicaciones incorrectas de estilos o enlaces +erróneos.  +Provoca errores de validación del código.
+ +
Valoración:
+ +
Error +moderado. Posiblemente los principiantes no utilizarán esta +posibilidad y es de esperar que los expertos no cometan este error.
+ +
+ +

Inactivación +de barra de formato

+ +
+ +
Descripción:
+ +
De vez en cuando las dos barras de formato quedan +inactivas. +Cuando esto ocurre también algunos elementos de los +menús +se vuelven inactivos y desaparece la identificación del +archivo +de la barra de título de la aplicación.
+ +
Solución provisional:
+ +
Cerrar y reiniciar el programa
+ +
Repercusión:
+ +
Pérdida de tiempo.
+ +
Valoración:
+ +
Error +moderado. Es molesto por la pérdida de tiempo pero no +provoca errores irrecuperables.
+ +
+ +

Numeración +de líneas

+ +
+ +
Descripción:
+ +
Cuando se valida un documento que contiene errores la +numeración de las líneas que se devuelve no +coincide con +la que muestra N|VU en la pestaña Código fuente.
+ +
Solución provisional:
+ +
Buscar la línea correcta utilizando la +referencia de código que muestra el validador.
+ +
Repercusión:
+ +
Pérdida de tiempo. 
+ +
Valoración:
+ +
Error +molesto por la incomodidad provocada. Además tiene una +relativa importancia porque introduce en el archivo códigos +invisibles, que no afectan a la visualización del documento, +pero que incrementan su tamaño innecesariamente. 
+ +
+ +

Pérdida +del foco de la pestaña activa

+ +
+ +
Descripción:
+ +
En ocasiones, cuando tenemos documentos abiertos +en varias +pestañas se pierde el foco de la pestaña que +está +a la vista: cuando queremos pegar un fragmento que hemos copiado de la +misma o de otra pestaña no sucede nada aparentemente. El +foco se +ha trasladado a la primera pestaña y es allí +donde se van +pegando los fragmentos en lugar de la pestaña en la que +deseamos +hacerlo.
+ +
Solución provisional:
+ +
Cerrar y reiniciar el programa.
+ +
Repercusión:
+ +
Pérdida de tiempo. Posibles errores al +guardar cambios que no deberían guardarse en el +documento que ha recibido erróneamente los fragmentos pegados
+ +
Valoración:
+ +
Error moderado. Puede provocar la +publicación de documentos con fragmentos que no les +corresponden.
+ +
+ +

Tablas

+ +
+ +
Descripción:
+ +
Originalmente las tablas se insertan con una anchura por +defecto del 100% de la ventana. Al cabo de un tiempo se cambia el tipo +de unidad en las preferencias pasando de porcentaje a +píxeles, creándose las nuevas tablas con una +anchura de 100 píxeles.
+ +
Solución provisional:
+ +
Modificar la opción de anchura en el +menú tabla a continuación +insertar a continuación +pestaña preciso +para volver a porcentaje
+ +
Repercusión:
+ +
Pérdida de tiempo. Intervención +innecesaria del usuario
+ +
Valoración:
+ +
Error leve. 
+ +
+ + +

Tablas +de contenido (TOC)

+ +
+ +
Descripción:
+ +
La ayuda indica que si se marca hacer +que +la tabla de contenidos sea de +sólo lectura provocará que la lista +sea +de texto simple sin +enlaces. En la actual versión esta opción no +tiene efecto y la lista sigue saliendo con enlaces.
+ +
Solución provisional:
+ +
No hay solución, salvo que se eliminaran +manualmente los enlaces
+ +
Repercusión:
+ +
Función inútil en la actual versión
+ +
Valoración:
+ +
Error leve. 
+ +
+ +

Formularios. +Teclas de accesibilidad en campos de texto

+ +
+ +
Descripción:
+ +
Cuando se adjudica una tecla de acceso +rápido (accesskey) en un campo de +texto de una línea su valor no se almacena
+ +
Solución provisional:
+ +
Insertar manualmente el +código accesskey="letra"
+ +
Repercusión:
+ +
Repetir innecesariamente una tarea y de forma +más incómoda que la prevista.
+ +
Valoración:
+ +
Error moderado: puede provocar la creación de +documentos con accesibilidad reducida en contra de la +intención del autor. Molesto. 
+ +
+ +

Formularios. +Propiedades de botones de opción y casillas de +verificación

+ +
+ +
Descripción:
+ +
Al intentar modificar las propiedades de un +botón de opción o una casilla de +verificación ya creados accediendo con el botón +derecho al menú contextual propiedades +del campo de formulario o intentando lanzar el panel de creación/edición con un doble clic no se obtiene respuesta del programa.
+ +
Solución provisional:
+ +
+Utilizar el botón derecho sobre la etiqueta <input> +de la barra de estado y elegir propiedades +avanzadas lanza el panel para editar las +propiedades pero habrá que conocer cuál es el atributo que deseamos modificar.
+ +
Repercusión:
+ +
Desconcierta puesto que en otros tipos de campos se puede +realizar la edición sin problemas.
+ +
Valoración:
+ +
Error moderado: aunque la +solución es relativamente cómoda desconcierta por +lo anómalo del comportamiento y, además, obliga a +trabajar haciendo referencia a los atributos en lugar de utilizar la +traducción de los mismos para que un usuario poco experto pueda +comprender rápidamente el sentido.
+ +
+ +

Formularios. +Propiedades de listas y cuadros de selección

+ +
+
Descripción:
+
Situación similar a la anterior: no se obtiene +respuesta del programa al intentar modificar las propiedades de un +cuadro menú o lista de selección ya creados accediendo +con el botón +derecho al menú contextual propiedades +del campo de formulario o con un doble clic.
+
Solución provisional:
+
Editar manualmente la lista de opciones desde la pestaña Código fuente 
+
Repercusión:
+
Obliga a introducir el código manualmente.
+
Valoración:
+
Error moderado: aunque añadir o borrar opciones no es una +tarea complicada resulta incómodo para usuarios noveles. En +muchos casos es preferible eliminar el campo creado y recurrir al +asistente gráfico para crearlo de nuevo.
+
+

Limpiador +de código

+ +
+ +
Descripción:
+ +
No todos los bloques vacíos se limpian. Listas +ordenadas y desordenadas vacías permanecen, así +como bloques <span></span> sin contenido en +su interior.
+ +
Solución provisional:
+ +
Eliminar manualmente los códigos sobrantes
+ +
Repercusión:
+ +
Se mantiene código innecesario
+ +
Valoración:
+ +
Error leve, pero frustrante si se pretende obtener un +código ligero ya que se podía esperar que la +limpieza fuera completa y no exigiera revisión manual.
+ +
+ +

Cerrar +sin salvar estilos en línea

+ +
+ +
Descripción:
+ +
Si se selecciona una etiqueta en la barra +de estado y se le aplica un estilo incrustado el botón de guardar permanece +inactivo y el programa no invita a guardar los cambios si cerramos la +pestaña sin hacer otros cambios
+ +
Solución provisional:
+ +
Realizar un cambio trivial: añadir un espacio y +borrarlo para activar el estado de documento modificado.
+ +
Repercusión:
+ +
Se puede perder código al pensar que el +documento ya está guardado.
+ +
Valoración:
+ +
Error moderado. 
+ +
+ +

Administrador +de sitios

+ +
+ +
Descripción:
+ +
No existe opción +específica para ver sólo los documentos xhtml o +css, que quedan ocultos si se selecciona ver +documentos html 
+ +
Solución provisional:
+ +
Utilizar la opción ver +todos los documentos.
+ +
Repercusión:
+ +
Obliga a localizar visualmente.
+ +
Valoración:
+ +
Error leve. 
+ +
+ +

Editor +CSS

+ +
+ +
Descripción:
+ +
El botón bajar no funciona
+ +
Solución provisional:
+ +
Seleccionar elementos que se encuentren por debajo y +utilizar el botón subir +para reorganizar las reglas de estilo.
+ +
Repercusión:
+ +
Más pulsaciones de las necesarias.
+ +
Valoración:
+ +
Error leve. 
+ +
+ +Ver tabla +de códigos generados por N|VU según las +circunstancias + +
+
+
+ + + diff --git a/html2005/bugs/errorestabla.htm b/html2005/bugs/errorestabla.htm new file mode 100644 index 0000000..b0b446f --- /dev/null +++ b/html2005/bugs/errorestabla.htm @@ -0,0 +1,1178 @@ + + + + + + Errores de N|VU + + + + + + + + + + + + + + + + +

Tabla +de códigos generados por N|VU según las +circunstancias

+ +
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
"Usar +estilos CSS..." +DESMARCADO"Usar +estilos CSS..." MARCADO
DTD +TransitionalDTD +StrictDTD +TransitionalDTD +Strict
HTMLXHTMLHTMLXHTMLHTMLXHTMLHTMLXHTML
ver nota(1)LargaCortaLarga
+ + 		LargaCortaLargaLargaCortaLargaLargaCortaLarga
Formato aplicadoLa respuesta de +NVU - las celdas coloreadas indican respuesta insatisfactoria (o +diferente de la óptima) (véase la clave en la +zona inferior)
Seleccionar color de textofontfontfontfontInactivoInactivostylestylestylestylestylestyle
Formatoa continuación +color del textofontfontfontfontInactivofont +4stylestylestylestylestylestyle
Reducir tamaño de letrasmallsmallsmallsmallsmallsmallsmallsmallsmallsmallsmallsmall
Formato a continuación +Tamaño a continuación +Menorsmallsmallsmallsmallsmallsmallsmallsmallsmallsmallsmallsmall
Aumentar tamaño de letrabigbigbigbigbigbigbigbigbigbigbigbig
Formato a continuación +Tamaño a continuación +Mayorbigbigbigbigbigbigbigbigbigbigbigbig
Formato a continuación +tamaño a continuación + muy grandefontfontfontfontInactivoInactivofontfontfontfontfontInactivo
Elegir color de fondo fondo +de páginabgcolor + (2)bgcolor (2)bgcolor (2)bgcolor (2)InactivoInactivo
Elegir color de fondo fondo +de un bloquestyle (3)style (3)style (3)style (3)style (3)style (3)
Negritabbbbbbstylestylestylestylestylestyle
formato a continuación estilo del texto a continuación en +negrillabbbbbbstylestylestylestylestylestyle
Cursivaiiiiiistylestylestylestylestylestyle
Formato a continuación estilo del texto a continuación cursiva iiiiiistylestylestylestylestylestyle
SubrayadouuuuInactivoInactivostylestylestylestylestylestyle
Formato + a continuación +estilo a continuación +subrayadouuuuInactivoInactivostylestylestylestylestylestyle
Énfasisemememememememememememem
Formato + a continuación +estilo del texto a continuación +énfasisemememememememememememem
Más énfasisstrongstrongstrongstrongstrongstrongstrongstrongstrongstrongstrongstrong
formato a continuación estilo del texto a continuación más +énfasis strongstrongstrongstrongstrongstrongstrongstrongstrongstrongstrongstrong
Alinear a la derechaalignalignalignalignInactivoInactivostylestylestylestylestylestyle
formato a continuación alinear a continuación derechaalignalignalignalignalignalignstylestylestylestylestylestyle
Alinear justificando ambos márgenesalignalignalignalignInactivoInactivostylestylestylestylestylestyle
Formato a continuación alinear a continuación justificaralignalignalignalignalignalignstylestylestylestylestylestyle
Sangrar textoblockquotealignblockquoteblockquoteblockquoteblockquotestylestylestylestylestylestyle
Formato a continuación incrementar sangradoblockquotealignblockquoteblockquoteblockquoteblockquotestylestylestylestylestylestyle
Desplegable +de fuentes +- CourierfontfontfontfontInactivoInactivofontstylefontstylestylestyle
Formato a continuación tipo de letra a continuación courierfontfontfontfontInactivoInactivofontstylefontstylestylestyle
formato a continuación propiedades de +imagen a continuación +aparienciaalignalignalignalignInactivoInactivofloatfloatfloatfloatfloatfloat
Formato a continuación colores y +fondo de la páginabgcolor (5) (6)bgcolor (5) (6)bgcolor (5) (6)bgcolor (5) (6)InactivoInactivostyle (5) (7)style (5)style(5) (7)style (5) (7)style (5) (7)style (7)
Clave:
RojoSe utiliza +código prohibido por el DTD o por las preferencias del +programa.
AnaranjadoFuncionalidad +limitada: la opción no está disponible.
AmarilloLos +códigos generados son +irrelevantes según el formato aplicado y +pueden producir resultados inesperados.
BlancoCompletamente +ajustado a las especificaciones.
Notas:
(1) DTD +Larga se +refiera a que está indicada +según lo definido en +la especificación del HTML. DTD corta se refiere a la +plantilla por +defecto utilizada por N|VU para los documentos del HTML +que omite el +URL del DTD.
(2) +La aplicación de bgcolor al +elemento <body> supone la +añadir también color para los +atributos alink, vlink, + link y text de + <body>.
(3) La +aplicación de bgcolor al un +elemento en bloque supone la añadir +también color para los atributos alink, vlink, + link y text +para el elemento <body>.
(4) +Esta +función es intermitentes - En la mayoría de los +casos está inaccesible.
(5) +La aplicación de color al fondo implica también +la aplicación de color a los atributos alink, vlink, + link y text +para el elemento <body>.
(6) +También se aplica color al texto
(7) +El color de fondo y +el de texto se aplica dentro del estilo. Los colores para los +enlaces se aplican como atributos de <body>
Inactivo indica +que la +función no puede ser realizada. El botón +y/o la +opción de menú pueden +aparecer atenuadas pero no necesariamente, lo cual provoca +aún +una mayor incertidumbre.
+ +Nota : Algunos comportamientos registrados en la tabla están +traducidos directamente y considero que son idénticos ya que +consisten en que la aplicación de color de fondo genera +automáticamente la definición de colores para los +enlaces, enlaces visitados, enlaces activos y texto en el elemento + <body> +
+ +
+
+ + diff --git a/html2005/bugs/imagenes/icoalineardcha.png b/html2005/bugs/imagenes/icoalineardcha.png new file mode 100644 index 0000000..1536de1 Binary files /dev/null and b/html2005/bugs/imagenes/icoalineardcha.png differ diff --git a/html2005/bugs/imagenes/icoenfasis.png b/html2005/bugs/imagenes/icoenfasis.png new file mode 100644 index 0000000..353f16a Binary files /dev/null and b/html2005/bugs/imagenes/icoenfasis.png differ diff --git a/html2005/bugs/imagenes/icofondo.png b/html2005/bugs/imagenes/icofondo.png new file mode 100644 index 0000000..f9daff1 Binary files /dev/null and b/html2005/bugs/imagenes/icofondo.png differ diff --git a/html2005/bugs/imagenes/icoincrementasangrado.png b/html2005/bugs/imagenes/icoincrementasangrado.png new file mode 100644 index 0000000..5be039d Binary files /dev/null and b/html2005/bugs/imagenes/icoincrementasangrado.png differ diff --git a/html2005/bugs/imagenes/icoitalica.png b/html2005/bugs/imagenes/icoitalica.png new file mode 100644 index 0000000..459f7cf Binary files /dev/null and b/html2005/bugs/imagenes/icoitalica.png differ diff --git a/html2005/bugs/imagenes/icojustificar.png b/html2005/bugs/imagenes/icojustificar.png new file mode 100644 index 0000000..e7b1966 Binary files /dev/null and b/html2005/bugs/imagenes/icojustificar.png differ diff --git a/html2005/bugs/imagenes/icomasenfasis.png b/html2005/bugs/imagenes/icomasenfasis.png new file mode 100644 index 0000000..4259daf Binary files /dev/null and b/html2005/bugs/imagenes/icomasenfasis.png differ diff --git a/html2005/bugs/imagenes/icomayor.png b/html2005/bugs/imagenes/icomayor.png new file mode 100644 index 0000000..9b4bee2 Binary files /dev/null and b/html2005/bugs/imagenes/icomayor.png differ diff --git a/html2005/bugs/imagenes/icomenor.png b/html2005/bugs/imagenes/icomenor.png new file mode 100644 index 0000000..9b9dac0 Binary files /dev/null and b/html2005/bugs/imagenes/icomenor.png differ diff --git a/html2005/bugs/imagenes/iconegrita.png b/html2005/bugs/imagenes/iconegrita.png new file mode 100644 index 0000000..2422786 Binary files /dev/null and b/html2005/bugs/imagenes/iconegrita.png differ diff --git a/html2005/bugs/imagenes/icoprimerplano.png b/html2005/bugs/imagenes/icoprimerplano.png new file mode 100644 index 0000000..6dff6e3 Binary files /dev/null and b/html2005/bugs/imagenes/icoprimerplano.png differ diff --git a/html2005/bugs/imagenes/icosubraya.png b/html2005/bugs/imagenes/icosubraya.png new file mode 100644 index 0000000..070c5d5 Binary files /dev/null and b/html2005/bugs/imagenes/icosubraya.png differ diff --git a/html2005/bugs/imagenes/madewithNvu80x15clear.png b/html2005/bugs/imagenes/madewithNvu80x15clear.png new file mode 100644 index 0000000..0782612 Binary files /dev/null and b/html2005/bugs/imagenes/madewithNvu80x15clear.png differ diff --git a/html2005/bugs/imagenes/tag-comment.gif b/html2005/bugs/imagenes/tag-comment.gif new file mode 100644 index 0000000..6dd517f Binary files /dev/null and b/html2005/bugs/imagenes/tag-comment.gif differ diff --git a/html2005/bugs/imagenes/valid-css.png b/html2005/bugs/imagenes/valid-css.png new file mode 100644 index 0000000..d0353e9 Binary files /dev/null and b/html2005/bugs/imagenes/valid-css.png differ diff --git a/html2005/bugs/imagenes/valid-html401.png b/html2005/bugs/imagenes/valid-html401.png new file mode 100644 index 0000000..7cd17ee Binary files /dev/null and b/html2005/bugs/imagenes/valid-html401.png differ diff --git a/html2005/bugs/nvubugs10.html b/html2005/bugs/nvubugs10.html new file mode 100644 index 0000000..a54f2e1 --- /dev/null +++ b/html2005/bugs/nvubugs10.html @@ -0,0 +1,2651 @@ + + + + + + + + + + + + + Nvu Bug list + + + + + + + + + + + + + + + + + + + +

Document made with NvuBug list for Nvu 1.0

+ + + +

+This list is based on experience gained while writing the User Guide +for Nvu versions 0.5 through to 1.0. Bugs which have been cleared are +not included. My method has generally been to check for any bugs found +on previous versions, check for any features covered by release +notes then use the version in any updating of sites required +including updating the user Guide. I also test for any +relevant issues +mentioned on the lists or forum. I have not included issues related to +scripts since I am not experienced in these.Only after these checks is +the list released.

+ + +

+Definition

+ + +

+Strictly I define a bug as any respect in which the product does not +comply with its requirement specification. Unfortunately I am not privy +to the requirement for Nvu and do not know whether it has even +been formally stated. In this case I must take an ad hoc definition for +a bug and work from that. I therefore make a personal inference of a +specification and test departure from that.

+ + +

+Specification.

+ + +

Clause +1The +code which Nvu produces should comply with the relevant sections of +the relevant specifications.I take these to be:

+ + + + + +

(In this context 'relevant' refers to the sections applicable +to the particular doctype being worked on.)

+ + +

Clause +2The +code which Nvu produces should, when submitted, validate +using the W3C validators

+ + + + + +

Clause +3The +line numbers allocated by Nvu should correspond to the +line numbers reported for any errors detected during +validation.

+ + +

+Clause +4 +Pages +developed using the wysiwyg features of Nvu should not +require editing in source view to make them work correctly.

+ + +

Clause +5Nvu +should be internally self consistent. Users should be able to use the +Human Machine Interface (HMI) in a simple way without having to +continually cross check that selections made do not conflict.

+ + +

Clause +6Nvu +should be stable. Its operation should not vary from time to time +unless as a result of preferences or other settings deliberately made +by the user.

+ + +

Clause +7The HMI should operate as described by the help system or +as implied by the control boxes.

+ + +

Bugs

+ + +

+Clauses indicate +which clause of the specification is not met.

+ + +

I have allocated a rating very +serious serious +moderate trivial +to each bug. Necessarily these are personal opinions. I suggest that +the first three categories need to be cleared before the product can be +condidered 'polished'. I have rated all the problems with templates as +'Trivial' not because I consider templates trivial but +because I +consider that the purpose and aim of the template needs to be reviewed +rather than patch the curent implementation.

+ + +
+ +
+ + + + +
+ + +
+ + +
+

Clause +41. +Linked stylesheets

+ + +

Description +The file always appears as an absolute addresses. Once a page +is moved to a different location e.g. from a local machine to a server +the stylesheet will be looked for at the incorrect location.

+ + +

+Workaround +In source view the file can be edited to give a +relative location.

+ + +

ConsequenceBeginner +users will find pages rendered incorrectly if they attempt to use one +of the +most powerful and recommended features of Nvu - External stylesheets. +Experts will hardly notice the problem.

+ + +

Rating Very serious.

+ + +

Clause +12 +Document +Type Declaration

+ + +

Description +The declaration used for html documents is +incomplete - The URL of the DTD is omitted. Para 7.2 of the +HTML 4.01 lists the permitted declarations.

+ + +

WorkaroundEdit +the declaration in a text editor and save the page as a template. Base +all new pages on this.

+ + +

Consequence +Some browsers will be triggered into 'quirks +mode' with +the result that text will be the wrong size and cross-browser +compatibility is impaired.

+ + +

RatingSerious

+ + +

3 Document Type Selection

+ + +

DescriptionClause 5 +When the markup type is set in Tools > Preferences +> Advanced this setting does not persist. If any file is created +with a different selection this re-sets the preference. 

+ + +

WorkaroundIgnore +and never use the markup setting in +Preferences.

+ + +

Consequence +If not noticed many pages could be created with +the wrong doctype.

+ + +

RatingSerious

+ + +

4 Incorrect format code +applied

+ + +

DescriptionClause 2In +several cases, when +formatting parts of a document, (1) code is applied which is not +permitted by the doctype (2) code is applied which is irrelevant to the +format or (3) a format is unavailable though not precluded by the +doctype. These responses depend on whether 'Use CSS Styles instead of +HTML ...' is set. A number of formats have been tested against all +available doctype options. Clause 7The +results are tabulated at the end of this +page.

+ + +

WorkaroundFor +experts, if all formatting is carried out using styles, no probems will +be encountered.
+ + +For others, if 'Use CSS Styles instead of HTML ...' is always set and +Transitional doctype is used no validation errors will occur.
+ + +For those wishing to use Strict doctype and menu or button formatting +refer to the table and avoid problem items. +

+ + +

Consequence +Validation errors will occur. Reworking could be time consuming.

+ + +

Rating Serious

+ + +

5 Managing +Layers 

+ + +

DescriptionClause 4Generating +a single layer is easy enough. As soon +as you have several on a page problems arise in positioning them. If +the grab handle of the one you want lies over (or near) another it is +impossible to grab it. Focus always goes to the other (irrespective of +the z-index). I suggest that focus should stay with the selected layer. +Conversely, grabbing and dragging is an imprecise science, better to +allocate classes to layers. This can be done but the layer retains its +grab handle; then the possibility of moving it inadvertently occurs. I +suggest that, after thought, some method of disabling resizing or +dragging classed layers, possibly selectively, should be introduced. +(I’ve classed this as a bug because of the first difficulty +mentioned.) 

+ + +

WorkaroundThe +User Guide suggests some but the consequences remain. 

+ + +

Consequence +Limited use of layers presents no problem. Extensive use is virtually +precluded at present unless edited in source view.

+ + +

Ratingmoderate +

+ + +

6 Spell checker +(1) 

+ + +

DescriptionClause 5To +get ‘Underline +misspelled words’ to work this must be set AFTER the file is +opened. If set before it must be cleared and re-set.

+ + +

WorkaroundIf +file is opened when ‘Underline +misspelled words’ is set clear the setting and re-set it.

+ + +

ConsequenceMore +keystrokes.

+ + +

Ratingmoderate +

+ + +

7 Spell checker +(2) 

+ + +

DescriptionClause 6When +misspelled words are +underlined right-clicking usually but not always offers spelling +suggestions. Correct action can be reinstated by switching off +‘Underline misspelled words’ and switching on +again.

+ + +

WorkaroundClear +‘Underline +misspelled words’ and re-set it

+ + +

ConsequenceMore keystrokes.

+ + +

Rating moderate +

+ + +

8 Lists

+ + +

DescriptionClause 1It +is now possible to nest lists. Two problems occur. (a) +redundant br elements are introduced which are not cleared by the +markup cleaner (b) A spurious mode exists. By pressing tab in a list a +nested list can be created which uses incorrect code.

+ + +

WorkaroundClause 2The +break requires no remedial work. Avoid pressing the tab key in a list.

+ + +

ConsequenceIf +tab key is pressed most browsers will render the nesting correctly but +validation will fail.

+ + +

Rating  moderate +

+ + + +

9 Browsing 

+ + +

DescriptionClause 7If +the default browser is Mozilla all +is well. If it is Internet Explorer (version 6 at least) when +‘Browse’ is selected the browser opens but in +‘Source’ view not page view. I note that the first +time that I tried this after installation it worked correctly. After +that it failed every time. (Exactly the same action with 0.9, 1.0PR and +1.0) Still in Nvu 1.00

+ + +

WorkaroundTo +use Internet Explorer browse via Windows Explorer.

+ + +

Consequence +HMI is less elegant - more keystrokes required.

+ + +

Rating  moderate +

+ + +

10 ID

+ + +

Clause +1DescriptionIt +is possible to apply the same id to more +than one item.

+ + +

WorkaroundDon't +do it - check manually.

+ + +

ConsequenceIf +done inadvertently incorrect linking or style application could result. +Beginners will probably not use the feature, experienced will probably +not make the error.

+ + +

Rating  moderate +

+ + +

11 Format toolbar

+ + +

DescriptionClause 6Occasionally +both sections of the format toolbar become inactive. When this happens +one or more of the drop down boxes may become 'grayed out' and inactive +and some buttons may become inactive while others continue to work. +Also the file name in the header bar may disappear.   

+ + +

WorkaroundClose +Nvu and re-open.

+ + +

ConsequenceFrustration.

+ + +

Rating moderate

+ + +

12 Line numbering

+ + +

DescriptionClause 3When +passed to the validator errors +are reported on lines which differ in number from those listed in Nvu. +This is probably linked to unexpected line breaks occurring in Nvu. +(PHP users experience issues related to ‘reformatting source +code’ which is probably related but I cannot comment on this.

+ + +

WorkaroundSearch +for correct line. +

+ + +

ConsequenceFrustration.

+ + +

Rating moderate

+ + +

13 Loss of focus

+ + +

DescriptionClause 6I +have noticed this several times (I’m not sure what conditions +apply). I copy something from one document. I open an other and try to +paste. The paste succeeds but to the wrong document. This occurs even +if the focus appears to be in the correct document e.g. it is possible +to type there but paste still goes to the wrong document.

+ + +

WorkaroundClose +and re-open Nvu. +

+ + +

ConsequenceFrustration.

+ + +

Rating moderate

+ + +

14 Tables

+ + +

DescriptionClause 6 +When tables are inserted they start, in a new +installation, at width= 100%. After some time new tables are inserted +with width = 100px. This oddity is intermittent but undesirable; 100% +is a better choice.

+ + +

WorkaroundReset +width using table properties window.

+ + +

ConsequenceNugatory +intervention by user is required.

+ + +

Rating trivial +

+ + +

15 Templates +(1) 

+ + +

DescriptionClause 7When +repeatable areas are +inserted (whether block or flow) it is not possible to edit the content +until they are detached from the template.

+ + +

WorkaroundEdit +content after detaching template.

+ + +

Consequence +Illogical action but of little consequence.

+ + +

Ratingtrivial +

+ + +

16 Templates (2)

+ + +

DescriptionClause 0A +bug seems to have been +introduced between Nvu 0.5 and 0.6. In 0.5 File – New +> +Based on Template > “Choose file” offers an +option to choose “Files of type template”. With 0.7 +onwards only “All files” is offered.

+ + +

WorkaroundSelect +the template file normally.

+ + +

Consequence +Possible need to trawl through long list.

+ + +

Rating trivial +

+ + +

17 Templates (3)

+ + +

DescriptionClause 7In +the ‘Insert an +editable area’ window, when flow areas are selected the +option ‘Area is movable’ appears to be available. +This is meaningless. Still in Nvu 1.00

+ + +

WorkaroundNone +- the option does not work.

+ + +

Consequence +Possible confusion to user.

+ + +

Rating trivial +

+ + +

18 Templates (4) 

+ + +

DescriptionClause 7The +HMI (Human-machine +Interface) is quite obscure and needs review. Much of the operation is +non-intuitive.

+ + +

WorkaroundNot +possible

+ + +

ConsequenceIn +its present form the Templates facility is of no real use.

+ + +

Rating trivial +

+ + +

19 Table of +Contents 

+ + +

DescriptionClause 7According +to Help system +Inserting a ToC with ‘Make ToC read only’ checked +should omit anchors.  This does not happen.

+ + +

WorkaroundTolerate +the links and bloating of the code.

+ + +

ConsequenceCode +bloat. (Few are likely to find the links objectionable.)

+ + +

Rating trivial +

+ + +

20 Page +tabs  

+ + +

DescriptionClause 5These +normally display the page title. Sometimes (in a long +session)  +the title of a different page is displayed. On one occason, when all +the pages of the User Guide were open (titles carry sequential +numbers), all titles were displaced by one unit. Unfortunately I did +not record the order of opening or direction of displacement. 

+ + +

WorkaroundUse +file name instead of title or close and re-open files..

+ + +

Consequence +Confusion to user..

+ + +

Rating trivial +

+ + +

21 Selection 

+ + +

DescriptionClause 5In +HTML tags view, when an element +is selected it is normally highlighted in the Status Bar. This +doesn’t occur when BODY is selected. For a long time I +thought that it wasn’t possible to select BODY.

+ + +

WorkaroundRecognise +that it IS possible to select body.

+ + +

Consequence +Illogical and some may miss the possibility of applying styles to body.

+ + +

Rating trivial +

+ + +

22 Frames   

+ + +

DescriptionClause 5When +a frame is encountered +the system seems to freeze. It takes a bit of skill to recover without +closing Nvu. The response has improved with Nvu 1.0 but after switching +to source view recovery is still very difficult.

+ + +

WorkaroundOpen +a different file from File menu or Site Manager.

+ + +

ConsequenceFrustration +until you learn the workaround.

+ + +

Rating trivial +

+ + +

23 Markup +Cleaner 

+ + +

DescriptionClause 7Does +not remove all empty +blocks (e.g. UL), nor empty classes (including empty spans). 

+ + +

WorkaroundDon't +clean the file or use another cleaner. 

+ + +

Consequence +Code bloat

+ + +

Rating trivial +

+ + +

24 Saving 

+ + +

DescriptionClause 7If +you edit something by selecting the +tag and applying an inline style you do not receive an invitation to +save i.e. save button remains greyed out and is inactive. You must edit +something else to bring it to life.

+ + +

WorkaroundMake +any trivial change to the file.

+ + +

Consequence +Possible loss of code due to thinking a file has been saved when it has +not.

+ + +

Rating trivial +

+ + +

25 Site Manager.

+ + +

DescriptionClause 5 +Now +that Nvu handles xhtml documents Site +Manager needs enhancing e.g. it displays xhtml documents only when +'View All files' is selected.. I would prefer the View options to be 1 +– All files, 2 – html documents,  3 +– Image files, then three new types 3 – xhtml +documents, 5 – CSS files, 6 – Page documents (html ++ xhtml).

+ + +

WorkaroundSearch +visually.

+ + +

Consequence +Slower in use.

+ + +

Rating trivial +

+ + +

26 CSS editorClause 7

+ + +

DescriptionThe +‘Down’ button does not work.

+ + +

WorkaroundSelect +an item or items lower on the list and use the 'up' button.

+ + +

ConsequenceMore +keystrokes

+ + +

Rating trivial

+ + +
+ + +

Notes - Response of +Nvu to various ways of applying formats

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
File reference11a533a722a644a8
'Use CSS +styles' +UNCHECKED'Use CSS +styles' CHECKED
Transitional +doctypesStrict +doctypesTransitional +doctypesStrict +doctypes
see Note 1FullShortFullFullShortFullFullShortFullFullShortFull
HTMLXHTMLHTMLXHTMLHTMLXHTMLHTMLXHTML
Format appliedResponse of Nvu +e.g. method applied to achieve format - Coloured cells indicate +unsatisfactory (or sub-optimal) response (see Key)
Button - Choose color for textfontfontfontfontInactiveInactivestylestylestylestylestylestyle
Format > Text ColorfontfontfontfontInactivefont *4stylestylestylestylestylestyle
Button - Smaller font sizesmallsmallsmallsmallsmallsmallsmallsmallsmallsmallsmallsmall
Format > Size > Smallersmallsmallsmallsmallsmallsmallsmallsmallsmallsmallsmallsmall
Button - Larger font sizebigbigbigbigbigbigbigbigbigbigbigbig
Format > Size > Largerbigbigbigbigbigbigbigbigbigbigbigbig
Format > Size > x-largefontfontfontfontInactiveInactivefontfontfontfontfontInactive
Button - Chose color for background (Page background)bgcolor *2bgcolor *2bgcolor *2bgcolor *2InactiveInactive
Button - Chose color for background (Block background)style *3style *3style *3style *3style *3style *3
Button - Boldbbbbbbstylestylestylestylestylestyle
Format > Text style > Boldbbbbbbstylestylestylestylestylestyle
Button - Italiciiiiiistylestylestylestylestylestyle
Format > Text style > Italiciiiiiistylestylestylestylestylestyle
Button - UnderlineuuuuInactiveInactivestylestylestylestylestylestyle
Format > Text style > UnderlineuuuuInactiveInactivestylestylestylestylestylestyle
Button - Emphasizeemememememememememememem
Format > Text style > Emphasisemememememememememememem
Button - Strong emphasizestrongstrongstrongstrongstrongstrongstrongstrongstrongstrongstrongstrong
Format > Text style > Stronger +emphasisstrongstrongstrongstrongstrongstrongstrongstrongstrongstrongstrongstrong
Button - Align rightalignalignalignalignInactiveInactivestylestylestylestylestylestyle
Format > Align > Rightalignalignalignalignalignalignstylestylestylestylestylestyle
Button - JustifyalignalignalignalignInactiveInactivestylestylestylestylestylestyle
Format > Align > Justifyalignalignalignalignalignalignstylestylestylestylestylestyle
Button - Indent textblockquotealignblockquoteblockquoteblockquoteblockquotestylestylestylestylestylestyle
Format > Increase Indentblockquotealignblockquoteblockquoteblockquoteblockquotestylestylestylestylestylestyle
Drop down - CourierfontfontfontfontInactiveInactivefontstylefontstylestylestyle
Format > Font > CourierfontfontfontfontInactiveInactivefontstylefontstylestylestyle
Format > Image props > AppearancealignalignalignalignInactiveInactivefloatfloatfloatfloatfloatfloat
Format > Page colors and backgroundbgcolor *5 *6bgcolor *5 *6bgcolor *5 *6bgcolor *5 *6InactiveInactivestyle *5 *7style *5style*5 *7style *5 *7style *5 *7style *7
Key:
RedUses code prohibited by doctype or setting.
OrangeFunctionality restricted due to format not +being available.
YellowCodes applied which are irrelevant to format +applied may produce unexpected results.
ClearFully compliant.
Notes:
* 1 Note Full +Doctype is as defined in HTML specification. Short Doctype is +as applied by Nvu to HTML documents. This omits URL of DTD.
* 2 Note when +bgcolor applied to body +body also has +alink, vlink, link and text applied.
* 3 Note when +color applied to block +body also has +alink, vlink, link and text applied.
* 4 This +function is intermittent - +Usually it is +inaccessible.
* 5 Comment +applies to background. +Link colours applied in addition always as alink vlink link.
* 6 Text also +applied.
* 7 Color also +applied (within style).
'Inactive' +Indicates that the function cannot be +performed. The button and/or menu item may be greyed out or missing but +not necessarily so leading to more uncertainty.
+ + +
+ + +

Charles Cooke 12 July 2005 

+ + +

+Valid HTML 4.01!Valid CSS

+ + + + diff --git a/html2005/bugs/nvubugs10traducida.html b/html2005/bugs/nvubugs10traducida.html new file mode 100644 index 0000000..8e66135 --- /dev/null +++ b/html2005/bugs/nvubugs10traducida.html @@ -0,0 +1,4824 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Lista del insecto de Nvu + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Documento hecho con Nvu +Lista del insecto para Nvu 1.0

+ + + + + + +

+Esta lista se basa en la experiencia ganada +mientras que escribe la guía del usuario para las versiones 0.5 de +Nvu a través a 1.0. Los insectos que han sido despejaron no son +incluidos. Mi método ha sido comprobar para saber si hay +cualquier insecto encontrado en versiones anteriores, comprobar para +saber si hay cualesquiera características cubiertas por las notas del +lanzamiento después utiliza generalmente la versión en +cualquier puesta al día de los sitios requeridos incluyendo la puesta +al día de la guía del usuario. También pruebo para +cualquier edición relevante mencionada en las listas o el foro. +No he incluido las ediciones relacionadas con las escrituras +puesto que me no experimentan en these.Only después de que estos +cheques sean la lista lanzada.

+ + + + + +

+Definición

+ + + + + +

+Defino terminantemente un insecto como cualquier +respecto en el cual el producto no se conforme con su especificación +de requisito. Desafortunadamente no soy privy al requisito para +Nvu y no sé si incluso se ha indicado formalmente. +En este caso debo tomar a un anuncio la definición hoc para un +insecto y trabajar de eso. I por lo tanto hace una inferencia +personal de una salida de la especificación y de la prueba de eso.

+ + + + + +

+Especificación.

+ + + + + +

La cláusula 1el código que Nvu +produce debe conformarse con las secciones relevantes de la toma +relevante de specifications.I éstos para ser:

+ + + + + + + + + + + +

(en este contexto ' relevante ' refiere a las +secciones aplicables al doctype particular que es trabajado +encendido.)

+ + + + + +

La cláusula 2el código que Nvu +produce debe, cuando está sometida, validar con los validators de +W3C

+ + + + + + + + + + + +

La cláusula 3la línea +números asignados por Nvu debe corresponder a la línea números +divulgados para cualquier error detectado durante la +validación.

+ + + + + +

+Las páginas de la cláusula +4 +desarrolladas usando las características del wysiwyg de Nvu no +deben requerir corregir en la opinión de la fuente para hacerlas +trabajan correctamente.

+ + + + + +

La cláusula 5Nvu debe estar +internamente uno mismo constante. Los usuarios deben poder +utilizar el interfaz humano de la máquina (HMI) en una manera simple +sin tuvieron que cheque continuamente cruzado que no están en +conflicto las selecciones hechas.

+ + + + + +

La cláusula 6Nvu debe ser estable. +Su operación no debe variar a partir de tiempo al tiempo a +menos que como resultado de las preferencias o de otros ajustes hechos +deliberadamente por el usuario.

+ + + + + +

Cláusula 7 queEl HMI debe funcionar +según lo descrito por el sistema de ayuda o según lo implicado por +las cajas de control.

+ + + + + +

Insectos

+ + + + + +

+Las cláusulas indican qué cláusula de la +especificación no se resuelve.

+ + + + + +

He asignado un trivial moderado +serio muy +serio del grado +a cada insecto. Éstas +son necesariamente opiniones personales. Sugiero que las +primeras tres categorías necesiten ser despejaran antes de que el +producto pueda ser condidered ' pulido '. He clasificado todos +los problemas con las plantillas como ' triviales ' no porque +considero plantillas triviales pero porque considero que +el propósito y la puntería de la plantilla necesita ser repasado +más bien que remiende la puesta en práctica curent.

+ + + + + +
+ + + + +
+ + + + + + + + + + +
+ + + + + +
+ + + + + +
+

Cláusula 41. +Stylesheets ligados

+ + + + + +

La descripción +el archivo +aparece siempre como direcciones absolutas. Una vez que una +página se mueva a una diversa localización e.g. desde una máquina +local a un servidor el stylesheet será buscado en la localización +incorrecta.

+ + + + + +

+El workaround +en la opinión de la +fuente el archivo se puede corregir para dar una localización +relativa.

+ + + + + +

Los usuariosdel principiante de +la consecuencia encontrarán las páginas rendidas +incorrectamente si procuran utilizar una de las características más +de gran alcance y recomendadas de Nvu - stylesheets externos. +Los expertos notarán apenas el problema.

+ + + + + +

Clasificación de muy serio.

+ + + + + +

Cláusula 1Tipo +Declaración De 2 Documentos

+ + + + + +

La descripción +el +declaración usado para los documentos del HTML es incompleta - El URL +del DTD se omite. Párrafo 7.2 del HTML 4.01 enumera los +declaraciones permitidos.

+ + + + + +

El workaroundcorrige el declaración +en un editor de textos y ahorra la página como plantilla. Base +todas las páginas nuevas en esto.

+ + + + + +

La consecuencia +algunos browsers +será accionada en ' modo de los caprichos ' con el resultado que el +texto será el tamaño incorrecto y compatibilidad del +cruz-cross-browser está deteriorado.

+ + + + + +

ClasificaciónSerio

+ + + + + +

Tipo Selección De 3 +Documentos

+ + + + + +

La cláusula5 de +la descripción +cuando el tipo del margen de +beneficio se fija en herramientas > preferencias > avanzó este ajuste +no persiste. Si cualquier archivo se crea con una diversa +selección éste reajusta la preferencia. 

+ + + + + +

El workaroundno hace caso y nunca +utiliza del margen de beneficio que fija en preferencias.

+ + + + + +

La consecuencia +si no notó que +muchas páginas se podrían crear con el doctype incorrecto.

+ + + + + +

ClasificaciónSerio

+ + + + + +

el código incorrecto del +formato 4 se aplicó

+ + + + + +

La cláusula2 de +la descripciónen varios casos, al ajustar a +formato partes de un documento, (1) se aplica el código que no es +permitido por el código del doctype (2) se aplica que es inaplicable +al formato o (3) un formato es inasequible no imposibilitada sin +embargo por el doctype. Estas respuestas dependen encendido si ' +los estilos del CSS del uso en vez del HTML... ' están fijados. +Un número de formatos se han probado contra todas las opciones +disponibles del doctype. La cláusula 7los resultados se tabula en el extremo +de esta página.

+ + + + + +

El workaroundpara los expertos, si +se realiza todo el formato usando estilos, ningunos probems será +encontrado.
+ + + + + +Para otros, si ' los estilos del CSS del uso en vez del HTML... +' se fijan siempre y el doctype transitorio se utiliza ningunos +errores de la validación ocurrirá.
+ + + + + +Para ésos que desean utilizar el doctype y el menú o el +formato terminante del botón refiera a la tabla y evite los +artículos del problema. +

+ + + + + +

Los errores +de la validación +de la consecuencia ocurrirán. El volver a trabajar +podía ser desperdiciador de tiempo.

+ + + + + +

Clasificación Serio

+ + + + + +

5 Capas De Manejo 

+ + + + + +

La cláusula4 de +la descripciónque genera una sola capa es +bastante fácil. Tan pronto como usted haga que se presenten +varios en problemas de una página en la colocación de ellos. +Si la manija del gancho agarrador de la usted desea el excedente +de las mentiras (o acerque) otro es imposible asirlo. El foco va +siempre al otro (independiente del z-i'ndice). Sugiero que el +foco permanezca con la capa seleccionada. Inversamente, asiendo +y de fricción es una ciencia imprecisa, mejora para asignar clases a +las capas. Esto puede ser hecha pero la capa conserva su manija +del gancho agarrador; entonces la posibilidad de moverla ocurre +inadvertidamente. Sugiero que, después de pensamiento, un +cierto método de inhabilitar capas clasificadas que vuelven a +clasificar según el tamaño o de fricciones, posiblemente +selectivamente, sea introducido. (el ve’de I +clasificó esto mientras que un insecto debido a la primera dificultad +mencionó.) 

+ + + + + +

El workaroundla guía del usuario +sugiere alguno pero sigue habiendo las consecuencias. 

+ + + + + +

El uso +limitado consecuencia +de capas no presenta ningún problema. El uso extenso se +imposibilita virtualmente actualmente a menos que esté corregido en +la opinión de la fuente.

+ + + + + +

Clasificaciónmoderado +

+ + + + + +

inspector del encanto 6 (1) 

+ + + + + +

La cláusula5 de +la descripciónpara conseguir ‘palabras deletreadas mal raya’ para +trabajar esto debe ser fijada DESPUÉS DE QUE se abra el archivo. +Si el sistema antes de que deba ser despejó y reajuste.

+ + + + + +

Workaroundsi se abre el archivo +cuando ‘las palabras deletreadas mal raya’ se fijan claramente el ajuste y el reajuste él.

+ + + + + +

Consecuenciamás golpes de teclado.

+ + + + + +

Clasificaciónmoderado +

+ + + + + +

inspector del encanto 7 (2) 

+ + + + + +

La cláusula6 de +la descripcióncuando las palabras deletreadas mal +son el derecho-chascar subrayado generalmente pero ofrecen no siempre +sugerencias del deletreo. La acción correcta puede ser +reinstalada encendiendo ‘de palabras deletreadas mal raya’ y cambiando otra vez.

+ + + + + +

La rayadel claro ‘del +workaround deletreó palabras mal’ y las reajustó

+ + + + + +

Consecuenciamás golpes de +teclado.

+ + + + + +

Clasificación moderado +

+ + + + + +

8 listas

+ + + + + +

La cláusula1 de +la descripciónes posible ahora jerarquizar +listas. Dos problemas ocurren. (a) se introducen los +elementos redundantes del Br que no son despejaron por el modo falso +del limpiador del margen de beneficio (b) A existen. Presionando +la lengüeta en una lista una lista jerarquizada puede ser creada que +utiliza código incorrecto.

+ + + + + +

La cláusula2 del +workaroundla rotura no requiere ningún trabajo +remediador. Evite de presionar el tabulador en una lista.

+ + + + + +

La consecuenciasi el tabulador se +presiona la mayoría de los browsers rinde el nesting correctamente +solamente la validación fallará.

+ + + + + +

Clasificación  moderado +

+ + + + + + +

9 hojeando 

+ + + + + +

La cláusula7 siel browser del defecto es Mozilla todos de +la descripción está +bien. Si es Internet Explorer (versión 6 por lo menos) cuando +‘hojee’ se selecciona el browser se abre pero en ‘la +opinión’ de la página de la opinión de la +fuente no. Observo que eso yo intentó la primera vez esto +después de que instalación que trabajó +correctamente. Después que falló cada vez. (exactamente +la misma acción con 0.9, 1.0PR y 1.0) aún en Nvu 1.00

+ + + + + +

El workaroundpara utilizar +a Internet Explorer hojea vía el explorador de Windows.

+ + + + + +

La consecuencia +HMI es menos elegante +- más golpes de teclado requeridos.

+ + + + + +

Clasificación  moderado +

+ + + + + +

IDENTIFICACIÓN 10

+ + + + + +

Descripción de la cláusula1es posible apply la misma identificación a más de un +artículo.

+ + + + + +

El workaroundno lo hace - cheque +manualmente.

+ + + + + +

Consecuenciasi inadvertidamente +hecho el uso incorrecto el ligarse o del estilo podría resultar. +Los principiantes no utilizarán probablemente la +característica, voluntad experimentada probablemente para no hacer el +error.

+ + + + + +

Clasificación  moderado +

+ + + + + +

formato 11 toolbar

+ + + + + +

Cláusula6 de la +descripciónde vez en cuando ambas secciones del +toolbar del formato llegada a ser inactivo. Cuando sucede esto +una o más de la gota abajo las cajas pueden llegar a ser ' grayed +fuera de ' e inactivo y algunos botones puede llegar a ser inactivo +mientras que otros continúan trabajando. También el nombre del +archivo en la barra del jefe puede desaparecer.   

+ + + + + +

El workaroundNvu cercano y abre de +nuevo.

+ + + + + +

FrustraciónDe la +Consecuencia.

+ + + + + +

Clasificación moderado

+ + + + + +

12 línea enumeración

+ + + + + +

La cláusula3 de +la descripcióncuando está pasada a los errores +del Validator es divulgó sobre las líneas que diferencian en número +de ésas enumeradas en Nvu. Esto se liga probablemente a la +línea inesperada roturas que ocurren en Nvu. (los usuarios de PHP +experimentan las ediciones relacionadas con ‘el cambio de +formato del código de fuente’ que es probablemente +relacionado pero no puedo comentar respecto a esto.

+ + + + + +

Búsquedadel workaround para +la línea correcta. +

+ + + + + +

FrustraciónDe la +Consecuencia.

+ + + + + +

Clasificación moderado

+ + + + + +

pérdida 13 de foco

+ + + + + +

La cláusula6 de +la descripciónhe notado esto varias veces (I’m no seguro qué condiciones se aplican). Copio +algo a partir de un documento. Abro un otro e intento pegar. +La goma tiene éxito pero al documento incorrecto. Esto +ocurre incluso si el foco aparece estar en el documento correcto e.g. +que es posible mecanografiar allí pero la goma todavía va al +documento incorrecto.

+ + + + + +

El workaroundcercano y abre de nuevo +Nvu. +

+ + + + + +

FrustraciónDe la +Consecuencia.

+ + + + + +

Clasificación moderado

+ + + + + +

14 tablas

+ + + + + +

La cláusula6 de +la descripción +cuando las tablas son insertado +ellas comienza, en una nueva instalación, en la anchura = 100%. +Después de una cierta hora las tablas nuevas se insertan con +anchura = 100px. Esta singularidad es intermitente pero +indeseable; 100% es una opción mejor.

+ + + + + +

Anchuradel reajuste del +workaround usando la ventana de las características de la +tabla.

+ + + + + +

La intervenciónde Nugatory de +la consecuencia del usuario se requiere.

+ + + + + +

Clasificación trivial +

+ + + + + +

15 plantillas (1) 

+ + + + + +

Cláusula7 de la +descripcióncuando las áreas repetibles se +insertan (si bloque o flujo) le no son posibles corregir el contenido +hasta que se separan de la plantilla.

+ + + + + +

El workaroundcorrige el contenido +después de separar la plantilla.

+ + + + + +

Acción +ilógica de la +consecuencia pero de poca consecuencia.

+ + + + + +

Clasificacióntrivial +

+ + + + + +

16 plantillas (2)

+ + + + + +

El insectode la cláusula 0A de la descripción se parece haber +sido introducido entre Nvu 0.5 y 0.6. En 0.5 archivo – nuevo > basado en plantilla > “elija las +ofertas” del archivo una opción para elegir “archivos del tipo plantilla”. Con 0.7 +hacia adelante solamente “todo el archivo” se ofrece.

+ + + + + +

El workaroundselecciona el archivo +de la plantilla normalmente.

+ + + + + +

Necesidad +posible de la +consecuencia de pescar con red barredera a través de lista +larga.

+ + + + + +

Clasificación trivial +

+ + + + + +

17 plantillas (3)

+ + + + + +

La cláusula7 de +la descripciónen ‘el relleno una +ventana editable’ del área, cuando las áreas del flujo +se seleccionan el área ‘de la opción es movible’ aparece estar disponible. Esto es sin setido. +Todavía en Nvu 1.00

+ + + + + +

Workaroundninguno - la +opción no trabaja.

+ + + + + +

Confusión +posible de la +consecuencia al usuario.

+ + + + + +

Clasificación trivial +

+ + + + + +

18 plantillas (4) 

+ + + + + +

La cláusula7 de +la descripciónEl HMI (interfaz human-machine) es +absolutamente obscura y necesita la revisión. Mucha de la +operación es no-intuitiva.

+ + + + + +

Workaroundno posible

+ + + + + +

La consecuenciaen su actual +forma la facilidad de las plantillas está de ningún uso verdadero.

+ + + + + +

Clasificación trivial +

+ + + + + +

contenido 19 

+ + + + + +

La cláusula7 de +la descripciónsegún el sistema de ayuda que +inserta un ToC con ‘hace que el ToC lee comprobado’ solamente debe omitir las anclas.  Esto no +sucede.

+ + + + + +

El workaroundtolera los +acoplamientos y hinchar del código.

+ + + + + +

El CódigoDe la Consecuencia +Hincha. (pocos son probables encontrar los +acoplamientos desagradables.)

+ + + + + +

Clasificación trivial +

+ + + + + +

20 lengüetas de la página  

+ + + + + +

La cláusula5 de +la descripciónéstos exhibe normalmente el +título de la página. (en una sesión larga)  el +título de una diversa página se exhibe a veces. En un occason, +cuando todas las páginas de la guía del usuario estaban abiertas +(los títulos llevan números secuenciales), todos los títulos fueron +desplazados por una unidad. Desafortunadamente no registré la +orden de la abertura o la dirección de la dislocación. 

+ + + + + +

El nombre del archivodel uso +del workaround en vez del título o el cierre y abre de +nuevo archivos.

+ + + + + +

Confusión +de la consecuencia +al usuario.

+ + + + + +

Clasificación trivial +

+ + + + + +

selección 21 

+ + + + + +

La cláusula5 de +la descripciónen el HTML marca la visión con +etiqueta, cuando un elemento se selecciona le se destaca normalmente +en la barra de estado. Este doesn’t ocurre cuando +se selecciona el CUERPO. Pensé durante mucho tiempo que él el +wasn’t posible seleccionar el CUERPO.

+ + + + + +

El workaroundreconoce que ES posible +seleccionar el cuerpo.

+ + + + + +

La consecuencia +ilógica y algo +pueden faltar la posibilidad de aplicar estilos al cuerpo.

+ + + + + +

Clasificación trivial +

+ + + + + +

22 marcos   

+ + + + + +

La cláusula5 de +la descripcióncuando se encuentra un marco el +sistema se parece congelar. Toma un poco habilidad para +recuperarse sin el cierre de Nvu. La respuesta ha mejorado con +Nvu 1.0 pero después de que el cambiar a la recuperación de la +opinión de la fuente siga siendo muy difícil.

+ + + + + +

El workaroundabre un diverso archivo +del menú de archivo o del encargado del sitio.

+ + + + + +

Frustraciónde la consecuencia +hasta que usted aprende el workaround.

+ + + + + +

Clasificación trivial +

+ + + + + +

Limpiador De 23 Márgenes de +beneficio 

+ + + + + +

La cláusula7 de +la descripciónno quita todos los bloques vacíos +(e.g. UL), ni clases vacías (palmos vacíos incluyendo). 

+ + + + + +

El workaroundno limpia el archivo ni +utiliza otro limpiador. 

+ + + + + +

El Código +De la Consecuencia +Hincha

+ + + + + +

Clasificación trivial +

+ + + + + +

24 ahorrando 

+ + + + + +

La cláusula7 de +la descripciónsi usted corrige algo seleccionando +la etiqueta y aplicando un estilo en línea usted no recibe una +invitación de ahorrar es decir excepto el restos del botón greyed +hacia fuera y es inactiva. Usted debe corregir algo más para +traerlo a la vida.

+ + + + + +

El workaroundrealiza cualquier +cambio trivial al archivo.

+ + + + + +

La pérdida +posible de la +consecuencia de código debido a pensar un archivo se ha +ahorrado cuando no tiene.

+ + + + + +

Clasificación trivial +

+ + + + + +

Encargado De 25 Sitios.

+ + + + + +

La cláusula5 de la +descripción +ahora que Nvu maneja las necesidades del encargado del sitio de +los documentos del xhtml que realzan e.g. exhibe documentos del xhtml +solamente cuando se selecciona la ' visión todos los archivos. +Preferiría las opciones de la visión para ser 1 – +todo el archivo, 2 – documentos del HTML,  3 – +archivos de la imagen, entonces tres nuevos tipos 3 – documentos +del xhtml, 5 – archivos del CSS, 6 – documentos de +página (HTML + xhtml).

+ + + + + +

Búsquedadel workaround +visualmente.

+ + + + + +

Consecuencia +más lenta en uso.

+ + + + + +

Clasificación trivial +

+ + + + + +

cláusula 7 del +redactorde 26 CSS

+ + + + + +

Descripción que ‘abajo’ el botón no funciona.

+ + + + + +

El workaroundselecciona un artículo +o artículos más bajo en la lista y utiliza ' encima ' del botón.

+ + + + + +

Consecuenciamás golpes de teclado

+ + + + + +

Clasificación trivial

+ + + + + +
+ + + + + +

Respuesta de Nvu a las diversas maneras de +aplicar formatos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
"Usar estilos CSS..." MARCADO"Usar estilos CSS..." DESMARCADO
DTD TransitionalDTD StrictDTD TransitionalDTD Strict
HTMLXHTMLHTMLXHTMLHTMLXHTMLHTMLXHTML
vea la nota 1CompletaCortaCompleta
+ + + 		CompletaCortaCompletaCompletaCortaCompletaCompletaCortaCompleta
Formato  aplicadoLa respuesta de NVU - las celdas coloreadas indican respuesta +insatisfactoria (o diferente de la óptima) (véase la clave en la zona inferior)
Botón - elegir  color para el textofuentefuentefuentefuenteInactivoInactivoestiloestiloestiloestiloestiloestilo
Formato > color del textofuentefuentefuentefuenteInactivofuente * 4estiloestiloestiloestiloestiloestilo
Botón - un tamaño de fuente más pequeñopequeñopequeñopequeñopequeñopequeñopequeñopequeñopequeñopequeñopequeñopequeñopequeño
Formato > Tamaño > Más pequeñopequeñopequeñopequeñopequeñopequeñopequeñopequeñopequeñopequeñopequeñopequeñopequeño
Botón - un tamaño de fuente más grandegrandegrandegrandegrandegrandegrandegrandegrandegrandegrandegrandegrande
Formato > Tamaño > Más grandegrandegrandegrandegrandegrandegrandegrandegrandegrandegrandegrandegrande
Formato > tamaño > x-grandefuentefuentefuentefuenteInactivoInactivofuentefuentefuentefuentefuenteInactivo
Botón - eligió el color para el fondo (fondo de la +página)bgcolor * 2bgcolor * 2bgcolor * 2bgcolor * 2InactivoInactivo
Botón - eligió el color para el fondo (fondo del +bloque)estilo * 3estilo * 3estilo * 3estilo * 3estilo * 3estilo * 3
Botón - En negrillabbbbbbestiloestiloestiloestiloestiloestilo
Estilo del formato > del texto > en negrillabbbbbbestiloestiloestiloestiloestiloestilo
Botón - Itálicoiiiiiiestiloestiloestiloestiloestiloestilo
Formato > estilo > itálico del textoiiiiiiestiloestiloestiloestiloestiloestilo
Botón - RayauuuuInactivoInactivoestiloestiloestiloestiloestiloestilo
Formato > estilo > raya del textouuuuInactivoInactivoestiloestiloestiloestiloestiloestilo
Botón - Acentúeemememememememememememem
Formato > estilo > énfasis del textoemememememememememememem
Botón - fuerte acentúefuertefuertefuertefuertefuertefuertefuertefuertefuertefuertefuertefuerte
Estilo del formato > del texto > un +énfasis más fuertefuertefuertefuertefuertefuertefuertefuertefuertefuertefuertefuertefuerte
Botón - alinee a la derechaalineealineealineealineeInactivoInactivoestiloestiloestiloestiloestiloestilo
El Formato > Alinea > Derechoalineealineealineealineealineealineeestiloestiloestiloestiloestiloestilo
Botón - JustifiquealineealineealineealineeInactivoInactivoestiloestiloestiloestiloestiloestilo
El Formato > Alinea > Justificaalineealineealineealineealineealineeestiloestiloestiloestiloestiloestilo
Botón - texto de la mellablockquotealineeblockquoteblockquoteblockquoteblockquoteestiloestiloestiloestiloestiloestilo
Mella Del Formato > Del Aumentoblockquotealineeblockquoteblockquoteblockquoteblockquoteestiloestiloestiloestiloestiloestilo
De la gota mensajero abajo -fuentefuentefuentefuenteInactivoInactivofuenteestilofuenteestiloestiloestilo
Formato > Fuente > MensajerofuentefuentefuentefuenteInactivoInactivofuenteestilofuenteestiloestiloestilo
El formato > la imagen apoya > aspectoalineealineealineealineeInactivoInactivoflotadorflotadorflotadorflotadorflotadorflotador
Formato > colores y fondo de la páginabgcolor * 5 * 6bgcolor * 5 * 6bgcolor * 5 * 6bgcolor * 5 * 6InactivoInactivoestilo * 5 * 7estilo * 5style*5 * 7estilo * 5 * 7estilo * 5 * 7estilo * 7
Llave:
RojoLas aplicaciones cifran prohibido el doctype o fijando.
AnaranjadoLa funcionalidad restringió debido al formato que no +estaba disponible.
AmarilloLos códigos se aplicaron que son inaplicables al +formato aplicado pueden producir resultados inesperados.
ClaroCompletamente obediente.
Notas:
* 1 DTD completa se +refiera a que está indicada según lo definido +en +la especificación del HTML. DTD corta se refiere a la plantilla +por defecto utilizada por N|VU para los documentos del HTML +que omite el URL del DTD.
* 2 observan cuando el bgcolor aplicado al cuerpo del cuerpo +también tiene el alink, el vlink, el acoplamiento y texto aplicados.
* 3 observan cuando el color aplicado al cuerpo del bloque +también tiene el alink, el vlink, el acoplamiento y texto aplicados.
* 4 esta función es intermitentes - es generalmente +inaccesible.
* el comentario 5 se aplica al fondo. El acoplamiento +colorea aplicado además siempre como acoplamiento del +vlink del alink.
* el texto 6 también se aplicó.
* el color 7 también se aplicó (dentro de estilo).
' inactivo ' indica que la función no puede ser realizada. +El artículo del botón y/o de menú puede ser greyed hacia +fuera o faltando pero no no necesariamente tan conduciendo a más +incertidumbre.
+ + + + + +
+ + + + + +

Charles Cooke El 12 De Julio De 2005 

+ + + + + +

+¡HTML Válido 4.01!Css Válido

+ + + + + + + + + + + + + + + diff --git a/html2005/bugs/ug.css b/html2005/bugs/ug.css new file mode 100644 index 0000000..b614d92 --- /dev/null +++ b/html2005/bugs/ug.css @@ -0,0 +1,67 @@ +/* Style sheet for Nvu user Guide - Nvu version 0.9 - Guide version 0.6 - Updated 17 Mar-2005 */ + +/* Global Tag styles */ + +body { margin: 0px; text-align: left; background: fixed url(images/paper.gif); } +p, h1, h2, h3, h4, td, li { font-family: Arial,Helvetica,sans-serif; } +p { font-size: small; margin-top: 0px; margin-bottom: 0.25em; margin-left: 3em; text-align: left; } +h1, h2, h3, h4 { font-weight: bold; margin-bottom: 0em; padding-top: 0.5em; padding-bottom: 0px; margin-top: 0em; color: rgb(66, 137, 181); } +h1 { text-align: center; font-size: x-large; margin-bottom: 1em; } +h1was { text-align: center; font-size: x-large; margin-top: 1em; margin-bottom: 1em; } +h2 { font-size: medium; text-align: left; } +h3, h4 { font-size: small; text-align: left; } +td { padding-left: 4px; padding-right: 4px; font-size: small; margin-bottom: 0.25em; margin-top: 0px; } +ul { margin-top: 0px; margin-bottom: 0px; } +li { font-size: small; margin-top: 0px; margin-bottom: 0px; margin-left: 3em; text-align: left; } +hr { width: 80%; height: 2px; margin-left: 10% ; margin-top:1em; background-color: rgb(74, 148, 197); color: rgb(74, 148, 197); } + +/* Anchor styles */ +a:link { text-decoration: underline; font-weight: bold; color: rgb(66, 137, 181); } +a:visited { font-weight: bold; color: rgb(66, 137, 181); } +a:hover { color: rgb(73, 149, 196); background-color: rgb(238, 238, 238); } +a:focus { color: white; background-color: rgb(73, 149, 196); } + +/* Classes */ +.cent { text-align: center; } +.clear { clear: left;} +.highlt { vertical-align: super; font-size: 80%; background-color: rgb(200, 203, 220); } +.note { margin-left: 4em; margin-right: 1em; padding-left: 0.35em; padding-right: 0; background-color: rgb(255, 255, 204); } +.left { float: left; } +.right { float: right; } +.logo { padding-left:44px; height: 44px; padding-top:10px; } +.madewith {border: 0px solid ; width: 135px; height: 52px;} +.madewith:link {text-decoration: none; font-weight:normal; margin-left: 0; } +.tsp {font-size: x-small ;} +.key { background-color: rgb(186, 218, 255); } +.warn { margin-left: 4em; margin-right: 1em; padding-left: 0.35em; padding-right: 0; border-style: solid none; border-color: rgb(0, 0, 0); border-width: 1px; background-color: rgb(255, 186, 144); } +.ie {color: rgb(255, 255, 255); font-size: 1px;} +.offset a { position:relative; top:-80px;} + +/* Pane styles */ + +/* Main pane */ +.paneholder { width: 770px; } +.panemain { position: absolute; top: 62px; left: 170px; max-width: 600px; } + +/* Menu pane */ +.panemenu { position: fixed; top: 0px; left: 10px; width: 160px; z-index: 3; } +div.panemenu p { margin:0; font-weight: bold; font-size: small; color: rgb(66, 137, 181); } +div.panemenu p a:link { text-decoration: none; color: rgb(66, 137, 181); font-size: small; } +div.panemenu p a:visited { text-decoration: none; color: rgb(66, 137, 181); font-size: small; } +div.panemenu p a:hover { color: rgb(73, 149, 196); background-color: rgb(238, 238, 238); } +div.panemenu p a:focus { color: rgb(73, 149, 196); background-color: rgb(238, 238, 238); } + +div.panemenu ul { border-style: solid; border-color: rgb(66, 137, 181); border-width: 1px; margin-left: 1em; padding-left: 0.25em; margin-right: 0.25em; list-style-type: none;} +div.panemenu ul li { margin:0; padding:0; } +div.panemenu ul a:link { text-decoration: none; color: rgb(33, 80, 100); font-size: small; font-weight:normal;} +div.panemenu ul a:visited { text-decoration: none; color: rgb(33, 80, 100); font-size: small; font-weight:normal; } +div.panemenu ul a:hover { color: rgb(73, 149, 196); background-color: rgb(238, 238, 238); } +div.panemenu ul a:focus { color: rgb(73, 149, 196); background-color: rgb(238, 238, 238); } + +/* Top pane */ +.panetop { width: 588px; height: 80px; position: fixed; top: 0px; left:10px; padding-left: 180px; z-index: 2; background-image: url(images/paper.gif); } +div.panetop h1 { text-align:left; margin-top: 0; margin-bottom:0; } +div.panetop h2 { text-align:left; margin-top: 0; } + +/* Div styles */ +.contents { margin-top: 0pt; margin-bottom: 0px; line-height:80%; } diff --git a/html2005/cab/Images/cab_01.jpg b/html2005/cab/Images/cab_01.jpg new file mode 100644 index 0000000..8931718 Binary files /dev/null and b/html2005/cab/Images/cab_01.jpg differ diff --git a/html2005/cab/Images/cab_03.jpg b/html2005/cab/Images/cab_03.jpg new file mode 100644 index 0000000..6aeb017 Binary files /dev/null and b/html2005/cab/Images/cab_03.jpg differ diff --git a/html2005/cab/Images/cap.jpg b/html2005/cab/Images/cap.jpg new file mode 100644 index 0000000..8da52e1 Binary files /dev/null and b/html2005/cab/Images/cap.jpg differ diff --git a/html2005/cab/Images/cap_00.jpg b/html2005/cab/Images/cap_00.jpg new file mode 100644 index 0000000..f030151 Binary files /dev/null and b/html2005/cab/Images/cap_00.jpg differ diff --git a/html2005/cab/Images/cap_01.jpg b/html2005/cab/Images/cap_01.jpg new file mode 100644 index 0000000..262a1e0 Binary files /dev/null and b/html2005/cab/Images/cap_01.jpg differ diff --git a/html2005/cab/Images/cap_02.jpg b/html2005/cab/Images/cap_02.jpg new file mode 100644 index 0000000..e24f378 Binary files /dev/null and b/html2005/cab/Images/cap_02.jpg differ diff --git a/html2005/cab/Images/cap_03.jpg b/html2005/cab/Images/cap_03.jpg new file mode 100644 index 0000000..fd15f37 Binary files /dev/null and b/html2005/cab/Images/cap_03.jpg differ diff --git a/html2005/cab/Images/cap_04.jpg b/html2005/cab/Images/cap_04.jpg new file mode 100644 index 0000000..2e3b5a0 Binary files /dev/null and b/html2005/cab/Images/cap_04.jpg differ diff --git a/html2005/cab/Images/cap_05.jpg b/html2005/cab/Images/cap_05.jpg new file mode 100644 index 0000000..15cc431 Binary files /dev/null and b/html2005/cab/Images/cap_05.jpg differ diff --git a/html2005/cab/Images/cap_06.jpg b/html2005/cab/Images/cap_06.jpg new file mode 100644 index 0000000..6b1842d Binary files /dev/null and b/html2005/cab/Images/cap_06.jpg differ diff --git a/html2005/cab/Images/cap_07.jpg b/html2005/cab/Images/cap_07.jpg new file mode 100644 index 0000000..47be5f9 Binary files /dev/null and b/html2005/cab/Images/cap_07.jpg differ diff --git a/html2005/cab/Images/cap_08.jpg b/html2005/cab/Images/cap_08.jpg new file mode 100644 index 0000000..96a5f4f Binary files /dev/null and b/html2005/cab/Images/cap_08.jpg differ diff --git a/html2005/cab/Images/cap_09.jpg b/html2005/cab/Images/cap_09.jpg new file mode 100644 index 0000000..cdee6f3 Binary files /dev/null and b/html2005/cab/Images/cap_09.jpg differ diff --git a/html2005/cab/Images/cap_10.jpg b/html2005/cab/Images/cap_10.jpg new file mode 100644 index 0000000..1e3c0a3 Binary files /dev/null and b/html2005/cab/Images/cap_10.jpg differ diff --git a/html2005/cab/Images/cap_11.jpg b/html2005/cab/Images/cap_11.jpg new file mode 100644 index 0000000..0de5fc4 Binary files /dev/null and b/html2005/cab/Images/cap_11.jpg differ diff --git a/html2005/cab/Images/cap_12.jpg b/html2005/cab/Images/cap_12.jpg new file mode 100644 index 0000000..7d19d3c Binary files /dev/null and b/html2005/cab/Images/cap_12.jpg differ diff --git a/html2005/cab/Images/cap_13.jpg b/html2005/cab/Images/cap_13.jpg new file mode 100644 index 0000000..1806451 Binary files /dev/null and b/html2005/cab/Images/cap_13.jpg differ diff --git a/html2005/cab/Images/cap_14.jpg b/html2005/cab/Images/cap_14.jpg new file mode 100644 index 0000000..3d19788 Binary files /dev/null and b/html2005/cab/Images/cap_14.jpg differ diff --git a/html2005/cab/Images/cap_15.jpg b/html2005/cab/Images/cap_15.jpg new file mode 100644 index 0000000..509029d Binary files /dev/null and b/html2005/cab/Images/cap_15.jpg differ diff --git a/html2005/cab/Images/cap_16.jpg b/html2005/cab/Images/cap_16.jpg new file mode 100644 index 0000000..a8660ae Binary files /dev/null and b/html2005/cab/Images/cap_16.jpg differ diff --git a/html2005/cab/Images/cap_17.jpg b/html2005/cab/Images/cap_17.jpg new file mode 100644 index 0000000..0b308ea Binary files /dev/null and b/html2005/cab/Images/cap_17.jpg differ diff --git a/html2005/cab/Images/cap_18.jpg b/html2005/cab/Images/cap_18.jpg new file mode 100644 index 0000000..a286b70 Binary files /dev/null and b/html2005/cab/Images/cap_18.jpg differ diff --git a/html2005/cab/Images/fin.jpg b/html2005/cab/Images/fin.jpg new file mode 100644 index 0000000..31aafad Binary files /dev/null and b/html2005/cab/Images/fin.jpg differ diff --git a/html2005/cab/Images/fnd.jpg b/html2005/cab/Images/fnd.jpg new file mode 100644 index 0000000..2a727c2 Binary files /dev/null and b/html2005/cab/Images/fnd.jpg differ diff --git a/html2005/cab/cab.html b/html2005/cab/cab.html new file mode 100644 index 0000000..00265bd --- /dev/null +++ b/html2005/cab/cab.html @@ -0,0 +1,57 @@ + + + +Documento sin título + + + + + + + + + + + + + +
+ + + +
+ + + + + + + + + + + + + + + + + + + + + + +
+ + diff --git a/html2005/cabecera.css b/html2005/cabecera.css new file mode 100644 index 0000000..1613ca3 --- /dev/null +++ b/html2005/cabecera.css @@ -0,0 +1,23 @@ +/* CSS Document */ + + +body{ +background-image:url(cabecera.jpg); +background-repeat: no-repeat; +} +h2 +{ + +margin-left:80%; +margin-top:40px;} + +a{ +text-decoration:none; +color:#373F68; +font-stretch: ultra-condensed; +font-family:Helvetica, Arial, sans-serif; +font-size:22px; +font-weight: bold;} + +a:hover {color: #B5B19A} + diff --git a/html2005/cabecera.html b/html2005/cabecera.html new file mode 100644 index 0000000..0edecfe --- /dev/null +++ b/html2005/cabecera.html @@ -0,0 +1,10 @@ + + +cabecera + + + + +

índice  portada

+ + \ No newline at end of file diff --git a/html2005/cabecera.jpg b/html2005/cabecera.jpg new file mode 100644 index 0000000..0255316 Binary files /dev/null and b/html2005/cabecera.jpg differ diff --git a/html2005/estilos/Thumbs.db b/html2005/estilos/Thumbs.db new file mode 100644 index 0000000..c0d5888 Binary files /dev/null and b/html2005/estilos/Thumbs.db differ diff --git a/html2005/estilos/absolutamenterelativo.html b/html2005/estilos/absolutamenterelativo.html new file mode 100644 index 0000000..913f2c8 --- /dev/null +++ b/html2005/estilos/absolutamenterelativo.html @@ -0,0 +1,239 @@ + + + + + + + + + + + + + Absolutamente relativo + + + + + + + + + + + +
+

Estilos>>Absolutamente relativo

+ +
+ +
+ +
+
+ +
+ +
+ + + +
+ +
+

Absolutamente relativo

+ + +

Este título aparentemente paradójico +procede el título original de un artículo en +inglés Relatively Absolute de Tommy Olson en el que se +intenta ofrecer una aclaración del sentido de los diversos +modos de posicionamiento mediante CSS. De hecho el contenido de este +apartado del curso no es una traducción del mismo pero +sí una adaptación basada en lo que +allí se plantea.

+ + +

Para diseñar una página web, +además de las decisiones referentes a las fuentes, colores y +elementos gráficos, hay que elegir una +disposición de los componentes para lo cual se pueden +emplear tablas, flotaciones y posicionamiento. 

+ + +

El uso de las tablas, aunque sigue siendo probablemente el +método más extendido es el menos recomendable de +todos por su incidencia negativa en la accesibilidad y su falta de +adecuación para una correcta estructuración de la +información. De hecho está totalmente +desaconsejado con el W3C.

+ + +

La utilizacion de la propiedad float es un método +mucho más acorde con los estándares y puede ser +suficiente en muchas ocasiones.

+ + +

El posicionamiento es la tercera técnica y la que +más dificultades de interpretación tiene, por lo +que vamos a intentar aclararlo.

+ + +

Para empezar vamos a tomar como referencia una serie +numérica: 1, 2, 3,... en la que cada número ocupa +de forma natural una posición: el 2 aparece +detrás del 1 y antes del 3. Los elementos que componen una +página web siguen el mismo esquema y tienen un orden natural +que es su orden de aparición en el código que genera la +página, por lo +que podríamos decir que coincidirían con el +comportamiento de una serie numérica. (Fíjate que he +especificado el orden de aparición en el código, no el +orden de aparición en la página porque podríamos +confundirnos con lo que vemos si nos guiamos por la +presentación de los elementos en pantalla)

+ + +

Una vez fijada la referencia consideremos los diferentes +valores que puede adoptar la propiedad position

+ + +
+ + +
static
+ + +
Es el valor por defecto. Cualquier elemento con + position:static se situará en la ventana en la +posición por defecto de acuerdo a su orden de +aparición en el flujo del documento, sin modificar la +posición. Dada esta particularidad podría +pensarse que su efecto será nulo. En parte es +así ya que no sirve para modificar la posición de +un elemento, pero en algún momento será necesario +recurrir a este valor para restaurar los valores por defecto.
+ + +
relative
+ + +
Algunas veces el lenguaje nos juega malas pasadas y esta +puede ser una de ellas. La idea de posición relativa nos +sugiere que debemos considerar un elemento ajeno como punto de +referencia para situar elemento al que le aplicamos esta propiedad y +realmente no es así: la posición relativa toma +como referencia la posición que ocuparía el +elemento si se respeta el flujo del documento sin modificar la +situación que le correspondería en ese caso.
+ + +
+ + +Si le aplicamos a un elemento la propiedad position:relative pero no +especificamos ningún valor de desplazamiento el efecto es el +mismo que si no la hubiéramos aplicado o hubiéramos +utilizado el valor por defecto position:static. +Si le adjudicamos un valor top:10px +el elemento se desplazará 10 +píxeles hacia abajo respecto a la que habría sido su +posición normal. También podríamos ponerle valores +negativos. Además, dado que lo único que hacemos es +desplazar el elemento pero éste sigue ocupando lo mismo, +es innecesario especificar un valor para bottom o right si lo hemos +hecho para top y left (o viceversa)
+ +
+ +Los elementos posicionados relativamente siguen en el flujo del +documento ocupando el espacio que les corresponde, pero no donde +aparecen sino donde habrían estado si hubieran estado +posicionados estáticamente. Por ello la utilidad del +posicionamiento relativo no se aplica excesivamente al desplazamiento +de elementos, sino más bien a convertir elementos en +posicionados, ya que una vez aplicada, aunque no movamos el elemento ni +un píxel servirá como referencia para que los elementos +hijos, que hereden alguna propiedad del que tiene + position:relative, dispongan de un nuevo punto de cálculo, +especialmente cuando se utilice el valor absolute.
+ + +
absolute
+ + +
Si lo anterior puede habernos procucido un cierto desconcierto, +esto va a acabar de complicar la situación: la +interpretación de posición absoluta que podríamos +deducir del término tampoco es correcta. 
+ +
+ +Cuando adjudicamos a un elemento position:absolute y le aplicamos un +desplazamiento la nueva posición se calcula localizando el primer +ancestro posicionado y situando los bordes a la distancia indicada +respecto a los bordes de ese elemento. En caso de que no exista +ningún ancestro posicionado la especificación CSS2. toma +como referencia el bloque contenedor inicial, indicando que será +el navegador el que determine cuál es, lo cual suele +traducirse en que se toma como referencia el elemento body que +coincide con la ventana de la aplicación.
+ +
+ +Una cuestión que hay que tener en cuenta es que, cuando un +elemento está posicionado con esta propiedad, sale del flujo del +documento, por lo que el lugar que le correspondería es ocupado +por el siguiente elemento, lo cual supone que podemos encontrarnos con +que un elemento puede quedar debajo de otro que esté situado de +forma absoluta.
+ +
+ +En los navegadores con soporte completo para CSS se pueden especificar +valores para los cuatro costados y el navegador se encarga de calcular +el ancho, pero no ocurre así con Internet Explorer, lo cual nos +obliga a especificar, al menos, la anchura del elemento posicionado. Se +pueden indicar valores negativos para las distancias de los cuatro +lados, aunque siempre habrá que tener en cuenta cuál es +el bloque contenedor de referencia para evitar que nuestro elemento +quede fuera de la pantalla.
+ +
fixed
+ +
En este caso el elemento de referencia es siempre la ventana del +navegador, por lo que sería la posición más +cercana a lo que podríamos interpretar como absoluto. Los elementos +que llevan esta posicion salen del flujo y se mantienen fijos en la +ventana, pero aún mantienen una relación de profundidad +con el resto de los elementos: mientras no hayamos alterado el valor +z-index, los elementos que se han creado antes del posicionado se +encontrarán por debajo de él, mientras que los que se +crean después se superpondrán al elemento posicionado en +el caso de que tengan que coincidir al desplazar la página.
+ +
+ +Como consecuencia de lo anterior, si queremos crear un menú que +permanezca fijo en la parte superior de la pantalla y creamos el +elemento que lo contiene en primer lugar tendremos que modificar su +valor z-index poniéndolo mayor que cualquier otro en el resto de +la página.
+ +
+ + +
+ +
+ + diff --git a/html2005/estilos/atencion.gif b/html2005/estilos/atencion.gif new file mode 100644 index 0000000..b42dd25 Binary files /dev/null and b/html2005/estilos/atencion.gif differ diff --git a/html2005/estilos/borraractividad80.html b/html2005/estilos/borraractividad80.html new file mode 100644 index 0000000..588f699 --- /dev/null +++ b/html2005/estilos/borraractividad80.html @@ -0,0 +1,257 @@ + + + + + + actividad80 + + + + + + +

Veamos las particularidades que aportan las redes +telemáticas a la elaboración de un +periódico escolar:

+ +

Respecto al documento

+ + + +

Respecto al proceso

+ + + +

Elementos multimedia

+ +

La edición del periódico escolar en +papel permite presentar información textual e imagen fija, +bien consista ésta en dibujos, gráficos o fotos. +Como elemento positivo no podemos olvidar la reproducción de +la grafía original que puede ser muy interesante cuando los +autores son alumnos de los primeros niveles de escolaridad. +También en la edición electrónica +podemos incorporar las grafías originales, bien de textos o +bien de dibujos, mediante la utilización de algún +periférico de captura de imagen, y no olvidemos que esta +aplicación acompaña a un equipo dotado con una +tarjeta de captura de vídeo. En la edición +electrónica de nuestra revista encontramos como novedad la +posibilidad de incorporar junto al texto y la imagen fija elementos +multimedia: sonido e imagen en movimiento. Bien es verdad que +habrá que tener en cuenta que el actual estado de las redes +de comunicación hacen todavía poco viable la +inclusión de secuencias animadas de cierta +duración, ya que su excesiva extensión hace que +su transmisión se dilate mucho. Por ello habrá +que tener en cuenta el foro en el que se va a difundir la revista: Si +es la red interna del centro podremos rebajar las exigencias en cuanto +a espacio ocupado por la información, ya que la +infraestructura de las redes internas hace posible una mayor densidad +de tráfico sin pérdida sensible de velocidad. Si +el destino es Internet habrá que ser muy cuidadosos con este +aspecto debido al reducido ancho de banda disponible. Habrá +que renunciar a las presentaciones espectaculares, so pena de perder a +los visitantes, aburridos ante un tiempo de descarga que se haga +intolerable.

+ +

Presentación atractiva

+ +

La edición en papel suele hacerse utilizando los +medios de reprografía con los que se cuenta en el centro: +multicopista fotocopiadora. En ocasiones los centros con una cierta +tradición y fuerte raigambre en su entorno pueden conseguir +un patrocinador que haga alguna aportación +económica, con la que se puede acceder a una modesta +edición en imprenta. Lo habitual es que la +edición, cuando se hace con los medios propios, sea en +blanco y negro, con la evidente pérdida de calidad de las +imágenes que, sin que pueda evitarse, tienden a empastarse +en un masa negruzca sin ningún detalle. La +edición en imprenta, mucho menos frecuente, mejora +sensiblemente la calidad, pero también suele ser en blanco y +negro para reducir costes. La edición electrónica +nos permite incorporar el color a la presentación de la +revista, con lo que no sólo se hace mucho más +vistosa, sino que nos abre las puertas de un componente que resulta +fundamental para transmitir de forma correcta algunos contenidos.

+ +

Facilidad de edición

+ +

Para llevar a cabo la maquetación de una revista +escolar sencilla, con una presentación adecuada, es +imprescindible manejar un programa de autoedición o, en su +defecto, dominar en profundidad de alguno de los modernos procesadores +de texto. Esto significa que estamos privando a alumnos y alumnas, +especialmente a los más pequeños, de la +posibilidad de controlar en gran medida su trabajo. Por su parte, el +lenguaje HTML que utilizamos para realizar la creación de +páginas WEB es intrínsecamente sencillo al +apoyarse en un concepto simple: el documento original es texto puro, +sin formatear, al que se encierra entre unas etiquetas que se encargan +de especificar la apariencia de cada fragmento. Por ejemplo para +indicar que algo va en en negrita habría que poner +<B> que indica que lo que va a continuación es +negrita y </B> que indica que acaba la negrita. El +aprendizaje de las etiquetas básicas y su +utilización no lleva más que un par de horas, sin +contar con la gran cantidad de editores WYSWYG (lo que ves es lo que +obtienes) en los que ni siquiera es necesario escribir dichas +etiquetas. Con esta forma de trabajar posibilitamos que se puedan +trabajar en profundidad y con autonomía los aspectos de +expresión, ya que el alumno sólo tiene que +preocuparse por la corrección ortográfica, +gramatical y de estilo para expresar aquello que realmente quiere +decir, sin preocuparse de la presentación. Por otra parte, +necesitar únicamente una herramienta que produzca textos sin +formatear nos permite recuperar algunas máquinas, de las que +se han quedado obsoletas, para que puedan ser empleadas por los +chavales.

+ +

Retroalimentación

+ +

La sección de Cartas al Director es la ventana por +la que la prensa escrita recoge las opiniones, críticas y +aportaciones de los lectores. Sin considerar otros elementos, es muy +posible que en más de una ocasión hayamos +renunciado a manifestar nuestras opiniones utilizando este medio, +desanimados ante la falta de inmediatez del correo tradicional. En una +revista electrónica desaparece este inconveniente y se +propicia la participación y el intercambio de informaciones +y opiniones. Es fácil imaginar la importancia que la +sección de Correo puede tener si nos atrevemos a embarcarnos +en un proyecto intercentros en el que la revista de cada uno sea el +núcleo de comunicación e intercambio.

+ +

Economía.

+ +

Frente a los gastos que genera una edición en papel +tenemos la economía de la edición +electrónica: el ejemplar virtual es único y a la +vez múltiple y adaptable a la demanda. único en +tanto que no creamos más que una copia. Múltiple +en cuanto que cada usuario dispone de su propio ejemplar a partir de la +publicación electrónica. La +repercusión económica de esta +característica es obvia: no necesitamos hacer una +inversión en papel y en reprografía para elaborar +una tirada sobre cuya difusión no tenemos certeza.

+ +

Rapidez

+ +

Quien haya estado comprometido en la elaboración de +un periódico escolar habrá tenido que padecer la +lentitud de los procesos necesarios para confeccionar los contenidos +cuando se trata de un periódico de centro. Además +habrá tenido que añadir las dilaciones que +conlleva la impresión de los materiales y su +distribución. Si se pretende crear un periódico +de aula o de nivel es bastante probable que se haya abandonado la idea, +ya que la inversión en tiempo y medios para una tirada muy +reducida no compensa el aprovechamiento educativo que se pueda obtener. +La organización de las tareas será el +único medio para paliar el primer inconveniente citado, pero +el resto es perfectamente subsanable cuando trabajamos con una +edición electrónica: no hay que esperar hasta que +el periódico esté impreso y la +difusión es automática. No es necesario que se +actualice toda una edición: cada clase o grupo puede ir +incorporando sus materiales a medida que se preparan. Un simple +avisador gráfico al lado del enlace nos informará +de que se trata de un material reciente. Incluso es posible disponer de +un periódico propio de cada clase puesto que se anulan los +costes que implicaba la edición en papel.

+ +

Distribución masiva

+ +

¿A cuántas personas llega nuestro +periódico escolar? Lo habitual es que la +distribución alcance al entorno próximo al +centro: familia, barrio, pueblo. En algunos casos, si existe +correspondencia escolar, puede llegar a los centros con los que +mantenemos relación. En el caso de la revista escolar +electrónica estamos, literalmente, "lanzando al mundo" +nuestro mensaje. Ahora bien, esta potencial distribución de +lo que hemos hecho en nuestro centro en un ámbito planetario +sólo se queda en una posibilidad teórica si no la +acompañamos de otras medidas de difusión. Tras +unas primeras experiencias para hacernos al medio sería +aconsejable integrarnos en alguna red, nacional o supranacional, +dedicada a potenciar este tipo de prensa escolar. 

+ +

Almacenamiento

+ +

Problema: Hemos hecho una tirada de 300 ejemplares y se han +vendido 230. Cada ejemplar tenía 25 páginas. Para +que la tinta no traspasara el papel la impresión era a una +cara. ¿Qué hacemos con los ejemplares que nos +sobran?

+ +

Solución 1: (persistente) A ver si conseguimos +hacer otra "batida" del barrio y los colocamos.

+ +

Solución 2: (ecológico-educativa) +Intentemos reciclar el papel en las aulas y la secretaría +utilizándolo para borradores y "trabajos en sucio".

+ +

Solución 3: (ecológica a secas) Vamos a +tirarlo al contenedor de papel.

+ +

Solución 4: (conservacionista) Vamos a guardarlo en +el almacén para que no estorbe mientras pensamos algo.

+ +

Aunque se haya planteado en tono jocoso este es uno de los +problemas que presenta la edición en papel. Las 1750 hojas +excedentes de la tirada del problema anterior acaban, en la +mayoría de los casos, como material para reciclaje o +amontonando polvo en algún rincón de un +almacén. En la edición electrónica de +la revista escolar no hay excedentes, porque la utilización +de papel por parte del centro es mínima y, en todo caso, +ajustada a las demandas de ejemplares impresos. Por lo tanto no tenemos +problemas de almacenamiento de material sobrante. Además, +las ediciones previas pueden estar accesibles ocupando un +mínimo espacio en el disco duro del servidor.

+ + + diff --git a/html2005/estilos/borrarlista.html b/html2005/estilos/borrarlista.html new file mode 100644 index 0000000..24233d0 --- /dev/null +++ b/html2005/estilos/borrarlista.html @@ -0,0 +1,99 @@ + + + + + + + + + + + + + + + + + + + +

+ + + +
    + +
  1. Antelope
    2. + +
  2. Baboon
    3. + +
  3. Bison
    4. + +
  4. Camel
    5. + +
  5. Chimpanzee
    6. + +
  6. Deer
    7. + +
  7. Eland
    8. + +
  8. Elk
    9. + +
  9. Gazelle
    10. + +
  10. Gibbon
    11. + +
  11. Kangaroo
    12. + +
  12. Meerkat
    13. + +
  13. Sheep
    14. + +
  14. Warthog
    15. + +
  15. Zebra
    16. + +
+ + + diff --git a/html2005/estilos/botonesrollover.html b/html2005/estilos/botonesrollover.html new file mode 100644 index 0000000..8553cbb --- /dev/null +++ b/html2005/estilos/botonesrollover.html @@ -0,0 +1,42 @@ + + + + + + + + + + + + +Enlace +1 +Enlace 2 +Enlace 3 +Enlace 4 +Enlace 5 + + diff --git a/html2005/estilos/boxmodel.html b/html2005/estilos/boxmodel.html new file mode 100644 index 0000000..acc1e90 --- /dev/null +++ b/html2005/estilos/boxmodel.html @@ -0,0 +1,26 @@ + + + + + + Modelo de caja + + + + + + + + + + +

Este +párrafo tiene aplicado un estilo según el cual +tendrá una anchura de 400 píxeles, +con un relleno de 40 píxeles, un borde de 5 +píxeles y un margen de 30 píxeles.

+ + + diff --git a/html2005/estilos/css1.html b/html2005/estilos/css1.html new file mode 100644 index 0000000..239ffcd --- /dev/null +++ b/html2005/estilos/css1.html @@ -0,0 +1,213 @@ + + + + + + Introducción a CSS + + + + + + + + + + + +
+

Estilos>>Introducción

+ +
+ +
+ +
+
+ +
+ + +
+

Cascading Style Sheets

+ +

O lo que es lo mismo: hojas de estilo en cascada.

+ +

El motivo de haber puesto en primer lugar la +denominación en inglés es porque vas a encontrar +en muchos momentos estas siglas para referirse al concepto que +trabajaremos en este epígrafe. Poco a poco iremos +descifrando el significado real de esta denominación que, +por ahora, puede resultarnos un tanto críptica.

+ +

Lo primero en lo que coincidiremos es en que el lenguaje HTML +es +francamente antipático y poco flexible cuando se trata de +incidir en la apariencia de una página. El problema real +está en que la concepción original del mismo no +pretendía orientarlo hacia el aspecto gráfico: la +misión principal de las etiquetas HTML es proporcionar +estructura lógica y semántica al +contenido. Pensemos que el lenguaje HTML surgió en +un entorno, el universitario, y con un propósito, la +publicación de contenidos científicos +estructurados, eminentemente textuales. El problema es que la masiva +difusión de Internet hizo que se rompiera el marco original +y se hiciera necesario, especialmente desde la irrupción de +un uso comercial, presentar páginas en las que el centro de +gravedad se trasladaba del contenido y su estructura a la forma, ya que +se trataba de crear "imagen de marca". Fue entonces cuando empezaron a +aparecer los problemas, ya que el lenguaje HTML no está +pensado para trabajar con los elementos formales sino con los +de tipo estructural.

+ +

Si te paras a pensar un poco sobre lo que acabas de leer +puedes darte cuenta por ejemplo de que, aunque hayamos podido utilizar +las etiquetas <h1> para conseguir un texto de un +determinado tamaño que nos pudiera valer de titular lo +lógico habría sido emplearlas para organizar los +contenidos indicando que su contenido es el +título de un fragmento que tiene tiene una +importancia superior, que aquellos que van encabezados por un +<h2>

+ +

El crecimiento exponencial de Internet hizo que la imagen que +nos hemos hecho de lo que debe ser una página WEB fuera +acercándose a lo que es hoy: un entorno multimedia en el que +los aspectos formales han cobrado una gran importancia. Pero esta +percepción sigue apoyándose en la +utilización del mismo lenguaje que le había +servido de base en los primeros tiempos, lo cual ha hecho que los +diseñadores hayan tenido que recurrir a trucos y +artimañas para paliar las deficiencias del lenguaje HTML en +lo referente a la presentación visual.

+ +

Al tratarse de añadidos a la finalidad original, y +en muchos casos utilizaciones francamente contradictorias con la misma, +podemos encontrarnos con situaciones muy problemáticas +cuando pretendemos introducir modificaciones globales en un sitio WEB. +¿Imaginas, por ejemplo, el trabajo +que sería necesario para cambiar el tipo de letra +de un sitio WEB compuesto por cincuenta páginas?

+ +

La forma de solucionarlo ha sido la utilización de +las hojas de estilo en cascada. Las hojas de estilo en cascada aportan, +como característica esencial, la posibilidad de separar los +elementos formales de los de contenido, de forma que con una +pequeña modificación de la hoja de estilo se +pueda cambiar el aspecto de todas las páginas en las que se +aplica esa hoja. Volviendo al ejemplo anterior tal vez nos +bastaría con cambiar una vez la palabra sans-serif por serif +para conseguir que las cincuenta páginas de nuestra web +cambiaran automáticamente de apariencia.

+ +

Antes de empezar es conveniente considerar una +cuestión: el W3C, +como organismo encargado de la estandarización, elabora un +conjunto de especificaciones normativas, pero...  cada +navegador +ofrece un soporte más o menos ajustado a las +especificaciones. +De hecho nos encontramos en un momento en el que la +especificación CSS3, que incluye una gran cantidad de +posibilidades no contempladas en las versiones previas, no es soportada +por ningún navegador. Incluso, la implementación +de las +especificaciones CSS2 presenta importantes deficiencias en +Explorer 6 y anteriores, lo cual nos obligará a buscar +algunos +trucos para lograr efectos similares en todos los navegadores. Es muy +probable que las nuevas versiones de los navegadores que tal vez hayan +aparecido cuando leas esta documentación superen estos +problemas +y se ajusten a la normativa común.

+ +

¿Por qué se denominan hojas de estilo?

+ +

La denominación de hojas de estilo hace referencia +a que podemos, a partir de las etiquetas básicas de HTML, +realizar modificaciones en las propiedades de las +mismas, indicándole al navegador unas instrucciones +muy precisas sobre la forma en la que tiene que presentar un +determinado elemento, esto es, el estilo de la presentación. +

+ +

Una ventaja añadida es que, al tratarse de una +colección de instrucciones escrita en formato de texto. Si +recurrimos a su uso más aconsejable, dichas +instrucciones +estarán separadas de la propia página web y +serán +aplicables a múltiples páginas +simultáneamente, +por lo que  conseguiremos que el código +de nuestra página en sí resulte +mucho +más ligero.

+ +

Por otra parte, al quedar un código mucho +más limpio gracias a la descarga de los elementos de +formato, la estructura de la información quedará +mucho más clara ya que el código +tenderá a ser muy simple.

+ +

¿Por qué se denominan "en cascada"?

+ +

A la hora de crear un estilo, las especificaciones que se +realicen para un determinado elemento serán aplicables a +todos aquellos elementos que se encuentren "por debajo" de +él atendiendo a un criterio de herencia. Por ejemplo, si +especificamos un tipo de letra para el elemento <body> +todos aquellos elementos que puedan heredar las +características se presentarán con el mismo tipo +de fuente. Así, el elemento <p> +heredará el tipo de letra salvo que especifiquemos lo +contrario y no necesitaríamos volver a indicar esta +característica. 

+ +

Gracias a la organización en cascada podemos crear +hojas de estilo muy compactas, ya que una sola norma en el primer +elemento de la cadena de herencia permite que podamos aplicarla a todos +los herederos.

+ +

Además de ello se establece un orden de prioridad +para la aplicación de las normas en caso de que resulten +contradictorias. El orden de preferencia para aplicar una norma es el +siguiente:

+ +
    + +
  1. Estilo especificado dentro de la etiqueta. (estilo en +línea)
    2. + +
  2. Estilo especificado en la cabecera del documento. (hoja de +estilos interna)
    3. + +
  3. Estilo definido en un documento independiente al que se +enlaza nuestra página. (hoja de estilos externa)
    4. + +
+ +

Teniendo en cuenta el orden mencionado, el procedimiento +más cómodo es crear una hoja de estilo en un +archivo independiente y vincular las páginas a este archivo. +Si queremos realizar alguna modificación en un elemento +concreto podríamos recurrir a uno de los dos primeros +procedimientos que, al ser más específicos, +resultarán preferentes.

+ +

¿CSS1, CSS2 o CSS3?

+ +

Es posible que en cuanto intentes localizar alguna +información sobre hojas de estilo te aparezca la referencia +a +uno de los tres niveles. Obviamente son más avanzadas las +especificaciones del nivel 3, pero ya hemos comentado que en el momento +actual no están soportadas por la mayoría de los +navegadores, por lo que haremos referencia a las de nivel 2.

+
+ + + diff --git a/html2005/estilos/css10.css b/html2005/estilos/css10.css new file mode 100644 index 0000000..acb0e20 --- /dev/null +++ b/html2005/estilos/css10.css @@ -0,0 +1,38 @@ +/* Generated by CaScadeS, a stylesheet editor for Mozilla Composer */ + + th { background-color: rgb(170, 188, 53); + text-align: center; + } + + #centrada { border: thin solid ; + margin: auto; + padding: 10px; + width: 450px; + } + + #Contenedora { width: 100%; + text-align: center; + } + + #CentradaIE { border: thin solid ; + margin: auto; + padding: 10px; + width: 450px; + text-align: justify; + } + + .enlinea li { list-style-type: none; + display: inline; + margin-right: 3em; + } + + .grande { font-size: large; + } + + .muygrande { font-size: xx-large; + } + + #ejemploapilarcapas { height: 270px; + overflow: hidden; + } + diff --git a/html2005/estilos/css10.html b/html2005/estilos/css10.html new file mode 100644 index 0000000..4f1bd72 --- /dev/null +++ b/html2005/estilos/css10.html @@ -0,0 +1,892 @@ + + + + + + + + + + + + + CSS: diseño visual + + + + + + + + + + + + + + + + +
+

Estilos>>Diseño visual

+ +
+ +
+ +
+
+ +
+ + +
+ + + +
+ +
+ + +

Diseño visual

+ + +

Bajo el epígrafe de diseño visual se +incluyen propiedades referidas a la forma en que podemos controlar +cómo +se muestra un elemento, cómo aparecerá +una imagen en +relación a otro elemento, el posicionamiento de un elemento +respecto a su posición habitual o con una +posición fija dentro de la página, la +determinación de la visibilidad de un elemento y el orden en +el que se mostrarán las capas si estas se superponen, la +creación de recortes para mostrar la información +y cómo mostrarla cuando supera el espacio asignado.

+ + +

Cómo se muestran los elementos

+ + +
+

Ya hemos visto que hay elementos en bloque y en +línea y que su forma de construir el cuadro contenedor +difiere bastante. Mediante el uso de CSS podemos indicarle al navegador +que debe mostrar un elemento creando un tipo de cuadro distinto al que +le correspondería por su naturaleza. En el editor +de CSS de N|VU podrás acceder a esta propiedad dentro de la +pestaña caja.

+ + +
+ + +

Propiedad: display

+ + +

Valores: aunque +podríamos considerar otros recogidos en la +especificación vamos a tener en cuenta sólo inline +y block para intercambiar la forma de +presentación de las dos principales disposiciones. 

+ + +
+

Ejemplo 1

+ + +

Si utilizo el selector span para marcar una palabra de una +frase y aplicarle un estilo lo normal es que ese estilo genere un +cuadro de elemento en línea ya que esa es la presentación +predeterminada para los fragmentos de texto. A continuación +se repite este mismo texto aplicándole la propiedad +display:block a la palabra +presentación.

+ + +

Resultado

+ + +

Si utilizo el selector span para marcar una palabra de una +frase y aplicarle un estilo lo normal es que ese estilo genere un +cuadro de elemento en línea ya que esa es la presentación +predeterminada para los fragmentos de texto. A continuación +se repite este mismo texto aplicándole la propiedad +display:block a la palabra presentación.

+ + +

Ejemplo 2

+ + +

En el segundo ejemplo marcaremos los párrafos con +display:inline

+ + +

Este es el segundo párrafo. Ahora repetimos los dos +párrafos correspondientes a este ejemplo y +aparecerán uno a continuación de otro como si no +hubiese salto de párrafo.

+ + +

Resultado

+ + +

En el segundo ejemplo +marcaremos el segundo párrafo con display:inline

+ + +

Este es el segundo +párrafo. Ahora repetimos los dos párrafos +correspondientes a este ejemplo y aparecerán uno a +continuación de otro como si no hubiese salto de +párrafo.

+ + +
+ + +

 

+ + +

Posición flotante

+ + +

Se trata de una propiedad que encuentra su principal +aplicación en las imágenes, aunque +también nos permitirá situar elementos textuales +y conseguir interesantes efectos de inclusión, especialmente +si utilizamos como complemento los fondos. En el editor de CSS +de N|VU podrás acceder a esta propiedad dentro de la +pestaña caja.

+ + +

Propiedad: float

+ + +

Valores: left +hará flotar el elemento afectado en la zona izquierda, right + en la derecha y none +impedirá la flotación haciendo que +el elemento se +muestre en la posición que le corresponde en el flujo de la +página. 

+ + +
+

Ejemplos: En el ejemplo que se muestra se +han creado dos identificadores a los que se les ha aplicado la +propidedad float y algunas más de +fondos, +márgenes y rellenos para que su presentación +visual tenga "aire" entre las diferentes zonas. Ver +ejemplo

+ + +
+ + +

Zonas de flotación prohibidas

+ + +

Si no nos interesa que a un determinado elemento se le +añadan zonas flotantes +podemos indicarlo mediante una propiedad +específica. En el editor de CSS de N|VU +podrás acceder a esta propiedad dentro de la +pestaña caja.

+ + +

Propiedad: clear

+ + +

Valores: left +impedirá la flotación de un +elemento a la +izquierda del que lleva la propiedad, right +hará lo propio a la derecha y +both +afectará a ambos lados.

+ + +
+

Ejemplos: Se repite el ejemplo anterior +pero se ha evitado la flotación de la zona a la que +habíamos llamado mancheta. Ver +ejemplo

+ + +
+ + +

Antes de continuar recordemos cual es el proceso habitual de +generación de páginas en una ventana de +ordenador. Es lo que se denomina flujo normal:

+ + + + + +
+Actividad 92 +

Vamos a +comprobar con un ejercicio práctico lo que acabamos de +comentar.

+ + + + + +
+ + +

Para poder modificar la apariencia visual disponemos en CSS2 +de la posibilidad de alterar el flujo normal especificando la +posición de los elementos. Se trata de una propiedad muy +potente y, aunque podemos aplicarla directamente sobre cualquier +elemento, la recomendación sería que lo hicieras +creando contenedores de bloque con la etiqueta <div> +y +especificando en +ellos la posición.

+ + +Capa creada con N|VUAsí +pues, antes de ver los valores y los efectos de los mismos comentemos +que N|VU dispone de un icono que nos permite generar una capa, que +no es más que un contenedor en bloque, con una simple +pulsación sobre el icono Icono de capa +que creará una capa +vacía +que se irá rellenando con el contenido que vayamos +tecleando. 
+ + +

Si lo que pretendemos es crear una capa a partir de contenidos +que ya estaban incluidos en la página basta con que los +señalemos arrastrando y pulsemos el mismo icono para que se +genere el contenedor para englobarlos a todos. Tanto en uno como en +otro caso la capa generada lo es con posición absoluta, por +lo que si lo único que pretendíamos era insertar +una etiqueta div puede resultar más cómodo +hacerlo utilizando el selector desplegable de tipo de +párrafo o tecleando las etiquetas de apertura y cierre tras +haber marcado el texto que queremos convertir en div y elegido insertarsubmenúhtml. 

+ + +

Cuando nos situemos sobre una capa posicionada absolutamente +el programa lo +indicará haciendo aparecer sus límites y +modificando el icono de las capas que aparecerá como Icono de capa activa. +Podremos moverla de un sitio +a otro si pulsamos sobre Tirador para mover capas y +arrastramos hasta la nueva posición o bien modificar su +tamaño utilizanod los tiradores de los vértices y +el centro de los lados.

+ + +

Para modificar los estilos que afectan a la capa +bastará con hacer doble clic sobre su interior y modificar o +añadir las propiedades que necesitemos.

+ + +
+Actividad 93 + + + +
+ + +

Posición de un elemento

+ + +

Habrás comprobado que al crear las capas N|VU ha +introducido unos códigos de estilo. Como las hemos movido +hasta situarlas en un punto concreto de la página ha +utilizado el valor absolute que es uno de +los posibles. En el editor de CSS de N|VU podrás +acceder a esta propiedad dentro de la pestaña caja. El tema +del posicionamiento es uno de los de mayor repercusión para +el diseño de páginas con CSS. Puedes consultar +una ampliación +de conceptos que te ayudará a comprender este tema +en profundidad.

+ + +

Propiedad: position

+ + +

Valores: Esta propiedad +indicará la forma de calcular la posición del +elemento utilizando los valores absolute, +relative, fixed +y static, que es el valor por +defecto, pero para completar el cálculo +será necesario +añadir luego las propiedades left, +top, bottom + o right +indicando las distancias en cualquiera de las unidades admitidas +respecto a la caja contenedora. Estas distancias habra que indicarlas +en el editor de CSS de N|VU dentro de la pestaña caja en la +sección desplazamientos.

+ + +
+

Ejemplos:

+ + +

Absolute. Ver +ejemplo

+ + +

Relative. La posición +relativa se calcula a partir +de la posición que ocuparía un elemento si +siguiera el flujo normal. El resto de los elementos no se ajustan a la +posición modificada por lo que puede ocurrir que el elemento +se superponga sobre otros. Ver +ejemplo

+ + +

Fixed. Se trata de una variante de la +posición +absoluta cuyo efecto es similar al de las imágenes de fondo +que se mantienen en una posición fija independientemente del +desplazamiento de la página. Cuando se aplican a un medio +impreso, formando algo similar a una cabecera, se repiten en todas las +páginas. Ver +ejemplo

+ + +

Static +es el valor por defecto y no produce ninguna modificación en +el posicionamiento del elemento, por lo que su misión puede +ser más bien la de restablecer el flujo de la +página después de haber situado algún +elemento posicionado.

+ + +
+ + +
AtenciónInternet Explorer +6 no soporta la posición fixed. Para +poder utilizarla y que se vea en este navegador hay que aplicar un +parche que veremos en la sección de recursos.
+ + +

Visibilidad

+ + +

Como el nombre de la propiedad sugiere se refiere a la +posibilidad de hacer que un elemento resulte visible o invisible. Su +utilidad reside en la combinación con scripts que permitan +mostrar u ocultar capas al realizar determinadas acciones con el +ratón, pero este tema excede los contenidos de este curso, +aunque puedes realizar alguna búsqueda sobre "javascript +para mostrar y ocultar capas" para encontrar referencias. En +el editor de CSS de N|VU podrás +acceder a esta propiedad dentro de la pestaña caja.

+ + +

Propiedad: visibility +

+ + +

Valores: Visible +que es el +valor por defecto o hidden para ocultarla

+ + +

Ejemplos: Ver el +código del ejemplo

+ + + + + +

Recortes

+ + +

Tenemos la posibilidad de "encerrar" un elemento dentro de un +recuadro con unas dimensiones determinadas. El resto del contenido +quedará recortado y no +se mostrará. Esta propiedad no está incluida en +el editor CSS de N|VU por lo que habrá que insertar el +código manualmente.

+ + +

Propiedad: clip +

+ + +

Valores: Para definir la zona de +recorte estableceremos las coordenadas de un rectángulo que +hará de ventana visible del documento. Los valores que se +aplican indican la posición de los vértices +superior izquierdo, superior derecho, +inferior derecho e inferior izquierdo respecto a los bordes +superior e izquierdo del contenedor en el que se encuentra la +imagen, y se anotan en la forma rect (valor, valor, +valor, valor)donde el primer valor sirve para calcular la +distancia hasta el borde superior, el segundo la distancia de ese +vértice hasta el borde izquierdo, el tercero se calcula de +nuevo respecto al borde superior y el último se calcula +respecto al borde izquierdo y sirve para determinar la distancia del +último vertice (y también del primero del que +sólo conocíamos su distancia al borde superior)  +Ver +ejemplo

+
AtenciónInternet Explorer +6 no soporta la propiedad clip. 
+

+

+ + +

 Desbordamiento

+ + +

¿Qué ocurre cuando definimos unas +dimensiones exactas para un elemento y el contenido del mismo desborda +los límites establecidos? Dependerá de los +valores que adopte la propiedad que controla el +desbordamiento. En +el editor de CSS de N|VU podrás +acceder a esta propiedad dentro de la pestaña caja.

+ + +

Propiedad: overflow +

+ + +

Valores: Si no se especifica +valor de overflow los navegadores +utilizarán visible +como valor por defecto. Los valores posibles son:

+ + + + + +

Ver +ejemplo

+ + +

Alineamiento vertical

+ + +

Es una propiedad que tiene su principal aplicación +para las imágenes, cosa que ya se podía hacer con +HTML, pero puede aplicarse a cualquier elemento en +línea. Esta propiedad no está incluida +en +el editor CSS de N|VU por lo que habrá que insertar el +código manualmente.

+ + +

Propiedad: vertical-align

+ + +

Valores y ejemplos:

+ + +

Se utiliza la imagen para +mostrar el efecto de cada valor

+ + + + + +

Apariencia del cursor

+ + +

El navegador modifica de forma automática la forma +en que muestra el cursr en función de la +posición del ratón sobre +los elementos de la página, pero también podemos +especificarlo mediante estilos. Esta propiedad no +está incluida +en +el editor CSS de N|VU por lo que habrá que insertar el +código manualmente.

+ + +

Propiedad: cursor

+ + +

Valores y ejemplos: Pasando el +ratón sobre cada uno de los valores verás cambiar +el cursor de acuerdo a cada uno de ellos: crosshair,default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help +.

+ + +

Apilar capas

+ + +

Además de poder colocar las capas en la +posición que se desee, también se puede decidir +el orden en el que se irán apilando, de forma que unas zonas +se superpongan a otras. Esta propiedad sólo puede aplicarse +a capas que tengan establecido el atributo position. En +el editor de CSS de N|VU podrás +acceder a esta propiedad dentro de la pestaña caja.

+ + +

Propiedad: z-index

+ + +

Valor: Se aplican valores +numéricos, de forma que un valor más alto indica +que el elemento está por encima de los demás que +tengan valor más bajo o que no tengan establecida propiedad +de profundidad

+ + +
+

Ejemplo:

+ + +
+
+ + +
+ + +
+

<div id="salmon" style="position:relative; +background-color: rgb(255, 204, 204); border: thin solid rgb(0, 51, +102); width:220px; +height:200px; z-index:1">
+ + +
+ + +<div id="naranja" style="position:absolute; margin-left:40px; +margin-top: 40px; background-color: rgb(255, 221, 119); border: thin +solid rgb(255, 170, 102); +width:340px; height:170px; z-index:2"></div>
+ + +</div> +
+ + +

+ + +
+ + +
+ + +

 

+ + +
+Actividad 94 + + + +
+ +
+ + + diff --git a/html2005/estilos/css2.html b/html2005/estilos/css2.html new file mode 100644 index 0000000..1b0ef53 --- /dev/null +++ b/html2005/estilos/css2.html @@ -0,0 +1,825 @@ + + + + + + CSS - Primeros pasos + + + + + + + + + + + + +
+

Estilos>>Primeros pasos

+ +
+ +
+ +
+
+ +
+ + +
+ +

Para introducirnos en el mundo de las CSS iremos presentando +la información en pequeños bloques, +acompañados de un ejemplo que muestre el resultado. En +muchos casos les seguirá una práctica muy simple +que permita aplicar lo expuesto. La recomendación +es que vayas paso a paso y que, en cuanto tengas cierta seguridad, +experimentes ampliando el ejercicio propuesto con elementos similares +intentando prever los resultados que vas a obtener. Si lo haces +así es posible que en algún momento te encuentres +con que no todo sale como pretentes, pero no te preocupes porque lo +más probable es que algo más adelante encuentres +la respuesta al problema que se te ha planteado. 

+ +

Sintaxis básica

+ +

La sintaxis general de cualquier declaración de +estilo, va a +estar compuesta por tres elementos:

+ +

selector +{propiedad:valor}

+ +

donde selector va a ser, básicamente, el elemento +html que deseamos definir, la propiedad el atributo que queremos +modificar, apareciendo por último el valor que deseamos +asignarle al atributo. La propiedad se separa del atributo mediante dos +puntos y ambos se encierran entre llaves. Aunque no es imprescindible +cuando sólo hay una propiedad es conveniente +añadir un punto y coma al final de cada par +propiedad / valor (nos será muy útil para +facilitar la +lectura cuando se vayan complicando algo más las +especificaciones ya que entonces sí que es necesario +utilizar el punto y coma como separador)

+ +
+

Cuando los +valores requieren especificar un tipo de unidad, esta se indica a +continuación del valor numérico, sin espacio de +separación: 1cm sería una notación +correcta, mientras que 1 cm no lo sería.

+ +
+ +

El editor CSS de N|VU

+ +

Verás que constantemente se hará +referencia a los códigos con los que se obtiene un +determinado efecto. Es conveniente que te vayas familiarizando con +ellos, pero al principio te resultará de gran ayuda la +utilización del editor de estilos que integra N|VU, al que +puedes acceder desde la opción de menú herramientas +editor css

+ +

Ver vídeo de ejemplo

+

+

+ Aunque posteriormente veremos otras formas más eficientes + vamos a empezar a familiarizarnos con el editor mediante la + creación de hojas de estilo internas para lo que seguiremos + estos pasos

+
    + +
  1. Pulsar el botón style
    2. + +
  2. Crear hoja de estilo
    3. + +
  3. Pulsar regla
    4. + +
  4. Indicar la clase, tipo o identificador. Para que la regla +afecte a un elemento html habrá que poner su nombre, sin los +ángulos.
    5. + +
  5. Pulsar crear regla de +estilo
    6. + +
  6. Utilizar las pestañas para indicar los atributos +y valores aplicables.
    7. + +
+ +
+Actividad 76 + + +
+ +

Selectores de tipos

+ +

El selector más sencillo es el que denominamos de +tipo. Se refiere a una etiqueta definida en el lenguaje HTML. Su gran +ventaja será que con una única +modificación en una hoja de estilos podremos modificar la +apariencia de todos las páginas de un sitio al variar la +presentación de un determinado tipo.

+ +

Ej: body {color:white}

+ +

Para cada selector podremos establecer más de una +propiedad. Para +separarlas utilizaremos el punto y coma, siendo habitual para favorecer +la legibilidad, que cada propiedad se escriba en un renglón.

+ +

Ver +ejemplo 

+ +
+Actividad 77 + + +
+ +

Selector universal

+ +

Se representa mediante el asterisco (*) y se refiere a +cualquier elemento del documento HTML. Su +utilización está muy relacionada con las clases y +selectores ID, pero suele omitirse.

+ +

Agrupando selectores

+ +

Si queremos aplicar una propiedad común a varios +selectores sin +necesidad de tener que definirla en cada caso podemos agruparlos +listándolos separados por comas y haciendo una +definición común para +todos ellos.

+ +

Ej.: h1,h2,h3 {color:blue}

+ +

Ver +ejemplo

+ +
Actividad 78 + + +
+ +

Selectores contextuales

+ +

Ejemplo esquemático de relaciones de herencia en una pagina html

+ +

La imagen que aparece a la izquierda corresponde a un ejemplo +esquemático de la organización de los elementos +en una +página html.

+ +

Se puede observar cómo determinados elementos se +encuentran "anidados" dentro de otros.

+ +

Esta situación genera unas relaciones que pueden +calificarse +de familiares (de hecho, la nomenclatura para indicarlas +utilizará los términos padre, hijo, ascendiente y +descendiente entre otros).

+ +

Vamos a ver a continuación algunos ejemplos de lo +que +significa esta jerarquía en la organización de +los +elementos de una página html para lo que +podremos guiarnos +por el +siguiente +esquema de relaciones:

+ +

 
+ +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
RelaciónDescripción
Un elemento es padre de +otro si...El segundo elemento se encuentra directamente entre la +apertura y el cierre de las etiquetas del elemento padre.
+ +Ej: <p>Los +<strong>rumiantes</strong> son +<em>mamíferos</em>
+ +El elemento <p> es padre de <strong> +y de <em>
Un elemento es hijo de +otro si...La relación anterior es +recíproca, por lo que +los elementos <strong> +y <em>> del +ejemplo +son hijos del +elemento <p>
Un elemento es ascendiente +de otro si...Si el segundo se encuentra entre las etiquetas de +apertura y cierre del primero (aunque sea de forma indirecta).
+ +Ej: <div>
+ +<p>Los +<strong>rumiantes</strong> son +<em>mamíferos</em>
+ +</div>
+ +El elemento <div> es +ascendiente  de <p> +de <strong> y de +<em>
Un elemento es descendiente +de otro si...Está incluido, directa o indirectamente, +dentro de +otro elemento. En el ejemplo anterior <em> +es +desdendiente de <p> y +también de <div>
Un elemento es adyacente +a otro si ... Comparte el mismo padre y, además se +encuentra inmediatamente consecutivo al anterior.
+ +Ej: <p>Los +<strong>ungulados</strong> son +<em>mamíferos</em> con +<em>pezuñas</em>
+ +En este ejemplo sólo el primer <em> +sería adyacente a <strong> +ya que el segundo, +aunque tiene el mismo padre ya no es inmediatamente posterior.
+ +

Los patrones para indicar estas relaciones para elaborar los +selectores serían los siguientes:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PatrónUtilización
x yPara apuntar hacia cualquier elemento del tipo +y que sea descendiente de un +elemento del tipo x
x > yPara referirnos a cualquier elemento +del tipo y que sea hijo de un +elemento del tipo x
x + y Para identificar cualquier elemento del tipo y +que sea adyacente a un elemento +del tipo x
+ +

Teniendo en cuenta estas relaciones podemos realizar una +selección muy específica de elementos del +documento para +aplicarles un determinado estilo. Podríamos, por ejemplo, +querer que +los fragmentos que estuvieran enfatizados mediante la etiqueta +<em> aparecieran en color verde. Pero +podríamos ser incluso más +específicos indicando que sólo queremos que +aparezcan en color verde +los fragmentos enfatizados que formen parte de una lista. Esto lo +haríamos colocando primero el selector li y, a +continuación separado +por un espacio, el selector em para luego especificar las propiedades

+ +

Ej.: li em {color: green}

+ +

Ver +ejemplo

+ +
Advertencia importante: +La versión 6 de Internet Explorer sólo +es capaz de interpretar  correctamente el selector +contextual que utilizamos para apuntar hacia un +descendiente. Aunque posteriormente veremos alguna forma de corregir +este error tenlo en cuenta si intentas crear algún selector +para elementos hijos o adyacentes, que sí +funcionarán correctamente en los navegadores Mozilla, +Firefox u Opera.
+ +
+Actividad 79 + + +
+ +

Selectores basados en atributos

+ +

Si la posibilidad de utilizar selectores contextuales aporta +una gran flexibilidad, todavía es mucho mayor la que nos +brinda la posibilidad de decidir que un estilo se aplicará a +aquellos elementos que cumplan determinados atributos.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PatrónUtilización
x[atributo]Para apuntar hacia cualquier elemento del tipo +x que cuente con un determinado atributo (independientemente del valor +que tenga el atributo)
x[atributo="valor"]Para referirse a cualquier elemento del tipo x +que cuente con un +determinado atributo cuyo valor sea el especificado
x[atributo~="valor"] Algunos elementos pueden admitir varios valores +separados por espacios para un atributo. Este patrón nos +sirve para identificar a cualquier elemento +del tipo x que cuente con un +determinado atributo alguno de cuyos valores sea el especificado.
+ +
Al igual que ocurría en el +caso de los selectores +contextuales no existe soporte para este tipo de selectores en las +versiones iguales o inferiores a la 6 de Internet Explorer.
+ +
+ +
+Actividad 80 + + +
+ +

Clases

+ +

El selector class nos permite definir diferentes estilos para +el mismo elemento HTML. El ejemplo siguiente supondría la +posibilidad de tener dos tipos de párrafo en el documento: +uno en azul y otro en rojo, en función de la clase que cada +uno lleve indicada. Para establecer la clase añadimos un +punto y el nombre que le adjudicamos a la clase a +continuación del selector y antes de iniciar las propiedades.

+ +

Ej.: p.azul {color: blue} +p.rojo +{color: red}

+ +

Ver +ejemplo

+ +
+

Se puede aplicar más de una +clase a un elemento html. Al aplicar las clases lo haremos +separándolas por un espacio.

+ +

Ej.: <p class="azul +centrado">Texto</p>

+ +
+ +

Es muy frecuente que la definición de las clases se +haga sin +ligarlas a una etiqueta concreta. En el ejemplo anterior +podría +omitirse la referencia al elemento p y eso haría que las +características de la clase se aplicaran a cualquier +elemento al que se +le aplicara. En este caso el selector empieza con un punto seguido del +nombre de la clase. 

+ +

Ej.: .azul {color: blue} +.rojo {color: +red}

+ +

El efecto será +equivalente +si se utiliza el selector universal: *.azul {color: blue} *.rojo +{color: +red}

+ +

Ver +ejemplo

+ +

Para crear una regla de tipo clase en el editor de CSS +utilizaremos la opción estilo +con nombre y escribiremos el nombre sin precederlo con el +punto (el programa se encargará de ello).

+ +

Crear una clase con el editor de CSS

+ +

Una vez definidas las clases, la aplicación de las +mismas en N|VU se limita a marcar el fragmento que deseamos +modificar arrastrando con el ratón y elegir la clase +correspondiente en el listado que aparece en la segunda barra de +formato. Con el procedimiento de pinchar arrastrar definiremos zonas +del documento que no tienen que coincidir con un elemento completo, +como podía ser un párrafo, lo cual hace que el +programa genere una etiqueta span que englobe +los fragmentos seleccionados. 

+ +

Si lo que realmente queremos es aplicar una clase a un +elemento, por ejemplo un párrafo, una lista ordenada +completa, un contenedor genérico, etc, es preferible que lo +seleccionemos situándonos sobre cualquier punto del mismo y +marcando la etiqueta que lo identifica en la barra de estado (la que +aparezca en último lugar corresponderá al punto +en que nos encontramos). Una vez hecha esta marca podemos aplicar la +clase:

+ + + +

Pseudoclases

+ +

Las pseudoclases se utilizan para particularizar algunos +efectos de determinados selectores en algunas situaciones especiales. +Uno de los grupos que se aplica más frecuentemente es el que +tiene que ver con la etiqueta <a> para marcar diferentes +presentaciones de los enlaces.

+ +

La sintaxis es ligeramente diferente de la general: selector:pseudoclase +{propiedad : valor}

+ +

Pseudoclases +relacionadas con los vínculos

+ +

Su función es cambiar la apariencia +según el estado del vínculo. Existen cuatro +tipos:

+ + + +

Ver +ejemplo

+ +
+

El orden en el que se deben especificar estas pseudoclases en +las hojas de +estilos para que tengan efecto es el que se ha utilizado para +describirlas. Esto tiene su lógica debido a que, en caso de +haber alguna contradicción entre dos selectores siempre se +aplica el enumerado en último lugar: por ello el que se +refiere al enlace activo debe ser el último para que se +eviten variaciones en la presentación mostrándose +las propiedades del enlace visitado(visited) o con el ratón +encima (hover). Por el mismo motivo la pseudoclase hover debe aparecer +detras de visited para que la apariencia del enlace pueda modificarse +al pasar el ratón sobre el mismo, independientemente de que +se haya visitado o no el enlace. Por último, visited +tendrá que ir después de link puesto que de lo +contrario se aplicaría la apariencia del enlace no visitado +aunque ya se hubiera estado en la página de destino.

+ +
+ +

Existen también los llamados pseudoelementos que +verás en la sección dedicada al texto pero +todavía podemos considerar la pseudoclase que se refiere al +primer elemento hijo first-child +que nos +permitiría obtener, por ejemplo un efecto similar al que +presentan algunas ediciones impresas cuando el primer +párrafo de un capítulo se muestra en un +tamaño más grande o en itálica.

+ +

Ver +ejemplo

+ +
+Actividad 80 + + + + + + +
+ +

El selector id

+ +

Mientras que el selector clase puede aplicarse a varios +elementos +del mismo o diferente tipo en una página podemos crear +también un +selector id para diferenciar elementos específicos que +añadirán alguna +característica diferente de las que tienen los elementos de +su clase. +El nombre del selector se inicia con el signo # seguido del nombre del +identificador.

+ +

Ej: #rojo {color: red}

+ +

Ver +ejemplo

+ +

Para crear una regla de tipo id en el editor de CSS +utilizaremos la opción estilo +aplcado a todos los elementos coincidentes con el siguiente selector y +escribiremos el nombre empezando por el signo #

+ +

Crear un selector ID con el editor de CSS

+ +Una vez definidos los selectores ID , la +aplicación de los +mismos habrá que realizarla seleccionando la etiqueta +correspondiente al elemento en la barra de estado y pulsando el +botón derecho para elegir entre las posibilidades que se +muestren en la opción id +del menú desplegable. +

+

+ +

Comentarios

+ +

Puede venir muy bien incluir comentarios que nos sirvan para +aclarar +o recordar algún aspecto de las especificaciones que +escribimos en una +hoja de estilo. Para hacerlo lo iniciaremos con /* +y lo finalizaremos +con */

+ +

Ej:

+ +

+/* pongo la primera línea +del párrafo con ID=muestra en versales de color azul*/

+ +

+p#muestra:first-line {color: #0000FF; +font-variant: small-caps}

+ +

+
+ + diff --git a/html2005/estilos/css3.css b/html2005/estilos/css3.css new file mode 100644 index 0000000..e6bd0b2 --- /dev/null +++ b/html2005/estilos/css3.css @@ -0,0 +1,13 @@ +/* Generated by CaScadeS, a stylesheet editor for Mozilla Composer */ + + .azul { color: rgb(51, 51, 255); + } + + .blancoazul { color: rgb(255, 255, 255); + background-color: rgb(0, 0, 153); + } + + .ejempcss { color: rgb(91, 102, 150); + font-weight: bold; + } + diff --git a/html2005/estilos/css3.html b/html2005/estilos/css3.html new file mode 100644 index 0000000..1a10a77 --- /dev/null +++ b/html2005/estilos/css3.html @@ -0,0 +1,1625 @@ + + + + + + + + + + + + + + + + + + + + + + CSS- Aplicar estilos + + + + + + + + + + + + + +
+

Estilos>>Aplicar estilos

+ +
+ +
+ +
+
+ +
+ + +
+ +

¿Cómo aplicar +una hoja de estilos?

+ + + +

Ya conocemos la sintaxis básica para construir +reglas de estilo. Ahora vamos a ver las tres formas en las que podemos +situar estas reglas de estilo para que  el +navegador lea su contenido y utilice sus especificaciones para +darle forma al documento. 

+ + + +

Hoja de estilo interna

+ + + +

Cuando un estilo es propio de un único documento +podría utilizarse una hoja de estilos interna, mediante la +creación de una sección <style> +dentro de la cabecera del documento. Este es el método que +se ha utilizado para mostrar los ejemplos particularizados que puedes +consultar en las ventanas emergentes.

+ + + +

Ten en cuenta que con este tipo de inclusión +perdemos de vista una de las finalidades prioritarias de las hojas de +estilo, ya que se mezcla en el mismo documento html las +especificaciones referidas al formato con las marcas que +sirven para estructurar el contenido. Sin embargo puede ser un primer +paso para que compruebes la potencia de las hojas de estilo. 

+ + + +

Nota: Normalmente los +navegadores ignoran las etiquetas que desconocen, por lo que un +navegador antiguo que no soporte estilos ignorará el +contenido de <style>, pero +mostrará es +probable que muestre en pantalla el +contenido de la sección. Para evitarlo podemos utilzar las +etiquetas de comentario de HTML tal como se muestra en el siguiente +fragmento de código. 

+ + + +
+<head>
+ + + +<style type="text/css">
+ + + +<!--
+ + + +hr {color: sienna}
+ + + +p {margin-left: 20px}
+ + + +body {background-image: url("images/back40.gif")}
+ + + +-->
+ + + +</style>
+ + + +</head> +
+ + + +

A +continuación tienes un ejemplo de código para la +inclusión de un estilo global en una página. +Puedes ver el resultado +en una ventana +independiente. (Ten en cuenta que se podían haber utilizado +otras etiquetas y otras propiedades de las mismas)

+ + + +
<html>
+ + + +<head>
+ + + +<title> Título de la página +</title>
+ + + +<style +type="text/css">
+ + + +<!--
+ + + +body {background: black; font-size: 12px; font-family: +Arial,Helvetica,sans-serif; color: yellow; text-align:justify; +margin-left: 0.5in; margin-right: 0.5in}
+ + + +H1 {background: aqua; font-size: 16px; font-weight: bold; color: +orange}
+ + + +H2 {font-size: 14px; font-weight: bold; color: white}
+ + + +-->
+ + + +</style>
+ + + +</head>
+ + + +<body>
+ + + +Contenido y etiquetas del cuerpo de la página
+ + + +</body>
+ + + +</html>
+ + + +

Como has visto en el ejemplo, la sintaxis se ha modificado al +incluir el estilo en la cabecera:

+ + + + + + + +

La +inclusión del estilo se hará después +de la etiqueta de cierre del título </title>
+ + + +

+ + + +
+Actividad 82 +

Crea una +página con varios +párrafos de texto. Puedes utilizar el mismo texto +que usamos en la actividad +48

+ + + + + + + +
+ + + +
AtenciónEl +editor de CSS de N|VU puede tener en ocasiones algún +comportamiento imprevisible y no guardar las reglas que +hayamos +ido creando. Se recomienda como método de trabajo que, antes +de +empezar a crear estilos, guardemos el documento html. Además +es preferible que, si hemos hecho alguna +modificación en el +documento, lo guardemos antes de empezar a trabajar con el editor CSS y +que volvamos a guardarlo tras cerrarlo.
+ + + +

Hoja de estilo externa

+ + + +

Aunque iniciamos la exposición de posibilidades con +las hojas de estilo internas realmente lo correcto habría +sido iniciarla con las hojas de estilo externas, ya que ésta +es la forma ideal de aplicar un estilo a varias páginas de +forma simultánea. De hecho debería ser la forma +prioritaria puesto que permite separar claramente el contenido y la +estructura, que van el el cuerpo del documento html, del formato que +se aplicará desde un archivo +externo de hoja de estilos.

+ + + +

Para hacerlo habrá que utilizar en cada documento +la etiqueta <link> situada en +la cabecera del documento, +después de la etiqueta <title>

+ + + +
<head>
+ + + +<title>página para +mostrar la situación de los estilos<title>
+ + + +<link rel="stylesheet" type="text/css" +href="miestilo.css">
+ + + +</head> +
+ + + +

Gracias a este enlace el navegador leerá las +especificaciones de la hoja de estilos y dará formato al +contenido de acuerdo a ellas.

+ + + +

Así pues hay que seguir dos pasos:

+ + + +
    + + + +
  1. Crear un archivo que recoja las reglas de estilo
    2. + + + +
  2. Enlazar cada página a la que queramos aplicarle +el estilo con el archivo creado para que extraiga de él las +características.
    3. + + + +
+ + + +

Para realizar esta tarea podemos aprovechar una +función que +nos brinda el editor de CSS integrado en N|VU o bien construir +directamente el archivo con un editor de texto plano. 

+ + + +

Seguramente te habrás asustado un poco pensando en +tener que +escribir las reglas a mano, ya que supone aprender los diferentes tipos +de selectores y sus valores y un aumento en las probabilidades de +equivocarte. Tienes una parte de razón pero, en cuanto +tengas +una cierta práctica verás como usar un editor +externo te +resulta muy útil: aunque inicies la creación con +el +asistente gráfico y sea éste el que se encargue +del +trabajo más duro el repaso con el editor externo te +resultará muy cómodo.

+ + + +
    + + + +
  1. Crear un archivo de texto con cualquier editor de texto +plano, salvándola en formato texto con la +extensión que se desee, aunque habitualmente suele +utilizarse la extensión .css. En dicho archivo +especificaremos el contenido de las diferentes normas de estilo +utilizando la sintaxis básica selector +{propiedad:valor}
    2. + + + +
  2. Enlazar cada página a la que queramos aplicarle +el estilo con el archivo creado para que extraiga de él las +características.
    3. + + + +
+ + + +
+

Para crear un archivo de definiciones que recogiera las +características del ejemplo anterior +escribiríamos:

+ + + +

body {background: black; font-size: 12px; +font-family: +Arial,Helvetica,sans-serif; color: yellow; text-align:justify; +margin-left: 0.5in; margin-right: 0.5in}

+ + + +

h1 {background: aqua; font-size: 16px; +font-weight: bold; color: orange}

+ + + +

h2 {font-size: 14px; font-weight: bold; color: +white} +

+ + + +

Observa +que el archivo no incluye ninguna etiqueta en el formato habitual. Se +trata simplemente de un archivo de texto con las propiedades +atribuidas a cada elemento.
+ + + +
+ + + +Una vez definidas las propiedades guardaremos el archivo en formato +texto con el nombre que queramos y la extensión +css. Por +ejemplo, estilodeprueba.css

+ + + +

El paso 2 es incluir en la cabecera de la página, +detrás de la etiqueta </title> +la etiqueta +<link +rel="stylesheet" href="estilodeprueba.css" type="text/css"> +
+ + + +
+ + + +El siguiente ejemplo presenta la misma +apariencia que vimos al aplicar el estilo en la página, pero +está creado utilizando este método.
+ + + +

+ + + +
+ + + +

+ + + +
Actividad 83 + + + + +
+ + + +

 

+ + + +
Actividad 84 + + + + +
+ + + +

Combinar hojas de estilo externas en +una nueva

+ + + +

Si ya tenemos definida una hoja de estilos y deseamos +reutilizarla añadiendo algunas modificaciones podemos crear +una nueva hoja de estilos en la que importemos el contenido de la que +ya teníamos y añadamos las nuevas reglas. Puede +ser por ejemplo, el caso de un centro en el que se utilizara una hoja +de estilos genérica y cada nivel o departamento aprovechara +esas especificaciones y añadiera las suyas propias para +personalizar una zona de la web.

+ + + +
+

Para importar una hoja de estilos ya creada lo debemos indicar +en la primera línea de la nueva hoja (o en la primera y +sucesivas si estamos importando varias hojas) utilizando la sintaxis:

+ + + +

@import url(colegio.css);

+ + + +

/* A continuación añadimos +los selectores, clases +y pseudoclases que modificamos con sus propiedades correspondientes */

+ + + +

h1 { font-style : italic }

+ + + +

...

+ + + +Lógicamente, al definir la url en la que +está +situada la hoja de estilos habrá que utilizar la ruta +relativa dentro del sitio web.
+ + + +
+ + + +
Actividad 85 + + + + +
+ + + +

Estilos en línea o incrustados

+ + + +

Aunque cuando consultes documentación +encontrarás la denominación estilo en +línea para el que se aplica +directamente sobre un elemento al crear el código HTML hemos +incluido también la denominación estilos +incrustados que les aplica N|VU. +Evidentemente es el procedimiento menos recomendable, ya que perdemos +practicamente todas las ventajas ofrecidas por las hojas de estilo al +mezclar el contenido y la presentación. La única +ventaja que puede presentar respecto al código HTML es que +permite la especificación de un abanico mucho mayor de +propiedades.

+ + + +

Menu contextual para incrustar estilosLa forma de insertar +un estilo incrustado es seleccionar la etiqueta a la que queremos +afectar en la barra de estado y pulsar el botón derecho para +elegir estilos incrustados. Esta opción +desplegará un submenú que corresponde a cada una +de las cinco pestañas del editor de CSS que ya conocemos.

+ + + +

La sintaxis que se utiliza para los estilos incrustados es +ligeramente diferente de la que hemos utilizado hasta ahora para las +hojas de estilo externas e internas. Añadimos style +como atributo de la etiqueta que deseamos +modificar y las propiedades y valores se encierran entre comillas en +lugar de entre llaves. Así pues, si tuviéramos +que crear un estilo incrustado manualmente lo haríamos de la +siguiente forma:

+ + + + + + + +

Ver +ejemplo

+ + +

Panel de extracción de estilos incrustadosComo +era de esperar, la aplicación de las reglas de cascada ha hecho +que prevaleciera el estilo más particular, de forma que el +párrafo con el estilo incrustado ha tomado las +características que se empleaban en el mismo en caso de que +entraran en contradicción con las del estilo interno o la hoja +externa si la hubiera.

+ + +

Ya hemos indicado que el estilo incrustado es poco recomendable +porque vuelve a juntar el contenido con la presentación, pero +siempre podemos recurrir a la última opción del +menú: extraer y crear estilo genérico. +Con ello obtendríamos una hoja de estilo interna que, a su vez, +podríamos exportar desde el editor de CSS para convertir en +externa, de forma que volveríamos a tener completamente +separados el contenido y el formato de presentación.

+ + +

La primera vez que utilices este panel aparecerá marcada +por defecto  la opción de que el estilo se le aplique solo a este elemento. +El efecto que conseguims es que el programa incluirá un +identificador ID en el elemento y creará una regla +aplicable sólo a ese elemento concreto. Podremos crear nosotros +el nombre del identificador o dejar que el programa lo genere +automáticamente, aunque será preferible hacerlo +nosotros para facilitar las revisiones posteriores poniendo un nombre +que tenga cierto sentido.

+ + +

Lo habitual, sin embargo, será crear una regla que se aplique +a varios elementos simultáneamente, bien sea creando una clase a +la que tendremos que nombrar, bien haciendo que se aplique a todos los +elementos del mismo tipo que aquel del que estamos extrayendo la regla, +o bien aplicando la pseudoclase :hover para que el estilo se aplique a los elementos o clases cuando el ratón pase sobre ellos

+ + +
+Actividad 86 +

Vamos a utilizar el mismo texto +que creamos en la actividad 82 aprovechando el trabajo de marcado que allí habíamos hecho.

+ + + + + + + +
+ + +

+ + + +

¿Pueden enlazarse varias +hojas de estilos con la misma página?

+ + + +

La respuesta es, sencillamente, sí. Basta con +repetir la etiqueta link tal como se ha visto poniendo en cada caso el +nombre de la hoja con la que se quiere enlazar. Ahora bien, +habrá que tener en cuenta que si hay +contradicción entre las definiciones de algún +elemento, prevalecerá la hoja a la que se haya nombrado en +último lugar al crear los enlaces. Además, sobre +las hojas enlazadas tendrán prioridad las hojas de estilo +internas y, sobre ellas, los estilo en línea aplicados a +algún elemento particular.

+ + + +

Por ejemplo, si tenemos nuestra página enlazada +con la hoja de estilos genérica de la web del centro, a +continuación la hemos enlazado con una hoja de estilos que +se está usando para el departamento, tenemos una hoja de +estilos interna definida sobre la página y hay +algún elemento al que le hemos aplicado un estilo en +línea pasaría algo similar a lo siguiente:

+ + + +

La hoja de estilos del centro tiene definidas las propiedades +siguientes para el selector h3:

+ + + +

h3 { color: red; +text-align: +left; font-size: 10pt }

+ + + +

La hoja del departamento tiene sin embargo definido el +selector h3 de la siguiente forma:

+ + + +

h3 { text-align: right} +

+ + + +

La hoja de estilos interna especifica:

+ + + +

h3 {color: green; +font-size: +20pt}

+ + + +

Y hemos especificado en línea sobre una etiqueta h3

+ + + +

<h3 +style="font-size: +10pt}

+ + + +

El resultado final será:

+ + + + + + + +

Aplicar estilos a elementos o +secciones de un documento

+ + + +

Si en vez de a un elemento quiero aplicarle un estilo a un +grupo de elementos puedo englobar dichos elementos entre las etiquetas +<div> y </div> +y aplicar allí el +estilo que teníamos definido como clase, tal como se ve en +el siguiente ejemplo. (o bien mediante un estilo en línea)

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Este código......se ve así
+ + +

<div class = +"azul">
+ + + +<p> Primer párrafo </p>
+ + + +<ul>
+ + + +<li>Elemento de lista</li>
+ + + +<li>Otro elemento</li>
+ + + +</ul>
+ + + +<p>Otro párrafo</p>
+ + + +</div>

+ + + + 		+ + +
Primer párrafo + + +
    + + + +
  • Elemento de lista
    • + + + +
  • Otro elemento
    • + + + + + +
+ + + +Otro párrafo
+ + + +
+ + + +

Puedo intercalar, en una zona delimitada por la +etiqueta <div> +algún estilo específico +aplicado a un elemento en concreto, como se muestra a +continuación. En este caso se ha utilizado un estilo en +línea para modificar el selector <p> +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Este código......se ve así
+ + +

<div class = +"azul">
+ + + +<p> Primer párrafo de la zona +azul</p>
+ + + +<p style = "color: red"> Este párrafo va en +rojo en medio de una zona azul</p>
+ + + +<p>Otro párrafo de la zona +azul</p>
+ + + +</div>

+ + + + 		+ + +
Primer párrafo de la +zona azul + + +

Este párrafo va en +rojo en medio de una zona azul

+ + + +Otro párrafo de la zona azul
+ + + +
+ + + +
+ + + +

Si lo que pretendo es aplicar el estilo a una zona menor que +la correspondiente a un elemento en bloque, por ejemplo, una palabra +dentro de un párrafo utilizaré la etiqueta +<span> y su cierre </span> +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Este código......se ve así
+ + +

<p> En este +párrafo señalo <span +style="font-size:16px; font-weight: bold; color:orange"> +esta</span> palabra en tamaño de 16 +píxeles, en negrita y de color naranja</p>

+ + + + 		+ + +

En este párrafo señalo esta +palabra en tamaño de 16 píxeles, en negrita y de +color naranja

+ + + +
+ + + +
+

Recuerda +que las hojas enlazadas figuran en el último lugar de +prioridad y que, sobre ellas se superpondrán la +definición de estilo que hagamos sobre la propia +página y, en el primer lugar de prioridad, las +modificaciones que realicemos para una etiqueta en particular.

+ + + +

Además, a este orden de preferencia hay que +añadirle que, si el usuario tiene especificado un estilo en +su navegador este tendrá preferencia sobre los estilos +creados por el autor cuando haya contradicción. Por otra +parte, el programa navegador (al que se denomina también +Agente de usuario) puede imponer su estilo si así lo tiene +definido en las configuraciones.

+ + + +
+ + + +

Diferentes medios... diferentes +estilos

+ + + +

Probablemente recuerdes que, cuando se habló de los +colores del texto se recomendaba tener en cuenta el destino final que +pretendíamos adjudicarle a una página web. Escribir en blanco sobre fondo azul +marino es una combinación elegante y muy relajada para la +vista cuando visualizamos la página en pantalla, +pero si queremos que el contenido se imprima... el color blanco del +texto va a dejar poca huella sobre el folio en blanco.

+ + + +

Las hojas de estilo vienen en nuestra ayuda para casos +similares a éste, permitiéndonos especificar que +un estilo tenga una apariencia cuando el documento se muestre en una +pantalla y otra diferente cuando se imprima. Para hacerlo tendremos que +recurrir a la directiva @media. Tanto si +se trata de una hoja de estilos externa, como interna o con estilos en +línea, cuando incluimos una regla @media las propiedades que +se definan a continuación se aplicarán cuando el +documento se muestre en el tipo de medio especificado. La +aplicación más directa la encontraremos al +definir estilos para impresión +(@media print) y para pantalla +(@media screen)

+ + + +
+

<style type="text/css">

+ + + +

<!--
+ + + +/* Definimos las reglas de estilo de la forma habitual.*/

+ + + +

body { +background-color: #000099; }
+ + + +p { font-family: Arial, Helvetica, sans-serif; font-size: 14pt; color: +#FFFFFF;}
+ + + + +

+ + + +

/*Y ahora indicamos las +características +para +imprimir*/
+ + + +

+ + + +

@media +print {

+ + + +

body { +background-color: #FFFFFF; }

+ + + +

p { font-family: "Times +New Roman", Times, +serif; font-size: 10pt; +color: #000000; }

+ + + +

}

+ + + +

/*Podríamos seguir especificando otros +selectores o +clases de aplicación general*/
+ + + +-->

+ + + +

</style>

+ + + +

Ver +ejemplo

+ + + +
+ + + +
+

Cuando +creamos estilos para un tipo de medio la sintaxis se modifica como si +creáramos una especie de "superselector": todos los +selectores aplicables a ese medio se encierran entre dos llaves +precedidas por la regla @media y el tipo de +medio, tal como se ha +marcado en la anterior muestra de código.

+ + + +

No hemos especificado @media screen +porque estamos trabajando +normalmente para pantalla y al no haber especificado nada los estilos +se aplicarán en el dispositivo que muestre la +página. (realmente lo único que +necesitábamos era diferenciar la presentación del +color de fondo y el tipo de letra cuando se imprimiera)

+

Importante: Aunque el editor CSS de N|VU dispone de +un botón @media no funciona, por lo que si necesitamos crear un +conjunto de reglas bajo este superselector tendremos que hacerlo +editando manualmente el archivo CSS o el estilo en línea.

+ + + +
+ + + +

Pero no solo podemos especificar la pantalla y la +impresión como medios para los que especificar estilos. El +listado completo de medios actualmente establecidos por el W3C es el +siguiente:

+ + + +
+ + + +
all
+ + + +
Cualquier tipo de dispositivo .
+ + + +
aural
+ + + +
Referido a navegadores para personas con deficiencias +visuales que utilizan sintetizadores de voz para realizar una lectura +de los contenidos.
+ + + +
braille
+ + + +
Dispositivos tactiles basados en lenguaje braille.
+ + + +
embossed
+ + + +
Impresoras en braille.
+ + + +
handheld
+ + + +
Dispositivos portátiles, caracterizados por una +pantalla pequeña, generalmente monocromos y con limitado +ancho de banda.
+ + + +
print
+ + + +
Impresoras o documentos mostrados en pantalla en forma de +visualización previa a la impresión.
+ + + +
projection
+ + + +
Presentaciones proyectadas o impresión de +transparencias.
+ + + +
screen
+ + + +
Referido, fundamentalmente a pantallas de ordenador.
+ + + +
tty
+ + + +
Utilizado para referirse a medios que presentan la +información con un tamaño fijo de letra, como por +ejemplo los teletipos.
+ + + +
tv
+ + + +
Referido a dispositivos de tipo televisión, +caracterizados por una menor resolución que las pantallas de +ordenador, pantallas con capacidad limitada de desplazamiento y +presencia de sonido.
+ + + +
+ + + +

Cada uno de estos medios puede disponer de algunas propiedades +especificas, que se pueden consultar en la documentación del +W3C. Se puede consultar, por ejemplo, la traducción de las +especificaciones del W3C para hojas de estilo auditivas que es +una de las mas desarrolladas.

+ +
+ + + diff --git a/html2005/estilos/css4.html b/html2005/estilos/css4.html new file mode 100644 index 0000000..47697f1 --- /dev/null +++ b/html2005/estilos/css4.html @@ -0,0 +1,463 @@ + + + + + + CSS - Creando estilos para el texto + + + + + + + + + + + + + +
+

Estilos>>Estilos para el texto

+ +
+ +
+ +
+
+ +
+ + +
+ + +

Vamos a hacer un recorrido por las propiedades que afectan al +texto y su forma +de modificarlas mediante estilos.

+ +

Color

+ +

El atributo de color puede aplicarse al texto, pero +también a otros elementos de la página. Se puede +acceder a esta propiedad desde la pestaña texto del editor de CSS. Cuando +se aplique al color de fondo se encontrará en la +pestaña del mismo nombre.

+ +
+ + +
+ +
+ +

Propiedad: color +

+ +

Valores y ejemplos: Para nombrar un color +pueden utilizarse varios métodos:

+ + + +

Espaciado de letra

+ +

Podemos especificar una cantidad para aumentar o disminuir el +espaciado +entre las letras de un texto. Esta propiedad no está +disponible +en el editor de CSS de N|VU por lo que habrá que +introducirla +manualmente

+ +

Propiedad: letter-spacing +

+ +

Valores: Se pueden expresar +introduciendo un valor entero que indique la medida en pixels (px), +puntos (pt), pulgadas (in), centímetros (cm), anchura de la +letra eme (em) o altura de la letra equis mayúscula(ex). Se +utiliza el punto como separador decimal en lugar de la coma. Para +disminuir el espaciado se utilizan valores negativos

+ +
+

Ejemplos:

+ +Aumentado en 15 +píxeles
+ +Aumentado en 2pt
+ +Aumentado en 0.1in
+ +Aumentado en 0.3cm
+ +Aumentado en 1em
+ +Aumentado en 1ex
+ +Disminuido en 1px
+ +
+ +

Espaciado de palabras

+ +

Podemos especificar una cantidad para aumentar o disminuir el +espaciado entre las letras de un texto. Tampoco está +implementada en el editor de CSS lo cual nos obliga a introducirla +manualmente si la necesitamos.

+ +

Propiedad: word-spacing +

+ +

Valores: Se pueden expresar +introduciendo un valor entero que indique la medida en pixels (px), +puntos (pt), pulgadas (in), centímetros (cm), anchura de la +letra eme (em) o altura de la letra equis (ex). Se utiliza el punto +como separador decimal en lugar de la coma. Para disminuir el espaciado +se utilizan valores negativos

+ +
+

Ejemplos:

+ +Aumentado en 15 +píxeles
+ +Aumentado en 5pt
+ +Aumentado en 1in
+ +Aumentado en 0.7cm
+ +Aumentado en 2em
+ +Aumentado en 1ex
+ +Disminuído en +2px
+ +

Alineación

+ +

Podemos encontrar esta propiedad en la pestaña texto del editor de CSS.

+ +

Propiedad: text-align

+ +

Valores: Nos permite introducir todos los +valores de alineación soportados por el estándar +HTML 4.01 mediante left, center +right +y justify.

+ +

Ejemplos: Todos los +textos de este curso están diseñados con el +atributo justify para evitar el efecto denominado de "banderas" o +"gallardetes" provocado por la falta de ajuste del final o principio de +renglón respecto al margen.

+ +

Decoración

+ +

Podemos encontrar esta propiedad en la pestaña texto del editor de CSS.

+ +

Propiedad:text-decoration +

+ +

Valores y ejemplos: Se +especifican mediante las palabras reservadas none (ninguno), underline +(subrayado), overline +(superrayado), line-through +(tachado). +Aunque parezca un contrasentido uno de los más +útiles puede ser +el valor none al eliminar, por ejemplo, la decoración +subrayada de los vínculos. También se puede +utilizar el valor blink +(parpadeante), +pero prácticamente sólo es soportado por Netscape +y Mozilla mientras que Internet +Explorer 6, Konkeror 3.1.3 o incluso Galeón 1.3.9 que +está basado en el mismo +motor que Mozilla no lo soportan.
+ +

+ +

Sangría de primera +línea

+ +

También tendremos que teclearla si la necesitamos +porque por +el momento no está implementada en el editor de CSS.

+ +

Propiedad: text-indent

+ +

Valores: Se pueden expresar introduciendo +un valor entero que indique su medida en puntos (pt), pulgadas (in), +centímetros (cm), píxels (px) o porcentaje(%)

+ +
+

Ejemplos:

+ +

Este párrafo +tiene aplicado un sangrado de 45 puntos y por eso su primera +línea se inicia tras dejar un espacio en blanco al principio +del renglón.

+ +
+ +

 

+ +

Control de letra

+ +

Nos permite indicar si un elemento o fragmento se +mostrará tal como se escribe o con alguna +variación en las letras. Es otra de las propiedades no +incluida en el editor de CSS.

+ +

Propiedad: text-transform +

+ +

Valores: Aparte de none que es el +valor por defecto, podemos usar capitalize que escribe todas las +primeras letras en mayúsculas, uppercase +que muestra todo el texto en mayúsculas y lowercase que lo +presenta en minúsculas independientemente de cómo +lo hayamos escrito

+ +
+

Ejemplos:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Este texto... ...se ve así
Aquí aplicamos capitalize +

Aquí +aplicamos capitalize

+ +
+

En +este caso es uppercase

+ + 		+

+ + 		+

En este caso +es uppercase

+ +
Y éste es Lowercase +

Y +éste es Lowercase

+ +
+ +
+ +

 

+ +

Interlineado

+ +

En el editor de CSS la encontrarás como altura de línea en +la pestaña texto.

+ +

Propiedad: line-height

+ +

Valores: Se pueden expresar introduciendo +un valor entero que indique su medida en puntos (pt), pulgadas (in), +centímetros (cm), pixels (px) o porcentaje (%).

+ +
+

Ejemplos:

+ +

En esta +línea se ha empleado un interlineado del 200%, de forma que +presente una distancia doble a la habitual, respecto a la anterior y la +posterior .

+ +

En esta +línea se ha empleado un interlineado de 10 puntos. Como el +tamaño de la letra es también de 10 puntos se +puede comprobar que la parte superior de las letras llega hasta la base +del renglón anterior.

+ +
+ +

Pseudoelementos first-letter y +first-line

+ +

Como ya habíamos mencionado existen un par de +pseudoelementos que tienen que ver con el texto porque permiten +modificar la primera letra o el primer renglón de un +texto.  

+ +

Su utilización sigue la sintaxis selector:pseudolemento +{propiedad:valor} o bien selector.clase:pseudoelemento{propiedad:valor} +o selector#id:pseudoelemento{propiedad:valor} si +pretendemos aplicarlo a un selector con una clase o un identificador +específico.

+ +

Ver +ejemplo

+
+ + diff --git a/html2005/estilos/css5.html b/html2005/estilos/css5.html new file mode 100644 index 0000000..ac8e59c --- /dev/null +++ b/html2005/estilos/css5.html @@ -0,0 +1,436 @@ + + + + + + CSS: propiedades para fuentes + + + + + + + + + + + + +
+

Estilos>>Estilos para fuentes

+ +
+ +
+ +
+
+ +
+ + +
+ +

Fuentes

+ +

A continuación vamos a ver una serie de propiedades +que afectan a las fuentes que utilizamos para mostrar el texto y la +forma de modificarlas mediante estilos.En el editor +de CSS de N|VU podrás acceder a estas propiedades dentro de +la +pestaña texto, +aunque algunas propiedades no están implementadas.

+ +

Estilos de letra

+ +

Propiedad: font-style

+ +

Valores: Se puede utilizar normal o italic. +Permite alternar entre la presentación entre ambos tipos. +Existe un tercer tipo oblique pero la mayoría de los +navegadores la muestran igual que la itálica

+ +

Ejemplos: Letra normal Letra itálica +Letra oblicua

+ +

Variantes

+ +

Nos permite hacer que la fuente se muestre con todos los +caracteres en mayúsculas pero en un tamaño +más reducido. Esta propiedad no se incluye en el editor en +su +versión actual, por lo que habrá que introducir +el +código manualmente si se necesita

+ +

Propiedad: font-variant

+ +

Valores: normal o +small-caps +(mayúsculas pequeñas)

+ +
+

Ejemplos:

+ +

+aquí se ha aplicado small-caps a un texto escrito totalmente +en minúsculas. ESTE SERÍA EL +TAMAÑO NORMAL DE LAS MAYÚSCULAS DE ESTA FUENTE

+ +
+ +

Grosor de la letra

+ +

Propiedad: font-weight

+ +

Valores: El valor básico es bold +(negrita) por contraposición al valor por defecto que es +normal.

+ +

También pueden utilizarse dos valores relativos: bolder +(más gruesa) y lighter +(más +fina) que el grosor de fuente que los antecede.

+ +

Por último disponemos de una escala graduada desde +100 hasta 900 en intervalos de 100 en la que el valor normal +es el 400, y 700 el +equivalente a la negrita, siendo el resto grosores relativos con +respecto a éste. A pesar de que ésta sea la +especificación +la visualización en pantalla no es progresiva, como puedes +comprobar.

+ +
+

Ejemplos:

+ +

Letra bold

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
100200300400500600700800900
grosorgrosorgrosorgrosorgrosorgrosorgrosorgrosorgrosor
+ +
+ +

Este fragmento esta en grosor normal. Aquí se ha aplicado +bolder. Y +ahora hemos aplicado lighter y volvemos a "adelgazar" la fuente hasta +su +grosor normal

+ +
+ +

Tamaño de la fuente

+ +

Propiedad: font-size

+ +

Valores: Se pueden expresar introduciendo +un valor entero que indique su medida en puntos (pt), pulgadas (in), +centímetros (cm), píxels (px), anchura de la +letra eme (em) +o altura de la letra equis (ex). También se puede utilizar +un valor porcentual respecto al tamaño base que se utiliza +por defecto.

+ +

Por último podemos también indicar el +tamaño mediante palabras reservadas que indican los valores +relativos, de menor a mayor, respecto al valor por defecto que es el +medium: xx-small, x-small, +small, medium, +large, x-large, +xx-large

+ +

Una última posibilidad es utilizar las palabras +reservadas smaller y larger +que, en lugar de basarse en el valor medium, toman como valor de +referencia el tamaño de fuente usado inmediatamente antes y +reducen o amplian el mismo al siguiente tamaño en la escala. +(Lógicamente no tienen valor cuando nos encontramos en los +extremos inferior o superior de la escala y pretendemos seguir +disminuyendo o aumentando respectivamente)

+ +
+

Ejemplos:
+ +Tamaño 250%
+ + Tamaño 18 +puntos
+ + Tamaño 2 em + Tamaño 1 em +
+ + Tamaño 3 ex Tamaño 1 ex
+ +Tamaño 18 +píxels
+ + Tamaño 1 +centímetro
+ +Tamaño 0,5 +pulgadas

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
xx-smallx-smallsmallmediumlargex-largexx-large
tamañotamañotamañotamañotamañotamañotamaño
+ +
+ +
+

Si +necesitas utilizar decimales tendrás que usar la +notación anglosajona, en la que el separador decimal es el +punto en lugar de la coma.

+ +

MUY IMPORTANTE: Si utilizas +unidades absolutas (px, pt, in, cm) la mayoría de los +navegadores no serán capaces de modificar el +tamaño cuando el usuario lo solicite y manejarán +mal los tamaños relativos. Sería conveniente +utilizar como unidad de medida el porcentaje, la em +que +adoptará la anchura por defecto (o la ex que +tomará la altura) del valor por defecto cada uno de los +navegadores  y permitirá unos ajustes correctos al +redimensionar. Aunque en algunas referencias se considera el +píxel como unidad relativa ya que depende de cada +dispositivo, +lo cierto es que Internet Explorer lo interpreta como absoluta.

+ +
+ +

Interlineado

+ +

Repetimos la referencia al interlineado porque +también podemos considerarlo como una propiedad aplicable a +las fuentes. En el editor CSS lo encontrarás como altura de línea.

+ +

Propiedad: line-height

+ +

Valores: Se pueden expresar introduciendo +un valor entero que indique su medida en puntos (pt), pulgadas (in), +centímetros (cm), pixels (px) o porcentaje (%).

+ +
+

Ejemplos:

+ +

En esta +línea se ha empleado un interlineado del 200%, de forma que +presente una distancia doble a la habitual, respecto a la anterior y la +posterior .

+ +

En esta +línea se ha empleado un interlineado de 10 puntos. Como el +tamaño de la letra es también de 10 puntos se +puede comprobar que la parte superior de las letras llega hasta la base +del renglón anterior.

+ +
+ +

Si +necesitas utilizar +decimales tendrás que utilizar la notación +anglosajona, en la que el separador decimal es el punto en lugar de la +coma.

+ +

Familia

+ +

Propiedad: font-family

+ +

Valores: Se puede utilizar el nombre de la +letra. Es conveniente añadir, separados por comas, nombres +de letras similares y finalizar, por si no está instalada +ninguna de ellas, con el nombre de la familia. Las familias de letras +básicas son: serif, sans-serif, monospace, cursive y +fantasy. Si el nombre de la fuente tiene espacios en blanco +habría que encerrarlo entre comillas para que se leyeran +ambas palabras como una única cadena.

+ +
+

Ejemplos: Podríamos hacer una +referencia del tipo font-family:Arial,Helvetica,Verdana,sans-serif

+ +

Familia +serif
+ +Familia +sans-serif
+ +Familia +monospace
+ +Familia +cursive
+ +Familia +fantasy

+ +
+ +

Combinar los atributos referentes a +la fuente de letra +

+ +

En muchas ocasiones puede resultarnos más +cómodo agrupar todos los valores de las diferentes +propiedades en una propiedad abreviada denominada, sencillamente, font. +

+ +

La propiedad abreviada font +requiere el siguiente orden en la +presentación de los valores: estilo, variante, grosor, +tamaño/interlineado, familia

+ +

Tal vez te haya llamado la +atención la referencia tamaño/interlineado. En la +especificación actual, si utilizamos interlineado debe +aparecer junto al valor de tamaño y separado del mismo por +una barra de división / ).

+ +

Una buena práctica es definir en la etiqueta body +las características de la fuente puesto que se +heredarán para todos los elementos textuales.

+ +
+

Ejemplos:

+ +

body {font: italic small-caps bold 1em/35px +sans-serif} +Haría que todo el texto de la página tomara como +base la apariencia que muestra este párrafo.

+ +

body {font: bold 70%/9px serif} +haría que todo el texto de la página tomara como +base la apariencia que se muestra aquí (al no haber incluido +valores de estilo ni variante se toma el valor por defecto). + 
+ + 

+ +
+ +
+Actividad 87 + + +
+
+ + diff --git a/html2005/estilos/css6.html b/html2005/estilos/css6.html new file mode 100644 index 0000000..574f3b9 --- /dev/null +++ b/html2005/estilos/css6.html @@ -0,0 +1,237 @@ + + + + + + CSS: fondos + + + + + + + + + + + + + +
+

Estilos>>Fondos

+ +
+ +
+ +
+
+ +
+ + +
+ +

Fondos

+ +

Con la propiedad fondo podemos controlar el color de fondo un +elemento de la página, establecer imágenes como +fondo y decidir su posición dentro de la página y +si se repetirán o no. En el editor +de CSS de N|VU podrás acceder a estas propiedades dentro de +la +pestaña fondo.

+ +

Color de fondo

+ +

Propiedad: background-color

+ +

Como todas las propiedades de los fondos podemos aplicarla a +toda la página o sólo a un determinado elemento, +elgiendo una etiqueta de html como selector para aplicarlo de forma +genérica o bien mediante la utilización de clases +o selectores id.

+ +

Valores: podemos utilizar el nombre o la +referencia RGB de un color .

+ +
+

Ejemplos:

+ +

En este +párrafo se ha aplicado un fondo utilizando la etiqueta background-color:orange

+ +
+ + + + + + + + + + + + + + + + + + + + + +
Cabecera +
Cabecera
+ +
celda 1 +
celda 2
+ +
+ +

Esta tabla toma su color de un estilo definido en una hoja +interna para el elemento th

+ +

<style type="text/css">
+ +<!--
+ +th {background-color: #aabc35}
+ +-->
+ +</style>

+ +
+ +
+ +

Imagen de fondo

+ +

Propiedad: background-image

+ +

Valores: podemos utilizar la referencia +relativa a una imagen de nuestro propio sitio o bien una referencia +absoluta. Con ello podemos hacer que los fondos se apliquen solamente a +una determinada porción del documento, en lugar de hacerlo a +toda la página. Aunque no deberíamos hacerlo, +incluso aunque tuviéramos control sobre la url a la que +apuntamos, si usamos referencias absolutas de imágenes en la +red solo podremos comprobar el efecto cuando dispongamos de +conexión a internet.

+ +
+

Ejemplos:

+ +

Ahora +se +ha utilizado una imagen como fondo y la forma de expresarlo ha sido background-image:URL(../imagenes/claro09.jpg)

+ +
+ +

La inclusión de una imagen como fondo lleva +asociadas tres propiedades que nos permitirán especificar si +la imagen se repite, la posición en caso de no repetirse y +el desplazamiento vertical si la página ocupa más +de una pantalla.

+ +

Posición de la imagen

+ +

Propiedad: background-position

+ +

Valores: Existen varias +posibilidades para establecer la posición:

+ + + +

N|VU no dispone de una opción +para especificar +esta propiedad en el editor de CSS, por lo que habrá que +incorporarla manualmente en el código de la +página o en +el archivo de hoja de estilos.

+ +

Repeticiones

+ +

Propiedad: background-repeat

+ +

Valores: Si no especificamos +esta propiedad se adoptará el valor por defecto repeat. +Podemos también optar por indicar que no se repita con el +valor no-repeat (en +los ejemplos de +posicionamiento se ha utilizado ya esta propiedad) o bien indicar que +queremos que se repita en horizontal repeat-x + +o en vertical repeat-y. Ver +ejemplo

+ +

Desplazamiento

+ +

Podemos indicar si deseamos que la imagen de fondo se desplace +con el resto de la página cuando esta ocupe más +de una pantalla o si deseamos que permanezca fija, a modo de "marca de +agua", mientras se desplaza el resto del contenido.

+ +

Propiedad: background-attachment

+ +

Valores: el valor por defecto es +scroll, mientras que si utilizamos fixed +la imagen permanecerá fija. Ver +ejemplo

+ + +
+Actividad 88 + + +
+
+ + diff --git a/html2005/estilos/css7.html b/html2005/estilos/css7.html new file mode 100644 index 0000000..eb64682 --- /dev/null +++ b/html2005/estilos/css7.html @@ -0,0 +1,434 @@ + + + + + + + + + + + + + + + + + + + + + + + CSS: bordes + + + + + + + + + + + + + + + + + + + + + + + + +
+

Estilos>>Bordes

+ +
+ +
+ +
+
+ +
+ + +
+ +

Bordes

+ + + + +

Para poder aplicar bordes utilizando HTML era imprescindible +crear tablas. Aparte de los problemas de accesibilidad está +claro que lo que hacemos es utilizar un elemento cuya +función es darle estructura al contenido para conseguir un +formato gráfico en la presentación.

+ + + + +

Gracias a las hojas de estilo podremos aplicarle bordes a +cualquier elemento, incluso una palabra +dentro de un párrafo y con variedad de efectos.

+ + + + +

Propiedad abreviada

+ + + + +

Aunque en ocasiones anteriores hemos colocado en +último lugar la agrupación de propiedades de +forma simplificada, en este caso presentamos en primer lugar la +propiedad base para tenerla en cuenta como referencia dada la gran +cantidad de posibles combinaciones de valores y propiedades. En +el editor +de CSS de N|VU podrás acceder a estas propiedades dentro de la +pestaña borde. Aunque verás un poco más adelante +lo que se considera el orden normativo según las +especificaciones verás que el editor de CSS de N|VU no se ajusta +en este momento a ese orden y presenta las cajas para la +introducción de valores en el orden superior, izquierdo, derecho +e inferior en lugar del orden en sentido "horario".

+ + + + +

Utilizando el término border +podemos especificar todas las características aplicables a +los bordes sobre las que se puede incidir, que son el color, el grosor +y el tipo de trazo.

+ + + + +

Antes de entrar a ver cada una de estas propiedades +particulares es conveniente tener en cuenta una cuestión +previa sobre la identificación de los bordes, porque tenemos +la posibilidad de indicar las propiedades de cada uno individualmente, +mientras que si utilizáramos la propiedad +genérica border +aplicaríamos los mismos valores a todos ellos.

+ + + + +

Identificación de los bordes

+ + + + +

Para referirnos a cada uno de los bordes del +rectángulo que rodea a cada elemento utilizamos las palabras +top , right, bottom +y left. La enumeración no ha sido +al azar, sino que sigue el orden por defecto en sentido horario: borde +superior, derecho, inferior e izquierdo. 

+ + + + + + + + + +

Como norma general respecto al orden cuando aplicamos +cualquiera de las propiedades que veremos a continuación:

+ + + + + + + + + +

Color

+ + + + +

Propiedad: border-color

+ + + + +

Valores: podemos utilizar el nombre CSS o +la referencia RGB de un color en cualquiera de sus notaciones tal como +ya hemos visto.

+ + + + +

Recuerda lo que acabas de ver sobre la cantidad de valores +especificados para esta propiedad y su orden de aplicación.

+ + + + +

Estilo del trazo

+ + + + +

Propiedad: border-style

+ + + + +

Valores: tenemos una serie de palabras +reservadas cuyo efecto puedes ver en los ejemplos.

+ + + + +
+

Ejemplos:

+ + + + +

solid

+ + + + +

dotted

+ + + + +

dashed

+ + + + +

double (si se +indica el grosor fino se ve como el borde simple o no se vé +según el navegador)

+ + + + +

ridge (el +efecto es más perceptible con bordes medios o gruesos)

+ + + + +

inset +(el efecto es más perceptible con bordes medios o +gruesos)

+ + + + +

outset +(el efecto es más perceptible con bordes medios o +gruesos)

+ + + + +
+ + + + + +

Grosor

+ + + + +

Propiedad: border-width

+ + + + +

Valores: Podemos especificar el +grosor indicando un valor en cualquiera de las unidades admitidas, o +bien mediante las palabras reservadas que se muestran en el ejemplo.

+ + + + +
+

Ejemplos:

+ + + + +

thin

+ + + + +

medium

+ + + + +

thick

+ + + + +

ejemplo +fijando un valor: 0,25 cm

+ + + + +
+ + + + +

Agrupando propiedades de los bordes

+ + + + +

Como ya se comentó al inicio del apartado podemos +agrupar las propiedades referentes al borde bajo una propiedad +abreviada border a la que le +adjudicaríamos los valores correspondientes a grosor, +estilo, y color, pero teniendo en cuenta que al hacerlo así +solo podremos indicar un valor para cada propiedad que se +aplicaría a todos los bordes por igual.

+ + + + +
+Actividad 89 + + + + + + + + +
+ +
+ + + + diff --git a/html2005/estilos/css8.html b/html2005/estilos/css8.html new file mode 100644 index 0000000..f10fc9c --- /dev/null +++ b/html2005/estilos/css8.html @@ -0,0 +1,378 @@ + + + + + + CSS: márgenes y rellenos + + + + + + + + + + + + + + + +
+

Estilos>>Márgenes y rellenos

+ +
+ +
+ +
+
+ +
+ + +
+ +

Márgenes y rellenos

+ +

Lo primero que necesitaremos es conocer, aunque sea +someramente lo que suponen los elementos en bloque y los elementos en +línea a la hora de construir una página.

+ +

Elementos en bloque y elementos en línea

+ +

Para empezar, y aunque sea de una forma muy burda, +podríamos indicar que los elementos en bloque son aquellos +que generan de forma automática un salto de linea previo y +otro posterior, mientras que los elementos en línea forman +parte de una línea o renglón. Por ejemplo, <p> +o <h3> serían +elementos en bloque, mientras que <strong> +o <img> serían +elementos en línea.

+ +

Aunque hay algunos elementos más que entran dentro +de la categoría de elementos en bloque lo importante para +abordar los márgenes y rellenos, es tener en cuenta que para +formatear cualquier elemento en la página, sea en +línea o en bloque, lo que se genera es un cuadro, cuyo +contenido básico es el que se encuentra dentro de las +etiquetas que delimitan el elemento.

+ +

Elementos en bloque y en línea

+ +

Cada uno de estos cuadros está formado por varios +componentes que completan sus dimensiones:

+ +
+ +
Zona de contenido:
+ +
Forma el núcleo básico y sus +dimensiones son la altura y la anchura necesarias para que quepa el +contenido. En el caso de los elementos en línea se +ajustará plenamente al texto, mientras que en los elementos +en bloque irá ajustando la altura pero puede presentar zonas +vacías.
+ +
Borde:
+ +
Línea que rodea la zona de contenido. Para +visualizarlo deberemos especificar unas propiedades que ya conocemos +(grosor, estilo de trazo y color).
+ +
Relleno:
+ +
Espacio que separa el contenido propiamente dicho del +borde. Tendrá el color de la zona de contenido.
+ +
Margen:
+ +
Espacio exterior al borde que lo separa del contenedor +"padre". En muchos momentos este contenedor "padre" es el propio lienzo +
+ +
+ +

Identificación de márgenes y rellenosEn la imagen que se +muesta a continuación nos +encontramos con un elemento en bloque <h1> +que genera una +caja contenedora en la que aparece el texto.

+ +

La captura de la imagen se ha hecho de una pantalla en la que +se habían +especificado como propiedades del selector h1 +las siguientes:

+ + + +

Como el texto no ocupa todo el espacio de la caja comprobamos +que queda un espacio vacío en la zona derecha. +También vemos que entre la zona de contenido y el borde azul +queda una zona, que mantiene el mismo color del resto del cuadro, cuyo +grosor es el establecido por la propiedad padding.

+ +

Entre el borde azul y el límite del contenedor +ancestro (en nuestro caso body) y los +elementos adyacentes observamos +la existencia de un espacio transparente que deja ver el color del +contenedor ancestro cuyo grosor corresponde al +valor de margin.

+ +

Superposición de márgenesUna +cuestión que conviene tener en cuenta es que, cuando se +superponen verticalmente dos zonas de margen no se suman sus anchuras, +sino que se toma el valor máximo de las dos y ese es el que +se aplica. 

+ +

Si lo piensas detenidamente parece que es la +opción que más se puede acercar a lo que se +supone que nos planteamos cuando establecemos márgenes para +diseñar un espacio. En la imagen que se muestra hemos +aplicado un margin:20px al selector +<h2> que constituía +el segundo +párrafo, con lo cual las dos zonas se superponen. En el caso +de que el margen del segundo bloque hubiera sido, por ejemplo, de 10 +píxeles habría prevalecido el valor 20 del bloque +<h1>, mientras que si hubiera +sido superior a 20 +sería ese valor el que se habría tomado como +referencia para separar ambos bloques verticalmente.

+ +

Según la especificación CSS2 del W3C el +contenido debería incluir solo eso: el contenido, pero no +todos los navegadores lo implementan así. En particular, las +versiones de Internet Explorer anteriores a la 6 interpretan el modelo +de caja adjudicando como ancho del contenido el que corresponde a la +suma de la zona de contenido, el relleno y  el borde, lo cual +provoca serios desajustes en la forma de visualizar las +páginas. 

+ +

En +general, podremos especificar la anchura y la altura de los elementos +en bloque, mientras que los elementos en línea la anchura y +la altura serán las mínimas para que quepa el +elemento.

+ +

Espero que con esta visión básica de los +cuadros (box) hayas podido explicarte algunas situaciones que tal vez +te hayan llamado la atención en momentos previos cuando has +aplicado propiedades como el color de fondo o los bordes. Es probable +que si ahora repasas algunas de estas prácticas previas +puedas entender claramente hasta dónde llegaban en algunos +momentos los colores y por qué.

+ +

En el editor +de CSS de N|VU podrás acceder a las propiedades que se +mencionan a continuación dentro de la +pestaña caja.

+ +

Márgenes. Propiedad abreviada.

+ +

La magnitud que podemos variar en los márgenes es +su anchura. Como ya hemos visto cuando revisamos la propiedad border, +el orden de aplicación de los valores declarados es en +sentido horario comenzando por el margen superior. En la +versión +actual del editor de CSS integrado en N|VU el orden en el que se +presentan las cajas para introducir los valores no coincide con el que +se utiliza como norma para su inclusión en los selectores, +sino +que aparecen en lo que se podría considerar una lectura de +arriba a abajo como superior, izquierda, derecha e inferior.

+ +

Propiedad: margin +

+ +

Valores: puede utilizarse un valor +absoluto, expresado en cualquiera de las unidades +admisibles en CSS, un valor relativo +expresado en porcentaje o +el valor auto para que cada navegador +aplique su interpretación por defecto.
+ +

+ +

Márgenes. Propiedad desarrollada.

+ +

Podemos desglosar la propiedad para especificar +únicamente alguno de los márgenes mientras que +los demás permanecen en su valor automático.

+ +

Propiedad: margin-top, +margin-right, margin-bottom, +margin-left

+ +

Una aplicación inmediata de los márgenes

+ +

Uno de los problemas que suelen solucionarse de forma habitual +es el centrado de un bloque dentro de la página. Hay una +solución sencillísima utilizando hojas de estilo:

+ +
+

Lo primero que hacemos es crear una capa con la etiqueta +<div> que incluya el contenido que queremos +que aparezca +centrado.

+ +

El contenido CSS para conseguir el efecto sería

+ +

#centrada {width:450px; margin:auto;}

+ +

También se ha añadido un borde para que +resulte claro el efecto.

+ +
+ +

Parece que el código es muy sencillo y +correcto...si estás viendo la página con Mozilla, +Firefox u Opera +pero si la estás viendo con Internet Explorer +pensarás que se ha escapado algún error porque +ves el cuadro alineado a la izquierda. Es uno de los problemas con la +implementación que hace Internet Explorer de las CSS. +Mientras que en Mozilla, Konqueror o Galeón se ve +perfectamente, en Internet Explorer hay que hacer una +pequeña componenda que se muestra a continuación:

+ +
+
+

Hay que crear dos capas contenedoras: una general y dentro de +ella la centrada y crear los selectores de tipo id, o las clases si lo +preferimos, para especificar las propiedades CSS.

+ +

#Contenedora { width:100%; text-align:center;}

+ +

Aunque la propiedad text-align no debería afectar a +la capa sino solamente al texto, Internet explorer parece que ha optado +por implementar esta propiedad como un centrado genérico +aplicable también a las capas.

+ +


+ +#CentradaIE { width:450px; margin:auto; +text-align:justify;}

+ +

Ahora, se corrige la alineación del texto en la +capa en la que está realmente el contenido

+ +
+ +
+ +

Relleno. Propiedad abreviada.

+ +

Al igual que en los márgenes la magnitud que +podemos variar es su anchura. El comportamiento es totalmente +homologable, aplicándose los valores de la misma forma, por +lo que unicamente nombraremos la propiedad

+ +

Propiedad: padding

+ +

Rellenos. Propiedad desarrollada.

+ +

Desglosamos la propiedad exactamente igual que los +márgenes.

+ +

Propiedad: padding-top, +padding-right, padding-bottom, +padding-left

+ +

Anchura y altura

+ +

En los elementos en bloque podemos especificar la anchura y la +altura, mientras que no es posible hacerlo con los elementos en +línea que las adecúan al mínimo +necesario para mostrar el contenido (incluidos rellenos, +bordes y márgenes)

+ +

Propiedad: width +(anchura) +height (altura)

+ +

Valores: además del +valor auto podemos especificar las +dimensiones en términos absolutos utilizando como siempre +cualquiera de las unidades aceptables y en términos +porcentuales sobre el contenedor en el que se inserta el bloque al que +atribuimos dimensiones.

+ +

 

+ +
+Actividad 90 + + +
+
+ + diff --git a/html2005/estilos/css9.html b/html2005/estilos/css9.html new file mode 100644 index 0000000..9ecffd5 --- /dev/null +++ b/html2005/estilos/css9.html @@ -0,0 +1,319 @@ + + + + + + CSS: listas + + + + + + + + + + + + + + +
+

Estilos>>Listas

+ +
+ +
+ +
+
+ +
+ + +
+ +

Formateo de listas con CSS

+ +

Respecto a las listas son tres las propiedades que podemos +modificar: el tipo de marcador utilizado, su posición +respecto al texto y la posibilidad de utilizar una imagen como +marcador. En el editor +de CSS de N|VU podrás acceder a estas propiedades dentro de +la +pestaña lista. 

+ +

Además de ello vamos a considerar una +cuestión muy importante para la elaboración de +menús: la forma de presentarlas. Baste avanzar que las +listas son, por naturaleza, un elemento en bloque, pero podremos +modificar esa construcción por defecto para conseguir +algunos efectos interesantes.

+ +

Tipos de indicadores de elementos

+ +

Propiedad: list-style-type

+ +

Valores: Son todos los +establecidos por la especificación +HTML 4.01 tal como se muestra en el ejemplo. A todos ellos +habría que añadirle none +que elimina la marca de la lista, aunque no se ha incluido en el +ejemplo en la zona de listas numeradas porque no parece tener mucho +sentido poner una lista ordenada sin que se vean los indicadores de +orden. Además de +estos hay también +definida una lista de posibilidades en otros idiomas para las listas +ordenadas.

+ +
+ + + + + + + + + + + + + + + + + + + + + +
listas desordenadaslistas ordenadas
+
    + +
  • disc +
    • + +
  • circle +
    • + +
  • square
    • + +
  • none
    • + +
+ + 		+
    + +
  1. decimal +
    2. + +
  2. decimal-leading-zero +
    3. + +
  3. lower-roman +
    4. + +
  4. upper-roman +
    5. + +
  5. lower-alpha +
    6. + +
  6. upper-alpha +
    7. + +
+ +
+ +
+ +

Posición

+ +

Propiedad: list-type-position

+ +

Valores: Con el valor outside, +que es el que se aplica por defecto, + el indicador de la lista se colocará tal +como +hemos visto en los ejemplos previos fuera del bloque formado por el +texto del +elemento, mientras que con inside se +integrará en el primer renglón del elemento

+ +
+

Ejemplos:

+ +
    + +
  1. Este +ítem de la lista tiene definida la posición +del marcador como outside, por lo que se muestra fuera del cuadro +creado por el contenido textual del mismo. Es la posición a +la que estamos más habituados.
    2. + +
  2. Sin +embargo, este ítem tiene definida la posición +del marcador como inside, por lo que se integra en el primer +renglón del texto formando parte del mismo cuadro
    3. + +
+ +

Se ha utilizado también un color de fondo para +mostrar cómo la posición inside +se integra dentro del cuadro formado por el elemento, +mientras que si +el marcador tiene el valor outside queda +fuera del mismo.

+ +
+ +
+ +

Imagen como marcador

+ +

Propiedad: list-style-image

+ +

Valores: habrá que indicar la +situación de la imagen con la sintaxis +url(ruta_hacia_la_imagen)

+ +
+

Ejemplos:

+ + + +

 

+ +
+ +

Cualquiera +de las tres propiedades puede aplicarse a un ítem en +particular <li> o a toda la +lista <ul> u +<ol> según +corresponda. La +aplicación como propiedad de la lista, bien sea en una hoja +externa o interna, resulta siempre mucho más +cómoda puesto que garantiza la herencia y nos evita tener +que repetir las propiedades en cada uno de los elementos.

+ +

Listas inline

+ +

Ya hemos comentado al inicio que las listas son, por +naturaleza, un elemento en bloque, ya que generan un salto de +línea previo y otro posterior, creando su propia caja.

+ +

Sin embargo puede haber muchos momentos en los que no nos +interese que la lista aparezca en vertical, sino que +preferiríamos que sus ítems aparecieran en +horizontal, como en el siguiente ejemplo:

+ + + +Para obtener este efecto hemos tenido que crear tres propiedades:
+ +
    + +
  1. Eliminar los indicadores mediante list-style-type:none
    2. + +
  2. Hacer que todos los elementos se muestren en +línea, uno a continuación del otro
    3. + +
  3. Establecer una separación entre los +ítems de la lista para que no formen una sucesión +continua de caracteres.
    4. + +
+ +
+

Podríamos haber aplicado +primera regla a la lista completa, y las otras dos a cada item, pero +como también la primera se puede aplicar a cada uno de ellos +lo hemos solucionado creando la siguiente regla y +aplicándole la clase enlinea solo +una vez a la lista <ul>

+ +

.enlinea li {list-style-type: none; display: +inline; +margin-right: +3em;}

+ +

De esta forma, cada elemento li +"hijo" de la +clase enlinea recogerá las tres +reglas y sólo habremos puesto el selector de la clase en una +etiqueta.

+ +
+ +Cuando veas las técnicas CSS verás que el +formateo de +listas tiene una gran aplicación para la creación +de +menús que, si lo pensamos detenidamente, no son +más que +listas de opciones.
+ +
+Actividad 91 + + +
+
+ + diff --git a/html2005/estilos/curvelicious.css b/html2005/estilos/curvelicious.css new file mode 100644 index 0000000..1939d0b --- /dev/null +++ b/html2005/estilos/curvelicious.css @@ -0,0 +1,170 @@ +/* Generated by CaScadeS, a stylesheet editor for Mozilla Composer */ + + + + * { text-align: justify; + } + + body { font-family: Verdana,Arial,Helvetica,sans-serif; + font-size: 0.8em; + } + + a { text-decoration: none; + font-weight: bolder; + } + + h2 { border-top: 1px solid rgb(152, 157, 195); + border-bottom: 1px solid rgb(152, 157, 195); + background-color: rgb(255, 252, 241); + display: block; + font-size: 1.3em; + width: auto; + color: rgb(126, 130, 161); + } + + h3 { border-top: 1px solid rgb(152, 157, 195); + border-bottom: 1px solid rgb(152, 157, 195); + background-color: rgb(252, 247, 228); + color: rgb(126, 130, 161); + display: inline; + position: relative; + top: 10px; + margin-bottom:10px; + } + + h3 + * { position: relative; + top: 2ex; + margin-bottom: 2ex; + } + + h4 { border-bottom: 1px solid rgb(152, 157, 195); + color: rgb(126, 130, 161); + background-color: rgb(252, 247, 228); + font-weight: bold; + display: inline; + } + + code { font-family: Courier New,Courier,monospace; + font-size: larger; + font-weight: bolder; + color: rgb(91, 102, 150); + } + + dd { padding-top: 5px; + padding-bottom: 10px; + } + + dt { font-weight: bolder; + } + + .flotizq { float: left; + margin-top: 5px; + margin-bottom: 5px; + margin-right: 10px; + } + + .flotder { float: right; + margin-top: 5px; + margin-bottom: 5px; + padding-left: 10px; + } + + .imgcentr { padding: 2px 5px; + float: none; + text-align: center; + } + + .separador { margin: 3px; + float: none; + height: 1px; + } + + .indentado25 { margin-left: 25px; + } + + .practicas { border: thin solid rgb(192, 155, 75); + margin: 10px; + padding: 3px 10px; + background-color: rgb(255, 252, 227); + float: none; + } + + .estilo { border: 1px solid rgb(0, 0, 153); + margin: 5px 50px; + padding: 3px 10px; + float: none; + } + + .practicas:before { font-weight: bold; + content: "Actividad: "; + } + + .avisos { border: 1px solid rgb(255, 66, 0); + margin: 5px 10px; + padding: 3px 10px; + float: none; + } + + .ejemplo { border: 1px solid rgb(192, 155, 75); + margin: 5px 10px; + padding: 3px 10px; + float: none; + } + + .codigo { border: 1px solid rgb(0, 0, 153); + margin: 5px 50px; + padding: 3px 10px; + float: none; + background-color: rgb(255, 255, 255); + background-repeat: no-repeat; + background-position: right bottom; + background-image: url(imagenes/ruedas2.gif); + } + + .resaltadocentro { font-size: x-large; + text-align: center; + } + + .ejempcss { font-weight: bold; + } + + .resaltado { font-size: 1.2em; + font-weight: bold; + } + + .h3limpio { border-style: none; + color: rgb(0, 0, 0); + background-color: rgb(255, 255, 255); + } + + .h2limpio { border-style: none; + color: rgb(0, 0, 0); + background-color: rgb(255, 255, 255); + } + + .saltopagina { page-break-before: avoid; + } + + .refmenu { font-weight: bold; + font-variant: small-caps; + } + + .codesinestilo { font-weight: normal; + font-size: 1em; + color: rgb(0, 0, 0); + } + + .recuadroimg { border: 1px solid rgb(0, 0, 0); + } + + .centrado { text-align: center; + } + + .blanco { color: rgb(255, 255, 255); + font-weight: bold; + text-align: center; + } + + .indentado50 { margin-left: 50px; + } + diff --git a/html2005/estilos/documentohtml.png b/html2005/estilos/documentohtml.png new file mode 100644 index 0000000..be0aa67 Binary files /dev/null and b/html2005/estilos/documentohtml.png differ diff --git a/html2005/estilos/ejemploestilo.css b/html2005/estilos/ejemploestilo.css new file mode 100644 index 0000000..73d128a --- /dev/null +++ b/html2005/estilos/ejemploestilo.css @@ -0,0 +1,3 @@ +body {background: black; font-size: 12px; color: yellow; font-family: Arial, Helvetica, sans-serif; text-align:justify; margin-left: 0.5in; margin-right: 0.5in} +H1 {background: aqua; font-size: 16px; font-weight: bold; color: orange} +H2 {font-size: 14px; font-weight: bold; color: white} \ No newline at end of file diff --git a/html2005/estilos/ejemploestilo.htm b/html2005/estilos/ejemploestilo.htm new file mode 100644 index 0000000..21e2246 --- /dev/null +++ b/html2005/estilos/ejemploestilo.htm @@ -0,0 +1,32 @@ + + + + ejemploestilo + + + + + + + + + +

Esto es el texto normal. Sus características se han +especificado en la etiqueta <body>: Fuente arial de 12 +píxeles, justificada, en color amarillo sobre un fondo +negro. El margen izquierdo, al igual que el derecho es de ½ +pulgada, esto es, 1,27 cm

+ +

Esto es una cabecera de tipo h1 : Arial negrita de 16 +píxeles y color naranja sobre fondo aqua, que equivale al +color cyan o a la combinación RGB 00FFFF

+ +

Esto es una cabecera de tipo H2: sencillamente arial de 14 +píxeles en color blanco y resaltada en negrita.

+ +

Cerrar

+ + + diff --git a/html2005/estilos/ejemploestilo2.htm b/html2005/estilos/ejemploestilo2.htm new file mode 100644 index 0000000..81489d2 --- /dev/null +++ b/html2005/estilos/ejemploestilo2.htm @@ -0,0 +1,31 @@ + + + + + + ejemploestilo2 + + + + + + + + +

Esto es el texto normal. Sus características se han +especificado en la etiqueta <body>: Fuente arial de 12 +píxeles, justificada, en color amarillo sobre un fondo negro. El margen +izquierdo, al igual que el derecho es de ½ pulgada, esto es, +1,27 cm

+ +

Esto es una cabecera de tipo h1 : Arial negrita de 16 píxeles +y color naranja sobre fondo aqua, que equivale al color cyan o a la +combinación RGB 00FFFF

+ +

Esto es una cabecera de tipo H2: sencillamente arial de 14 +píxeles en color blanco y resaltada en negrita.

+ +

Cerrar

+ + + diff --git a/html2005/estilos/ejemploestilo2b.htm b/html2005/estilos/ejemploestilo2b.htm new file mode 100644 index 0000000..4deb751 --- /dev/null +++ b/html2005/estilos/ejemploestilo2b.htm @@ -0,0 +1,19 @@ + + + +ejemploestilo2 + + + + +

Esto es el texto normal. Sus características se han especificado en + la etiqueta <body>: Fuente arial de 10 puntos, justificada, en color amarillo sobre un fondo negro. El margen izquierdo, al igual que el derecho es de ½ + pulgada, esto es, 1,27 cm

+

Esto es una cabecera de tipo h1 : Arial negrita de 14 puntos y color naranja + sobre fondo aqua, que equivale al color cyan o a la combinación RGB 00FFFF +

+

Esto es una cabecera de tipo H2: sencillamente arial de 12 puntos en color + blanco y resaltada en negrita.

+

Cerrar

+ + diff --git a/html2005/estilos/estilos1.htm b/html2005/estilos/estilos1.htm new file mode 100644 index 0000000..7041807 --- /dev/null +++ b/html2005/estilos/estilos1.htm @@ -0,0 +1,241 @@ + + + + + + +¿Qué son las CSS? + + + + + + + + + + + +

Cascading Style Sheets

+ +

O lo que es lo mismo: hojas de estilo en cascada.

+ +

El motivo de haber puesto en primer lugar la denominación en inglés + + es porque vas a encontrar en muchos momentos estas siglas para referirse al + + concepto que trabajaremos en este epígrafe. Poco a poco iremos descifrando + + el significado real de esta denominación que, por ahora, puede resultarnos + + un tanto críptica.

+ +

Lo primero en lo que coincidiremos es en que el lenguaje HTML es francamente + + + antipático y poco flexible cuando se trata de incidir en la apariencia + + + de una página. El propio origen del lenguaje HTML unido a su evolución + + + han sido los que han provocado esta situación. Pensemos que el lenguaje + + + HTML surgió en un entorno, el universitario, y con un propósito, + + + la publicación de contenidos científicos estructurados, eminentemente + textuales. El problema es + + que la masiva difusión de Internet hizo que se rompiera el marco original + + + y se hiciera necesario, especialmente desde la irrupción de un uso comercial, + + + presentar páginas en las que el centro de gravedad se trasladaba del + + + contenido y su estructuraa la forma, ya que se trataba de crear "imagen + de marca". + Fue + + entonces cuando empezaron a aparecer los problemas, ya que el lenguaje HTML + + + no está pensado para trabajar con los elementos formales sino con los +de tipo estructural.

+

Si te paras a pensar un poco sobre lo que acabas de leer puedes darte cuenta + por ejemplo de que, aunque hayamos podido utilizar las etiquetas <h1> para + conseguir un texto de un determinado tamaño que nos pudiera valer de titular + lo lógico habría sido emplearlas para organizar los contenidos indicando que + su contenido es la cabecera de un fragmento que tiene tiene una importancia + superior, que aquellos que van encabezados por un <h2>

+

El crecimiento exponencial de Internet hizo que la imagen que nos hemos hecho + + de lo que debe ser una página WEB fuera acercándose a lo que es + + hoy: un entorno multimedia en el que los aspectos formales han cobrado una gran + + importancia. Pero esta percepción sigue apoyándose en la utilización + + del mismo lenguaje que le había servido de base en los primeros tiempos, + + lo cual ha hecho que los diseñadores hayan tenido que recurrir a trucos + + y artimañas para paliar las deficiencias del lenguaje HTML en lo referente + + a la presentación visual.

+ +

Al tratarse de añadidos a la finalidad original, y en muchos casos + utilizaciones francamente contradictorias con la misma, podemos encontrarnos + + + con situaciones muy problemáticas cuando pretendemos introducir modificaciones + + + globales en un sitio WEB. ¿Imaginas, por ejemplo, lo que sería + + + necesario para cambiar el tipo de letra de un sitio WEB compuesto por cincuenta + + + páginas?

+ +

La forma de solucionarlo ha sido la utilización de las hojas de estilo + + en cascada. Las hojas de estilo en cascada aportan, como característica + esencial, + + la posibilidad de separar los elementos formales de los de contenido, de forma + + + que con una pequeña modificación de la hoja de estilo se pueda + + + cambiar el aspecto de todas las páginas en las que se aplica esa hoja. + Volviendo al ejemplo anterior tal vez nos bastaría con cambiar una vez la palabra + sans-serif por serif para conseguir que las cincuenta páginas de nuestra web + cambiaran automáticamente de apariencia.

+ +

Una cuestión a tener en cuenta es que no todas las versiones de los + + + navegadores las soportan y que cada uno de los navegadores ofrece un soporte + más o menos ajustado a las especificaciones. Actualmente nos encontramos con + la especificación CSS2 pero podríamos encontrarnos con que algunas propiedades + que se muestran correctamente en un navegador no lo hacen en otro.

+ +

¿Por qué se denominan hojas de estilo?

+ +

La denominación de hojas de estilo hace referencia a que podemos, a + + + partir de las etiquetas básicas de HTML, realizar modificaciones en + las propiedades de las mismas, creando + + clases y seudoclases e indicándole al navegador unas instrucciones muy precisas + sobre la forma en la que tiene que presentar + + un determinado elemento, esto es, el estilo de la presentación

+ +

Una ventaja añadida es que, al tratarse de una colección + de instrucciones escrita + + en formato de texto y, en su uso más aconsejable, separada de la propia página + web y aplicable a múltiples páginas simultáneamente conseguiremos que nuestra + definición + de estilos haga + + que la página en sí resulte mucho más reducida.

+

Por otra parte, + al quedar un código mucho más limpio gracias a la descarga de los elementos + de formato, la estructura de la información quedará mucho más clara ya que + el código tenderá a ser muy simple.

+

¿Por qué se denominan "en cascada"?

+ +

A la hora de crear un estilo, las especificaciones que se realicen para un + + + determinado elemento serán aplicables a todos aquellos elementos que + + + se encuentren "por debajo" de él atendiendo a un criterio + de + + herencia. Por ejemplo, si especificamos un tipo de letra para el elemento <body> + + todos aquellos elementos que puedan heredar las características se presentarán + + + con el mismo tipo de fuente. Así, el elemento <p> heredará + + el tipo de letra salvo que especifiquemos lo contrario y no necesitaríamos + volver a indicar esta característica.

+ +

Gracias a la organización en cascada podemos crear hojas de estilo muy + + compactas, ya que una sola norma en el primer elemento de la cadena de herencia + + permite que podamos aplicarla a todos los herederos.

+ +

Además de ello se establece un orden de prioridad para la aplicación + + de las normas en caso de que resulten contradictorias. El orden de preferencia + + para aplicar una norma es el siguiente:

+ +
    + +
  1. Estilo especificado dentro de la etiqueta. (estilo en línea)
    2. + +
  2. Estilo especificado en la cabecera del documento. (hoja de estilos interna)
    3. + +
  3. Estilo definido en un documento independiente al que se enlaza nuestra + página. (hoja de estilos externa)
    4. + +
+ +

Teniendo en cuenta el orden mencionado, el procedimiento más cómodo + es crear una hoja de estilo en un archivo independiente y vincular las páginas + a este archivo. Si queremos realizar alguna modificación en un elemento + concreto podríamos recurrir a uno de los dos primeros procedimientos + que, al ser más específicos, resultarán preferentes.

+

¿CSS1 o CSS2?

+

Es posible que en cuanto intentes localizar alguna información sobre hojas + de estilo te aparezca la referencia a uno de los dos niveles. Obviamente son + más avanzadas las especificaciones del nivel 2, pero el gran problema que tenemos + es que, hoy por hoy son muy pocos los navegadores capaces de soportar todas + las posibilidades establecidas en este nivel 2. De hecho, las que se utilicen + en las explicaciones de este apartado serán aquellas que estén soportadas por + Mozilla 1.7 y por Internet Explorer en su versión 6, aunque en la mayoría de + los casos también serán soportadas por una gran cantidad de navegadores.

+

 

+ + + + + + + diff --git a/html2005/estilos/estilos10.htm b/html2005/estilos/estilos10.htm new file mode 100644 index 0000000..492286f --- /dev/null +++ b/html2005/estilos/estilos10.htm @@ -0,0 +1,147 @@ + + + + + + +Crear estilos + + + + + + + + + + + + +

Ya comentamos al ver la creación del código HTML para los marcos que ha sido + uno de los temas controvertidos a la hora de desarrollar contenidos para la +web. Desde el punto de vista positivo podemos aportan algunos elementos destacables:

+ +

Pero también podemos señalar unos algunos elementos negativos:

+ +

Habría muchísimos más argumentos a favor y en contra de los marcos y, mientras + que los partidarios de los mismos dirían que la gran mayoría de los problemas + se solucionarían con javascript, los detractores podrían apuntar que parece + ser que la línea de trabajo de las instituciones de estandarización va por + desaprobar los frames. Es pues absurdo meterse en esta discusión, pero sí podemos + aportar alguna alternativa mediante CSS para que pueda estudiarse y utilizarse + si nos interesa.

+

Dos marcos verticales

+

La idea es sencilla: creamos dos capas y las posicionamos dentro de la página. + Una de ellas contendrá una capa con el menú y la otra una capa con el contenido. + El motivo para crear las capas de menú y contenido y anidarlas dentro de izquierda + y derecha respectivamente es evitar que haya problemas al cambiar de navegador + con los márgenes y el posicionamiento. Cada página repetirá la capa de menú + e irá variando la capa que desarrolla el contenido.

+

El navegador Internet Explorer no soporta correctamente la posición + fixed, sin embargo con este código se consigue que mantenga fija la + capa de la izquierda a costa de que, en ocasiones, añada + una segunda barra de desplazamiento para la capa de la derecha.

+
+

<style type="text/css">
+ <!--
+ body{margin:0; height:100%;}
+ div#izquierda { position:fixed; top:0; left:0; width:25%; height:100%; overflow:auto; + background-color:#3399FF}
+ div#derecha { position:absolute; top:0; left:25%; width:75%; height:100%; overflow:auto; + background-color:#D9F2F2 }
+ #menu{margin-left:10px; margin-right:10px;}
+ #contenido{margin-left:10px; margin-right:10px;}
+ -->
+</style>

+
+

Ver +ejemplo

+

Tres marcos

+

La otra estructura habitual de presentación es un marco superior que + abarca toda la anchura y dos marcos verticales. También se puede crear + una estructura de este tipo utilizando CSS, pero, como siempre, el problema + aparece con el insuficiente soporte que da Internet Explorer a algunas propiedades, + entre ellas position:fixed, lo cual nos obliga a introducir algunas propiedades + extras, como el indicador de profundidad z-index para la franja superior.

+

A continuación se muestra el código en el que se basa el ejemplo + que se presenta.
+

+

<style type="text/css">
+ <!--
+ body{margin:0; height:100%;}
+ div#Superior { position:fixed; top:0; left:0; width:100%; height:35px; overflow:auto; + background-color:#BBC7F7; z-index:100}
+ div#Izquierda { position:fixed; top:35px; left:0; width:25%; height:100%; + overflow:auto; background-color:#3399FF}
+ div#Derecha { position:absolute; top:35px; overflow:auto; margin-left:25%; + height:100%; width:75%; background-color:#D9F2F2;}
+ -->
+</style>
+

+
+

Ver +ejemplo

+ +

 

+
+ +

+ + + +
+ + + + + + + + diff --git a/html2005/estilos/estilos2.htm b/html2005/estilos/estilos2.htm new file mode 100644 index 0000000..ea75f40 --- /dev/null +++ b/html2005/estilos/estilos2.htm @@ -0,0 +1,127 @@ + + + + + + +Aplicar hojas de estilo + + + + + + + + + + +

Sintaxis básica

+

La sintaxis general de cualquier declaración de estilo, independientemente + de dónde la apliquemos, va a estar compuesta por tres elementos:

+

selector {propiedad:valor}

+

donde selector va a ser, básicamente, el elemento html que deseamos + definir, la propiedad el atributo que queremos modificar, apareciendo por último + el valor que deseamos asignarle al atributo. La propiedad se separa del atributo + mediante dos puntos y ambos se encierran entre llaves.

+
+

Cuando + los valores requieren especificar un tipo de unidad, esta se indica a continuación + del valor numérico, sin espacio de separación: 1cm sería + una notación correcta, mientras que 1 cm no lo sería.

+
+

Selectores de tipos

+

El selector más sencillo es el que denominamos de tipo. Se refiere a una etiqueta + definida en el lenguaje HTML. Su gran ventaja será que con una única modificación + en una hoja de estilos podremos modificar la apariencia de todos las páginas + de un sitio al variar la presentación de un determinado tipo.

+

Ej: body {color:white}

+

Para cada selector podremos establecer más de una propiedad. Para separarlas utilizaremos el punto y coma, siendo habitual para favorecer la legibilidad, que cada propiedad se escriba en un renglón.

+

Ver ejemplo
+

+

Agrupando selectores

+

Si queremos aplicar una propiedad común a varios selectores sin necesidad de tener que definirla en cada caso podemos agruparlos listándolos separados por comas y haciendo una definición común para todos ellos.

+

Ej.: h1,h2,h3 {color:blue}

+

Ver ejemplo

+

Selectores contextuales

+

Podemos realizar una selección de elementos del documento para aplicarles un determinado formato. Podríamos, por ejemplo querer que los fragmentos que estuvieran enfatizados mediante la etiqueta <em> aparecieran en color verde. Pero podríamos ser incluso más específicos indicando que sólo queremos que aparezcan en color verde los fragmentos enfatizados que formen parte de una lista. Esto lo haríamos colocando primero el selector li y, a continuación separado por un espacio, el selector em para luego especificar las propiedades

+

Ej.: li em {color: green}

+

Ver ejemplo

+

Clases

+

El selector class nos permite definir diferentes estilos para el mismo elemento + HTML. El ejemplo siguiente supondría la posibilidad de tener dos tipos + de párrafo en el documento: uno en azul y otro en rojo, en función + de la clase que cada uno lleve indicada. Para establecer la clase añadimos + un punto y el nombre que le adjudicamos a la clase a continuación del selector + y antes de iniciar las propiedades.

+

Ej.: p.azul {color: blue} +p.rojo {color: red}

+

Ver ejemplo

+

Sólo se puede aplicar una clase a un elemento html.

+

Es muy frecuente que la definición de las clases se haga sin ligarlas a una etiqueta concreta. En el ejemplo anterior podría omitirse la referencia al elemento p y eso haría que las características de la clase se aplicaran a cualquier elemento al que se le aplicara. En este caso el selector empieza con un punto seguido del nombre de la clase

+

Ej.: .azul {color: blue} .rojo {color: red}

+

Ver ejemplo

+

Pseudoclases

+

Las pseudoclases se utilizan para particularizar algunos efectos de determinados + selectores en algunas situaciones especiales. Uno de los grupos que se aplica + más frecuentemente es el que tiene que ver con la etiqueta <a> + para marcar diferentes presentaciones de los enlaces.

+

La sintaxis es ligeramente diferente de la general: selector:pseudoclase + {propiedad : valor}

+

Pseudoclases relacionadas con los vínculos

+

Su función es cambiar la apariencia según el estado del vínculo. Existen cuatro + tipos:

+ +

Ver +ejemplo

+
+

El orden en el que se deben especificar estas pseudoclases en las hojas de + estilos para que tengan efecto es el que se ha utilizado para describirlas.

+
+

Existen también los llamados pseudoelementos que verás en la + sección dedicada al texto pero todavía podemos considerar la pseudoclase que + se refiere al primer elemento hijo first-child que + nos permitiría + obtener, por ejemplo un efecto similar al que presentan algunas ediciones impresas + cuando el primer párrafo de un capítulo se muestra en un tamaño + más + grande o en itálica.

+

Ver +ejemplo

+

El selector id

+

Mientras que el selector clase puede aplicarse a varios elementos del mismo o diferente tipo en una página podemos crear también un selector id para diferenciar elementos específicos que añadirán alguna característica diferente de las que tienen los elementos de su clase. El nombre del selector se inicia con el signo # seguido del nombre del identificador.

+

Ej: #rojo {color: red}

+

Ver ejemplo

+

Comentarios

+

Puede venir muy bien incluir comentarios que nos sirvan para aclarar o recordar algún aspecto de las especificaciones que escribimos en una hoja de estilo. Para hacerlo lo iniciaremos con /* y lo finalizaremos con */

+

Ej: /* Esto es un comentario*/

+ + + + + + diff --git a/html2005/estilos/estilos2b.htm b/html2005/estilos/estilos2b.htm new file mode 100644 index 0000000..1bfe102 --- /dev/null +++ b/html2005/estilos/estilos2b.htm @@ -0,0 +1,474 @@ + + + + + + +Aplicar hojas de estilo + + + + + + + + + + +

 

+

¿Cómo aplicar una hoja de estilos?

+

Cuando un navegador lee el contenido de una hoja de estilos utiliza sus especificaciones + para darle forma al documento. Hay tres formas básicas de indicarle al + navegador la utilización de una hoja de estilos.

+

Hoja de estilo interna

+

Cuando un estilo es propio de un único documento podría utilizarse + una hoja de estilos interna, mediante la creación de una sección + <style> dentro de la cabecera del documento. Este es el método + que se ha utilizado para mostrar los ejemplos particularizados que puedes consultar + en las ventanas emergentes.

+

Ten en cuenta que con este tipo de inclusión perdemos de vista una de + las finalidades prioritarias de las hojas de estilo, ya que se mezcla en el + documento html la especificación de formato con el contenido, aunque + puede ser un primer paso para que compruebes la potencia de las hojas de estilo.

+

Note: Normalmente los navegadores ignoran las etiquetas que + desconocen, por lo que un navegador antiguo que no soporte estilos ignorará + el contenido de <style>, pero mostrará el contenido de la sección. + Para evitarlo podemos utilzar las etiquetas de comentario de HTML tal como se + muestra en el siguiente fragmento de código.

+
+

<head>
+ <style type="text/css">
+ <!--
+ hr {color: sienna}
+ p {margin-left: 20px}
+ body {background-image: url("images/back40.gif")}
+ -->
+ </style>
+ </head>

+
+

A continuación tienes un ejemplo de código + para la inclusión de un estilo global en una página. Puedes ver + el resultado en una + ventana independiente. (Ten en cuenta que se podían haber utilizado otras + etiquetas y otras propiedades de las mismas)

+
<html>
+ <head>
+ <title> Título de la página </title>
+
+
<style type="text/css">
+ <!--
+ body {background: black; font-size: 10pt; font-family: Arial,Helvetica,sans-serif; + color: yellow; text-align:justify; margin-left: 0.5in; margin-right: 0.5in} +
+ H1 {background: aqua; font-size: 14pt; font-weight: bold; color: orange}
+ H2 {font-size: 12pt; font-weight: bold; color: white}
+ -->
+ </style>
+
+ </head>
+ <body>
+ Conjunto de etiquetas del cuerpo de la página
+ </body>
+ </html>
+

Como has visto en el ejemplo, la sintaxis se ha modificado al incluir el estilo + en la cabecera:

+ +

La + inclusión del estilo se hará después de la etiqueta de + cierre del título </title>
+

+
+

 Crea una página con varios párrafos de texto. Puedes + utilizar el mismo texto + que usamos en la práctica 30.

+ +
+

 

+

+

Hoja de estilos externa

+

Aunque iniciamos la exposición de posibilidades con las hojas de estilo + internas realmente lo correcto habría sido iniciarla con las hojas de + estilo externas, ya que ésta es la forma ideal de aplicar un estilo a + varias páginas de forma simultánea. De hecho debería ser + la forma prioritaria puesto que permite separar claramente el contenido y la + estructura, que irán en el documento html, del formato que se aplicará + a partir de la hoja de estilos.

+

Para hacerlo habrá que utilizar en cada documento la etiqueta <link> + situada en la cabecera del documento, después de la etiqueta <title>

+
<head> +

+

<title>página para mostrar la situación de los estilos<title>

+

<link rel="stylesheet" type="text/css" href="miestilo.css">

+

</head>

+

Gracias a este enlace el navegador leerá las especificaciones de la + hoja de estilos y dará formato al contenido de acuerdo a ellas.

+

Así pues hay que seguir dos pasos:

+
    +
  1. Crear un archivo de texto con cualquier editor de texto plano, salvándola + en formato texto con la extensión que se desee, aunque habitualmente + suele utilizarse la extensión .css. En dicho archivo especificaremos + el contenido de las diferentes normas de estilo utilizando la sintaxis básica + selector {propiedad:valor}
    2. +
  2. Enlazar cada página a la que queramos aplicarle el estilo con el + archivo creado para que extraiga de él las características. +
    3. +
+
+

Para crear un archivo de definiciones que recogiera las características + del ejemplo anterior escribiríamos:

+

body {background: black; font-size: + 10pt; font-family: Arial,Helvetica,sans-serif; color: yellow; text-align:justify; + margin-left: 0.5in; margin-right: 0.5in}
+ H1 {background: aqua; font-size: 14pt; font-weight: bold; color: orange}
+ H2 {font-size: 12pt; font-weight: bold; color: white}

+

Observa + que el archivo no incluye ninguna etiqueta en el formato habitual. Se trata + simplemente de un arcchivo de texto con las propiedades atribuidas a cada + elemento.
+
+ Una vez definidas las propiedades guardaremos el archivo en formato texto + con el nombre que queramos y la extensión + css. Por ejemplo, estilodeprueba.css

+

El paso 2 es incluir en la cabecera de la página, detrás de + la etiqueta </title> la etiqueta + <link rel="stylesheet" href="estilodeprueba.css" + type="text/css">
+
+ El siguiente ejemplo + presenta la misma apariencia que vimos al aplicar el estilo en la página, + pero está creado utilizando este método.
+

+
+

+

+ +
+

 

+

Combinar hojas de estilo externas en una nueva

+

Si ya tenemos definida una hoja de estilos y deseamos reutilizarla añadiendo + algunas modificaciones podemos crear una nueva hoja de estilos en la que importemos + el contenido de la que ya teníamos y añadamos las nuevas reglas. + Puede ser por ejemplo, el caso de un centro en el que se utilizara una hoja + de estilos genérica y cada nivel o departamento aprovechara esas especificaciones + y añadiera las suyas propias para personalizar una zona de la web.

+
+

Para importar una hoja de estilos ya creada lo debemos indicar en la primera + línea de la nueva hoja (o en la primera y sucesivas si estamos importando + varias hojas) utilizando la sintaxis:

+
@import + url(colegio.css);
+ /* A continuación añadimos los selectores, clases y pseudoclases + que modificamos con sus propiedades correspondientes */
+ h1 { font-style : italic }
+ ... +

+
+ Lógicamente, al definir la url en la que está situada la hoja de estilos + habrá que utilizar la ruta relativa dentro del sitio web.
+

Estilos en línea

+

Llamamos estilo en línea al que se aplica directamente sobre un elemento + al crear el código HTML. Evidentemente es el procedimiento menos recomendable, + ya que perdemos practicamente todas las ventajas ofrecidas por las hojas de + estilo al mezclar el contenido y la presentación. La única ventaja + que puede presentar respecto al código HTML es que permite la especificación + de un abanico mucho mayor de propiedades.

+

Para usar un estilo en línea varía ligeramente la sintaxis que + hemos utilizado hasta ahora, ya que añadimos style como atributo de la + etiqueta que deseamos modificar y las propiedades y valores se encierran entre + comillas en lugar de entre llaves.

+ +

Ver + ejemplo

+

¿Pueden enlazarse varias hojas de estilos con la misma + página?

+

La respuesta es, sencillamente, sí. Basta con repetir la etiqueta link + tal como se ha visto poniendo en cada caso el nombre de la hoja con la que se + quiere enlazar. Ahora bien, habrá que tener en cuenta que si hay contradicción + entre las definiciones de algún elemento, prevalecerá la hoja + a la que se haya nombrado en último lugar al crear los enlaces. Además, + sobre las hojas enlazadas tendrán prioridad las hojas de estilo internas + y, sobre ellas, los estilo en línea aplicados a algún elemento + particular.

+

Por ejemplo, si tenemos nuestra página enlazada con la hoja de estilos + genérica de la web del centro, a continuación la hemos enlazado + con una hoja de estilos que se está usando para el departamento, tenemos + una hoja de estilos interna definida sobre la página y hay algún + elemento al que le hemos aplicado un estilo en línea pasaría algo + similar a lo siguiente:

+

La hoja de estilos del centro tiene definidas las propiedades siguientes para + el selector h3:

+

h3 { color: red; text-align: left; font-size: 10pt + }

+

La hoja del departamento tiene sin embargo definido el selector h3 de la siguiente + forma:

+

h3 { text-align: right}

+

La hoja de estilos interna especifica:

+

h3 {color: green; font-size: 20pt}

+

Y hemos especificado en línea sobre una etiqueta h3

+

<h3 style="font-size: 10pt}

+

El resultado final será:

+ +

Aplicar estilos a elementos o secciones de un documento

+

Si en vez de a un elemento quiero aplicarle un estilo a un grupo de elementos + puedo englobar dichos elementos entre las etiquetas <div> y </div> + y aplicar allí el estilo que teníamos definido como clase, tal + como se ve en el siguiente ejemplo. (o bien mediante un estilo en línea) +

+ + + + + + + + + +
Este código......se ve así

<div class = "azul">
+ <p> Primer párrafo </p>
+ <ul>
+ <li>Elemento de lista</li>
+ <li>Otro elemento</li>
+ </ul>
+ <p>Otro párrafo</p>
+ </div>
Primer párrafo +
    +
  • Elemento de lista
    • +
  • Otro elemento
    • +
+ Otro párrafo
+

Puedo intercalar, en una zona delimitada por la etiqueta <div> algún + estilo específico aplicado a un elemento en concreto, como se muestra + a continuación. En este caso se ha utilizado un estilo en línea + para modificar el selector <p>

+ + + + + + + + + +
Este código......se ve así

<div class = "azul">
+ <p> Primer párrafo de la zona azul</p>
+ <p style = "color: red"> Este párrafo va en rojo + en medio de una zona azul</p>
+ <p>Otro párrafo de la zona azul</p>
+ </div>
Primer párrafo de la zona azul +

Este párrafo va en rojo en medio de una + zona azul

+ Otro párrafo de la zona azul
+
+

Si lo que pretendo es aplicar el estilo a una zona menor que la correspondiente + a un elemento en bloque, por ejemplo, una palabra dentro de un párrafo + utilizaré la etiqueta <span> y su cierre </span>

+ + + + + + + + + +
Este código......se ve así

<p> En este párrafo señalo + <span style="font-size:16px; font-weight: bold; color:orange"> + esta</span> palabra en tamaño de 16 píxeles, en negrita + y de color naranja</p>

En este párrafo señalo esta + palabra en tamaño de 16 píxeles, en negrita y de color naranja

+
+

Recuerda + que las hojas enlazadas figuran en el último lugar de prioridad y que, + sobre ellas se superpondrán la definición de estilo que hagamos + sobre la propia página y, en el primer lugar de prioridad, las modificaciones + que realicemos para una etiqueta en particular.

+

Además, a este orden de preferencia hay que añadirle que, si + el usuario tiene especificado un estilo en su navegador este tendrá + preferencia sobre los estilos creados por el autor cuando haya contradicción. + Por otra parte, el programa navegador (al que se denomina también Agente + de usuario) puede imponer su estilo si así lo tiene definido en las + configuraciones.

+
+

Diferentes medios... diferentes estilos

+

Probablemente recuerdes que, cuando se habló de los colores del texto + se recomendaba tener en cuenta el destino final que pretendíamos adjudicarle + a una página web. Escribir en blanco sobre fondo + azul marino es una combinación elegante y muy relajada para la vista + cuando visualizamos la página en pantalla, pero si queremos que + el contenido se imprima... el color blanco del texto va a dejar poca huella + sobre el folio en blanco.

+

Las hojas de estilo vienen en nuestra ayuda para casos similares a éste, + permitiéndonos especificar que un estilo tenga una apariencia cuando + el documento se muestre en una pantalla y otra diferente cuando se imprima. + Para hacerlo tendremos que recurrir a la directiva @media. + Tanto si se trata de una hoja de estilos externa, como interna o con estilos + en línea, cuando incluimos una regla @media las propiedades que se definan + a continuación se aplicarán cuando el documento se muestre en + el tipo de medio especificado. La aplicación más directa la encontraremos + al definir estilos para impresión (@media print) + y para pantalla (@media screen)

+
+

<style type="text/css">
+ <!--
+ /* Definimos las reglas de estilo de la forma habitual.*/
+
+
+ body { background-color: #000099; }
+ p { font-family: Arial, Helvetica, sans-serif; font-size: 14pt; color: #FFFFFF;}
+

+

/*Y ahora indicamos las características para imprimir*/
+ @media print {
+ body { background-color: #FFFFFF; }
+ p { font-family: "Times New Roman", Times, serif; font-size: 10pt; + color: #000000; }
+ }

+

/*Podríamos seguir especificando otros selectores o clases de aplicación + general*/
+ -->
+ </style>

+

Ver + ejemplo

+
+
+

Cuando + creamos estilos para un tipo de medio la sintaxis se modifica como si creáramos + una especie de "superselector": todos los selectores aplicables + a ese medio se encierran entre dos llaves precedidas por la regla @media y + el tipo de medio, tal como se ha marcado en la anterior muestra de código. +

+

No hemos especificado @media screen porque estamos trabajando normalmente + para pantalla y al no haber especificado nada los estilos se aplicarán + en el dispositivo que muestre la página. (realmente lo único + que necesitábamos era diferenciar la presentación del color + de fondo y el tipo de letra cuando se imprimiera)

+
+

Pero no solo podemos especificar la pantalla y la impresión como medios + para los que especificar estilos. El listado completo de medios actualmente + establecidos por el W3C es el siguiente:

+
+
all
+
Cualquier tipo de dispositivo .
+
aural
+
Referido a navegadores para personas con deficiencias visuales que utilizan + sintetizadores de voz para realizar una lectura de los contenidos.
+
braille
+
Dispositivos tactiles basados en lenguaje braille.
+
embossed
+
Impresoras en braille.
+
handheld
+
Dispositivos portátiles, caracterizados por una pantalla pequeña, + generalmente monocromos y con limitado ancho de banda.
+
print
+
Impresoras o documentos mostrados en pantalla en forma de visualización + previa a la impresión.
+
projection
+
Presentaciones proyectadas o impresión de transparencias.
+
screen
+
Referido, fundamentalmente a pantallas de ordenador.
+
tty
+
Utilizado para referirse a medios que presentan la información con + un tamaño fijo de letra, como por ejemplo los teletipos.
+
tv
+
Referido a dispositivos de tipo televisión, caracterizados por una + menor resolución que las pantallas de ordenador, pantallas con capacidad + limitada de desplazamiento y presencia de sonido.
+
+

Cada uno de estos medios puede disponer de algunas propiedades especificas, + que se pueden consultar en la documentación del W3C. Se puede consultar, + por ejemplo, la traducción de las especificaciones del W3C para hojas + de estilo auditivas que es una de las mas desarrolladas.

+ + diff --git a/html2005/estilos/estilos3.htm b/html2005/estilos/estilos3.htm new file mode 100644 index 0000000..ccb6ede --- /dev/null +++ b/html2005/estilos/estilos3.htm @@ -0,0 +1,326 @@ + + + + + + +Crear estilos + + + + + + + + + + + + +

Vamos a hacer un recorrido por las propiedades que afectan al texto y su forma +de modificarlas mediante estilos.

+ +

Color

+ +

El atributo de color puede aplicarse al texto, pero también + a otros elementos de la página.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

black

 +

silver

 +

gray

 +

white

+

 

 +

 

 +

 

 +

 

+

maroon

 +

red

 +

purple

 +

fuchsia

+

 

 +

 

 +

 

 +

 

+

green

 +

lime

 +

olive

 +

yellow

+

 

 +

 

 +

 

 +

 

+

navy

 +

blue

 +

teal

 +

aqua

    
+

Propiedad: color +

Valores y ejemplos: Para nombrar un color pueden utilizarse varios + métodos: +

+

Espaciado de letra

+

Podemos especificar una cantidad para aumentar o disminuir el espaciado +entre las letras de un texto.

+

Propiedad: letter-spacing

+

Valores: Se pueden expresar introduciendo + un valor entero que indique + + la medida en pixels + (px), puntos (pt), pulgadas (in), centímetros (cm), anchura + de la letra eme (em) o altura de la letra equis mayúscula(ex). Se utiliza el + punto como separador decimal en lugar de la coma. Para disminuir el espaciado + se utilizan valores negativos

+
+

Ejemplos:

+Aumentado en 15 píxeles
Aumentado en 2pt
Aumentado en 0.1in
Aumentado en 0.3cm
Aumentado en 1em
Aumentado en 1ex
Disminuido en 1px
+

Espaciado + de palabras

+

Podemos especificar una cantidad para aumentar o disminuir el espaciado entre + las letras de un texto.

+

Propiedad: word-spacing

+

Valores: Se pueden expresar introduciendo un valor entero + que indique la medida en pixels (px), puntos (pt), pulgadas (in), centímetros + (cm), anchura de la letra eme (em) o altura de la letra equis (ex). + Se utiliza el punto como separador decimal en lugar de la coma. Para disminuir + el espaciado se utilizan valores negativos

+

Ejemplos:

+Aumentado en 15 píxeles
+Aumentado en 5pt
+Aumentado en 1in
+Aumentado en 0.7cm
+Aumentado en 2em
+Aumentado en 1ex
+Disminuído en 2px

Alineación

+

Propiedad: text-align

+

Valores: Nos permite introducir todos los valores de alineación soportados + por el estándar HTML 4.0 mediante left, center right + y justify.

+

Ejemplos: Todos los textos de este curso están diseñados + con el atributo justify para evitar el efecto denominado de "banderas" o "gallardetes" provocado + por la falta de ajuste del final o principio de renglón respecto al + margen.

+

Decoración

+

Propiedad:text-decoration

+

Valores y ejemplos: Se especifican mediante las palabras reservadas + + +none (ninguno), + underline (subrayado), + overline (superrayado), +line-through (tachado). +Aunque parezca un contrasentido uno de los más útiles puede ser +el valor none al eliminar, por ejemplo, la decoración +subrayada de los vínculos. También se puede utilizar el valor blink (parpadeante), +pero prácticamente sólo es soportado por Netscape y Mozilla mientras que Internet +Explorer 6, Konkeror 3.1.3 o incluso Galeón 1.3.9 que está basado en el mismo +motor que Mozilla no lo soportan.
+

+

Sangría de primera línea

+

Propiedad: text-indent

+

Valores: Se pueden expresar introduciendo un valor entero que indique + su medida en puntos (pt), pulgadas (in), centímetros (cm), píxels + (px) o porcentaje(%)

+

Ejemplos:

+

Este párrafo tiene aplicado + un sangrado de 45 puntos y por eso su primera línea se inicia tras dejar + un espacio en blanco al principio del renglón.

+

 

+

Control de letra

+

Nos permite indicar si un elemento o fragmento se mostrará tal como se escribe + o con alguna variación en las letras

+

Propiedad: text-transform

+

Valores: Aparte de + + + none que es el valor por defecto, podemos usar +capitalize que escribe todas las primeras letras en mayúsculas, uppercase +que muestra todo el texto en mayúsculas y +lowercase que lo presenta en minúsculas independientemente de cómo +lo hayamos escrito

+

Ejemplos:

+ + + + + + + + + + + + + + + + + + +
Este texto... ...se ve así
Aquí aplicamos capitalize + Aquí aplicamos capitalize

En este caso es uppercase

+

+ +

En este caso es uppercase

+
Y éste es Lowercase + Y éste es Lowercase
+
+

 

+

Interlineado

+

Propiedad: line-height

+ +

Valores: Se pueden expresar introduciendo un valor entero que indique + su medida en puntos (pt), pulgadas (in), centímetros (cm), pixels (px) o porcentaje + (%).

+ +
+

Ejemplos:

+

En esta línea se ha empleado un interlineado + del 200%, de forma que presente una distancia doble a la habitual, respecto + a la anterior y la posterior .

+

En esta línea se ha empleado un interlineado + + de 10 puntos. Como el tamaño de la letra es también de 10 puntos se puede comprobar + +que la parte superior de las letras llega hasta la base del renglón anterior.

+ +

Pseudoelementos first-letter y first-line

+

Como ya habíamos mencionado existen un par de pseudoelementos que tienen + que ver con el texto porque permiten modificar la primera letra o el primer + renglón de un texto.

+

Su utilización sigue la sintaxis selector:pseudolemento {propiedad:valor} o + bien selector.clase:pseudoelemento{propiedad:valor} o selector#id:pseudoelemento{propiedad:valor} si + pretendemos aplicarlo a un selector con una clase o un identificador específico.

+

Ver +ejemplo

+
+ +

+ + + +
+ + + + + + + + diff --git a/html2005/estilos/estilos4.htm b/html2005/estilos/estilos4.htm new file mode 100644 index 0000000..1582b55 --- /dev/null +++ b/html2005/estilos/estilos4.htm @@ -0,0 +1,327 @@ + + + + + + +Crear estilos + + + + + + + + + + + +

A continuación vamos a ver una serie de propiedades que afectan a las fuentes + que utilizamos para mostrar el texto y la forma de modificarlas + mediante estilos.

+ +

Estilos de letra

+

Propiedad: font-style

+

Valores: Se puede utilizar normal o italic. Permite alternar entre + la presentación entre ambos tipos. Existe un tercer tipo oblique pero + la mayoría de los navegadores la muestran igual que la itálica

+

Ejemplos: Letra normal Letra + itálica Letra oblicua

+

Variantes

+

Nos permite hacer que la fuente se muestre con todos los caracteres en mayúsculas + pero en un tamaño más reducido.

+

Propiedad: font-variant

+

Valores: Normal o small-caps (mayúsculas pequeñas)

+
+

Ejemplos:

+

aquí se ha aplicado small-caps + a un texto escrito totalmente en minúsculas. ESTE SERÍA + EL TAMAÑO NORMAL DE LAS MAYÚSCULAS DE ESTA FUENTE

+
+

Grosor de la letra

+

Propiedad: font-weight

+

Valores: El valor básico es bold (negrita) por contraposición + al valor por defecto que es normal.

+

También pueden utilizarse dos valores relativos: bolder (más + gruesa) y lighter(más fina) que el grosor de fuente + que los antecede.

+

Por último disponemos de una escala graduada desde 100, 200, ...hasta + 900 en las que el valor normal es el 400, y 700 el equivalente a la negrita, + siendo el resto grosores relativos con respecto a este. A pesar de que esta + sea la especificaciónm la visualización en pantalla no es progresiva, + como puedes comprobar.

+
+

Ejemplos:

+

Letra bold

+
+ + + + + + + + + + + + + + + + + + + + + + + +
100200300400500600700800900
grosorgrosorgrosorgrosorgrosorgrosorgrosorgrosorgrosor
+
+

Este fragmento esta en grosor normal. Aquí + se ha aplicado bolder. Y ahora aplicamos + lighter y volvemos a "adelgazar" la fuente hasta su grosor normal

+
+

Tamaño de la fuente

+

Propiedad: font-size

+

Valores: Se pueden expresar introduciendo un valor entero que indique + su medida en puntos (pt), pulgadas (in), centímetros (cm), pixels (px), + anchura de la letra eme (em) o altura de la letra equis (ex). También + se puede utilizar un valor porcentual respecto al tamaño base que se + utiliza por defecto.

+

Por último podemos también indicar el tamaño medianto + palabras reservadas que indican los valores relativos, de menor a mayor, respeto + al valor por defecto que es el medium: xx-small, x-small, small, medium, large, x-large, xx-large

+

Una última posibilidad es utilizar las palabras reservadas smaller y larger que, + en lugar de basarse en el valor medium, toman como valor de referencia el tamaño + de fuente usado inmediatamente antes y reducen o amplian el mismo al siguiente + tamaño en la escala. (Lógicamente no tienen valor cuando nos + encontramos en los extremos inferior o superior de la escala y pretendemos + seguir disminuyendo o aumentando respectivamente)

+
+

Ejemplos:
+ Tamaño 250%
+ Tamaño 18 puntos
+ Tamaño 2 em Tamaño + 1 em
+ Tamaño 3 ex Tamaño + 1 ex
+ Tamaño 18 píxels
+ Tamaño 1 centímetro
+ Tamaño 0,5 pulgadas

+ + + + + + + + + + + + + + + + + + + +
xx-smallx-smallsmallmediumlargex-largexx-large
tamañotamañotamañotamañotamañotamañotamaño
+


+

+
+
+

Si necesitas + utilizar decimales tendrás que utilizar la notación anglosajona, + en la que el separador decimal es el punto en lugar de la coma.

+

MUY IMPORTANTE: Si utilizas unidades absolutas (px, pt, + in, cm) la mayoría de los navegadores no serán capaces de modificar + el tamaño cuando el usuario lo solicite y manejarán mal los + tamaños relativos. Sería conveniente utilizar como unidad de + medida la em que adoptará la anchura por defecto (o + la ex que tomará la altura) del valor por defecto + cada uno de los navegadores y permitirá unos ajustes correctos al redimensionar.

+
+

Interlineado

+

Repetimos la referencia al interlineado porque también podemos considerarlo + como una propiedad aplicable a las fuentes.

+

Propiedad: line-height

+

Valores: Se pueden expresar introduciendo un valor entero que indique + su medida en puntos (pt), pulgadas (in), centímetros (cm), pixels (px) + o porcentaje (%).

+
+

Ejemplos:

+

En esta línea se ha empleado un interlineado + del 200%, de forma que presente una distancia doble a la habitual, respecto + a la anterior y la posterior .

+

En esta línea se ha empleado un interlineado + de 10 puntos. Como el tamaño de la letra es también de 10 + puntos se puede comprobar que la parte superior de las letras llega hasta + la base del renglón anterior.

+
+

+

Familia

+

Propiedad: font-family

+

Valores: Se puede utilizar el nombre de la letra. Es conveniente añadir, + separados por comas, nombres de letras similares y finalizar, por si no está instalada + ninguna de ellas, con el nombre de la familia. Las familias de letras básicas + son: serif, sans-serif, monospace, cursive y fantasy. Si el nombre de la fuente + tiene espacios en blanco habría que encerrarlo entre comillas para que se leyeran + ambas palabras como una única cadena.

+
+

Ejemplos: Podríamos hacer una referencia del tipo font-family:Arial,Helvetica,Verdana,sans-serif

+

Familia serif
+ Familia sans-serif
+ Familia monospace
+ Familia cursive
+ Familia fantasy +

+

Si + necesitas utilizar decimales tendrás que utilizar la notación + anglosajona, en la que el separador decimal es el punto en lugar de la coma.

+

+

Combinar los atributos referentes a la fuente de letra +

En muchas ocasiones puede resultarnos más cómodo agrupar todos + los valores de las diferentes propiedades en una propiedad abreviada denominada, + sencillamente, + font.

+

La propiedad abreviada font requiere el siguiente orden en la presentación + de los valores: estilo, variante, grosor, tamaño/interlineado, familia

+

Tal vez te haya llamado la atención la referencia tamaño/interlineado. + En la especificación actual, si utilizamos interlineado debe aparecer junto + al valor de tamaño y separado del mismo por una barra de división / ).

+

Una buena práctica es definir en la etiqueta body las características de la + fuente puesto que se heredarán para todos los elementos textuales.

+
+

Ejemplos:

+

body {font: italic small-caps bold 12pt/35px sans-serif} + + Haría que todo el texto de la página tomara como base la apariencia + + + que muestra este párrafo.

+

body {font: bold 11pt/9px serif} + + haría que todo el texto de la página tomara como base la apariencia + + + que se muestra aquí (al no haber incluido valores de estilo ni variante + se toma el valor por defecto).
+  

+
+

 

+ +

Márgenes

+ +

Propiedad: margin

+ +

Valores: Se pueden expresar introduciendo un valor entero que indique + su medida en puntos (pt), pulgadas (in), centímetros (cm), píxels (px), + anchuras de eme (em) o alturas de x (ex)

+ + + +

Los márgenes se suelen especificar dentro de la etiqueta body ya que + + habitualmente se utilizan para definir toda la página.

+ +

 

+ +

Interlineado

+ +

Propiedad: line-height

+ +

Valores: Se pueden expresar introduciendo un valor entero que indique + + su medida en puntos (pt), pulgadas (in), centímetros (cm), pixels (px) o porcentaje + (%).

+ +
+

Ejemplos:

+

En esta línea se ha empleado un interlineado + del 200%, de forma que presente una distancia doble a la habitual, respecto + a la anterior y la posterior .

+

En esta línea se ha empleado un interlineado + + de 10 puntos. Como el tamaño de la letra es también de 10 puntos se puede comprobar + +que la parte superior de las letras llega hasta la base del renglón anterior.

+ +

 

+ + +
+ +

+ + + +
+ + + + + + + + diff --git a/html2005/estilos/estilos5.htm b/html2005/estilos/estilos5.htm new file mode 100644 index 0000000..264ac6e --- /dev/null +++ b/html2005/estilos/estilos5.htm @@ -0,0 +1,158 @@ + + + + + + +Crear estilos + + + + + + + + + + + + +

Con la propiedad fondo podemos controlar el color de fondo un elemento de + la página, establecer imágenes como fondo y decidir su posición + dentro de la página y si se repetirán o no.

+ +

Color de fondo

+

Propiedad: background-color

+

Como todas las propiedades de los fondos podemos aplicarla a toda la página + o sólo a un determinado elemento, elgiendo una etiqueta de html como + selector para aplicarlo de forma genérica o bien mediante la utilización + de clases o selectores id.

+

Valores: podemos utilizar el nombre o la referencia RGB de un color + .

+
+

Ejemplos:

+

En este párrafo se ha aplicado un fondo utilizando la etiqueta background-color:orange

+
+ + + + + + + + + +
Cabecera
Cabecera
celda 1
celda 2
+

Esta tabla toma su color de un estilo definido en una hoja interna para + el elemento th

+

<style + type="text/css">
+<!--
+th {background-color: #aabc35}
+-->
+</style>

+
+

Imagen de fondo

+

Propiedad: background-image

+

Valores: podemos utilizar la referencia relativa a una imagen de nuestro + propio sitio o bien una referencia absoluta. Con ello podemos hacer que los + fondos se apliquen solamente a una determinada porción del documento, + en lugar de hacerlo a toda la página. Aunque no deberíamos hacerlo, + incluso aunque tuviéramos control sobre la url a la que apuntamos, si + usamos referencias absolutas de imágenes en la red solo podremos comprobar + el efecto cuando dispongamos de conexión a internet.

+
+

Ejemplos:

+

Ahora + se ha utilizado una imagen como fondo y la forma de expresarlo ha sido background-image:URL(claro09.jpg)

+
+

La inclusión de una imagen como fondo lleva asociadas tres propiedades que + nos permitirán especificar si la imagen se repite, la posición en caso de no + repetirse y el desplazamiento vertical si la página ocupa más de una pantalla.

+

Posición de la imagen

+

Propiedad: background-position

+

Valores: Existen varias posibilidades para establecer la + posición:

+ +

Repeticiones

+

Propiedad: background-repeat

+

Valores: Si no especificamos esta propiedad se adoptará el + valor por defecto repeat. Podemos también optar por indicar + que no se repita con el valor no-repeat (en los ejemplos de + posicionamiento se ha utilizado ya esta propiedad) o bien indicar que queremos + que se repita en horizontal repeat-x o en vertical repeat-y. Ver ejemplo

+

Desplazamiento

+

Podemos indicar si deseamos que la imagen de fondo se desplace con el resto + de la página cuando esta ocupe más de una pantalla o si deseamos que permanezca + fija, a modo de "marca de agua", mientras se desplaza el resto del + contenido.

+

Propiedad: background-attachment

+

Valores: el valor por defecto es scroll, + mientras que si utilizamos fixed la imagen permanecerá fija. Ver + ejemplo

+
 
+ +
+ +

+ + + +
+ + + + + + + + diff --git a/html2005/estilos/estilos6.htm b/html2005/estilos/estilos6.htm new file mode 100644 index 0000000..c4cb736 --- /dev/null +++ b/html2005/estilos/estilos6.htm @@ -0,0 +1,173 @@ + + + + + + +Crear estilos + + + + + + + + + + + + +

Para poder aplicar bordes utilizando HTML era imprescindible crear tablas. + Aparte de los problemas de accesibilidad está claro que lo que hacemos es utilizar + un elemento cuya función es darle estructura al contenido para conseguir un + formato gráfico en la presentación.

+

Gracias a las hojas de estilo podremos aplicarle bordes a cualquier elemento, + incluso una palabra dentro de un párrafo + y con variedad de efectos.

+

Propiedad abreviada

+

Aunque en ocasiones anteriores hemos colocado en último lugar la agrupación + de propiedades de forma simplificada, en este caso presentamos en primer lugar + la propiedad base para tenerla en cuenta como referencia dada la gran cantidad + de posibles combinaciones de valores y propiedades.

+

Utilizando el término border podemos especificar todas + las características aplicables a los bordes sobre las + que se puede incidir, que son el color, el grosor y el tipo de trazo.

+

Antes de entrar a ver cada una de estas propiedades particulares es conveniente + tener en cuenta una cuestión previa sobre la identificación de + los bordes, porque tenemos la posibilidad de indicar las propiedades de cada + uno individualmente, mientras que si utilizáramos la propiedad genérica border + aplicaríamos los mismos valores a todos ellos.

+

Identificación de los bordes

+

Para referirnos a cada uno de los bordes del rectángulo que rodea a cada elemento + utilizamos las palabras top , right, bottom y left. + La enumeración no ha sido al azar, sino que sigue el orden por defecto en sentido + horario: borde superior, derecho, inferior e izquierdo.

+ +

Como norma general respecto al orden cuando aplicamos cualquiera de las + propiedades que veremos a continuación:

+ +

Color

+

Propiedad: border-color

+

Valores: podemos utilizar el nombre CSS o la referencia RGB de un color + en cualquiera de sus notaciones tal como ya hemos visto.

+

Recuerda lo que acabas de ver sobre la cantidad de valores especificados para + esta propiedad y su orden de aplicación.

+

Estilo del trazo

+

Propiedad: border-style

+

Valores: tenemos una serie de palabras reservadas cuyo efecto puedes + ver en los ejemplos.

+
+

Ejemplos:

+

solid

+

dotted

+

dashed

+

double + (si se indica el grosor fino se ve como el borde simple o no se vé según + el navegador)

+

ridge + (el efecto es más perceptible con bordes medios o gruesos)

+

inset + (el efecto es más perceptible con bordes medios + o gruesos)

+

outset + (el efecto es más perceptible con bordes medios + o gruesos)

+
+

La inclusión de una imagen como fondo lleva asociadas tres propiedades que + nos permitirán especificar si la imagen se repite, la posición en caso de no + repetirse y el desplazamiento vertical si la página ocupa más de una pantalla.

+

Grosor

+

Propiedad: border-width

+

Valores: Podemos especificar el grosor indicando un valor + en cualquiera de las unidades admitidas, o bien mediante las palabras reservadas + que se muestran en el ejemplo.

+
+

Ejemplos:

+

thin

+

medium

+

thick

+

ejemplo + fijando un valor: 0,25 cm

+
+

Agrupando propiedades de los bordes

+

Como ya se comentó al inicio del apartado podemos agrupar las propiedades + referentes al borde bajo una propiedad abreviada border a + la que le adjudicaríamos los valores correspondientes + a grosor, estilo, y color, pero teniendo en cuenta que al hacerlo así solo + podremos indicar un valor para cada propiedad que se aplicaría a todos + los bordes por igual.

+
+ +

+ + + +
+ + + + + + + + diff --git a/html2005/estilos/estilos7.htm b/html2005/estilos/estilos7.htm new file mode 100644 index 0000000..e0b7f1c --- /dev/null +++ b/html2005/estilos/estilos7.htm @@ -0,0 +1,222 @@ + + + + + + +Crear estilos + + + + + + + + + + + + +

Lo primero que necesitaremos es conocer, aunque sea someramente lo que suponen + los elementos en bloque y los elementos en línea a la hora de construir una + página.

+

Elementos en bloque y elementos en línea

+

Para empezar, y aunque sea de una forma muy burda, podríamos indicar que los + elementos en bloque son aquellos que generan de forma automática un salto de + linea previo y otro posterior, mientras que los elementos en + línea forman parte de una línea o renglón. Por ejemplo, <p> o <h3> serían elementos + en bloque, mientras que <strong> o <em> serían elementos en bloque.

+

Aunque hay algunos elementos más que entran dentro de la categoría de elementos + en bloque lo importante para abordar los márgenes y rellenos, es tener en cuenta + que para formatear cualquier elemento en la página, sea en línea o en bloque, + lo que se genera es un cuadro, cuyo contenido básico es el que se encuentra + dentro de las etiquetas que delimitan el elemento.

+

+

Cada uno de estos cuadros está formado por varios componentes que completan + sus dimensiones:

+
+
Zona de contenido:
+
Forma el núcleo básico y sus dimensiones son la altura y la anchura necesarias + para que quepa el contenido. En el caso de los elementos en línea se ajustará + plenamente al texto, mientras que en los elementos en bloque irá ajustando + la altura pero puede presentar zonas vacías.
+
Borde:
+
Línea que rodea la zona de contenido. Para visualizarlo deberemos + especificar unas propiedades que ya conocemos (grosor, estilo de trazo y + color).
+
Relleno:
+
Espacio que separa el contenido propiamente dicho del borde. Tendrá el + color de la zona de contenido.
+
Margen:
+
Espacio exterior al borde que lo separa del contenedor "padre". En muchos + momentos este contenedor "padre" es el propio lienzo
+
+

Nos + encontramos con un elemento en bloque <h1> que genera una caja contenedora + en la que aparece el texto.

+

La captura de la imagen se ha hecho de una pantalla en la que se habían +especificado como propiedades del selector h1 las siguientes:

+ +

Como el texto no ocupa todo el espacio de la caja comprobamos que queda un + espacio vacío en la zona derecha. También vemos que entre la zona de + contenido y el borde azul queda una zona, que mantiene el mismo color del resto + del cuadro, cuyo grosor es el establecido por la propiedad padding.

+

Entre el borde azul y el límite del contenedor superior (en nuestro caso body) + y los elementos adyacentes observamos la existencia de un espacio transparente + cuyo grosor corresponde al valor de margin.

+

Una + cuestión que conviene tener en cuenta es que, cuando se superponen verticalmente + dos zonas de margen no se suman sus anchuras, sino que se toma el valor máximo + de las dos y ese es el que se aplica. Si lo piensas detenidamente parece que + es la opción que más se puede acercar a lo que se supone que nos + planteamos cuando establecemos márgenes para diseñar un espacio. + En la imagen que se muestra hemos aplicado un margin:20px al + selector <h2> que constituía el segundo párrafo, con lo + cual las dos zonas se superponen. En el caso de que el margen del segundo bloque + hubiera sido, por ejemplo, de 10 píxeles habría prevalecido el + valor 20 del bloque <h1>, mientras que si hubiera sido superior a 20 sería + ese valor el que se habría tomado como referencia para separar ambos + bloques verticalmente.

+

La anchura y la altura total de un elemento corresponde a la suma de la zona + de contenido, el relleno, el borde y el margen. En general, podremos especificar + la anchura y la altura de los elementos en bloque, mientras que los elementos + en línea la anchura y la altura serán las mínimas para que quepa el elemento.

+

Espero que con esta visión básica de los cuadros (box) hayas podido explicarte + algunas situaciones que tal vez te hayan llamado la atención en momentos previos + cuando has aplicado propiedades como el color de fondo o los bordes. Es probable + que si ahora repasas algunas de estas prácticas previas puedas entender claramente + hasta dónde llegaban en algunos momentos los colores y por qué.

+

Márgenes. Propiedad abreviada.

+

La magnitud que podemos variar en los márgenes es su anchura. Como ya hemos + visto cuando revisamos la propiedad border, el orden de aplicación de los valores + declarados es en sentido horario comenzando por el margen superior.

+

Propiedad: margin

+

Valores: puede utilizarse un valor absoluto, + expresado en cualquiera de las unidades admisibles en CSS, un valor relativo + expresado porcentualmente en porcentaje o el valor auto + para que cada navegador aplique su interpretación por defecto. +
+

+

Márgenes. Propiedad desarrollada.

+

Podemos desglosar la propiedad para especificar únicamente alguno de los márgenes + mientras que los demás permanecen en su valor automático.

+

Propiedad: margin-top, margin-right, margin-bottom, margin-left

+

Una aplicación inmediata de los márgenes

+

Uno de los problemas que suelen solucionarse de forma habitual es el centrado + de un bloque dentro de la página. Hay una solución sencillísima utilizando + hojas de estilo:

+
+

Lo primero que hacemos es crear una capa con la etiqueta <div> que incluya + el contenido que queremos que aparezca centrado.

+

El contenido CSS para conseguir el efecto sería

+

#centrada {width:450px; margin:auto;}

+

También se ha añadido un borde para que resulte claro el efecto.

+
+

Parece que el código es muy sencillo y correcto...si estás viendo la + página con Mozilla, pero si la estás viendo con Internet Explorer pensarás + que se ha escapado algún error porque ves el cuadro alineado a la izquierda. + Es uno de los + problemas con la implementación que hace Internet Explorer de las CSS. + Mientras que en Mozilla, Konqueror o Galeón se ve perfectamente, en + Internet Explorer hay que hacer una pequeña componenda que se muestra + a continuación:

+
+
+

Hay que crear dos capas contenedoras: una general y dentro de ella + la centrada y crear los selectores de tipo id, o las clases si lo preferimos, + para especificar las propiedades CSS.

+

#Contenedora { width:100%; text-align:center;}

+

Aunque la propiedad text-align no debería afectar a la capa + sino solamente al texto, Internet explorer parece que ha optado por + implementar esta propiedad como un centrado genérico aplicable también + a las capas.

+


+ #CentradaIE { width:450px; margin:auto; text-align:justify;}

+

Ahora, se corrige la alineación del texto en la capa en la + que está realmente + el contenido

+
+
+ +

Relleno. Propiedad abreviada.

+

Al igual que en los márgenes la magnitud que podemos variar es su anchura. + El comportamiento es totalmente homologable, aplicándose los valores de la + misma forma, por lo que unicamente nombraremos la propiedad

+

Propiedad: padding

+

Rellenos. Propiedad desarrollada.

+

Desglosamos la propiedad exactamente igual que los márgenes.

+

Propiedad: padding-top, padding-right, padding-bottom, padding-left

+

Anchura y altura

+

En los elementos en bloque podemos especificar la anchura y la altura, mientras + que no es posible hacerlo con los elementos en línea que las adecúan al mínimo + necesario para mostrar el contenido (incluídos rellenos, bordes y márgenes)

+

Propiedad: width (anchura) height (altura)

+

Valores: además del valor auto podemos especificar + las dimensiones en términos absolutos utilizando como siempre cualquiera de + las unidades aceptables y en términos porcentuales sobre el contenedor en el + que se inserta el bloque al que atribuimos dimensiones.

+

 

+
+ +

+ + + +
+ + + + + + + + diff --git a/html2005/estilos/estilos8.htm b/html2005/estilos/estilos8.htm new file mode 100644 index 0000000..5050e79 --- /dev/null +++ b/html2005/estilos/estilos8.htm @@ -0,0 +1,134 @@ + + + + + + +Crear estilos + + + + + + + + + + + + +

Respecto a las listas son tres las propiedades que podemos modificar: el + tipo de marcador utilizado, su posición respecto al texto y la posibilidad + de utilizar una imagen como marcador.

+ +

Tipos de marcadores

+

Propiedad: list-style-type

+

Valores: Son todos los establecidos por la especificación +HTML 4.01 tal como se muestra en el ejemplo. Además de estos podrían hay también +definida una lista de posibilidades en otros idiomas para las listas ordenadas

+
+ + + + + + + + +
listas desordenadaslistas ordenadas
    +
  • disc
    • +
  • circle
    • +
  • square
+
    +
  1. decimal
    2. +
  2. decimal-leading-zero
    3. +
  3. lower-roman
    4. +
  4. upper-roman
    5. +
  5. lower-alpha
    6. +
  6. upper-alpha
    7. +
+ +
+

Posición

+

Propiedad: list-type-position

+

Valores: Con el valor outside el marcador de la lista + se colocará tal como hemos visto en los ejemplos fuera del bloque formado por + el texto del elemento, mientras que con inside se integrará + en el primer renglón del elemento

+
+

Ejemplos:

+
    +
  1. Este ítem + de la lista tiene definida la posición del marcador como outside, + por lo que se muestra fuera del cuadro creado por el contenido textual del + mismo. Es la posición a la que estamos + más habituados.
    2. +
  2. Sin + embargo, este ítem + tiene definida la posición del marcador como inside, por lo que se + integra en el primer renglón del texto formando parte del mismo cuadro +
    3. +
+

Se ha utilizado también un color de fondo para mostrar cómo la posición inside se + integra dentro del cuadro formado por el elemento, mientras que si el marcador + tiene el valor outside queda fuera del mismo.

+
+

Imagen como marcador

+

Propiedad: list-style-image

+

Valores: habrá que indicar la situación de la imagen con la sintaxis + url(ruta_hacia_la_imagen)

+
+

Ejemplos: Ejemplos:

+ +

 

+
+

Cualquiera de las tres propiedades puede aplicarse a un ítem en particular <li> o + a toda la lista <ul> u <ol> según corresponda. La aplicación como propiedad + de la lista, bien sea en una hoja externa o interna, resulta siempre mucho + más cómoda puesto que garantiza la herencia y nos evita tener que repetir las + propiedades en cada uno de los elementos.

+
+ +

+ + + +
+ + + + + + + + diff --git a/html2005/estilos/estilos9.htm b/html2005/estilos/estilos9.htm new file mode 100644 index 0000000..17e7335 --- /dev/null +++ b/html2005/estilos/estilos9.htm @@ -0,0 +1,406 @@ + + + + + +Crear estilos + + + + + + + + + +

Bajo el epígrafe de diseño visual se incluyen propiedades referidas + a la forma en que podemos controlar como se muestra un elemento, como aparecerá + una imagen en relación a otro elemento, el posicionamiento de un elemento + respecto a su posición habitual o con una posición fija dentro + de la página, la determinación + de la visibilidad de un elemento y el orden en el que se mostrarán las capas + si estas se superponen, la creación de recortes para mostrar la información + y cómo mostrarla cuando supera el espacio asignado.

+ +

Cómo se muestran los elementos

+
+

Ya hemos visto que hay elementos en bloque y en línea y que su forma de construir + el cuadro contenedor difiere bastante. Mediante el uso de CSS podemos indicarle + al navegador que debe mostrar un elemento creando un tipo de cuadro distinto + al que le correspondería por su naturaleza.

+
+

Propiedad: display

+

Valores: aunque podríamos considerar otros recogidos en la especificación + vamos a tener en cuenta sólo inline y block para + intercambiar la forma de presentación de las dos principales disposiciones.

+
+

Ejemplo 1

+

Si utilizo el selector span para marcar una palabra de una frase y aplicarle + un estilo lo normal es que ese estilo genere un cuadro de elemento en línea + ya que esa es la presentación predeterminada + para los fragmentos de texto. A continuación se repite este mismo texto + aplicándole la propiedad display:block a la palabra presentación.

+

Resultado

+

Si utilizo el selector span para marcar una palabra de una frase y aplicarle + un estilo lo normal es que ese estilo genere un cuadro de elemento en línea + ya que esa es la presentación predeterminada + para los fragmentos de texto. A continuación se repite este mismo texto aplicándole la + propiedad display:block a la palabra presentación.

+

Ejemplo 2

+

En el segundo ejemplo marcaremos los párrafos con display:inline

+

Este es el segundo párrafo. Ahora repetimos los dos párrafos + correspondientes a este ejemplo y aparecerán + uno a continuación de otro como si no hubiese salto de párrafo.

+

Resultado

+

En el segundo ejemplo marcaremos el segundo párrafo con display:inline

+

Este es el segundo párrafo. Ahora repetimos los dos párrafos + correspondientes a este ejemplo y aparecerán + uno a continuación de otro como si no hubiese salto de párrafo.

+
+

 

+

Posición flotante

+

Se trata de una propiedad que encuentra su principal aplicación en las imágenes, + aunque también nos permitirá situar elementos textuales y conseguir interesantes + efectos de inclusión, especialmente si utilizamos como complemento los fondos.

+

Propiedad: float

+

Valores: left hará flotar el elemento afectado en + la zona izquierda, right en la derecha y none impedirá + la flotación haciendo que el elemento se muestre en la posición que le corresponde + en el flujo de texto.

+
+

Ejemplos: En el ejemplo que se muestra se han creado dos identificadores + a los que se les ha aplicado la propidedad float y algunas más de fondos, + márgenes y rellenos para que su presentación visual tenga "aire" entre las + diferentes zonas. Ver ejemplo

+
+

Zonas de flotación prohibidas

+

Si no nos interesa que a un determinado elemento se le añadan zonas flotantes +podemos indicarlo mediante una propiedad específica

+

Propiedad: clear

+

Valores: left impedirá la flotación de un elemento + a la izquierda del que lleva la propiedad, right hará lo + propio a la derecha y both afectará a ambos lados.

+
+

Ejemplos: Se repite el ejemplo anterior pero se ha evitado la flotación + de la zona a la que habíamos llamado mancheta. Ver + ejemplo

+
+

Antes de continuar recordemos cual es el proceso habitual de generación de + páginas en una ventana de ordenador. Es lo que se denomina flujo + normal:

+ +
+

Vamos a comprobar con un ejercicio práctico lo que acabamos de comentar.

+ +
+

 

+

Para poder modificar la apariencia visual disponemos en CSS2 de la posibilidad + de alterar el flujo normal especificando la posición de los elementos. + Se trata de una propiedad muy potente y, aunque podemos aplicarla directamente + sobre cualquier elemento, la recomendación sería que lo hicieras +creando contenedores de bloque con la etiqueta <div> y especificando en +ellos la posición.

+

Así pues, antes de ver los valores y los efectos + de los mismos comentemos que Mozilla dispone de un icono que nos permite generar + una capa, que no es más que un contenedor en bloque, con una simple + pulsación + sobre el icono que + creará una capa vacía que se irá rellenando con el contenido que vayamos + tecleando.

+

Si lo que pretendemos es crear una capa a partir de contenidos que + ya estaban incluidos en la página basta con que los señalemos arrastrando y + pulsemos el mismo icono para que se genere el contenedor para englobarlos a + todos.

+

Cuando nos situemos sobre una capa el programa lo indicará haciendo + aparecer sus límites y modificando el icono de las capas que aparecerá como . + Podremos moverla de un sitio a otro si pulsamos sobre y + arrastramos hasta la nueva posición o bien modificar su tamaño utilizanod los + tiradores de los vértices y el centro de los lados.

+

Para modificar los estilos que afectan a la capa bastará con hacer doble clic + sobre su interior y modificar o añadir las propiedades que necesitemos.

+
+

+ +
+

Posición de un elemento

+

Habrás comprobado que al crear las capas Mozilla ha introducido unos + códigos de estilo. Como las hemos movido hasta situarlas en un punto concreto + de la página ha utilizado el valor absolute que es + uno de los posibles.

+

Propiedad: position

+

Valores: Esta propiedad indicará la forma de calcular + la posición del elemento utilizando los valores absolute, relative y + fixed, pero para completar el cálculo será necesario + añadir + luego las propiedades left, top, bottom o + right indicando + las distancias en cualquiera de las unidades admitidas.

+
+

Ejemplos:

+

Absolute. Ver + ejemplo

+

Relative. La posición relativa se calcula a partir de la posición que ocuparía + un elemento si siguiera el flujo normal. El resto de los elementos no se ajustan + a la posición modificada por lo que puede ocurrir que el elemento se superponga + sobre otros. Ver + ejemplo

+

Fixed. Se trata de una variante de la posición absoluta cuyo efecto es similar + al de las imágenes de fondo que se mantienen en una posición fija independientemente + del desplazamiento de la página. Cuando se aplican a un medio impreso, formando + algo similar a una cabecera, se repiten en todas las páginas. Ver + ejemplo

+
+

Visibilidad

+

Como el nombre de la propiedad sugiere se refiere a la posibilidad de hacer + que un elemento resulte visible o invisible. Su utilidad reside en la combinación + con scripts que permitan mostrar u ocultar capas al realizar determinadas acciones + con el ratón, pero este tema excede los contenidos de este curso, aunque puedes + realizar alguna búsqueda sobre "javascript para mostrar y ocultar capas" para + encontrar referencias.

+

Propiedad: visibility

+

Valores: Visible que es el valor por defecto o hidden para + ocultarla

+

Ejemplos: Ver el código del ejemplo

+ +

Recortes

+

Tenemos la posibilidad de "encerrar" un elemento dentro de un recuadro con + unas dimensiones determinadas. El resto del contenido quedará recortado y no +se mostrará.

+

Propiedad: clip

+

Valores: Para definir la zona de recorte estableceremos las + coordenadas de un rectángulo que hará de ventana visible del + documento. Los valores que se aplican indican la posición de los bordes superior, + derecho, inferior e izquierdo respecto al contenedor en el que se encuentra + la imagen, y se anotan en la forma rect (valor, valor, valor, valor) Ver +ejemplo +

 

+

Desbordamiento

+

¿Qué ocurre cuando definimos unas dimensiones exactas para un elemento y + el contenido del mismo desborda los límites establecidos? Dependerá de los + valores que adopte la propiedad que controla el desbordamiento.

+

Propiedad: overflow

+

Valores: Si no se especifica valor de overflow los navegadores + utilizarán visible como valor por defecto. Los valores + posibles son:

+ +

Ver + ejemplo

+

Alineamiento vertical

+

Es una propiedad que tiene su principal aplicación para las imágenes, cosa + que ya se podía hacer con HTML, pero puede aplicarse a cualquier elemento en + línea.

+

Propiedad: vertical-align

+

Valores y ejemplos: + + +

+

Se utiliza la imagen para +mostrar el efecto de cada valor

+ +

Apariencia del cursor

+

El navegador modifica de forma automática el ratón en función de la posición + sobre los elementos de la página, pero también podemos especificarlo mediante + estilos-

+

Propiedad: cursor

+

Valores y ejemplos: Pasando el ratón sobre cada uno + de los valores verás cambiar el cursor de acuerdo a cada uno de ellos: +crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help.

+

Apilar capas

+

Además de poder colocar las capas en la posición que se desee, + también se + puede decidir el orden en el que se irán apilando, de forma que unas + zonas se superpongan a otras. Esta propiedad sólo puede aplicarse a capas que + tengan establecido el atributo position.

+

Propiedad: z-index

+

Valor: Se aplican valores numéricos, de forma que un valor + más alto indica que el elemento está por encima de los demás que tengan valor + más bajo o que no tengan establecida propiedad de profundidad

+
+

Ejemplo:

+
+
+
+
+

<div id="azul" style="position:relative; background-color:#0066CC; + border: thin solid #003366; width:220px; height:200px; z-index:1">
+
+ <div id="naranja" style="position:absolute; margin-left:40px; + margin-top: 40px; background-color:#FFdd77; border: thin solid #ffaa66; + width:340px; height:170px; z-index:2"></div>
+ </div>
+

+
+
+

 

+
+ +

+ + + +
+ + + + + + + + diff --git a/html2005/estilos/estilosdesactivados.html b/html2005/estilos/estilosdesactivados.html new file mode 100644 index 0000000..f385c0d --- /dev/null +++ b/html2005/estilos/estilosdesactivados.html @@ -0,0 +1,23 @@ + + + + + + Vista con estilos desactivados + + + + + + + + + + + + +Vista de la página del ejemplo con los estilos desactivados +

+ + + diff --git a/html2005/estilos/flechamenu.png b/html2005/estilos/flechamenu.png new file mode 100644 index 0000000..6c39e53 Binary files /dev/null and b/html2005/estilos/flechamenu.png differ diff --git a/html2005/estilos/imagenes/Rd_pin.gif b/html2005/estilos/imagenes/Rd_pin.gif new file mode 100644 index 0000000..481175b Binary files /dev/null and b/html2005/estilos/imagenes/Rd_pin.gif differ diff --git a/html2005/estilos/imagenes/abajo_der.gif b/html2005/estilos/imagenes/abajo_der.gif new file mode 100644 index 0000000..fc6ddb4 Binary files /dev/null and b/html2005/estilos/imagenes/abajo_der.gif differ diff --git a/html2005/estilos/imagenes/abajo_izq.gif b/html2005/estilos/imagenes/abajo_izq.gif new file mode 100644 index 0000000..865f0f7 Binary files /dev/null and b/html2005/estilos/imagenes/abajo_izq.gif differ diff --git a/html2005/estilos/imagenes/actividad76.htm b/html2005/estilos/imagenes/actividad76.htm new file mode 100644 index 0000000..969e4fe --- /dev/null +++ b/html2005/estilos/imagenes/actividad76.htm @@ -0,0 +1,21 @@ + + + + + +actividad76 + + + +
+ + + + + + + +
+ + diff --git a/html2005/estilos/imagenes/actividad76.swf b/html2005/estilos/imagenes/actividad76.swf new file mode 100644 index 0000000..f55d45a Binary files /dev/null and b/html2005/estilos/imagenes/actividad76.swf differ diff --git a/html2005/estilos/imagenes/amanita-muscaria.jpg b/html2005/estilos/imagenes/amanita-muscaria.jpg new file mode 100644 index 0000000..a361fd2 Binary files /dev/null and b/html2005/estilos/imagenes/amanita-muscaria.jpg differ diff --git a/html2005/estilos/imagenes/amanita-muscariath.jpg b/html2005/estilos/imagenes/amanita-muscariath.jpg new file mode 100644 index 0000000..394779c Binary files /dev/null and b/html2005/estilos/imagenes/amanita-muscariath.jpg differ diff --git a/html2005/estilos/imagenes/amanita-muscariathbw.jpg b/html2005/estilos/imagenes/amanita-muscariathbw.jpg new file mode 100644 index 0000000..eb6b5bb Binary files /dev/null and b/html2005/estilos/imagenes/amanita-muscariathbw.jpg differ diff --git a/html2005/estilos/imagenes/andoenredando.png b/html2005/estilos/imagenes/andoenredando.png new file mode 100644 index 0000000..4083f59 Binary files /dev/null and b/html2005/estilos/imagenes/andoenredando.png differ diff --git a/html2005/estilos/imagenes/andoenredando2.png b/html2005/estilos/imagenes/andoenredando2.png new file mode 100644 index 0000000..bffd0fa Binary files /dev/null and b/html2005/estilos/imagenes/andoenredando2.png differ diff --git a/html2005/estilos/imagenes/armillaria-ostoyae.jpg b/html2005/estilos/imagenes/armillaria-ostoyae.jpg new file mode 100644 index 0000000..e2e9a67 Binary files /dev/null and b/html2005/estilos/imagenes/armillaria-ostoyae.jpg differ diff --git a/html2005/estilos/imagenes/armillaria-ostoyaeth.jpg b/html2005/estilos/imagenes/armillaria-ostoyaeth.jpg new file mode 100644 index 0000000..cdd0880 Binary files /dev/null and b/html2005/estilos/imagenes/armillaria-ostoyaeth.jpg differ diff --git a/html2005/estilos/imagenes/armillaria-ostoyaethbw.jpg b/html2005/estilos/imagenes/armillaria-ostoyaethbw.jpg new file mode 100644 index 0000000..3bc8542 Binary files /dev/null and b/html2005/estilos/imagenes/armillaria-ostoyaethbw.jpg differ diff --git a/html2005/estilos/imagenes/arquitecto.png b/html2005/estilos/imagenes/arquitecto.png new file mode 100644 index 0000000..8d0c65c Binary files /dev/null and b/html2005/estilos/imagenes/arquitecto.png differ diff --git a/html2005/estilos/imagenes/arquitectoder.png b/html2005/estilos/imagenes/arquitectoder.png new file mode 100644 index 0000000..ecee202 Binary files /dev/null and b/html2005/estilos/imagenes/arquitectoder.png differ diff --git a/html2005/estilos/imagenes/arriba_der.gif b/html2005/estilos/imagenes/arriba_der.gif new file mode 100644 index 0000000..7582bf9 Binary files /dev/null and b/html2005/estilos/imagenes/arriba_der.gif differ diff --git a/html2005/estilos/imagenes/arriba_izq.gif b/html2005/estilos/imagenes/arriba_izq.gif new file mode 100644 index 0000000..109bea8 Binary files /dev/null and b/html2005/estilos/imagenes/arriba_izq.gif differ diff --git a/html2005/estilos/imagenes/b1.jpg b/html2005/estilos/imagenes/b1.jpg new file mode 100644 index 0000000..d7ffaa9 Binary files /dev/null and b/html2005/estilos/imagenes/b1.jpg differ diff --git a/html2005/estilos/imagenes/b2.jpg b/html2005/estilos/imagenes/b2.jpg new file mode 100644 index 0000000..cf996fe Binary files /dev/null and b/html2005/estilos/imagenes/b2.jpg differ diff --git a/html2005/estilos/imagenes/bloqueylinea.png b/html2005/estilos/imagenes/bloqueylinea.png new file mode 100644 index 0000000..e9988b1 Binary files /dev/null and b/html2005/estilos/imagenes/bloqueylinea.png differ diff --git a/html2005/estilos/imagenes/botonarrobaimport.png b/html2005/estilos/imagenes/botonarrobaimport.png new file mode 100644 index 0000000..fc8da00 Binary files /dev/null and b/html2005/estilos/imagenes/botonarrobaimport.png differ diff --git a/html2005/estilos/imagenes/c1.jpg b/html2005/estilos/imagenes/c1.jpg new file mode 100644 index 0000000..f4ad3e5 Binary files /dev/null and b/html2005/estilos/imagenes/c1.jpg differ diff --git a/html2005/estilos/imagenes/c2.jpg b/html2005/estilos/imagenes/c2.jpg new file mode 100644 index 0000000..0b665cc Binary files /dev/null and b/html2005/estilos/imagenes/c2.jpg differ diff --git a/html2005/estilos/imagenes/coordenadas.png b/html2005/estilos/imagenes/coordenadas.png new file mode 100644 index 0000000..8550dc9 Binary files /dev/null and b/html2005/estilos/imagenes/coordenadas.png differ diff --git a/html2005/estilos/imagenes/coprinus-comatus.jpg b/html2005/estilos/imagenes/coprinus-comatus.jpg new file mode 100644 index 0000000..db7f2cc Binary files /dev/null and b/html2005/estilos/imagenes/coprinus-comatus.jpg differ diff --git a/html2005/estilos/imagenes/coprinus-comatusth.jpg b/html2005/estilos/imagenes/coprinus-comatusth.jpg new file mode 100644 index 0000000..a05b6b2 Binary files /dev/null and b/html2005/estilos/imagenes/coprinus-comatusth.jpg differ diff --git a/html2005/estilos/imagenes/coprinus-comatusthbw.jpg b/html2005/estilos/imagenes/coprinus-comatusthbw.jpg new file mode 100644 index 0000000..fc928d1 Binary files /dev/null and b/html2005/estilos/imagenes/coprinus-comatusthbw.jpg differ diff --git a/html2005/estilos/imagenes/creandoclaseitem.png b/html2005/estilos/imagenes/creandoclaseitem.png new file mode 100644 index 0000000..7eea1fd Binary files /dev/null and b/html2005/estilos/imagenes/creandoclaseitem.png differ diff --git a/html2005/estilos/imagenes/crearclase.png b/html2005/estilos/imagenes/crearclase.png new file mode 100644 index 0000000..df1c0e3 Binary files /dev/null and b/html2005/estilos/imagenes/crearclase.png differ diff --git a/html2005/estilos/imagenes/crearid.png b/html2005/estilos/imagenes/crearid.png new file mode 100644 index 0000000..2fdf5af Binary files /dev/null and b/html2005/estilos/imagenes/crearid.png differ diff --git a/html2005/estilos/imagenes/ele.gif b/html2005/estilos/imagenes/ele.gif new file mode 100644 index 0000000..657c7d6 Binary files /dev/null and b/html2005/estilos/imagenes/ele.gif differ diff --git a/html2005/estilos/imagenes/ese.gif b/html2005/estilos/imagenes/ese.gif new file mode 100644 index 0000000..e873f30 Binary files /dev/null and b/html2005/estilos/imagenes/ese.gif differ diff --git a/html2005/estilos/imagenes/esquina.png b/html2005/estilos/imagenes/esquina.png new file mode 100644 index 0000000..1b624cf Binary files /dev/null and b/html2005/estilos/imagenes/esquina.png differ diff --git a/html2005/estilos/imagenes/esquinafloral.gif b/html2005/estilos/imagenes/esquinafloral.gif new file mode 100644 index 0000000..e6c2cb8 Binary files /dev/null and b/html2005/estilos/imagenes/esquinafloral.gif differ diff --git a/html2005/estilos/imagenes/esquinafloral.png b/html2005/estilos/imagenes/esquinafloral.png new file mode 100644 index 0000000..eb826fb Binary files /dev/null and b/html2005/estilos/imagenes/esquinafloral.png differ diff --git a/html2005/estilos/imagenes/estilomenu.png b/html2005/estilos/imagenes/estilomenu.png new file mode 100644 index 0000000..63bb850 Binary files /dev/null and b/html2005/estilos/imagenes/estilomenu.png differ diff --git a/html2005/estilos/imagenes/estilosincrustados.png b/html2005/estilos/imagenes/estilosincrustados.png new file mode 100644 index 0000000..d5f7699 Binary files /dev/null and b/html2005/estilos/imagenes/estilosincrustados.png differ diff --git a/html2005/estilos/imagenes/exportarestilo.png b/html2005/estilos/imagenes/exportarestilo.png new file mode 100644 index 0000000..a0e3085 Binary files /dev/null and b/html2005/estilos/imagenes/exportarestilo.png differ diff --git a/html2005/estilos/imagenes/extraerestiloincrustado.png b/html2005/estilos/imagenes/extraerestiloincrustado.png new file mode 100644 index 0000000..c9a20ba Binary files /dev/null and b/html2005/estilos/imagenes/extraerestiloincrustado.png differ diff --git a/html2005/estilos/imagenes/fondo.gif b/html2005/estilos/imagenes/fondo.gif new file mode 100644 index 0000000..cda338a Binary files /dev/null and b/html2005/estilos/imagenes/fondo.gif differ diff --git a/html2005/estilos/imagenes/fondos.png b/html2005/estilos/imagenes/fondos.png new file mode 100644 index 0000000..b79799f Binary files /dev/null and b/html2005/estilos/imagenes/fondos.png differ diff --git a/html2005/estilos/imagenes/h1.jpg b/html2005/estilos/imagenes/h1.jpg new file mode 100644 index 0000000..562ff9a Binary files /dev/null and b/html2005/estilos/imagenes/h1.jpg differ diff --git a/html2005/estilos/imagenes/h2.jpg b/html2005/estilos/imagenes/h2.jpg new file mode 100644 index 0000000..f9e1b92 Binary files /dev/null and b/html2005/estilos/imagenes/h2.jpg differ diff --git a/html2005/estilos/imagenes/hypholoma-del-aliso.jpg b/html2005/estilos/imagenes/hypholoma-del-aliso.jpg new file mode 100644 index 0000000..2adff55 Binary files /dev/null and b/html2005/estilos/imagenes/hypholoma-del-aliso.jpg differ diff --git a/html2005/estilos/imagenes/hypholoma-del-alisoth.jpg b/html2005/estilos/imagenes/hypholoma-del-alisoth.jpg new file mode 100644 index 0000000..baf1f9b Binary files /dev/null and b/html2005/estilos/imagenes/hypholoma-del-alisoth.jpg differ diff --git a/html2005/estilos/imagenes/hypholoma-del-alisothbw.jpg b/html2005/estilos/imagenes/hypholoma-del-alisothbw.jpg new file mode 100644 index 0000000..577c6cf Binary files /dev/null and b/html2005/estilos/imagenes/hypholoma-del-alisothbw.jpg differ diff --git a/html2005/estilos/imagenes/icocapa.png b/html2005/estilos/imagenes/icocapa.png new file mode 100644 index 0000000..d25cf10 Binary files /dev/null and b/html2005/estilos/imagenes/icocapa.png differ diff --git a/html2005/estilos/imagenes/icocapaactiva.png b/html2005/estilos/imagenes/icocapaactiva.png new file mode 100644 index 0000000..9f18489 Binary files /dev/null and b/html2005/estilos/imagenes/icocapaactiva.png differ diff --git a/html2005/estilos/imagenes/icoordendecapas.png b/html2005/estilos/imagenes/icoordendecapas.png new file mode 100644 index 0000000..754d62f Binary files /dev/null and b/html2005/estilos/imagenes/icoordendecapas.png differ diff --git a/html2005/estilos/imagenes/imagendecapa.png b/html2005/estilos/imagenes/imagendecapa.png new file mode 100644 index 0000000..35355b3 Binary files /dev/null and b/html2005/estilos/imagenes/imagendecapa.png differ diff --git a/html2005/estilos/imagenes/indicadordehojaexterna.png b/html2005/estilos/imagenes/indicadordehojaexterna.png new file mode 100644 index 0000000..cf4df3e Binary files /dev/null and b/html2005/estilos/imagenes/indicadordehojaexterna.png differ diff --git a/html2005/estilos/imagenes/m1.jpg b/html2005/estilos/imagenes/m1.jpg new file mode 100644 index 0000000..2438e62 Binary files /dev/null and b/html2005/estilos/imagenes/m1.jpg differ diff --git a/html2005/estilos/imagenes/m2.jpg b/html2005/estilos/imagenes/m2.jpg new file mode 100644 index 0000000..b6a1c4d Binary files /dev/null and b/html2005/estilos/imagenes/m2.jpg differ diff --git a/html2005/estilos/imagenes/macrolepiota-procera.jpg b/html2005/estilos/imagenes/macrolepiota-procera.jpg new file mode 100644 index 0000000..b559eff Binary files /dev/null and b/html2005/estilos/imagenes/macrolepiota-procera.jpg differ diff --git a/html2005/estilos/imagenes/macrolepiota-procerath.jpg b/html2005/estilos/imagenes/macrolepiota-procerath.jpg new file mode 100644 index 0000000..96877d1 Binary files /dev/null and b/html2005/estilos/imagenes/macrolepiota-procerath.jpg differ diff --git a/html2005/estilos/imagenes/macrolepiota-procerathbw.jpg b/html2005/estilos/imagenes/macrolepiota-procerathbw.jpg new file mode 100644 index 0000000..47afa3e Binary files /dev/null and b/html2005/estilos/imagenes/macrolepiota-procerathbw.jpg differ diff --git a/html2005/estilos/imagenes/menuhorizdespl.png b/html2005/estilos/imagenes/menuhorizdespl.png new file mode 100644 index 0000000..f07078a Binary files /dev/null and b/html2005/estilos/imagenes/menuhorizdespl.png differ diff --git a/html2005/estilos/imagenes/menuhorizenlinea.png b/html2005/estilos/imagenes/menuhorizenlinea.png new file mode 100644 index 0000000..0ab07e7 Binary files /dev/null and b/html2005/estilos/imagenes/menuhorizenlinea.png differ diff --git a/html2005/estilos/imagenes/menuhorizsimple.png b/html2005/estilos/imagenes/menuhorizsimple.png new file mode 100644 index 0000000..67713f9 Binary files /dev/null and b/html2005/estilos/imagenes/menuhorizsimple.png differ diff --git a/html2005/estilos/imagenes/menumapa.png b/html2005/estilos/imagenes/menumapa.png new file mode 100644 index 0000000..b7e0b17 Binary files /dev/null and b/html2005/estilos/imagenes/menumapa.png differ diff --git a/html2005/estilos/imagenes/menuvertdesphor.png b/html2005/estilos/imagenes/menuvertdesphor.png new file mode 100644 index 0000000..deb4528 Binary files /dev/null and b/html2005/estilos/imagenes/menuvertdesphor.png differ diff --git a/html2005/estilos/imagenes/menuvertdespl.png b/html2005/estilos/imagenes/menuvertdespl.png new file mode 100644 index 0000000..f7d2f67 Binary files /dev/null and b/html2005/estilos/imagenes/menuvertdespl.png differ diff --git a/html2005/estilos/imagenes/menuvertflecha.png b/html2005/estilos/imagenes/menuvertflecha.png new file mode 100644 index 0000000..45126ac Binary files /dev/null and b/html2005/estilos/imagenes/menuvertflecha.png differ diff --git a/html2005/estilos/imagenes/menuvertflot.png b/html2005/estilos/imagenes/menuvertflot.png new file mode 100644 index 0000000..5987fd5 Binary files /dev/null and b/html2005/estilos/imagenes/menuvertflot.png differ diff --git a/html2005/estilos/imagenes/menuvertsimple.png b/html2005/estilos/imagenes/menuvertsimple.png new file mode 100644 index 0000000..4de13a5 Binary files /dev/null and b/html2005/estilos/imagenes/menuvertsimple.png differ diff --git a/html2005/estilos/imagenes/menuvertvisto.png b/html2005/estilos/imagenes/menuvertvisto.png new file mode 100644 index 0000000..004bc80 Binary files /dev/null and b/html2005/estilos/imagenes/menuvertvisto.png differ diff --git a/html2005/estilos/imagenes/ovni.jpg b/html2005/estilos/imagenes/ovni.jpg new file mode 100644 index 0000000..ae1088b Binary files /dev/null and b/html2005/estilos/imagenes/ovni.jpg differ diff --git a/html2005/estilos/imagenes/p1.jpg b/html2005/estilos/imagenes/p1.jpg new file mode 100644 index 0000000..0ec765b Binary files /dev/null and b/html2005/estilos/imagenes/p1.jpg differ diff --git a/html2005/estilos/imagenes/p2.jpg b/html2005/estilos/imagenes/p2.jpg new file mode 100644 index 0000000..23a3de9 Binary files /dev/null and b/html2005/estilos/imagenes/p2.jpg differ diff --git a/html2005/estilos/imagenes/paddingymargin.png b/html2005/estilos/imagenes/paddingymargin.png new file mode 100644 index 0000000..dde9055 Binary files /dev/null and b/html2005/estilos/imagenes/paddingymargin.png differ diff --git a/html2005/estilos/imagenes/patina1.png b/html2005/estilos/imagenes/patina1.png new file mode 100644 index 0000000..158b516 Binary files /dev/null and b/html2005/estilos/imagenes/patina1.png differ diff --git a/html2005/estilos/imagenes/patina10.png b/html2005/estilos/imagenes/patina10.png new file mode 100644 index 0000000..3ef7589 Binary files /dev/null and b/html2005/estilos/imagenes/patina10.png differ diff --git a/html2005/estilos/imagenes/patina11.png b/html2005/estilos/imagenes/patina11.png new file mode 100644 index 0000000..f46f5bb Binary files /dev/null and b/html2005/estilos/imagenes/patina11.png differ diff --git a/html2005/estilos/imagenes/patina12.png b/html2005/estilos/imagenes/patina12.png new file mode 100644 index 0000000..fc24c33 Binary files /dev/null and b/html2005/estilos/imagenes/patina12.png differ diff --git a/html2005/estilos/imagenes/patina13.png b/html2005/estilos/imagenes/patina13.png new file mode 100644 index 0000000..a00f91c Binary files /dev/null and b/html2005/estilos/imagenes/patina13.png differ diff --git a/html2005/estilos/imagenes/patina14.png b/html2005/estilos/imagenes/patina14.png new file mode 100644 index 0000000..d9e5201 Binary files /dev/null and b/html2005/estilos/imagenes/patina14.png differ diff --git a/html2005/estilos/imagenes/patina15.png b/html2005/estilos/imagenes/patina15.png new file mode 100644 index 0000000..59e578d Binary files /dev/null and b/html2005/estilos/imagenes/patina15.png differ diff --git a/html2005/estilos/imagenes/patina16.png b/html2005/estilos/imagenes/patina16.png new file mode 100644 index 0000000..5a3a6b3 Binary files /dev/null and b/html2005/estilos/imagenes/patina16.png differ diff --git a/html2005/estilos/imagenes/patina17.png b/html2005/estilos/imagenes/patina17.png new file mode 100644 index 0000000..21d3496 Binary files /dev/null and b/html2005/estilos/imagenes/patina17.png differ diff --git a/html2005/estilos/imagenes/patina18.png b/html2005/estilos/imagenes/patina18.png new file mode 100644 index 0000000..a0127de Binary files /dev/null and b/html2005/estilos/imagenes/patina18.png differ diff --git a/html2005/estilos/imagenes/patina19.png b/html2005/estilos/imagenes/patina19.png new file mode 100644 index 0000000..2dad13d Binary files /dev/null and b/html2005/estilos/imagenes/patina19.png differ diff --git a/html2005/estilos/imagenes/patina2.png b/html2005/estilos/imagenes/patina2.png new file mode 100644 index 0000000..9b8c468 Binary files /dev/null and b/html2005/estilos/imagenes/patina2.png differ diff --git a/html2005/estilos/imagenes/patina3.png b/html2005/estilos/imagenes/patina3.png new file mode 100644 index 0000000..316b588 Binary files /dev/null and b/html2005/estilos/imagenes/patina3.png differ diff --git a/html2005/estilos/imagenes/patina4.png b/html2005/estilos/imagenes/patina4.png new file mode 100644 index 0000000..42be092 Binary files /dev/null and b/html2005/estilos/imagenes/patina4.png differ diff --git a/html2005/estilos/imagenes/patina5.png b/html2005/estilos/imagenes/patina5.png new file mode 100644 index 0000000..8c6589f Binary files /dev/null and b/html2005/estilos/imagenes/patina5.png differ diff --git a/html2005/estilos/imagenes/patina6.png b/html2005/estilos/imagenes/patina6.png new file mode 100644 index 0000000..e75b28a Binary files /dev/null and b/html2005/estilos/imagenes/patina6.png differ diff --git a/html2005/estilos/imagenes/patina7.png b/html2005/estilos/imagenes/patina7.png new file mode 100644 index 0000000..9e0e60b Binary files /dev/null and b/html2005/estilos/imagenes/patina7.png differ diff --git a/html2005/estilos/imagenes/patina8.png b/html2005/estilos/imagenes/patina8.png new file mode 100644 index 0000000..373307c Binary files /dev/null and b/html2005/estilos/imagenes/patina8.png differ diff --git a/html2005/estilos/imagenes/patina9.png b/html2005/estilos/imagenes/patina9.png new file mode 100644 index 0000000..970c7a4 Binary files /dev/null and b/html2005/estilos/imagenes/patina9.png differ diff --git a/html2005/estilos/imagenes/pgris.png b/html2005/estilos/imagenes/pgris.png new file mode 100644 index 0000000..0c87b4f Binary files /dev/null and b/html2005/estilos/imagenes/pgris.png differ diff --git a/html2005/estilos/imagenes/pholiota-penetrans.jpg b/html2005/estilos/imagenes/pholiota-penetrans.jpg new file mode 100644 index 0000000..9dced7a Binary files /dev/null and b/html2005/estilos/imagenes/pholiota-penetrans.jpg differ diff --git a/html2005/estilos/imagenes/pholiota-penetransth.jpg b/html2005/estilos/imagenes/pholiota-penetransth.jpg new file mode 100644 index 0000000..c3fc71b Binary files /dev/null and b/html2005/estilos/imagenes/pholiota-penetransth.jpg differ diff --git a/html2005/estilos/imagenes/pholiota-penetransthbw.jpg b/html2005/estilos/imagenes/pholiota-penetransthbw.jpg new file mode 100644 index 0000000..9aef79f Binary files /dev/null and b/html2005/estilos/imagenes/pholiota-penetransthbw.jpg differ diff --git a/html2005/estilos/imagenes/superposicionmargen.png b/html2005/estilos/imagenes/superposicionmargen.png new file mode 100644 index 0000000..e2b4bec Binary files /dev/null and b/html2005/estilos/imagenes/superposicionmargen.png differ diff --git a/html2005/estilos/imagenes/tiradordecapa.png b/html2005/estilos/imagenes/tiradordecapa.png new file mode 100644 index 0000000..61c10bb Binary files /dev/null and b/html2005/estilos/imagenes/tiradordecapa.png differ diff --git a/html2005/estilos/imagenes/tricholomopsis-rutilans.jpg b/html2005/estilos/imagenes/tricholomopsis-rutilans.jpg new file mode 100644 index 0000000..8509276 Binary files /dev/null and b/html2005/estilos/imagenes/tricholomopsis-rutilans.jpg differ diff --git a/html2005/estilos/imagenes/tricholomopsis-rutilansth.jpg b/html2005/estilos/imagenes/tricholomopsis-rutilansth.jpg new file mode 100644 index 0000000..3c45a49 Binary files /dev/null and b/html2005/estilos/imagenes/tricholomopsis-rutilansth.jpg differ diff --git a/html2005/estilos/imagenes/tricholomopsis-rutilansthbw.jpg b/html2005/estilos/imagenes/tricholomopsis-rutilansthbw.jpg new file mode 100644 index 0000000..4a50176 Binary files /dev/null and b/html2005/estilos/imagenes/tricholomopsis-rutilansthbw.jpg differ diff --git a/html2005/estilos/imagenes/u.gif b/html2005/estilos/imagenes/u.gif new file mode 100644 index 0000000..d6f6181 Binary files /dev/null and b/html2005/estilos/imagenes/u.gif differ diff --git a/html2005/estilos/imagenes/vistaconestilos.png b/html2005/estilos/imagenes/vistaconestilos.png new file mode 100644 index 0000000..262c07f Binary files /dev/null and b/html2005/estilos/imagenes/vistaconestilos.png differ diff --git a/html2005/estilos/imagenes/vistasinestilos.png b/html2005/estilos/imagenes/vistasinestilos.png new file mode 100644 index 0000000..6f19cbc Binary files /dev/null and b/html2005/estilos/imagenes/vistasinestilos.png differ diff --git a/html2005/estilos/licenciacc.html b/html2005/estilos/licenciacc.html new file mode 100644 index 0000000..e946508 --- /dev/null +++ b/html2005/estilos/licenciacc.html @@ -0,0 +1,50 @@ + + + + + + Texto de prácticas sobre licencia Creative +Commons + + + + + +Uno de los tipos de licencia que se utilizan para distribuir +contenidos es la denominada Creative Commons.
+ + + + + + diff --git a/html2005/estilos/menu_estilos.htm b/html2005/estilos/menu_estilos.htm new file mode 100644 index 0000000..8936547 --- /dev/null +++ b/html2005/estilos/menu_estilos.htm @@ -0,0 +1,164 @@ + + + +Documento sin título + + + + + + + + + + + + + +
+ + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Introducción
Primeros pasos
Aplicar estilos
Estilos para el texto
Estilos para fuentes
Fondos
Bordes
Márgenes y rellenos
Listas
Diseño Visual
+ + + + +
Absolutamente relativo
Técnicas
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Pies de fotos
Imágenes de sustitución
Bordes redondeados
Centrados
Ajuste a perfil de imagen
Encolumnar listas
Sustitución de imágenes
Columnas
Menús
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Pies de fotos
Imágenes de sustitución
Bordes redondeados
Centrados
Ajuste a perfil de imagen
Encolumnar listas
Sustitución de imágenes
Columnas
Menús
 
 
 
 
+ + diff --git a/html2005/estilos/menus.html b/html2005/estilos/menus.html new file mode 100644 index 0000000..8cef8e5 --- /dev/null +++ b/html2005/estilos/menus.html @@ -0,0 +1,117 @@ + + + + + + Menús + + + + + + + + + + + + + + +
+

Estilos>>Técnicas

+ +
+
+ +
+
+ +
+ +
+ +
+ + + +
+ +

Menús

+ +

A continuación tienes los enlaces a una +colección +de ejemplos de menús desarrollados con CSS y, en algunos +casos con un simple javascript. Aunque se han introducido ligeras +modificaciones las dos fuentes de las que se han sacado las ideas base +son la Galería de menús de +Alsacreations y la Lista +de menús de CSS Play en las que seguro que +encontrarás muchas más ideas.

+ + + +

+ +
+ + + diff --git a/html2005/estilos/muestra1.htm b/html2005/estilos/muestra1.htm new file mode 100644 index 0000000..a300aea --- /dev/null +++ b/html2005/estilos/muestra1.htm @@ -0,0 +1,79 @@ + + + + + + Muestra de estilos + + + + + + + + + + +
+ +

+ + p {
+ + text-align: center;
+ + color: blue;
+ + font-family: Arial, Helvetica, sans-serif;
+ + }
+ +
+ +
+ +
Visualizar el formato resultante +
+ +
+ + +
+ +

Aplicando las características definidas en el estilo +cualquier párrafo se mostraría centrado...en color +azul...con una fuente de "palo seco".

+ + +

Este es un nuevo párrafo

+ +
+ + + + diff --git a/html2005/estilos/muestra10.htm b/html2005/estilos/muestra10.htm new file mode 100644 index 0000000..9559afe --- /dev/null +++ b/html2005/estilos/muestra10.htm @@ -0,0 +1,84 @@ + + + + Muestra de estilos + + + + + + + + + + + + + +
+
+

<style type="text/css">
+ +<!--
+ +selector{
+ +background-image: url(../imagenes/pluma2.gif);
+ +background-repeat:repeat-y;
+ +background-position: right;}
+ +-->
+ +</style>
+ +

+ +
+ +
Visualizar +el formato resultante +
+ +
+ +
+

En este ejemplo se muestra una repetición en +vertical.

+

 

+

Observa que, como también hemos utilizado el +atributo de posición la imagen está situada a la +derecha (si no lo hubiéramos hecho la posición +por defecto es la superior izquierda)

+ + + +
+ + + diff --git a/html2005/estilos/muestra11.htm b/html2005/estilos/muestra11.htm new file mode 100644 index 0000000..355765f --- /dev/null +++ b/html2005/estilos/muestra11.htm @@ -0,0 +1,105 @@ + + + + Muestra de estilos + + + + + + + + + + + + + +
+
+

<style type="text/css">
+ +<!--
+ +body{
+ +background-image: url(../imagenes/pluma2.gif);
+ +background-repeat:no-repeat;
+ +background-position:top right;
+ +background-attachment:fixed; }
+ +-->
+ +</style>
+ +

+ +
+ +
Visualizar +el formato resultante +
+ +
+ +
+

Aquí aparecerían los componentes de la +página que se irían desplazando arriba y abajo +cuando superáramos los límites de la pantalla.

+ +

Más componentes...

+ +

Más componentes...

+ +

Internet +Explorer soporta esta propiedad en cualquier elemento de bloque, pero +Mozilla sólo la soporta cuando se aplica al selector body.

+ +

Más componentes...

+ +

Más componentes...

+ +

Más componentes...

+ +

Más componentes...

+ +

Más componentes...

+ +

Más componentes...

+ +

Hasta que se acabara la página. Sin embargo la +imagen no se ha movido de su sitio en todo el tiempo.

+ +

 

+ +
+ + + diff --git a/html2005/estilos/muestra12.htm b/html2005/estilos/muestra12.htm new file mode 100644 index 0000000..1509ddd --- /dev/null +++ b/html2005/estilos/muestra12.htm @@ -0,0 +1,116 @@ + + + + Muestra de estilos + + + + + + + + + + + + + +
+
+

<style type="text/css">
+ +<!--
+ +#mancheta
+ +{
+ +width:160px;
+ +background-color:#e0e0e0;
+ +margin-left:5px;
+ +padding:5px;
+ +float:right;
+ +}
+ +#lupa
+ +{
+ +float:left;
+ +padding-right:10px
+ +}
+ +-->
+ +</style>
+ +

+ +
+ +
Visualizar +el formato resultante +
+ +
+ +
+

Aquí aparece el texto normal de la +página donde se explican las cuestiones generales.

+ +
esto es un texto que se considera +importante y aparece en una mancheta
+ +

Gracias a la aplicación de los estilos tendremos +una imagen flotando a la izquierda y un texto con fondo gris flotando a +la derecha, mientras el texto normal fluye entre ambos. Para insertar +el texto de la zona derecha lo hemos hecho aplicando el identificador +id="mancheta" a un delimitador div que se ha colocado antes del segundo +párrafo, mientras que para la imagen hemos aplicado el +identificador id="lupa" cuyas características +habíamos definido en la hoja de estilos interna.

+ +

Si ves el código podrás comprobar todos +los detalles.

+ +
+ + + diff --git a/html2005/estilos/muestra13.htm b/html2005/estilos/muestra13.htm new file mode 100644 index 0000000..a9e073b --- /dev/null +++ b/html2005/estilos/muestra13.htm @@ -0,0 +1,124 @@ + + + + Muestra de estilos + + + + + + + + + + + + + +
+
+

<style type="text/css">
+ +<!--
+ +#mancheta
+ +{
+ +width:160px;
+ +background-color:#e0e0e0;
+ +margin-left:5px;
+ +padding:5px;
+ +float:right;
+ +}
+ +#lupa
+ +{
+ +float:left;
+ +padding-right:10px
+ +}
+ +-->
+ +</style>
+ +

+ +
+ +
Visualizar +el formato resultante +
+ +
+ +
+

Aquí aparece el texto normal de la +página donde se explican las cuestiones generales.

+ +
esto es un texto que se considera +importante y aparece en una mancheta
+ +

El código de este +ejemplo era igual que el del anterior. Para insertar el texto de la +zona derecha lo hemos hecho aplicando el identificador id="mancheta" a +un delimitador div que se ha colocado antes del segundo +párrafo, sin embargo, como hemos aplicado al segundo +párrafo el estilo en línea clear="right" se ha +impedido la flotación y el párrafo se ha colocado +en el flujo normal tras el contenido del delimitador div.

+ +

Para la imagen hemos aplicado el +identificador id="lupa" cuyas características +habíamos definido en la hoja de estilos interna y flota +porque no existe ninguna especificación de estilo que se lo +impida.

+ +

 

+ +

Si ves el código podrás comprobar todos +los detalles.

+ +
+ + + diff --git a/html2005/estilos/muestra14.htm b/html2005/estilos/muestra14.htm new file mode 100644 index 0000000..a068fda --- /dev/null +++ b/html2005/estilos/muestra14.htm @@ -0,0 +1,100 @@ + + + + Muestra de estilos + + + + + + + + + + + + + +
+
+

<style type="text/css">
+ +<!--
+ +#mancheta
+ +{
+ +width:160px;
+ +background-color:#e0e0e0;
+ +margin-left:5px;
+ +padding:5px;
+ +position:absolute;
+ +bottom:40px;
+ +right:100px;
+ +}
+ +-->
+ +</style>
+ +

+ +
+ +
Visualizar +el formato resultante +
+ +
+ +
+

 

+ +

este párrafo está +situado de forma absoluta en la página, utilizando las +coordenadas bottom y right

+ +

Si maximizas esta ventana comprobarás que la +mancheta sigue colocándose a la misma distancia de los +bordes inferior y derecho

+ +
+ + + diff --git a/html2005/estilos/muestra15.htm b/html2005/estilos/muestra15.htm new file mode 100644 index 0000000..a5f5ca1 --- /dev/null +++ b/html2005/estilos/muestra15.htm @@ -0,0 +1,92 @@ + + + + + + Muestra de estilos + + + + + + + + + + + +
+ +
+ +

<p style = "position:relative ; left:40px; top:-19px; border:thin + dotted orange">
+ +

+ +
+ + +
+ Visualizar el formato resultante +
+ +
+ +
+ + +

Este sería el primer párrafo. +

+ + +

A continuación iría el segundo...

+ + +

... y el tercero. Pero... repitamos la jugada

+ + +
+ +

Este sería el primer párrafo. +

+ + +

A + continuación iría el segundo...(pero ahora con posición relativa). El desplazamiento + debido a la posición relativa ha provocado el desbordamiento + del bloque por la derecha, ya que la caja del bloque del párrafo sigue + teniendo la misma anchura, pero al haberse desplazado hacia su derecha + necesita esos 40 píxeles de espacio suplementario.

+ + +

... y el tercero.

+ + + + +
+ + + diff --git a/html2005/estilos/muestra16.htm b/html2005/estilos/muestra16.htm new file mode 100644 index 0000000..92e3692 --- /dev/null +++ b/html2005/estilos/muestra16.htm @@ -0,0 +1,144 @@ + + + + Muestra de estilos + + + + + + + + + + + + + +
+
+

<style type="text/css">
+ +<!--
+ +.cabecera
+ +{
+ +position:fixed;
+ + +top:0px;
+left:0px;
+ +height:40px;
+ +width:100%;
+ +background-color:#e0e0e0;
+ +}
+ +-->
+ +</style>
+ +

+ +
+ +
Visualizar +el formato resultante +
+ +
+ +
+

Este sería el primer párrafo que se +mantendría fijo sin desplazarse aunque hubiera que desplazar +el resto del contenido de la página

+ +
+ +
+

La propiedad fixed +está claramente definida en la especificación +CSS2, sin embargo su implementación en los navegadores es +bastante irregular.

+ +

Si estás viendo esta página con Internet +Explorer las situaciones pueden ser de lo más diversas, a pesar del valor fixed +puede que el recuadro superior se desplace con el resto de la página, que no se ajuste, etc.

+ +

Sin embargo, cuando la página se visualiza con +navegadores más respetuosos con las recomendaciones del W3C, +como Mozilla, Konqueror o Galeón por ejemplo, podemos ver la +zona de texto superior anclada al inicio de la ventana mientras el +resto de la página se desplaza.

+ +

Puedes comprobar cómo al aplicar el parche la capa +queda fija si visitas esta versión +de la página

+ +

Se incluyen a continuación unos cuantos +párrafos suplementarios para que la página +adquiera una longitud mayor.

+ +

incluso Aquí empezaría el resto del +contenido de la página...

+ +

...seguiría...

+ +

...seguiría...

+ +

...seguiría...

+ +

...todavía más...

+ +

...y más...

+ +

...y mucho más...

+ +

...hasta que llegáramos al final de la misma.

+ +
+ + + diff --git a/html2005/estilos/muestra16b.html b/html2005/estilos/muestra16b.html new file mode 100644 index 0000000..0b7a880 --- /dev/null +++ b/html2005/estilos/muestra16b.html @@ -0,0 +1,142 @@ + + + + Muestra de estilos + + + + + + + + + + + + + + +
+
+

<style type="text/css">
+ +<!--
+ +.cabecera
+ +{
+ +position:fixed;
+ +top:0px;
+ +left:0px;
+ +height:40px;
+ +width:100%;
+ +background-color:#e0e0e0;
+ +}
+ +-->
+ +</style>
+ +

+ +
+ +
Visualizar +el formato resultante +
+ +
+ +
+

Este sería el primer párrafo que se +mantendría fijo sin desplazarse aunque hubiera que desplazar +el resto del contenido de la página

+ +
+ +
+

Gracias a la aplicación del parche Internet +Explorer se ha ajustado a las especificaciones y la página +se verá correctamente.

+ +

La zona superior debe estar correctamente posicionada y no +desplazarse cuando deslicemos el resto del contenido

+ +

A continuació aparecen unos párrafos +generados con la extensión Lorem Ipsum para que haya un +contenid que permita el desplazamiento.

+ +

Lorem ipsum dolor sit amet, consectetur adipisicing elit, seddo +eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim +ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut +aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit +in voluptate velit esse cillum dolore eu fugiat nulla pariatur. +Excepteur sint occaecat cupidatat non proident, sunt in culpa qui +officia deserunt mollit anim id est laborum.

+ +

Sed ut perspiciatis unde omnis iste natus error sit voluptatem +accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae +ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt +explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut +odit aut fugit, sed quia consequuntur magni dolores eos qui ratione +voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum +quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam +eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat +voluptatem.

+ +

Ut enim ad minima veniam, quis nostrum exercitationem ullam +corporis suscipit laboriosam, nisi ut aliquid ex ea commodi +consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate +velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum +fugiat quo voluptas nulla pariatur?

+ +
+ + + diff --git a/html2005/estilos/muestra17.htm b/html2005/estilos/muestra17.htm new file mode 100644 index 0000000..127c9c7 --- /dev/null +++ b/html2005/estilos/muestra17.htm @@ -0,0 +1,26 @@ + + +Mostrar y ocultar capas + + + + + + + + + + \ No newline at end of file diff --git a/html2005/estilos/muestra18.htm b/html2005/estilos/muestra18.htm new file mode 100644 index 0000000..1c24d3d --- /dev/null +++ b/html2005/estilos/muestra18.htm @@ -0,0 +1,109 @@ + + + + Mostrar y ocultar capas + + + + + + + + + + + + + +

<html>
+ +<head>
+ +<title>Mostrar y ocultar capas </title>
+ +<script language="Javascript">
+ +function mostrar(nombreCapa){
+ +document.getElementById(nombreCapa).style.visibility="visible";
+ +}
+ +function ocultar(nombreCapa){
+ +document.getElementById(nombreCapa).style.visibility="hidden";
+ +}
+ +</script>
+ +</head>
+
+ +<body>
+ +<ul>
+ +<li>
+ +<a href="#" onClick="mostrar('capa1')"> Mostrar la capa +haciendo clic </a> </li>
+ +<li>
+ +<a href="#" onClick="ocultar('capa1')"> Ocultar la capa 1 +haciendo clic </a>
+ +</li>
+ +<li>
+ +<a href="#" onMouseOver="mostrar('capa2')" +onMouseOut="ocultar('capa2')">
+ +Mostrar y ocultar la capa 2 al pasar sobre el enlace</a>
+ +</li>
+ +</ul>
+ +<div id="capa1" style="position:absolute; width:100px; +height:100px; top:100px; left:100px; background-color:blue; +visibility:hidden">Capa 1
+ +</div>
+ +<div id="capa2" style="position:absolute; width:100px; +height:100px; top:100px; left:200px; background-color:red; +visibility:hidden">Capa 2
+ +</div>
+ +</body>
+ +</html> +
+ +

+ + + diff --git a/html2005/estilos/muestra19.htm b/html2005/estilos/muestra19.htm new file mode 100644 index 0000000..fd968be --- /dev/null +++ b/html2005/estilos/muestra19.htm @@ -0,0 +1,59 @@ + + + + Recortes + + + + + + + + + + + + + + +

+Este texto está situado en el espacio que +correspondería a la imagen, puesto que ésta se ha +recortado +aplicándole un estilo en linea con los siguientes +parámetros:

+ +

style="position:absolute; clip:rect(100px, 300px, +400px, 100px);"

+ +

Si algún texto se superpone a la zona visible de la +imagen quedará oculto por ésta, como ocurre con +el siguiente párrafo.

+ +

Esto va a ocultarse

+ +

Ha ocurrido un eclipse de texto l

+ + + diff --git a/html2005/estilos/muestra2.htm b/html2005/estilos/muestra2.htm new file mode 100644 index 0000000..00ce59c --- /dev/null +++ b/html2005/estilos/muestra2.htm @@ -0,0 +1,90 @@ + + + + + + Muestra de estilos + + + + + + + + + + + +
+ +

+ + h1,h2,h3
+ + {
+ + color: blue
+ + } +
+ +
+ +
Visualizar el formato resultante +
+ +
+ +
+ +

Vamos escribir una cabecera H1

+ + +

Esto es H1

+ + +

Sigo escribiendo y ahora inserto una cabecera H2

+ + +

Esto es una cabecera H2

+ + +

Ahora una H3

+ + +

Sigo escribiendo ...

+ + +

Una cabecera H4 ya no será de color azul

+ + +

Este es un nuevo párrafo

+ +
+ + + diff --git a/html2005/estilos/muestra20.htm b/html2005/estilos/muestra20.htm new file mode 100644 index 0000000..8321d7b --- /dev/null +++ b/html2005/estilos/muestra20.htm @@ -0,0 +1,149 @@ + + + + Muestra de estilos + + + + + + + + + + + + + +
+
+

<style type="text/css">
+ +<!--
+ +#auto {
+ +overflow:auto;
+ +}
+ +#visible {
+ +overflow:visible;
+ +}
+ +#oculto {
+ +overflow:hidden;
+ +}
+ +#barras {
+ +overflow:scroll;
+ +}
+ +-->
+ +</style>
+ +

+ +
+ +
Visualizar +el formato resultante +
+ +
+ +
+
+

Esta capa tiene establecida la propiedad overflow +en +auto y se muestra completa aunque sus dimensiones son +width:200px height:80px;

+ +

Este párrafo se ha añadido para aumentar +la longitud del texto.

+ +
+ +
+
+

Esta capa tiene establecida la propiedad overflow +en +visible y se muestra completa, invadiendo el espacio de +los elementos que van a continuación y +superponiéndose a ellos.

+ +
+ +
+
+

Esta capa tiene establecida la propiedad overflow +en +hidden y muestra sólo el texto que cabe +dentro de las dimensiones establecidas que son de 200x80 como en los +otros casos.

+ +

Este párrafo se ha añadido para aumentar +la longitud del texto.

+ +
+ +
+
+

Esta capa tiene establecida la propiedad overflow +en +scroll y se muestra completa añadiendo las +barras de desplazamiento.

+ +
+ +
+
+

Si has visto la +página con Internet Explorer habrás comprobado +que con el valor overflow:visible la capa +aumenta su tamaño +y desplaza al resto de elementos en lugar de superponerse a ellos.

+ +
+ +
+ + + diff --git a/html2005/estilos/muestra21.htm b/html2005/estilos/muestra21.htm new file mode 100644 index 0000000..bd9465e --- /dev/null +++ b/html2005/estilos/muestra21.htm @@ -0,0 +1,96 @@ + + + + + + Muestra de estilos + + + + + + + + + + + +
+ +
+ +

<style type="text/css">
+ + <!--
+ + a:link {decoration:none; color:blue}
+ + a:visited {color:#9900FF;}
+ + a:hover {font-style:italic}
+ + a:active {color:#FF9900;}
+ + -->
+ + </style>

+ +
+ + +
Visualizar + el formato resultante +
+ +
+ + + +
+ + + + + +

En este texto aparece un enlace que cambia su aspecto según su estado. Pasa por aquí con el ratón + y pulsa para comprobar los cambios.

+ + +
+ +

Para + comprobar el cambio de color del enlace visitado en Mozilla, Galeón + o Konqueror tendrás + que recargar la página.

+ +
+ +
+ + + + diff --git a/html2005/estilos/muestra22.htm b/html2005/estilos/muestra22.htm new file mode 100644 index 0000000..12f4773 --- /dev/null +++ b/html2005/estilos/muestra22.htm @@ -0,0 +1,87 @@ + + + + + + Muestra de estilos + + + + + + + + + + + +
+ +
+ +

<style type="text/css">
+ + <!--
+ +div.zonadcha > p:first-child {font-size : large}
+ +-->
+ +</style>

+ +
+ + +
+ Visualizar el formato resultante +
+ +
+ + + +
+ + +

Este párrafo es el primer hijo de un elemento div (es la + primera vez que aparece la etiqueta <p> entre las etiquetas <div> + y </div> que definen esta zona de la pantalla). Por eso aparece más + grande.

+ + +

Este segundo párrafo aparece ya en su tamaño normal.

+ + +
+ +

Internet + Explorer 6 y versiones previas no soportan esta pseudoclase

+ +
+ +
+ + + + diff --git a/html2005/estilos/muestra22.html b/html2005/estilos/muestra22.html new file mode 100644 index 0000000..3e0cc1e --- /dev/null +++ b/html2005/estilos/muestra22.html @@ -0,0 +1,109 @@ + + + + + + + + + Muestra de estilos + + + + + + + + + + + + + + + + + +
+ +
+ +

<style type="text/css">
+ + + <!--
+ + +div.zonadcha > p:first-child {font-size : large}
+ + +-->
+ + +</style>

+ + +
+ + + +
+ Visualizar el formato resultante +
+ + +
+ + + + +
+ + +

Este párrafo es el primer hijo de un elemento div (es la + primera vez que aparece la etiqueta <p> entre las etiquetas <div> + y </div> que definen esta zona de la pantalla). Por eso aparece más + grande.

+ + + +

Este segundo párrafo aparece ya en su tamaño normal.

+ + + +
+ +

Internet + Explorer 6 y versiones previas no soportan esta pseudoclase

+ + +
+ + +
+ + + + + diff --git a/html2005/estilos/muestra23.htm b/html2005/estilos/muestra23.htm new file mode 100644 index 0000000..7c260b6 --- /dev/null +++ b/html2005/estilos/muestra23.htm @@ -0,0 +1,83 @@ + + + + Muestra de estilos + + + + + + + + + + + + + +
+
+ + + + + + +

<style type="text/css">
+<!-- 
+#muestra, #muestra2, #muestra3 +{font-size: 12pt}

+

#muestra:first-line, +#muestra3:first-line {color: #00F; +font-variant: small-caps}

+

#muestra2:first-letter, #muestra3:first-letter {font:italic +bold 200% serif; float: left; padding-right: 0.2em;}
+-->
+</style>

+ +
+ +
Visualizar +el formato resultante +
+ +
+ +
+

En este ejemplo aplicamos el +pseudoelemento first-line para cambiar la apariencia de la primera +línea del párrafo.

+ +

Ahora aplicamos el pseudoelemento +first-letter para modificar el tamaño y la +posición de la primera letra del párrafo.

+ +

Por último aplicamos a este +párrafo los dos pseudoelementos de forma que se modifiquen +la primera letra y el primer renglón de párrafo

+ +
+ + + diff --git a/html2005/estilos/muestra24.htm b/html2005/estilos/muestra24.htm new file mode 100644 index 0000000..9eb7f7e --- /dev/null +++ b/html2005/estilos/muestra24.htm @@ -0,0 +1,183 @@ + + + + + + Marcos sin frames + + + + + + + + + + + +
+ + + +
+ +
+ +
+ +

Estamos en la página 1

+ + +

 

+ + +

Aquí tendríamos el contenido de la página.

+ + +

Lorem ipsum dolor sit amet, consectetur adipisicing +elit, sed do eiusmod tempor incididunt ut labore et dolore magna +aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco +laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor +in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla +pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa +qui officia deserunt mollit anim id est laborum.
+
+Sed ut perspiciatis unde omnis iste natus error sit voluptatem +accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae +ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt +explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut +odit aut fugit, sed quia consequuntur magni dolores eos qui ratione +voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum +quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam +eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat +voluptatem.
+
+Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis +suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis +autem vel eum iure reprehenderit qui in ea voluptate velit esse quam +nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo +voluptas nulla pariatur?

+

Lorem ipsum dolor sit amet, consectetur adipisicing +elit, sed do eiusmod tempor incididunt ut labore et dolore magna +aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco +laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor +in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla +pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa +qui officia deserunt mollit anim id est laborum.
+
+Sed ut perspiciatis unde omnis iste natus error sit voluptatem +accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae +ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt +explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut +odit aut fugit, sed quia consequuntur magni dolores eos qui ratione +voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum +quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam +eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat +voluptatem.
+
+Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis +suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis +autem vel eum iure reprehenderit qui in ea voluptate velit esse quam +nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo +voluptas nulla pariatur?

+

Lorem ipsum dolor sit amet, consectetur adipisicing +elit, sed do eiusmod tempor incididunt ut labore et dolore magna +aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco +laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor +in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla +pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa +qui officia deserunt mollit anim id est laborum.
+
+Sed ut perspiciatis unde omnis iste natus error sit voluptatem +accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae +ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt +explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut +odit aut fugit, sed quia consequuntur magni dolores eos qui ratione +voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum +quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam +eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat +voluptatem.
+
+Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis +suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis +autem vel eum iure reprehenderit qui in ea voluptate velit esse quam +nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo +voluptas nulla pariatur?

+

Lorem ipsum dolor sit amet, consectetur adipisicing +elit, sed do eiusmod tempor incididunt ut labore et dolore magna +aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco +laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor +in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla +pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa +qui officia deserunt mollit anim id est laborum.
+
+Sed ut perspiciatis unde omnis iste natus error sit voluptatem +accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae +ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt +explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut +odit aut fugit, sed quia consequuntur magni dolores eos qui ratione +voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum +quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam +eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat +voluptatem.
+
+Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis +suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis +autem vel eum iure reprehenderit qui in ea voluptate velit esse quam +nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo +voluptas nulla pariatur?

+

 

+ + +

 

+ +
+ + +

 

+ +
+ + + + diff --git a/html2005/estilos/muestra24b.htm b/html2005/estilos/muestra24b.htm new file mode 100644 index 0000000..ced50f5 --- /dev/null +++ b/html2005/estilos/muestra24b.htm @@ -0,0 +1,70 @@ + + + + Esta página tiene un título +distinto + + + + + + + + + + + + + +
+ + +
+ +
+
+

Estamos en la página 2

+ +

 

+ +Aquí tendríamos el contenido de la +página.
+ +
+ + + diff --git a/html2005/estilos/muestra25-1.htm b/html2005/estilos/muestra25-1.htm new file mode 100644 index 0000000..b519dd1 --- /dev/null +++ b/html2005/estilos/muestra25-1.htm @@ -0,0 +1,17 @@ + + + +Marcos sin usar frames + + + + + + +
+

Se pueden crear estructuras de marcos sin <frames>

+

Compruébalo

+
+ + diff --git a/html2005/estilos/muestra25.htm b/html2005/estilos/muestra25.htm new file mode 100644 index 0000000..8f9414f --- /dev/null +++ b/html2005/estilos/muestra25.htm @@ -0,0 +1,57 @@ + + + +Página de Primer Ciclo + + + + + + +
+
Primer Ciclo +
+ Segundo Ciclo
+
+
+

1er ciclo

+

Actividades

+

Convocatorias

+

Enlaces

+

 

+

 

+

 

+
+
+
+

 

+
+

+
+ + diff --git a/html2005/estilos/muestra25a.htm b/html2005/estilos/muestra25a.htm new file mode 100644 index 0000000..273e79d --- /dev/null +++ b/html2005/estilos/muestra25a.htm @@ -0,0 +1,59 @@ + + + +Actividades de Primer Ciclo + + + + + + +
+
Primer Ciclo +
+ Segundo Ciclo
+
+
+

1er CICLO

+

Actividades

+

Convocatorias

+

Enlaces

+

 

+

 

+

 

+
+
+
+

Actividades del primer ciclo

+

Vamos contando las actividades... bla... bla....

+

 

+

 

+
+
+ + diff --git a/html2005/estilos/muestra25b.htm b/html2005/estilos/muestra25b.htm new file mode 100644 index 0000000..f4006d4 --- /dev/null +++ b/html2005/estilos/muestra25b.htm @@ -0,0 +1,59 @@ + + + +Convocatorias de Primer Ciclo + + + + + + +
+
Primer Ciclo +
+ Segundo Ciclo
+
+
+

1er CICLO

+

Actividades

+

Convocatorias

+

Enlaces

+

 

+

 

+

 

+
+
+
+

Ahora vamos contando las convocatorias

+

Convocatoria 1....

+

Convocatoria 2...

+
+

 

+
+ + diff --git a/html2005/estilos/muestra25c.htm b/html2005/estilos/muestra25c.htm new file mode 100644 index 0000000..cf8a198 --- /dev/null +++ b/html2005/estilos/muestra25c.htm @@ -0,0 +1,99 @@ + + + + + + Enlaces de Primer Ciclo + + + + + + + + + + + +
+ +
Primer Ciclo + +
+ + Segundo Ciclo
+ +
+ +
+ +

1er CICLO

+ + +

Actividades

+ + +

Convocatorias

+ + +

Enlaces

+ + +

 

+ + +

 

+ + +

 

+ +
+ +
+ +
+ +

Por último los enlaces

+ + +

www.google.es

+ + +

www.formacion.cnice.mec.es

+ + +

...

+ +
+ + +

 

+ +
+ + + diff --git a/html2005/estilos/muestra25d.htm b/html2005/estilos/muestra25d.htm new file mode 100644 index 0000000..4a196fd --- /dev/null +++ b/html2005/estilos/muestra25d.htm @@ -0,0 +1,90 @@ + + + + + + Muestra de estilos + + + + + + + + + + + +
+ +
Primer Ciclo + +
+ + Segundo Ciclo
+ +
+ +
+ +

2º CICLO

+ + +

Actividades

+ + +

Convocatorias

+ + +

Enlaces

+ + +

 

+ + +

 

+ + +

 

+ +
+ +
+ +
+ +

 

+ +
+ + +

" "

+ +
+ + + diff --git a/html2005/estilos/muestra25e.htm b/html2005/estilos/muestra25e.htm new file mode 100644 index 0000000..6bcf975 --- /dev/null +++ b/html2005/estilos/muestra25e.htm @@ -0,0 +1,58 @@ + + + +Actividades de Segundo Ciclo + + + + + + +
+
Primer Ciclo +
+ Segundo Ciclo
+
+
+

2º CICLO

+

Actividades

+

Convocatorias

+

Enlaces

+

 

+

 

+

 

+
+
+
+

Actividades del Segundo ciclo

+

Vamos contando las actividades... bla... bla....

+
+

 

+
+ + diff --git a/html2005/estilos/muestra25f.htm b/html2005/estilos/muestra25f.htm new file mode 100644 index 0000000..ce0ab3b --- /dev/null +++ b/html2005/estilos/muestra25f.htm @@ -0,0 +1,59 @@ + + + +Convocatorias de Segundo Ciclo + + + + + + +
+
Primer Ciclo +
+ Segundo Ciclo
+
+
+

2º CICLO

+

Actividades

+

Convocatorias

+

Enlaces

+

 

+

 

+

 

+
+
+
+

Ahora vamos enumerando las convocatorias (pero de Segundo ciclo)

+

Convocatoria 1....

+

Convocatoria 2...

+
+

 

+
+ + diff --git a/html2005/estilos/muestra25g.htm b/html2005/estilos/muestra25g.htm new file mode 100644 index 0000000..d7933ef --- /dev/null +++ b/html2005/estilos/muestra25g.htm @@ -0,0 +1,61 @@ + + + +Enlaces de Primer Ciclo + + + + + + +
+
Primer Ciclo +
+ Segundo Ciclo
+
+
+

2º CICLO

+

Actividades

+

Convocatorias

+

Enlaces

+

 

+

 

+

 

+
+
+
+

También en este caso ponemos unos enlaces para los alumnos + del segundo ciclo.

+

Yahoo!

+

Altavista

+

...

+
+

 

+
+ + diff --git a/html2005/estilos/muestra26.htm b/html2005/estilos/muestra26.htm new file mode 100644 index 0000000..36dfc74 --- /dev/null +++ b/html2005/estilos/muestra26.htm @@ -0,0 +1,49 @@ + + + + +Documento sin título + + + + + + +

Así se ve en pantalla el texto al que se le ha aplicado el estilo descrito: + letra de tipo sans-serif, tamaño 14 puntos, color blanco sobre +fondo azul marino.

+

Si lo imprimes o, si utilizas la opción Archivo + / Vista preliminar, comprobarás que se muestra con una apariencia + diferente: letra de tipo serif, tamaño + 10 puntos y color negro sobre fondo blanco

+ + diff --git a/html2005/estilos/muestra3.htm b/html2005/estilos/muestra3.htm new file mode 100644 index 0000000..14eac10 --- /dev/null +++ b/html2005/estilos/muestra3.htm @@ -0,0 +1,95 @@ + + + + + + Muestra de estilos + + + + + + + + + + + +
+ +
+ +

<head>
+ + ... +
+ + <style type="text/css">
+ + p.azul {color: blue}
+ + p.rojo {color: red}
+ + </style>
+ + </head> +
+ + <body>
+ + <p class="azul"> Este párrafo aparecerá escrito en azul. </p>

+ + +

<p class="rojo"> Este se mostrará en rojo. </p>

+ + +

<p> Este aparecerá en el color por defecto porque no tiene especificada ninguna clase </p>
+ + </body>
+ +

+ +
+ +
Visualizar el formato resultante +
+ +
+ + +
+ +

Este párrafo aparecerá escrito en azul.

+ + +

Este se mostrará en rojo.

+ + +

Este aparecerá en el color por defecto porque no tiene especificada ninguna clase

+ +
+ + + diff --git a/html2005/estilos/muestra4.htm b/html2005/estilos/muestra4.htm new file mode 100644 index 0000000..e2013d1 --- /dev/null +++ b/html2005/estilos/muestra4.htm @@ -0,0 +1,104 @@ + + + + + + Muestra de estilos + + + + + + + + + + + +
+ +
+ +

<head>
+ + ... +
+ + <style type="text/css">
+ + li em {color: green}
+ + </style>
+ + </head> +
+ + <body>
+ + <p>La palabra <em>"atención"</em> está + enfatizada pero se presenta en su color normal porque:</p>
+ +<ol>
+ + <li>Está enfatizada pero... </li>
+ + <li><em>No pertenece a una lista</em></li>
+ +</ol>
+ + <p>La segunda condición también está enfatizada, + pero en este caso pertenece a una lista y se ve en verde </p></body> +
+ +

+ +
+ +
Visualizar el formato resultante +
+ +
+ + +
+ +

La palabra "atención" está enfatizada pero se presenta en su color normal porque:

+ + +
    + +
  1. Está enfatizada pero...
    2. + +
  2. No pertenece a una lista
    3. + + +
+ + +

La segunda condición tambi&eactte;n está enfatizada, pero en este caso pertenece a una lista y se ve en verde.

+ +
+ + + diff --git a/html2005/estilos/muestra5.htm b/html2005/estilos/muestra5.htm new file mode 100644 index 0000000..b718740 --- /dev/null +++ b/html2005/estilos/muestra5.htm @@ -0,0 +1,111 @@ + + + + + + Muestra de estilos + + + + + + + + + + + +
+ +
+ +

<head>
+ + ... +
+ + <style type="text/css">
+ + .azul {color: blue}
+ + .rojo {color: red}
+ +</style>
+ +</head> +
+ +<body>
+ +<p class="azul"> Este párrafo aparecerá escrito en azul. </p>
+ +<ul>
+ +<li class="rojo"> Este elemento de lista se mostrará en rojo. </li>
+ +<li> Este se mostrará en negro porque no tiene especificada ninguna clase. </li>
+ +<li class="azul"> Este se mostrará en azul. </li>
+ +</ul>
+ +<p> Este párrafo aparecerá en el color por defecto porque no tiene especificada ninguna clase </p>
+ +</body>
+ +

+ +
+ +
Visualizar el formato resultante +
+ +
+ +
+ +

+

+

Este párrafo aparecerá escrito en azul.

+ + + + + +

Este párrafo aparecerá en el color por defecto porque no tiene especificada ninguna clase

+ +
+ + + diff --git a/html2005/estilos/muestra6.htm b/html2005/estilos/muestra6.htm new file mode 100644 index 0000000..d918750 --- /dev/null +++ b/html2005/estilos/muestra6.htm @@ -0,0 +1,116 @@ + + + + + + Muestra de estilos + + + + + + + + + + + +
+ +
+ +

<head>
+ + ... +
+ + <style type="text/css">
+ + .importante {font-weight : bold}
+ +#muy-importante {color: red}
+ +</style>
+ +</head> +
+ +<body>
+ +<p>Escribimos una lista de condiciones que consideramos importantes:</p>
+ +<ul class="importante">
+ + <li>Primera condición importante</li>
+ + <li>Otra que también lo es.</li>
+ + <li id="muy-importante">Ésta es muy importante y + por eso la diferenciamos del resto.</li>
+ + <li>Ésta vuelve a ser importante pero no tanto como la anterior. + </li>
+ +</ul>
+ +<p>Ahora seguimos con el texto normal </p>
+ +</body>
+ +

+ +
+ +
Visualizar el formato resultante +
+ +
+ +
+ +

Escribimos una lista de condiciones que consideramos importantes:

+ + + + + +

Ahora seguimos con el texto normal

+ +
+ + + diff --git a/html2005/estilos/muestra6b.htm b/html2005/estilos/muestra6b.htm new file mode 100644 index 0000000..faf7942 --- /dev/null +++ b/html2005/estilos/muestra6b.htm @@ -0,0 +1,145 @@ + + + + + + + + + + + + Muestra de estilos + + + + + + + + + + + + + + + + + + + + + + + +
+
+

<head>
+ + + +...
+ + + +<style type="text/css">
+ + + +p {color: #000066}
+ + + +</style>
+ + + +</head>
+ + + +<body>
+ + + +<p>Escribimos un párrafo</p>

+ + + +

<p style="color:red; font-weight:bold">
+ + + +Este párrafo se ha modificado con un estilo en +línea y se muestra con una variación de color y +grosor.</p>

+ + + +

<p>Nuevamente nos ajustamos al color establecido +en la hoja interna y este párrafo recupera los valores +originales.</p>
+ + + +</body>

+ + + +
+ + + +
Visualizar +el formato resultante +
+ + + +
+ + + +
+

Escribimos un párrafo.

+ + + +

Este +párrafo se ha modificado con un estilo en línea y +se muestra con una variación de color y grosor.

+ + + +

Nuevamente nos ajustamos al color establecido en la hoja +interna y este párrafo recupera los valores originales.

+ + + +
+ + + + + diff --git a/html2005/estilos/muestra7.htm b/html2005/estilos/muestra7.htm new file mode 100644 index 0000000..7e30f2c --- /dev/null +++ b/html2005/estilos/muestra7.htm @@ -0,0 +1,92 @@ + + + + Muestra de estilos + + + + + + + + + + + + + +
+
+

<style type="text/css">
+ +<!--
+ +selector{
+ +background-image: url(../imagenes/pluma2.gif);
+ +background-repeat:no-repeat;
+ +background-position:200px 40px;
+ +}
+ +-->
+ +</style>
+ +

+ +
+ +
Visualizar +el formato resultante +
+ +
+ +
+

Imagen de fondo situada a 200 píxeles del borde +izquierdo y 40 del superior.

+ +

 

+ +
+

Podemos utilizar cualquier +unidad de las aceptadas en CSS (px, pt, in, cm, em, ex)

+ +
+ +

 

+ +
+ + + diff --git a/html2005/estilos/muestra8.htm b/html2005/estilos/muestra8.htm new file mode 100644 index 0000000..2fd02e1 --- /dev/null +++ b/html2005/estilos/muestra8.htm @@ -0,0 +1,80 @@ + + + + Muestra de estilos + + + + + + + + + + + + + +
+
+

<style type="text/css">
+ +<!--
+ +selector{
+ +background-image: url(../imagenes/pluma2.gif);
+ +background-repeat:no-repeat;
+ +background-position:30% 70%;
+ +}
+ +-->
+ +</style>
+ +

+ +
+ +
Visualizar +el formato resultante +
+ +
+ +
+

Imagen de fondo situada en una posición relativa en +términos porcentuales

+ +
+ + + diff --git a/html2005/estilos/muestra9.htm b/html2005/estilos/muestra9.htm new file mode 100644 index 0000000..1fb0a75 --- /dev/null +++ b/html2005/estilos/muestra9.htm @@ -0,0 +1,89 @@ + + + + Muestra de estilos + + + + + + + + + + + + + +
+
+

<style type="text/css">
+ +<!--
+ +selector{
+ +background-image: url(../imagenes/pluma2.gif);
+ +background-repeat:no-repeat;
+ +background-position:top right;}
+ +-->
+ +</style>
+ +

+ +
+ +
Visualizar +el formato resultante +
+ +
+ +
+

Imagen de fondo situada utilizando las palabras reservadas top +y right para situarla en la esquina superior derecha de la zona a la +que se aplica el estilo.

+ +

 

+ +
Podemos +utilizar una única referencia que indicaría la +posición vertical o bien la combinación de +cualquiera de los términos reservados para indicar la +posición vertical (top, center y bottom) con los de +posición horizontal (left, center y right)
+ +
+ + + diff --git a/html2005/estilos/muestrasdeestilos.css b/html2005/estilos/muestrasdeestilos.css new file mode 100644 index 0000000..2aa7173 --- /dev/null +++ b/html2005/estilos/muestrasdeestilos.css @@ -0,0 +1,34 @@ +@import url(../nvu2005.css); + + +.zonaizq { + position : absolute; + left: 0px; + top: 0px; + padding-left:1%; + width: 49%; + height:100%; + background-color: #efe9b7; + +} +.zonadcha{ + margin-left:51%; + margin-right:1%; + width: 48%; + height:100%; + visibility:hidden; +} +.codigo { + margin: 10px; + text-align:left; +} +a:link { + color: #000066; +} +a:visited { + color: #AA1A04; +} +a:hover { + font-style: italic; + color: #000066; +} diff --git a/html2005/estilos/periodico.html b/html2005/estilos/periodico.html new file mode 100644 index 0000000..1ac4ed1 --- /dev/null +++ b/html2005/estilos/periodico.html @@ -0,0 +1,214 @@ + + + + + + Periódico- Ejemplo con cabecera, tres +columnas y pie + + + + + + + + + + + +
+
+

ando.enred.ando

+ +

Periódico +escolar del CEIP "Colenet"

+ +
+ +
+

Convocado el ciclo de charlas "Todos, +aquí,  ahora"

+ +

La realidad social del barrio, con +la afluencia de un importante contingente de población +inmigrante se ha hecho notar en el colegio. Dentro de las + actividades de la semana cultural se ha convocado un ciclo de +charlas para acercarnos con una visión integradora al +enriquecimiento que puede suponer esta situación.

+ +Lorem +ipsum dolor sit amet, consectetur +adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore +magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation +ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute +irure dolor in reprehenderit in voluptate velit esse cillum dolore eu +fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, +sunt in culpa qui officia deserunt mollit anim id est laborum.
+ +
+ +Sed ut perspiciatis unde omnis iste natus error sit voluptatem +accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae +ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt +explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut +odit aut fugit, sed quia consequuntur magni dolores eos qui ratione +voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum +quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam +eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat +voluptatem.
+ +
+ +Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis +suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis +autem vel eum iure reprehenderit qui in ea voluptate velit esse quam +nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo +voluptas nulla pariatur? +
+ +
+

El ovni recién aterrizado frente a la secretaría

+ +

El +cole más multicultural del universo

+ +

Esta mañana, al abrir las +puertas del colegio, se encontró aparcado un OVNI enfrente +de la secretaría. Algunas fuentes indican que han visto +entrar en el artefacto al profe de música y aún +no le han visto salir.

+ +
+ +
Lorem ipsum dolor sit amet, consectetur +adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore +magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation +ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute +irure dolor in reprehenderit in voluptate velit esse cillum dolore eu +fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, +sunt in culpa qui officia deserunt mollit anim id est laborum.
+ +
+ +Sed ut perspiciatis unde omnis iste natus error sit voluptatem +accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae +ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt +explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut +odit aut fugit, sed quia consequuntur magni dolores eos qui ratione +voluptatem sequi nesciunt. 
+ +
+ +Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis +suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis +autem vel eum iure reprehenderit qui in ea voluptate velit esse quam +nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo +voluptas nulla pariatur? +
+ +
Lorem ipsum dolor sit amet, consectetur +adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore +magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation +ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute +irure dolor in reprehenderit in voluptate velit esse cillum dolore eu +fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, +sunt in culpa qui officia deserunt mollit anim id est laborum.
+ +
+ +Sed ut perspiciatis unde omnis iste natus error sit voluptatem +accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae +ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt +explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut +odit aut fugit, sed quia consequuntur magni dolores eos qui ratione +voluptatem sequi nesciunt. t +voluptatem.
+ +
+ +Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis +suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis +autem vel eum iure reprehenderit qui in ea voluptate velit esse quam +nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo +vol
+ +
+
Número 0
+ +
creado especialmente para este curso
+ +
19 de septiembre de 2005
+ +
+ +
+ + + diff --git a/html2005/estilos/piesdeimagenes.css b/html2005/estilos/piesdeimagenes.css new file mode 100644 index 0000000..bfe583c --- /dev/null +++ b/html2005/estilos/piesdeimagenes.css @@ -0,0 +1,17 @@ +/* Generated by CaScadeS, a stylesheet editor for Mozilla Composer */ + + .imagen { border: 1px solid rgb(153, 153, 153); + padding: 10px; + float: right; + margin-left: 10px; + width: 260px; + } + + .imagen p { font-size: 80%; + font-style: italic; + text-align: center; + } + + .escalada { width: 100%; + } + diff --git a/html2005/estilos/poemacentradoparaie.html b/html2005/estilos/poemacentradoparaie.html new file mode 100644 index 0000000..fe2247b --- /dev/null +++ b/html2005/estilos/poemacentradoparaie.html @@ -0,0 +1,159 @@ + + + + + + Centrando textos, imágenes y bloques + + + + + + + + + + + + +  +
+
+
Soneto a una nariz (Francisco de Quevedo)
+ +Érase un hombre a una +nariz pegado,
+ +érase una nariz superlativa,
+ +érase una nariz sayón y escriba,
+ +érase un peje espada muy barbado
+ +era un reloj de sol mal encarado,
+ +érase una alquitara pensativa,
+ +érase un elefante boca arriba,
+ +era Ovidio Nasón más narizado.
+ +Érase el espolón de una galera,
+ +érase una pirámide de Egipto,
+ +las doce tribus de narices era;
+ +érase un naricismo infinito,
+ +muchísimo nariz, nariz tan fiera
+ +que en la cara de Anás fuera delito.
+ +
+ +
+ +
+ +

Aquí tienes el código necesario para +centrar el +bloque en Internet Explorer donde puedes apreciar que ha sido necesario +encerrarlo dentro de otro contenedor con la alineación +centrada del texto. Si elimináramos las propiedades margin-left:auto +y margin.right:auto de la clase "poema" +seguiría mostrándose correctamente en Internet +Explorer, pero entonces no lo haría en otros navegadores, +heredando el margen izquierdo que estuviera establecido previamente y +le correspondiera por herencia al bloque (lo cual, dicho sea de paso, +parece la interpretación más acorde a lo +establecido)

+ +
<div +class="poemacentradoparaie">
+ +
+ +<div +class="poema">
+ +<h5>Soneto +a una nariz (Francisco de Quevedo)</h5>
+ +&Eacute;rase +un hombre a una
+ +nariz +pegado,<br>
+ +&eacute;rase +una nariz superlativa,<br>
+ +&eacute;rase +una nariz say&oacute;n y escriba,<br>
+ +&eacute;rase +un peje espada muy barbado<br>
+ +era un reloj de sol +mal encarado,<br>
+ +&eacute;rase +una alquitara pensativa,<br>
+ +&eacute;rase +un elefante boca arriba,<br>
+ +era Ovidio +Nas&oacute;n m&aacute;s narizado.<br>
+ +&Eacute;rase +el espol&oacute;n de una galera,<br>
+ +&eacute;rase +una pir&aacute;mide de Egipto,<br>
+ +las doce tribus de +narices era;<br>
+ +&eacute;rase +un naricismo infinito,<br>
+ +much&iacute;simo +nariz, nariz tan fiera<br>
+ +que en la cara de +An&aacute;s fuera delito.<br>
+ +</div>
+ +
+ +</div>
+ +
+ +
+ +

 

+ +
+ + + diff --git a/html2005/estilos/posiciones.html b/html2005/estilos/posiciones.html new file mode 100644 index 0000000..ae1ca27 --- /dev/null +++ b/html2005/estilos/posiciones.html @@ -0,0 +1,117 @@ + + + + + + + + + + + + + + + + + + +

Este es el primer párrafo

+ +
este +es el primer p left: 125px;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
segundo +p dentro de otro p. tiene otro p anidado left: 125px; +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +

esto +es el +tercer p y va anidado dentro del segundo. A continuación +viene el cierre de los tres ps +debajo +en un p hijo del anterior +

+ +

+ +

este +texto corresponde al +segundo p y está +antes del cierre del segundo p

+ +

este texto pertenecería al primer p +está despues del cierre del segundo y antes del cierre del +primero +

+ +
+ +

+ + + diff --git a/html2005/estilos/posiciones2.html b/html2005/estilos/posiciones2.html new file mode 100644 index 0000000..4dfb9c6 --- /dev/null +++ b/html2005/estilos/posiciones2.html @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + +
+
esto +está en el primer div
+ +
esto +en el segundo
+ +
+ + + diff --git a/html2005/estilos/posiciones3.html b/html2005/estilos/posiciones3.html new file mode 100644 index 0000000..3f7ec99 --- /dev/null +++ b/html2005/estilos/posiciones3.html @@ -0,0 +1,105 @@ + + + + + + + + + + + + + + + + + + + +
+
+

cabecera

+ +
+ +
+

aquí viene un lorem ipsum aquí viene un +lorem ipsum aquí viene un lorem ipsum aquí viene +un lorem ipsum aquí viene un lorem ipsum aquí +viene un lorem ipsum aquí viene un lorem ipsum +aquí viene un lorem ipsum

+ +

aquí viene un lorem ipsum aquí viene un +lorem ipsum aquí viene un lorem ipsum aquí viene +un lorem ipsum aquí viene un lorem ipsum aquí +viene un lorem ipsum aquí viene un lorem ipsum +aquí viene un lorem ipsum.

+ +

+ +

+ +

aqui va algo para molestar y aquis sigue algo más

+ +

aqui va algo para molestar y aquis sigue algo más

+ +

+ +
+ +
+ +
+

Subcabecera

+ +

aquí viene un lorem ipsum aquí viene un +lorem ipsum aquí viene un lorem ipsum aquí viene +un lorem ipsum aquí viene un lorem ipsum aquí +viene un lorem ipsum

+ +
+ + + +
+ + + diff --git a/html2005/estilos/posiciones4.html b/html2005/estilos/posiciones4.html new file mode 100644 index 0000000..65a1de8 --- /dev/null +++ b/html2005/estilos/posiciones4.html @@ -0,0 +1,112 @@ + + + + + + Example 1 - BODY + + + + + + + + + + +

This web site is about Cascading Style Sheets as a means to separate the presentation from the structural markup of a web site, and it will help you answer some of those frequently asked Questions, explains some of the Basics of CSS, gives you tips and tricks for tackling the problems with Netscape 4, offers you a tutorial about Positioning with CSS (CSS-P, web design without tables). There is also a page with interesting Links. +
+ +This page uses CSS to present the content in the best possible +manner. If you can see this message, then CSS (or JavaScript) is not +enabled in your browser, and the page will not appear as the designer +intended.

+ +
+Positioning with CSS +HEADER with image +
+ +
+
Link 1
+ +
Link 1
+ +
Link 1
+ +
+ +
CONTENT, with the nested FOOTER box
+ +
+Some text here, like: With this tutorial I'll show you how easy this +is, and I'll provide you with the CSS stylesheet and the graphics. Some +CSS vs. NN 4.xx issues are already addressed at CSS Issues. +
+ +
FOOTER BOX
+ +This will be the secondary navigation +
+ +
+ + + diff --git a/html2005/estilos/posiciones5.html b/html2005/estilos/posiciones5.html new file mode 100644 index 0000000..3243dd1 --- /dev/null +++ b/html2005/estilos/posiciones5.html @@ -0,0 +1,49 @@ + + + + + + + + + + + + +
+
+
And the HTML code looks like this: +
...
<style>
body {
margin:9px 9px 0 9px;
padding:0;
background:#FFF;}
#level0 {
background:#FC0;}
#level1 {
margin-left:143px;
padding-left:9px;
background:#FFF;}
#level2 {
background:#FFF3AC;}
#level3 {
margin-right:143px;
padding-right:9px;
background:#FFF;}
#main {
background:#CCC;}
</style>
...
<body>
<div id="level0">
<div id="level1">
<div id="level2">
<div id="level3">
<div id="main">
The code you are reading.
</div>
</div>
</div>
</div>
</div>
</body>
...
+ +
+ +
+ +
+ + + diff --git a/html2005/estilos/prensa.htm b/html2005/estilos/prensa.htm new file mode 100644 index 0000000..5020dd6 --- /dev/null +++ b/html2005/estilos/prensa.htm @@ -0,0 +1,321 @@ + + + + + + Prensa escolar + + + + + + +

Veamos las particularidades que aportan las redes telemáticas a la elaboración + + de un periódico escolar:

+ + +

Respecto al documento

+ + + + + +

Respecto al proceso

+ + + + + +

Elementos multimedia

+ + +

La edición del periódico escolar en papel permite presentar información textual + + e imagen fija, bien consista ésta en dibujos, gráficos o fotos. Como elemento + + positivo no podemos olvidar la reproducción de la grafía original que puede + + ser muy interesante cuando los autores son alumnos de los primeros niveles de + + escolaridad. También en la edición electrónica podemos incorporar las grafías + + originales, bien de textos o bien de dibujos, mediante la utilización de algún + + periférico de captura de imagen, y no olvidemos que esta aplicación acompaña + + a un equipo dotado con una tarjeta de captura de vídeo. En la edición electrónica + + de nuestra revista encontramos como novedad la posibilidad de incorporar junto + + al texto y la imagen fija elementos multimedia: sonido e imagen en movimiento. + + Bien es verdad que habrá que tener en cuenta que el actual estado de las redes + + de comunicación hacen todavía poco viable la inclusión de secuencias animadas + + de cierta duración, ya que su excesiva extensión hace que su transmisión se + + dilate mucho. Por ello habrá que tener en cuenta el foro en el que se va a difundir + + la revista: Si es la red interna del centro podremos rebajar las exigencias + + en cuanto a espacio ocupado por la información, ya que la infraestructura de + + las redes internas hace posible una mayor densidad de tráfico sin pérdida sensible + + de velocidad. Si el destino es Internet habrá que ser muy cuidadosos con este + + aspecto debido al reducido ancho de banda disponible. Habrá que renunciar a + + las presentaciones espectaculares, so pena de perder a los visitantes, aburridos + + ante un tiempo de descarga que se haga intolerable.

+ + +

Presentación atractiva

+ + +

La edición en papel suele hacerse utilizando los medios de reprografía con + + los que se cuenta en el centro: multicopista fotocopiadora. En ocasiones los + + centros con una cierta tradición y fuerte raigambre en su entorno pueden conseguir + + un patrocinador que haga alguna aportación económica, con la que se puede acceder + + a una modesta edición en imprenta. Lo habitual es que la edición, cuando se + + hace con los medios propios, sea en blanco y negro, con la evidente pérdida + + de calidad de las imágenes que, sin que pueda evitarse, tienden a empastarse + + en un masa negruzca sin ningún detalle. La edición en imprenta, mucho menos + + frecuente, mejora sensiblemente la calidad, pero también suele ser en blanco + + y negro para reducir costes. La edición electrónica nos permite incorporar el + + color a la presentación de la revista, con lo que no sólo se hace mucho más + + vistosa, sino que nos abre las puertas de un componente que resulta fundamental + + para transmitir de forma correcta algunos contenidos.

+ + +

Facilidad de edición

+ + +

Para llevar a cabo la maquetación de una revista escolar sencilla, con una + + presentación adecuada, es imprescindible manejar un programa de autoedición + + o, en su defecto, dominar en profundidad de alguno de los modernos procesadores + + de texto. Esto significa que estamos privando a alumnos y alumnas, especialmente + + a los más pequeños, de la posibilidad de controlar en gran medida su trabajo. + + Por su parte, el lenguaje HTML que utilizamos para realizar la creación de páginas + + WEB es intrínsecamente sencillo al apoyarse en un concepto simple: el documento + + original es texto puro, sin formatear, al que se encierra entre unas etiquetas + + que se encargan de especificar la apariencia de cada fragmento. Por ejemplo + + para indicar que algo va en en negrita habría que poner <B> que indica que + + lo que va a continuación es negrita y </B> que indica que acaba la negrita. + + El aprendizaje de las etiquetas básicas y su utilización no lleva más que un + + par de horas, sin contar con la gran cantidad de editores WYSWYG (lo que ves + + es lo que obtienes) en los que ni siquiera es necesario escribir dichas etiquetas. + + Con esta forma de trabajar posibilitamos que se puedan trabajar en profundidad + + y con autonomía los aspectos de expresión, ya que el alumno sólo tiene que preocuparse + + por la corrección ortográfica, gramatical y de estilo para expresar aquello + + que realmente quiere decir, sin preocuparse de la presentación. Por otra parte, + + necesitar únicamente una herramienta que produzca textos sin formatear nos permite + + recuperar algunas máquinas, de las que se han quedado obsoletas, para que puedan + + ser empleadas por los chavales.

+ + +

Retroalimentación

+ + +

La sección de Cartas al Director es la ventana por la que la prensa escrita + + recoge las opiniones, críticas y aportaciones de los lectores. Sin considerar + + otros elementos, es muy posible que en más de una ocasión hayamos renunciado + + a manifestar nuestras opiniones utilizando este medio, desanimados ante la falta + + de inmediatez del correo tradicional. En una revista electrónica desaparece + + este inconveniente y se propicia la participación y el intercambio de informaciones + + y opiniones. Es fácil imaginar la importancia que la sección de Correo puede + + tener si nos atrevemos a embarcarnos en un proyecto intercentros en el que la + + revista de cada uno sea el núcleo de comunicación e intercambio.

+ + +

Economía.

+ + +

Frente a los gastos que genera una edición en papel tenemos la economía de + + la edición electrónica: el ejemplar virtual es único y a la vez múltiple y adaptable + + a la demanda. único en tanto que no creamos más que una copia. Múltiple en cuanto + + que cada usuario dispone de su propio ejemplar a partir de la publicación electrónica. + + La repercusión económica de esta característica es obvia: no necesitamos hacer + + una inversión en papel y en reprografía para elaborar una tirada sobre cuya + + difusión no tenemos certeza.

+ + +

Rapidez

+ + +

Quien haya estado comprometido en la elaboración de un periódico escolar habrá + + tenido que padecer la lentitud de los procesos necesarios para confeccionar + + los contenidos cuando se trata de un periódico de centro. Además habrá tenido + + que añadir las dilaciones que conlleva la impresión de los materiales y su distribución. + + Si se pretende crear un periódico de aula o de nivel es bastante probable que + + se haya abandonado la idea, ya que la inversión en tiempo y medios para una + + tirada muy reducida no compensa el aprovechamiento educativo que se pueda obtener. + + La organización de las tareas será el único medio para paliar el primer inconveniente + + citado, pero el resto es perfectamente subsanable cuando trabajamos con una + + edición electrónica: no hay que esperar hasta que el periódico esté impreso + + y la difusión es automática. No es necesario que se actualice toda una edición: + + cada clase o grupo puede ir incorporando sus materiales a medida que se preparan. + + Un simple avisador gráfico al lado del enlace nos informará de que se trata + + de un material reciente. Incluso es posible disponer de un periódico propio + + de cada clase puesto que se anulan los costes que implicaba la edición en papel. + +

+ + +

Distribución masiva

+ + +

¿A cuántas personas llega nuestro periódico escolar? Lo habitual es que la + distribución alcance al entorno próximo al centro: familia, barrio, pueblo. + En algunos casos, si existe correspondencia escolar, puede llegar a los centros + con los que mantenemos relación. En el caso de la revista escolar electrónica + estamos, literalmente, "lanzando al mundo" nuestro mensaje. Ahora bien, esta + potencial distribución de lo que hemos hecho en nuestro centro en un ámbito + planetario sólo se queda en una posibilidad teórica si no la acompañamos de + otras medidas de difusión. Tras unas primeras experiencias para hacernos al + medio sería aconsejable integrarnos en alguna red, nacional o supranacional, + dedicada a potenciar este tipo de prensa escolar. 

+ + +

Almacenamiento

+ + +

Problema: Hemos hecho una tirada de 300 ejemplares y se han vendido 230. Cada + + ejemplar tenía 25 páginas. Para que la tinta no traspasara el papel la impresión + + era a una cara. ¿Qué hacemos con los ejemplares que nos sobran?

+ + +

Solución 1: (persistente) A ver si conseguimos hacer otra "batida" del barrio + + y los colocamos.

+ + +

Solución 2: (ecológico-educativa) Intentemos reciclar el papel en las aulas + + y la secretaría utilizándolo para borradores y "trabajos en sucio".

+ + +

Solución 3: (ecológica a secas) Vamos a tirarlo al contenedor de papel.

+ + +

Solución 4: (conservacionista) Vamos a guardarlo en el almacén para que no + + estorbe mientras pensamos algo.

+ + +

Aunque se haya planteado en tono jocoso este es uno de los problemas que presenta + + la edición en papel. Las 1750 hojas excedentes de la tirada del problema anterior + + acaban, en la mayoría de los casos, como material para reciclaje o amontonando + + polvo en algún rincón de un almacén. En la edición electrónica de la revista + + escolar no hay excedentes, porque la utilización de papel por parte del centro + + es mínima y, en todo caso, ajustada a las demandas de ejemplares impresos. Por + + lo tanto no tenemos problemas de almacenamiento de material sobrante. Además, + + las ediciones previas pueden estar accesibles ocupando un mínimo espacio en + + el disco duro del servidor.

+ + + + diff --git a/html2005/estilos/prensa2.html b/html2005/estilos/prensa2.html new file mode 100644 index 0000000..f67098d --- /dev/null +++ b/html2005/estilos/prensa2.html @@ -0,0 +1,251 @@ + + + + Prensa escolar + + + + + + + +

Veamos las particularidades que aportan las redes +telemáticas a la elaboración de un +periódico escolar:

+ +

+ +

Respecto al documento

+ +

Elementos multimedia

+ +La edición del periódico escolar en papel permite +presentar información textual e imagen fija, bien consista +ésta en dibujos, gráficos o fotos. Como elemento +positivo no podemos olvidar la reproducción de la +grafía original que puede ser muy interesante cuando los +autores son alumnos de los primeros niveles de escolaridad.  +

También en la edición +electrónica podemos incorporar las grafías +originales, bien de textos o bien de dibujos, mediante la +utilización de algún periférico de +captura de imagen, y no olvidemos que esta aplicación +acompaña a un equipo dotado con una tarjeta de captura de +vídeo. En la edición electrónica de +nuestra revista encontramos como novedad la posibilidad de incorporar +junto al texto y la imagen fija elementos multimedia: sonido e imagen +en movimiento. Bien es verdad que habrá que tener en cuenta +que el actual estado de las redes de comunicación hacen +todavía poco viable la inclusión de secuencias +animadas de cierta duración, ya que su excesiva +extensión hace que su transmisión se dilate +mucho. Por ello habrá que tener en cuenta el foro en el que +se va a difundir la revista: 

+ + + +

Presentación atractiva

+ +

La edición en papel suele hacerse utilizando los +medios de reprografía con los que se cuenta en el centro: +multicopista fotocopiadora. En ocasiones los centros con una cierta +tradición y fuerte raigambre en su entorno pueden conseguir +un patrocinador que haga alguna aportación +económica, con la que se puede acceder a una modesta +edición en imprenta. 

+ +

Lo habitual es que la edición, cuando se hace con +los medios propios, sea en blanco y negro, con la evidente +pérdida de calidad de las imágenes que, sin que +pueda evitarse, tienden a empastarse en un masa negruzca sin +ningún detalle. 

+ +

La edición en imprenta, mucho menos frecuente, +mejora sensiblemente la calidad, pero también suele ser en +blanco y negro para reducir costes. 

+ +

La edición electrónica nos permite +incorporar el color a la presentación de la revista, con lo +que no sólo se hace mucho más vistosa, sino que +nos abre las puertas de un componente que resulta fundamental para +transmitir de forma correcta algunos contenidos.

+ +

Facilidad de edición

+ +

Para llevar a cabo la maquetación de una revista +escolar sencilla, con una presentación adecuada, es +imprescindible manejar un programa de autoedición o, en su +defecto, dominar en profundidad de alguno de los modernos procesadores +de texto. Esto significa que estamos privando a alumnos y alumnas, +especialmente a los más pequeños, de la +posibilidad de controlar en gran medida su trabajo.

+ +

Por su parte, el lenguaje HTML que utilizamos para realizar +la creación de páginas WEB es +intrínsecamente sencillo al apoyarse en un concepto simple: +el documento original es texto puro, sin formatear, al que se encierra +entre unas etiquetas que se encargan de especificar la apariencia de +cada fragmento. Por ejemplo para indicar que algo va en en negrita +habría que poner <B> que indica que lo que va +a continuación es negrita y </B> que indica +que acaba la negrita. El aprendizaje de las etiquetas +básicas y su utilización no lleva más +que un par de horas, sin contar con la gran cantidad de editores WYSWYG +(lo que ves es lo que obtienes) en los que ni siquiera es necesario +escribir dichas etiquetas. 

+ +

Con esta forma de trabajar posibilitamos que se puedan +trabajar en profundidad y con autonomía los aspectos de +expresión, ya que el alumno sólo tiene que +preocuparse por la corrección ortográfica, +gramatical y de estilo para expresar aquello que realmente quiere +decir, sin preocuparse de la presentación. 

+ +

Por otra parte, necesitar únicamente una +herramienta que produzca textos sin formatear nos permite recuperar +algunas máquinas, de las que se han quedado obsoletas, para +que puedan ser empleadas por los chavales.

+ +

Retroalimentación

+ +

La sección de Cartas al Director es la ventana por +la que la prensa escrita recoge las opiniones, críticas y +aportaciones de los lectores. Sin considerar otros elementos, es muy +posible que en más de una ocasión hayamos +renunciado a manifestar nuestras opiniones utilizando este medio, +desanimados ante la falta de inmediatez del correo +tradicional. 

+ +

En una revista electrónica desaparece este +inconveniente y se propicia la participación y el +intercambio de informaciones y opiniones. 

+ +

Es fácil imaginar la importancia que la +sección de Correo puede tener si nos atrevemos a embarcarnos +en un proyecto intercentros en el que la revista de cada uno sea el +núcleo de comunicación e intercambio.

+ +

Respecto al proceso

+ +

Economía.

+ +

Frente a los gastos que genera una edición en papel +tenemos la economía de la edición +electrónica: el ejemplar virtual es único y a la +vez múltiple y adaptable a la demanda. único en +tanto que no creamos más que una copia, múltiple +en cuanto que cada usuario dispone de su propio ejemplar a partir de la +publicación electrónica. 

+ +

La repercusión económica de esta +característica es obvia: no necesitamos hacer una +inversión en papel y en reprografía para elaborar +una tirada sobre cuya difusión no tenemos certeza.

+ +

Rapidez

+ +

Quien haya estado comprometido en la elaboración de +un periódico escolar habrá tenido que padecer la +lentitud de los procesos necesarios para confeccionar los contenidos +cuando se trata de un periódico de centro. Además +habrá tenido que añadir las dilaciones que +conlleva la impresión de los materiales y su +distribución. 

+ +

Si se pretende crear un periódico de aula o de +nivel es bastante probable que se haya abandonado la idea, ya que la +inversión en tiempo y medios para una tirada muy reducida no +compensa el aprovechamiento educativo que se pueda obtener. 

+ +

La organización de las tareas será el +único medio para paliar el primer inconveniente citado, pero +el resto es perfectamente subsanable cuando trabajamos con una +edición electrónica: no hay que esperar hasta que +el periódico esté impreso y la +difusión es automática. 

+ +

No es necesario que se actualice toda una edición: +cada clase o grupo puede ir incorporando sus materiales a medida que se +preparan. Un simple avisador gráfico al lado del enlace nos +informará de que se trata de un material reciente. Incluso +es posible disponer de un periódico propio de cada clase +puesto que se anulan los costes que implicaba la edición en +papel.

+ +

Distribución masiva

+ +

¿A cuántas personas llega nuestro +periódico escolar? Lo habitual es que la +distribución alcance al entorno próximo al +centro: familia, barrio, pueblo. En algunos casos, si existe +correspondencia escolar, puede llegar a los centros con los que +mantenemos relación. 

+ +

En el caso de la revista escolar electrónica +estamos, literalmente, "lanzando al mundo" nuestro mensaje. Ahora bien, +esta potencial distribución de lo que hemos hecho en nuestro +centro en un ámbito planetario sólo se queda en +una posibilidad teórica si no la acompañamos de +otras medidas de difusión. 

+ +

Tras unas primeras experiencias para hacernos al medio +sería aconsejable integrarnos en alguna red, nacional o +supranacional, dedicada a potenciar este tipo de prensa +escolar. 

+ +

Almacenamiento

+ +

Problema: Hemos hecho una tirada de 300 ejemplares y se han +vendido 230. Cada ejemplar tenía 25 páginas. Para +que la tinta no traspasara el papel la impresión era a una +cara. ¿Qué hacemos con los ejemplares que nos +sobran?

+ + + +

Aunque se haya planteado en tono jocoso este es uno de los +problemas que presenta la edición en papel. Las 1750 hojas +excedentes de la tirada del problema anterior acaban, en la +mayoría de los casos, como material para reciclaje o +amontonando polvo en algún rincón de un +almacén. 

+ +

En la edición electrónica de la revista +escolar no hay excedentes, porque la utilización de papel +por parte del centro es mínima y, en todo caso, ajustada a +las demandas de ejemplares impresos. Por lo tanto no tenemos problemas +de almacenamiento de material sobrante. Además, las +ediciones previas pueden estar accesibles ocupando un mínimo +espacio en el disco duro del servidor.

+ + + diff --git a/html2005/estilos/prensa3.html b/html2005/estilos/prensa3.html new file mode 100644 index 0000000..fb6cecb --- /dev/null +++ b/html2005/estilos/prensa3.html @@ -0,0 +1,318 @@ + + + + + + Prensa escolar + + + + + + +

Veamos las particularidades que aportan las redes +telemáticas a la elaboración de un +periódico escolar:

+ + +

+
    +
  1. Respecto al documento +
      +
    1. Elementos multimedia
      2. +
    2. Presentación atractiva
      3. +
    3. Facilidad de edición
      4. +
    4. Retroalimentación
      5. +
    +
    2. +
  2. Respecto al proceso +
      +
    1. Economía.
      2. +
    2. Rapidez
      3. +
    3. Distribución masiva
      4. +
    4. Almacenamiento
      5. +
    +
    3. +
+

+ + +

Respecto al documento

+ + +

Elementos multimedia

+ + +La edición del periódico escolar en papel permite +presentar información textual e imagen fija, bien consista +ésta en dibujos, gráficos o fotos. Como elemento +positivo no podemos olvidar la reproducción de la +grafía original que puede ser muy interesante cuando los +autores son alumnos de los primeros niveles de escolaridad.  +

También en la edición +electrónica podemos incorporar las grafías +originales, bien de textos o bien de dibujos, mediante la +utilización de algún periférico de +captura de imagen, y no olvidemos que esta aplicación +acompaña a un equipo dotado con una tarjeta de captura de +vídeo. En la edición electrónica de +nuestra revista encontramos como novedad la posibilidad de incorporar +junto al texto y la imagen fija elementos multimedia: sonido e imagen +en movimiento. Bien es verdad que habrá que tener en cuenta +que el actual estado de las redes de comunicación hacen +todavía poco viable la inclusión de secuencias +animadas de cierta duración, ya que su excesiva +extensión hace que su transmisión se dilate +mucho. Por ello habrá que tener en cuenta el foro en el que +se va a difundir la revista: 

+ + + + + +

Presentación atractiva

+ + +

La edición en papel suele hacerse utilizando los +medios de reprografía con los que se cuenta en el centro: +multicopista fotocopiadora. En ocasiones los centros con una cierta +tradición y fuerte raigambre en su entorno pueden conseguir +un patrocinador que haga alguna aportación +económica, con la que se puede acceder a una modesta +edición en imprenta. 

+ + +

Lo habitual es que la edición, cuando se hace con +los medios propios, sea en blanco y negro, con la evidente +pérdida de calidad de las imágenes que, sin que +pueda evitarse, tienden a empastarse en un masa negruzca sin +ningún detalle. 

+ + +

La edición en imprenta, mucho menos frecuente, +mejora sensiblemente la calidad, pero también suele ser en +blanco y negro para reducir costes. 

+ + +

La edición electrónica nos permite +incorporar el color a la presentación de la revista, con lo +que no sólo se hace mucho más vistosa, sino que +nos abre las puertas de un componente que resulta fundamental para +transmitir de forma correcta algunos contenidos.

+ + +

Facilidad de edición

+ + +

Para llevar a cabo la maquetación de una revista +escolar sencilla, con una presentación adecuada, es +imprescindible manejar un programa de autoedición o, en su +defecto, dominar en profundidad de alguno de los modernos procesadores +de texto. Esto significa que estamos privando a alumnos y alumnas, +especialmente a los más pequeños, de la +posibilidad de controlar en gran medida su trabajo.

+ + +

Por su parte, el lenguaje HTML que utilizamos para realizar +la creación de páginas WEB es +intrínsecamente sencillo al apoyarse en un concepto simple: +el documento original es texto puro, sin formatear, al que se encierra +entre unas etiquetas que se encargan de especificar la apariencia de +cada fragmento. Por ejemplo para indicar que algo va en en negrita +habría que poner <B> que indica que lo que va +a continuación es negrita y </B> que indica +que acaba la negrita. El aprendizaje de las etiquetas +básicas y su utilización no lleva más +que un par de horas, sin contar con la gran cantidad de editores WYSWYG +(lo que ves es lo que obtienes) en los que ni siquiera es necesario +escribir dichas etiquetas. 

+ + +

Con esta forma de trabajar posibilitamos que se puedan +trabajar en profundidad y con autonomía los aspectos de +expresión, ya que el alumno sólo tiene que +preocuparse por la corrección ortográfica, +gramatical y de estilo para expresar aquello que realmente quiere +decir, sin preocuparse de la presentación. 

+ + +

Por otra parte, necesitar únicamente una +herramienta que produzca textos sin formatear nos permite recuperar +algunas máquinas, de las que se han quedado obsoletas, para +que puedan ser empleadas por los chavales.

+ + +

Retroalimentación

+ + +

La sección de Cartas al Director es la ventana por +la que la prensa escrita recoge las opiniones, críticas y +aportaciones de los lectores. Sin considerar otros elementos, es muy +posible que en más de una ocasión hayamos +renunciado a manifestar nuestras opiniones utilizando este medio, +desanimados ante la falta de inmediatez del correo +tradicional. 

+ + +

En una revista electrónica desaparece este +inconveniente y se propicia la participación y el +intercambio de informaciones y opiniones. 

+ + +

Es fácil imaginar la importancia que la +sección de Correo puede tener si nos atrevemos a embarcarnos +en un proyecto intercentros en el que la revista de cada uno sea el +núcleo de comunicación e intercambio.

+ + +

Respecto al proceso

+ + +

Economía.

+ + +

Frente a los gastos que genera una edición en papel +tenemos la economía de la edición +electrónica: el ejemplar virtual es único y a la +vez múltiple y adaptable a la demanda. único en +tanto que no creamos más que una copia, múltiple +en cuanto que cada usuario dispone de su propio ejemplar a partir de la +publicación electrónica. 

+ + +

La repercusión económica de esta +característica es obvia: no necesitamos hacer una +inversión en papel y en reprografía para elaborar +una tirada sobre cuya difusión no tenemos certeza.

+ + +

Rapidez

+ + +

Quien haya estado comprometido en la elaboración de +un periódico escolar habrá tenido que padecer la +lentitud de los procesos necesarios para confeccionar los contenidos +cuando se trata de un periódico de centro. Además +habrá tenido que añadir las dilaciones que +conlleva la impresión de los materiales y su +distribución. 

+ + +

Si se pretende crear un periódico de aula o de +nivel es bastante probable que se haya abandonado la idea, ya que la +inversión en tiempo y medios para una tirada muy reducida no +compensa el aprovechamiento educativo que se pueda obtener. 

+ + +

La organización de las tareas será el +único medio para paliar el primer inconveniente citado, pero +el resto es perfectamente subsanable cuando trabajamos con una +edición electrónica: no hay que esperar hasta que +el periódico esté impreso y la +difusión es automática. 

+ + +

No es necesario que se actualice toda una edición: +cada clase o grupo puede ir incorporando sus materiales a medida que se +preparan. Un simple avisador gráfico al lado del enlace nos +informará de que se trata de un material reciente. Incluso +es posible disponer de un periódico propio de cada clase +puesto que se anulan los costes que implicaba la edición en +papel.

+ + +

Distribución masiva

+ + +

¿A cuántas personas llega nuestro +periódico escolar? Lo habitual es que la +distribución alcance al entorno próximo al +centro: familia, barrio, pueblo. En algunos casos, si existe +correspondencia escolar, puede llegar a los centros con los que +mantenemos relación. 

+ + +

En el caso de la revista escolar electrónica +estamos, literalmente, "lanzando al mundo" nuestro mensaje. Ahora bien, +esta potencial distribución de lo que hemos hecho en nuestro +centro en un ámbito planetario sólo se queda en +una posibilidad teórica si no la acompañamos de +otras medidas de difusión. 

+ + +

Tras unas primeras experiencias para hacernos al medio +sería aconsejable integrarnos en alguna red, nacional o +supranacional, dedicada a potenciar este tipo de prensa +escolar. 

+ + +

Almacenamiento

+ + +

Problema: Hemos hecho una tirada de 300 ejemplares y se han +vendido 230. Cada ejemplar tenía 25 páginas. Para +que la tinta no traspasara el papel la impresión era a una +cara. ¿Qué hacemos con los ejemplares que nos +sobran?

+ + + + + +

Aunque se haya planteado en tono jocoso este es uno de los +problemas que presenta la edición en papel. Las 1750 hojas +excedentes de la tirada del problema anterior acaban, en la +mayoría de los casos, como material para reciclaje o +amontonando polvo en algún rincón de un +almacén. 

+ + +

En la edición electrónica de la revista +escolar no hay excedentes, porque la utilización de papel +por parte del centro es mínima y, en todo caso, ajustada a +las demandas de ejemplares impresos. Por lo tanto no tenemos problemas +de almacenamiento de material sobrante. Además, las +ediciones previas pueden estar accesibles ocupando un mínimo +espacio en el disco duro del servidor.

+ + + + diff --git a/html2005/estilos/presentaciondeleditordecss.swf b/html2005/estilos/presentaciondeleditordecss.swf new file mode 100644 index 0000000..61c4e73 Binary files /dev/null and b/html2005/estilos/presentaciondeleditordecss.swf differ diff --git a/html2005/estilos/quijote1.html b/html2005/estilos/quijote1.html new file mode 100644 index 0000000..cb8f615 --- /dev/null +++ b/html2005/estilos/quijote1.html @@ -0,0 +1,94 @@ + + + + + + Texto de prácticas - Quijote 1 + + + + + + + +

+PRIMERA PARTE

+ +

+CAPÍTULO 1: Que trata de la condición y ejercicio +del famoso hidalgo D. Quijote de la Mancha

+ +

En un lugar de la Mancha, de cuyo nombre no quiero acordarme, +no ha +mucho tiempo que vivía un hidalgo de los de lanza en +astillero, adarga antigua, rocín flaco y galgo corredor. Una +olla de algo más vaca que carnero, salpicón las +más noches, duelos y quebrantos los sábados, +lentejas los viernes, algún palomino de añadidura +los domingos, consumían las tres partes de su hacienda. El +resto della concluían sayo de velarte, calzas de velludo +para las fiestas con sus pantuflos de lo mismo, los días de +entre semana se honraba con su vellori de lo más fino. +Tenía en su casa una ama que pasaba de los cuarenta, y una +sobrina que no llegaba a los veinte, y un mozo de campo y plaza, que +así ensillaba el rocín como tomaba la podadera. +Frisaba la edad de nuestro hidalgo con los cincuenta años, +era de complexión recia, seco de carnes, enjuto de rostro; +gran madrugador y amigo de la caza. Quieren decir que tenía +el sobrenombre de Quijada o Quesada (que en esto hay alguna diferencia +en los autores que deste caso escriben), aunque por conjeturas +verosímiles se deja entender que se llama Quijana; pero esto +importa poco a nuestro cuento; basta que en la narración +dél no se salga un punto de la verdad. +

+ +

Es, pues, de saber, que este sobredicho hidalgo, los ratos que +estaba +ocioso (que eran los más del año) se daba a leer +libros de caballerías +con tanta afición y gusto, que olvidó casi de +todo punto el ejercicio +de la caza, y aun la administración de su hacienda; y +llegó a tanto su +curiosidad y desatino en esto, que vendió muchas hanegas de +tierra de +sembradura, para comprar libros de caballerías en que leer; +y así llevó +a su casa todos cuantos pudo haber dellos; y de todos ningunos le +parecían tan bien como los que compuso el famoso Feliciano +de Silva: +porque la claridad de su prosa, y aquellas intrincadas razones suyas, +le parecían de perlas; y más cuando llegaba a +leer aquellos requiebros +y cartas de desafío, donde en muchas partes hallaba escrito: +la razón +de la sinrazón que a mi razón se hace, de tal +manera mi razón +enflaquece, que con razón me quejo de la vuestra fermosura, +y también +cuando leía: los altos cielos que de vuestra divinidad +divinamente con +las estrellas se fortifican, y os hacen merecedora del merecimiento que +merece la vuestra grandeza. Con estas y semejantes razones +perdía el +pobre caballero el juicio, y desvelábase por entenderlas, y +desentrañarles el sentido, que no se lo sacara, ni las +entendiera el +mismo Aristóteles, si resucitara para sólo ello. +No estaba muy bien con +las heridas que don Belianis daba y recibía, porque se +imaginaba que +por grandes maestros que le hubiesen curado, no dejaría de +tener el +rostro y todo el cuerpo lleno de cicatrices y señales; pero +con todo +alababa en su autor aquel acabar su libro con la promesa de aquella +inacabable aventura, y muchas veces le vino deseo de tomar la pluma, y +darle fin al pie de la letra como allí se promete; y sin +duda alguna lo +hiciera, y aun saliera con ello, si otros mayores y continuos +pensamientos no se lo estorbaran. +

+ + + diff --git a/html2005/estilos/selectoresporatributo.html b/html2005/estilos/selectoresporatributo.html new file mode 100644 index 0000000..a5848e0 --- /dev/null +++ b/html2005/estilos/selectoresporatributo.html @@ -0,0 +1,33 @@ + + + + + + Práctica de selectores por atributo + + + + + +

Este +texto +está en letra +times

+ +

Éste +en arial

+ +

Este está escrito +con +courier

+ +

Esta +línea está también en una fuente serif +como la Times.

+ +Este texto se mostrará, probablemente, con un tipo +de letra serif que es el que suelen utilizar los navegadores por +defecto, pero no lleva una etiqueta <font> por lo que no +debería modificar su apariencia + + diff --git a/html2005/estilos/tabedtarget.html b/html2005/estilos/tabedtarget.html new file mode 100644 index 0000000..b854818 --- /dev/null +++ b/html2005/estilos/tabedtarget.html @@ -0,0 +1,156 @@ + + + + + + Centrando textos, imágenes y bloques + + + + + + + + + + + +

ver poema

+

ver poema

+  +
+
+
Soneto a una nariz (Francisco de Quevedo)
+ +Érase un hombre a una +nariz pegado,
+ +érase una nariz superlativa,
+ +érase una nariz sayón y escriba,
+ +érase un peje espada muy barbado
+ +era un reloj de sol mal encarado,
+ +érase una alquitara pensativa,
+ +érase un elefante boca arriba,
+ +era Ovidio Nasón más narizado.
+ +Érase el espolón de una galera,
+ +érase una pirámide de Egipto,
+ +las doce tribus de narices era;
+ +érase un naricismo infinito,
+ +muchísimo nariz, nariz tan fiera
+ +que en la cara de Anás fuera delito.
+ +
+ +< div id="segundo"> + +
+ +

Aquí tienes el código necesario para +centrar el +bloque en Internet Explorer donde puedes apreciar que ha sido necesario +encerrarlo dentro de otro contenedor con la alineación +centrada del texto. Si elimináramos las propiedades margin-left:auto +y margin.right:auto de la clase "poema" +seguiría mostrándose correctamente en Internet +Explorer, pero entonces no lo haría en otros navegadores, +heredando el margen izquierdo que estuviera establecido previamente y +le correspondiera por herencia al bloque (lo cual, dicho sea de paso, +parece la interpretación más acorde a lo +establecido)

+ +
<div +class="poemacentradoparaie">
+ +
+ +<div +class="poema">
+ +<h5>Soneto +a una nariz (Francisco de Quevedo)</h5>
+ +&Eacute;rase +un hombre a una
+ +nariz +pegado,<br>
+ +&eacute;rase +una nariz superlativa,<br>
+ +&eacute;rase +una nariz say&oacute;n y escriba,<br>
+ +&eacute;rase +un peje espada muy barbado<br>
+ +era un reloj de sol +mal encarado,<br>
+ +&eacute;rase +una alquitara pensativa,<br>
+ +&eacute;rase +un elefante boca arriba,<br>
+ +era Ovidio +Nas&oacute;n m&aacute;s narizado.<br>
+ +&Eacute;rase +el espol&oacute;n de una galera,<br>
+ +&eacute;rase +una pir&aacute;mide de Egipto,<br>
+ +las doce tribus de +narices era;<br>
+ +&eacute;rase +un naricismo infinito,<br>
+ +much&iacute;simo +nariz, nariz tan fiera<br>
+ +que en la cara de +An&aacute;s fuera delito.<br>
+ +</div>
+ +
+ +</div>
+ +
+
+ + +
+ +

 

+ +
+ + + diff --git a/html2005/estilos/tecnicas.html b/html2005/estilos/tecnicas.html new file mode 100644 index 0000000..0f53912 --- /dev/null +++ b/html2005/estilos/tecnicas.html @@ -0,0 +1,63 @@ + + + + + + + + + + + + + + + Técnicas CSS aplicadas + + + + + + + + + + + + +

Técnicas de CSS aplicadas

+ +

A continuación encontrarás una serie de páginas +en las que se muestran técnicas de CSS aplicadas al +diseño de páginas web que podrán servirte como +modelos y pistas para aplicar en tu propia web.

+ + + + + diff --git a/html2005/estilos/tecnicasandoenredando.html b/html2005/estilos/tecnicasandoenredando.html new file mode 100644 index 0000000..163e2f4 --- /dev/null +++ b/html2005/estilos/tecnicasandoenredando.html @@ -0,0 +1,266 @@ + + + + + + ando.enred.ando + + + + + + + + + + + + + + +
+

Estilos>>Técnicas

+ +
+
+ +
+
+ +
+ +
+ +
+ +
+ + +

Sustitución de imágenes

+ +

En algún momento a lo largo del curso hemos +indicado la psibilidad de sustituir algún texto por +imágenes. En una ocasión se sugirió +como forma de preservar el diseño que habíamos +creado para un título y en otra para ocultar una +dirección de correo a los rastreadores pero hacerla visible +a los visitantes.

+ +

Si consideras este último motivo es posible que se +te ocurra pensar que los lectores de páginas para personas +con deficiencia visual hacen algo muy similar a lo que hacen +los rastreadores de direcciones: ir leyendo el  texto que +aparece en el código fuente. Así que, si en el +código fuente no hay ningún texto...estaremos +haciendo que ese fragmento de página no exista para el +lector y, por tanto, para el visitante con problemas de +visión que está visitando la página.

+ +

Este es el gran problema de la sustitución de +imágenes: la accesibilidad. Hay multitud de +técnicas de susitución de +imágenes publicadas en la web para obtener un +diseño visual rico (suelen recibir el nombre IR +por +el inglés Image Replacement). Nunguna de ellas es perfecta y +todas adolecen de alguna dificultad. La que vamos a ver ahora, que +utilizaremos para crear la cabecera de un periódico, es +accesible pero puede provocar problemas con la indización en +algunos buscadores. 

+ +

Empecemos por comprobar el efecto y luego vemos la idea y la +forma de traducirla al código CSS necesario.

+ +
+

ando.enred.ando

+ +

Periódico +escolar del CEIP "Colenet"

+ +
+ +

El resultado se apoya en las siguientes ideas:

+ + + +
Vistas las ideas vamos al +código CSS necesario.
+ +
+ + +<style type="text/css">
+ +#cabecera { 
+ +background-image: +url(imagenes/andoenredando.png);
+ +background-repeat: no-repeat;
+ +width: 685px;
+ +height: 62px;
+ +margin-left: auto; + 
+ +margin-right: auto; 
+ +}
+ +
+ +<!-- Recuerda +que los márgenes automáticos para el +centrado no funcionan en Internet +Explorer sin un parche -->
+ +
+ + +#subcabecera {
+ +background-image: +url(imagenes/andoenredando2.png);
+ +background-repeat: no-repeat;
+ +width: 375px;
+ +height: 20px;
+ +margin-left: auto;
+ +margin-right: auto;
+ +}
+ +
+ +/* Ahora el desplazamiento para +sacar el texto de la pantalla */
+ +
+ +span.oculta {
+ +position: relative;
+ +left: -5000px;
+ +}
+ +</style> +
+ +

Y ahora el código HTML

+ +<h1 title="ando.enred.ando" id="cabecera">
+ +<span +class="oculta">ando.enred.ando</span>
+ +</h1>
+ +<h2 id="subcabecera" title=title="Peri&oacute;dico +escolar del CEIP &quot;Colenet&quot;">
+ +<span +class="oculta">Peri&oacute;dico escolar del CEIP +"Colenet"</span>
+ +</h2>
+ + +

Para aumentar aún más la accesibilidad +se han +añadido atributos title, de forma +que un usuario que no +tuviera +desactivada la utilización de CSS pero sí la +carga de +imágenes, contara con una referencia de lo que hay en el +hueco +que deja el elemento que no está viendo

+ +
+ +
+
+ + diff --git a/html2005/estilos/tecnicascolumnas.html b/html2005/estilos/tecnicascolumnas.html new file mode 100644 index 0000000..a8a916e --- /dev/null +++ b/html2005/estilos/tecnicascolumnas.html @@ -0,0 +1,379 @@ + + + + + + Periódico con texto en columnas + + + + + + + + + + + + + +
+

Estilos>>Técnicas

+ +
+
+ +
+
+ +
+ +
+ +
+ +
+

Crear un periódico con texto encolumnado

+ +

Una opción cuando se crea un periódico +es hacerlo de +forma que el texto se presente en columnas, de forma similar a la +apariencia de un periódico en papel. Hasta que no se +habilite un +soporte para columnas en futuras especificaciones no disponemos de la +posibilidad directa de hacerlo con etiquetas HTML o reglas CSS por lo +que el procedimiento será bastante artesanal y tendremos que +equilibrar manualmente las columnas.

+ +

Aprovecharemos el ejemplo que se muestra, con una primera +página de un periódico +escolar, para ver cómo se puede crear una +estructura con una cabecera, tres columnas y un pie.

+ +

Paso 1

+ +

La primera opción que tomaremos será si +nuestra +página ocupará el ancho de la pantalla o bien le +adjudicaremos una anchura fija. En el ejemplo hemos optado por fijar el +ancho tomando como referencia la cabecera que ya +habíamos creado en una práctica +anterior. 

+ +

Dado que es previsible que queden amplios huecos a los lados +empezaremos por crear una regla para que el fondo de la +página +tenga un color gris claro que sirva para delimitar la página.

+ +

body +{ background-color: rgb(238, 238, 238);}

+ +

Paso 2

+ +

Crearemos un contenedor general que será el que +incluya todos +los elementos de la página y le adjudicaremos un +tamaño.

+ +Lo separamos ligeramente del borde superior e inferior y le adjudicamos +un margen izquierdo y derecho automáticos para que quede +centrado en la página. Importante: +recuerda +que el margen automático no sirve para centrar en Internet +Explorer si no se aplica un parche. La alternativa es crear un primer +contenedor con el texto centrado y, dentro de él, el +contenedor +real. En el ejemplo, como en toda la documentación +utilizamos el +parche de Dean Edwards. +

Marcamos la posición como relativa sin indicar +ningún +desplazamieto cn el objetivo de que pueda servir como +referencia a +los fragmentos situados dentro del contenedor

+ +
#contenedor { margin: 10px +auto;
+ +padding: 0px;
+ +background-color: rgb(255, 255, 255);
+ +position: relative;
+ +width: 750px;
+ +height: 100%;
+ +min-height: 100%;
+ +text-align: justify;
+ +}
+ +
+ +

Paso 3

+ +

Creamos un identificador para el encabezamiento. Su anchura +será el 100% del contenedor padre, esto es los 750px y, como +altura utilizamos 100 píxxeles, como resultad de la que va a +formarse al sumar los fragmentos de las cabeceras que ya hemos creado +previamente más un espacio de 8 píxeles para +ampliar ligeramente la distancia entre cabecera y texto.

+ +

Como ves hay una corrección para Internet Explorer. +El motivo es que vamos a juntar la cabecera y la subcabecera +desplazando ésta hacia arriba, pero si no indicamos que +queremos ocultar el espacio sobrante Internet Explorer +calculará la altura total del contenedor teniendo en cuenta +la altura de los dos elementos más sus márgenes, +sin tener en cuenta el desplazamiento hacia arriba de la subcabecera.

+ +

Añadimos también un borde inferior para +separar visualmente el encabezamiento del resto del documento.

+ +
+ +
#encabezamiento { +border-bottom: thin solid gray;
+ +width: 750px;
+ +height: 100px;
+ +overflow: hidden; /* Corrección necesaria para Internet +Explorer */
+ +}
+ +
+ +

Paso 4

+ +

Rellenamos el encabezamiento con la cabecera y subcabecera que +habíamos creado previamente. El código es +prácticamente idéntico al que habíamos +creado, salvo en que adjudicamos posición relativa a la +subcabecera y la desplazamos 20 píxeles hacia arriba para +reducir la distancia respecto a la cabecera principal. (Este +desplazamiento es el que ha hecho necesario introducir la +corrección que hemos mencionado en el paso anterior)

+ +
+ +
#cabecera { margin: 0pt +auto;
+ +background-image: url(imagenes/andoenredando.png);
+ +background-repeat: no-repeat;
+ +background-position: 0px 10px;
+ +width: 685px;
+ +height: 72px;
+ +}
+ +#subcabecera { background-image: url(imagenes/andoenredando2.png);
+ +background-repeat: no-repeat;
+ +width: 375px;
+ +height: 20px;
+ +position:relative;
+ +top: -20px;
+ +margin-left: auto;
+ +margin-right: auto;
+ +}
+ +span.oculta { position: relative;
+ +left: -5000px;
+ +}
+ +
+ +

Paso 5

+ +

Vamos a crear tres columnas iguales, por lo que su anchura +individual será de 250 píxeles que +comprenderán el contenido, los rellenos, los +márgenes y los bordes si los hubiera.

+ +

Aunque los identificadores han recibido los nombres izq, +cent y der +habrían sido innecesarios en este caso al ser las tres +iguales. Si hubieran compartido algunas características pero +su anchura hubiese sido diferente habríamos tenido que +especificarla de forma individual para cada uno.

+ +

Observa que, al haber dejado un relleno de 10 +píxeles el ancho del contenido queda en 230, de forma que +10+230+10 sumen los 250 píxeles totales de los que +disponemos para esta columna. Si hubiéramos especificado +márgenes o bordes habría que haberlos tenido en +cuenta para detraer su anchura del valor de width +que se refiere, únicamente, al contenido de la caja

+ +
#izq, #cent, #der { +padding: 10px;
+ +float: left;
+ +width: 230px;
+ +}
+ +
+ +

Paso 6

+ +

Vista de la página de ejemplo con los estilos activados

+ +

Hemos procedido a rellenar las columnas de izquierda a +derecha.

+ +

Para incluir la foto del segundo titular (a "doble columna") +se ha creado un nuevo contenedor que se ha situado inmediatemente +detrás del que hace de columna izquierda.

+ +
#fotoprincipal +{ padding: 10px 10px 0px;
+ +width: 480px;
+ +float: left;
+ +}
+ +

Podríamos haberlo situado en cualquier otro punto +de la +página y haberlo posicionado de forma absoluta, pero +teniendo en cuenta los factores de accesibilidad es preferible hacerlo +en el flujo lógico de la página. Para que puedas +comprobar el efecto tienes a continuación una miniatura de +la página con los estilos aplicados. También +puedes hacer que se abra en una nueva ventana otra miniatura sin +los +estilos para comprobar que el orden de lectura mantiene la +secuencia +lógica.

+ +

A los titulares se les ha aplicado una cabecera h2 +lo cual parece coherente con su sentido dentro de la estructura del +documento. Como el título  h1 +lo habíamos aplicado al nmbre del periódico y es +posible que la h2 quedara un poco +pequeña se ha creado una clase +para especificar la apariencia visual.

+ +

En el caso de las entradillas podría haberse +recurrido a un título de menor nivel (un h4 +por ejemplo) pero en este caso sí que se trataría +de una mala utilización del etiquetado, puesto que el +objetivo es conseguir una modificación de la apariencia +visual por lo que, simplemente se ha optado por crear una clase.

+ +

Para el ejemplo se ha utilizado la extensión Lorem +Ipsum para generar un bloque de texto que rellenara el +espacio. 
+ +

+ +

+Paso 7

+ +

Por último se ha creado un contenedor para el pie. +Su colocación en el fluj es después de la +última columna, pero como no sabemos si esta será +más corta que alguna de las precedentes incluimos una regla +para que se impida la flotación de otros elementos en ambos +lados y de esta forma garantizamos que siempte se colocará +debajo de la columna más larga.

+ +

Hemos puesto una línea divisoria y un color de +fondo para separarlo visualmente del resto del texto.

+ +

No hemos necesitado indicar la anchura ya que al tratarse de +un elemento en bloque que no deja flotar a otros elementos +utilizará la totalidad de la anchura del contenedor padre. + 

+

Sí es importante poner a cero los márgenes y rellenos +para evitar que algún navegador les adjudique valores por +defecto diferentes lo cual descompondría la distribución +que vamos a hacer a continuación.

+
#pie { border-top: thin +solid gray;
+ +clear: both;
+ +font-weight: bold;
+margin:0;
+padding:0;
+}
+ +

Para rellenar el pie se ha optado por crear tres clases que permitan +incluir texto en tres zonas del mismo. Al haber especificado las +anchuras no necesitamos indicar flotación en la clase fecha +porque ocupa exactamente el espacio que queda disponible dentro del +contenedor

+ +
.numero { float: left;
+ +width: 190px;
+ +}
+.centropie { float: left;
+ +text-align: center;
+ +width: 350px;
+ +}
+.fecha { width: 200px;
+ +text-align: right;
+ +}
+ + +

+
+ + diff --git a/html2005/estilos/tecnicascss1.html b/html2005/estilos/tecnicascss1.html new file mode 100644 index 0000000..f87ba42 --- /dev/null +++ b/html2005/estilos/tecnicascss1.html @@ -0,0 +1,26 @@ + + + + + + + + + + Esquinas redondeadas y bordes sombreados + + + + + + + + + + +

+ + + diff --git a/html2005/estilos/tecnicascss2.html b/html2005/estilos/tecnicascss2.html new file mode 100644 index 0000000..5119e9d --- /dev/null +++ b/html2005/estilos/tecnicascss2.html @@ -0,0 +1,268 @@ + + + + + + Pies de imágenes + + + + + + + + + + + + + + +
+

Estilos>>Técnicas

+ +
+
+ +
+
+ +
+ + +
+ +
+ + +
+

Pies de imágenes

+ +
+

Foto de hoja de chopo

+ +

Foto de hoja de chopo obtenida del banco de +imágenes del CNICE

+ +
+ +

El lenguaje HTML no inncluye ninguna etiqueta que permita +introducir +pies o títulos explicativos de las imágenes. +Aunque en +su +momento se propuso en la especificación HTML3 finalmente no +salió adelante y no se incluyó en la +especificación HTML 4 vigente.

+ +

A pesar de la anterior limitación podemos conseguir +introducir un título explicativo de la imagen y situarlo +inmediatamente debajo de la misma utilizando CSS. El efecto +sería similar al que se muestra en la zona de la derecha.

+ +

Para obtenerlo hemos tenido que crear un par de reglas CSS que +se explican a continuación:

+ +

Lo primero ha sido crear una clase a la que hemos denominado +imagen que flote a la derecha, tenga un margen izquierdo de 10 +píxeles, un borde sólido de 1 píxel y +un relleno de 10 píxeles y unas dimensiones para que el +texto del pie que insertaremos posteriormente no desborde la anchura de +la imagen.

+ +

Realmente lo único imprescindible, si pretendemos +que la imagen deje fluir el texto sería indicar la propiedad +floaty la especificación de anchura +por el motivo que se ha indicado en el párrafo anterior. El +resto de los elementos tienen que ver más con +cuestiones estéticas.
+ +

+ +
+

.imagen { float: right;
+ +width:260px;
+ +border: +1px solid rgb(153, 153, 153);
+ +padding: 10px; 
+ +margin-left: 10px;
+ +}

+ +
+ +

Ahora que ya tenemos definido el estilo creamos un contenedor +genérico div en el que situaremos +la imagen y el texto que +deseamos que figure como pie de la misma. A este contenedor +genérico le aplicaremos la clase cuyas propiedades acabamos +de definir.

+ +

Si ahora insertamos dentro del contenedor un +párrafo con el texto del pie, este +asumirá las características que tengamos +definidas por defecto, por lo que tendremos que crear un nuevo selector +que afecte únicamente a los párrafos que se +encuentren dentro del contenedor de clase imagen para el que +definiremos las características que necesitemos: en nuestro +ejemplo letra cursiva, tamaño 80% del definido por defecto y +alineación centrada.

+ +
+

.imagen p { font-size: 80%;
+ +font-style: italic;
+ +text-align: center;
+ +}

+ +
+ +
+ +

Escalar automáticamente imágenes

+ +
foto de farola +

Foto de farola

+ +
+ +

La técnica que acabamos de plantear puede ser un +interesante +recurso para crear un álbum de fotos porque nos +permitiría crear una serie de miniaturas con +título de +todas las imágenes pero, tal como hemos planteado la +técnica tendremos que realizar una tarea previa de +redimensionado de todas las imágenes puesto que las que +fueran +mayores del tamaño especificado desbordarían los +bordes +del contenedor genérico. 

+ +

Antes de continuar es importante señalar un +principio +básico que ya hemos apuntado en otros momentos, salvo en +casos +excepcionales es esencial realizar las modificaciones de +tamaño +para ajustar las miniaturas y ahorrar ancho de banda.

+ +

Hecha la salvedad anterior veamos una forma de hacer que las +imágenes se ajusten automáticamente al espacio +definido +para el contenedor genérico. La idea es tan simple como +establecer una clase que fije la anchura al 100% y aplicarla a la +imagen. Al estar la imagen dentro del contenedor ésta +será la referencia que se tome para calcular el +tamaño. +De hecho, la imagen del ejemplo tiene un tamaño real de 720 +x +540 píxeles.

+ +

.escalada {width: 100%;}

+ +

Una cuestión importante es que, cuando insertamos +una imagen +en el documento, N|VU incluye el código con sus dimensiones +y no +hay que perder de vista que el código html o el estilo en +línea tendrán preferencia sobre las propiedades +establecidas en el estilo interno o externo. Para evitarlo y conseguir +que el +tamaño se ajuste automáticamente habrá +que editar manualmente el código para eliminar las +dimensiones.

+ +
+Actividad 95 +

Una de los componentes que puede incluir una página +de centro es un álbum de fotos con imágenes de +las instalaciones o los reportajes de actividades escolares.

+ +

Crea un álbum para mostrar imágenes con +su correspondiente pie de foto. Para crear las reglas de estilo +tendrás que considerar los siguientes aspectos:

+ + + +

Por si quieres hacer la práctica sin buscar ahora +mismo imágenes puedes utilizar las fotos de estas siete +setas: amanita +muscaria, armillaria +ostoyae, coprinus +comatus, hypholoma +del aliso, macrolepiota +procera, pholiota +penetrans y tricholomopsis +rutilans.

+ +

Como complemento puedes hacer que cada imagen apunte a un +original en alta resolución (puedes obtenerlos en el banco de imágenes del +CNICE)

+ +
+ +
+Actividad 96 +

Una propuesta complementaria para el álbum de +imágenes: ¿qué tal quedaría +cada contenedor si tuviera un fondo que imitara el carrete +fotográfico?.

+ +

Gimp dispone de una utilidad que puede ayudarte para crear +esta imagen. Puedes acceder a ella en el menú script-fu a continuación decoración a continuación +diapositiva

+ +
+ +

 

+
+ + + diff --git a/html2005/estilos/tecnicascss3.html b/html2005/estilos/tecnicascss3.html new file mode 100644 index 0000000..12b9e83 --- /dev/null +++ b/html2005/estilos/tecnicascss3.html @@ -0,0 +1,406 @@ + + + + + + + + + + + + + Centrando textos, imágenes y bloques + + + + + + + + + + + + + + + +
+

Estilos>>Técnicas

+ +
+
+ +
+
+ +
+ +
+ +
+ +
+

Centrando textos

+ + +

Está claro que la +utilización más inmediata del centrado +es la de fragmentos de texto, creando reglas para que se aplique esta +alineación a todos los elementos de un tipo, a una clase +determinada o creando un estilo en línea para aplicarla a un +único elemento en un momento puntual.

+ + +
+

Ejemplos:

+ + +
Este fragmento de titulo +h5 está centrado porque lo hemos especificado en un estilo +incrustado
+ + +

<h5 style="text-align: center;">Este +fragmento +de titulo h5 est&aacute; centrado porque lo hemos especificado +en un estilo incrustado</h5>

+ + +

A este fragmento se le aplicó +clase "centro" +definida como estilo en línea en la +cabecera del documento

+ + +

<style +type="text/css"> .centro { +text-align: center;} </style>

+ + +

...

+ + +

<p +class="centro">A este fragmento se le +aplic&oacute; clase "centro" definida como estilo en +l&iacute;nea en la cabecera del documento</p>
+ + +
+ + +

+ + +
+ + +

+ + +

Centrando bloques o imágenes

+ + +

En ocasiones lo que necesitamos centrar no es el texto, sino +el bloque que lo contiene. La forma de hacerlo es establecer los +márgenes izquierdo y derecho como "auto", de forma que el +visor calcule el espacio sobrante y lo divida a partes iguales +entre ambas zonas. Lógicamente, como lo +habitual será que el bloque tenga suficiente +contenido como para ocupar la totalidad de la anchura disponible, +habrá que aplicar esta técnica a bloques con una +anchura fija.

+ + +
+
Soneto a una nariz (Francisco de Quevedo)
+ + +Érase un hombre a una +nariz pegado,
+ + +érase una nariz superlativa,
+ + +érase una nariz sayón y escriba,
+ + +érase un peje espada muy barbado
+ + +era un reloj de sol mal encarado,
+ + +érase una alquitara pensativa,
+ + +érase un elefante boca arriba,
+ + +era Ovidio Nasón más narizado.
+ + +Érase el espolón de una galera,
+ + +érase una pirámide de Egipto,
+ + +las doce tribus de narices era;
+ + +érase un naricismo infinito,
+ + +muchísimo nariz, nariz tan fiera
+ + +que en la cara de Anás fuera delito.
+ + +
+ + +
Para mostrar el poema hemos creado una +clase para el estilo interno de la +cabecera que luego le aplicamos al contenedor genérico en el +que hemos encerrado el soneto.
+ + +
+ + +.poema { padding: 0.5em 1em 1em;
+ + + width: 25em;
+ + + margin-left: auto;
+ + + margin-right: auto;
+ + + background-color: rgb(236, 225, +187);
+ + + }
+ + + +

Aunque habrás visto el bloque del soneto centrado, +tanto con Internet Explorer como con Mozlla, Firefox u +Ópera, ha sido porque todas las páginas de este +manual llevan aplicado un parche genérico que corrige la +mayoría de los errores de interpretación de CSS2 +que tiene Internet Explorer.

+ + +

Si no queremos aplicar el parche completo +tendríamos que aplicar la solución provisional +que consiste en encerrar el bloque que deseamos centrar dentro de otro +contenedor genérico al que le aplicamos una regla de estilo +para que alinee el texto centrado: con ello se consigue que el bloque +se sitúe en el centro. Puedes ver el mismo ejemplo adaptado +y revisar el código para comprobar lo que estamos comentando.

+ + +

+ + +
+ + +

Aprovechando la idea del centrado de bloques podemos +aplicarla también para centrar imágenes, aunque +en este caso hay que tener en cuenta una matización: las +imágenes son elementos "en línea" y como +tales no generan un salto anterior y posterior. Ya hemos visto +en otros momentos que podemos considerarlas como una "letra" +más dentro de la cadena de caracteres que componen un texto. +Eso quiere decir que, para poder hacer que se centren tenemos que +convertirlas en elementos de tipo "bloque".

+ + +

En este caso no necesitamos hacer ninguna maniobra especial +para que se sitúen correctamente en Internet Explorer. + 
+ + +

+ + +

La siguiente imagen salta y se centra +automáticamente aunque está incluida en la +página inmediatamete después del punto con el que +finaliza esta frase.

+ + +
+

El código que hemos utilizado se ha limitado a +crear una clase con las +condiciones que habíamos reseñado previamente y +aplicarla luego a la etiqueta img.

+ + +.imagenbloque +{ +display: block;
+ + +margin-left: auto;
+ + +margin-right: auto;
+ + +}
+ + +
Importante: +si intentas aplicar la técnica anterior en un documento HTML +creado por N|VU sin corregir el error que introduce en la +generación de los prólogos pasarás un +mal rato copiando y pegando códigos y viendo que Internet +Explorer no te hace ni caso. Es uno de los ejemplos de funcionamiento +errático de un navegador cuando el código es +incorrecto. Puedes consultar el error +y localizar las plantillas +que lo solucionan.
+ + +

Centrar verticalmente

+ + +

No disponemos en CSS2 de una propiedad para centrar +verticalmente pero, a pesar de ello, podemos combinar algunas +propiedades existentes para lograrlo.

+ + +

La idea en la que nos vamos a basar es que el contenido de las +celdas de las tablas sí que admite el centrado vertical. +Aprovechando esta particularidad crearemos un contenedor +externo que se muestre +como si fuera una tabla de celda y le aplicaremos el centrado vertical.

+ + +
+

este es el texto que se debería centrar +en  vertical 

+ + +
+ + +

El ejemplo que se muestra en la zona izquierda, a pesar de ser +una aplicación de una sugerencia propuesta desde el W3C, sólo +se reproduce correctamente cuando la página se visualiza con +navegadores basados en el motor Gecko (Mozilla, Firefox, +Galeón, Safari, etc) pero no se respetan las propiedades si +se visualiza con Internet Explorer u Opera.

+ + +
Las propiedades que se han utilizado +para construir la clase "centrarvertical" son las siguientes:
+ + +.centrarvertical { border: 1px solid rgb(153, 102, 51);
+ + +min-height: 100px;
+ + +width: 400px;
+ + +display: table-cell;
+ + +vertical-align: middle;
+ + +float: left;
+ + +margin-right: 1em;
+ + +color: rgb(255, 255, 204);
+ + +background-color: rgb(192, 192, +192);
+ + +font-size: x-large;
+ + +font-weight: bold;
+ + +}
+ + + +
+ +
+ + diff --git a/html2005/estilos/tecnicascss4imagenesdesustitucion.html b/html2005/estilos/tecnicascss4imagenesdesustitucion.html new file mode 100644 index 0000000..18c5308 --- /dev/null +++ b/html2005/estilos/tecnicascss4imagenesdesustitucion.html @@ -0,0 +1,867 @@ + + + + + + + + + + + + + Imágenes de sustitución + + + + + + + + + + + + + + + +
+

Estilos>>Técnicas

+ +
+
+ +
+
+ +
+ +
+ +
+ +
+

Crear imágenes de sustitución

+ + +

Vamos a denominar imágenes de +sustitución a aquellas +que modifican su apariencia cuando el ratón pasa sobre +ellas. Su +utilidad principal será la creación de +menús.

+ + +

Paso 1

+ + +

Crear una página cuyo prólogo recoja +correctamente el tipo de documento. (Recuerda que N|VU introduce en +prólogo correcto con la refenreia completa cuando se crean +documentos XHTM, tanto con DTD transitional como strict, pero que +cuando se crean documentos HTML el prólogo es incorrecto +porque falta la referencia absoluta a la DTD). Cuando la +definición del tipo de documento no es correcta algunos +navegadores pueden adoptar comportamientos +erráticos.

+ + +

Creamos una lista con los elementos que se +mostrarán en el +menú y creamos los enlaces (para nuestro ejemplo +serán +nulos):

+ + + + + +

Como es posible que finalmente deseemos situar nuestro +menú en una zona de la página vamos a +encerrarlo +dentro de una división a la que le aplicaremos el +identificador id="menu" +

+ + +

Paso 2

+ + +

Crear el juego de imágenes que se +utilizará para los +efectos. Necesitaremos una imagen para el mostrar en la +página y +otra que se mostrará únicamente cuando el +ratón +pase sobre ella.

+ + +

Aunque podrían utilizarse tamaños +diferentes para +ambas imágenes es preferible que sean del mismo +tamaño +para que todo sea más sencillo.

+ + +

Para el ejemplo hemos seleccionado una colección de +fotos de setas procedentes del banco de imágenes del CNICE.

+ + +

coprinus-comatuscoprinus-comatushypholoma-del-alisohypholoma-del-alisopholiota-penetranspholiota-penetransamanita-muscariaamanita-muscariamacrolepiota-proceramacrolepiota-proceraarmillaria-ostoyaearmillaria-ostoyaetricholomopsis-rutilanstricholomopsis-rutilans
+ + +

+ + +

Paso 3

+ + +

Creando el nuevo estilo para el menúAjustaremos +márgenes y rellenos para que la lista quede al borde de la +división y eliminaremos  los +boliches del listado que hay dentro de +nuestra división menú, para lo que recurriremos a +crear +un estilo interno utilizando el editor CSS.

+ + +

En la pestaña caja +pondremos a 0 los valores de márgenes +y rellenos izquierdos +y en la pestaña listas +elegiremos none como +tipo para estilo de la lista, +con lo que nuestra lista aparecerá ahora +así.

+ + + + + +

Paso 4

+ + +

Ahora haremos que nuestra lista se presente en horizontal, con +cada item a continuación del anterior. Para ello crearemos +en el editor CSS una nueva regla +#menu li que afectará unicamente a +los elementos de lista que se encuentren dentro de la +división menu y le adjudicaremos en la pestaña caja  el valor left a la propiedad float

+ + + + + +
+ + +

Como puede verse la apariencia es ahora bastante confusa al +haberse colocado todos los ítems correlativamente, pero ya +lo corregiremos más adelante.

+ + +

Paso 5

+ + +

Creando la clase item1Colocaremos ahora una +imagen como fondo de cada uno de los enlaces. 

+ + +

Para poder modificarlos posteriormente vamos a tener que crear +una clase para cada uno de ellos. Así pues iremos creando +una serie de nuevas reglas a las que iremos +llamando item1, item2 y así sucesivamente. +En este caso estamos creando clases en lugar de identificadores id, por +lo que utilizaremos la opción estilo +con nombre al crear cada una de las nuevas reglas. Es +importante recordar que, aunque cuando vemos el código las +clases se identifican porque se inician con un punto, no debemos +ponerlo al adjudicarles el nombre, ya que será el programa +el que se encargue de esta tarea. (De hecho si intentamos nombrar una +clase empezando por un punto el editor no la creará).

+ + +

Una vez que hayamos creado todas las clases las adjudicaremos +a cada uno de los elementos de la lista. Para ello lo más +cómodo será utilizar las referencias de la barra +de estado, ir seleccionando cada elemento <li> y +pulsando con el botón derecho para seleccionar clases y +adjudicarle la que le corresponde por su orden.

+ + +

Cuando hayamos realizado esta tarea podemos completar el +trabajo abriendo el selector y aplicando un fondo para cada uno de las +clases tal como se muestra en la siguiente imagen.

+ + +

Asignando fondo a cada clase

+ + +

Si vas a publicar la página +utilizando el gestor de N|VU no habrá problemas puesto que +él se encargará de convertir las rutas absolutas +para las imágenes de fondo en relativas, pero la +recomendación es que utilices la pestaña Código fuente para modificarlo +manualmente.

+ + +

Lo que habremos conseguido hasta el momento es lo que se +muestra a continuación y, la verdad es que no parece muy +alentador. Pero no te preocupes porque ya hemos avanzado mucho y la +situación variará bastante con las siguientes +modificaciones.

+ + + + + +
+ + +

Paso 6

+ + +

Vamos ahora a darle un estilo a los enlaces de nuestro +menú, para lo que crearemos una nueva regla #menu a que +afectará a los enlaces que se hayan creado dentro de nuestro +menú. (Hemos estado utilizando este identificador desde el +principio pero aún no habíamos definido ninguna regla con +sus propiedades)

+ + +

Aplicaremos las siguientes propiedades y valores +en la +pestaña caja: 

+ + + + + +Ahora hemos conseguido un cambio bastante importante del +menú.  + + + +
+ + +
+ + +

Paso 7

+ + +

Como las imágenes han quedado juntas vamos a +separarlas modificando la regla #menu li que +ya habíamos +creado añadiéndole en la pestaña caja +un margen derecho de 1 +píxel.

+ + + + + +
+ + +

Paso 8

+ + +

La siguiente tarea será establecer el +comportamiento de cada elemento cuando el ratón pase por +encima. Necesitaremos crear una seudoclase :hover para +cada uno de los elementos de la lista y adjudicarle +como fondo la imagen en color correspondiente en cada caso. +Además, para garantizar que +siempre se colocará por encima de la imagen en blanco y +negro le daremos también, en la ventana caja, un valor 50 +para la propiedad z-index +(realmente sería suficiente darle +un valor 2 ya que con ese estaría por encima del valor de +profundidad por defecto).

+ + +

Posiblemente sea más rápido en este caso +acudir a la pestaña  Código fuente y +añadir manualmente las reglas, copiando y pegando la regla +original, añadiéndole la seudoclase :hover +al final y modificando el nombre de la imagen que, si hemos actuado +como es habitual se llamará igual que la de blanco y negro +pero añadiendo o quitando unos caracteres que +serán iguales para todas las imágenes. (en el +ejemplo las imágenes en blanco y negro finalizaban su nombre +con las letras bw y las de color se llamaban igual pero sin esas letras)
+ + +  

+ + + + + +
+ + +

Paso 9

+ + +

Por último, solo nos resta corregir la +flotación. Dado que los elementos de la lista tienen +establecida la propiedad de flotación a la izquierda podemos +encontrarnos con que el flujo de texto se produzca a la derecha de +nuestra lista y, normalmente, nos interesará que no sea +así y que la lista quede separada del resto. Para ello +corregiremos la el contenedor general al que habíamos +llamado menu dándole, en la +pestaña caja +las +dimensiones de alto y ancho que deseemos adjudicarle +en +función de nuestras imágenes y especificando el +valor block para la +propiedad display.

+ + + + + +
+ + +En el ejemplo faltan los enlaces reales a las páginas de +destino que suponemos que estarían creados desde el primer +momento.
+ + +
+

El código de nuestra hoja de estilos interna +quedaría así:

+ + +<style type="text/css">
+ + +<!--
+ + +#menu ul { list-style-type: none;
+ + +margin-left: 0pt;
+ + +padding-left: 0pt;}
+ + +
+ + +#menu li { float: left;}
+ + +
+ + +.item1 { background-repeat: no-repeat;
+ + +background-image: +url(imagenes/coprinus-comatusthbw.jpg);}
+ + +
+ + +.item1:hover { background-repeat: no-repeat;
+ + +background-image: +url(imagenes/coprinus-comatusth.jpg);
+ + +z-index:50;}
+ +
+ + +... resto de ítems de +la lista
+ + +
+ + +#menu a { display: block;
+ + +width: 100px;
+ + +padding-top: 66px;
+ + +overflow: hidden;
+ + +height: 0px;} +
+ +
+ + +#menu li { float: left; margin-right:1px;}
+ + +
+ + +#menu {display:block; width: 710px; height: 66px;}
+ + +-->
+ + +</style> +
+ + +

Y el código HTML en el cuerpo del documento +sería:

+ + +

<div id="menu">
+ + +<ul> +
+ + +<li +class="item1"><a href="#">Coprinus +comatus</a></li> +
+ + +<li +class="item2"><a href="#">Hypholoma del +aliso</a></li>
+ + +<li +class="item3"><a href="#">Pholiota +penetrans</a></li>
+ + +<li +class="item4"><a href="#">Amanita +muscaria</a></li> +
+ + +<li +class="item5"><a href="#">Macrolepiota +procera</a></li> +
+ + +<li +class="item6"><a href="#">Armillaria +ostoyae</a></li> +
+ + +<li +class="item7"><a href="#">Thricolompsis +rutilans</a></li> +
+ + +</ul>
+ + +</div> +
+ + +

+ + +
+ +
+ + diff --git a/html2005/estilos/tecnicascss4listasencolumnadas.html b/html2005/estilos/tecnicascss4listasencolumnadas.html new file mode 100644 index 0000000..40d6ea5 --- /dev/null +++ b/html2005/estilos/tecnicascss4listasencolumnadas.html @@ -0,0 +1,62 @@ + + + + + + Listas en varias columnas + + + + + + + + + + + + + +

Crear listas en varias columnas

+ +

Hay  momentos en los que creamos una lista no +numerada demasiado larga y sería preferible presentarla en +varias columnas.

+ +

Los datos que tendremos que manejar serán la +anchura máxima prevista para cada uno de los items +individuales

+ + + + + diff --git a/html2005/estilos/tecnicascss5deslizatextoaparte.htm b/html2005/estilos/tecnicascss5deslizatextoaparte.htm new file mode 100644 index 0000000..facdc69 --- /dev/null +++ b/html2005/estilos/tecnicascss5deslizatextoaparte.htm @@ -0,0 +1,277 @@ + + + + + +Deslizando el texto a lo largo de una figura + + + + + + + + + +
+ +

...y buscando alternativas

+ +
+ + +

Al inicio de la página hemos visto +una imagen situada en la +esquina superior izquierda con el texto flotando a su alrededor y es +posible que estés pensando que ya habías +captado la idea  y lo de repetirlo a la derecha +parece poner en duda tu capacidad.

+ +¿O acaso la cuestión no sería tan +sencilla como modificar las +propiedades float y clear poniéndoles el valor right para +que todo quede igual pero al lado contrario?.
+ +

Bueno, vayan pues las disculpas si has podido molestarte porque está claro que no es esa la intención, así que vamos a aclarar el motivo de esta repetición, porque ¿no te ha parecido que lo de andar recortando las imágenes es un poco pesado? ¿será que hay otro método para conseguir el mismo efecto utilizando la imagen completa y que sean las reglas CSS las que se encarguen de hacer el reparto de los espacios?.

+

Efectivamente, de eso se trata. Hemos vuelto a utilizar una +imagen de Open +Clipart pero en esta ocasión no hemos necesitado +partirla, sino que hemos recurrido a una vieja idea que ya utilizamos +como recurso de posicionamiento cuando trabajamos exclusivamente con +código HTML sin usar estilos. ¿Recuerdas el truco +de la imagen transparente que podíamos usar para que ocupara +un espacio y de esa forma desplazar otros elementos? Pues bien, la idea +original en este caso es muy similar aunque algo más +respetuosa con las cuestiones de accesibilidad ya que no tenemos que +situar ningún elemento sin significado en la +página.

+ +

Vamos pues con el desarrollo de la idea mostrando el +código y los comentarios :

+ +
Nuestras reglas de estilo:
+ +
+ + +.contenedor { margin: 0; padding: 0;
+ +background-repeat: no-repeat;
+ +background-image: +url(imagenes/arquitectoder.png);
+ +background-position: right top;
+ +background-color: rgb(255, 255, +255);
+ +}
+ +#a, #b, #c, #d, #e, #f, #g, #h, #i, #j, #k, #l, #m {
+ +float: right;
+ +clear: right;
+ +margin: 0 0 0 1em;
+ +padding:0;
+ +height: 20px;
+ +font-size:0px; /* necesario para +que el tamaño de las zonas no se redimensione si cambiamos +el tamaño de fuente en el navegador */
+ +}
+ +#a {width:90px;}
+ +#b {width:100px;}
+ +#c {width:190px;}
+ +#d {width:190px;}
+ +#e {width:170px;}
+ +#f {width:150px;}
+ +#g {width:120px;}
+ +#h {width:100px;}
+ +#i {width:130px;}
+ +#j {width:130px;}
+#k {width:50px;}
+ + + + +
+ +Y el código HTML dentro del cuerpo de la página:
+ +
+ + +<div class="contenedor">
+ +<span id="a"></span>
+ +<span id="b"></span>
+ +<span +id="c"></span>
+ +<span id="d"></span>
+ +<span +id="e"></span>
+ +<span id="f"></span>
+ +<span +id="g"></span>
+ +<span id="h"></span>
+ +<span +id="i"></span>
+ +<span id="j"></span>
+ +<span +id="k"></span>
+ +<p> Aquí empieza el texto ..... hasta +finalizar</p>
+ +</div>
+ +
+ +
+ +
+

Se podría haber utilizado div +en lugar de span, +pero si la página se viera con un navegador que no soportara +CSS +se mostrarían tantos renglones vacíos como +etiquetas div hubiéramos +puesto. Al utilizar etiquetas span +vacías no se mostraría nada.

+ +

Es importante incluir en la regla para creación de +los +identificadores que el tamaño de la fuente sea 0px para +evitar +la redimensión.

+ + + +
+ +
+ +

Utilizando esta +técnica no tendremos que modificar las imágenes, +pero sí que tendremos que hacer algunas pruebas para poder +ajustar exactamente las medidas de cada zona, para lo que necesitaremos +recurrir a alguna utilidad de tratamiento de imagen que nos informe de +las coordenadas.

+ +

En el caso de Gimp puedes seguir un procedimiento +idéntico al anterior en cuanto a establecimiento y +visualización de la rejilla. Pasando el puntero por la +imagen podremos ir comprobando las cordenadas x,y en la zona izquierda +de la barra de estado y así utilizaremos la +información para establecer la anchura más +adecuada..

+ +

Ten en cuenta que la caja de cada renglón empieza +en su borde superior. Por este motivo verás que en +algún momento el texto se superpone a la imagen ya que +está tomando como referencia la zona en blanco superior que +es la que realmente coincidía con el inicio del +renglón. Es posible que esto nos obligue realizar un ajuste +fino que puede pasar por modificar la altura de las zonas reservadas o +la anchura de la zona previa. De todas maneras ten en cuenta que los +ajustes no pueden ser perfectos cuando el visitante modifique el +tamaño de la fuente, por lo que, dependiendo del tipo de +imagen, tal vez tengas hacer el ajuste menos fino para garantizar que +el texto no se superponga a la imagen.

+ +
+Actividad 97 +
    +
  • Pulsa sobre la miniatura para guardar la imagen de esta +esquina decorativa en tu carpeta. Miniatura de magen para prácticas
    • +
  • Utiliza la técnica que prefieras de las dos +explicadas para colocar la imagen en la zona superior izquierda de la +pantalla y alinear el texto para que siga su contorno.
    • +
  • Ten en cuenta que, para que el efecto quede completamente bien +tendrás que ajustar correctamente los márgenes y +rellenos.
    • +
+ + + +
+
+
+
+ + diff --git a/html2005/estilos/tecnicascss5deslizatextofigura.html b/html2005/estilos/tecnicascss5deslizatextofigura.html new file mode 100644 index 0000000..ae00f4f --- /dev/null +++ b/html2005/estilos/tecnicascss5deslizatextofigura.html @@ -0,0 +1,281 @@ + + + + + + Deslizando el texto a lo largo de una figura + + + + + + + + + + + + + + +
+

Estilos>>Técnicas

+ +
+
+ +
+
+ +
+ +
+ +
+ + +
+ + +

Deslizándose ...

+ +

Bueno pues parece que vamos a empezar a hacer alguna cosa que +creíamos que no se podía hacer con las +páginas HTML.

+ +

Por lo que sabíamos hasta el momento, las +imágenes forman un rectángulo que nos permite que +el texto fluya por la izquierda o por la derecha del mismo.

+ +

Esto parece bastante lógico cuando se trata de +fotografías, ya que estamos acostumbrados a percibirlas como +un todo en el que la figura y el fondo componen un +paralelogramo. Sin embargo la situación varía +mucho cuando la imagen que vemos es un dibujo, denominado clipart en el +lenguaje informático en el que nos encontramos unos +contornos que lo separan claramente del fondo y le hacen adquirir una +personalidad propia. Este es el caso de nuestra valiente patinadora, +que se ha venido deslizando por la red desde su origen en +la librería Open +Clipart que es una +galería de imágenes distribuidas bajo +licencia Creative Commons y a la que puedes acceder para descargar +trabajos de otros internautas o aportar el tuyo si tienes una buena +mano. 

+ +

El caso es que, correspondiendo a sus esfuerzos +también hemos hemos hecho lo posible para aprender a +deslizarnos y para ello hemos contado con la inestimable ayuda de uno +de los grandes expertos en aplicación de CSS: Eric Meyer, en +cuya web +encontrarás el artículo "ragged float" que +explica el principio que se ha aplicado para crear este ejemplo.

+ +

¡Uf, menos mal! Aunque creo que han aparecido un +para de referencias interesantes en los párrafos +anteriores,  ya estaba empezando a pensar que iba a ser +incapaz de encontrar tema con el que ir rellenando el espacio para que +pudieras comprobar el efecto de deslizamiento del texto siguiendo el +perfil de una imagen.  Como estoy escribiendo con una +resolución de 1024x768 y puede que esta página se +muestre dentro de una estructura de marcos, es seguro que ya habremos +superado a nuestra amiga la patinadora, así que vamos a ver +un par de detalles sobre la técnica empleada.

+ +

La idea en la que se apoya esta técnica es que la +imagen flote y el texto fluya a su alrededor. Pero como lo que no +queremos es que la imagen sea un rectángulo tenemos que +hacer un par de trabajos para lograr el efecto deseado:

+ +
    + +
  1. Empezamos por utilizar un programa de tratamiento de imagen +para dividir la imagen en "lonchas" cuya +anchura vaya ajustándose al contorno con lo que dispondremos +de una colección de imágenes de diferentes +anchos: Fragmento de 190 píxeles de anchura Fragmento de 260 píxeles de anchura. En el artículo de +Eric Meyer se hace con todas las imágenes tengan la misma +altura, sin embargo en nuestra patinadora hemos utilizado alturas +diferentes haciendo fragmentos más altos cuando el borde +derecho se encontraba a la misma altura como ocurre con la cabeza.
    2. + +
  2. Colocamos las imágenes una a +continuación de otra y hacemos, utilizando CSS que se +coloquen alineadas una bajo otra y flotando a la izquierda.
    3. + +
+ +

A partir de aquí no hace falta más que +empezar a +escribir a continuación de la última imagen. +Obviamente, si nuestra imagen estuviera insertada en otro punto de la +página podríamos tener texto por encima, a su +lado y por debajo según dicha posición.

+ +
+

Así pues, toda la técnica se basa en la +siguiente regla CSS aplicada a los elementos img:

+ +

.patina { margin: 0 1em 0 0;
+ +float: left;
+ +clear: left;
+ +} +

+ +

El único margen es el de la derecha, la +flotación es a la izquierda y, para evitar que las +imágenes aparezcan una a continuación de otra se +ha añadido la propiedad clear:left, +de manera que nada pueda +flotar a la izquierda de cada imagen.

+ +
+

El artículo original de Eric Meyer +incluía la propiedad height con un +valor en +píxeles ya que todas las imágenes +tenían la misma altura. Como en nuestro caso no era posible +probé primero a poner la altura con un valor "auto" y, +finalmente opté por suprimir la propiedad, dado que las +imágenes llevan ya la indicación de altura y ha +funcionado correctamente en Internet Explorer 6, Mozilla 1.7.8, Firefox +1.04 y Opera 7.54 para Windows que han sido los navegadores sobre los +que he probado la página.

+ +Otro pequeño truco ha sido añadir la regla p{position: +relative; z-index:50;} al descubrir que, en Internet +Explorer las +imágenes podían superponerse al texto en algunos +momentos. Al incluir un índice de profundidad para los +párrafos que son los elementos que bordean las +imágenes +se consigue evitar esta situación que no afectaba a los +otros +navegadores.
+ +
+ +
+ +

"Lonchear" imágenes con Gimp

+ +

Explicamos brevemente un método de trabajo para +fragmentar una imagen en tiras utilizando Gimp:

+ +
    + +
  1. Con la imagen original abierta utiliza el menú imagen a continuación +configurar la rejilla. En la sección espaciado desliga el ancho y el +alto pulsando sobre el icono eslabones y +adjudícale los valores que consideres más +adecuados a ambos parámetros. (15 píxeles para el +alto y 5 para el ancho pueden ser una buena opción)
    2. + +
  2. Tras aceptar acude al menú ver y marca las opciones ver rejilla y ajustar a la rejilla: de esta +forma tendrás a la vista unos puntos que te +permitirán ir seleccionando las zonas más acordes +a las características de la imagen sin tener que preocuparte +de "casar" una zona con la siguiente gracias a la opción de ajustar a la rejilla que acabas +de activar.
    3. + +
  3. Selecciona la primera zona utilizando la herramienta de selección rectangular. +Es muy importante que compruebes que +están desactivadas las +opciones alisado y difuminar los bordes, ya que +pretendemos que los cortes sean secos para que no se noten al volver a +ensamblar las piezas.
    4. + +
  4. Copia la primera selección y utiliza editar a continuación +pegar como nuevo para crear la primera "loncha". +Guárdala.
    5. + +
  5. Vuelve a la imagen original y continúa repitendo +el procedimiento hasta que tengas todos los fragmentos.
    6. + +
  6. No estaría de más que desactivaras la +opción ajustar a la +rejilla porque si lo olvidas puede que en trabajos futuros +pases un mal rato cuando intentes seleccionar una zona y el programa no +te haga mucho caso hasta que no recuerdes que sigue activado. No he +mencionado la de ver rejilla +porque esa es evidente y en cuanto te moleste su presencia te +acordarás de quitarla.
    7. + +
+

Buscando alternativas

+
+
+
+ + diff --git a/html2005/estilos/tecnicascss5deslizatextofigura2.html b/html2005/estilos/tecnicascss5deslizatextofigura2.html new file mode 100644 index 0000000..1232449 --- /dev/null +++ b/html2005/estilos/tecnicascss5deslizatextofigura2.html @@ -0,0 +1,119 @@ + + + + + + Deslizando el texto a lo largo de una imagen 2 + + + + + + + + + + + + + +
+
 
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +

+This is a remake of Eric +Meyers ragged float. +This is very similar to Erics, with the difference that a single image +is used, and positioned using CSS. The idea is to float DIVs into place +(instead of images), with a fixed width. +So when the text goes to fill the page, it hits the DIVs and makes the +text float along side the images curves. +

+ +

+To get the desired affect, there were 18 DIVs used. Each with a +specified width. To see how it works better, download this page, and +uncomment the border: 1px solid red; line. It +will outline each of the 18 DIVs and show exactly how this demo works. +

+ +

The advantages of this version over Erics, is that only a +single image is used. The single image size is smaller than using +18seperate images. That makes download times faster. If the user +doesn't support CSS then they don't see an image, and the text would +flow like it would on a normal screen.

+ +

For more information, see Eric +Meyers ragged float demo.

+ +
+ + + diff --git a/html2005/estilos/tecnicascss6enclolumnarlistas.html b/html2005/estilos/tecnicascss6enclolumnarlistas.html new file mode 100644 index 0000000..7baf693 --- /dev/null +++ b/html2005/estilos/tecnicascss6enclolumnarlistas.html @@ -0,0 +1,675 @@ + + + + + + Encolumnar listas + + + + + + + + + + + + + + +
+

Estilos>>Técnicas

+ +
+
+ +
+
+ +
+ +
+ +
+ +
+ +

Encolumnar listas

+ +

En ocasiones podemos encontrarnos con listas que contienen un +considerable número de ítems y que resulta poco +apropiado presentar en una única columna. 

+ +

Hemos utilizado como ejemplo la lista de pueblos que componen +la comarca de la cuenca del Tajuña en la provincia de Madrid +que son los quince que figuran a continuación.

+ +
+ + +
+ +

Si nuestra intención es utilizar esta lista como +punto de partida para realizar una descripción +geográfica de los pueblos de la comarca parece evidente que +es necesario aprovechar el ancho de la ventana. Aparte de que pueda +resultar estéticamente más agradable se trata de +favorecer al visitante, ya que le ahorraremos tener que recurrir a la +barra de desplazamiento que sería casi inevitable con una +lista de este tamaño.

+ +

Además, tal vez sería interesante +eliminar los indicadores de cada ítem. Si estás +viendo esta página con Internet Explorer o con Opera es +posible que te haya sorprendido lo de eliminar los indicadores de +ítem... porque no los estás viendo. Al parecer, +cuando se utilizan anchuras para indicar el ancho de una lista estos +navegadores prescinden de los indicadores, así que vamos a +hacer dos cosas: primero veremos cómo hay que hacerlo para +que desaparezcan los +indicadores, esperando que los navegadores se ajusten en el futuro a +los estándares y luego volvemos al mundo real e intentamos +recuperar nuestros +"bolos" para que se puedan ver en todos los navegadores.

+ +

Pongamos manos a la obra:

+ +
+

Como tenemos quince ítems vamos a hacer que se +agrupen de cinco en cinco, esto es en tres columnas. Para ello le +adjudicaremos a la lista una anchura de 14em para cada ítem, +con un total de 42em para la lista. (Este cálculo es +empírico: en función de la longitud de los +ítems estimamos la anchura necesaria y la corregimos si nos +hemos desviado mucho). Si fijamos los márgenes y rellenos de +los elementos de la lista a 0 nos vendrá muy bien para poder +ajustar la estimación de anchuras.

+ +

Aunque parezca un detalle +nimio es importante que se especifique el ancho en ambos selectores +para que el navegador pueda calcular cuántos +ítems le cabrán en cada línea.

+ +

El tercer factor a tener en cuenta es que los ítems +floten a la izquierda, de forma que vayan dejando hueco a su derecha +para que se pueda colocar el ítem siguiente.
+ +

+ +
+

Tras aplicar estos criterios nuestro código CSS ha +quedado así:

+ +

ul {width: 42em;
+ +margin: 0 1.5em;
+ +padding: 0;
+ +}
+ +ul li { float: left;
+ +width: 14em;
+ +margin: 0 ;
+ +padding: 0;
+ +} +
+ +

+ +
+

Como se está utilizando un estilo en +línea y en esta página va a aparecer +también una lista ordenada no podemos definir sencillamente +las priopiedades del selector li ya que se aplicarían +también a los ítems de la lista ordenada. Por ese +motivo hemos definido la regla para los elementos li que sean hijos de +un elemento ul. 

+ +
+ +

+ +
+ +
+ +

Recuperar los indicadores de ítem

+ +
+ +
+ +
+
    + +
  • Ambite
    • + +
  • Arganda del Rey
    • + +
  • Campo Real
    • + +
  • Carabaña
    • + +
  • Morata de Tajuña
    • + +
  • Nuevo +Baztán
    • + +
  • Olmeda de las Fuentes
    • + +
  • Orusco
    • + +
  • Perales de +Tajuña
    • + +
  • Pozuelo del Rey
    • + +
  • Rivas Vaciamadrid
    • + +
  • San +Martín de la Vega
    • + +
  • Tielmes
    • + +
  • Valdilecha
    • + +
  • Villar de Olmo
    • + +
+ +
+ +
+ +
+ +Ya hemos comentado antes que Internet Explorer y Opera no mostraban los +indicadores de item cuando la lista tenía establecida una +anchura. Esto incluye no sólo los indicadores por defecto, +sino también las imágenes +gráficas. Es posible que hayas pensado que lo que +habíamos hecho era sustituir los indicadores por +imágenes, pero no es así: ha habido que complicar +un poco la situación buscando una imagen para ponerla como +fondo de cada ítem y calcular los desplazamientos +para que no se montara con el texto.
+ +
+ +La explicación en real de esto se basa en que, cada elemento +de lista hace que el navegador genere dos cajas: una para el indicador +y otra par el texto del ítem. Internet Explorer y Opera solo +generan la caja correspondiente al texto cuando se encuentran una lista +con anchura especificada.  Debido a esto, para obtener un +efecto similar al que se muestra habría que trabajar +adjudicando una imagen de fondo y separándola del texto para +que no este no se superpusiera. Además no habría +que olvidarse de quitar los indicadores para que no aparecieran en los +navegadores basados en el motor Gecko de Mozilla que interpretan +correctamente la situación. Como ves todo bastante +complicado. En el siguiente recuadro
+ +
+ +
li {float: left;
+ +width: 12em; /* +habrá que ajustar la anchura descontando el relleno que +antes no existía */
+ +margin: 0 ;
+ +list-style-type:none; +/*eliminamos el indicador para que no se muestre en navegadores basados +en Mozilla */
+ +background-image: +url(imagenes/Rd_pin.gif);
+ +background-position: +0;
+ +background-repeat: +no-repeat;
+ +padding: 0 0 0 2em; +/*añadimos un relleno en la zona izquierda para hacer hueco +para la imagen */
+ +}
+ +
+ +
+ +

Encolumnar respetando el orden vertical

+ +

En los ejemplos anteriores hemos utilizado listas +desordenadas. Al menos así las hemos presentado, pero el +contenido de las mismas estaba realmente ordenado +alfabéticamente. 

+ +

Al mostrarlas en columnas se ha seguido manteniendo el orden +pero, probablemente, si los textos de cada ítem no +hubieran sido tan largos, la tendencia natural de lectura +habría sido agrupar visualmente las columnas y suponer que +el orden de lectura es primero de arriba a abajo en una columna para +luego saltar a la siguiente.

+ +

Para acentuar este fenómeno perceptivo vamos a +mostrar ahora el mismo contenido ordenado de esta manera.

+ +
+
    + +
  1. Ambite
    2. + +
  2. Arganda del Rey
    3. + +
  3. Campo Real
    4. + +
  4. Carabaña
    5. + +
  5. Morata de Tajuña
    6. + +
  6. Nuevo Baztán
    7. + +
  7. Olmeda de las Fuentes
    8. + +
  8. Orusco
    9. + +
  9. Perales de Tajuña
    10. + +
  10. Pozuelo del Rey
    11. + +
  11. Rivas Vaciamadrid
    12. + +
  12. San Martín de la Vega
    13. + +
  13. Tielmes
    14. + +
  14. Valdilecha
    15. + +
  15. Villar de Olmo
    16. + +
+ +
+ +

¿Cuál de las dos formas de ordenar te ha +parecido más sencilla de leer? Está claro que +cada persona tiene un esquema perceptivo propio y es posible que a +tí te resulte más fácil leer con el +orden alfabético en horizontal, pero lo más +probable será que te haya resultado más +cómoda la opción que acabamos de ver. +Por si acaso piensas que influyen demasiado los números, +vamos a mostrarla sin numeración pero respetando el orden +alfabético para que te cerciores.

+ +
+
+
    + +
  1. Ambite
    2. + +
  2. Arganda del Rey
    3. + +
  3. Campo Real
    4. + +
  4. Carabaña
    5. + +
  5. Morata de Tajuña
    6. + +
  6. Nuevo Baztán
    7. + +
  7. Olmeda de las Fuentes
    8. + +
  8. Orusco
    9. + +
  9. Perales de Tajuña
    10. + +
  10. Pozuelo del Rey
    11. + +
  11. Rivas Vaciamadrid
    12. + +
  12. San Martín de la Vega
    13. + +
  13. Tielmes
    14. + +
  14. Valdilecha
    15. + +
  15. Villar de Olmo
    16. + +
+ +
+ +
    + +
+ +

En este caso los ítems de +la lista no pueden +flotar, porque eso provocaría una ordenación +horizontal como ya hemos visto. 

+ +

Sin embargo necesitamos que se coloquen en columnas. Para +ello crearemos tantas clases +como columnas necesitemos y especificaremos en ellas el margen +izquierdo de forma que al aplicárselas a cada +ítem hagamos que estos se sitúen +escalonadamente. 

+ +

También vamos a adjudicarle una altura a la +línea. Enseguida veremos para qué nos sirve.

+ +

En estos momentos nuestro código +presentaría el siguiente estado:

+ +
ol { margin: 0; padding: +0; }
+ +
+ +/*ahora especificamos ol li para que la regla afecte sólo +a los items de listas ordenadas */
+ +ol li { margin: 0; padding: 0; line-height: 1.3em; }
+ +
+ +/*creamos las diferentes columnas. No son exactamente iguales debido a +la anchura heterogénea del contenido de los ítems +*/
+ +.col1 {margin-left: 1em;}
+ +.col2 {margin-left: 15em;}
+ +.col3 {margin-left: 31em;} +
+ +

Y con eso conseguiríamos... este pequeño +desastre

+ +
+
    + +
  1. Ambite
    2. + +
  2. Arganda del Rey
    3. + +
  3. Campo Real
    4. + +
  4. Carabaña
    5. + +
  5. Morata de Tajuña
    6. + +
  6. Nuevo Baztán
    7. + +
  7. Olmeda de las Fuentes
    8. + +
  8. Orusco
    9. + +
  9. Perales de Tajuña
    10. + +
  10. Pozuelo del Rey
    11. + +
  11. Rivas Vaciamadrid
    12. + +
  12. San Martín de la Vega
    13. + +
  13. Tielmes
    14. + +
  14. Valdilecha
    15. + +
  15. Villar de Olmo
    16. + +
+ +
+ +

Es verdad que el texto parece encolumnado, pero lo que +habíamos dicho antes de que queríamos que las +columnas se situaran escalonadamente ha resultado +profético. 

+ +

Ahora bien, si lo pensamos un poco ha ocurrido lo que era de +esperar: el item 6 se ha colocado donde podía esperar, esto +es, debajo del ítem 5 pero respetando el margen que le hemos +indicado. El 7, 8, 9 y 10 se han ido colocando cada uno debajo del +anterior con su margen correctamente calculado. Del 11 al 16 se ha +producido el mismo proceso acorde a lo que habíamos indicado +hasta ahora.

+ +

Está claro que nos falta introducir una +pequeña corrección y aquí es donde +aparece la utilidad de esa altura de línea que +habíamos indicado como propiedad de los selectores li. Como +cada item ha ido ocupando 1.3 em quiere decir que cada columna ha +consumido 1.3 x 5 = 6.5 em verticales. Si creamos una clase que tenga +un margen superior negativo de esa cantidad y la aplicamos a los +ítems en los que se produce el salto de columna +conseguiremos que suban hasta situarse a la altura del primer +ítem. Los que vayan a continuación se +irán alineando correctamente bajo él hasta que +llegue el siguiente salto de columna. Esto se traduciría en +la siguiente clase que añadimos a nuestros estilos:

+ +
 .saltoarriba +{margin-top: +-6.5em;}
+ +

Con ello completaríamos las reglas necesarias y lo +que haríamos dentro del código HTML +sería aplicar un +par de clases al mismo elemento cuando llegáramos al primero +de +cada columna, con lo cual conseguimos el efecto que +perseguíamos.

+ +

<ol>
+ +  <li class="col1">Ambite</li>
+ +  <li class="col1">Arganda del +Rey</li>
+ +  <li class="col1">Campo Real</li>
+ +  <li +class="col1">Caraba&ntilde;a</li>
+ +  <li class="col1">Morata de +Taju&ntilde;a</li>
+ +  <li class="col2 saltoarriba">Nuevo +Bazt&aacute;n</li>
+ +  <li class="col2">Olmeda de las +Fuentes</li>
+ +  <li class="col2">Orusco</li>
+ +  <li class="col2">Perales de +Taju&ntilde;a</li>
+ +  <li class="col2">Pozuelo del +Rey</li>
+ +  <li class="col3 saltoarriba">Rivas +Vaciamadrid</li>
+ +  <li class="col3">San Mart&iacute;n de +la Vega</li>
+ +  <li class="col3">Tielmes</li>
+ +  <li class="col3">Valdilecha</li>
+ +  <li class="col3">Villar de +Olmo</li>
+ +</ol>
+ +

+ +
+ +
+Actividad 98 +

Una posible +aplicación de esta técnica sería la +creación de una página índice que +llevara a las +páginas personales de cada uno de los profesores del centro +o de +los alumnos de una clase.

+ +

Prueba a crear una lista ordenada alfabéticamente +con los +alumnos de tu clase (puede ser numerada o bien sin indicadores +según prefieras). 

+ +
La gran ventaja de esta forma de +presentar las +listas es que se aprovecha muy bien el espacio y se favorece el acceso +a todos los elementos que queremos mostrar, al hacer que no sea +necesario utilizar la barra de desplazamiento. Posiblemente te sobre +media pantalla y a pesar de ello se verán todos los nombres +de +los alumnos o profesores sin dificultad.
+ +
+ +
+
+ + diff --git a/html2005/estilos/tecnicascssalsa1horizsimple.html b/html2005/estilos/tecnicascssalsa1horizsimple.html new file mode 100644 index 0000000..6adb909 --- /dev/null +++ b/html2005/estilos/tecnicascssalsa1horizsimple.html @@ -0,0 +1,193 @@ + + + + + + Menú horizontal simple + + + + + + + + + + + + + +

Menú horizontal simple    (Volver)

+
+
+ + +
+ +

La idea base es eliminar las marcas de los elementos de lista +poniendo +el valor list-style-type:none y hacerlos flotar a la +izquierda. 

+ +

Para evitar que otros listados hereden los estilos de forma +automática creamos una clase a la que llamamos menu. (Lo +hacemos como clase en lugar de como indicador por si +quisiéramos que en otro punto de la página +apareciera otro listado con las mismas características).

+ +

Con este esquema base el resto de reglas se refiere a la +apariencia gráfica de los elementos de la lista que sean +enlaces: márgenes para separarlos, colores, +alineación y bordes esencialmente.

+ +

Una vez definidas las características +básicas comunes se especifican las particulares para las +pseudoclases :visited :hover y :active que provocarán los cambios de apariencia visual en función del estado del enlace.

+ +
+
+<style type="text/css">
+ +<!--
+ +/* CSS base obtenido de los tutoriales de +www.alsacreations.com/articles */
+ +.menu {
+ +height: 22px; /* necesario para que se produzca salto tras el +menú */
+ +}
+ +.menu ul {
+ +list-style-type: none;
+ +width: 100%; /* ajuste para Opera */
+ +}
+ +.menu li {
+ +float: left;
+ +}
+ +.menu a {
+ +margin: 0 2px;
+ +width: 120px;
+ +height: 20px;
+ +display: block;
+ +text-align: center;
+ +border: 1px solid gray;
+ +text-decoration: none;
+ +color: #000;
+ +background-color: #fff;
+ +}
+.menu a:visited {
+color: rgb(204, 102, 204);
+background-color: rgb(221, 221, 221);
+}
+.menu a:hover {
+background-color: rgb(204, 204, 204);
+}
+.menu a:active {
+ +background-color: gray;
+ +color: #fff;
+ +}
+ +-->
+ +  </style>
+
+ +
+
+ + diff --git a/html2005/estilos/tecnicascssalsa2vertsimple.html b/html2005/estilos/tecnicascssalsa2vertsimple.html new file mode 100644 index 0000000..59e23de --- /dev/null +++ b/html2005/estilos/tecnicascssalsa2vertsimple.html @@ -0,0 +1,196 @@ + + + + + + Menú vertical simple en CSS + + + + + + + + + + + + + +

Menú vertical simple    (Volver)

+
+
+ + +
+ +

En este caso la situación es muy similar al +menú horizontal simple.

+ +

Las principales variaciones que encontramos son:

+ + + +
<style +type="text/css">
+ +<!--
+ +/* CSS base obtenido de los tutoriales de +www.alsacreations.com/articles */
+ +.menu {
+ +float:left;
+ +width: 180px;
+ +margin-right:10px;
+ +}
+ +.menu ul {
+ +list-style-type: none;
+ +}
+ +.menu li {
+ +margin-bottom: 5px;
+ +}
+ +.menu a {
+ +margin: 0 2px;
+ +width: 120px;
+ +height: 20px;
+ +display: block;
+ +text-align: center;
+ +border: 1px solid gray;
+ +text-decoration: none;
+ +color: #000;
+ +background-color: #fff;
+ +}
+ +.menu a:visited {
+ +color: rgb(204, 102, 204);
+ +background-color: rgb(221, 221, +221);
+ +}
+ +.menu a:hover {
+ +background-color: rgb(204, 204, +204);
+ +}
+ +.menu a:active {
+ +background-color: gray;
+ +color: #fff;
+ +}
+ +-->
+ +  </style>
+ +
+
+ + diff --git a/html2005/estilos/tecnicascssalsa3horizdesplegable.html b/html2005/estilos/tecnicascssalsa3horizdesplegable.html new file mode 100644 index 0000000..c61fb43 --- /dev/null +++ b/html2005/estilos/tecnicascssalsa3horizdesplegable.html @@ -0,0 +1,645 @@ + + + + + + + + + + + + + Menú horizontal desplegable con CSS + + + + + + + + + + + + + + + + + +

Menú horizontal desplegable    (Volver)

+
+ + + + +
+

Este menú requiere que esté activado +Javascript.

+ + +

Los menús, debido a la utilización de un +z-index:100 se superponen al contenido de la página al +desplegarse.

+ + +
+

Javascript

+ + +

Lo situamos en la cabecera y se encarga de +mostrar u ocultar los submenús:

+ + +
+ + +<script +type="text/javascript"><!--
+ + +function mostrarsubmenu(id) {
+ + +var d = +document.getElementById(id);
+ + +for (var i = 1; i<=10; +i++) {
+ + + +    if +(document.getElementById('smenu'+i))     +            +            +            +        +{document.getElementById('smenu'+i).style.display='none';}
+ + + +        }
+ + +    if (d) {d.style.display='block';}
+ + +    }
+ + +//-->
+ + +</script> +
+ + +
+ + +
+ + +

Código CSS comentado

+ + +
+ + +
+ + +/*Eliminamos los identificadores de item y ajustamos margen y relleno*/
+ + +dl, dt, dd, ul, li {
+ + +margin: 0;
+ + +padding: 0;
+ + +list-style-type: none;
+ + +}
+ + + +
+ + +/*Creamos el identificador menu y lo situamos el menú en la +zona superior*/
+ + +#menu {
+ + +position: absolute;
+ + +top: 0;
+ + +left: 10px;
+ + +z-index:100;
+ + +width: 100%; /* ajuste para +Opera */
+ + +} +
+ + +
+ + +/*Aplicamos formato a los diversos componentes de las listas que se +encuentren dentro de #menu */
+ + +#menu dl {
+ + +float: left;
+ + +width: 12em;
+ + +}
+ + +#menu dt {
+ + +cursor: pointer;
+ + +text-align: center;
+ + +font-weight: bold;
+ + +background: #ccc;
+ + +border: 1px solid gray;
+ + +margin: 1px;
+ + +}
+ + +#menu dd {
+ + +display: none;
+ + +border: 1px solid gray;
+ + +}
+ + +#menu li {
+ + +text-align: center;
+ + +background: #fff;
+ + +} +
+ + +/*Aplicamos formato a los enlaces que pertenezcan a elementos de listas +que se encuentren dentro de #menu */
+ + +
+ + +#menu li a, #menu dt +a {
+ + +color: #000;
+ + +text-decoration: none;
+ + +display: block;
+ + +height: 100%;
+ + +border: 0 none;
+ + +}
+ + +#menu dt a {
+ + +text-align:center;
+ + +} +
+ + +
+ + +/*Aplicamos pseudoclases para formato para enlaces visitados y para el +paso de ratón sobre enlace dentro de #menu */
+ + +#menu li a:visited, +#menu dt +a:visited {
+ + +color: #eee;
+ + +}
+ + +#menu li a:hover, #menu dt +a:hover {
+ + +background: #eee;
+ + +color: #000;
+ + + +}
+ + +
+ + + +

Código HTML

+ + +

Observa que no tenemos una única lista de +definición, sino que cada término de +definición y sus datos constituyen una lista dl +independiente. Haciéndolo así cada lista flota a +la izquierda y permite que la siguiente se coloque a su derecha tal +como especificamos al crear las reglas CSS.

+ + +

+ + +<dl>
+ + +  <dt +onmouseover="javascript:mostrarsubmenu('smenu1');">Menu +1</dt>
+ + +  <dd id="smenu1" +onblur="javascript:mostrarsubmenu();">
+ + +    <ul>
+ + +      +<li><a +href="#">Submen&uacute; +1.1</a></li>
+ + +      +<li><a +href="#">Submen&uacute; +1.2</a></li>
+ + +      +<li><a +href="#">Submen&uacute; +1.3</a></li>
+ + +      +<li><a +href="#">Submen&uacute; +1.4</a></li>
+ + +      +<li><a +href="#">Submen&uacute; +1.5</a></li>
+ + +      +<li><a +href="#">Submen&uacute; +1.6</a></li>
+ + +    </ul>
+ + +  </dd>
+ + +</dl>
+ + +<dl>
+ + +/* Aunque el siguiente menú no tiene +submenús necesitamos +invocar el javascript sin darle un valor para que al pasar el +ratón sobre él se oculte el menú que +estuviera abierto */
+ + +  <dt onmouseover="javascript:mostrarsubmenu();">
+ + +  <a href="#">Menu +2</a></dt>
+ + +</dl>
+ + +...
+ + +
+ + +
+ + +
+ +
+ + diff --git a/html2005/estilos/tecnicascssalsa4horizdesplegableenlineas.html b/html2005/estilos/tecnicascssalsa4horizdesplegableenlineas.html new file mode 100644 index 0000000..1b6ba1d --- /dev/null +++ b/html2005/estilos/tecnicascssalsa4horizdesplegableenlineas.html @@ -0,0 +1,211 @@ + + + + + + Menú horizontal desplegable en +líneas con CSS + + + + + + + + + + + + + + +

Menú horizontal desplegable en líneas    (Volver)

+
+ + +
+

Este menú requiere que esté activado +Javascript.

+ +

Alguna opción de menú podría +no desplegar opciones funcionar como enlace directo a otra +página. (Caso del Elemento menú 2 del ejemplo)

+

Se ha introducido la propiedad display:table para los selectores dt del menú para que se muestre correctamente en Opera.

+

También se ha añadido la pseudoclase :visited para introducir diferenciación de color en los enlaces visitados

+
+
+ + diff --git a/html2005/estilos/tecnicascssalsa5horizdesplegableenlineas.html b/html2005/estilos/tecnicascssalsa5horizdesplegableenlineas.html new file mode 100644 index 0000000..33acf04 --- /dev/null +++ b/html2005/estilos/tecnicascssalsa5horizdesplegableenlineas.html @@ -0,0 +1,218 @@ + + + + + + Menú horizontal desplegable en líneas con CSS + + + + + + + + + + + + + + +

Menú horizontal desplegable en línea    (Volver)

+
+ + + +
+

Este menú requiere que esté activado +Javascript.

+ +

Alguna opción de menú podría +no desplegar opciones funcionar como enlace directo a otra +página. (Caso del Elemento menú 2 del ejemplo)

+ +

Se ha introducido la propiedad display:table +para los selectores dt del menú +para que se muestre correctamente en Opera.

+ +

También se ha añadido la pseudoclase :visited +para introducir diferenciación de color en los enlaces +visitados

+ +
+ +
+ + diff --git a/html2005/estilos/tecnicascssalsa5vertdesplegable.html b/html2005/estilos/tecnicascssalsa5vertdesplegable.html new file mode 100644 index 0000000..e8211e4 --- /dev/null +++ b/html2005/estilos/tecnicascssalsa5vertdesplegable.html @@ -0,0 +1,260 @@ + + + + + + Menú desplegable vertical con CSS + + + + + + + + + + + + + + +

Menú vertical desplegable    (Volver)

+
+ + + +
+

En este caso nos encontramos con un menú en el que, +al pulsar sobre cada una de las opcines nos llevará +al  destino especificado o bien abrirá un +submenú. En ambos casos la pulsación sobre el +menú principal cerrará el submenú que +pudiera estar abierto. 

+ +

En el ejemplo el primer elemento del menú +sería un enlace directo mientras que los otros tres disponen +de submenús desplegables.

+ +

Las acciones que se han descrito se apoyan en un javascript +que se carga automáticamente con la página y se +ocupa de realizar la tarea de apertura y cierre de los +submenús.

+ +

Las reglas CSS se encargan de la apariencia de los +diversos elementos y, para construirlos en el código HTML se ha utilizado una lista de +definiciones: cada término de definición es un +ítem del menú principal, mientras que el +submenú son los datos de la definición que +están constituidos por una lista que enumera cada uno de los +submenús. Como ejemplo, además de consultar el +código de la página, tienes a +continuación el código correspondiente al cuarto +ítem del menú principal:

+ +
  <dt +onclick="javascript:mostrarsubmenu('smenu4');">Men&uacute; +4</dt>
+ +  <dd id="smenu4">
+ +    <ul>
+ +      +<li><a +href="#">Submen&uacute; +4.1</a></li>
+ +      +<li><a +href="#">Submen&uacute; +4.1</a></li>
+ +    </ul>
+ +  </dd>
+ +Como puedes ver, el término de +definición contiene una llamada javascript que se activa al +hacer clic que es la encargada de que se muestre el submenú.
+ +

Si reflexionamos sobre la estructura que se ha utilizado nos +damos cuenta de que no es descabellada la utilización de una +lista de definiciones, puesto que desde el punto de vista +semántico sí que se podría interpretar +un menú con submenús desplegables como tal.

+ +

Por la propia apariencia visual del menú su +utilización +más habitual será en páginas cuya +estructura +esté basada en marcos, bien sea en marcos puros o en +marcos +internos (iframe).

+ +
+
+ + diff --git a/html2005/estilos/tecnicascssalsa6vertdesplegable.html b/html2005/estilos/tecnicascssalsa6vertdesplegable.html new file mode 100644 index 0000000..7e8781b --- /dev/null +++ b/html2005/estilos/tecnicascssalsa6vertdesplegable.html @@ -0,0 +1,162 @@ + + + + + + Menú desplegable vertical con CSS + + + + + + + + + + + + + + + + +
+

Por la propia estructura del menú su +utilización +más habitual será en páginas cuya +estructura +esté basada en marcos, bien sea en marcos puros o en +marcos +internos (iframe).

+ +
+ + + diff --git a/html2005/estilos/tecnicascssalsa6vertdesplegableb.html b/html2005/estilos/tecnicascssalsa6vertdesplegableb.html new file mode 100644 index 0000000..81812ed --- /dev/null +++ b/html2005/estilos/tecnicascssalsa6vertdesplegableb.html @@ -0,0 +1,95 @@ + + + + + + Menú desplegable vertical con CSS + + + + + + + + + + + + + +
Menú +2 + + +
+ +
Menú +3 + + + +
+ +
Menú +4 +
+ + + diff --git a/html2005/estilos/tecnicascssalsa6vertflotante.html b/html2005/estilos/tecnicascssalsa6vertflotante.html new file mode 100644 index 0000000..dbd9271 --- /dev/null +++ b/html2005/estilos/tecnicascssalsa6vertflotante.html @@ -0,0 +1,217 @@ + + + + + + Menú vertical con opciones flotantes con CSS + + + + + + + + + + + + + + +

Menú vertical con submenús flotantes    (Volver)

+
+ + +
+

Este menú requiere que esté activado +Javascript.

+ +

Alguna opción de menú podría +no desplegar opciones y funcionar como enlace directo a otra +página. (Caso del Elemento menú 1 del ejemplo)

+ +

Los menús, debido a la utilización de un +z-index:100 se superponen al contenido de la página al +desplegarse.

+ +

Por la propia estructura del menú su +utilización +más habitual será en páginas cuya +estructura +esté basada en marcos, bien sea en marcos puros o en +marcos +internos (iframe).

+ +

Al utilizar este menú en páginas con +estructrura real de marcos habría que tener en cuenta la +anchura total del menú (elementos principales + elementos +flotantes)  para establecer el ancho del marco que lo +contiene. Esto nos obligaría a revisar el código +para establecer las medidas del menú en +píxeles.

+ +
+
+ + diff --git a/html2005/estilos/tecnicascssalsa7mapaimagsust.html b/html2005/estilos/tecnicascssalsa7mapaimagsust.html new file mode 100644 index 0000000..91045a7 --- /dev/null +++ b/html2005/estilos/tecnicascssalsa7mapaimagsust.html @@ -0,0 +1,95 @@ + + + + + Mapa con imágenes de sustitución + + + + + + + + + + +
+Su navegador no cuenta con soporte CSS o está deshabilitado +Ese es el motivo por el que está usted viendo a continuación una imagen que no hace nada. +
+ + + + + + +
+ + +

Es sorprendente cómo se puede lograr un menú tan vistoso. La idea base es trabajar con listas mostradas en bloque. Se utilizan imágenes de sustitución: una imagen como fondo para los enlaces y otra diferente cuando el ratón pasa por encima.

+

Testé avec succès sur IE5.5, IE6, Opera, Mozilla Firebird et Firefox.

+ + + + \ No newline at end of file diff --git a/html2005/estilos/tecnicascssalsa7mapaimagsustc.html b/html2005/estilos/tecnicascssalsa7mapaimagsustc.html new file mode 100644 index 0000000..62ef8eb --- /dev/null +++ b/html2005/estilos/tecnicascssalsa7mapaimagsustc.html @@ -0,0 +1,93 @@ + + + + + + + + + + + + + + +
+Votre navigateur ne supporte pas les CSS. +Si des images s'affichent ci-dessous, nous vous prions de ne pas en tenir compte. +
+ + + + + + +
+ + +

Es sorprendente cómo se puede lograr un menú tan vistoso. La idea base es trabajar con listas mostradas en bloque. Se utilizan imágenes de sustitución: una imagen como fondo para los enlaces y otra diferente cuando el ratón pasa por encima.

+

Testé avec succès sur IE5.5, IE6, Opera, Mozilla Firebird et Firefox.

+ + + + \ No newline at end of file diff --git a/html2005/estilos/tecnicascssalsa7vertflotante.html b/html2005/estilos/tecnicascssalsa7vertflotante.html new file mode 100644 index 0000000..0b0e343 --- /dev/null +++ b/html2005/estilos/tecnicascssalsa7vertflotante.html @@ -0,0 +1,197 @@ + + + + + + Menú vertical con opciones flotantes con CSS + + + + + + + + + + + + + + + + + +
+

Este menú requiere que esté activado +Javascript.

+ +

Alguna opción de menú podría +no desplegar opciones y funcionar como enlace directo a otra +página. (Caso del Elemento menú 1 del ejemplo)

+ +

Los menús, debido a la utilización de un +z-index:100 se superponen al contenido de la página al +desplegarse.

+ +

Por la propia estructura del menú su +utilización +más habitual será en páginas cuya +estructura +esté basada en marcos, bien sea en marcos puros o en +marcos +internos (iframe).

+ +

Al utilizar este menú en páginas con +estructrura real de marcos habría que tener en cuenta la +anchura total del menú (elementos principales + elementos +flotantes)  para establecer el ancho del marco que lo +contiene. Esto nos obligaría a revisar el código +para establecer las medidas del menú en +píxeles.

+ +
+ + + diff --git a/html2005/estilos/tecnicascssalsa8mapaimagsust.html b/html2005/estilos/tecnicascssalsa8mapaimagsust.html new file mode 100644 index 0000000..c62f571 --- /dev/null +++ b/html2005/estilos/tecnicascssalsa8mapaimagsust.html @@ -0,0 +1,120 @@ + + + + + Mapa con imágenes de sustitución + + + + + + + + + + +

Menú con apariencia de mapa sensible    (Volver)

+
+ +
+Su navegador no cuenta con soporte CSS o está deshabilitado +Ese es el motivo por el que está usted viendo a continuación unas imagenes que no hacen nada. +
+ + + + + + +
+ + +

Es sorprendente cómo se puede lograr un menú tan vistoso. La idea base es trabajar con listas mostradas en bloque. Se utilizan imágenes de sustitución: una imagen como fondo para los enlaces y otra diferente cuando el ratón pasa por encima.

+

+
+ + + \ No newline at end of file diff --git a/html2005/estilos/tecnicascssbordesredondeados.html b/html2005/estilos/tecnicascssbordesredondeados.html new file mode 100644 index 0000000..6ab87a5 --- /dev/null +++ b/html2005/estilos/tecnicascssbordesredondeados.html @@ -0,0 +1,228 @@ + + + + + + Bordes redondeados (con imágenes) + + + + + + + + + + + + + + +
+

Estilos>>Técnicas

+ +
+
+ +
+
+ +
+ +
+ +
+ +
+

Cajas con esquinas redondeadas

+ +
+
+
+ +
+ +
+

Cuatro esquinas

+ +

Con ese termino nos referimos a los muros que forman una casa.

+ +

Con cuatro "ladrillos" especiales podemos hacer que las +uniones de los muros de la casa sean redondeadas. 

+ +
+ +
+
+ +
+ +
+ +

El primer paso sería crear un contenedor general +(en el +ejemplo se ha denominado "bordesredondos") en el que situaremos los +elementos que +deseamos poner en el recuadro redondeado y asignarle las dimensiones, +los márgenes y el color de fondo.

+ +

Dentro del contenedor general situaremos tres "filas" de +elementos:

+ +
    + +
  1. El borde superior con las esquinas redondeadas: utilizamos +un contenedor genérico div que lleva como fondo la esquina +izquierda y anidamos dentro del mismo otro contenedor +genérico +div que tiene como fondo la esquina superior derecha. Si en lugar de +anidar los contenedores genéricos los hubiéramos +puesto uno a continuación de otro, cada uno de ellos +ocuparía el 100% de la anchura del contenedor general y se +colocarían uno bajo el otro.
    2. + +
  2. El contenido del recuadro.
    3. + +
  3. El borde inferior y sus esquinas redondeadas: seguimos el +mismo procedimiento que para el borde superior.
    + +
    4. + +
+ +La imágenes que hemos utilizado para las equinas son +las siguientes: Esquina superior izquierda +Esquina superior derecha Esquina inferior izquierda Esquina superior derecha. También se ha + utilizado una imagen Imagen de fondo +para el fondo general de la caja aunque, dado que se trata de un color +plano, podríamos haber optado por asignarle un +color de fondo en lugar de utilizar una imagen.
+ +
+

El código CSS en la cabecera o en un archivo externo.

+ +

/* ancho y márgenes de la caja */
+ +.bordesredondos { width: 20em; margin: auto; }
+ +.bordesredondos { background: url(imagenes/fondo.gif) repeat; }
+ +
+ +/* imágenes de fondo para las esquinas */
+ +.arribaizq { background: url(imagenes/arriba_izq.gif) no-repeat top +left; }
+ +.arribader { background: url(imagenes/arriba_der.gif) no-repeat top +right; }
+ +.abajoizq { background: url(imagenes/abajo_izq.gif) no-repeat bottom +left; }
+ +.abajoder { background: url(imagenes/abajo_der.gif) no-repeat bottom +right; }
+ +
+ +/* ancho y alto de las esquinas */
+ +.arribaizq, .arribader, .abajoizq, .abajoder { width: 100%; height: +1em; }
+ +
+ +/* deplazamiento de las esquinas inferiores para disminuir la distancia +al contenido */
+ +.abajoizq, .abajoder { margin-top:-1em; }
+ +
+ +/* detalles del contenido */
+ +.contenidocaja { margin: 0 1em; } +

+ +
En caso de que el código css vaya en un +archivo externo habrá que ajustar las rutas de las +imágenes tomando como punto de partida el archivo css que es el +que contiene la llamada.
+ +

El código HTML en el cuerpo de la página.

+ +

<div class="bordesredondos">

+ +

<div +class="arribaizq"><div +class="arribader"></div></div>

+ +

<div +class="contenidocaja">

+ +

Aquí va el +texto que aparece en la caja

+ +

</div>

+ +

<div +class="abajoizq"><div +class="abajoder"></div></div>

+ +

</div>
+ +

+ + +
+ +
+ + diff --git a/html2005/estilos/tecnicascssstu1visitado.html b/html2005/estilos/tecnicascssstu1visitado.html new file mode 100644 index 0000000..ee132bf --- /dev/null +++ b/html2005/estilos/tecnicascssstu1visitado.html @@ -0,0 +1,192 @@ + + + + + + Menú con indicación expresa de visitado + + + + + + + + + + + + + +

Menúvertical con indicacion de visto    (Volver)

+
+
+ + +

En este caso el efecto que se +persigue es la aparición de un +rótulo que indica que ya se ha visitado el enlace.

+ +

Para +comprobarlo puedes pulsar el primer enlace y luego la flecha de vuelta +atrás de tu navegador.

+ +

Como estás viendo hemos dejado un importante margen +en la zona derecha de los menús porque es necesario para +dejar espacio a los rótulos que aparecerán. +También habrá que tener en cuenta este detalle +cuando este tipo de menús se utilice en una estructura de +marcos.

+ +

En esta ocasión no hemos creado una lista, sino una +serie de contenedores encerrados dentro de otro contenedor +genérico que tiene fondo gris. La idea en la que se +basa el menú es que cada uno de los contenedores tiene el +enlace y un fragmento en línea tal como puedes ver a +continuación: 

+ +
<div +class="box">
+ +<a +href="http://www.cssplay.co.uk/menus/visitedmenu.html">Men&uacute; +1
+ +<span>VISTO</span>
+ +</a>
+ +</div>
+ +

Para hacer que el fragmento en línea aprovechamos +las características de herencia y utilizamos las +propiedad CSS +display:none para que cualquier elemento span +que sea descendiente +de un enlace que, a su vez, sea descendiente del contenedor +que hemos nombrado con el  identificador menu, +no se +muestre.

+ +
#menu a span { +display:none;}
+ +Bastante más simple de explicar con código CSS +que con lenguaje humano ;-)
+ +

Lo único que nos queda es añadir la +pseudo clase :visited a los enlaces para que +los fragmentos en +línea span que sean +descendientes de un enlace visitado que, a su +vez, sea descendiente del contenedor que hemos +nombrado con el  identificador menu, +se muestren con la +apariencia que indicamos con las reglas CSS. +Además +especificaremos un índice de profundidad alto para que se +superponga a otros elementos que pudieran quedar por debajo.

+ +
#menu a:visited span {
+ +display:block; 
+ +position:absolute;
+ +top:0;
+ +left:11em;
+ +width:5em;
+ +font-size:0.7em;
+ +color:#c00;
+ +border:1px solid #c00;
+ +text-align:center;
+ +z-index:50;
+ +}
+ +
+ +

El resto de reglas CSS no +merecen explicación +especial ya que su función es la común de indicar +el aspecto de los diversos elementos de la página.

+ +
+
+ + diff --git a/html2005/estilos/tecnicascssstu2vertalinder.html b/html2005/estilos/tecnicascssstu2vertalinder.html new file mode 100644 index 0000000..0431f54 --- /dev/null +++ b/html2005/estilos/tecnicascssstu2vertalinder.html @@ -0,0 +1,86 @@ + + + + + Menú con indicación expresa de +visitado + + + + + + + + + +

Menú vertical con cambio de alineación    (Volver)

+
+
+ +
+
En este caso el efecto del menú es el cambio de alineación de los ítems y la modificación del color de la linea de delimitación inferior +
+
+ + + diff --git a/html2005/estilos/tecnicascssstu3vertspanflecha.html b/html2005/estilos/tecnicascssstu3vertspanflecha.html new file mode 100644 index 0000000..65d5309 --- /dev/null +++ b/html2005/estilos/tecnicascssstu3vertspanflecha.html @@ -0,0 +1,126 @@ + + + + + + Menú vertical con flechas generadas por bordes + + + + + + + + + + + + + +

Menú vertical con flechas generadas    (Volver)

+
+
+ + +
+ +
+

La utilización de bordes gruesos en elementos de +ancho y alto iguales a 0 provoca un curioso efecto que nos permite +obtener zonas del color del borde con inclinaciones de 45 o +135º según el lado en que se produzcan al combinar +los bordes izquierdo o derecho de un color con el superior y/o inferior +de otro color. Gracias a esta combinación se ha obtenido la +"flecha" roja que aparece al pasar el ratón sobre cada +imagen.

+ +

Por si te parece mágico lo de las flechas observa +atentamente el siguiente fragmento para ver de dónde salen +esas inclinaciones de 45 o 135º.

+ +
+
<div +style="border-style: solid; border-color: rgb(255, 0, 0) rgb(255, 255, +0) rgb(0, 0, 255) rgb(0, 255, 0); border-width: 8px;"> +
+ +
+ +
+
+ +
+ +
+
En +el segundo caso los colores y el grosor del borde son iguales pero el +ancho y el alto del elemento son 0 +
+ +
+ +
+
+ +
+ +
+ +
+ +
+ +
+
+ + diff --git a/html2005/formularios/_notes/formularios2.htm.mno b/html2005/formularios/_notes/formularios2.htm.mno new file mode 100644 index 0000000..eaa845e --- /dev/null +++ b/html2005/formularios/_notes/formularios2.htm.mno @@ -0,0 +1,4 @@ + + + + diff --git a/html2005/formularios/borrar.html b/html2005/formularios/borrar.html new file mode 100644 index 0000000..f0cda38 --- /dev/null +++ b/html2005/formularios/borrar.html @@ -0,0 +1,13 @@ + + + + + + + + +

+
+
+ + diff --git a/html2005/formularios/formularios1.htm b/html2005/formularios/formularios1.htm new file mode 100644 index 0000000..3f8e5a7 --- /dev/null +++ b/html2005/formularios/formularios1.htm @@ -0,0 +1,214 @@ + + + + + + + + + + + + + + + +
+

Formularios>>El contenedor principal

+ +
+
+ +
+
+ +
+ + +
+ +

¿Qué es un +formulario?

+ +

Una de las vías de comunicación que +podemos ofrecerle a los visitantes es el enlace de correo +electrónico para que se puedan poner en contacto con quien +corresponda. Es una posibilidad que debería existir en +cualquier página WEB, siempre que exista alguna persona que +se responsabilice de consultar el buzón, tal como ya hemos +comentado.

+ +

Pero habrá ocasiones en las que el correo +electrónico será demasiado abierto y necesitemos +especificar una serie de campos para que se rellenen y la +información que nos llegue sea ajuste a lo que necesitamos. +En ese caso recurriremos a los formularios.

+ +

Habría mucho que hablar sobre los formularios, y lo +primero sería decir que, para que un formulario ofrezca su +pleno rendimiento tiene que estar complementado por una +aplicación que se ejecute en el servidor y que permita, en +su forma más simple, organizar los datos recibidos y +enviarlos al destinatario que se haya establecido al crear el +formulario.

+ +

Ahora bien, si lo pensamos un poco, podemos darnos cuenta de +que existen unos ciertos riesgos al llevar a cabo el procedimiento que +acabamos de comentar. Al fin y al cabo, se está permitiendo +que un usuario anónimo provoque la ejecución de +un programa en un ordenador en el que teóricamente +sólo tiene permiso para ver un determinado tipo de archivos, +pero no para ejecutar ningún programa. +¿Quién garantiza que el programa que se ejecuta +no tiene algún agujero de seguridad que permita una +intervención malintencionada? Ese es el problema por el que +no todos los servidores nos van a permitir alojar programas para +manejar los formularios.

+ +

Así pues, al no poder adivinar las condiciones en +las que cada alumno de este curso publicará sus +páginas, no entraremos en descripciones detalladas de +procesos que, por otra parte exceden el marco de contenidos. +Utilizaremos la forma más sencilla de procesamiento de un +formulario que será accesible a todos ya que no exige la +ejecución de programas en el servidor.

+ +

El contenedor principal

+ +

Para que los diferentes campos que utilicemos sean +operativos tienen que estar integrados dentro de un contenedor que los +englobe. Esa será la función que +desempeñe la etiqueta <form> +y su correspondiente cierre </form>. +Será entre ellas donde se sitúen los diferentes +campos y también servirá para indicar el tipo de +operación que se realizará con los datos.

+ +

Panel de creación de formularioPara iniciar la +creación del formulario +utilizaremos la opción de menú insertar +formulario + definir formulario +o bien pulsando directamente el icono Formulario +sin necesidad de desplegar las opciones. Con cualquiera de las opciones +se abrirá un panel para introducir los datos esenciales del +formulario.

+ +

El nombre del formulario +servirá +para identificarlo en caso de querer realizar alguna +operación +mediante algún lenguaje de programación, por lo +que no +sería imprescindible cumplimentarlo. Lo que sí es +importante es cumplimentar la URL +de la acción que se realizará, +puesto que si no lo hacemos, al intentar guardar el programa nos +avisará con un mensaje.

+ +

Aviso de que no se ha especificado acción

+ +

Si volvemos a intentar guardar el formulario sin corregir esta +situación ya no aparecerá nuevamente +el mensaje de +advertencia. En nuetro caso vamos a utilizar la acción +más sencilla que es la de enviar por correo sin recurrir a +programas o acciones en el servidor para lo que ponemos como URL de la +acción un enlace del tipo +mailto:dirección.de.correo

+ +

En cuanto al método, +dados los +procedimientos que utilizaremos para el envío y la +función que le daremos al propio formulario en este curso +utilizaremos siempre post que es el +más adecuado para el envío básico de +datos sin interaccionar con otras aplicaciones.

+ +

Más propiedades: indicar la codificaciónAntes +de continuar es importante considerar una cuestión: dado que +nuestro idioma utiliza caracteres que no forman parte del conjunto +ASCII básico nos interesa pulsar el botón Más propiedades +para indicar el tipo de codificación que se debe utilizar +para +codificar los datos. Si no especificamos otra cosa, el tipo de +codificación que se usa por defecto es el denominado application/x-www-form-urlencoded +que es el menos adecuado para representar de una forma inteligible los +caracteres acentuados, las eñes o los signos de apertura de +interrogación o admiración. Por ello nos conviene +seleccionar cualquiera de los otros dos: multipart/form-data +o text/plain. +Cuando avancemos en la elaboración de formularios +verás +que el más adecuado puesto que es el que mejor representa +los +saltos de línea es el primero, pero dado que empaqueta todos +los +datos en un archivo con extensión att tal vez sea +más +conveniente utilizar el último tipo para que el contenido +aparezca en claro en el cuerpo del mensaje.

+ +

Cuando hemos completado la adjudicación de los +valores veremos que en las pestañas Normal y +Etiquetas HTML el programa +señala la posición del formulario mediante un +cuadro bordeado con guiones en color azul, lo cual nos +facilitará la introducción de los controles del +formulario dentro del mismo.

+

¿Cuantos contenedores hay que crear en + un formulario? Generalmente sólo uno, ya que lo habitual es que una + página web concreta tenga un único formulario. No siempre tiene + que ser así, pero es lo más común. Lo importante es tener + en cuenta que no debemos crear un nuevo contenedor para cada nuevo elemento + (botón, cuadro de texto, etc.) que vayamos a insertar en un formulario.

+
+

Con las selecciones que hemos realizado en las +imágenes que +se han mostrado, el código básico para nuestro +formulario +quedaría de la siguiente forma:

+ +

<form enctype="text/plain" method="post" +action="mailto:secret@insti.es" name="Optativas">

+ +

<br>

+ +

</form>
+ +

+ +
+ +
+Actividad 61 +
    +
  • Crea un formulario que envíe los datos que +incluiremos +posteriormente a tu dirección de correo +electrónico. +Utiliza como codificación multipart/form-data + o text/plain
    • +
  • Acude a la pestaña  para comprobar +cómo se ha construido el código.
    • +
  • Guarda el trabajo con el nombre actividad61.html
    • +
+ + + +
+ +
+ +
+
+ + diff --git a/html2005/formularios/formularios2.htm b/html2005/formularios/formularios2.htm new file mode 100644 index 0000000..541f498 --- /dev/null +++ b/html2005/formularios/formularios2.htm @@ -0,0 +1,863 @@ + + + + Formularios. Tipos de campo + + + + + + + + + + +
+

Formularios>>Tipos de campo

+ +
+
+ +
+
+ +
+ + +
+ + +

Tipos de controles

+ +

Ahora que ya tenemos el contenedor básico vamos +pues a pasar revista a +los diferentes tipos de controles con los que podremos incluir +datos en +el formulario.
+ +
+ +

+ +

Entradas de texto de una +línea

+ +

Panel de introducción de campos de formularioUtilizaremos este tipo de +controles para recoger datos tales +como +los nombres, apellidos, direcciones, teléfonos y, en +general, todos aquellos de los que podamos esperar una +extensión limitada. El principal problema lo tendremos, +precisamente, al estimar cuál debe ser la longitud adecuada +para que puedan caber los datos que introduzca el visitante, ya que tan +nombre es Ana como María de las Mercedes, y mientras el +primero tiene suficiente con tres caracteres, el segundo necesita un +total de veintiuno.

+ +

Su presentación en pantalla será de este +tipo:

+ +
+

Apellidos:

+ +
+ +

Para insertar una entrada de texto de una línea +escribiremos primero el texto que deseamos que se utilice como etiqueta +para el control y luego utilizaremos la opción insertar + formulario +campo +de +formulario, o bien la opción campo +de +formulario que aparece al desplegar el icono Formulario +de la barra de herramientas. En el panel que se presenta aparece +como primer tipo de +control el denominado texto que es el que pretendemos crear.

+ +

En este caso no pondremos ningún valor inicial.Más propiedades

+ +

Desplegando el botón Más propiedades +encontramos unas cuantas opciones, algunas de las cuales son +específicas de este tipo de control mientras que otras, como +el índice de +tabulación +que permite especificar el orden en el que se saltará de uno +a +otro control del formulario y la tecla de acceso rápido, que +permitirá acceder de forma inmediata a ese campo pulsando la +tecla Alt + la +letra indicada en este apartado. Estas opciones aparecerán +para todos los campos y sería conveniente especificarlas +para favorecer la accesibilidad.

+ +
En la versión disponible al +redactar esta +documentación existen dos cuestiones que merecen comentarse +en el tratamiento de este +tipo de controles:
+ +
    + +
  1. No se incluye el atributo type +para indicar el tipo de control del que se trata, mientras que +verás que sí se especifica en los otros controles + input. +Esto se debe a que el valor text es el que se +considera por defecto para el atributo type +de los controles input, por lo que no es +necesario incluirlo aunque puede que lo encuentres en formularios +creados con otros programas.
    2. + +
  2. No se almacena el +valor de la tecla de acceso +rápido en los campos de texto de una +línea, por lo que si se desea +especificar este atributo habrá que insertar manualmente el +código accesskey="letra"
    3. + +
+ +
+ +
+

El código que se +generará con el ejemplo que se ha mostrado en las +imágenes +será: 
+ +
+ +<input maxlength="50" +size="25" tabindex="1" accesskey="a" name="apellidos">
+ +
+ +Independientemente del tamaño en pantalla que viene fijado +por el atributo size, el atributo maxlength="n", +sirve para especificar el número máximo de +caracteres que se podrán introducir en la caja de texto.

+ +
+ +
+

Aunque habitualmente el nombre +que le damos al campo suele coincidir con el texto que ponemos a su +lado no tiene por qué ser necesariamente así. +Además, si en algún momento tienes acceso a +programas para procesar los formularios, comprobarás que una +simple variación de minúscula por +mayúscula a la hora de referirnos a los nombres de los +campos es suficiente para que no funcione.

+ +
+ +
+Actividad 62 +
    + +
  • Abre el archivo actividad61.html +y añade un campo de texto para recoger el +nombre, apellidos y dirección de quien cumplimenta +el formulario.
    • + +
  • Acude a la pestaña Código fuente +o, más cómodamente, utiliza la opción +de menú insertar +html para añadir el código necesario +para que se pueda acceder a ese campo con una tecla rápida.
    • + +
  • Puedes guardarlo con el mismo nombre, aunque si +quieres conservar la secuencia es preferible que lo llames actividad62.html +para mantener la correspondencia con la serie de actividades. Abre el +archivo en +el +navegador o en la pestaña Vista preliminar para comprobar +que funciona la tecla de acceso rápido que has especificado.
    + +
    • + +
+ +
+ +

+ +

Áreas de texto de +varias +líneas

+ +
+ +

Valores para Área de textoEstos controles se utilizan, +no sólo porque no +podamos +prever la extensión, sino, fundamentalmente, porque se trata +de campos abiertos en los que dejamos al visitante que se exprese sin +limitaciones. Para crear un control de este tipo seleccionaremos la +opción de menú insertar  formulario +área +de +texto... o elegiremos la opción área de texto del +desplegable a partir del botón de +menú.  

+ +

La apariencia que podríamos encontrar cuando +creemos +un  +sería similar a la siguiente.
+ +

+ +
+

Esperamos tus aportaciones:

+ +

+ +
+ +

En este caso, el código es el +siguiente (observa que, mientras en el campo de texto de una sola +línea no había etiqueta de cierre en +éste tipo sí que la hay)
+ +
+ +<textarea wrap="virtual" +cols="75" rows="4" tabindex="2" name="Aportaciones">
+ +</textarea>
+ +
+ +Cols y rows me +sirven para +especificar el ancho y el alto del cuadro de introducción de +texto.
+ +
+ +El campo que se ha mostrado en el ejemplo lleva otro atributo +más en la etiqueta: wrap="virtual". +Con este atributo, que especificaremos en el apartado modo de ajuste del panel de +creación del campo, se especifica la forma en la +que se irán +partiendo los renglones cuando alguien introduzca texto, aunque la +implementación del mismo en los diferentes navegadores es +dispar, ya que teóricamente este modo debería +funcionar de forma diferente al ajuste físico. Parece que lo +más prudente sería dejar este ajuste en el modo +predeterminado.

+ +
+

La especificación +de tecla de acceso rápido ya funciona correctamente desde el +panel de creación del área de texto por lo que no +necesitaremos introducir el código manualmente.

+ +
+ +
+Actividad 63 +
    + +
  • Abre el +archivo actividad62.html y +añade un área de texto para recoger las +observaciones que quiera realizar el usuario
    • + +
  • Especifica que el ajuste sea virtual.
    • + +
  • Indica una tecla de acceso rápido desde el panel +de creación del campo (en esta ocasión +sí debería almacenarse)
    • + +
  • Guárdalo como actividad63.html. +Abre el archivo en +el +navegador o en la pestaña Vista preliminar para comprobar +que funciona la tecla de acceso rápido que has especificado.
    + +
    • + +
+ +
+ +

+ +

Botones de +opción

+ +

Valores para botón de radioLos botones de +opción se utilizan para que el +usuario escoja entre dos o más opciones +excluyentes. 

+ +

Para crear un control de este tipo escribiremos el enunciado +general del tema sobre el que solicitamos la opción +y luego iremos escribiendo el texto de cada una de las opciones +ofertadas. Finalmente elegiremos la +opción de menú insertar  +formulario campo de formulario botón radial  o la misma +opción en el deslegable desde el icono Formulario +de la barra de herramientas para proceder a la creación del +control propiamente dicho. 

+ +

El resultado final sería similar a lo siguiente:

+ +
+

Horario preferido para entrevistas: Mañana: +Tarde: Indiferente:

+ +
+ +
+

El código que utilizaremos +será

+ +

<input type="radio" +name="entrevista" value="mañana">
+ +
+ + donde el tipo radio indica que se +trata de botones de +opción.

+ +

Lo importante de los botones de opción es que todos +los +pertenecientes al mismo grupo deben llevar el mismo atributo en name, +variando el correspondiente a value para diferenciar la +opción marcada. Lógicamente, para facilitar la +interpretación de los resultados recibidos, value +tendrá como valor lo mismo que hemos incluido en el +rótulo que precede a cada opción
+ +
+ +Aunque no parece una opción demasiado respetuosa con la +libertad de elección, si quisiéramos que una de +las opciones apareciera marcada +por defecto lo haríamos marcando en el panel de +creación la opción seleccionado +inicialmente que, visto en el código, +generaría un atributo complementario checked="checked" 

+ +
+ +
+Actividad 64 +
    + +
  • Abre el archivo actividad63.html + y añade una selección mediante +botones de +opción con un par de valores.
    • + +
  • Guárdalo como actividad64.html + . Abre el archivo en +el +navegador o en la pestaña Vista preliminar para comprobar +que ninguna de las opciones aparece seleccionada.
    • + +
  • Añade una tercera opción y especifica +que esté marcada inicialmente. Guarda y comprueba el +resultado.
    + +
    • + +
+ +
+ +

+ +

Casillas de +verificación

+ +


+ +

+ +

Valores para casilla de verificaciónLas casillas de +verificación se asemejan a los +botones de opción, pero permiten que se marque +más de una opción. 

+ +

Para crear un control de este tipo  seguiremos un +procedimiento idéntico al de los botones radiales, con la +única diferencia de que elegiremos  la +opción de menú insertar  +formulario campo de formulario casilla de verificación  o la misma +opción en el deslegable desde el icono Formulario +de la barra de herramientas para la creación de cada una de +las casillas. 

+ +

El resultado sería similar al siguiente: 

+ +
+

Me interesaría colaborar en :

+ +

Teatro: Cine: Deportes: +Taller de fotografía Página WEB del Centro

+ +
+ +
+

El código correspondiente es: +
+ +
+ +<input type="checkbox" +name="Teatro" value="X">
+ +
+ +Checkbox indica que se trata de casillas de +verificación. En +name iremos poniendo palabras que identifiquen +las opciones y en el +campo value pondremos el texto que queremos recibir cuando se marque la +casilla. En el ejemplo se ha puesto una X, aunque podríamos +haber puesto un Sí o cualquier otro conjunto de caracteres.

+ +
+ +
+Actividad 65 +
    + +
  • Abre el archivo actividad64.html + y añade una selección mediante +casillas de verificación con dos o tres valores +posibles sin que ninguno de ellos esté seleccionado.
    • + +
  • Guárdalo como actividad65.html. +Abre el archivo en +el +navegador o en la pestaña Vista preliminar para comprobar +que ninguna de las opciones aparece seleccionada.
    • + +
  • Añade otra opción y especifica +que esté marcada inicialmente. Guarda y comprueba el +resultado.
    + +
    • + +
+ +
+ +

AtenciónSi intentas modificar las +propiedades de una casilla de verificación o de un +botón opción haciendo doble clic sobre los mismos +o utilizando el botón derecho para acceder a sus propiedades +no lograrás lanzar el panel para hacerlo. Tendrás +que recurrir a la indicación de la etiqueta <input> +en la barra de estado y allí utilizar el botón +derecho para lanzar las propiedades +avanzadas.

+ +

Cuadros de +menú y +listas de selección

+ +

Introducción de ítems de un menú o lista +Los cuadros de menú permitirán presentar +una lista de opciones predeterminadas cuando creamos el formulario. +Tienen dos formas de presentación: los menús +desplegables y las listas. Salvo la forma de presentarlo, la +única diferencia importante entre ambos modos de +presentación es que mientras que en los menús +desplegables sólo se puede seleccionar una +opción, en las listas es posible seleccionar varias si +así lo indicamos al construir el formulario.

+ +

Para iniciar la creación utilizaremos la +opción de menú insertar  +formulario lista de opciones o su homóloga al +desplegar el listado en el el icono Formulario +de la barra de herramientas.

+ +

Especificando la altura y/o la selección múltiple

+ +

Una vez allí se añadirán los +ítems con una simple pulsación en el +botónAñadir opción, +aunque lo primero que tendremos que hacer será especificar +si se +tratará de un menú o de una lista de +selección +para lo cual tendremos que especificar la altura o bien indicar que +existe la posibilidad de realizar una opción +múltiple, ya +que en ambos casos estaríamos creando una lista, mientras +que si +no especificamos estos datos se tratará de un +menú.

+ +

El resultado, según se trate de una u otra +posibilidad será similar a lo siguiente:

+ +
+ + + + + + + + + + + + + + + + + +
+

Elige una opción de la lista + + +

+ + 		+


+ +

+ + 		+

Ahora puedes elegir varias opciones si mantienes +pulsada la tecla CTRL

+ + 		+ + +
+ +
+ +
+

El código necesario es +idéntico para ambos tipos de presentaciones e incluye el +identificador de tipo select, un nombre para el menú o lista +(puede ser el que quieras aunque en este caso se haya puesto +"selecciones". A continuación se colocan las diferentes +posibilidades de la lista encerradas entre <option> +y +</option>. Observa que, +nuevamente este tipo de campo +tiene etiquetas de cierre, tanto en las opciones como en la propia +definición del tipo. 

+ +

<select +name="continentes>

+ +

<option>África</option>
+ +<option>América</option> +
+ +<option>Asia</option>
+ +<option>Europa</option>
+ +<option>Oceanía</option>

+ +

</select>

+ +

La diferencia entre un +menú y una lista estriba en que la +lista lleva en la primera etiqueta un atributo size="n" +donde n es el número de filas que tendremos a la vista +simultáneamente. Si le añadimos al final de la +etiqueta de entrada el atributo multiple="multiple"podremos +marcar varias de las posibilidades mostradas, algo que no +podemos hacer cuando se trata de un menú. (Si no +hubiéramos especificado un tamaño para lista, +pero +sí indicamos que es posible realizar una +selección +múltiple, el tamaño pasará a ser +automáticamente el del número de ítems +de la lista)

+ +
+ +
+ +
+

En el panel de introducción de los +opciones existe la opción seleccionada +inicialmente. +Dado el diferente tratamiento que pueden realizar los diversos +navegadores respecto a las listas o menús es conveniente que +incluyas +en cada lista una opción que esté +seleccionada (normalmente con un +valor nulo o neutro) para evitar que el navegador envíe como +seleccionado el primer valor de la lista aunque no lo haya indicado el +usuario.

+ +

Si quieres modificar una lista de selección o +cuadro de menú ya creados añadiendo o eliminando +opciones solo podrás hacerlo desde la pestaña Código fuente

+ +
+ +Habrás observado que en el panel de creación de +la lista / menú existe un botón Añadir grupo. +Cuando estamos elaborando un listado cuyos ítems se pueden +agrupar en categorías (por ejemplo la confección +de un +menú en el que se pudiera elegir entre varios primeros +platos, +varios segundos y varios postres) es un recurso interesante para +organizar visualmente los datos del listado. Cuando utilizamos esta +posibilidad veremos que las opciones de cada grupo aparecen encerradas +entre las etiquetas de apertura y cierre de optgroup como puede verse +en el siguiente ejemplo que muestra un posible grupo de postres dentro +de un menú
+ +
+

...

+ +

<optgroup label="postres">

+ +

<option>fruta +</option>
+ +<option>sorbete</option>
+ +<option>flan</option>
+ +<option>tarta</option>

+ +

</optgroup>

+ +

...

+ +

 El atributo label sirve para especificar el nombre +que recibirá el grupo de opciones

+ +
+ +
+ +
+Actividad 66 +
    + +
  • Abre el +archivo actividad65.html y +añade una lista de selección basándote +en la idea +apuntada en párrafos anteriores para la +confección de un menú.
    • + +
  • Guarda el archivo como actividad66.html +y comprueba el resultado visual.
    + +
    • + +
+ +
+ +


+ +

+ +

Botones de +acción

+ +

Panel para inserter el botón de envío El último tipo de +control de uso habitual en +los formularios es el +botón que se utiliza para proceder al envío o la +eliminación de los datos. Para crear los botones accederemos +mediante la opción de menú insertar  +formulario campo de formulario botón de +envío (o +botón de restablecimiento) o su +homóloga al desplegar el listado en el iconoFormulario +de la barra de herramientas.

+ +

Si dejamos en blanco los apartados nombre del campo y valor +del campo el programa especifica únicamente el tipo y deja +que sea el navegador el que adjudique el texto que +aparecerá en el botón en cada caso. Los botones +que tienes a continuación están creados de esta +forma, por lo que el texto que estás viendo en ellos es el +que ha establecido el navegador con el que ves la página.

+ +
+ +
+

Sin embargo podemos especificar estos campos como se ve en el +siguiente ejemplo y su resultado.

+ +

<input type="submit" +name="submit" value="Enviar">
+ +<input type="reset" name="reset" value="Borrar datos">
+ +

+ +
+ +

Por comodidad lo más sencillo es hacer que los +atributos +type y name sean +coincidentes en cada uno de los casos. En el atributo +value pondremos el texto que queremos que +aparezca en el +botón.

+ +
+ +
+Actividad 67 +
    + +
  • Abre el archivo + actividad66.html +y +añade botones de envío y restablecimiento, +especificando +en el campo value el rótulo que quieres que aparezca en cada +uno +de ellos.
    • + +
  • Guarda el archivo como actividad67.html +y ábrelo en el navegador. En este +momento +podrás comprobar el funcionamiento completo del formulario +ya +que dispones de un botón de envío que +lanzará el +programa de correo con los datos que hayas introducido al cumplimentar +los diversos controles que has introducido hasta el momento. 
    • + +
  • Consulta tu buzón de correo y comprueba si te ha +llegado el mensaje y cómo lo ha hecho. +
    • + +
+ +
+ +
+ +

Añadir estructura a los formularios

+ +
+ +

En muchas ocasiones los formularios incluyen controles que +presentan +una clara relación que permitiría agruparlos +formando una categoría. Por ejemplo, podríamos +agrupar los controles para recoger nombre, apellidos, +dirección y teléfono bajo la categoría +de datos de contacto. Para hacerlo utilizaremos la opción de +menú insertar  +formulario definir conjunto de campos o su +homóloga al desplegar el listado en el iconoFormulario +de la barra de herramientas.

+ +
+
Datos de contactoNombre: +  Apellidos:  +

Dirección:  Teléfono:

+ +
+ +
+ +

Además de la facilidad de interpretación +visual que introduce este tipo de agrupamiento también tiene +importancia el agrupamiento de controles desde el punto de vista de +accesibilidad, ya que se facilita la navegación para los +agentes de usuario basados en voz que pueden reproducir correctamente +el agrupamiento.

+ +

La creación de un grupo de campos puede hacerse +tanto como +paso previo, creando primero el grupo e incluyendo posteriormente los +diferentes controles, como a posteriori, arrastrando para seleccionar +los rótulos y controles que se agruparán y +creando para +ellos el conjunto de campos.

+ +

El código que se genera con este tipo de +agrupamientos es el siguiente:

+ +
+

<fieldset>

+ +

<legend>Datos de +contacto</legend>

+ +... rótulos y controles ...
+ + +

</fieldset>
+ +Como puede verse la etiqueta que establece el agrupamiento es fieldset, +mientras que legend recoge el +rótulo con el que se identifica al mismo.

+ +
+ +
+ +
+Actividad 68 +
    + +
  • Abre el +archivo actividad67.html y +agrupa aquellos controles para los que esta técnica resulte +adecuada. Recuerda que puedes hacerlo con un conjunto de campos ya +existentes o creando primero el agrupamiento y rellenándolo +luego con los campos necesarios.
    • + +
  • Guarda el archivo como actividad68.html y +ábrelo en el navegador para +comprobar el +aspecto visual que adquiere el formulario. Puedes hacer un +envío +para ver que el conjunto de campos no tiene repercusión en +el +resultado que se envía.
    + +
    • + +
+ +
+ +
+ +
+
+ + diff --git a/html2005/formularios/formularios2b.htm b/html2005/formularios/formularios2b.htm new file mode 100644 index 0000000..c134d7b --- /dev/null +++ b/html2005/formularios/formularios2b.htm @@ -0,0 +1,906 @@ + + + + Formularios. Tipos de campo + + + + + + + + + + +

Tipos de controles

+ +

Ahora que ya tenemos el contenedor básico vamos +pues a pasar revista a +los diferentes tipos de controles con los que podremos incluir +datos en +el formulario.
+ +
+ +

+ +

Entradas de texto de una +línea

+ +

Panel de introducción de campos de formularioUtilizaremos este tipo de +controles para recoger datos tales +como +los nombres, apellidos, direcciones, teléfonos y, en +general, todos aquellos de los que podamos esperar una +extensión limitada. El principal problema lo tendremos, +precisamente, al estimar cuál debe ser la longitud adecuada +para que puedan caber los datos que introduzca el visitante, ya que tan +nombre es Ana como María de las Mercedes, y mientras el +primero tiene suficiente con tres caracteres, el segundo necesita un +total de veintiuno.

+ +

Su presentación en pantalla será de este +tipo:

+ +
+

Apellidos:

+ +
+ +

Para insertar una entrada de texto de una línea +escribiremos primero el texto que deseamos que se utilice como etiqueta +para el control y luego utilizaremos la opción insertar + formulario +campo +de +formulario, o bien la opción campo +de +formulario que aparece al desplegar el icono Formulario +de la barra de herramientas. En el panel que se presenta aparece +como primer tipo de +control el denominado texto que es el que pretendemos crear.

+ +

En este caso no pondremos ningún valor inicial.Más propiedades

+ +

Desplegando el botón Más propiedades +encontramos unas cuantas opciones, algunas de las cuales son +específicas de este tipo de control mientras que otras, como +el índice de +tabulación +que permite especificar el orden en el que se saltará de uno +a +otro control del formulario y la tecla de acceso rápido, que +permitirá acceder de forma inmediata a ese campo pulsando la +tecla Alt + la +letra indicada en este apartado, serán comunes para todos +los controles.

+ +
En la versión disponible al +redactar esta +documentación existen dos cuestiones que merecen comentarse +en el tratamiento de este +tipo de controles:
+ +
    + +
  1. No se incluye el atributo type +para indicar el tipo de control del que se trata, mientras que +verás que sí se especifica en los otros controles + input. +Esto se debe a que el valor text es el que se +considera por defecto para el atributo type +de los controles input, por lo que no es +necesario incluirlo aunque puede que lo encuentres en formularios +creados con otros programas.
    2. + +
  2. No se almacena el +valor de la tecla de acceso +rápido en los campos de texto de una +línea, por lo que si se desea +especificar este atributo habrá que insertar manualmente el +código accesskey="letra"
    3. + +
+ +
+ +
+

El código que se +generará con el ejemplo que se ha mostrado en las +imágenes +será: 
+ +
+ +<input maxlength="50" +size="25" tabindex="1" accesskey="a" name="apellidos">
+ +
+ +Independientemente del tamaño en pantalla que viene fijado +por el atributo size, el atributo maxlength="n", +sirve para especificar el número máximo de +caracteres que se podrán introducir en la caja de texto.

+ +
+ +
+

Aunque habitualmente el nombre +que le damos al campo suele coincidir con el texto que ponemos a su +lado no tiene por qué ser necesariamente así. +Además, si en algún momento tienes acceso a +programas para procesar los formularios, comprobarás que una +simple variación de minúscula por +mayúscula a la hora de referirnos a los nombres de los +campos es suficiente para que no funcione.

+ +
+ +
+

Abre el archivo practica43.html +y añade un campo de texto para recoger el +nombre, apellidos y dirección de quien cumplimenta +el formulario.

+ +

Acude a la pestaña Código fuente +o, más cómodamente, utiliza la opción +de menú insertar +html para añadir el código necesario +para que se pueda acceder a ese campo con una tecla rápida.

+ +

Guárdalo con el mismo nombre. Abre el archivo en el +navegador o en la pestaña Vista preliminar para comprobar +que funciona la tecla de acceso rápido que has especificado.
+ +

+ +
+ +

+ +

Áreas de texto de +varias +líneas

+ +
+ +

Valores para Área de textoEstos controles se utilizan, +no sólo porque no +podamos +prever la extensión, sino, fundamentalmente, porque se trata +de campos abiertos en los que dejamos al visitante que se exprese sin +limitaciones. Para crear un control de este tipo seleccionaremos la +opción de menú insertar  formulario área +de +texto... o elegiremos la opción área de texto del +desplegable a partir del botón de +menú.  

+ +

La apariencia que podríamos encontrar cuando +creemos +un  +sería similar a la siguiente.

+ +
+

Esperamos tus aportaciones:

+ +

+ +
+ +

En este caso, el código es el +siguiente (observa que, mientras en el campo de texto de una sola +línea no había etiqueta de cierre en +éste tipo sí que la hay)
+ +
+ +<textarea wrap="virtual" +cols="75" rows="4" tabindex="2" name="Aportaciones">
+ +</textarea>
+ +
+ +Cols y rows me +sirven para +especificar el ancho y el alto del cuadro de introducción de +texto.
+ +
+ +El campo que se ha mostrado en el ejemplo lleva otro atributo +más en la etiqueta: wrap="virtual". +Con este atributo, que especificaremos en el apartado modo de ajuste del panel de +creación del campo, se especifica la forma en la +que se irán +partiendo los renglones cuando alguien introduzca texto, aunque la +implementación del mismo en los diferentes navegadores es +dispar, ya que teóricamente este modo debería +funcionar de forma diferente al ajuste físico. Parece que lo +más prudente sería dejar este ajuste en el modo +predeterminado.

+ +
+

La especificación +de tecla de acceso rápido ya funciona correctamente desde el +panel de creación del área de texto por lo que no +necesitaremos introducir el código manualmente.

+ +
+ +
+

Abre el archivo practica43.html +y añade un área de texto para recoger las +observaciones que quiera realizar el usuario

+ +

Especifica que el ajuste sea virtual.

+ +

Guárdalo con el mismo nombre. Abre el archivo en el +navegador o en la pestaña Vista preliminar para comprobar +que funciona la tecla de acceso rápido que has especificado.
+ +

+ +
+ +

+ +

Botones de +opción

+ +

Valores para botón de radioLos botones de +opción se utilizan para que el +usuario escoja entre dos o más opciones +excluyentes. 

+ +

Para crear un control de este tipo escribiremos el enunciado +general del tema sobre el que solicitamos la opción +y luego iremos escribiendo el texto de cada una de las opciones +ofertadas. Finalmente elegiremos la +opción de menú insertar  +formulario campo de formulario botón radial  o la misma +opción en el deslegable desde el icono Formulario +de la barra de herramientas para proceder a la creación del +control propiamente dicho. 

+ +

El resultado final sería similar a lo siguiente:

+ +
+

Horario preferido para entrevistas: Mañana: +Tarde: Indiferente:

+ +
+ +
+

El código que utilizaremos +será

+ +

<input type="radio" +name="entrevista" value="mañana">
+ +
+ + donde el tipo radio indica que se +trata de botones de +opción.

+ +

Lo importante de los botones de opción es que todos +los +pertenecientes al mismo grupo deben llevar el mismo atributo en name, +variando el correspondiente a value para diferenciar la +opción marcada. Lógicamente, para facilitar la +interpretación de los resultados recibidos, value +tendrá como valor lo mismo que hemos incluido en el +rótulo que precede a cada opción
+ +
+ +Aunque no parece una opción demasiado respetuosa con la +libertad de elección, si quisiéramos que una de +las opciones apareciera marcada +por defecto lo haríamos marcando en el panel de +creación la opción seleccionado +inicialmente que, visto en el código, +generaría un atributo complementario checked="checked" 

+ +
+ +
+

Abre el archivo practica43.html +y añade una selección mediante botones de +opción con un par de valores.

+ +

Guárdalo con el mismo nombre. Abre el archivo en el +navegador o en la pestaña Vista preliminar para comprobar +que ninguna de las opciones aparece seleccionada.

+ +

Añade una tercera opción y especifica +que esté marcada inicialmente. Comprueba el resultado.
+ +

+ +
+ +

+ +

Casillas de +verificación

+ +


+ +

+ +

Valores para casilla de verificaciónLas casillas de +verificación se asemejan a los +botones de opción, pero permiten que se marque +más de una opción. 

+ +

Para crear un control de este tipo  seguiremos un +procedimiento idéntico al de los botones radiales, con la +única diferencia de que elegiremos  la +opción de menú insertar  +formulario campo de formulario casilla de verificación  o la misma +opción en el deslegable desde el icono Formulario +de la barra de herramientas para la creación de cada una de +las casillas. 

+ +

El resultado sería similar al siguiente: 

+ +
+

Me interesaría colaborar en :

+ +

Teatro: Cine: Deportes: +Taller de fotografía Página WEB del Centro

+ +
+ +
+

El código correspondiente es: +
+ +
+ +<input type="checkbox" +name="Teatro" value="X">
+ +
+ +Checkbox indica que se trata de casillas de +verificación. En +name iremos poniendo palabras que identifiquen +las opciones y en el +campo value pondremos el texto que queremos recibir cuando se marque la +casilla. En el ejemplo se ha puesto una X, aunque podríamos +haber puesto un Sí o cualquier otro conjunto de caracteres.

+ +
+ +


+ +

+ +

Cuadros de +menú y +listas de selección

+ +

Introducción de ítems de un menú o lista +Los cuadros de menú permitirán presentar +una lista de opciones predeterminadas cuando creamos el formulario. +Tienen dos formas de presentación: los menús +desplegables y las listas. Salvo la forma de presentarlo, la +única diferencia importante entre ambos modos de +presentación es que mientras que en los menús +desplegables sólo se puede seleccionar una +opción, en las listas es posible seleccionar varias si +así lo indicamos al construir el formulario.

+ +

Para iniciar la creación utilizaremos la +opción de menú insertar  +formulario lista de opciones o su homóloga al +desplegar el listado en el el icono Formulario +de la barra de herramientas.

+ +

Especificando la altura y/o la selección múltiple

+ +

Una vez allí se añadirán los +ítems con una simple pulsación en el +botónAñadir opción, +aunque lo primero que tendremos que hacer será especificar +si se +tratará de un menú o de una lista de +selección +para lo cual tendremos que especificar la altura o bien indicar que +existe la posibilidad de realizar una opción +múltiple, ya +que en ambos casos estaríamos creando una lista, mientras +que si +no especificamos estos datos se tratará de un +menú.

+ +

El resultado, según se trate de una u otra +posibilidad será similar a lo siguiente:

+ +
+ + + + + + + + + + + + + + + + + +
+

Elige una opción de la lista + + +

+ + 		+


+ +

+ + 		+

Ahora puedes elegir varias opciones si mantienes +pulsada la tecla CTRL

+ + 		+ + +
+ +
+ +
+

El código necesario es +idéntico para ambos tipos de presentaciones e incluye el +identificador de tipo select, un nombre para el menú o lista +(puede ser el que quieras aunque en este caso se haya puesto +"selecciones". A continuación se colocan las diferentes +posibilidades de la lista encerradas entre <option> +y +</option>. Observa que, +nuevamente este tipo de campo +tiene etiquetas de cierre, tanto en las opciones como en la propia +definición del tipo. 

+ +

<select +name="continentes>

+ +

<option>África</option>
+ +<option>América</option> +
+ +<option>Asia</option>
+ +<option>Europa</option>
+ +<option>Oceanía</option>

+ +

</select>

+ +

La diferencia entre un +menú y una lista estriba en que la +lista lleva en la primera etiqueta un atributo size="n" +donde n es el número de filas que tendremos a la vista +simultáneamente. Si le añadimos al final de la +etiqueta de entrada el atributo multiple="multiple"podremos +marcar varias de las posibilidades mostradas, algo que no +podemos hacer cuando se trata de un menú. (Si no +hubiéramos especificado un tamaño para lista, +pero +sí indicamos que es posible realizar una +selección +múltiple, el tamaño pasará a ser +automáticamente el del número de ítems +de la lista)

+ +
+ +
+ +
+

En el panel de introducción de los +opciones existe la opción seleccionada +inicialmente. +Dado el diferente tratamiento que pueden realizar los diversos +navegadores respecto a las listas o menús es conveniente que +incluyas +en cada lista una opción que esté +seleccionada (normalmente con un +valor nulo o neutro) para evitar que el navegador envíe como +seleccionado el primer valor de la lista aunque no lo haya indicado el +usuario.

+ +
+ +Habrás observado que en el panel de creación de +la lista / menú existe un botón Añadir grupo. +Cuando estamos elaborando un listado cuyos ítems se pueden +agrupar en categorías (por ejemplo la confección +de un +menú en el que se pudiera elegir entre varios primeros +platos, +varios segundos y varios postres) es un recurso interesante para +organizar visualmente los datos del listado. Cuando utilizamos esta +posibilidad veremos que las opciones de cada grupo aparecen encerradas +entre las etiquetas de apertura y cierre de optgroup como puede verse +en el siguiente ejemplo que muestra un posible grupo de postres dentro +de un menú
+ +
+

...

+ +

<optgroup label="postres">

+ +

<option>fruta +</option>
+ +<option>sorbete</option>
+ +<option>flan</option>
+ +<option>tarta</option>

+ +

</optgroup>

+ +

...

+ +

 El atributo label sirve para especificar el nombre +que recibirá el grupo de opciones

+ +
+ +
+ +
+

Abre el archivo practica43.html +y +añade una lista de selección basándote +en la idea +apuntada en párrafos anteriores de confeccionar un +menú  

+ +

Comprueba el resultado visual.
+ +

+ +
+ +


+ +

+ +

Botones de +acción

+ +

Panel para inserter el botón de envío El último tipo de +control de uso habitual en +los formularios es el +botón que se utiliza para proceder al envío o la +eliminación de los datos. Para crear los botones accederemos +mediante la opción de menú insertar  +formulario campo de formulario botón de +envío (o +botón de restablecimiento) o su +homóloga al desplegar el listado en el iconoFormulario +de la barra de herramientas.

+ +

Si dejamos en blanco los apartados nombre del campo y valor +del campo el programa especifica únicamente el tipo y deja +que sea el navegador el que adjudique el texto que +aparecerá en el botón en cada caso. Los botones +que tienes a continuación están creados de esta +forma, por lo que el texto que estás viendo en ellos es el +que ha establecido el navegador con el que ves la página.

+ +
+ +
+

Sin embargo podemos especificar estos campos como se ve en el +siguiente ejemplo y su resultado.

+ +

<input type="submit" +name="submit" value="Enviar">
+ +<input type="reset" name="reset" value="Borrar datos">
+ +

+ +
+ +

Por comodidad lo más sencillo es hacer que los +atributos +type y name sean +coincidentes en cada uno de los casos. En el atributo +value pondremos el texto que queremos que +aparezca en el +botón.

+ +
+ +
+

Abre el archivo practica43.html +y +añade botones de envío y restablecimiento, +especificando +en el campo value el rótulo que quieres que aparezca en cada +uno +de ellos.

+ +

Guarda el archivo y ábrelo en el navegador. En este +momento +podrás comprobar el funcionamiento completo del formulario +ya +que dispones de un botón de envío que +lanzará el +programa de correo con los datos que hayas introducido al cumplimentar +los diversos controles que has introducido hasta el momento. 

+ +

Consulta tu buzón de correo y comprueba si te ha +llegado el mensaje y cómo lo ha hecho. +

+ +
+ +
+ +

Añadir estructura a los formularios

+ +
+ +

En muchas ocasiones los formularios incluyen controles que +presentan +una clara relación que permitiría agruparlos +formando una categoría. Por ejemplo, podríamos +agrupar los controles para recoger nombre, apellidos, +dirección y teléfono bajo la categoría +de datos de contacto. Para hacerlo utilizaremos la opción de +menú insertar  +formulario definir conjunto de campos o su +homóloga al desplegar el listado en el iconoFormulario +de la barra de herramientas.

+ +
+
Datos de contactoNombre: + + Apellidos:  +

Dirección:  Teléfono:

+ +
+ +
+ +

Además de la facilidad de interpretación +visual que introduce este tipo de agrupamiento también tiene +importancia el agrupamiento de controles desde el punto de vista de +accesibilidad, ya que se facilita la navegación para los +agentes de usuario basados en voz que pueden reproducir correctamente +el agrupamiento.

+ +

La creación de un grupo de campos puede hacerse +tanto como +paso previo, creando primero el grupo e incluyendo posteriormente los +diferentes controles, como a posteriori, arrastrando para seleccionar +los rótulos y controles que se agruparán y +creando para +ellos el conjunto de campos.

+ +

El código que se genera con este tipo de +agrupamientos es el siguiente:

+ +
+

<fieldset>

+ +

<legend>Datos de +contacto</legend>

+ +... rótulos y controles ...
+ + +

</fieldset>
+ +Como puede verse la etiqueta que establece el agrupamiento es fieldset, +mientras que legend recoge el +rótulo con el que se identifica al mismo.

+ +
+ +
+ +
+

Abre el archivo practica43.html +y +agrupa aquellos controles para los que esta técnica resulte +adecuada. Recuerda que puedes hacerlo con un conjunto de campos ya +existentes o creando primero el agrupamiento y rellenándolo +luego con los campos necesarios.

+ +

Guarda el archivo y ábrelo en el navegador para +comprobar el +aspecto visual que adquiere el formulario. Puedes hacer un +envío +para ver que el conjunto de campos no tiene repercusión en +el +resultado que se envía.
+ +

+ +
+ +
+ +

+Ocultar la dirección de correo en los formularios

+ +

Cuando +explicamos los vínculos hicimos hincapié en la +importancia de proteger +las direcciones de correo electrónico para evitar su +localización e +incorporación a bases de datos para el envío de +spam.

+ +

Uno de los +procedimientos utilizados era el de disfrazarla incorporando un trozo +de texto y la indicación de que hay que borrarlo, pero +parece que este +procedimiento no sería adecuado en el caso de formularios. +Ello nos +obliga a recurrir a la utilización del script que ya +utilizamos para +confeccionar las direcciones de los enlaces de correo.

+ +

Su +aplicación, en este caso, se basaría en la +construcción de la etiqueta +de apertura del formulario en la que incluimos la dirección +de correo a +la que se enviarán los datos. Posiblemente la forma +más cómoda de +hacerlo sea construyendo el formulario mediante el uso de las +herramientas gráficas, ya que esto nos brinda la referencia +visual de +la zona que abarca el mismo, para finalizar sustituyendo la +etiqueta de +apertura por el código que la genera de forma +dinámica mediante +javascript.

+ +
+ +
+

La aplicación de esta técnica nos +llevaría a sustituir el código normal +que se habría generado durante la creación del +formulario con los +asistentes que nos brinda el programa:

+ +

<form +action="mailto:nombre@dominio.de.correo" method="post" +enctype="text/plain">

+ +

por el mismo código pero +generado de forma dinámica mediante un script

+ +

<script language="JavaScript">

+ +

document.write('<form +action="mail' + 'to:' + 'nombre' + '@' + 'dominio.de.correo" ' + +'method="post" enctype="text/plain">')

+ +</script>
+ +

+ +
+

La única dificultad que puede presentar esta +técnica +es la confusión entre las comillas simples y las dobles: +dado que el +código que debemos generar incluye comillas dobles +utilizamos comillas +simples para encerrar los diferentes fragmentos que se irán +concatenando para crear la etiqueta completa.

+ +

Fíjate que la parte de la dirección +correspondiente al dominio de correo la cerramos, primero +con una comilla doble que será la que se incluya al generar +la +etiqueta, luego un espacio que lo separa de lo siguiente y, por +último una comilla simple +que es la que indica que finaliza ese trozo que se tiene que +añadir a +lo anterior y a lo posterior

+ +
+ +
+

Pulsa el botón Formulario +para definir un formulario que se envíe a tu +dirección de correo electrónico.

+ +

Para no complicarte mientras haces la primera prueba puedes +completarlo con dos controles: una entrada de texto de una +línea +y un botón de envío.

+ +

Una vez finalizada la creación gráfica +pasa a la pestaña Código fuente +o utiliza la opción de menú insertar +html +y sustituye la etiqueta de apertura del formulario por el javascript +que lo genera. (Puedes minimizar el riesgo de errores copiando el +código que proponemos y sustituyendo en él los +datos de +nombre y dominio de correo por los que corresponden a tu +dirección)

+ +

Guarda el archivo como practica43b.html, +ábrelo en un navegador y ejecuta el formulario para +comprobar que se envía correctamente.
+ +

+ +
+ +

Servicios gratuitos de procesado y envío de +formularios

+ +

Como ya hemos comentado lo ideal es disponer de un programa en +el servidor que se encargue de procesar los datos de los formularios, y +realizar el almacenamiento y envío de los mismos. Si tu +servidor no te ofrece estas prestaciones puedes recurrir a algunos +proveedores que si las ofrecen de forma gratuita, aunque +tendrás que tener en cuenta que lo habitual será +que, a cambio de la gratuidad, se incluya publicidad.

+ +

En la mayoría de los casos se requiere darse de +alta para poder acceder a los servicios gratuitos, que suelen incluir +otras funcionalidades que tal vez te parezca interesante probar para +enriquecer tu web. Algunos de los sitios que puedes probar son los +siguientes:

+ +

Melodysoft: +Además de los formularios ofrece también +alojamiento de foros y libros de visitas. La gran ventaja es que toda +la información e instrucciones está en castellano.

+ +

También en castellano puedes utilizar Eminsoft que, +además de los formularios ofrece foros, contadores, libros +de visitas y encuestas.

+ +

Muy destacable por la ausencia de publicidad y de cualquier +tipo de registro es el servicio Totmail ofrecido por La +Herrería de Villagüeb con unas +clarísimas instrucciones de uso.

+ +
+ + + diff --git a/html2005/formularios/formularios3.html b/html2005/formularios/formularios3.html new file mode 100644 index 0000000..5e4e96d --- /dev/null +++ b/html2005/formularios/formularios3.html @@ -0,0 +1,153 @@ + + + + Antispam + + + + + + + + + + +
+

Formularios>>Antispam

+ +
+
+ +
+
+ +
+ + +
+ +

+Ocultar la dirección de correo en los formularios

+ +

Cuando +explicamos los vínculos hicimos hincapié en la +importancia de proteger +las direcciones de correo electrónico para evitar su +localización e +incorporación a bases de datos para el envío de +spam.

+ +

Uno de los +procedimientos utilizados era el de disfrazarla incorporando un trozo +de texto y la indicación de que hay que borrarlo, pero +parece que este +procedimiento no sería adecuado en el caso de formularios. +Ello nos +obliga a recurrir a la utilización del script que ya +utilizamos para +confeccionar las direcciones de los enlaces de correo.

+ +

Su +aplicación, en este caso, se basaría en la +construcción de la etiqueta +de apertura del formulario en la que incluimos la dirección +de correo a +la que se enviarán los datos. Posiblemente la forma +más cómoda de +hacerlo sea construyendo el formulario mediante el uso de las +herramientas gráficas, ya que esto nos brinda la referencia +visual de +la zona que abarca el mismo, para finalizar sustituyendo la +etiqueta de +apertura por el código que la genera de forma +dinámica mediante +javascript.

+ +
+ +
+

La aplicación de esta técnica nos +llevaría a sustituir el código normal +que se habría generado durante la creación del +formulario con los +asistentes que nos brinda el programa:

+ +

<form +action="mailto:nombre@dominio.de.correo" method="post" +enctype="text/plain">

+ +

por el mismo código pero +generado de forma dinámica mediante un script

+ +

<script language="JavaScript">

+ +

document.write('<form +action="mail' + 'to:' + 'nombre' + '@' + 'dominio.de.correo" ' + +'method="post" enctype="text/plain">')

+ +</script>
+ +
+

La única dificultad que puede presentar esta +técnica +es la confusión entre las comillas simples y las dobles: +dado que el +código que debemos generar incluye comillas dobles +utilizamos comillas +simples para encerrar los diferentes fragmentos que se irán +concatenando para crear la etiqueta completa.

+ +

Fíjate que la parte de la dirección +correspondiente al dominio de correo la cerramos, primero +con una comilla doble que será la que se incluya al generar +la +etiqueta, luego un espacio que lo separa de lo siguiente y, por +último una comilla simple +que es la que indica que finaliza ese trozo que se tiene que +añadir a +lo anterior y a lo posterior

+ +
+ +
+Actividad 69 +
    + +
  • Pulsa el +botón Formulario +para definir un formulario que se envíe a tu +dirección de correo electrónico.
    • + +
  • Para no complicarte mientras haces la primera prueba puedes +completarlo con dos controles: una entrada de texto de una +línea +y un botón de envío.
    • + +
  • Una vez finalizada la creación +gráfica +pasa a la pestaña Código fuente +o utiliza la opción de menú insertar +html +y sustituye la etiqueta de apertura del formulario por el javascript +que lo genera. (Puedes minimizar el riesgo de errores copiando el +código que proponemos y sustituyendo en él los +datos de +nombre y dominio de correo por los que corresponden a tu +dirección)
    • + +
  • Guarda el archivo como actividad68.html, +ábrelo en un navegador y ejecuta el formulario para +comprobar que se envía correctamente.
    + +
    • + +
+ +
+ +
+
+ + diff --git a/html2005/formularios/formularios4.html b/html2005/formularios/formularios4.html new file mode 100644 index 0000000..e65de08 --- /dev/null +++ b/html2005/formularios/formularios4.html @@ -0,0 +1,81 @@ + + + + Servicios gratuitos de procesado y envío + + + + + + + + + + +
+

Formularios>>Servicios gratuitos de procesado y envío

+ +
+
+ +
+
+ +
+ + +
+ +

Servicios gratuitos de procesado y envío de +formularios

+ +

Como ya hemos comentado lo ideal es disponer de un programa en +el servidor que se encargue de procesar los datos de los formularios, y +realizar el almacenamiento y envío de los mismos. Si tu +servidor no te ofrece estas prestaciones puedes recurrir a algunos +proveedores que si las ofrecen de forma gratuita, aunque +tendrás que tener en cuenta que lo habitual será +que, a cambio de la gratuidad, se incluya publicidad.

+ +

En la mayoría de los casos se requiere darse de +alta para poder acceder a los servicios gratuitos, que suelen incluir +otras funcionalidades que tal vez te parezca interesante probar para +enriquecer tu web. Algunos de los sitios que puedes probar son los +siguientes:

+ +

Melodysoft: +Además de los formularios ofrece también +alojamiento de foros y libros de visitas. La gran ventaja es que toda +la información e instrucciones está en castellano.

+ +

También en castellano puedes utilizar Eminsoft que, +además de los formularios ofrece foros, contadores, libros +de visitas y encuestas.

+ +
+Actividad 70 +
    +
  • Abre la página que contiene el formulario que +has realizado para enviar por correo y duplícala guardándola +como actividad70.html 
    • +
  • Selecciona uno de los servicios gratuitos y aplica las +instrucciones que te ofrecen para modificar la acción que +realizará tu formulario.
    • +
  • Guarda la página con la acción +modificada y comprueba su funcionamiento. (Es posible que alguno de los +servicios no admita la ejecución con la página en +modo local y requiera que esté alojada en un servidor en Internet)
    • +
+ + + +
+ +

+ +
+
+ + diff --git a/html2005/formularios/imagenes/aniadirgrupo.png b/html2005/formularios/imagenes/aniadirgrupo.png new file mode 100644 index 0000000..f851f91 Binary files /dev/null and b/html2005/formularios/imagenes/aniadirgrupo.png differ diff --git a/html2005/formularios/imagenes/aniadiropcion.png b/html2005/formularios/imagenes/aniadiropcion.png new file mode 100644 index 0000000..351bcac Binary files /dev/null and b/html2005/formularios/imagenes/aniadiropcion.png differ diff --git a/html2005/formularios/imagenes/areadetexto.png b/html2005/formularios/imagenes/areadetexto.png new file mode 100644 index 0000000..e7d5cd1 Binary files /dev/null and b/html2005/formularios/imagenes/areadetexto.png differ diff --git a/html2005/formularios/imagenes/aviso.png b/html2005/formularios/imagenes/aviso.png new file mode 100644 index 0000000..558cf14 Binary files /dev/null and b/html2005/formularios/imagenes/aviso.png differ diff --git a/html2005/formularios/imagenes/botonenvio.png b/html2005/formularios/imagenes/botonenvio.png new file mode 100644 index 0000000..685ed27 Binary files /dev/null and b/html2005/formularios/imagenes/botonenvio.png differ diff --git a/html2005/formularios/imagenes/botonradial.png b/html2005/formularios/imagenes/botonradial.png new file mode 100644 index 0000000..502e1e0 Binary files /dev/null and b/html2005/formularios/imagenes/botonradial.png differ diff --git a/html2005/formularios/imagenes/campotexto.png b/html2005/formularios/imagenes/campotexto.png new file mode 100644 index 0000000..2d6343a Binary files /dev/null and b/html2005/formularios/imagenes/campotexto.png differ diff --git a/html2005/formularios/imagenes/casillaverif.png b/html2005/formularios/imagenes/casillaverif.png new file mode 100644 index 0000000..d8f2fc8 Binary files /dev/null and b/html2005/formularios/imagenes/casillaverif.png differ diff --git a/html2005/formularios/imagenes/conjuntodecampos.png b/html2005/formularios/imagenes/conjuntodecampos.png new file mode 100644 index 0000000..108bda4 Binary files /dev/null and b/html2005/formularios/imagenes/conjuntodecampos.png differ diff --git a/html2005/formularios/imagenes/formulario.png b/html2005/formularios/imagenes/formulario.png new file mode 100644 index 0000000..d71e49a Binary files /dev/null and b/html2005/formularios/imagenes/formulario.png differ diff --git a/html2005/formularios/imagenes/formulario2.png b/html2005/formularios/imagenes/formulario2.png new file mode 100644 index 0000000..1b6af26 Binary files /dev/null and b/html2005/formularios/imagenes/formulario2.png differ diff --git a/html2005/formularios/imagenes/icoformulario.png b/html2005/formularios/imagenes/icoformulario.png new file mode 100644 index 0000000..ff09197 Binary files /dev/null and b/html2005/formularios/imagenes/icoformulario.png differ diff --git a/html2005/formularios/imagenes/listas1.png b/html2005/formularios/imagenes/listas1.png new file mode 100644 index 0000000..885616e Binary files /dev/null and b/html2005/formularios/imagenes/listas1.png differ diff --git a/html2005/formularios/imagenes/listas2.png b/html2005/formularios/imagenes/listas2.png new file mode 100644 index 0000000..eaab803 Binary files /dev/null and b/html2005/formularios/imagenes/listas2.png differ diff --git a/html2005/formularios/menu_formularios.htm b/html2005/formularios/menu_formularios.htm new file mode 100644 index 0000000..d2a1942 --- /dev/null +++ b/html2005/formularios/menu_formularios.htm @@ -0,0 +1,59 @@ + + + +Documento sin título + + + + + + + + + + + + + +
+ + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
El contenedor principal
 
Tipos de campo
 
Antispam
 
Servicios gratuitos
 de procesado y envío
 
+ + diff --git a/html2005/formularios/t17.htm b/html2005/formularios/t17.htm new file mode 100644 index 0000000..bad0202 --- /dev/null +++ b/html2005/formularios/t17.htm @@ -0,0 +1,26 @@ + + + + + Untitled + + + + + + + + + + +

+ +

+ + + + + + diff --git a/html2005/formularios/t18.htm b/html2005/formularios/t18.htm new file mode 100644 index 0000000..6cc4758 --- /dev/null +++ b/html2005/formularios/t18.htm @@ -0,0 +1,26 @@ + + + + + Untitled + + + + + + + + + + +

+ +

+ + + + + + diff --git a/html2005/frames/frame_multimedia.htm b/html2005/frames/frame_multimedia.htm new file mode 100644 index 0000000..55c6d02 --- /dev/null +++ b/html2005/frames/frame_multimedia.htm @@ -0,0 +1,17 @@ + + + +Dibujo vectorial con DRAW + + + + + + + + + + +<body> +</body> + diff --git a/html2005/gimp/Thumbs.db b/html2005/gimp/Thumbs.db new file mode 100644 index 0000000..24a53ba Binary files /dev/null and b/html2005/gimp/Thumbs.db differ diff --git a/html2005/gimp/abririmagen.png b/html2005/gimp/abririmagen.png new file mode 100644 index 0000000..960dbb6 Binary files /dev/null and b/html2005/gimp/abririmagen.png differ diff --git a/html2005/gimp/botoncentro.png b/html2005/gimp/botoncentro.png new file mode 100644 index 0000000..67a99ab Binary files /dev/null and b/html2005/gimp/botoncentro.png differ diff --git a/html2005/gimp/cambiotamanio.png b/html2005/gimp/cambiotamanio.png new file mode 100644 index 0000000..e8125ef Binary files /dev/null and b/html2005/gimp/cambiotamanio.png differ diff --git a/html2005/gimp/convertiraindexada.png b/html2005/gimp/convertiraindexada.png new file mode 100644 index 0000000..64a90b0 Binary files /dev/null and b/html2005/gimp/convertiraindexada.png differ diff --git a/html2005/gimp/crearimagenfantasma.png b/html2005/gimp/crearimagenfantasma.png new file mode 100644 index 0000000..df03e91 Binary files /dev/null and b/html2005/gimp/crearimagenfantasma.png differ diff --git a/html2005/gimp/desenlazados.png b/html2005/gimp/desenlazados.png new file mode 100644 index 0000000..2d4f119 Binary files /dev/null and b/html2005/gimp/desenlazados.png differ diff --git a/html2005/gimp/enlazados.png b/html2005/gimp/enlazados.png new file mode 100644 index 0000000..d918717 Binary files /dev/null and b/html2005/gimp/enlazados.png differ diff --git a/html2005/gimp/enlazados2.png b/html2005/gimp/enlazados2.png new file mode 100644 index 0000000..84bf211 Binary files /dev/null and b/html2005/gimp/enlazados2.png differ diff --git a/html2005/gimp/gilbert.png b/html2005/gimp/gilbert.png new file mode 100644 index 0000000..21db59a Binary files /dev/null and b/html2005/gimp/gilbert.png differ diff --git a/html2005/gimp/icorecortar.png b/html2005/gimp/icorecortar.png new file mode 100644 index 0000000..b26c5b4 Binary files /dev/null and b/html2005/gimp/icorecortar.png differ diff --git a/html2005/gimp/icorotar.png b/html2005/gimp/icorotar.png new file mode 100644 index 0000000..6e8a8b8 Binary files /dev/null and b/html2005/gimp/icorotar.png differ diff --git a/html2005/gimp/icoseleccion.png b/html2005/gimp/icoseleccion.png new file mode 100644 index 0000000..dbbaf84 Binary files /dev/null and b/html2005/gimp/icoseleccion.png differ diff --git a/html2005/gimp/icotexto.png b/html2005/gimp/icotexto.png new file mode 100644 index 0000000..b1639cf Binary files /dev/null and b/html2005/gimp/icotexto.png differ diff --git a/html2005/gimp/instalaciondeusuario.png b/html2005/gimp/instalaciondeusuario.png new file mode 100644 index 0000000..32c1043 Binary files /dev/null and b/html2005/gimp/instalaciondeusuario.png differ diff --git a/html2005/gimp/logogimp.png b/html2005/gimp/logogimp.png new file mode 100644 index 0000000..446d9eb Binary files /dev/null and b/html2005/gimp/logogimp.png differ diff --git a/html2005/gimp/mapa1.png b/html2005/gimp/mapa1.png new file mode 100644 index 0000000..3783538 Binary files /dev/null and b/html2005/gimp/mapa1.png differ diff --git a/html2005/gimp/mapa1b.png b/html2005/gimp/mapa1b.png new file mode 100644 index 0000000..47c36d7 Binary files /dev/null and b/html2005/gimp/mapa1b.png differ diff --git a/html2005/gimp/mapa2.png b/html2005/gimp/mapa2.png new file mode 100644 index 0000000..06cb962 Binary files /dev/null and b/html2005/gimp/mapa2.png differ diff --git a/html2005/gimp/mapa3.png b/html2005/gimp/mapa3.png new file mode 100644 index 0000000..8271544 Binary files /dev/null and b/html2005/gimp/mapa3.png differ diff --git a/html2005/gimp/modificarlienzo.png b/html2005/gimp/modificarlienzo.png new file mode 100644 index 0000000..2f96644 Binary files /dev/null and b/html2005/gimp/modificarlienzo.png differ diff --git a/html2005/gimp/mover.png b/html2005/gimp/mover.png new file mode 100644 index 0000000..07c2f78 Binary files /dev/null and b/html2005/gimp/mover.png differ diff --git a/html2005/gimp/preview.png b/html2005/gimp/preview.png new file mode 100644 index 0000000..c9ab8fc Binary files /dev/null and b/html2005/gimp/preview.png differ diff --git a/html2005/gimp/recortando.png b/html2005/gimp/recortando.png new file mode 100644 index 0000000..e8c3115 Binary files /dev/null and b/html2005/gimp/recortando.png differ diff --git a/html2005/gimp/redimensionar.png b/html2005/gimp/redimensionar.png new file mode 100644 index 0000000..d32a132 Binary files /dev/null and b/html2005/gimp/redimensionar.png differ diff --git a/html2005/gimp/rotando.png b/html2005/gimp/rotando.png new file mode 100644 index 0000000..a2d4255 Binary files /dev/null and b/html2005/gimp/rotando.png differ diff --git a/html2005/gimp/rotulo1.png b/html2005/gimp/rotulo1.png new file mode 100644 index 0000000..93a1a5f Binary files /dev/null and b/html2005/gimp/rotulo1.png differ diff --git a/html2005/gimp/rotulo2.png b/html2005/gimp/rotulo2.png new file mode 100644 index 0000000..a2fab84 Binary files /dev/null and b/html2005/gimp/rotulo2.png differ diff --git a/html2005/gimp/rotulo2b.png b/html2005/gimp/rotulo2b.png new file mode 100644 index 0000000..802d1a1 Binary files /dev/null and b/html2005/gimp/rotulo2b.png differ diff --git a/html2005/gimp/rotulo3.png b/html2005/gimp/rotulo3.png new file mode 100644 index 0000000..764f387 Binary files /dev/null and b/html2005/gimp/rotulo3.png differ diff --git a/html2005/gimp/rotulo3b.png b/html2005/gimp/rotulo3b.png new file mode 100644 index 0000000..92b62da Binary files /dev/null and b/html2005/gimp/rotulo3b.png differ diff --git a/html2005/gimp/rotulo4.png b/html2005/gimp/rotulo4.png new file mode 100644 index 0000000..f0f0a9f Binary files /dev/null and b/html2005/gimp/rotulo4.png differ diff --git a/html2005/gimp/rotulo4b.png b/html2005/gimp/rotulo4b.png new file mode 100644 index 0000000..4eb6bcd Binary files /dev/null and b/html2005/gimp/rotulo4b.png differ diff --git a/html2005/gimp/rotulo5.png b/html2005/gimp/rotulo5.png new file mode 100644 index 0000000..b82266f Binary files /dev/null and b/html2005/gimp/rotulo5.png differ diff --git a/html2005/gimp/rotulo5b.png b/html2005/gimp/rotulo5b.png new file mode 100644 index 0000000..ee10ef1 Binary files /dev/null and b/html2005/gimp/rotulo5b.png differ diff --git a/html2005/gimp/rotulo6.png b/html2005/gimp/rotulo6.png new file mode 100644 index 0000000..46deba4 Binary files /dev/null and b/html2005/gimp/rotulo6.png differ diff --git a/html2005/gimp/rotulo6b.png b/html2005/gimp/rotulo6b.png new file mode 100644 index 0000000..f9f681b Binary files /dev/null and b/html2005/gimp/rotulo6b.png differ diff --git a/html2005/gimp/rotulo7.png b/html2005/gimp/rotulo7.png new file mode 100644 index 0000000..3f31cd4 Binary files /dev/null and b/html2005/gimp/rotulo7.png differ diff --git a/html2005/gimp/rotulo7b.png b/html2005/gimp/rotulo7b.png new file mode 100644 index 0000000..4ff7dba Binary files /dev/null and b/html2005/gimp/rotulo7b.png differ diff --git a/html2005/gimp/rotulo8.png b/html2005/gimp/rotulo8.png new file mode 100644 index 0000000..cc54568 Binary files /dev/null and b/html2005/gimp/rotulo8.png differ diff --git a/html2005/gimp/rotulo8b.png b/html2005/gimp/rotulo8b.png new file mode 100644 index 0000000..dac5621 Binary files /dev/null and b/html2005/gimp/rotulo8b.png differ diff --git a/html2005/gimp/rotulo8vert.png b/html2005/gimp/rotulo8vert.png new file mode 100644 index 0000000..ed5fca9 Binary files /dev/null and b/html2005/gimp/rotulo8vert.png differ diff --git a/html2005/gimp/sinvistaprevia.png b/html2005/gimp/sinvistaprevia.png new file mode 100644 index 0000000..a6ce95f Binary files /dev/null and b/html2005/gimp/sinvistaprevia.png differ diff --git a/html2005/gimp/usarpaletabn.png b/html2005/gimp/usarpaletabn.png new file mode 100644 index 0000000..a2d2957 Binary files /dev/null and b/html2005/gimp/usarpaletabn.png differ diff --git a/html2005/guia.html b/html2005/guia.html new file mode 100644 index 0000000..28387e8 --- /dev/null +++ b/html2005/guia.html @@ -0,0 +1,87 @@ + + + + + Guía del curso + + + + + + +
+

Guía del alumno

+ +
+
+

A continuación encontrarás un conjunto de páginas WEB + en las que se ha pretendido combinar la teoría necesaria con + el máximo posible de práctica, de forma que se genere un proceso + de experimentación que te permita un aprendizaje autónomo.

+

Los objetivos que se plantean son: 

+
    +
  • Que conozcas la estructura básica de un documento HTML. 
    • +
  • Que aprendas a construir una página HTML utilizando los recursos + elementales y algunos de nivel intermedio. 
    • +
  • Que adquieras las bases necesarias para poder continuar de forma autónoma + el aprendizaje sobre elementos avanzados de lenguaje HTML. 
    • +
+

El presente curso, aunque puede ser utilizado como herramienta autoformativa + con propósito general, está concebido para el profesorado, por lo que los objetivos + planteados se apoyan en un tema central de trabajo: construir + y publicar un sitio WEB de contenido educativo compuesto de varias páginas + con sus correspondientes enlaces. Los recursos para llevar a cabo esta tarea + los iremos trabajando paso a paso, pero deberías tenerla presente + desde el momento de iniciar el curso.

+

Los materiales que encontrarás recogen una serie de explicaciones + sobre los diferentes elementos que constituyen las páginas WEB y un + conjunto de ejercicios intercalados para ir practicando los conceptos explicados. + Dispones de un total de 103 actividades guiadas, que te permitirán practicar + los conceptos y técnicas abordadas en la parte más descriptiva + del curso.

+

La navegación por los contenidos del curso puede hacerse siguiendo + una secuencia lineal, igual que si se fueran pasando una a una las páginas + de un manual o bien de forma no secuencial para lo que se utilizará el + menú que tendrás presente de forma constante en la zona izquierda + de la pantalla. Puedes plantearte una división de los contenidos en + dos fases:

+
    +
  • Una fase de de iniciación te permitirá tomar contacto con + los elementos básicos del lenguaje HTML para crear las primeras páginas. + Incluye los contenidos correspondientes a los apartados Introducción, + La base, Tablas, Multimedia (Imágenes), Vínculos, Validación + y Publicación.
    • +
  • Para adquirir una visión más completa se añadirían + el resto de los módulos: Multimedia (Sonidos), Formularios, Plantillas, + Marcos, XHTML, Accesibilidad y, especialmente, Estilos.
    • +
+

La sección de Recursos te brinda una selección de técnicas, + herramientas y enlaces a algunas páginas + desde las cuales puedes encontrar fuentes con las que completar + y enriquecer tu aprendizaje.

+

Las herramientas utilizadas para el curso son, en todos los + casos bajo licencia GPL o de tipo freeware. En los casos de herramientas de + código abierto tendrás en la carpeta de programas del CD las versiones disponibles + en el momento de elaborar esta documentación, aunque siempre podrás consultar + los sitios originales para comprobar si existe alguna actualización.

+

En los casos en los que no existe una autorización para la distribución dispones + del enlace a las páginas de descarga para poder obtener los programas.

+

Aunque no son demasiados se incluyen en la documentación algunos enlaces a + sitios web. Aunque se trata de sitios muy estables cabe la posibilidad de que, + en un futuro, pudieran haber modificado la dirección de acceso o, en el peor + de los casos, desaparecido. Aunque estas situaciones, especialmente la segunda, + son poco probables tendrías entonces que recurrir a una búsqueda en la web + para localizar la nueva ubicación.

+

El programa básico para el desarrollo de las páginas será N|VU. A pesar de + disponer de gran cantidad de funcionalidades y ser bastante estable también + sufre de algunos problemas que se han podido documentar en base a la experiencia + de otros usuarios o la propia durante el desarrollo del curso, por lo que es + conveniente que, si te encuentras con alguna situación anómala intentes + localizarla en la sección de errores para ver cuál + es la posible solución.

+
+ + diff --git a/html2005/ie7/7283af73 b/html2005/ie7/7283af73 new file mode 100644 index 0000000..9d15de6 --- /dev/null +++ b/html2005/ie7/7283af73 @@ -0,0 +1,58 @@ +/* + IE7, version 0.8 (alpha) (2005/05/23) + Copyright: 2004-2005, Dean Edwards (http://dean.edwards.name/) + License: http://creativecommons.org/licenses/LGPL/2.1/ +*/ +IE7.addModule("ie7-dhtml", function() { + +/* --------------------------------------------------------------------- + This module is still in development and should not be used. +--------------------------------------------------------------------- */ + + +ie7CSS.specialize("recalc", function() { + this.inherit(); + for (var i = 0; i < this.recalcs.length; i++) { + var $recalc = this.recalcs[i]; + for (var j = 0; i < $recalc[3].length; i++) { + _addPropertyChangeHandler($recalc[3][j], _getPropertyName($recalc[2]), $recalc[1]); + } + } +}); + +// constants +var _PATTERNS = { + width: "(width|paddingLeft|paddingRight|borderLeftWidth|borderRightWidth|borderLeftStyle|borderRightStyle)", + height: "(height|paddingTop|paddingBottom|borderTopHeight|borderBottomHeight|borderTopStyle|borderBottomStyle)" +}; +var _PROPERTY_NAMES = { + width: "fixedWidth", + height: "fixedHeight", + right: "width", + bottom: "height" +}; +var _DASH_LETTER = /-(\w)/g; +var _PROPERTY_NAME = /\w+/; + +function _addPropertyChangeHandler($element, $propertyName, $fix) { + addEventHandler($element, "onpropertychange", function() { + if (_getPattern($propertyName).test(event.propertyName)) { + _reset($element, $propertyName); + $fix($element); + } + }); +}; +function _upper($match, $letter) {return $letter.toUpperCase()}; +function _getPropertyName($pattern) { + return String(String($pattern).toLowerCase().replace(_DASH_LETTER, _upper).match(_PROPERTY_NAME)); +}; +function _getPattern($propertyName) { + return eval("/^style." + (_PATTERNS[$propertyName] || $propertyName) + "$/"); +}; +function _reset($element, $propertyName) { + $element.runtimeStyle[$propertyName] = ""; + $propertyName = _PROPERTY_NAMES[$propertyName] + if ($propertyName) $element.runtimeStyle[$propertyName] = ""; +}; + +}); diff --git a/html2005/ie7/README.txt b/html2005/ie7/README.txt new file mode 100644 index 0000000..647c8ea --- /dev/null +++ b/html2005/ie7/README.txt @@ -0,0 +1,34 @@ +Installation +------------ + +Follow these simple instructions to get IE7 working immediately on your server: + + * download the latest IE7 ZIP file (https://sourceforge.net/project/showfiles.php?group_id=109983&package_id=119707) + + * extract the contents to a directory on your server (keep the folder names used in the ZIP) + + * you will now have an IE7 directory on your server + + * include the IE7 JavaScript library in the page you wish to test + + + + + * make sure this also points to the same directory + + * open the page in your web browser + + * the page should now be IE7 enabled. + + * if you are using the PNG solution then be aware that it operates on files + names "something-trans.png" + + * see this page for more configuration and usage options: + http://dean.edwards.name/IE7/usage/ + +You may extract the contents of the ZIP file to your hard disk if you do not have access to a web server. + + +Enjoy ;-) + +Dean Edwards, 23rd May 2005 diff --git a/html2005/ie7/Thumbs.db b/html2005/ie7/Thumbs.db new file mode 100644 index 0000000..4653cbf Binary files /dev/null and b/html2005/ie7/Thumbs.db differ diff --git a/html2005/ie7/blank.gif b/html2005/ie7/blank.gif new file mode 100644 index 0000000..a4fe2e6 Binary files /dev/null and b/html2005/ie7/blank.gif differ diff --git a/html2005/ie7/ie7-base64.php b/html2005/ie7/ie7-base64.php new file mode 100644 index 0000000..099b312 --- /dev/null +++ b/html2005/ie7/ie7-base64.php @@ -0,0 +1,7 @@ + \ No newline at end of file diff --git a/html2005/ie7/ie7-content.htc b/html2005/ie7/ie7-content.htc new file mode 100644 index 0000000..bc56f79 --- /dev/null +++ b/html2005/ie7/ie7-content.htc @@ -0,0 +1,14 @@ + + + + + + + + + + diff --git a/html2005/ie7/ie7-core.js b/html2005/ie7/ie7-core.js new file mode 100644 index 0000000..bb0b5ab --- /dev/null +++ b/html2005/ie7/ie7-core.js @@ -0,0 +1,6 @@ +/* + IE7, version 0.9 (alpha) (2005-08-19) + Copyright: 2004-2005, Dean Edwards (http://dean.edwards.name/) + License: http://creativecommons.org/licenses/LGPL/2.1/ +*/ +eval(function(p,a,c,k,e,d){e=function(c){return(c35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d[e(c)]=k[c]||e(c);k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('x(!1M.1j)z 6(){1l{1M.1j=8;4 1W=8.2m=z 26;8.O=6(){7"1j 2q 0.9 (5G)"};4 36=/36/.B(42.41.40);4 1G=(36)?6(m){1M.1G(1j+"\\n\\n"+m)}:1W;4 2t=5F.2t.1g(/5E (\\d\\.\\d)/)[1];4 2z=K.5D!="5C";x(/5B/.B(42.41.40)||2t<5||!/^5A/.B(K.1J.2A))7;4 1H=K.39=="1H";4 1t,5z;4 1J=K.1J,2s,3X,17=K.17;4 5y="!";4 22={};4 1u=1C;1j.2m=6(n,s){x(!22[n]){x(1u)1k("s="+2o(s));22[n]=z s()}};4 R=/^[\\w\\.]+[^:]*$/;6 1I(h,p){x(R.B(h))h=(p||"")+h;7 h};6 2e(h,p){h=1I(h,p);7 h.1d(0,h.3n("/")+1)};4 s=K.3Z[K.3Z.y-1];1l{1k(s.3z)}1i(i){}4 1R=2e(s.5x);4 1F;1l{4 l=(5w()>=5)?"5v":"5u";1F=z 5t(l+".5s")}1i(i){}4 2w={};6 2y(h,p){1l{h=1I(h,p);x(!2w[h]){1F.5r("5q",h,1C);1F.5p();x(1F.3Y==0||1F.3Y==5o){2w[h]=1F.5n}}}1i(i){1G("2x [1]: 30 5m 5l "+h)}37{7 2w[h]||""}};4 5k=1I("5j.5i",1R);6 1E(V){x(V!=1L){V.2v=13.16.2v;V.12=13.16.12}7 V};1E.12=6(p,c){x(!p)p={};x(!c)c=p.J;x(c=={}.J)c=z 26("8.2v()");c.Y=z 26("7 8");c.Y.16=z 8.Y;c.Y.16.12(p);c.16=z c.Y;c.Y.16.J=c.16.J=c;c.1r=8;c.12=F.32;c.2u=8.2u;7 c};1E.Y=z 26("7 8");1E.Y.16={J:1E,2v:6(){7 F.32.5h.1r.2k(8,F)},12:6(V){x(8==8.J.16&&8.J.12){7 8.J.Y.16.12(V)}D(4 i 5g V){2K(i){1o"J":1o"O":1o"Y":2X}x(2V V[i]=="6"&&V[i]!=8[i]){V[i].1r=8[i]}8[i]=V[i]}x(V.O!=8.O&&V.O!={}.O){V.O.1r=8.O;8.O=V.O}7 8}};6 13(){};8.13=1E.12({J:13,O:6(){7"[5f "+(8.J.2Z||"5e")+"]"},5d:6(1h){7 8.J==1h||1h.2u(8.J)}});13.2Z="13";13.1r=1L;13.2u=6(1h){1f(1h&&1h.1r!=8)1h=1h.1r;7 3J(1h)};13.Y.1r=1E;2a 8.13;4 3A=13.12({J:6(){8.5c=[];8.1p=[]},1s:1W});x(2t<5.5)1k(2y("Z-5b.3a",1R));4 35=1C;1j.1s=6(){1l{x(35)7;35=1H=1c;2s=K.2s;3X=(2z)?2s:1J;x(1K&&1t)1t.2k();15.2k();1n();1G("1u 5a")}1i(e){1G("2x [2]: "+e.38)}};4 1p=[];6 2C(r){1p.11(r)};6 1n(){H.3P();x(1K&&1t)1t.1n();15.1n();D(4 i=0;i<1p.y;i++)1p[i]()};6 23(){4 E=0,R=1,L=2;4 G=/\\(/g,S=/\\$\\d/,I=/^\\$\\d+$/,T=/([\'"])\\1\\+(.*)\\+\\1\\1$/,3Q=/\\\\./g,Q=/\'/,3W=/\\25[^\\25]*\\25/g;4 1X=8;8.18=6(e,r){x(!r)r="";4 l=(34(2o(e)).1g(G)||"").y+1;x(S.B(r)){x(I.B(r)){r=3e(r.1d(1))-1}1b{4 i=l;4 q=Q.B(34(r))?\'"\':"\'";1f(i)r=r.2S("$"+i--).2p(q+"+a[o+"+i+"]+"+q);r=z 26("a,o","7"+q+r.19(T,"$1")+q)}}3V(e||"/^$/",r,l)};8.1U=6(s){24.y=0;7 3R(3S(s,8.2r).19(z 1Z(1D,8.33?"2I":"g"),3T),8.2r).19(3W,"")};8.59=6(){1D.y=0};4 24=[];4 1D=[];4 3U=6(){7"("+2o(8[E]).1d(1,-1)+")"};1D.O=6(){7 8.2p("|")};6 3V(){F.O=3U;1D[1D.y]=F}6 3T(){x(!F[0])7"";4 i=1,j=0,p;1f(p=1D[j++]){x(F[i]){4 r=p[R];2K(2V r){1o"6":7 r(F,i);1o"58":7 F[r+i]}4 d=(F[i].57(1X.2r)==-1)?"":"\\25"+F[i]+"\\25";7 d+r}1b i+=p[L]}};6 3S(s,e){7 e?s.19(z 1Z("\\\\"+e+"(.)","g"),6(m,c){24[24.y]=c;7 e}):s};6 3R(s,e){4 i=0;7 e?s.19(z 1Z("\\\\"+e,"g"),6(){7 e+(24[i++]||"")}):s};6 34(s){7 s.19(3Q,"")}};23.16={J:23,33:1C,2r:""};13.12(23.16);4 1V=23.12({33:1c});4 H=6(){4 2q="2.0.2";4 C=/\\s*,\\s*/;4 H=6(s,14){1l{4 m=[];4 u=F.32.2Q&&!14;4 b=(14)?(14.J==3G)?14:[14]:[K];4 31=3D(s).2S(C),i;D(i=0;i<31.y;i++){s=2R(31[i]);x(3K&&s.1d(0,3).2p("")==" *#"){s=s.1d(2);14=3H([],b,s[1])}1b 14=b;4 j=0,t,f,a,c="";1f(j+~]/;4 3E=/[\\s#.:>+~()@]|[^\\s#.:>+~()@]+/g;6 2R(s){x(S.B(s))s=" "+s;7 s.1g(3E)||[]};4 W=/\\s*([\\s>+~(),]|^|$)\\s*/g;4 I=/([\\s>+~,]|[^(]\\+|^)([#.:@])/g;4 3D=6(s){7 s.19(W,"$1").19(I,"$1*$2")};4 1y={O:6(){7"\'"},1g:/^(\'[^\']*\')|("[^"]*")$/,B:6(s){7 8.1g.B(s)},18:6(s){7 8.B(s)?s:8+s+8},3C:6(s){7 8.B(s)?s.1d(1,-1):s}};4 1N=6(t){7 1y.3C(t)};4 E=/([\\/()[\\]?{}|*+-])/g;6 4O(s){7 s.19(E,"\\\\$1")};1u=1c;7 H}();H.2Q=1c;H.2m("Z",6(){1q=6(e){7(e&&e.3B==1&&e.2P!="!"&&!e.3d)?e:1L}});H.Y("1N=F[1]",3k);4 1K=!H.Y("2O(F[1])",1J);4 2h=":21{Z-21:21}:2N{Z-21:2N}"+(1K?"":"*{4N:0}");4 15=z(3A.12({2F:z 1V,1O:"",1w:"",2L:[],1s:6(){8.2M();8.2g()},2g:6(){15.1Y.X=2h+8.1O+8.1w},3y:6(){4 20=K.2l("1e"),s;D(4 i=20.y-1;(s=20[i]);i--){x(!s.2H&&!s.Z){8.2L.11(s.3z)}}},2k:6(){8.3y();8.2g();z 28("1O");8.3u()},3w:6(e,r){8.2F.18(e,r)},1n:6(){4 R=/3v\\d+/g;4 s=2h.1g(/[{,]/g).y;4 20=s+(8.1O.X.1g(/\\{/g)||"").y;4 3x=8.1Y.4M,r;4 2j,c,2i,e,i,j,k,1a;D(i=s;i<20;i++){r=3x[i];x(r&&(2j=r.1e.X.1g(R))){2i=H(r.4L);x(2i.y)D(j=0;j<2j.y;j++){1a=2j[j];c=15.1p[1a.1d(10)][2];D(k=0;(e=2i[k]);k++){x(e.1v[1a])c(e)}}}}},2C:6(p,t,h,r){t=z 1Z("([{;\\\\s])"+p+"\\\\s*:\\\\s*"+t+"[^;}]*");4 i=8.1p.y;x(r)r=p+":"+r;8.3w(t,6(m,o){7(r?m[o+1]+r:m[o])+";Z-"+m[o].1d(1)+";3v"+i+":1"});8.1p.11(F);7 i},1N:6(s){7 s.X||""},2M:6(){x(1H||!1K)K.2M();1b K.4K("<1e Z=1c>");8.1Y=17[17.y-1];8.1Y.Z=1c;8.1Y.X=2h},3u:6(){D(4 i=0;i<17.y;i++){x(!17[i].Z&&17[i].X){17[i].X=""}}}}));6 28(m){8.1z=m;8.1S();15[m]=8;15.2g()};13.12({J:28,O:6(){7"@1z "+8.1z+"{"+8.X+"}"},1n:1W,1S:6(){8.X="";8.1N();8.3m();8.X=3j(8.X);f={}},1N:6(){4 3r=[].3t(15.2L);4 M=/@1z\\s+([^{]*)\\{([^@]+\\})\\s*\\}/2I;4 A=/\\4J\\b|^$/i,S=/\\4I\\b/i,P=/\\4H\\b/i;6 3q(c,m){2f.v=m;7 c.19(M,2f)};6 2f(4G,m,c){m=2J(m);2K(m){1o"1O":1o"1w":x(m!=2f.v)7"";1o"1A":7 c}7""};6 2J(m){x(A.B(m))7"1A";1b x(S.B(m))7(P.B(m))?"1A":"1O";1b x(P.B(m))7"1w"};4 1X=8;6 2G(s,p,m,l){4 c="";x(!l){m=2J(s.1z);l=0}x(m=="1A"||m==1X.1z){x(l<3){D(4 i=0;i/);4 2c=z 1V;2c.18(/\\\\\'/,"\\\\4C");2c.18(/\\\\"/,"\\\\4B");4 2D=z 1V;2D.18(/\'(\\d+)\'/,3i);6 3j(c){7 2D.1U(c)};6 3i(m,o){7 2b[m[o+1]]};4 2B=[];6 4A(h){2C(h);1Q(1M,"4z",h)};6 1Q(e,t,h){e.4y(t,h);2B.11(F)};6 3g(e,t,h){1l{e.4x(t,h)}1i(i){}};1Q(1M,"4w",6(){4 h;1f(h=2B.3h()){3g(h[0],h[1],h[2])}});6 4v(h,e,c){x(!h.29)h.29={};x(c)h.29[e.2A]=e;1b 2a h.29[e.2A];7 c};1Q(1M,"4u",6(){x(!15.1w)z 28("1w");15.1w.1n()});4 3f=/^\\d+(4t)?$/i;4 4s=/^\\d+%$/;4 4r=6(e,v){x(3f.B(v))7 3e(v);4 s=e.1e.1m;4 r=e.1T.1m;e.1T.1m=e.1v.1m;e.1e.1m=v||0;v=e.1e.4q;e.1e.1m=s;e.1T.1m=r;7 v};6 4p(t){4 e=K.4o(t||"4n");e.1e.X="3c:4m;4l:0;4k:4j;4i:4h;4g:4f(0 0 0 0);1m:-4e";e.3d=1c;7 e};4 27="Z-";6 4d(e){7 e.1v["Z-3c"]=="4c"};6 4b(e,p){7 e.1v[27+p]||e.1v[p]};6 4a(e,p,v){x(e.1v[27+p]==1L){e.1T[27+p]=e.1v[p]}e.1T[p]=v};6 49(o,c,u){4 t=48(6(){1l{x(!o.1S)7;o.1S(o,c,u);3b(t)}1i(i){3b(t)}},10)};1u=1c;x(2z)1k(2y("Z-47.3a",1R));15.1s();x(1K&&1t)1t.1s();x(1H)1j.1s();1b{1J.46(1I("Z-1S.45",1R));1Q(K,"44",6(){x(K.39=="1H")43(1j.1s,0)})}}1i(e){1G("2x [0]: "+e.38)}37{}};',62,353,'||||var||function|return|this|||||||||||||||||||||||||if|length|new||test||for||arguments||cssQuery||constructor|document||||toString|||||||that||cssText|valueOf|ie7||push|specialize|Common|fr|ie7CSS|prototype|styleSheets|add|replace|id|else|true|slice|style|while|match|klass|catch|IE7|eval|try|left|recalc|case|recalcs|thisElement|ancestor|init|ie7HTML|loaded|currentStyle|print|encoder|Quote|media|all|selectors|false|_0|ICommon|httpRequest|alert|complete|makePath|documentElement|isHTML|null|window|getText|screen|cache|addEventHandler|path|load|runtimeStyle|exec|Parser|DUMMY|self|styleSheet|RegExp|st|link|modules|ParseMaster|_1|x01|Function|_2|StyleSheet|elements|delete|_3|safeString|href|getPath|_4|refresh|HEADER|el|ca|apply|getElementsByTagName|addModule|pseudoClasses|String|join|version|escapeChar|body|appVersion|ancestorOf|inherit|_5|Error|loadFile|quirksMode|uniqueID|_6|addRecalc|decoder|_7|parser|_8|disabled|gi|_9|switch|styles|createStyleSheet|visited|isXML|tagName|caching|_10|split|compareNamespace|getDocument|typeof|nextElementSibling|continue|links|className|error|se|callee|ignoreCase|_11|_12|ie7_debug|finally|description|readyState|js|clearInterval|position|ie7_anon|parseInt|PIXEL|removeEventHandler|pop|_13|decode|getString|_14|parse|lastIndexOf|_15|_16|_17|_18|imports|concat|trash|ie7_recalc|addFix|ru|getInlineStyles|innerHTML|Fix|nodeType|remove|parseSelector|ST|select|Array|_19|mimeType|Boolean|isMSIE|firstElementChild|lastChild|previousElementSibling|firstChild|clearCache|ES|_20|_21|_22|_23|_24|DE|viewport|status|scripts|search|location|top|setTimeout|onreadystatechange|htc|addBehavior|quirks|setInterval|addTimer|setOverrideStyle|getDefinedStyle|fixed|isFixed|9999|rect|clip|none|border|block|display|padding|absolute|object|createElement|createTempElement|pixelLeft|getPixelValue|PERCENT|px|onbeforeprint|register|onunload|detachEvent|attachEvent|onresize|addResize|x22|x27|import|namespace|url|ma|bprint|bscreen|ball|write|selectorText|rules|margin|regEscape|item|innerText|getTextContent|scopeName|toUpperCase|compareTagName|ownerDocument|Document|XML|URL|xml|unknown|childElements|lastElementChild|nextSibling|previousSibling|attributeSelectors|AttributeSelector|indexOf|number|reset|successfully|ie5|fixes|instanceOf|Object|common|in|caller|gif|blank|BLANK_GIF|file|loading|responseText|200|send|GET|open|XMLHTTP|ActiveXObject|Microsoft|Msxml2|ScriptEngineMajorVersion|src|ANON|ie7Layout|ms_|ie7_off|CSS1Compat|compatMode|MSIE|navigator|alpha'.split('|'),0,{})) diff --git a/html2005/ie7/ie7-css-strict.js b/html2005/ie7/ie7-css-strict.js new file mode 100644 index 0000000..cc3c6a9 --- /dev/null +++ b/html2005/ie7/ie7-css-strict.js @@ -0,0 +1,6 @@ +/* + IE7, version 0.9 (alpha) (2005-08-19) + Copyright: 2004-2005, Dean Edwards (http://dean.edwards.name/) + License: http://creativecommons.org/licenses/LGPL/2.1/ +*/ +IE7.addModule("ie7-css-strict",function(){if(!modules["ie7-css2-selectors"])return;StyleSheet.prototype.specialize({parse:function(){this.inherit();var r=[].concat(this.rules);r.sort(ie7CSS.Rule.compare);this.cssText=r.join("\n")},createRule:function(s,c){var m;if(m=s.match(ie7CSS.PseudoElement.MATCH))return new ie7CSS.PseudoElement(m[1],m[2],c);else if(m=s.match(ie7CSS.DynamicRule.MATCH))return new ie7CSS.DynamicRule(s,m[1],m[2],m[3],c);else return new ie7CSS.Rule(s,c)}});ie7CSS.specialize({apply:function(){this.inherit();this.Rule.MATCH=/([^{}]+)(\{[^{}]*\})/g}});ie7CSS.Rule.compare=function(r1,r2){return r1.specificity-r2.specificity};var N=[],I=/#/g,C=/[.:\[]/g,T=/^\w|[\s>+~]\w/g;ie7CSS.Rule.score=function(s){return(s.match(I)||N).length*10000+(s.match(C)||N).length*100+(s.match(T)||N).length};ie7CSS.Rule.simple=function(){return""};ie7CSS.Rule.prototype.specialize({specificity:0,init:function(){this.specificity=ie7CSS.Rule.score(this.selector)}})}); diff --git a/html2005/ie7/ie7-css2-selectors.js b/html2005/ie7/ie7-css2-selectors.js new file mode 100644 index 0000000..5967068 --- /dev/null +++ b/html2005/ie7/ie7-css2-selectors.js @@ -0,0 +1,6 @@ +/* + IE7, version 0.9 (alpha) (2005-08-19) + Copyright: 2004-2005, Dean Edwards (http://dean.edwards.name/) + License: http://creativecommons.org/licenses/LGPL/2.1/ +*/ +IE7.addModule("ie7-css2-selectors",function(){cssQuery.addModule("css-level2",function(){selectors[">"]=function(r,f,t,n){var e,i,j;for(i=0;i+~\[]|([:.])[\\w-()]+\\1|:("+p+")");var c="[^\\s(]+\\s*[+~]|@\\d+|:(";Rule.COMPLEX=new RegExp(c+p+")","g");DynamicRule.COMPLEX=new RegExp(c+this.pseudoClasses+")","g");DynamicRule.MATCH=new RegExp("(.*):("+this.dynamicPseudoClasses+")(.*)");PseudoElement.MATCH=/(.*):(before|after).*/;this.inherit()},recalc:function(){this.screen.recalc();this.inherit()},getText:function(s,p){return httpRequest?(loadFile(s.href,p)||s.cssText):this.inherit(s)},addEventHandler:function(e,t,h){addEventHandler(e,t,h)}});function Rule(s,c){this.id=ie7CSS.rules.length;this.className=Rule.PREFIX+this.id;s=(s).match(F)||s||"*";this.selector=s[1]||s;this.selectorText=Rule.simple(this.selector)+"."+this.className+(s[2]||"");this.cssText=c;this.MATCH=new RegExp("\\s"+this.className+"(\\s|$)","g");ie7CSS.rules.push(this);this.init()};Common.specialize({constructor:Rule,toString:function(){return this.selectorText+" {"+this.cssText+"}"},init:DUMMY,add:function(e){e.className+=" "+this.className},remove:function(e){e.className=e.className.replace(this.MATCH,"$1")},recalc:function(){var m=ie7CSS.cache[" *."+this.className]=cssQuery(this.selector);for(i=0;i/g;Rule.simple=function(s){s=AttributeSelector.parse(s);return s.replace(this.COMPLEX,"").replace(this.CHILD," ")};function DynamicRule(s,a,d,t,c){this.attach=a||"*";this.dynamicPseudoClass=ie7CSS.dynamicPseudoClasses[d];this.target=t;this.inherit(s,c)};Rule.specialize({constructor:DynamicRule,recalc:function(){var m=cssQuery(this.attach);for(var i=0;i";PseudoElement.ANON="%3";function DynamicPseudoClass(n,a){this.name=n;this.apply=a;this.instances={};ie7CSS.dynamicPseudoClasses[n]=this};Common.specialize({constructor:DynamicPseudoClass,register:function(i){var c=i[2];i.id=c.id+i[0].uniqueID;if(!this.instances[i.id]){var t=i[1],j;for(j=0;j1)p+="\\([^)]*\\)";t.push(p)}return t.join("|")};ie7CSS.pseudoClasses["link"]=function(e){return e.currentStyle["ie7-link"]=="link"};ie7CSS.pseudoClasses["visited"]=function(e){return e.currentStyle["ie7-link"]=="visited"};var _4=(appVersion<5.5)?"onmouseover":"onmouseenter";var _3=(appVersion<5.5)?"onmouseout":"onmouseleave";ie7CSS.dynamicPseudoClasses.toString=ie7CSS.pseudoClasses.toString;var _0=new DynamicPseudoClass("hover",function(e){var i=arguments;ie7CSS.addEventHandler(e,_4,function(){_0.register(i)});ie7CSS.addEventHandler(e,_3,function(){_0.unregister(i)})});var _1=new DynamicPseudoClass("focus",function(e){var i=arguments;ie7CSS.addEventHandler(e,"onfocus",function(){_1.unregister(i);_1.register(i)});ie7CSS.addEventHandler(e,"onblur",function(){_1.unregister(i)});if(e==document.activeElement){_1.register(i)}});var _2=new DynamicPseudoClass("active",function(e){var i=arguments;ie7CSS.addEventHandler(e,"onmousedown",function(){_2.register(i)})});addEventHandler(document,"onmouseup",function(){var i=_2.instances,j;for(j in i)_2.unregister(i[j]);i=_0.instances;for(j in i)if(!i[j][0].contains(event.srcElement))_0.unregister(i[j])});ICommon(AttributeSelector);AttributeSelector.specialize({getAttribute:function(n){switch(n.toLowerCase()){case"class":return"e.className.replace(/\\b\\s*ie7_class\\d+/g,'')";case"src":return"(e.pngSrc||e.src)"}return this.inherit(n)}});encoder.add(/::/,":");safeString.add(/\\([\da-fA-F]{1,4})/,function(m,o){m=m[o+1];return"\\u"+"0000".slice(m.length)+m})}); diff --git a/html2005/ie7/ie7-css3-selectors.js b/html2005/ie7/ie7-css3-selectors.js new file mode 100644 index 0000000..1a0de78 --- /dev/null +++ b/html2005/ie7/ie7-css3-selectors.js @@ -0,0 +1,6 @@ +/* + IE7, version 0.9 (alpha) (2005-08-19) + Copyright: 2004-2005, Dean Edwards (http://dean.edwards.name/) + License: http://creativecommons.org/licenses/LGPL/2.1/ +*/ +IE7.addModule("ie7-css3-selectors",function(){cssQuery.addModule("css-level3",function(){selectors["~"]=function(r,f,t,n){var e,i;for(i=0;(e=f[i]);i++){while(e=nextElementSibling(e)){if(compareTagName(e,t,n))r.push(e)}}};pseudoClasses["contains"]=function(e,t){t=new RegExp(regEscape(getText(t)));return t.test(getTextContent(e))};pseudoClasses["root"]=function(e){return e==getDocument(e).documentElement};pseudoClasses["empty"]=function(e){var n,i;for(i=0;(n=e.childNodes[i]);i++){if(thisElement(n)||n.nodeType==3)return false}return true};pseudoClasses["last-child"]=function(e){return!nextElementSibling(e)};pseudoClasses["only-child"]=function(e){e=e.parentNode;return firstElementChild(e)==lastElementChild(e)};pseudoClasses["not"]=function(e,s){var n=cssQuery(s,getDocument(e));for(var i=0;i=c);return(c%m)==s}});var firstElementChild=cssQuery.valueOf("firstElementChild");ie7CSS.pseudoClasses["root"]=function(e){return(e==viewport)||(!isHTML&&e==firstElementChild(body))};var _4=new ie7CSS.DynamicPseudoClass("checked",function(e){if(typeof e.checked!="boolean")return;var i=arguments;ie7CSS.addEventHandler(e,"onpropertychange",function(){if(event.propertyName=="checked"){if(e.checked)_4.register(i);else _4.unregister(i)}});if(e.checked)_4.register(i)});var _3=new ie7CSS.DynamicPseudoClass("enabled",function(e){if(typeof e.disabled!="boolean")return;var i=arguments;ie7CSS.addEventHandler(e,"onpropertychange",function(){if(event.propertyName=="disabled"){if(!e.isDisabled)_3.register(i);else _3.unregister(i)}});if(!e.isDisabled)_3.register(i)});var _2=new ie7CSS.DynamicPseudoClass("disabled",function(e){if(typeof e.disabled!="boolean")return;var i=arguments;ie7CSS.addEventHandler(e,"onpropertychange",function(){if(event.propertyName=="disabled"){if(e.isDisabled)_2.register(i);else _2.unregister(i)}});if(e.isDisabled)_2.register(i)});var _1=new ie7CSS.DynamicPseudoClass("indeterminate",function(e){if(typeof e.indeterminate!="boolean")return;var i=arguments;ie7CSS.addEventHandler(e,"onpropertychange",function(){if(event.propertyName=="indeterminate"){if(e.indeterminate)_1.register(i);else _1.unregister(i)}});ie7CSS.addEventHandler(e,"onclick",function(){_1.unregister(i)})});var _0=new ie7CSS.DynamicPseudoClass("target",function(e){var i=arguments;if(!e.tabIndex)e.tabIndex=0;ie7CSS.addEventHandler(document,"onpropertychange",function(){if(event.propertyName=="activeElement"){if(e.id==location.hash.slice(1))_0.register(i);else _0.unregister(i)}});if(e.id==location.hash.slice(1))_0.register(i)});decoder.add(/\|/,"\\:")}); diff --git a/html2005/ie7/ie7-dhtml.js b/html2005/ie7/ie7-dhtml.js new file mode 100644 index 0000000..e69de29 diff --git a/html2005/ie7/ie7-dynamic-attributes.js b/html2005/ie7/ie7-dynamic-attributes.js new file mode 100644 index 0000000..a4a5f05 --- /dev/null +++ b/html2005/ie7/ie7-dynamic-attributes.js @@ -0,0 +1,6 @@ +/* + IE7, version 0.9 (alpha) (2005-08-19) + Copyright: 2004-2005, Dean Edwards (http://dean.edwards.name/) + License: http://creativecommons.org/licenses/LGPL/2.1/ +*/ +IE7.addModule("ie7-dynamic-attributes",function(){if(!modules["ie7-css2-selectors"])return;var attributeSelectors=cssQuery.valueOf("attributeSelectors");var parseSelector=cssQuery.valueOf("parseSelector");function DynamicAttribute(s,a,d,t,c){this.attach=a||"*";parseSelector(d);this.dynamicAttribute=attributeSelectors["@"+d];this.target=t;this.inherit(s,c)};ie7CSS.Rule.specialize({constructor:DynamicAttribute,recalc:function(){var m=cssQuery(this.attach);for(var i=0;i=0){w=Math.max(getPixelValue(e,e.currentStyle.width)-w,0);setOverrideStyle(e,"width",w)}}};eval(_1(clipWidth));function positionLeft(e,r){if(!r&&PERCENT.test(e.currentStyle.width)){e.runtimeStyle.fixWidth=e.currentStyle.width}if(e.runtimeStyle.fixWidth){e.runtimeStyle.width=getPixelWidth(e,e.runtimeStyle.fixWidth)}if(r){if(!e.runtimeStyle.autoLeft)return}else{e.runtimeStyle.shiftLeft=0;e.runtimeStyle._12=e.currentStyle.left;e.runtimeStyle.autoLeft=e.currentStyle.right!="auto"&&e.currentStyle.left=="auto"}e.runtimeStyle.left="";e.runtimeStyle.screenLeft=getScreenLeft(e);e.runtimeStyle.pixelLeft=e.runtimeStyle.screenLeft;if(!r&&!_3(e.offsetParent)){var ex="runtimeStyle.screenLeft+runtimeStyle.shiftLeft+document."+_10+".scrollLeft";setExpression(e,"pixelLeft",ex)}};eval(_1(positionLeft));function getScreenLeft(e){var s=e.offsetLeft,n=1;if(e.runtimeStyle.autoLeft){s=viewport.clientWidth-e.offsetWidth-getPixelWidth(e,e.currentStyle.right)}if(e.currentStyle.marginLeft!="auto"){s-=getPixelWidth(e,e.currentStyle.marginLeft)}while(e=e.offsetParent){if(e.currentStyle.position!="static")n=-1;s+=e.offsetLeft*n}return s};eval(_1(getScreenLeft));function getPixelWidth(e,v){if(PERCENT.test(v))return parseInt(parseFloat(v)/100*viewport.clientWidth);return getPixelValue(e,v)};eval(_1(getPixelWidth));function _11(){var e=_7.elements;for(var i in e)_9(e[i]);e=_6.elements;for(i in e){_5(e[i],true);_5(e[i],true)}_4=0};var _4;addResize(function(){if(!_4)_4=setTimeout(_11,0)})}); \ No newline at end of file diff --git a/html2005/ie7/ie7-graphics.js b/html2005/ie7/ie7-graphics.js new file mode 100644 index 0000000..436e126 --- /dev/null +++ b/html2005/ie7/ie7-graphics.js @@ -0,0 +1,6 @@ +/* + IE7, version 0.9 (alpha) (2005-08-19) + Copyright: 2004-2005, Dean Edwards (http://dean.edwards.name/) + License: http://creativecommons.org/licenses/LGPL/2.1/ +*/ +IE7.addModule("ie7-graphics",function(){if(appVersion<5.5)return;var A="DXImageTransform.Microsoft.AlphaImageLoader";var F="progid:"+A+"(src='%1',sizingMethod='scale')";var _3=new RegExp((window.IE7_PNG_SUFFIX||"-trans.png")+"$","i");var _0=[];function _2(e){var f=e.filters[A];if(f){f.src=e.src;f.enabled=true}else{e.runtimeStyle.filter=F.replace(/%1/,e.src);_0.push(e)}e.src=BLANK_GIF};function _5(e){e.src=e.pngSrc;e.filters[A].enabled=false};ie7CSS.addFix(/opacity\s*:\s*([\d.]+)/,function(m,o){return"zoom:1;filter:progid:DXImageTransform.Microsoft.Alpha(opacity="+((parseFloat(m[o+1])*100)||1)+")"});var B=/background(-image)?\s*:\s*([^\(};]*)url\(([^\)]+)\)([^;}]*)/;ie7CSS.addFix(B,function(m,o){var u=getString(m[o+3]);return _3.test(u)?"filter:"+F.replace(/scale/,"crop").replace(/%1/,u)+";zoom:1;background"+(m[o+1]||"")+":"+(m[o+2]||"")+"none"+(m[o+4]||""):m[o]});if(ie7HTML){ie7HTML.addRecalc("img,input",function(e){if(e.tagName=="INPUT"&&e.type!="image")return;_4(e);addEventHandler(e,"onpropertychange",function(){if(!_1&&event.propertyName=="src"&&e.src.indexOf(BLANK_GIF)==-1)_4(e)})});var B64=/^data:.*;base64/i;var _7=makePath("ie7-base64.php",path);function _4(e){if(_3.test(e.src)){var i=new Image(e.width,e.height);i.onload=function(){e.width=i.width;e.height=i.height;i=null};i.src=e.src;e.pngSrc=e.src;_2(e)}else if(B64.test(e.src)){e.src=_7+"?"+e.src.slice(5)}};var I=/^image/i;var _6=makePath("ie7-object.htc",path);ie7HTML.addRecalc("object",function(e){if(I.test(e.type)){var o=document.createElement("");o.style.width=e.currentStyle.width;o.style.height=e.currentStyle.height;o.data=_6;var u=makePath(e.data,getPath(location.href));e.parentNode.replaceChild(o,e);cssQuery.clearCache("object");addTimer(o,"",u);return o}})}var _1=false;addEventHandler(window,"onbeforeprint",function(){_1=true;for(var i=0;i<_0.length;i++)_5(_0[i])});addEventHandler(window,"onafterprint",function(){for(var i=0;i<_0.length;i++)_2(_0[i]);_1=false})}); diff --git a/html2005/ie7/ie7-html4.js b/html2005/ie7/ie7-html4.js new file mode 100644 index 0000000..239f3b6 --- /dev/null +++ b/html2005/ie7/ie7-html4.js @@ -0,0 +1,6 @@ +/* + IE7, version 0.9 (alpha) (2005-08-19) + Copyright: 2004-2005, Dean Edwards (http://dean.edwards.name/) + License: http://creativecommons.org/licenses/LGPL/2.1/ +*/ +IE7.addModule("ie7-html4",function(){if(!isHTML)return;HEADER+="h1{font-size:2em}h2{font-size:1.5em;}h3{font-size:1.17em;}"+"h4{font-size:1em}h5{font-size:.83em}h6{font-size:.67em}";var _0={};ie7HTML=new(Fix.specialize({init:DUMMY,addFix:function(){this.fixes.push(arguments)},apply:function(){for(var i=0;i"){var en="",n;while((n=e.nextSibling)&&n.outerHTML!=en){f.appendChild(n)}if(n)n.removeNode()}e.parentNode.replaceChild(f,e)}}); diff --git a/html2005/ie7/ie7-ie5.js b/html2005/ie7/ie7-ie5.js new file mode 100644 index 0000000..412ec81 --- /dev/null +++ b/html2005/ie7/ie7-ie5.js @@ -0,0 +1,6 @@ +/* + IE7, version 0.9 (alpha) (2005-08-19) + Copyright: 2004-2005, Dean Edwards (http://dean.edwards.name/) + License: http://creativecommons.org/licenses/LGPL/2.1/ +*/ +if(appVersion<5.5){ANON="HTML:!";var ap=function(f,o,a){f.apply(o,a)};if(''.replace(/^/,String)){var _0=String.prototype.replace;var _1=function(e,r){var m,n="",s=this;while(s&&(m=e.exec(s))){n+=s.slice(0,m.index)+ap(r,this,m);s=s.slice(m.lastIndex)}return n+s};String.prototype.replace=function(e,r){this.replace=(typeof r=="function")?_1:_0;return this.replace(e,r)}}if(!Function.apply){var APPLY="apply-"+Number(new Date);ap=function(f,o,a){var r;o[APPLY]=f;switch(a.length){case 0:r=o[APPLY]();break;case 1:r=o[APPLY](a[0]);break;case 2:r=o[APPLY](a[0],a[1]);break;case 3:r=o[APPLY](a[0],a[1],a[2]);break;case 4:r=o[APPLY](a[0],a[1],a[2],a[3]);break;default:var aa=[],i=a.length-1;do aa[i]="a["+i+"]";while(i--);eval("r=o[APPLY]("+aa+")")}delete o[APPLY];return r};ICommon.valueOf.prototype.inherit=function(){return ap(arguments.callee.caller.ancestor,this,arguments)}}if(![].push)Array.prototype.push=function(){for(var i=0;i=getFixedWidth(e,e.currentStyle.maxWidth)){e.runtimeStyle.width=getFixedWidth(e,e.currentStyle.maxWidth)}else{e.runtimeStyle.width=e.runtimeStyle.fixedWidth}};function fixRight(e){if(register(fixRight,e,/^(fixed|absolute)$/.test(e.currentStyle.position)&&getDefinedStyle(e,"left")!="auto"&&getDefinedStyle(e,"right")!="auto"&&A.test(getDefinedStyle(e,"width")))){resizeRight(e);ie7Layout.boxSizing(e)}};ie7Layout.fixRight=fixRight;function resizeRight(e){var l=getPixelWidth(e,e.runtimeStyle._4||e.currentStyle.left);var w=layoutWidth(e)-getPixelWidth(e,e.currentStyle.right)-l-getMarginWidth(e);if(parseInt(e.runtimeStyle.width)==w)return;e.runtimeStyle.width="";if(isFixed(e)||H||e.offsetWidth diff --git a/html2005/ie7/ie7-object.htc b/html2005/ie7/ie7-object.htc new file mode 100644 index 0000000..93e5a5d --- /dev/null +++ b/html2005/ie7/ie7-object.htc @@ -0,0 +1,12 @@ + + + + + + +
+ diff --git a/html2005/ie7/ie7-overflow.js b/html2005/ie7/ie7-overflow.js new file mode 100644 index 0000000..18eb832 --- /dev/null +++ b/html2005/ie7/ie7-overflow.js @@ -0,0 +1,6 @@ +/* + IE7, version 0.9 (alpha) (2005-08-19) + Copyright: 2004-2005, Dean Edwards (http://dean.edwards.name/) + License: http://creativecommons.org/licenses/LGPL/2.1/ +*/ +IE7.addModule("ie7-overflow",function(){var S={backgroundColor:"transparent",backgroundImage:"none",backgroundPositionX:null,backgroundPositionY:null,backgroundRepeat:null,borderTopWidth:0,borderRightWidth:0,borderBottomWidth:0,borderLeftStyle:"none",borderTopStyle:"none",borderRightStyle:"none",borderBottomStyle:"none",borderLeftWidth:0,height:null,marginTop:0,marginBottom:0,marginRight:0,marginLeft:0,width:"100%"};function _3(p,s,t){t.style[p]=s.currentStyle[p];if(S[p]!=null){s.runtimeStyle[p]=S[p]}};ie7CSS.addRecalc("overflow","visible",function(e){if(e.parentNode.ie7_wrapper)return;if(ie7Layout&&e.currentStyle["max-height"]!="auto"){ie7Layout.maxHeight(e)}if(e.currentStyle.marginLeft=="auto")e.style.marginLeft=0;if(e.currentStyle.marginRight=="auto")e.style.marginRight=0;var w=document.createElement(ANON);w.ie7_wrapper=true;for(var p in S)_3(p,e,w);w.style.display="block";w.style.position="relative";e.runtimeStyle.position="absolute";e.parentNode.insertBefore(w,e);w.appendChild(e)});cssQuery.addModule("ie7-overflow",function(){function _0(e){return(e&&e.ie7_wrapper)?e.firstChild:e};var _2=previousElementSibling;previousElementSibling=function(e){return _0(_2(e))};var _1=nextElementSibling;nextElementSibling=function(e){return _0(_1(e))};selectors[" "]=function(r,f,t,n){var e,i,j;for(i=0;i"]=function(r,f,t,n){var e,i,j;for(i=0;i= 6) ie7CSS.addRecalc("float", "left|right", function($element) { + ie7Layout.boxSizing($element.parentElement); + // "doubled margin" bug + $element.runtimeStyle.display = "inline"; + }); + + // "unscrollable content" bug + // http://www.positioniseverything.net/explorer/unscrollable.html + ie7CSS.addRecalc("position", "absolute|fixed", function($element) { + if ($element.offsetParent && $element.offsetParent.currentStyle.position == "relative") + ie7Layout.boxSizing($element.offsetParent); + }); +} + +//# // get rid of Microsoft's pesky image toolbar +//# if (!complete) document.write(''); + +}); diff --git a/html2005/ie7/ie7-standard-p.js b/html2005/ie7/ie7-standard-p.js new file mode 100644 index 0000000..cbe50c4 --- /dev/null +++ b/html2005/ie7/ie7-standard-p.js @@ -0,0 +1,6 @@ +/* + IE7, version 0.9 (alpha) (2005-08-19) + Copyright: 2004-2005, Dean Edwards (http://dean.edwards.name/) + License: http://creativecommons.org/licenses/LGPL/2.1/ +*/ +eval(function(p,a,c,k,e,d){e=function(c){return(c35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d[e(c)]=k[c]||e(c);k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('y(!26.1F)11 7(){2C{26.1F=8;6 2s=8.24=11 3b;8.1g=7(){z"1F 4x 0.9 (ad)"};6 5T=/5T/.Z(2y.5h.7C);6 31=(5T)?7(m){26.31(1F+"\\n\\n"+m)}:2s;6 29=ac.29.19(/ab (\\d\\.\\d)/)[1];6 2m=16.aa!="a9";y(/a8/.Z(2y.5h.7C)||29<5||!/^a7/.Z(16.2F.2a))z;6 33=16.5W=="33";6 1s,1K;6 2F=16.2F,1X,1J,1R=16.1R;6 4E="!";6 3Q={};6 2G=1z;1F.24=7(n,s){y(!3Q[n]){y(2G)1k("s="+23(s));3Q[n]=11 s()}};6 R=/^[\\w\\.]+[^:]*$/;7 1Z(h,p){y(R.Z(h))h=(p||"")+h;z h};7 3F(h,p){h=1Z(h,p);z h.1q(0,h.7a("/")+1)};6 s=16.7B[16.7B.K-1];2C{1k(s.7j)}2j(i){}6 2k=3F(s.1l);6 2v;2C{6 l=(a6()>=5)?"a5":"5n";2v=11 a4(l+".a3")}2j(i){}6 4A={};7 3T(h,p){2C{h=1Z(h,p);y(!4A[h]){2v.a2("a1",h,1z);2v.a0();y(2v.7A==0||2v.7A==9Z){4A[h]=2v.9Y}}}2j(i){31("4B [1]: 5O 9X 9W "+h)}5U{z 4A[h]||""}};6 4i=1Z("9V.9U",2k);7 2o(1w){y(1w!=1U){1w.1T=1t.1C.1T;1w.1e=1t.1C.1e}z 1w};2o.1e=7(p,c){y(!p)p={};y(!c)c=p.1h;y(c=={}.1h)c=11 3b("8.1T()");c.1i=11 3b("z 8");c.1i.1C=11 8.1i;c.1i.1C.1e(p);c.1C=11 c.1i;c.1i.1C.1h=c.1C.1h=c;c.2E=8;c.1e=1a.5P;c.4z=8.4z;z c};2o.1i=11 3b("z 8");2o.1i.1C={1h:2o,1T:7(){z 1a.5P.9T.2E.2q(8,1a)},1e:7(1w){y(8==8.1h.1C&&8.1h.1e){z 8.1h.1i.1C.1e(1w)}O(6 i 28 1w){34(i){1m"1h":1m"1g":1m"1i":5M}y(3Y 1w[i]=="7"&&1w[i]!=8[i]){1w[i].2E=8[i]}8[i]=1w[i]}y(1w.1g!=8.1g&&1w.1g!={}.1g){1w.1g.2E=8.1g;8.1g=1w.1g}z 8}};7 1t(){};8.1t=2o.1e({1h:1t,1g:7(){z"[9S "+(8.1h.1x||"9R")+"]"},9Q:7(2i){z 8.1h==2i||2i.4z(8.1h)}});1t.1x="1t";1t.2E=1U;1t.4z=7(2i){1D(2i&&2i.2E!=8)2i=2i.2E;z 7q(2i)};1t.1i.2E=2o;3u 8.1t;6 5x=1t.1e({1h:7(){8.3L=[];8.1Q=[]},1S:2s});y(29<5.5)1k(3T("17-9P.5X",2k));6 5S=1z;1F.1S=7(){2C{y(5S)z;5S=33=1o;1X=16.1X;1J=(2m)?1X:2F;y(2l&&1s)1s.2q();V.2q();1u();31("2G 9O")}2j(e){31("4B [2]: "+e.5V)}};6 1Q=[];7 1n(r){1Q.1b(r)};7 1u(){14.5g();y(2l&&1s)1s.1u();V.1u();O(6 i=0;i<1Q.K;i++)1Q[i]()};7 2U(){6 E=0,R=1,L=2;6 G=/\\(/g,S=/\\$\\d/,I=/^\\$\\d+$/,T=/([\'"])\\1\\+(.*)\\+\\1\\1$/,7t=/\\\\./g,Q=/\'/,7z=/\\3S[^\\3S]*\\3S/g;6 3N=8;8.15=7(e,r){y(!r)r="";6 l=(5R(23(e)).19(G)||"").K+1;y(S.Z(r)){y(I.Z(r)){r=25(r.1q(1))-1}1d{6 i=l;6 q=Q.Z(5R(r))?\'"\':"\'";1D(i)r=r.2O("$"+i--).2p(q+"+a[o+"+i+"]+"+q);r=11 3b("a,o","z"+q+r.13(T,"$1")+q)}}7y(e||"/^$/",r,l)};8.2V=7(s){3R.K=0;z 7u(7v(s,8.4y).13(11 1N(30,8.5Q?"5D":"g"),7w),8.4y).13(7z,"")};8.72=7(){30.K=0};6 3R=[];6 30=[];6 7x=7(){z"("+23(8[E]).1q(1,-1)+")"};30.1g=7(){z 8.2p("|")};7 7y(){1a.1g=7x;30[30.K]=1a}7 7w(){y(!1a[0])z"";6 i=1,j=0,p;1D(p=30[j++]){y(1a[i]){6 r=p[R];34(3Y r){1m"7":z r(1a,i);1m"9N":z 1a[r+i]}6 d=(1a[i].6F(3N.4y)==-1)?"":"\\3S"+1a[i]+"\\3S";z d+r}1d i+=p[L]}};7 7v(s,e){z e?s.13(11 1N("\\\\"+e+"(.)","g"),7(m,c){3R[3R.K]=c;z e}):s};7 7u(s,e){6 i=0;z e?s.13(11 1N("\\\\"+e,"g"),7(){z e+(3R[i++]||"")}):s};7 5R(s){z s.13(7t,"")}};2U.1C={1h:2U,5Q:1z,4y:""};1t.1e(2U.1C);6 3M=2U.1e({5Q:1o});6 14=7(){6 4x="2.0.2";6 C=/\\s*,\\s*/;6 14=7(s,1E){2C{6 m=[];6 u=1a.5P.5I&&!1E;6 b=(1E)?(1E.1h==7n)?1E:[1E]:[16];6 2f=45(s).2O(C),i;O(i=0;i<2f.K;i++){s=5J(2f[i]);y(4P&&s.1q(0,3).2p("")==" *#"){s=s.1q(2);1E=7o([],b,s[1])}1d 1E=b;6 j=0,t,f,a,c="";1D(j+~]/;6 7l=/[\\s#.:>+~()@]|[^\\s#.:>+~()@]+/g;7 5J(s){y(S.Z(s))s=" "+s;z s.19(7l)||[]};6 W=/\\s*([\\s>+~(),]|^|$)\\s*/g;6 I=/([\\s>+~,]|[^(]\\+|^)([#.:@])/g;6 45=7(s){z s.13(W,"$1").13(I,"$1*$2")};6 2c={1g:7(){z"\'"},19:/^(\'[^\']*\')|("[^"]*")$/,Z:7(s){z 8.19.Z(s)},15:7(s){z 8.Z(s)?s:8+s+8},3v:7(s){z 8.Z(s)?s.1q(1,-1):s}};6 2w=7(t){z 2c.3v(t)};6 E=/([\\/()[\\]?{}|*+-])/g;7 4O(s){z s.13(E,"\\\\$1")};2G=1o;z 14}();14.5I=1o;14.24("17",7(){2D=7(e){z(e&&e.7k==1&&e.2W!="!"&&!e.2K)?e:1U}});14.1i("2w=1a[1]",42);6 2l=!14.1i("5H(1a[1])",2F);6 2r=":21{17-21:21}:37{17-21:37}"+(2l?"":"*{6Q:0}");6 V=11(5x.1e({5B:11 3M,2P:"",2Y:"",5F:[],1S:7(){8.5G();8.4t()},4t:7(){V.3O.18=2r+8.2P+8.2Y},7i:7(){6 3P=16.4w("1r"),s;O(6 i=3P.K-1;(s=3P[i]);i--){y(!s.3m&&!s.17){8.5F.1b(s.7j)}}},2q:7(){8.7i();8.4t();11 3y("2P");8.7g()},3i:7(e,r){8.5B.15(e,r)},1u:7(){6 R=/7h\\d+/g;6 s=2r.19(/[{,]/g).K;6 3P=s+(8.2P.18.19(/\\{/g)||"").K;6 2Q=8.3O.2t,r;6 4v,c,4u,e,i,j,k,1c;O(i=s;i<3P;i++){r=2Q[i];y(r&&(4v=r.1r.18.19(R))){4u=14(r.4M);y(4u.K)O(j=0;j<4v.K;j++){1c=4v[j];c=V.1Q[1c.1q(10)][2];O(k=0;(e=4u[k]);k++){y(e.D[1c])c(e)}}}}},1n:7(p,t,h,r){t=11 1N("([{;\\\\s])"+p+"\\\\s*:\\\\s*"+t+"[^;}]*");6 i=8.1Q.K;y(r)r=p+":"+r;8.3i(t,7(m,o){z(r?m[o+1]+r:m[o])+";17-"+m[o].1q(1)+";7h"+i+":1"});8.1Q.1b(1a);z i},2w:7(s){z s.18||""},5G:7(){y(33||!2l)16.5G();1d 16.9A("<1r 17=1o>");8.3O=1R[1R.K-1];8.3O.17=1o;8.3O.18=2r},7g:7(){O(6 i=0;i<1R.K;i++){y(!1R[i].17&&1R[i].18){1R[i].18=""}}}}));7 3y(m){8.2Z=m;8.3q();V[m]=8;V.4t()};1t.1e({1h:3y,1g:7(){z"@2Z "+8.2Z+"{"+8.18+"}"},1u:2s,3q:7(){8.18="";8.2w();8.38();8.18=41(8.18);f={}},2w:7(){6 7e=[].4J(V.5F);6 M=/@2Z\\s+([^{]*)\\{([^@]+\\})\\s*\\}/5D;6 A=/\\9z\\b|^$/i,S=/\\9y\\b/i,P=/\\9x\\b/i;7 7d(c,m){4s.v=m;z c.13(M,4s)};7 4s(9w,m,c){m=5E(m);34(m){1m"2P":1m"2Y":y(m!=4s.v)z"";1m"1Y":z c}z""};7 5E(m){y(A.Z(m))z"1Y";1d y(S.Z(m))z(P.Z(m))?"1Y":"2P";1d y(P.Z(m))z"2Y"};6 3N=8;7 5C(s,p,m,l){6 c="";y(!l){m=5E(s.2Z);l=0}y(m=="1Y"||m==3N.2Z){y(l<3){O(6 i=0;i/);6 3r=11 3M;3r.15(/\\\\\'/,"\\\\9t");3r.15(/\\\\"/,"\\\\46");6 5z=11 3M;5z.15(/\'(\\d+)\'/,78);7 41(c){z 5z.2V(c)};7 78(m,o){z 4r[m[o+1]]};6 5y=[];7 4U(h){1n(h);1j(26,"9s",h)};7 1j(e,t,h){e.9r(t,h);5y.1b(1a)};7 76(e,t,h){2C{e.9q(t,h)}2j(i){}};1j(26,"9p",7(){6 h;1D(h=5y.77()){76(h[0],h[1],h[2])}});7 20(h,e,c){y(!h.1O)h.1O={};y(c)h.1O[e.2a]=e;1d 3u h.1O[e.2a];z c};1j(26,"6z",7(){y(!V.2Y)11 3y("2Y");V.2Y.1u()});6 75=/^\\d+(9o)?$/i;6 3d=/^\\d+%$/;6 3c=7(e,v){y(75.Z(v))z 25(v);6 s=e.1r.1f;6 r=e.J.1f;e.J.1f=e.D.1f;e.1r.1f=v||0;v=e.1r.4e;e.1r.1f=s;e.J.1f=r;z v};7 6x(t){6 e=16.3X(t||"2M");e.1r.18="1y:3C;6R:0;4K:9n;3G:1M;9m:9l(0 0 0 0);1f:-9k";e.2K=1o;z e};6 4q="17-";7 3D(e){z e.D["17-1y"]=="2z"};7 4o(e,p){z e.D[4q+p]||e.D[p]};7 2T(e,p,v){y(e.D[4q+p]==1U){e.J[4q+p]=e.D[p]}e.J[p]=v};7 4H(o,c,u){6 t=9j(7(){2C{y(!o.3q)z;o.3q(o,c,u);74(t)}2j(i){74(t)}},10)};1F.24("17-9i",7(){y(!2l)z;2r+="9h{3p-3o:9g}9f{3p-3o:1.9e;}9d{3p-3o:1.9c;}"+"9b{3p-3o:9a}99{3p-3o:.98}97{3p-3o:.96}";6 5w={};1s=11(5x.1e({1S:2s,3i:7(){8.3L.1b(1a)},2q:7(){O(6 i=0;i<8.3L.K;i++){6 m=14(8.3L[i][0]);6 f=8.3L[i][1]||6X;O(6 j=0;j"){6 6V="",n;1D((n=e.6W)&&n.3z!=6V){f.6t(n)}y(n)n.8W()}e.4R.6A(f,e)}});1F.24("17-8V",7(){1K=8;2r+="*{3H:22-2X}";8.3j=(29<5.5)?7(e){z e.1I}:7(e){z e.D.3j};8.3H=7(e){y(!1K.3j(e)){e.1r.2b="6T";y(e.D.6U=="1P")e.J.6U="2y";4k(e)}};7 4k(e){y(e!=1J&&e.D.1y!="3C"){4p(e);8U(e)}};6 3l=14.1i("3l");6 5t=14.1i("5t");7 4p(e){y(!e.J.3k){6 p=e.59;y(p&&1K.3j(p)&&e==3l(p))z;6 f=3l(e);y(f&&f.D.8T=="1M"&&1K.3j(f)){4p(f);m=5s(e,e.D.3k);c=5s(f,f.D.3k);y(m<0||c<0){e.J.3k=m+c}1d{e.J.3k=4g.3g(c,m)}f.J.3k="8S"}}};1k(23(4p).13(/5c/g,"6N").13(/4N/g,"8R"));7 5s(e,v){z(v=="1P")?0:3c(e,v)};6 U=/^[.\\d][\\w%]*$/,A=/^(1P|6T)$/,N="[.\\\\d]";6 4l,6S;7 6O(e){4l(e);6S(e)};7 2g(H){4l=7(e){y(!3d.Z(e.D.12))2g(e);4k(e)};7 2g(e,v){y(!e.J.3J){y(!v)v=e.D.12;e.J.3J=(U.Z(v))?4g.3g(0,2B(e,v)):v;2T(e,"12",e.J.3J)}};7 5r(e){y(!3D(e)){6 l=e.3B;1D(l&&!1K.3j(l))l=l.3B}z(l||1J).1I};7 1H(e,v){y(3d.Z(v))z 25(4c(v)/3w*5r(e));z 3c(e,v)};6 2B=7(e,v){6 b=e.D["2X-5o"]=="3G-2X";6 a=0;y(2m&&!b)a+=4n(e)+3K(e);1d y(!2m&&b)a-=4n(e)+3K(e);z 1H(e,v)+a};7 4n(e){z e.2S-e.1I};7 3K(e){z 1H(e,e.D.8Q)+1H(e,e.D.8P)};1k(23(3K).13(/6R/g,"6Q").13(/8O/g,"8N"));2r+="*{1A:1M;27:1M;3I-12:1M;3g-12:1M}";7 1A(e){y(e.D["3I-12"]!=1U){e.1r.1A=e.D["3I-12"]}y(20(1A,e,e.D.1A!="1M")){1K.3H(e);2g(e);4m(e)}};1k(23(1A).13(/3I/g,"3g"));1K.1A=1A;1K.27=27;7 4m(e){6 r=e.54();6 w=r.1W-r.1f;y(e.D.1A!="1M"&&w<=2B(e,e.D.1A)){e.J.12=2B(e,e.D.1A)}1d y(e.D.27!="1M"&&w>=2B(e,e.D.27)){e.J.12=2B(e,e.D.27)}1d{e.J.12=e.J.3J}};7 2x(e){y(20(2x,e,/^(2z|3C)$/.Z(e.D.1y)&&4o(e,"1f")!="1P"&&4o(e,"1W")!="1P"&&A.Z(4o(e,"12")))){5p(e);1K.3H(e)}};1K.2x=2x;7 5p(e){6 l=1H(e,e.J.52||e.D.1f);6 w=5r(e)-1H(e,e.D.1W)-l-8M(e);y(25(e.J.12)==w)z;e.J.12="";y(3D(e)||H||e.2S");o.1r.12=e.D.12;o.1r.2b=e.D.2b;o.3W=6B;6 u=1Z(e.3W,3F(5h.2u));e.4R.6A(o,e);14.5g("2M");4H(o,"",u);z o}})}6 4j=1z;1j(26,"6z",7(){4j=1o;O(6 i=0;i<3h.K;i++)6y(3h[i])});1j(26,"8r",7(){O(6 i=0;i<3h.K;i++)5f(3h[i]);4j=1z})});1F.24("17-2z",7(){V.1n("1y","2z",4a,"3C");V.1n("5e(-8q)?","[^};]*2z",4b);6 4Z=(2m)?"1X":"2F";6 4h=7(){y(1X.D.5b!="2z"){y(1X.D.5a=="1M"){1X.J.8p="8o-8n";1X.J.5a="43("+4i+")"}1X.J.5b="2z"}4h=2s};6 2h=6x("5d");7 1v(f){z 2A.2V(23(f))};6 2A=11 2U;2A.15(/6w/,"5c");2A.15(/1f/,"2y");2A.15(/6v/,"6u");2A.15(/12/,"2b");2A.15(/1W/,"56");2A.15(/X/,"Y");7 3f(e){z(e)?3D(e)||3f(e.59):1z};7 4f(e,p,3e){32("16.1Y."+e.2a+".J.4f(\'"+p+"\',\'"+3e+"\')",0)};7 4b(e){y(20(4b,e,e.D.5b=="2z"&&!e.61(1X))){4h();58(e);8m(e);4V(e)}};7 4V(e){2h.1l=e.D.5a.1q(5,-2);6 p=(e.6c)?e:e.59;p.6t(2h);57(e);8l(e);p.8k(2h)};7 58(e){e.1r.3E=e.D.3E;y(!3f(e)){6 3e="(25(J.3A)+16."+4Z+".6s)||0";4f(e,"3E",3e)}};1k(1v(58));7 57(e){6 p=3f(e)?"3E":"3A";e.J[p]=55(e,e.1r.3E)-e.54().1f-e.8j+2};1k(1v(57));7 55(e,p){34(p){1m"1f":1m"2y":z 0;1m"1W":1m"56":z 1J.1I-2h.2S;1m"8i":z(1J.1I-2h.2S)/2;8h:y(3d.Z(p)){z 25((1J.1I-2h.2S)*4c(p)/3w)}2h.1r.1f=p;z 2h.3A}};1k(1v(55));7 4a(e){y(20(4a,e,3D(e))){2T(e,"1y","3C");2T(e,"1f",e.D.1f);2T(e,"2y",e.D.2y);4h();y(1K)1K.2x(e);49(e)}};7 49(e,r){8g(e,r);4Y(e,r,1o);y(!e.J.4d&&e.D.4X=="1P"&&e.D.1W!="1P"){6 l=1J.1I-1H(e,e.D.1W)-1H(e,e.J.52)-e.1I;y(e.D.8f=="1P")l=25(l/2);y(3f(e.3B))e.J.4e+=l;1d e.J.50=l}53(e);8e(e)};7 53(e){y(e.D.12!="1P"){6 r=e.54();6 w=e.2S-1J.1I+r.1f-2;y(w>=0){w=4g.3g(3c(e,e.D.12)-w,0);2T(e,"12",w)}}};1k(1v(53));7 4Y(e,r){y(!r&&3d.Z(e.D.12)){e.J.2g=e.D.12}y(e.J.2g){e.J.12=1H(e,e.J.2g)}y(r){y(!e.J.4d)z}1d{e.J.50=0;e.J.52=e.D.1f;e.J.4d=e.D.1W!="1P"&&e.D.1f=="1P"}e.J.1f="";e.J.51=4W(e);e.J.4e=e.J.51;y(!r&&!3f(e.3B)){6 3e="J.51+J.50+16."+4Z+".6s";4f(e,"4e",3e)}};1k(1v(4Y));7 4W(e){6 s=e.3A,n=1;y(e.J.4d){s=1J.1I-e.2S-1H(e,e.D.1W)}y(e.D.4X!="1P"){s-=1H(e,e.D.4X)}1D(e=e.3B){y(e.D.1y!="8d")n=-1;s+=e.3A*n}z s};1k(1v(4W));7 1H(e,v){y(3d.Z(v))z 25(4c(v)/3w*1J.1I);z 3c(e,v)};1k(1v(1H));7 6r(){6 e=4b.1O;O(6 i 28 e)4V(e[i]);e=4a.1O;O(i 28 e){49(e[i],1o);49(e[i],1o)}48=0};6 48;4U(7(){y(!48)48=32(6r,0)})});1F.24("17-8c-1V",7(){14.24("8b-8a",7(){1V[">"]=7(r,f,t,n){6 e,i,j;O(i=0;i+~\\[]|([:.])[\\\\w-()]+\\\\1|:("+p+")");6 c="[^\\\\s(]+\\\\s*[+~]|@\\\\d+|:(";1G.44=11 1N(c+p+")","g");2d.44=11 1N(c+8.1B+")","g");2d.39=11 1N("(.*):("+8.36+")(.*)");1L.39=/(.*):(6i|6h).*/;8.1T()},1u:7(){8.2P.1u();8.1T()},2w:7(s,p){z 2v?(3T(s.2u,p)||s.18):8.1T(s)},1j:7(e,t,h){1j(e,t,h)}});7 1G(s,c){8.1c=V.2t.K;8.1x=1G.3x+8.1c;s=(s).19(F)||s||"*";8.40=s[1]||s;8.4M=1G.6g(8.40)+"."+8.1x+(s[2]||"");8.18=c;8.39=11 1N("\\\\s"+8.1x+"(\\\\s|$)","g");V.2t.1b(8);8.1S()};1t.1e({1h:1G,1g:7(){z 8.4M+" {"+8.18+"}"},1S:2s,15:7(e){e.1x+=" "+8.1x},3v:7(e){e.1x=e.1x.13(8.39,"$1")},1u:7(){6 m=V.2e[" *."+8.1x]=14(8.40);O(i=0;i/g;1G.6g=7(s){s=1p.38(s);z s.13(8.44,"").13(8.6f," ")};7 2d(s,a,d,t,c){8.6e=a||"*";8.6d=V.36[d];8.4L=t;8.1T(s,c)};1G.1e({1h:2d,1u:7(){6 m=14(8.6e);O(6 i=0;i";1L.4E="<17:! 3U=\'2K %1\' 2K 1r=\'%2\'>%3";7 2J(n,a){8.66=n;8.2q=a;8.2I={};V.36[n]=8};1t.1e({1h:2J,20:7(i){6 c=i[2];i.1c=c.1c+i[0].2a;y(!8.2I[i.1c]){6 t=i[1],j;O(j=0;j1)p+="\\\\([^)]*\\\\)";t.1b(p)}z t.2p("|")};V.1B["21"]=7(e){z e.D["17-21"]=="21"};V.1B["37"]=7(e){z e.D["17-21"]=="37"};6 64=(29<5.5)?"7T":"7S";6 63=(29<5.5)?"7R":"7Q";V.36.1g=V.1B.1g;6 3s=11 2J("65",7(e){6 i=1a;V.1j(e,64,7(){3s.20(i)});V.1j(e,63,7(){3s.35(i)})});6 3t=11 2J("7P",7(e){6 i=1a;V.1j(e,"7O",7(){3t.35(i);3t.20(i)});V.1j(e,"7N",7(){3t.35(i)});y(e==16.7M){3t.20(i)}});6 3V=11 2J("62",7(e){6 i=1a;V.1j(e,"7L",7(){3V.20(i)})});1j(16,"7K",7(){6 i=3V.2I,j;O(j 28 i)3V.35(i[j]);i=3s.2I;O(j 28 i)y(!i[j][0].61(60.7J))3s.35(i[j])});2o(1p);1p.1e({2H:7(n){34(n.5Z()){1m"3U":z"e.1x.13(/\\\\b\\\\s*5Y\\\\d+/g,\'\')";1m"1l":z"(e.4D||e.1l)"}z 8.1T(n)}});2n.15(/::/,":");3r.15(/\\\\([\\7I-7H-F]{1,4})/,7(m,o){m=m[o+1];z"\\\\u"+"7G".1q(m.K)+m})});2G=1o;y(2m)1k(3T("17-7F.5X",2k));V.1S();y(2l&&1s)1s.1S();y(33)1F.1S();1d{2F.7E(1Z("17-3q.4C",2k));1j(16,"7D",7(){y(16.5W=="33")32(1F.1S,0)})}}2j(e){31("4B [0]: "+e.5V)}5U{}};',62,634,'||||||var|function|this||||||||||||||||||||||||||if|return||||currentStyle||||||runtimeStyle|length||||for|||||||ie7CSS||||test||new|width|replace|cssQuery|add|document|ie7|cssText|match|arguments|push|id|else|specialize|left|toString|constructor|valueOf|addEventHandler|eval|src|case|addRecalc|true|AttributeSelector|slice|style|ie7HTML|Common|recalc|_0|that|className|position|false|minWidth|pseudoClasses|prototype|while|fr|IE7|Rule|getPixelWidth|clientWidth|viewport|ie7Layout|PseudoElement|none|RegExp|elements|auto|recalcs|styleSheets|init|inherit|null|selectors|right|body|all|makePath|register|link|content|String|addModule|parseInt|window|maxWidth|in|appVersion|uniqueID|height|Quote|DynamicRule|cache|se|fixWidth|_1|klass|catch|path|isHTML|quirksMode|encoder|ICommon|join|apply|HEADER|DUMMY|rules|href|httpRequest|getText|fixRight|top|fixed|_2|getFixedWidth|try|thisElement|ancestor|documentElement|loaded|getAttribute|instances|DynamicPseudoClass|ie7_anon|type|object|co|split|screen|ru|attributeSelectors|offsetWidth|setOverrideStyle|ParseMaster|exec|tagName|box|print|media|_3|alert|setTimeout|complete|switch|unregister|dynamicPseudoClasses|visited|parse|MATCH|tests|Function|getPixelValue|PERCENT|ex|_4|max|_5|addFix|hasLayout|marginTop|firstElementChild|disabled|value|size|font|load|safeString|_6|_7|delete|remove|100|PREFIX|StyleSheet|outerHTML|offsetLeft|offsetParent|absolute|isFixed|backgroundPositionX|getPath|border|boxSizing|min|fixedWidth|getPaddingWidth|fixes|Parser|self|styleSheet|st|modules|_8|x01|loadFile|class|_9|data|createElement|typeof|create|selector|decode|getString|url|COMPLEX|parseSelector|x22|nextElementSibling|_10|_11|_12|_13|parseFloat|autoLeft|pixelLeft|setExpression|Math|_14|BLANK_GIF|_15|_16|applyWidth|resizeWidth|getBorderWidth|getDefinedStyle|collapseMarginTop|_17|_18|_19|refresh|el|ca|getElementsByTagName|version|escapeChar|ancestorOf|_20|Error|htc|pngSrc|ANON|po|cs|addTimer|attr|concat|display|target|selectorText|first|regEscape|isMSIE|lang|parentNode|previousElementSibling|compareTagName|addResize|_21|getScreenLeft|marginLeft|positionLeft|_22|shiftLeft|screenLeft|_23|clipWidth|getBoundingClientRect|getOffsetLeft|bottom|setOffsetLeft|backgroundLeft|parentElement|backgroundImage|backgroundAttachment|Top|img|background|_24|clearCache|location|image|_25|_26|input|filter|Microsoft|sizing|resizeRight|_27|layoutWidth|_28|lastElementChild|clicked|submit|_29|Fix|_30|decoder|_31|parser|_32|gi|_33|styles|createStyleSheet|isXML|caching|_34|compareNamespace|getDocument|continue|links|error|callee|ignoreCase|_35|_36|ie7_debug|finally|description|readyState|js|ie7_class|toLowerCase|event|contains|active|_37|_38|hover|name|scriptlet|text|OBJECT|CONTENT|_39|canHaveChildren|dynamicPseudoClass|attach|CHILD|simple|after|before|UNKNOWN|createRule|B1|B2|_40|htmlFor|NS_IE|childElements|_41|scrollLeft|appendChild|Height|Width|Left|createTempElement|_42|onbeforeprint|replaceChild|_43|_44|B64|base64|indexOf|zoom|scale|opacity|DXImageTransform|progid|enabled|filters|Bottom|borderBox|spacing|margin|padding|applyHeight|0cm|verticalAlign|en|nextSibling|_45|title|_46|BUTTON|button|reset|onclick|clearInterval|PIXEL|removeEventHandler|pop|_47|_48|lastIndexOf|_49|_50|_51|_52|imports|trash|ie7_recalc|getInlineStyles|innerHTML|nodeType|ST|select|Array|_53|mimeType|Boolean|lastChild|firstChild|ES|_54|_55|_56|_57|_58|DE|status|scripts|search|onreadystatechange|addBehavior|quirks|0000|fA|da|srcElement|onmouseup|onmousedown|activeElement|onblur|onfocus|focus|onmouseleave|onmouseout|onmouseenter|onmouseover|insertAdjacentHTML|insertAdjacentElement|Number|inline|charAt|beforeEnd|after1|afterEnd|after0|afterBegin|before1|beforeBegin|before0|letter|line|child|level2|css|css2|static|clipHeight|marginRight|positionTop|default|center|clientLeft|removeChild|setOffsetTop|backgroundTop|repeat|no|backgroundRepeat|attachment|onafterprint|onload|Image|php|propertyName|onpropertychange|INPUT|crop|Alpha|png|trans|IE7_PNG_SUFFIX|sizingMethod|AlphaImageLoader|graphics|fixHeight|Right|cellSpacing|collapse|borderCollapse|IE7_BOX_MODEL|getMarginWidth|Margin|Padding|paddingRight|paddingLeft|last|0px|styleFloat|collapseMarginBottom|layout|removeNode|HTML|alt|onsubmit|form|click|textarea|label|abbr|pow|67em|h6|83em|h5|1em|h4|17em|h3|5em|h2|2em|h1|html4|setInterval|9999|rect|clip|block|px|onunload|detachEvent|attachEvent|onresize|x27|import|namespace|ma|bprint|bscreen|ball|write|item|innerText|getTextContent|scopeName|toUpperCase|ownerDocument|Document|XML|URL|xml|unknown|previousSibling|number|successfully|ie5|instanceOf|Object|common|caller|gif|blank|file|loading|responseText|200|send|GET|open|XMLHTTP|ActiveXObject|Msxml2|ScriptEngineMajorVersion|ms_|ie7_off|CSS1Compat|compatMode|MSIE|navigator|alpha'.split('|'),0,{})) diff --git a/html2005/ie7/ie7-standard.js b/html2005/ie7/ie7-standard.js new file mode 100644 index 0000000..d97e11b --- /dev/null +++ b/html2005/ie7/ie7-standard.js @@ -0,0 +1,9 @@ + + +404 Not Found + +

Not Found

+The requested URL /~9jack9/ie7/ie7-standard.js was not found on this server.

+

+
Apache/1.3.29 Server at homepages.nildram.co.uk Port 80
+ diff --git a/html2005/ie7/ie7-xml-extras.js b/html2005/ie7/ie7-xml-extras.js new file mode 100644 index 0000000..a1ad72f --- /dev/null +++ b/html2005/ie7/ie7-xml-extras.js @@ -0,0 +1,6 @@ +/* + IE7, version 0.9 (alpha) (2005-08-19) + Copyright: 2004-2005, Dean Edwards (http://dean.edwards.name/) + License: http://creativecommons.org/licenses/LGPL/2.1/ +*/ +function XMLHttpRequest(){var l=(ScriptEngineMajorVersion()>=5)?"Msxml2":"Microsoft";return new ActiveXObject(l+".XMLHTTP")};function DOMParser(){};DOMParser.prototype={toString:function(){return"[object DOMParser]"},parseFromString:function(s,c){var x=new ActiveXObject("Microsoft.XMLDOM");x.loadXML(s);return x},parseFromStream:new Function,baseURI:""};function XMLSerializer(){};XMLSerializer.prototype={toString:function(){return"[object XMLSerializer]"},serializeToString:function(r){return r.xml||r.outerHTML},serializeToStream:new Function}; diff --git a/html2005/ie7/ie7.gif b/html2005/ie7/ie7.gif new file mode 100644 index 0000000..64a2c2d Binary files /dev/null and b/html2005/ie7/ie7.gif differ diff --git a/html2005/ie7/src/README.txt b/html2005/ie7/src/README.txt new file mode 100644 index 0000000..647c8ea --- /dev/null +++ b/html2005/ie7/src/README.txt @@ -0,0 +1,34 @@ +Installation +------------ + +Follow these simple instructions to get IE7 working immediately on your server: + + * download the latest IE7 ZIP file (https://sourceforge.net/project/showfiles.php?group_id=109983&package_id=119707) + + * extract the contents to a directory on your server (keep the folder names used in the ZIP) + + * you will now have an IE7 directory on your server + + * include the IE7 JavaScript library in the page you wish to test + + + + + * make sure this also points to the same directory + + * open the page in your web browser + + * the page should now be IE7 enabled. + + * if you are using the PNG solution then be aware that it operates on files + names "something-trans.png" + + * see this page for more configuration and usage options: + http://dean.edwards.name/IE7/usage/ + +You may extract the contents of the ZIP file to your hard disk if you do not have access to a web server. + + +Enjoy ;-) + +Dean Edwards, 23rd May 2005 diff --git a/html2005/ie7/src/blank.gif b/html2005/ie7/src/blank.gif new file mode 100644 index 0000000..a4fe2e6 Binary files /dev/null and b/html2005/ie7/src/blank.gif differ diff --git a/html2005/ie7/src/ie7-content.htc b/html2005/ie7/src/ie7-content.htc new file mode 100644 index 0000000..ce16392 --- /dev/null +++ b/html2005/ie7/src/ie7-content.htc @@ -0,0 +1,67 @@ + + + + + + + + + + diff --git a/html2005/ie7/src/ie7-core.js b/html2005/ie7/src/ie7-core.js new file mode 100644 index 0000000..8bcb0b2 --- /dev/null +++ b/html2005/ie7/src/ie7-core.js @@ -0,0 +1,1155 @@ +/* + IE7, version 0.8 (alpha) (2005/05/23) + Copyright: 2004-2005, Dean Edwards (http://dean.edwards.name/) + License: http://creativecommons.org/licenses/LGPL/2.1/ +*/ +if (!window.IE7) new function() { +try { +// ----------------------------------------------------------------------- +// globals +// ----------------------------------------------------------------------- +window.IE7 = this; +// in case of error... +var DUMMY = this.addModule = new Function; +// IE7 version info +this.toString = function(){return "IE7 version 0.8 (alpha)"}; +// error reporting +var ie7_debug = /ie7_debug/.test(top.location.search); +var alert = (ie7_debug) ? function($message){window.alert(IE7+"\n\n"+$message)} : DUMMY; +// IE version info +var appVersion = navigator.appVersion.match(/MSIE (\d\.\d)/)[1]; +var quirksMode = document.compatMode != "CSS1Compat"; +// IE7 can be turned "off" +if (/ie7_off/.test(top.location.search) || appVersion < 5 || + !/^ms_/.test(document.documentElement.uniqueID)) return; +// if using the favelet then the document has already loaded +var complete = document.readyState == "complete"; +// assume html unless explicitly defined +var isHTML = (typeof document.mimeType == "unknown") ? + !/\.xml$/i.test(location.pathname) : + Boolean(document.mimeType != "XML Document"); +// another global +var ie7HTML, ie7Layout; // loaded separately +var HEADER = ":link{ie7-link:link}:visited{ie7-link:visited}" + (isHTML ? "" : "*{margin:0}"); +// handy +var documentElement = document.documentElement, body, viewport, styleSheets = document.styleSheets; +var ANON = "!"; +// ----------------------------------------------------------------------- +// external +// ----------------------------------------------------------------------- + +// cache for the various modules that make up IE7. +// modules are stored as functions. these are executed +// after the style sheet text has been loaded. +// storing the modules as functions means that we avoid +// name clashes with other modules. +var modules = {}; +var loaded = false; +IE7.addModule = function($name, $script) { + if (!modules[$name]) { + if (loaded) eval("$script=" + String($script)); + modules[$name] = new $script(); + } +}; + +var $RELATIVE = /^[\w\.]+[^:]*$/; +function makePath($href, $path) { + if ($RELATIVE.test($href)) $href = ($path || "") + $href; + return $href; +}; + +function getPath($href, $path) { + $href = makePath($href, $path); + return $href.slice(0, $href.lastIndexOf("/") + 1); +}; + +// get the path to this script +var $script = document.scripts[document.scripts.length - 1]; +// create global variables from the inner text of the IE7 script +try { + eval($script.innerHTML); +} catch ($ignore) { + // ignore errors +} +var path = getPath($script.src); +// we'll use microsoft's http request object to load external files +var httpRequest; +try { + httpRequest = new ActiveXObject(((appVersion < 6) ? "Microsoft" : "Msxml2") + ".XMLHTTP"); +} catch ($ignore) { + // ActiveX disabled +} +var _fileCache = {}; +function loadFile($href, $path) { +try { + $href = makePath($href, $path); + // easy to load a file huh? + httpRequest.open("GET", $href, false); + httpRequest.send(); + if (httpRequest.status == 0 || httpRequest.status == 200) { + _fileCache[$href] = httpRequest.responseText; + } +} catch ($ignore) { + alert("Error [1]: error loading file " + $href); +} finally { + return _fileCache[$href] || ""; +}}; + +// a small transparent image used as a placeholder +var BLANK_GIF = makePath("blank.gif", path); + +// ----------------------------------------------------------------------- +// OO support +// ----------------------------------------------------------------------- + +/* --- (require) /common/src?common.js --- */ +/* + common, version 1.0.1 (2005/05/15) x4 + Copyright 2005, Dean Edwards + License: http://creativecommons.org/licenses/LGPL/2.1/ +*/ + +// this function may be used to cast any javascript object +// to a common object +function ICommon(object) { + if (object != null) { + object.inherit = Common.prototype.inherit; + object.specialize = Common.prototype.specialize; + } + return object; +}; + +// sub-classing +ICommon.specialize = function($prototype, $constructor) { + // initialise class properties + if (!$prototype) $prototype = {}; + if (!$constructor) $constructor = $prototype.constructor; + if ($constructor == {}.constructor) $constructor = new Function("this.inherit()"); + // build the inheritance chain + // insert a dummy constructor between the ancestor + // and the new constructor. this allows standard + // prototype inheritance plus chained constructor + // functions. + $constructor.valueOf = new Function("return this"); + $constructor.valueOf.prototype = new this.valueOf; + $constructor.valueOf.prototype.specialize($prototype); + $constructor.prototype = new $constructor.valueOf; + $constructor.prototype.constructor = $constructor; + $constructor.ancestor = this; + $constructor.specialize = arguments.callee; + return $constructor; +}; + +// root of the inheritance chain +ICommon.valueOf = new Function("return this"); + +// common interface +ICommon.valueOf.prototype = { +constructor: ICommon, +inherit: function() { +//- +// Call this method from any other method to call that method's ancestor. +// If there is no ancestor function then this function will throw an error. +//- + return arguments.callee.caller.ancestor.apply(this, arguments); +}, +specialize: function(object) { +//- +// Add the interface of another object to this object +//- + // if this object is the prototype then specialize the /real/ prototype + if (this == this.constructor.prototype && this.constructor.specialize) { + return this.constructor.valueOf.prototype.specialize(object); + } + // add each of one of the source object's properties to this object + for (var i in object) { + switch (i) { + case "constructor": // don't do this one! + case "toString": // do this one maually + case "valueOf": // ignore this one... + continue; + } + // implement inheritance + if (typeof object[i] == "function" && object[i] != this[i]) { + object[i].ancestor = this[i]; + } + // add the property + this[i] = object[i]; + } + // do the "toString" function manually + if (object.toStrng != this.toString && object.toString != {}.toString) { + object.toString.ancestor = this.toString; + this.toString = object.toString; + } + return this; +}, +toString: function() { + return "[common " + (this.constructor.name || "Object") + "]"; +}}; + +// create the root +function Common() { +//-- +// empty constructor function +//-- +}; +this.Common = ICommon.specialize({constructor: Common}); + +// c'est fini! +delete this.Common; + +var Fix = Common.specialize({ + constructor: function() { + this.fixes = []; + this.recalcs = []; + }, + init: DUMMY +}); + +// ----------------------------------------------------------------------- +// IE5.0 compatibility +// ----------------------------------------------------------------------- + +/* FAVELET */ + +// load an external module to patch IE5.0 and override the functions above +if (appVersion < 5.5) eval(loadFile("ie7-ie5.js", path)); + +// ----------------------------------------------------------------------- +// initialisation +// ----------------------------------------------------------------------- + +var _initialised = false; +IE7.init = function() { +try { + // prevent further loading + if (_initialised) return; + _initialised = complete = true; + + // frequently used references + body = document.body; + viewport = (quirksMode) ? body : documentElement; + + // apply CSS/DOM fixes + if (isHTML && ie7HTML) ie7HTML.apply(); + ie7CSS.apply(); + + recalc(); + + alert("loaded successfully"); +} catch ($error) { + alert("Error [2]: " + $error.description); +}}; + +// a store for functions that will be called when refreshing IE7 +var recalcs = []; +function addRecalc($recalc) { + recalcs.push($recalc); +}; +function recalc() { + cssQuery.clearCache(); + if (isHTML && ie7HTML) ie7HTML.recalc(); + // re-apply style sheet rules (re-calculate ie7 classes) + ie7CSS.recalc(); + // apply global fixes to the document + for (var i = 0; i < recalcs.length; i++) recalcs[i](); +}; + +// ----------------------------------------------------------------------- +// Parser +// ----------------------------------------------------------------------- + +/* --- (include) /my/src?ParseMaster.js --- */ +/* + ParseMaster, version 1.0 (pre-release) (2005/05/12) x6 + Copyright 2005, Dean Edwards + Web: http://dean.edwards.name/ + + This software is licensed under the CC-GNU LGPL + Web: http://creativecommons.org/licenses/LGPL/2.1/ +*/ + +/* a multi-pattern parser */ + +/* --- (include) http://dean.edwards.name/my/fix-ie5.js --- */ +/* --- (require) http://dean.edwards.name/common/common.js --- */ + +function ParseMaster() { + // constants + var $EXPRESSION = 0, $REPLACEMENT = 1, $LENGTH = 2; + // used to determine nesting levels + var $GROUPS = /\(/g, $SUB_REPLACE = /\$\d/, $INDEXED = /^\$\d+$/, + $TRIM = /(['"])\1\+(.*)\+\1\1$/, $$ESCAPE = /\\./g, $QUOTE = /'/, + $$DELETED = /\001[^\001]*\001/g; + function $DELETE($match, $offset){return "\001" + $match[$offset] + "\001"}; + // public + this.add = function($expression, $replacement) { + if (!$replacement) $replacement = $DELETE; + // count the number of sub-expressions + // - add one because each pattern is itself a sub-expression + var $length = (_internalEscape(String($expression)).match($GROUPS) || "").length + 1; + // does the pattern deal with sub-expressions? + if (typeof $replacement == "string" && $SUB_REPLACE.test($replacement)) { + // a simple lookup? (e.g. "$2") + if ($INDEXED.test($replacement)) { + // store the index (used for fast retrieval of matched strings) + $replacement = parseInt($replacement.slice(1)) - 1; + } else { // a complicated lookup (e.g. "Hello $2 $1") + // build a function to do the lookup + var i = $length; + var $quote = $QUOTE.test(_internalEscape($replacement)) ? '"' : "'"; + while (i) $replacement = $replacement.split("$" + i--).join($quote + "+a[o+" + i + "]+" + $quote); + $replacement = new Function("a,o", "return" + $quote + $replacement.replace($TRIM, "$1") + $quote); + } + } + // pass the modified arguments + _add($expression || "/^$/", $replacement, $length); + }; + // execute the global replacement + this.exec = function($string) { + return _unescape(_escape($string, this.escapeChar).replace( + new RegExp(_patterns, this.ignoreCase ? "gi" : "g"), _replacement), this.escapeChar).replace($$DELETED, ""); + }; + // clear the patterns collections so that this object may be re-used + this.reset = function() { + _patterns.length = 0; + }; + + // private + var _patterns = []; // patterns stored by index + var _toString = function(){return "(" + String(this[$EXPRESSION]).slice(1, -1) + ")"}; + _patterns.toString = function(){return this.join("|")}; + // create and add a new pattern to the patterns collection + function _add() { + arguments.toString = _toString; + // store the pattern - as an arguments object (i think this is quicker..?) + _patterns[_patterns.length] = arguments; + } + // this is the global replace function (it's quite complicated) + function _replacement() { + if (!arguments[0]) return ""; + var i = 1, j = 0, $pattern; + // loop through the patterns + while ($pattern = _patterns[j++]) { + // do we have a result? + if (arguments[i]) { + var $replacement = $pattern[$REPLACEMENT]; + switch (typeof $replacement) { + case "function": return $replacement(arguments, i); + case "number": return arguments[$replacement + i]; + default: return $replacement; + } + // skip over references to sub-expressions + } else i += $pattern[$LENGTH]; + } + }; + // encode escaped characters + var _escaped = []; + function _escape($string, $escapeChar) { + return $escapeChar ? $string.replace(new RegExp("\\" + $escapeChar + "(.)", "g"), function($match, $char) { + _escaped[_escaped.length] = $char; + return $escapeChar; + }) : $string; + }; + // decode escaped characters + function _unescape($string, $escapeChar) { + var i = 0; + return $escapeChar ? $string.replace(new RegExp("\\" + $escapeChar, "g"), function() { + return $escapeChar + (_escaped[i++] || ""); + }) : $string; + }; + function _internalEscape($string) { + return $string.replace($$ESCAPE, ""); + }; +}; +Common.specialize({ + constructor: ParseMaster, + ignoreCase: false, + escapeChar: "" +}); +var Parser = ParseMaster.specialize({ignoreCase: true}); + +// ----------------------------------------------------------------------- +// cssQuery +// ----------------------------------------------------------------------- + +/* --- (include) /my/cssQuery/src?cssQuery.js --- */ +/* + cssQuery, version 2.0 (2005/05/19) + Copyright: 2004-2005, Dean Edwards (http://dean.edwards.name/) + License: http://creativecommons.org/licenses/LGPL/2.1/ +*/ + +// the following functions allow querying of the DOM using CSS selectors +var cssQuery = function() { +var version = "2.0 (beta)"; + +// ----------------------------------------------------------------------- +// main query function +// ----------------------------------------------------------------------- + +var $COMMA = /\s*,\s*/; +var cssQuery = function($selector, $$from) { +try { + var $match = []; + var $useCache = arguments.callee.caching && !$$from; + var $base = ($$from) ? ($$from.constructor == Array) ? $$from : [$$from] : [document]; + // process comma separated selectors + var $$selectors = parseSelector($selector).split($COMMA), i; + for (i = 0; i < $$selectors.length; i++) { + // convert the selector to a stream + $selector = _toStream($$selectors[i]); + // faster chop if it starts with id (MSIE only) + if (isMSIE && $selector.slice(0, 3).join("") == " *#") { + $selector = $selector.slice(2); + $$from = _msie_selectById([], $base, $selector[1]); + } else $$from = $base; + // process the stream + var j = 0, $token, $filter, $arguments, $cacheSelector = ""; + while (j < $selector.length) { + $token = $selector[j++]; + $filter = $selector[j++]; + $cacheSelector += $token + $filter; + // some pseudo-classes allow arguments to be passes + // e.g. nth-child(even) + $arguments = ""; + if ($selector[j] == "(") { + while ($selector[j++] != ")") $arguments += $selector[j]; + $arguments = $arguments.slice(0, -1); + $cacheSelector += "(" + $arguments + ")"; + } + // process a token/filter pair use cached results if possible + $$from = ($useCache && cache[$cacheSelector]) ? + cache[$cacheSelector] : select($$from, $token, $filter, $arguments); + if ($useCache) cache[$cacheSelector] = $$from; + } + $match = $match.concat($$from); + } + delete cssQuery.error; + return $match; +} catch ($error) { + cssQuery.error = $error; + return []; +}}; + +// ----------------------------------------------------------------------- +// public interface +// ----------------------------------------------------------------------- + +cssQuery.toString = function() { + return "function cssQuery() {\n [version " + version + "]\n}"; +}; + +// caching +var cache = {}; +cssQuery.caching = false; +cssQuery.clearCache = function($selector) { + if ($selector) { + $selector = _toStream($selector).join(""); + delete cache[$selector]; + } else cache = {}; +}; + +// allow extensions +var modules = {}; +var loaded = false; +cssQuery.addModule = function($name, $script) { + if (loaded) eval("$script=" + String($script)); + modules[$name] = new $script();; +}; + +// hackery +cssQuery.valueOf = function($code) { + return $code ? eval($code) : this; +}; + +// ----------------------------------------------------------------------- +// declarations +// ----------------------------------------------------------------------- + +var selectors = {}; +var pseudoClasses = {}; +var attributeSelectors = []; + +// ----------------------------------------------------------------------- +// selectors +// ----------------------------------------------------------------------- + +// descendant selector +selectors[" "] = function($results, $from, $tagName, $namespace) { + // loop through current selection + var $element, i, j; + for (i = 0; i < $from.length; i++) { + // get descendants + var $subset = getElementsByTagName($from[i], $tagName, $namespace); + // loop through descendants and add to results selection + for (j = 0; ($element = $subset[j]); j++) { + if (thisElement($element) && compareNamespace($element, $namespace)) + $results.push($element); + } + } +}; + +// ID selector +selectors["#"] = function($results, $from, $id) { + // loop through current selection and check ID + var $element, j; + for (j = 0; ($element = $from[j]); j++) if ($element.id == $id) $results.push($element); +}; + +// class selector +selectors["."] = function($results, $from, $className) { + // create a RegExp version of the class + $className = new RegExp("(^|\\s)" + $className + "(\\s|$)"); + // loop through current selection and check class + var $element, i; + for (i = 0; ($element = $from[i]); i++) + if ($className.test($element.className)) $results.push($element); +}; + +// pseudo-class selector +selectors[":"] = function($results, $from, $pseudoClass, $arguments) { + // retrieve the cssQuery pseudo-class function + var $test = pseudoClasses[$pseudoClass], $element, i; + // loop through current selection and apply pseudo-class filter + if ($test) for (i = 0; ($element = $from[i]); i++) + // if the cssQuery pseudo-class function returns "true" add the element + if ($test($element, $arguments)) $results.push($element); +}; + +// ----------------------------------------------------------------------- +// pseudo-classes +// ----------------------------------------------------------------------- + +pseudoClasses["link"] = function($element) { + var $document = getDocument($element); + if ($document.links) for (var i = 0; i < $document.links.length; i++) { + if ($document.links[i] == $element) return true; + } +}; + +pseudoClasses["visited"] = function($element) { + // can't do this without jiggery-pokery +}; + +// ----------------------------------------------------------------------- +// DOM traversal +// ----------------------------------------------------------------------- + +// IE5.x includes comments (LOL) in it's elements collections. +// so we have to check for this. the test is tagName != "!". LOL (again). +var thisElement = function($element) { + return ($element && $element.nodeType == 1 && $element.tagName != "!") ? $element : null; +}; + +// return the previous element to the supplied element +// previousSibling is not good enough as it might return a text or comment node +var previousElementSibling = function($element) { + while ($element && ($element = $element.previousSibling) && !thisElement($element)) continue; + return $element; +}; + +// return the next element to the supplied element +var nextElementSibling = function($element) { + while ($element && ($element = $element.nextSibling) && !thisElement($element)) continue; + return $element; +}; + +// return the first child ELEMENT of an element +// NOT the first child node (though they may be the same thing) +var firstElementChild = function($element) { + return thisElement($element.firstChild) || nextElementSibling($element.firstChild); +}; + +var lastElementChild = function($element) { + return thisElement($element.lastChild) || previousElementSibling($element.lastChild); +}; + +// return child elements of an element (not child nodes) +var childElements = function($element) { + var $childElements = []; + $element = firstElementChild($element); + while ($element) { + $childElements.push($element); + $element = nextElementSibling($element); + } + return $childElements; +}; + +// ----------------------------------------------------------------------- +// browser compatibility +// ----------------------------------------------------------------------- + +// all of the functions in this section can be overwritten. the default +// configuration is for IE. The functions below reflect this. standard +// methods are included in a separate module. It would probably be better +// the other way round of course but this makes it easier to keep IE7 trim. + +var isMSIE = true; + +var isXML = function($element) { + return getDocument($element).mimeType == "XML Document"; +}; + +// return the element's containing document +var getDocument = function($element) { + return $element.ownerDocument || $element.document; +}; + +var getElementsByTagName = function($element, $tagName) { + return ($tagName == "*" && $element.all) ? $element.all : $element.getElementsByTagName($tagName); +}; + +var compareTagName = function($element, $tagName, $namespace) { + if ($tagName == "*") return thisElement($element); + if (!compareNamespace($element, $namespace)) return false; + if (!isXML($element)) $tagName = $tagName.toUpperCase(); + return $element.tagName == $tagName; +}; + +var compareNamespace = function($element, $namespace) { + return !$namespace || ($namespace == "*") || ($element.scopeName == $namespace); +}; + +var getTextContent = function($element) { + return $element.innerText; +}; + +function _msie_selectById($results, $from, id) { + var $match, i, j; + for (i = 0; i < $from.length; i++) { + if ($match = $from[i].all.item(id)) { + if ($match.length == null) $results.push($match); + else for (j = 0; j < $match.length; j++) $results.push($match[j]); + } + } + return $results; +}; + +// ----------------------------------------------------------------------- +// query support +// ----------------------------------------------------------------------- + +// select a set of matching elements. +// "from" is an array of elements. +// "token" is a character representing the type of filter +// e.g. ">" means child selector +// "filter" represents the tag name, id or class name that is being selected +// the function returns an array of matching elements +var $NAMESPACE = /\|/; +function select($$from, $token, $filter, $arguments) { + if ($NAMESPACE.test($filter)) { + $filter = $filter.split($NAMESPACE); + $arguments = $filter[0]; + $filter = $filter[1]; + } + var $results = []; + if (selectors[$token]) { + selectors[$token]($results, $$from, $filter, $arguments); + } + return $results; +}; + +// ----------------------------------------------------------------------- +// parsing +// ----------------------------------------------------------------------- + +// convert css selectors to a stream of tokens and filters +// it's not a real stream. it's just an array of strings. +var $STANDARD_SELECT = /^[^\s>+~]/; +var $$STREAM = /[\s#.:>+~()@]|[^\s#.:>+~()@]+/g; +function _toStream($selector) { + if ($STANDARD_SELECT.test($selector)) $selector = " " + $selector; + return $selector.match($$STREAM) || []; +}; + +var $WHITESPACE = /\s*([\s>+~(),]|^|$)\s*/g; +var $IMPLIED_ALL = /([\s>+~,]|[^(]\+|^)([#.:@])/g; +var parseSelector = function($selector) { + return $selector + // trim whitespace + .replace($WHITESPACE, "$1") + // e.g. ".class1" --> "*.class1" + .replace($IMPLIED_ALL, "$1*$2"); +}; + +var Quote = { + toString: function() {return "'"}, + match: /^('[^']*')|("[^"]*")$/, + test: function($string) { + return this.match.test($string); + }, + add: function($string) { + return this.test($string) ? $string : this + $string + this; + }, + remove: function($string) { + return this.test($string) ? $string.slice(1, -1) : $string; + } +}; + +var getText = function($text) { + return Quote.remove($text); +}; + +var $ESCAPE = /([\/()[\]?{}|*+-])/g; +function regEscape($string) { + return $string.replace($ESCAPE, "\\$1"); +}; + +// ----------------------------------------------------------------------- +// modules +// ----------------------------------------------------------------------- + +// -------- >> insert modules here for packaging << -------- \\ + +loaded = true; + +// ----------------------------------------------------------------------- +// return the query function +// ----------------------------------------------------------------------- + +return cssQuery; + +}(); // cssQuery +cssQuery.caching = true; +cssQuery.addModule("ie7", function() { + thisElement = function($element) { + return ($element && $element.nodeType == 1 && $element.tagName != "!" && !$element.ie7_anon) ? $element : null; + }; +}); +cssQuery.valueOf("getText=arguments[1]", getString); + +// ----------------------------------------------------------------------- +// IE7 CSS +// ----------------------------------------------------------------------- + + +var ie7CSS = new (Fix.specialize({ // single instance + parser: new Parser, + styles: [], + screen: "", + print: "", + init: function() { + this.createStyleSheet(); + this.refresh(); + }, + refresh: function($media) { + ie7CSS.styleSheet.cssText = HEADER + this.screen + this.print; + }, + apply: function($media) { + // load inline styles + var $$styleSheets = document.getElementsByTagName("style"), $styleSheet; + for (var i = $$styleSheets.length - 1; ($styleSheet = $$styleSheets[i]); i--) { + if (!$styleSheet.disabled && !$styleSheet.ie7) { + this.styles.push($styleSheet.innerHTML); + } + } + this.refresh(); + new StyleSheet("screen"); + this.trash(); + }, + addFix: function($expression, $replacement) { + this.parser.add($expression, $replacement); + }, + recalc: function() { + // we're going to read through all style rules. + // certain rules have had ie7 properties added to them. + // e.g. p{top:0; ie7_recalc2:1; left:0} + // this flags a property in the rule as needing a fix. + // the selector text is then used to query the document. + // we can then loop through the results of the query + // and fix the elements. + // we ignore the IE7 rules - so count them in the header + var $RECALCS = /ie7_recalc\d+/g; + var $start = HEADER.match(/[{,]/g).length; + // only calculate screen fixes. print fixes don't show up anyway + var $$stop = $start + this.screen.cssText.match(/\{/g).length; + var $$rules = this.styleSheet.rules, $rule; + var $$calcs, $calc, $$elements, $element, i, j, k, id; + // loop through all rules + for (i = $start; i < $$stop; i++) { + $rule = $$rules[i]; + // search for the "ie7_recalc" flag (there may be more than one) + if ($rule && ($$calcs = $rule.style.cssText.match($RECALCS))) { + // use the selector text to query the document + $$elements = cssQuery($rule.selectorText); + // if there are matching elements then loop + // through the recalc functions and apply them + // to each element + if ($$elements.length) for (j = 0; j < $$calcs.length; j++) { + // get the matching flag (e.g. ie7_recalc3) + id = $$calcs[j]; + // extract the numeric id from the end of the flag + // and use it to index the collection of recalc + // functions + $calc = ie7CSS.recalcs[id.slice(10)][2]; + for (k = 0; ($element = $$elements[k]); k++) { + // apply the fix + if ($element.currentStyle[id]) $calc($element); + } + } + } + } + }, + // recalcs occur whenever the document is refreshed using document.recalc() + addRecalc: function($propertyName, $test, $handler, $replacement) { + $test = new RegExp("([{;\\s])" + $propertyName + "\\s*:\\s*" + $test + "[^;}]*"); + var $id = this.recalcs.length; + if ($replacement) $replacement = $propertyName + ":" + $replacement; + this.addFix($test, function($match, $offset) { + return ($replacement ? $match[$offset + 1] + $replacement : $match[$offset]) + + ";ie7-" + $match[$offset].slice(1) + ";ie7_recalc" + $id + ":1"; + }); + this.recalcs.push(arguments); + return $id; + }, + // retrieve the text of a style sheet + getText: function($styleSheet) { + // without the CSS2 module we assume CSS1, so it is safe to get Microsoft's stored text + return $styleSheet.cssText || $styleSheet.$cssText; + }, + createStyleSheet: function() { + // create the IE7 style sheet + if (complete || !isHTML) document.createStyleSheet(); + // this fixes a bug to do with the tag + else document.write(""); + // get the new style sheet + this.styleSheet = styleSheets[styleSheets.length - 1]; + // flag it so we can ignore it during parsing + this.styleSheet.ie7 = true; + this.styleSheet.cssText = HEADER; + }, + trash: function() { + // trash the old style sheets + var styleSheet, i; + for (i = 0; i < styleSheets.length; i++) { + styleSheet = styleSheets[i]; + if (!styleSheet.ie7) { + styleSheet.$cssText = styleSheet.cssText; + styleSheet.cssText = ""; + } + } + } +})); + +// ----------------------------------------------------------------------- +// IE7 StyleSheet class +// ----------------------------------------------------------------------- + +function StyleSheet($media) { + this.media = $media; + this.load(); + ie7CSS[$media] = this; + ie7CSS.refresh(); +}; +ICommon.specialize({ + constructor: StyleSheet, + toString: function() { + return "@media " + this.media + "{" + this.cssText + "}"; + }, + cssText: "", + recalc: DUMMY, + load: function() { + this.getText(); + this.parse(); + this.cssText = _decode(this.cssText); + }, + getText: function() { + // store for style sheet text + var _inlineStyles = [].concat(ie7CSS.styles); + // parse media decalarations + var $MEDIA = /@media\s+([^{]*)\{([^@]+\})\s*\}/gi; + var $ALL = /\ball\b|^$/i, $SCREEN = /\bscreen\b/i, $PRINT = /\bprint\b/i; + function _parseMedia($cssText, $media) { + _replaceMedia.$value = $media; + return $cssText.replace($MEDIA, _replaceMedia); + }; + function _replaceMedia($$match, $media, $cssText) { + $media = _simpleMedia($media); + switch ($media) { + case "screen": + case "print": + if ($media != _replaceMedia.$value) return ""; + case "all": + return $cssText; + } + return ""; + }; + function _simpleMedia($media) { + if ($ALL.test($media)) return "all"; + else if ($SCREEN.test($media)) return ($PRINT.test($media)) ? "all" : "screen"; + else if ($PRINT.test($media)) return "print"; + }; + var self = this; + function _getCSSText($styleSheet, $path, $media, $level) { + var $cssText = ""; + if (!$level) { + $media = _simpleMedia($styleSheet.media); + $level = 0; + } + if ($media == "all" || $media == self.media) { + // IE only allows importing style sheets three levels deep. + // it will crash if you try to access a level below this + if ($level < 3) { + // loop through imported style sheets + for (var i = 0; i < $styleSheet.imports.length; i++) { + // call this function recursively to get all imported style sheets + $cssText += _getCSSText($styleSheet.imports[i], getPath($styleSheet.href, $path), $media, $level + 1); + } + } + // retrieve inline style or load an external style sheet + $cssText += _encode($styleSheet.href ? _loadStyleSheet($styleSheet, $path) : _inlineStyles.pop() || ""); + $cssText = _parseMedia($cssText, self.media); + } + return $cssText; + }; + // store loaded cssText URLs + var $fileCache = {}; + // load an external style sheet + function _loadStyleSheet($styleSheet, $path) { + var $url = makePath($styleSheet.href, $path); + // if the style sheet has already loaded then don't duplicate it + if ($fileCache[$url]) return ""; + // load from source + $fileCache[$url] = ($styleSheet.disabled) ? "" : + _fixUrls(ie7CSS.getText($styleSheet, $path), getPath($styleSheet.href, $path)); + return $fileCache[$url]; + }; + // fix css paths + // we're lumping all css text into one big style sheet so relative + // paths have to be fixed. this is necessary anyway because of other + // explorer bugs. + var $URL = /(url\s*\(\s*['"]?)([\w\.]+[^:\)]*['"]?\))/gi; + function _fixUrls($cssText, $pathname) { + // hack & slash + return $cssText.replace($URL, "$1" + $pathname.slice(0, $pathname.lastIndexOf("/") + 1) + "$2"); + }; + + // load all style sheets in the document + for (var i = 0; i < styleSheets.length; i++) { + if (!styleSheets[i].disabled && !styleSheets[i].ie7) { + this.cssText += _getCSSText(styleSheets[i]); + } + } + }, // end: load + parse: function() { + this.cssText = ie7CSS.parser.exec(this.cssText); + }, + recalc: DUMMY +}); + +// ----------------------------------------------------------------------- +// encoding +// ----------------------------------------------------------------------- + +var Quote = cssQuery.valueOf("Quote"); +var _strings = []; + +function _encode($cssText) { + return encoder.exec(safeString.exec($cssText)); +}; + +function _encodeString($match, $offset) { + return Quote + (_strings.push($match[$offset]) - 1) + Quote; +}; + +function getString($value) { + return Quote.test($value) ? eval(_strings[eval($value)]) : $value; +}; + +var encoder = new Parser; +// comments +encoder.add(/\/\*[^*]*\*+([^\/][^*]*\*+)*\//); +// strings +encoder.add(/'[^']*'/, _encodeString); +encoder.add(/"[^"]*"/, _encodeString); +// white space +encoder.add(/\s+/, " "); +// get rid +encoder.add(/@(namespace|import)[^;\n]+[;\n]|/); + +var safeString = new Parser; +safeString.add(/\\'/, "\\x27"); +safeString.add(/\\"/, "\\x22"); + +// ----------------------------------------------------------------------- +// decoding +// ----------------------------------------------------------------------- + +var decoder = new Parser; +// comments +decoder.add(/'(\d+)'/, _decodeString); + +function _decode($cssText) { + return decoder.exec($cssText); +}; + +function _decodeString($match, $offset) { + return _strings[$match[$offset + 1]]; +}; + +// ----------------------------------------------------------------------- +// event handling +// ----------------------------------------------------------------------- + +var _handlers = []; + +function addResize($handler) { + if (quirksMode) addRecalc($handler); + addEventHandler(window, "onresize", $handler); +}; + +// add an event handler (function) to an element +function addEventHandler($element, $type, $handler) { + $element.attachEvent($type, $handler); + // store the handler so it can be detached later + _handlers.push(arguments); +}; + +// remove an event handler assigned to an element by IE7 +function removeEventHandler($element, $type, $handler) { +try { + $element.detachEvent($type, $handler); +} catch ($ignore) { + // write a letter of complaint to microsoft.. +}}; + +// remove event handlers (they eat memory) +window.attachEvent("onunload", function() { + while (_handlers.length) { + var $handler = _handlers.pop(); + removeEventHandler($handler[0], $handler[1], $handler[2]); + }; +}); + +function register($handler, $element, $condition) { // -@DRE + //var $set = $handler[$element.uniqueID]; + if (!$handler.elements) $handler.elements = {}; + if ($condition) $handler.elements[$element.uniqueID] = $element; + else delete $handler.elements[$element.uniqueID]; + //return !$set && $condition; + return $condition; +}; + +// ----------------------------------------------------------------------- +// events +// ----------------------------------------------------------------------- + +addEventHandler(window, "onbeforeprint", function() { + if (!ie7CSS.print) new StyleSheet("print"); + ie7CSS.print.recalc(); +}); + +// ----------------------------------------------------------------------- +// pixel conversion +// ----------------------------------------------------------------------- + +// this is handy because it means that web developers can mix and match +// measurement units in their style sheets. it is not uncommon to +// express something like padding in "em" units whilst border thickness +// is most often expressed in pixels. + +var PIXEL = /^\d+(px)?$/i; +var PERCENT = /^\d+%$/; +var getPixelValue = function($element, $value) { + if (PIXEL.test($value)) return parseInt($value); + var $style = $element.style.left; + var $runtimeStyle = $element.runtimeStyle.left; + $element.runtimeStyle.left = $element.currentStyle.left; + $element.style.left = $value || 0; + $value = $element.style.pixelLeft; + $element.style.left = $style; + $element.runtimeStyle.left = $runtimeStyle; + return $value; +}; + +// create a temporary element which is used to inherit styles +// from the target element. the temporary element can be resized +// to determine pixel widths/heights +function createTempElement($tagName) { + var $element = document.createElement($tagName || "object"); + $element.style.cssText = "position:absolute;padding:0;display:block;border:none;clip:rect(0 0 0 0);left:-9999"; + $element.ie7_anon = true; + return $element; +}; + +// ----------------------------------------------------------------------- +// generic +// ----------------------------------------------------------------------- + +var _IE7_ = "ie7-"; + +function isFixed($element) { + return $element.currentStyle["ie7-position"] == "fixed"; +}; + +// original style +function getDefinedStyle($element, $propertyName) { + return $element.currentStyle[_IE7_ + $propertyName] || $element.currentStyle[$propertyName]; +}; + +function setOverrideStyle($element, $propertyName, $value) { + if ($element.currentStyle[_IE7_ + $propertyName] == null) { + $element.runtimeStyle[_IE7_ + $propertyName] = $element.currentStyle[$propertyName]; + } + $element.runtimeStyle[$propertyName] = $value; +}; + +function addTimer($object, $cssText, $url) { + var $timer = setInterval(function() { + try { + // wait until the object has loaded + if (!$object.load) return; + $object.load($object, $cssText, $url); + clearInterval($timer); + } catch ($ignore) { + // remote scripting + clearInterval($timer); + }}, 10); +}; + +// ----------------------------------------------------------------------- +// modules +// ----------------------------------------------------------------------- + +// -------- >> insert modules here for packaging << -------- \\ + +loaded = true; + +// ----------------------------------------------------------------------- +// quirks mode patches +// ----------------------------------------------------------------------- + +/* FAVELET */ + +// load an external module to patch IE in quirks mode and override the functions above +if (quirksMode) eval(loadFile("ie7-quirks.js", path)); + +// ----------------------------------------------------------------------- +// initialise +// ----------------------------------------------------------------------- + +ie7CSS.init(); + +// this script may be inserted via a favelet so the page may already be loaded +if (complete) IE7.init(); +else { + // if we can load behaviors then use ondocumentready + documentElement.addBehavior(makePath("ie7-load.htc", path)); + // otherwise this will kick in + addEventHandler(document, "onreadystatechange", function() { + // if we are going to wait this long then wem may as well let + // window.onload execute first + if (document.readyState == "complete") setTimeout(IE7.init, 0); + }); +} + +// ----------------------------------------------------------------------- +// error handling +// ----------------------------------------------------------------------- + +} catch ($error) { + alert("Error [0]: " + $error.description); +} finally { + // have a beer... +}}; diff --git a/html2005/ie7/src/ie7-css-strict.js b/html2005/ie7/src/ie7-css-strict.js new file mode 100644 index 0000000..9de91c1 --- /dev/null +++ b/html2005/ie7/src/ie7-css-strict.js @@ -0,0 +1,71 @@ +/* + IE7, version 0.8 (alpha) (2005/05/23) + Copyright: 2004-2005, Dean Edwards (http://dean.edwards.name/) + License: http://creativecommons.org/licenses/LGPL/2.1/ +*/ + +IE7.addModule("ie7-css-strict", function() { + +// requires another module +if (!modules["ie7-css2-selectors"]) return; + +// ----------------------------------------------------------------------- +// IE7 StyleSheet class +// ----------------------------------------------------------------------- +StyleSheet.prototype.specialize({ + // override the createRule method - ALL rules are now IE7 rules + parse: function() { + this.inherit(); + // there is no decoding as such any more as all rules are IE7 rules. + // we'll sort the rules and build a new style sheet + var $rules = [].concat(this.rules); + $rules.sort(ie7CSS.Rule.compare); + this.cssText = $rules.join("\n"); + }, + // override the createRule method - ALL rules are now IE7 rules + createRule: function($selector, $cssText) { + var $match; + if ($match = $selector.match(ie7CSS.PseudoElement.MATCH)) + return new ie7CSS.PseudoElement($match[1], $match[2], $cssText); + else if ($match = $selector.match(ie7CSS.DynamicRule.MATCH)) + return new ie7CSS.DynamicRule($selector, $match[1], $match[2], $match[3], $cssText); + else + return new ie7CSS.Rule($selector, $cssText); + } +}); + +// ----------------------------------------------------------------------- +// IE7 CSS +// ----------------------------------------------------------------------- + +ie7CSS.specialize({ + apply: function() { + this.inherit(); + this.Rule.MATCH = /([^{}]+)(\{[^{}]*\})/g; + } +}); + +// sort function +ie7CSS.Rule.compare = function($rule1, $rule2) { + return $rule1.specificity - $rule2.specificity; +}; + +// calculate specificity for a given selector +var $NONE = [], $ID = /#/g, $CLASS = /[.:\[]/g, $TAG = /^\w|[\s>+~]\w/g; +ie7CSS.Rule.score = function($selector) { + return ($selector.match($ID)||$NONE).length * 10000 + + ($selector.match($CLASS)||$NONE).length * 100 + + ($selector.match($TAG)||$NONE).length; +}; + +ie7CSS.Rule.simple = function() {return ""}; + +ie7CSS.Rule.prototype.specialize({ + specificity: 0, + init: function() { + // calculate specificity (rules are sorted on this value) + this.specificity = ie7CSS.Rule.score(this.selector); + } +}); + +}); diff --git a/html2005/ie7/src/ie7-css2-selectors.js b/html2005/ie7/src/ie7-css2-selectors.js new file mode 100644 index 0000000..6105595 --- /dev/null +++ b/html2005/ie7/src/ie7-css2-selectors.js @@ -0,0 +1,570 @@ +/* + IE7, version 0.8 (alpha) (2005/05/23) + Copyright: 2004-2005, Dean Edwards (http://dean.edwards.name/) + License: http://creativecommons.org/licenses/LGPL/2.1/ +*/ + +IE7.addModule("ie7-css2-selectors", function() { + +/* + cssQuery, version 2.0 (2005/05/23) + Copyright: 2004-2005, Dean Edwards (http://dean.edwards.name/) + License: http://creativecommons.org/licenses/LGPL/2.1/ +*/ + +cssQuery.addModule("css-level2", function() { + +// ----------------------------------------------------------------------- +// selectors +// ----------------------------------------------------------------------- + +// child selector +selectors[">"] = function($results, $from, $tagName, $namespace) { + var $element, i, j; + for (i = 0; i < $from.length; i++) { + var $subset = childElements($from[i]); + for (j = 0; ($element = $subset[j]); j++) + if (compareTagName($element, $tagName, $namespace)) + $results.push($element); + } +}; + +// sibling selector +selectors["+"] = function($results, $from, $tagName, $namespace) { + for (var i = 0; i < $from.length; i++) { + var $element = nextElementSibling($from[i]); + if ($element && compareTagName($element, $tagName, $namespace)) + $results.push($element); + } +}; + +// attribute selector +selectors["@"] = function($results, $from, $attributeSelectorID) { + var $test = attributeSelectors[$attributeSelectorID].test; + var $element, i; + for (i = 0; ($element = $from[i]); i++) + if ($test($element)) $results.push($element); +}; + +// ----------------------------------------------------------------------- +// pseudo-classes +// ----------------------------------------------------------------------- + +pseudoClasses["first-child"] = function($element) { + return !previousElementSibling($element); +}; + +pseudoClasses["lang"] = function($element, $code) { + $code = new RegExp("^" + $code, "i"); + while ($element && !$element.getAttribute("lang")) $element = $element.parentNode; + return $element && $code.test($element.getAttribute("lang")); +}; + +// ----------------------------------------------------------------------- +// attribute selectors +// ----------------------------------------------------------------------- + +// constructor +var AttributeSelector = {}; +// constants +AttributeSelector.PREFIX = "@"; +// class properties +AttributeSelector.tests = {}; +AttributeSelector.match = /\[([\w-]+)\s*(\W?=)?\s*([^\]]*)\]/g; +// class methods +AttributeSelector.replace = function($match, $attribute, $compare, $value) { + var $key = AttributeSelector.PREFIX + $match; + if (!attributeSelectors[$key]) { + $attribute = AttributeSelector.create($attribute, $compare || "", $value || ""); + // store the selector + attributeSelectors[$key] = $attribute; + attributeSelectors.push($attribute); + } + return attributeSelectors[$key].id; +}; +AttributeSelector.parse = function($selector) { + return $selector.replace(this.match, this.replace); +}; +AttributeSelector.create = function($propertyName, $test, $value) { + var $attributeSelector = {}; + $attributeSelector.id = AttributeSelector.PREFIX + attributeSelectors.length; + $attributeSelector.name = $propertyName; + $test = this.tests[$test]; + $test = $test ? $test(AttributeSelector.getAttribute($propertyName), getText($value)) : false; + $attributeSelector.test = new Function("e", "return " + $test); + return $attributeSelector; +}; +AttributeSelector.getAttribute = function($name) { + switch ($name.toLowerCase()) { + case "id": + return "e.id"; + case "class": + return "e.className"; + case "for": + return "e.htmlFor"; + case "href": + if (isMSIE) { + // IE always returns the full path not the fragment in the href attribute + // so we RegExp it out of outerHTML. Opera does the same thing but there + // is no way to get the original attribute. + return "String((e.outerHTML.match(/href=\"?([^\\s\"]*)\"?/)||[])[1]||'')"; + } + } + return "e.getAttribute('" + $name + "')"; +}; + +// allow the CSS3 module to see this class +this.AttributeSelector = AttributeSelector; + +// ----------------------------------------------------------------------- +// attribute selector tests +// ----------------------------------------------------------------------- + +AttributeSelector.tests[""] = function($attribute) { + return $attribute; +}; + +AttributeSelector.tests["="] = function($attribute, $value) { + return $attribute + "==" + Quote.add($value); +}; + +AttributeSelector.tests["~="] = function($attribute, $value) { + return "/(^|\\s)" + regEscape($value) + "(\\s|$)/.test(" + $attribute + ")"; +}; + +AttributeSelector.tests["|="] = function($attribute, $value) { + return "/^" + regEscape($value) + "(-|$)/.test(" + $attribute + ")"; +}; + +// ----------------------------------------------------------------------- +// parsing +// ----------------------------------------------------------------------- + +// override parseSelector to parse out attribute selectors +var _parseSelector = parseSelector; +parseSelector = function($selector) { + return _parseSelector(AttributeSelector.parse($selector)); +}; + +}); // addModule +var css2 = cssQuery.valueOf("modules['css-level2']"); + +// ----------------------------------------------------------------------- +// IE7 StyleSheet class +// ----------------------------------------------------------------------- + +// constants +var $HYPERLINK = /a(#[\w-]+)?(\.[\w-]+)?:(hover|active)/i; +var $BRACE1 = /\s*\{\s*/, $BRACE2 = /\s*\}\s*/; +var $FIRST_LINE_LETTER = /(.*)(:first-(line|letter))/; + +StyleSheet.prototype.specialize({ + parse: function() { + this.inherit(); + // parse the style sheet + var $offset = ie7CSS.rules.length; + var $$rules = this.cssText.split($BRACE2), $rule; + var $$selectors, $cssText, i, j; + for (i = 0; i < $$rules.length; i++) { + $rule = $$rules[i].split($BRACE1); + $$selectors = $rule[0].split(","); + if ($cssText = $rule[1]) { + for (j = 0; j < $$selectors.length; j++) { + $$selectors[j] = this.createRule($$selectors[j], $cssText); + } + } + $$rules[i] = $$selectors.join("\n"); + } + this.cssText = $$rules.join("\n"); + this.rules = ie7CSS.rules.slice($offset); + }, + recalc: function() { + var $rule, i; + for (i = 0; ($rule = this.rules[i]); i++) $rule.recalc(); + }, + createRule: function($selector, $cssText) { + if (ie7CSS.UNKNOWN.test($selector)) { + var $match; + if ($match = $selector.match(PseudoElement.MATCH)) { + return new PseudoElement($match[1], $match[2], $cssText); + } else if ($match = $selector.match(DynamicRule.MATCH)) { + if (!isHTML || !$HYPERLINK.test($match)) { + return new DynamicRule($selector, $match[1], $match[2], $match[3], $cssText); + } + } else return new Rule($selector, $cssText); + } + return $selector + " {" + $cssText + "}"; + } +}); + +// ----------------------------------------------------------------------- +// IE7 CSS +// ----------------------------------------------------------------------- + +ie7CSS.specialize({ + // collections + rules: [], + pseudoClasses: cssQuery.valueOf("pseudoClasses"), + dynamicPseudoClasses: {}, + // cssQuery cache + cache: cssQuery.valueOf("cache"), + // classes + Rule: Rule, + DynamicRule: DynamicRule, + PseudoElement: PseudoElement, + DynamicPseudoClass: DynamicPseudoClass, + // create regular expressions + apply: function() { + var $pseudoClasses = this.pseudoClasses + "|before|after|" + this.dynamicPseudoClasses; + $pseudoClasses = $pseudoClasses.replace(/(link|visited)\|/g, ""); + this.UNKNOWN = new RegExp("[>+~\[]|([:.])[\\w-()]+\\1|:(" + $pseudoClasses + ")"); + Rule.COMPLEX = new RegExp("[^\\s(]+\\s*[+~]|@\\d+|:(" + $pseudoClasses + ")", "g"); + DynamicRule.MATCH = new RegExp("(.*):(" + this.dynamicPseudoClasses + ")(.*)"); + PseudoElement.MATCH = /(.*):(before|after).*/; + this.inherit(); + }, + recalc: function() { + this.screen.recalc(); + this.inherit(); + }, + getText: function($styleSheet, $path) { + // override getCSSText function defined in ie7-core.js. + // explorer will trash unknown selectors (it converts them to "UNKNOWN"). + // so we must reload external style sheets (internal style sheets can have their text + // extracted through the innerHTML property). + // load the style sheet text from an external file + return httpRequest ? (loadFile($styleSheet.href, $path) || $styleSheet.cssText) + : this.inherit($styleSheet); + } +}); // ie7CSS; + +// ----------------------------------------------------------------------- +// IE7 style rules +// ----------------------------------------------------------------------- + +// constructor +function Rule($selector, $cssText) { + this.id = ie7CSS.rules.length; + this.className = Rule.PREFIX + this.id; + $selector = ($selector).match($FIRST_LINE_LETTER) || $selector || "*"; + this.selector = $selector[1] || $selector; + this.selectorText = Rule.simple(this.selector) + "." + this.className + ($selector[2] || ""); + this.cssText = $cssText; + this.MATCH = new RegExp("\\s" + this.className + "(\\s|$)", "g"); + ie7CSS.rules.push(this); + this.init(); +}; +// protoytype +ICommon.specialize({ + // properties + constructor: Rule, + toString: function() { + return this.selectorText + " {" + this.cssText + "}"; + }, +//- id: 0, +//- className: "", +//- selector: "", +//- cssText: "", +//- MATCH: null, + // methods + init: DUMMY, + add: function($element) { + // allocate this class + $element.className += " " + this.className; + }, + remove: function($element) { + // deallocate this class + $element.className = $element.className.replace(this.MATCH, "$1"); + }, + recalc: function() { + // execute the underlying css query for this class + var $match = ie7CSS.cache[" *." + this.className] = cssQuery(this.selector); + // add the class name for all matching elements + for (i = 0; i < $match.length; i++) this.add($match[i]); + } +}); +// constants +Rule.PREFIX = "ie7_class"; +Rule.CHILD = />/g; +// class methods +Rule.simple = function($selector) { + // attempt to preserve specificity for "loose" parsing by + // removing unknown tokens from a css selector but keep as + // much as we can.. + $selector = css2.AttributeSelector.parse($selector); + return $selector.replace(this.COMPLEX, "").replace(this.CHILD, " "); +}; + +// ----------------------------------------------------------------------- +// IE7 dynamic style +// ----------------------------------------------------------------------- + +// class properties: +// attach: the element that an event handler will be attached to +// target: the element that will have the IE7 class applied + +// constructor +function DynamicRule($selector, $attach, $dynamicPseudoClass, $target, $cssText) { + // initialise object properties + this.attach = $attach || "*"; + this.dynamicPseudoClass = ie7CSS.dynamicPseudoClasses[$dynamicPseudoClass]; + this.target = $target; + this.inherit($selector, $cssText); +}; +// protoytype +Rule.specialize({ + // properties + constructor: DynamicRule, +//- attach: "", +//- dynamicPseudoClass: null, +//- target: "", + // methods + recalc: function() { + // execute the underlying css query for this class + var $match = cssQuery(this.attach); + // process results + for (var i = 0; i < $match.length; i++) { + // retrieve the event handler's target $element(s) + var $target = (this.target) ? cssQuery(this.target, $match[i]) : [$match[i]]; + // attach event handlers for dynamic pseudo-classes + if ($target.length) this.dynamicPseudoClass.apply($match[i], $target, this); + } + } +}); + +// ----------------------------------------------------------------------- +// IE7 pseudo elements +// ----------------------------------------------------------------------- + +// constants +var $ATTR = /^attr/, $VALUES = /'\d+'|attr\([\w-]+\)/g; +var $URL = /^url\s*\(\s*([^)]*)\)$/; +var $MAP = { + before0: "beforeBegin", + before1: "afterBegin", + after0: "afterEnd", + after1: "beforeEnd" +}; + +var _contentPath = makePath("ie7-content.htc", path) + "?"; + +// CSS text required by the "content" property +HEADER += ".ie7_anon{display:none}"; + +// constructor +function PseudoElement($selector, $position, $cssText) { + // initialise object properties + this.position = $position; + var $$content = $cssText.match(PseudoElement.CONTENT), $match, $entity; + if ($$content) { + $$content = $$content[1]; + if ($match = $$content.match($VALUES)) { + for (var i = 0; ($entity = $match[i]); i++) { + $match[i] = $ATTR.test($entity) ? {attr: $entity.slice(5, -1)} : getString($entity); + } + $$content = $match; + } + } + this.content = $$content; + // CSS text needs to be decoded immediately + this.inherit($selector, _decode($cssText)); +}; +// prototype +Rule.specialize({ + constructor: PseudoElement, + toString: function() { + return "." + this.className + "{display:inline}"; + }, + init: function() { + // execute the underlying css query for this class + this.match = cssQuery(this.selector); + for (var i = 0; i < this.match.length; i++) { + var $runtimeStyle = this.match[i].runtimeStyle; + if (!$runtimeStyle[this.position]) $runtimeStyle[this.position] = {cssText:""}; + $runtimeStyle[this.position].cssText += ";" + this.cssText; + if (this.content != null) $runtimeStyle[this.position].content = this.content; + } + }, + recalc: function() { + if (this.content == null) return; + for (var i = 0; i < this.match.length; i++) { + var $target = this.match[i]; + var $generated = $target.runtimeStyle[this.position]; + var $$position = $MAP[this.position + Number($target.canHaveChildren)]; + if ($generated) { + // copy the array of values + var $content = [].concat($generated.content || ""); + for (var j = 0; j < $content.length; j++) { + if (typeof $content[j] == "object") { + $content[j] = $target.getAttribute($content[j].attr); + } + } + $content = $content.join(""); + var $url = $content.match($URL); + // insert the pseudo element + var $html = PseudoElement[$url?"OBJECT":"ANON"].replace(/%1/, this.className); + var $$cssText = $generated.cssText; + if ($url) { + var $pseudoElement = document.createElement($html); + $target.insertAdjacentElement($$position, $pseudoElement); + $pseudoElement.data = _contentPath; + addTimer($pseudoElement, $$cssText, Quote.remove($url[1])); + } else { + $html = $html.replace(/%2/, $$cssText).replace(/%3/, $content); + $target.insertAdjacentHTML($$position, $html); + } + $target.runtimeStyle[this.position] = null; + } + } // recalc + } +}); +// constants +PseudoElement.CONTENT = /content\s*:\s*([^;]*)(;|$)/; +PseudoElement.OBJECT = ""; +PseudoElement.ANON = "%3"; + +// ----------------------------------------------------------------------- +// IE7 dynamic pseudo-classes +// ----------------------------------------------------------------------- + +// constructor +function DynamicPseudoClass($name, $apply) { + this.name = $name; + this.apply = $apply; + this.instances = {}; + ie7CSS.dynamicPseudoClasses[$name] = this; +}; +// prototype +Common.specialize({ + // properties + constructor: DynamicPseudoClass, +//- name: "", +//- apply: null, +//- instances: null, + // methods + register: function($instance) { + // an "instance" is actually an Arguments object + var $class = $instance[2]; + //- var $element = $instance[0]; + $instance.id = $class.id + $instance[0].uniqueID; + if (!this.instances[$instance.id]) { + var $target = $instance[1], j; + for (j = 0; j < $target.length; j++) $class.add($target[j]); + this.instances[$instance.id] = $instance; + } + }, + unregister: function($instance) { + if (this.instances[$instance.id]) { + var $class = $instance[2]; + var $target = $instance[1], j; + for (j = 0; j < $target.length; j++) $class.remove($target[j]); + delete this.instances[$instance.id]; + } + } +}); + +// ----------------------------------------------------------------------- +// pseudo-classes +// ----------------------------------------------------------------------- + +ie7CSS.pseudoClasses.toString = function() { + var $toString = [], $pseudoClass; + for ($pseudoClass in this) { + if (this[$pseudoClass].length > 1) $pseudoClass += "\\([^)]*\\)"; + $toString.push($pseudoClass); + } + return $toString.join("|"); +}; + +// the "ie7-link" property is set by text contained in the IE7 generated +// style sheet (the text is stored in the "HEADER") +ie7CSS.pseudoClasses["link"] = function($element) { + return $element.currentStyle["ie7-link"] == "link"; +}; + +ie7CSS.pseudoClasses["visited"] = function($element) { + return $element.currentStyle["ie7-link"] == "visited"; +}; + +// ----------------------------------------------------------------------- +// dynamic pseudo-classes +// ----------------------------------------------------------------------- + +var _MOUSEOVER = (appVersion < 5.5) ? "onmouseover" : "onmouseenter"; +var _MOUSEOUT = (appVersion < 5.5) ? "onmouseout" : "onmouseleave"; + +ie7CSS.dynamicPseudoClasses.toString = ie7CSS.pseudoClasses.toString; + +var _hover = new DynamicPseudoClass("hover", function($element) { + var $instance = arguments; + addEventHandler($element, _MOUSEOVER, function() { + _hover.register($instance); + }); + addEventHandler($element, _MOUSEOUT, function() { + _hover.unregister($instance); + }); +}); + +var _focus = new DynamicPseudoClass("focus", function($element) { + var $instance = arguments; + addEventHandler($element, "onfocus", function() { + _focus.unregister($instance); // in case it starts with focus + _focus.register($instance); + }); + addEventHandler($element, "onblur", function() { + _focus.unregister($instance); + }); + // check the active element for initial state + if ($element == document.activeElement) { + _focus.register($instance) + } +}); + +var _active = new DynamicPseudoClass("active", function($element) { + var $instance = arguments; + addEventHandler($element, "onmousedown", function() { + _active.register($instance); + }); +}); + +// globally trap the mouseup event (thanks Martijn!) +addEventHandler(document, "onmouseup", function() { + var $instances = _active.instances, j; + for (j in $instances) _active.unregister($instances[j]); + $instances = _hover.instances; + for (j in $instances) + if (!$instances[j][0].contains(event.srcElement)) + _hover.unregister($instances[j]); +}); + +// ----------------------------------------------------------------------- +// attribute selectors +// ----------------------------------------------------------------------- + +ICommon(css2.AttributeSelector); + +css2.AttributeSelector.specialize({ + getAttribute: function($name) { + switch ($name.toLowerCase()) { + case "class": + return "e.className.replace(/\\b\\s*ie7_class\\d+/g,'')"; + case "src": + return "(e.pngSrc||e.src)"; + } + return this.inherit($name); + } +}); + +// ----------------------------------------------------------------------- +// encoding +// ----------------------------------------------------------------------- + +// pseudo-elements can be declared with a double colon +encoder.add(/::/, ":"); +// generated content may be unicode encoded +safeString.add(/\\([\da-fA-F]{1,4})/, function($match, $offset) { + $match = $match[$offset + 1]; + return "\\u" + "0000".slice($match.length) + $match; +}); + +}); // IE7.addModule diff --git a/html2005/ie7/src/ie7-css3-selectors.js b/html2005/ie7/src/ie7-css3-selectors.js new file mode 100644 index 0000000..d90fd5c --- /dev/null +++ b/html2005/ie7/src/ie7-css3-selectors.js @@ -0,0 +1,258 @@ +/* + IE7, version 0.8 (alpha) (2005/05/23) + Copyright: 2004-2005, Dean Edwards (http://dean.edwards.name/) + License: http://creativecommons.org/licenses/LGPL/2.1/ +*/ + +IE7.addModule("ie7-css3-selectors", function() { + +/* + cssQuery, version 2.0 (2005/05/23) + Copyright: 2004-2005, Dean Edwards (http://dean.edwards.name/) + License: http://creativecommons.org/licenses/LGPL/2.1/ +*/ + +/* Thanks to Bill Edney */ + +cssQuery.addModule("css-level3", function() { + +// requires the CSS2 module +var css2 = modules["css-level2"]; +if (!css2) return; + +// ----------------------------------------------------------------------- +// selectors +// ----------------------------------------------------------------------- + +// indirect sibling selector +selectors["~"] = function($results, $from, $tagName, $namespace) { + var $element, i; + for (i = 0; ($element = $from[i]); i++) { + while ($element = nextElementSibling($element)) { + if (compareTagName($element, $tagName, $namespace)) + $results.push($element); + } + } +}; + +// ----------------------------------------------------------------------- +// pseudo-classes +// ----------------------------------------------------------------------- + +// I'm hoping these are pseudo-classes are pretty readable. Let me know +// if any need explanation. + +pseudoClasses["contains"] = function($element, $text) { + $text = new RegExp(regEscape(getText($text))); + return $text.test(getTextContent($element)); +}; + +pseudoClasses["root"] = function($element) { + return $element == getDocument($element).documentElement; +}; + +pseudoClasses["empty"] = function($element) { + var $node, i; + for (i = 0; ($node = $element.childNodes[i]); i++) { + if (thisElement($node) || $node.nodeType == 3) return false; + } + return true; +}; + +pseudoClasses["last-child"] = function($element) { + return !nextElementSibling($element); +}; + +pseudoClasses["only-child"] = function($element) { + $element = $element.parentNode; + return firstElementChild($element) == lastElementChild($element); +}; + +pseudoClasses["not"] = function($element, $selector) { + var $negated = cssQuery($selector, getDocument($element)); + for (var i = 0; i < $negated.length; i++) { + if ($negated[i] == $element) return false; + } + return true; +}; + +pseudoClasses["nth-child"] = function($element, $arguments) { + return nthChild($element, $arguments, previousElementSibling); +}; + +pseudoClasses["nth-last-child"] = function($element, $arguments) { + return nthChild($element, $arguments, nextElementSibling); +}; + +pseudoClasses["target"] = function($element) { + return $element.id == location.hash.slice(1); +}; + +// UI element states + +pseudoClasses["checked"] = function($element) { + return $element.checked; +}; + +pseudoClasses["enabled"] = function($element) { + return $element.disabled === false; +}; + +pseudoClasses["disabled"] = function($element) { + return $element.disabled; +}; + +pseudoClasses["indeterminate"] = function($element) { + return $element.indeterminate; +}; + +// ----------------------------------------------------------------------- +// attribute selector tests +// ----------------------------------------------------------------------- + +// allow the CSS3 module to see this class +var AttributeSelector = css2.AttributeSelector; + +AttributeSelector.tests["^="] = function($attribute, $value) { + return "/^" + regEscape($value) + "/.test(" + $attribute + ")"; +}; + +AttributeSelector.tests["$="] = function($attribute, $value) { + return "/" + regEscape($value) + "$/.test(" + $attribute + ")"; +}; + +AttributeSelector.tests["*="] = function($attribute, $value) { + return "/" + regEscape($value) + "/.test(" + $attribute + ")"; +}; + +// ----------------------------------------------------------------------- +// nth child support (Bill Edney) +// ----------------------------------------------------------------------- + +function nthChild($element, $arguments, $traverse) { + switch ($arguments) { + case "n": return true; + case "even": $arguments = "2n"; break; + case "odd": $arguments = "2n+1"; + } + + var $$children = childElements($element.parentNode); + function _checkIndex($index) { + var $index = ($traverse == nextElementSibling) ? $$children.length - $index : $index - 1; + return $$children[$index] == $element; + }; + + // it was just a number (no "n") + if (!isNaN($arguments)) return _checkIndex($arguments); + + $arguments = $arguments.split("n"); + var $multiplier = parseInt($arguments[0]); + var $step = parseInt($arguments[1]); + + if ((isNaN($multiplier) || $multiplier == 1) && $step == 0) return true; + if ($multiplier == 0 && !isNaN($step)) return _checkIndex($step); + if (isNaN($step)) $step = 0; + + var $count = 1; + while ($element = $traverse($element)) $count++; + + if (isNaN($multiplier) || $multiplier == 1) + return ($traverse == nextElementSibling) ? ($count <= $step) : ($step >= $count); + + return ($count % $multiplier) == $step; +}; + +}); // addModule +var firstElementChild = cssQuery.valueOf("firstElementChild"); + +// ----------------------------------------------------------------------- +// pseudo-classes +// ----------------------------------------------------------------------- + +ie7CSS.pseudoClasses["root"] = function($element) { + return ($element == viewport) || (!isHTML && $element == firstElementChild(body)); +}; + +// ----------------------------------------------------------------------- +// dynamic pseudo-classes +// ----------------------------------------------------------------------- + +// :checked +var _checked = new ie7CSS.DynamicPseudoClass("checked", function($element) { + var $instance = arguments; + addEventHandler($element, "onpropertychange", function() { + if (event.propertyName == "checked") { + if ($element.checked) _checked.register($instance); + else _checked.unregister($instance); + } + }); + // check current checked state + if ($element.checked) _checked.register($instance); +}); + +// :enabled +var _enabled = new ie7CSS.DynamicPseudoClass("enabled", function($element) { + var $instance = arguments; + addEventHandler($element, "onpropertychange", function() { + if (event.propertyName == "disabled") { + if ($element.disabled === false) _enabled.register($instance); + else _enabled.unregister($instance); + } + }); + // check current disabled state + if ($element.disabled === false) _enabled.register($instance); +}); + +// :disabled +var _disabled = new ie7CSS.DynamicPseudoClass("disabled", function($element) { + var $instance = arguments; + addEventHandler($element, "onpropertychange", function() { + if (event.propertyName == "disabled") { + if ($element.disabled) _disabled.register($instance); + else _disabled.unregister($instance); + } + }); + // check current disabled state + if ($element.disabled) _disabled.register($instance); +}); + +// :indeterminate (Kevin Newman) +var _indeterminate = new ie7CSS.DynamicPseudoClass("indeterminate", function($element) { + var $instance = arguments; + addEventHandler($element, "onpropertychange", function() { + if (event.propertyName == "indeterminate") { + if ($element.indeterminate) _indeterminate.register($instance); + else _indeterminate.unregister($instance); + } + }); + addEventHandler($element, "onclick", function() { + _indeterminate.unregister($instance); + }); + // clever Kev says no need to check this up front +}); + +// :target +var _target = new ie7CSS.DynamicPseudoClass("target", function($element) { + var $instance = arguments; + // if an element has a tabIndex then it can become "active". + // The default is zero anyway but it works... + if (!$element.tabIndex) $element.tabIndex = 0; + // this doesn't detect the back button. I don't know how to do that :-( + addEventHandler(document, "onpropertychange", function() { + if (event.propertyName == "activeElement") { + if ($element.id == location.hash.slice(1)) _target.register($instance); + else _target.unregister($instance); + } + }); + // check the current location + if ($element.id == location.hash.slice(1)) _target.register($instance); +}); + +// ----------------------------------------------------------------------- +// encoding +// ----------------------------------------------------------------------- + +// CSS namespaces +decoder.add(/\|/, "\\:"); + +}); // IE7.addModule diff --git a/html2005/ie7/src/ie7-dhtml.js b/html2005/ie7/src/ie7-dhtml.js new file mode 100644 index 0000000..9d15de6 --- /dev/null +++ b/html2005/ie7/src/ie7-dhtml.js @@ -0,0 +1,58 @@ +/* + IE7, version 0.8 (alpha) (2005/05/23) + Copyright: 2004-2005, Dean Edwards (http://dean.edwards.name/) + License: http://creativecommons.org/licenses/LGPL/2.1/ +*/ +IE7.addModule("ie7-dhtml", function() { + +/* --------------------------------------------------------------------- + This module is still in development and should not be used. +--------------------------------------------------------------------- */ + + +ie7CSS.specialize("recalc", function() { + this.inherit(); + for (var i = 0; i < this.recalcs.length; i++) { + var $recalc = this.recalcs[i]; + for (var j = 0; i < $recalc[3].length; i++) { + _addPropertyChangeHandler($recalc[3][j], _getPropertyName($recalc[2]), $recalc[1]); + } + } +}); + +// constants +var _PATTERNS = { + width: "(width|paddingLeft|paddingRight|borderLeftWidth|borderRightWidth|borderLeftStyle|borderRightStyle)", + height: "(height|paddingTop|paddingBottom|borderTopHeight|borderBottomHeight|borderTopStyle|borderBottomStyle)" +}; +var _PROPERTY_NAMES = { + width: "fixedWidth", + height: "fixedHeight", + right: "width", + bottom: "height" +}; +var _DASH_LETTER = /-(\w)/g; +var _PROPERTY_NAME = /\w+/; + +function _addPropertyChangeHandler($element, $propertyName, $fix) { + addEventHandler($element, "onpropertychange", function() { + if (_getPattern($propertyName).test(event.propertyName)) { + _reset($element, $propertyName); + $fix($element); + } + }); +}; +function _upper($match, $letter) {return $letter.toUpperCase()}; +function _getPropertyName($pattern) { + return String(String($pattern).toLowerCase().replace(_DASH_LETTER, _upper).match(_PROPERTY_NAME)); +}; +function _getPattern($propertyName) { + return eval("/^style." + (_PATTERNS[$propertyName] || $propertyName) + "$/"); +}; +function _reset($element, $propertyName) { + $element.runtimeStyle[$propertyName] = ""; + $propertyName = _PROPERTY_NAMES[$propertyName] + if ($propertyName) $element.runtimeStyle[$propertyName] = ""; +}; + +}); diff --git a/html2005/ie7/src/ie7-dynamic-attributes.js b/html2005/ie7/src/ie7-dynamic-attributes.js new file mode 100644 index 0000000..4cf198d --- /dev/null +++ b/html2005/ie7/src/ie7-dynamic-attributes.js @@ -0,0 +1,90 @@ +/* + IE7, version 0.8 (alpha) (2005/05/23) + Copyright: 2004-2005, Dean Edwards (http://dean.edwards.name/) + License: http://creativecommons.org/licenses/LGPL/2.1/ +*/ + +IE7.addModule("ie7-dynamic-attributes", function() { + +// ----------------------------------------------------------------------- +// IE7 Dynamic Attribute Class +// ----------------------------------------------------------------------- + +// requires another module +if (!modules["ie7-css2-selectors"]) return; + +/* --- + +// Class properties: +// attach: the element(s) that a dynamic attribute selector will be attached to +// target: the element(s) that will have the IE7 class applied + +For example: + fieldset p.required > input[value=""] + sup {color: red;} +In this example attach="fieldset p.required > input" and target="+ sup". + +--- */ + +// cssQuery internals +var attributeSelectors = cssQuery.valueOf("attributeSelectors"); +var parseSelector = cssQuery.valueOf("parseSelector"); + +// constructor +function DynamicAttribute($selector, $attach, $dynamicAttribute, $target, $cssText) { + // initialise object properties + this.attach = $attach || "*"; + parseSelector($dynamicAttribute); + this.dynamicAttribute = attributeSelectors["@" + $dynamicAttribute]; + this.target = $target; + this.inherit($selector, $cssText); +}; +// protoytype +ie7CSS.Rule.specialize({ + // properties + constructor: DynamicAttribute, +//- attach: "", +//- dynamicAttribute: null, +//- target: "", + // methods + recalc: function() { + // execute the underlying css query for this class + var $match = cssQuery(this.attach); + // process results + for (var i = 0; i < $match.length; i++) { + // retrieve the event handler's target element(s) + var $target = (this.target) ? cssQuery(this.target, $match[i]) : [$match[i]]; + // attach event handlers for dynamic attributes + if ($target.length) this.apply($match[i], $target); + } + }, + apply: function($element, $target) { + var self = this; + // watch property changes + addEventHandler($element, "onpropertychange", function() { + // check the attribute name + if (event.propertyName == self.dynamicAttribute.name) + // turn the selector on/off + self.test($element, $target); + }); + this.test($element, $target); + }, + test: function($element, $target) { + var $action = this.dynamicAttribute.test($element) ? "add" : "remove"; + for (var i = 0; ($element = $target[i]); i++) this[$action]($element); + + } +}); +// constants +DynamicAttribute.MATCH = /(.*)(\[[^\]]*\])(.*)/; + +// intercept creation of IE7 rules +StyleSheet.prototype.specialize({ + createRule: function($selector, $cssText) { + var $match; + if ($match = $selector.match(DynamicAttribute.MATCH)) { + return new DynamicAttribute($selector, $match[1], $match[2], $match[3], $cssText); + } else return this.inherit($selector, $cssText); + } +}); + +}); // addModule diff --git a/html2005/ie7/src/ie7-fixed.js b/html2005/ie7/src/ie7-fixed.js new file mode 100644 index 0000000..a413ae2 --- /dev/null +++ b/html2005/ie7/src/ie7-fixed.js @@ -0,0 +1,243 @@ +/* + IE7, version 0.8 (alpha) (2005/05/23) + Copyright: 2004-2005, Dean Edwards (http://dean.edwards.name/) + License: http://creativecommons.org/licenses/LGPL/2.1/ +*/ +IE7.addModule("ie7-fixed", function() { + // some things to consider for this hack. + // the document body requires a fixed background. even if + // it is just a blank image. + // you have to use setExpression instead of onscroll, this + // together with a fixed body background helps avoid the + // annoying screen flicker of other solutions. + + ie7CSS.addRecalc("position", "fixed", _positionFixed, "absolute"); + ie7CSS.addRecalc("background(-attachment)?", "[^};]*fixed", _backgroundFixed); + + // scrolling is relative to the documentElement (HTML tag) when in + // standards mode, otherwise it's relative to the document body + var _viewport = (quirksMode) ? "body" : "documentElement"; + + var _fixBackground = function() { + // this is required by both position:fixed and background-attachment:fixed. + // it is necessary for the document to also have a fixed background image. + // we can fake this with a blank image if necessary + if (body.currentStyle.backgroundAttachment != "fixed") { + if (body.currentStyle.backgroundImage == "none") { + body.runtimeStyle.backgroundRepeat = "no-repeat"; + body.runtimeStyle.backgroundImage = "url(" + BLANK_GIF + ")"; // dummy + } + body.runtimeStyle.backgroundAttachment = "fixed"; + } + _fixBackground = DUMMY; + }; + + var _tmp = createTempElement("img"); + + // clone a "left" function to create a "top" function + function _rotate($function) { + return _rotater.exec(String($function)); + }; + var _rotater = new ParseMaster; + _rotater.add(/Left/, "Top"); + _rotater.add(/left/, "top"); + _rotater.add(/Width/, "Height"); + _rotater.add(/width/, "height"); + _rotater.add(/right/, "bottom"); + _rotater.add(/X/, "Y"); + + function _isFixed($element) { + return ($element) ? isFixed($element) || _isFixed($element.parentElement) : false; + }; + + function setExpression($element, $propertyName, $$expression) { + setTimeout("document.all." + $element.uniqueID + ".runtimeStyle.setExpression('" + + $propertyName + "','" + $$expression + "')", 0); + }; + +// ----------------------------------------------------------------------- +// backgroundAttachment: fixed +// ----------------------------------------------------------------------- + + function _backgroundFixed($element) { + if (register(_backgroundFixed, $element, + $element.currentStyle.backgroundAttachment == "fixed" && !$element.contains(body))) { + _fixBackground(); + backgroundLeft($element); + backgroundTop($element); + _backgroundPosition($element); + } + }; + + function _backgroundPosition($element) { + _tmp.src = $element.currentStyle.backgroundImage.slice(5, -2); + var $parentElement = ($element.canHaveChildren) ? $element : $element.parentElement; + $parentElement.appendChild(_tmp); + setOffsetLeft($element); + setOffsetTop($element); + $parentElement.removeChild(_tmp); + }; + + function backgroundLeft($element) { + $element.style.backgroundPositionX = $element.currentStyle.backgroundPositionX; + if (!_isFixed($element)) { + var $$expression = "(parseInt(runtimeStyle.offsetLeft)+document." + + _viewport + ".scrollLeft)||0"; + setExpression($element, "backgroundPositionX", $$expression); + } + }; + eval(_rotate(backgroundLeft)); + + function setOffsetLeft($element) { + var $propertyName = _isFixed($element) ? "backgroundPositionX" : "offsetLeft"; + $element.runtimeStyle[$propertyName] = + getOffsetLeft($element, $element.style.backgroundPositionX) - + $element.getBoundingClientRect().left - $element.clientLeft + 2; + }; + eval(_rotate(setOffsetLeft)); + + function getOffsetLeft($element, $position) { + switch ($position) { + case "left": + case "top": + return 0; + case "right": + case "bottom": + return viewport.clientWidth - _tmp.offsetWidth; + case "center": + return (viewport.clientWidth - _tmp.offsetWidth) / 2; + default: + if (PERCENT.test($position)) { + return parseInt((viewport.clientWidth - _tmp.offsetWidth) * + parseFloat($position) / 100); + } + _tmp.style.left = $position; + return _tmp.offsetLeft; + } + }; + eval(_rotate(getOffsetLeft)); + +// ----------------------------------------------------------------------- +// position: fixed +// ----------------------------------------------------------------------- + + function _positionFixed($element) { + if (register(_positionFixed, $element, isFixed($element))) { + setOverrideStyle($element, "position", "absolute"); + setOverrideStyle($element, "left", $element.currentStyle.left); + setOverrideStyle($element, "top", $element.currentStyle.top); + _fixBackground(); + if (ie7Layout) ie7Layout.fixRight($element); + _foregroundPosition($element); + } + }; + + function _foregroundPosition($element, $recalc) { + positionTop($element, $recalc); + positionLeft($element, $recalc, true); + if (!$element.runtimeStyle.autoLeft && $element.currentStyle.marginLeft == "auto" && + $element.currentStyle.right != "auto") { + var $left = viewport.clientWidth - getPixelWidth($element, $element.currentStyle.right) - + getPixelWidth($element, $element.runtimeStyle._left) - $element.clientWidth; + if ($element.currentStyle.marginRight == "auto") $left = parseInt($left / 2); + if (_isFixed($element.offsetParent)) $element.runtimeStyle.pixelLeft += $left; + else $element.runtimeStyle.shiftLeft = $left; + } + clipWidth($element); + clipHeight($element); + }; + + function clipWidth($element) { + if ($element.currentStyle.width != "auto") { + var $rect = $element.getBoundingClientRect(); + var $width = $element.offsetWidth - viewport.clientWidth + $rect.left - 2; + if ($width >= 0) $element.runtimeStyle.width = + getPixelValue($element, $element.currentStyle.width) - $width; + } + }; + eval(_rotate(clipWidth)); + + function positionLeft($element, $recalc) { + // if the element's width is in % units then it must be recalculated + // with respect to the viewport + if (!$recalc && PERCENT.test($element.currentStyle.width)) { + $element.runtimeStyle.fixWidth = $element.currentStyle.width; + } + if ($element.runtimeStyle.fixWidth) { + $element.runtimeStyle.width = getPixelWidth($element, $element.runtimeStyle.fixWidth); + } + if ($recalc) { + // if the element is fixed on the right then no need to recalculate + if (!$element.runtimeStyle.autoLeft) return; + } else { + $element.runtimeStyle.shiftLeft = 0; + $element.runtimeStyle._left = $element.currentStyle.left; + // is the element fixed on the right? + $element.runtimeStyle.autoLeft = $element.currentStyle.right != "auto" && + $element.currentStyle.left == "auto"; + } + // reset the element's "left" value and get it's natural position + $element.runtimeStyle.left = ""; + $element.runtimeStyle.screenLeft = getScreenLeft($element); + $element.runtimeStyle.pixelLeft = $element.runtimeStyle.screenLeft; + // if the element is contained by another fixed element then there is no need to + // continually recalculate it's left position + if (!$recalc && !_isFixed($element.offsetParent)) { + // onsrcoll produces jerky movement, so we use an expression + var $$expression = "runtimeStyle.screenLeft+runtimeStyle.shiftLeft+document." + + _viewport + ".scrollLeft"; + setExpression($element, "pixelLeft", $$expression); + } + }; + // clone this function so we can do "top" + eval(_rotate(positionLeft)); + + // i've forgotten how this works... + function getScreenLeft($element) { // thanks to kevin newman (captainn) + var $screenLeft = $element.offsetLeft, $nested = 1; + if ($element.runtimeStyle.autoLeft) { + $screenLeft = viewport.clientWidth - $element.offsetWidth - + getPixelWidth($element, $element.currentStyle.right); + } + // accommodate margins + if ($element.currentStyle.marginLeft != "auto") { + $screenLeft -= getPixelWidth($element, $element.currentStyle.marginLeft); + } + while ($element = $element.offsetParent) { + if ($element.currentStyle.position != "static") $nested = -1; + $screenLeft += $element.offsetLeft * $nested; + } + return $screenLeft; + }; + eval(_rotate(getScreenLeft)); + + function getPixelWidth($element, $value) { + if (PERCENT.test($value)) return parseInt(parseFloat($value) / 100 * viewport.clientWidth); + return getPixelValue($element, $value); + }; + eval(_rotate(getPixelWidth)); + +// ----------------------------------------------------------------------- +// capture window resize +// ----------------------------------------------------------------------- + + function _resize() { + // if the window has been resized then some positions need to be + // recalculated (especially those aligned to "right" or "top" + for (var i in _backgroundFixed.elements) { + _backgroundPosition(_backgroundFixed.elements[i]); + } + for (i in _positionFixed.elements) { + _foregroundPosition(_positionFixed.elements[i], true); + } + _timer = 0; + }; + + // use a timer for some reason. + // (sometimes this is a good way to prevent resize loops) + var _timer; + addResize(function() { + if (!_timer) _timer = setTimeout(_resize, 0); + }); + +}); \ No newline at end of file diff --git a/html2005/ie7/src/ie7-graphics.js b/html2005/ie7/src/ie7-graphics.js new file mode 100644 index 0000000..112d466 --- /dev/null +++ b/html2005/ie7/src/ie7-graphics.js @@ -0,0 +1,109 @@ +/* + IE7, version 0.8 (alpha) (2005/05/23) + Copyright: 2004-2005, Dean Edwards (http://dean.edwards.name/) + License: http://creativecommons.org/licenses/LGPL/2.1/ +*/ + +IE7.addModule("ie7-graphics", function() { + +if (appVersion < 5.5) return; // IE5.0 not supported + +// constants +// this filter is used to replace a PNG image +var $ALPHA_IMAGE_LOADER = "DXImageTransform.Microsoft.AlphaImageLoader"; +var $FILTER = "progid:" + $ALPHA_IMAGE_LOADER + "(src='%1',sizingMethod='scale')"; + +// ** IE7 VARIABLE +// e.g. only apply the hack to files ending in ".png" +// IE7_PNG_SUFFIX = ".png"; + +// regular expression version of the above +var _pngTest = new RegExp((window.IE7_PNG_SUFFIX || "-trans.png") + "$", "i"); +var _filtered = []; + +// apply a filter +function _addFilter($element) { + var $filter = $element.filters[$ALPHA_IMAGE_LOADER]; + if ($filter) { + $filter.src = $element.src; + $filter.enabled = true; + } else { + $element.runtimeStyle.filter = $FILTER.replace(/%1/, $element.src); + _filtered.push($element); + } + // remove the real image + $element.src = BLANK_GIF; +}; +function _removeFilter($element) { + $element.src = $element.pngSrc; + $element.filters[$ALPHA_IMAGE_LOADER].enabled = false; +}; + +// ----------------------------------------------------------------------- +// support opacity (CSS3) +// ----------------------------------------------------------------------- + +ie7CSS.addFix(/opacity\s*:\s*([\d.]+)/, function($match, $offset) { + return "zoom:1;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=" + + ((parseFloat($match[$offset + 1]) * 100) || 1) + ")"; +}); + +// ----------------------------------------------------------------------- +// fix PNG transparency (CSS background images) +// ----------------------------------------------------------------------- + + +// replace background(-image): url(..) .. with background(-image): .. ;filter: ..; +var $BACKGROUND = /background(-image)?\s*:\s*([^\(};]*)url\(([^\)]+)\)([^;}]*)/; +ie7CSS.addFix($BACKGROUND, function($match, $offset) { + var $url = getString($match[$offset + 3]); + return _pngTest.test($url) ? "filter:" + + $FILTER.replace(/scale/, "crop").replace(/%1/, $url) + ";zoom:1;background" + + ($match[$offset + 1]||"") + ":" + ($match[$offset + 2]||"") + "none" + + ($match[$offset + 4]||"") : $match[$offset]; +}); + +// ----------------------------------------------------------------------- +// fix PNG transparency (HTML images) +// ----------------------------------------------------------------------- + +if (ie7HTML) { + ie7HTML.addRecalc("img,input", function($element) { + if ($element.tagName == "INPUT" && $element.type != "image") return; + _fixImg($element); + addEventHandler($element, "onpropertychange", function() { + if (!_printing && event.propertyName == "src" && + $element.src.indexOf(BLANK_GIF) == -1) _fixImg($element); + }); + }); + function _fixImg($element) { + if (_pngTest.test($element.src)) { + // we have to preserve width and height + var $image = new Image($element.width, $element.height); + $image.onload = function() { + $element.width = $image.width; + $element.height = $image.height; + }; + $image.src = $element.src; + // store the original url (we'll put it back when it's printed) + $element.pngSrc = $element.src; + // add the AlphaImageLoader thingy + _addFilter($element); + } + }; +} + +// assume that background images should not be printed +// (if they are not transparent then they'll just obscure content) +// but we'll put foreground images back... +var _printing = false; +addEventHandler(window, "onbeforeprint", function() { + _printing = true; + for (var i = 0; i < _filtered.length; i++) _removeFilter(_filtered[i]); +}); +addEventHandler(window, "onafterprint", function() { + for (var i = 0; i < _filtered.length; i++) _addFilter(_filtered[i]); + _printing = false; +}); + +}); \ No newline at end of file diff --git a/html2005/ie7/src/ie7-html4.js b/html2005/ie7/src/ie7-html4.js new file mode 100644 index 0000000..a6e15a4 --- /dev/null +++ b/html2005/ie7/src/ie7-html4.js @@ -0,0 +1,175 @@ +/* + IE7, version 0.8 (alpha) (2005/05/23) + Copyright: 2004-2005, Dean Edwards (http://dean.edwards.name/) + License: http://creativecommons.org/licenses/LGPL/2.1/ +*/ + +IE7.addModule("ie7-html4", function() { + +// don't bother with this for XML documents +if (!isHTML) return; + +// ----------------------------------------------------------------------- +// HTML Header +// ----------------------------------------------------------------------- + +// create default font-sizes +HEADER += "h1{font-size:2em}h2{font-size:1.5em;}h3{font-size:1.17em;}" + + "h4{font-size:1em}h5{font-size:.83em}h6{font-size:.67em}"; + +// ----------------------------------------------------------------------- +// IE7 HTML Factory +// ----------------------------------------------------------------------- + +ie7HTML = new (Fix.specialize({ // single instance + init: DUMMY, + // fixes are a one-off, they are applied when the document is loaded + addFix: function() { + this.fixes.push(arguments); + }, + apply: function() { + for (var i = 0; i < this.fixes.length; i++) { + var $match = cssQuery(this.fixes[i][0]); + var $fix = this.fixes[i][1] || _fixElement; + for (var j = 0; j < $match.length; j++) $fix($match[j]); + } + }, + // recalcs occur whenever the document is refreshed using document.recalc() + addRecalc: function() { + this.recalcs.push(arguments); + }, + recalc: function() { + // loop through the fixes + for (var i = 0; i < this.recalcs.length; i++) { + var $match = cssQuery(this.recalcs[i][0]); + var $recalc = this.recalcs[i][1], $element; + for (var j = 0; ($element = $match[j]); j++) { + $element = $recalc($element) || $element; + } + } + } +})); // ie7HTML + +// ----------------------------------------------------------------------- +// +// ----------------------------------------------------------------------- + +// provide support for the tag. +// this is a proper fix, it preserves the DOM structure and +// elements report the correct tagName & namespace prefix +ie7HTML.addFix("abbr"); + + +// ----------------------------------------------------------------------- +// +// ----------------------------------------------------------------------- + +// fix [type=image/*] +var $IMAGE = /^image/i; +var _objectPath = makePath("ie7-object.htc", path); +ie7HTML.addRecalc("object", function($element) { + if ($IMAGE.test($element.type)) { + var $object = document.createElement(""); + $object.style.width = $element.currentStyle.width; + $object.style.height = $element.currentStyle.height; + //- $object.title = $element.title; + $object.data = _objectPath; + var $url = makePath($element.data, getPath(location.href)); + $element.parentNode.replaceChild($object, $element); + cssQuery.clearCache("object"); + addTimer($object, "", $url); + return $object; + } + }); + +// ----------------------------------------------------------------------- +//