Diseño y edición de páginas web y su lenguaje.
Diseño y edición de páginas web
La unión de un buen diseño con una jerarquía bien elaborada de contenidos, aumenta la eficiencia de la web como canal de comunicación e intercambio de datos, que brinda posibilidades como el contacto directo entre el productor y el consumidor de contenidos. El diseño web ha visto amplia aplicación en los sectores comerciales de Internet especialmente en la World Wide Web. Artistas y creadores hacen de las páginas en Internet un medio más para ofrecer sus producciones y utilizarlas como un canal más de difusión de su obra.
Diseño web aplicado
El diseño de páginas web es la construcción de documentos de hipertexto para su visualización en diferentes navegadores.
Estos documentos o páginas web pueden ser creadas
Creando archivos de texto en HTML, Asp, Aspx, JavaScript, JSP, Python, Ruby. Utilizando un programa visual WYSIWYG o WYSIWYM de creación de páginas.
Para el diseño de páginas web debemos tener en cuenta tres etapas
El diseño visual de la información que se desea editar. En esta etapa se trabaja distribuyendo el texto, los gráficos, los vínculos a otros documentos y otros objetos multimedia que se consideren pertinentes. Estructura y relación jerárquica de las páginas del sitio web. Para esto, y fundamentalmente para manejar los vínculos entre documentos, se creó el lenguaje de marcación de hipertexto o HTML.
Los enlaces que aparecen subrayados en este documento y otros de Wikipedia son ejemplos de hipertexto, puesto que al pulsar sobre ellos conducen a otras páginas con información relacionada. El HTML consta de una serie de elementos que estructuran el texto y son presentados en forma de hipertexto por agente de usuario o navegadores. Aprender HTML es relativamente fácil, así que es sencillo crear páginas web de este modo. Esta era la única manera de generarlas hasta que aparecieron, a mediados de 1996, algunos editores visuales de HTML, como MS FrontPage y Adobe Dreamweaver.
Con estas herramientas no es necesario aprender HTML , con lo cual el desarrollador se concentra en lo más importante, el diseño del documento.
Fundamentos
El diseño web implica conocer cómo se deben utilizar cada uno de los elementos permitidos en el HTML, es decir, hacer un uso correcto de este lenguaje dentro de los estándares establecidos por la W3C y en lo referente a la web semántica. Debido a la permisibilidad de algunos navegadores web como Internet Explorer, esta premisa original se ha perdido. La web semántica, por otra parte, aboga por un uso lógico de los elementos según el significado para el que fueron concebidas. De esta forma se utiliza el documento HTML únicamente para contener, organizar y estructurar la información y las hojas de estilo CSS para indicar como se mostrará dicha información en los diferentes medios .
Por lógica, esta metodología beneficia enormemente la accesibilidad del documento. También existen páginas dinámicas, las cuales permiten interacción entre la web y el visitante, proporcionándole herramientas tales como buscadores, chat, foros, sistemas de encuestas, etc. y poseen de un panel de control de administración de contenidos.
Accesibilidad
El diseño web debe seguir unos requerimientos mínimos de accesibilidad web que haga que sus sitios web o aplicaciones puedan ser visitados por el mayor número de personas.
El lenguaje de marcas de hipertexto HTML.
Editores
Los documentos HTML están en formato de texto sencillo , por eso se puede utilizar un simple procesador de textos para escribir un documento en lenguaje HTML. Una vez creado el documento HTML, lo guardaremos con la extensión . Html ó htm. Se puede usar el Bloc de notas de Windows o cualquier otro editor de textos sencillo.
Sin embargo, hay que tener cuidado con algunos editores más complejos puesto que formatean el texto y colocan su propio código especial al guardar las páginas y HTML debe ser únicamente texto plano, con lo que podríamos tener problemas. Si creamos un documento HTML en un editor de texto que formatee dicho texto, debemos guardar el documento como documento de texto sin formato. El texto escrito tiene dos partes bien diferenciadas, el contenido de la información y el conjunto de etiquetas del lenguaje HTML, que permiten determinar el estilo y el tipo de letra que tendrá la presentación del documento final y que pueda ser leído por un programa cliente. Sin embargo, los editores web que ofrecen mayor número de funcionalidades, suelen ser de pago.
Entre los más conocidos destacan Hot Dog , Microsoft FrontPage el editor de Microsoft y con el que se ha diseñado este hipertexto, DreamWeaver , Adobe GoLive , pero existen un gran número y una gran variedad de editores web que emplean el lenguaje HTML.
Representación de la vista Exploración de este hipertexto en el proceso de su elaboración, mediante el editor web Microsoft FrontPage
Estas etiquetas meta que aparecen en la parte superior de la página y que proporcionan información acerca de la página, pero que no afectan a su apariencia, son las que incluyen los metadatos que posteriormente facilitarán la búsqueda y recuperación de los documentos por parte de los robots y motores de búsqueda. Por ejemplo, la metaetiqueta generator indica el tipo de editor con el que se creó la página HTML. Por otro lado, también es posible crear documentos con editores de texto sin formato y después modificarlos con un editor HTML, o bien realizar la operación contraria, con el fin combinar lo mejor de estos dos sistemas. Y además tenemos la posibilidad de crear un documento en un formato determinado y transformar dicho documento al formato HTML por medio de un conversor.
Los editores HTML se clasifican en 3 tipos
Son muy útiles para apreciar los colores y la disposición de los elementos. Son útiles para recordar los comandos HTML y sus atributos.
Entre estos validadores podemos destacar los siguientes
Verifica si los documentos cumplen las recomendaciones del W3C World Wide Web Consortium Icono del Validador CSS.
Las etiquetas del lenguaje HTML
Básicamente, HTML utiliza los mismos elementos que SGML, esto es, marcas o etiquetas compuestas de códigos enmarcados por los signos < >. Cualquier documento HTML comienza con la etiqueta y termina con la etiqueta . Dentro del encabezamiento, la etiqueta principal es la del título, representado por la etiqueta En el cuerpo del documento se pueden establecer diferentes categorías utilizando diversos tamaños de fuentes y estableciendo así la estructura básica del documento. Para fijar un enlace, se debe enmarcar el texto que aparecerá subrayado para que el usuario pueda pulsarlo y le redirija a la dirección o URL marcada.
La etiqueta ancla debe incluir el parámetro href=«URL» y el texto para pulsar. Si se trata de imágenes, éstas se insertan mediante la etiqueta src=«URL» y también podemos conseguir que el gráfico se convierta en un enlace mediante la etiqueta correspondiente. Existen una gran cantidad de etiquetas, muchas de ellas pueden contener elementos y atributos que realizarán una función u otra según la voluntad del autor.
La estructura de un documento HTML
Un documento HTML comienza con la etiqueta , y termina con . El elemento contenido dentro del encabezamiento permite especificar el título de un documento HTML. Existen muchos otros elementos que se engloban dentro del encabezamiento pero para la estructura básica del lenguaje HTML en su nivel básico no son necesarios. El cuerpo de un documento HTML contiene el texto, imágenes, etc. que, con la presentación y los efectos que se decidan, se presentarán ante el usuario.
Dentro del cuerpo se pueden aplicar una serie de efectos a través de diferentes marcas o etiquetas .
Los documentos HTML están en formato de texto sencillo , por eso se puede utilizar un simple procesador de textos para escribir un documento en lenguaje HTML. Una vez creado el documento HTML, lo guardaremos con la extensión . Html ó htm. Se puede usar el Bloc de notas de Windows o cualquier otro editor de textos sencillo.
Sin embargo, hay que tener cuidado con algunos editores más complejos puesto que formatean el texto y colocan su propio código especial al guardar las páginas y HTML debe ser únicamente texto plano, con lo que podríamos tener problemas. Si creamos un documento HTML en un editor de texto que formatee dicho texto, debemos guardar el documento como documento de texto sin formato. El texto escrito tiene dos partes bien diferenciadas, el contenido de la información y el conjunto de etiquetas del lenguaje HTML, que permiten determinar el estilo y el tipo de letra que tendrá la presentación del documento final y que pueda ser leído por un programa cliente. Sin embargo, los editores web que ofrecen mayor número de funcionalidades, suelen ser de pago.
Entre los más conocidos destacan Hot Dog , Microsoft FrontPage el editor de Microsoft y con el que se ha diseñado este hipertexto, DreamWeaver , Adobe GoLive , pero existen un gran número y una gran variedad de editores web que emplean el lenguaje HTML.
Representación de la vista Exploración de este hipertexto en el proceso de su elaboración, mediante el editor web Microsoft FrontPage
Estas etiquetas meta que aparecen en la parte superior de la página y que proporcionan información acerca de la página, pero que no afectan a su apariencia, son las que incluyen los metadatos que posteriormente facilitarán la búsqueda y recuperación de los documentos por parte de los robots y motores de búsqueda. Por ejemplo, la metaetiqueta generator indica el tipo de editor con el que se creó la página HTML. Por otro lado, también es posible crear documentos con editores de texto sin formato y después modificarlos con un editor HTML, o bien realizar la operación contraria, con el fin combinar lo mejor de estos dos sistemas. Y además tenemos la posibilidad de crear un documento en un formato determinado y transformar dicho documento al formato HTML por medio de un conversor.
Los editores HTML se clasifican en 3 tipos
Son muy útiles para apreciar los colores y la disposición de los elementos. Son útiles para recordar los comandos HTML y sus atributos.
Entre estos validadores podemos destacar los siguientes
Verifica si los documentos cumplen las recomendaciones del W3C World Wide Web Consortium Icono del Validador CSS.
Las etiquetas del lenguaje HTML
Básicamente, HTML utiliza los mismos elementos que SGML, esto es, marcas o etiquetas compuestas de códigos enmarcados por los signos < >. Cualquier documento HTML comienza con la etiqueta y termina con la etiqueta . Dentro del encabezamiento, la etiqueta principal es la del título, representado por la etiqueta En el cuerpo del documento se pueden establecer diferentes categorías utilizando diversos tamaños de fuentes y estableciendo así la estructura básica del documento. Para fijar un enlace, se debe enmarcar el texto que aparecerá subrayado para que el usuario pueda pulsarlo y le redirija a la dirección o URL marcada.
La etiqueta ancla debe incluir el parámetro href=«URL» y el texto para pulsar. Si se trata de imágenes, éstas se insertan mediante la etiqueta src=«URL» y también podemos conseguir que el gráfico se convierta en un enlace mediante la etiqueta correspondiente. Existen una gran cantidad de etiquetas, muchas de ellas pueden contener elementos y atributos que realizarán una función u otra según la voluntad del autor.
La estructura de un documento HTML
Un documento HTML comienza con la etiqueta , y termina con . El elemento contenido dentro del encabezamiento permite especificar el título de un documento HTML. Existen muchos otros elementos que se engloban dentro del encabezamiento pero para la estructura básica del lenguaje HTML en su nivel básico no son necesarios. El cuerpo de un documento HTML contiene el texto, imágenes, etc. que, con la presentación y los efectos que se decidan, se presentarán ante el usuario.
Dentro del cuerpo se pueden aplicar una serie de efectos a través de diferentes marcas o etiquetas .
Comentarios
Publicar un comentario