Diego Gauchat Juan - El gran libro de HTML5, CSS3 y Javascript

La posibilidad de editar el contenido de una página web ha existido durante años, pero nunca antes había sido una característica oficial. Ahora, con la introducción del atributo contenteditable , podemos convertir cualquier elemento HTML en uno editable.

Código 1-33

Uso de contenteditable para editar texto.

Ese atributo admite dos valores posibles: true (verdadero) o false (falso). Por defecto ningún elemento se puede editar. Al establecer el atributo como true para un elemento, se permite a los usuarios editar su contenido.

Hágalo usted mismo

Copie el Código 1-33en un archivo vacío, guárdelo con un nombre y la extensión .html, y abra el archivo en su navegador. Finalmente, haga clic en el nombre de la película para cambiarlo.

Otra característica que se activa automáticamente en los navegadores es la revisión ortográfica. Si bien ésta es una herramienta útil con la que los usuarios esperan contar todo el tiempo, puede ser inapropiada en algunas circunstancias. Para activar o desactivar esta característica se puede utilizar el atributo Spellcheck.

Código 1-34

Desactivación de la función Spellcheck.

Este atributo, igual que sucedía con los anteriores, también tiene dos valores posibles: true o false.La función siempre está activada a menos que se declare el valor de este atributo como false (falso). En el ejemplo en el Código 1-34, el atributo de corrección ortográfica se aplica al mismo elemento que hemos utilizado antes. Ahora, el usuario podría cambiar el nombre de la película sin que el navegador realice una comprobación de errores ortográficos o gramaticales.

Como se ha expuesto anteriormente, la nueva especificación de HTML no solo se refiere a los elementos y al lenguaje HTML en sí mismo. La Web exige diseño y funcionalidad, no solo organización estructural y definiciones de secciones. En este nuevo paradigma, HTML se fusiona con CSS y Javascript como un instrumento integrado. Hasta ahora hemos considerado la función de cada tecnología y hemos estudiado los nuevos elementos HTML que son responsables de la estructura del documento. Ahora vamos a examinar la relevancia de CSS en esta unión estratégica y su influencia en la presentación de documentos HTML.

Importante

En este capítulo presentamos una breve introducción a los estilos CSS. Solo se mencionan las técnicas y las propiedades necesarias para la comprensión de los ejemplos en este libro. Si no tiene ninguna experiencia con CSS, le recomendamos seguir algunos tutoriales de la Web. Para encontrar estos recursos, visite nuestro sitio web y siga los enlaces presentados para este capítulo.

Oficialmente, CSS no tiene nada que ver con HTML5. CSS no es parte del código y nunca lo fue: de hecho era un complemento desarrollado para superar las limitaciones y reducir la complejidad de HTML. Inicialmente, los atributos dentro de las etiquetas HTML proporcionaban algunos estilos esenciales a los elementos, pero a medida que el lenguaje evolucionó, el código se hizo más complicado de escribir y mantener y HTML por sí mismo ya no era capaz de satisfacer las demandas de los diseñadores web. Como resultado, pronto se adoptó CSS como la forma de separar estructura y presentación. Desde entonces, CSS ha prosperado y se ha desarrollado de forma paralela, enfocado a los diseñadores y sus necesidades y no necesariamente como una parte de la evolución de HTML.

La nueva versión de CSS, CSS3, sigue el mismo camino pero esta vez con un compromiso mucho mayor. En el desarrollo de la especificación de HTML5 se ha considerado implícitamente que el lenguaje CSS está cargo del diseño. Debido a esto, la integración entre HTML y CSS3 ahora es vital para el desarrollo web, y es por eso que cada vez que mencionamos HTML5 también hacemos referencia al lenguaje CSS3, aun cuando oficialmente se trata de dos tecnologías independientes.

Actualmente, características de CSS3 son aplicadas e incorporadas a navegadores compatibles con HTML5 junto al resto de la especificación. En este capítulo estudiaremos los conceptos básicos de CSS y las nuevas técnicas de CSS3 disponibles. También vamos a aprender acerca de nuevos selectores y seudo-clases que facilitan la selección e identificación de los elementos HTML.

CSS es un lenguaje que trabaja con HTML para aplicar estilos visuales a los elementos del documento, como tamaño, color, fondos, bordes, etc. Aunque cada navegador otorga estilos predeterminados a los elementos HTML, estos pueden no coincidir con la visión del diseñador. De hecho, por lo general están muy lejos de lo que se quiere para el sitio web. Diseñadores y desarrolladores a menudo aplican sus propios estilos para lograr la apariencia y la organización que desean obtener en pantalla.

En esta parte del capítulo vamos a revisar el estilo CSS y a explicar las técnicas básicas para definir la estructura de un documento.

CSS define básicamente cómo se van a mostrar en la pantalla los elementos HTML. Para aplicar los estilos, CSS utiliza propiedades y valores. Esta construcción se llama declaración y la sintaxis incluye dos puntos después del nombre de la propiedad y un punto y coma para cerrar la línea.

Código 2-1

Declaración de propiedades CSS.

En el ejemplo del Código 2-1, el nombre de la propiedad es color y el valor asignado a esta propiedad es #FF0000.Si esta propiedad se aplica posteriormente a un elemento HTML, el elemento se mostrará en la pantalla en color rojo.

Importante

Algunos de los conceptos explicados en los párrafos siguientes son para introducir a principiantes en el lenguaje CSS y los conceptos básicos de diseño. Si está familiarizado con esta información, por favor siéntase libre de saltar los apartados que ya conoce.