Portafolio piw by Victor Ibarra

2013 Portafolio de Evidencias Interfaces WEB.

Programación

VICTOR HUGO IBARRA ORTIZ. ING. EN SISTEMAS COMPUTACIONALES. MATRICULA: 25113172. PROFESOR: DR. JOSÉ BENITO FRANCO URREA. HORARIO: 11-13 HRS. UNIDAD: CENTRO. CUATRIMESTRE: 7MO. MODULO: 2 CICLO: 201330-2.

CD. OBREGON, SONORA A 12 DE NOVIEMBRE DE 2013.

ÍNDICE. 1. INFORMACIÓN INSTITUCIONAL. 2. INTRODUCCIÓN. A-CLASE SEMANA 1. B-CLASE SEMANA 2. C-CLASE SEMANA 3. D-CLASE SEMANA 4. 3. TAREAS. TAREA 1- ETIQUETAS HTML. TAREA 2-(REGISTRO DE DOMINIO- HOSTING- ETC…). 4. RESÚMENES. RESUMEN 1 -EL CICLO DE VIDA DE LA INFORMACIÓN EN LA WEB. RESUMEN 2- COTIZACIONES DE PÁGINAS WEB. RESUMEN 3- HACIA UN WEB ACCESIBLE.

INFORMACION INSTITUCIONAL. MISION.

La misión de UNIDEP es formar profesionales de éxito que cuenten con actitudes, habilidades y conocimientos que demanda el sector productivo de la región.

VISION.

La Universidad del Desarrollo Profesional es una institución de educación superior de calidad, que ofrece programas presénciales y semipresenciales de bachillerato, profesional asociado, licenciatura, postgrado, diplomados y cursos en México y en el extranjero.

Se distingue por facilitar a sus egresados la incorporación al mercado de trabajo, apoyada en una estrecha vinculación con el sector productivo y en planes de estudios pertinentes y dinámicos.

Es reconocida por su modelo educativo profesionalizante, por la flexibilidad de su oferta académica impartida en ciclos continuos y por horarios y cuotas accesibles, acordes a la disponibilidad de tiempo y recursos económicos del alumno.

Cuenta con profesores de amplia experiencia profesional y educativa. Sus instalaciones dentro de la ciudad permiten el fácil acceso. Cuenta con un modelo de administración sistematizado, participativo, operado por personal que es recompensado por su desempeño efectivo que le permite maximizar las aportaciones de sus socios y mantener finanzas sanas.

VALORES Y ACTITUDES UNIDEP.

Lealtad._ Los Integrantes de la comunidad Universitaria consideramos la fidelidad como un valor excelso que enaltecemos en nuestro quehacer diario. Justicia._ Los integrantes de la comunidad Universitaria actuamos con la constante y perpetua voluntad de dar a cada cual lo que le corresponde conforme a sus méritos o actos. Honestidad._ Los integrantes de la comunidad universitaria actuamos con sinceridad y honradez en nuestras tareas y en congruencia entre los pensamientos, palabras y acciones. Responsabilidad._ Los integrantes de la comunidad universitaria llevamos a cabo nuestras actividades con integridad, con sentido del propósito y apegados a los objetivos institucionales. Esfuerzo._ Los integrantes de la comunidad universitaria usamos nuestra máxima energía para cumplir con los objetivos trazados. Creatividad._ Los integrantes de la comunidad universitaria resolvemos los problemas con imaginación, conocimientos y con un espíritu de mejora continua.

INTRODUCCION. En los orígenes de la Web y en sus primeras versiones, HTML era un lenguaje fácil de aprender y muy reducido en cuanto a sus tags y estructura. Estamos hablando de los años 1990 al 1993. Todo cambió cuando empezaron a surgir los primeros navegadores que eran capaces de representar recursos gráficos como añadido a la información textual. Así, el número de sitios web comenzó a crecer y con él, el número de tags que la especificación HTML contemplaba. El objetivo era construir sitios web cada vez más atractivos visualmente hablando, con lo que HTML debía incluir nuevos tags destinados a conseguir diversos efectos visuales. Con todos estos cambios que la web había sufrido, nos encontramos con que un lenguaje que en sus inicios había sido "orientado a la estructura", ahora estaba totalmente "orientado a la visualización" (HTML 4 es la más viva representación de esta realidad). Encontramos tags com <B>, <U> o < I > que definen estilos de visualización sin aportar nada a la estructura del documento representados. Otro aspecto importante y que condiciona totalmente la estructura del documento es el uso del tag FONT. Con el uso de este tag podemos hacer que una zona que corresponde a la cabecera o título de una página, y que debería expresarse con un H1, pase ahora a estar definida mediante el tag FONT. Con este cambio se pierde totalmente la estructura del documento. La realidad ahora es que el mayor número de los sites realizados con HTML 4 consiguen que el volumen de información de visualización sea muy superior al de la información verdaderamente relevante. Esto parece, cuanto menos preocupante. Motivos por los que no podemos permitir que nuestros documentos publicados en la web pierdan su estructura: 1. La indexación por los buscadores es mucho más complicada (Google asigna un peso mucho mayor a una página que utiliza H1 para definir sus secciones, que a los campos META del documento). 2. Se reduce la accesibilidad. Actualmente existen aplicaciones que permiten la lectura de páginas web como ayuda a los discapacitados (persona ciegas o con otras discapacidades). Si una persona discapacitada intenta acceder a una página sin una mínima estructuración, el resultado puede ser lamentable. 3. La estructura de la página y la información contenida en la misma es mucho más sencilla de mantener. Actualmente, ciertos aspectos del código HTML pueden hacer que una misma página tenga visualizaciones distintas en distintos navegadores.

Estos errores de diseño son difícilmente depurables cuando la página contiene una estructura de tags complicada y sin ninguna estructuración. Por otra parte, un cambio en un tipo de fuente supone el rediseño de todas las páginas de un site al tener que sustituir todos los valores para el tag FONT.

Todos estos problemas han sido seguidos muy de cerca por el W3C, el cual comenzó a trabajar en 1995 en CSS. Principales características aportadas por CSS en contraposición a los elementos de visualización presentes en la especificación de HTML 4: 1.Estilo enriquecido. CSS permite la creación de documentos visualmente mucho más ricos que lo que HTML nunca permitirá. No en vano CSS está pensado única y exclusivamente para asistir al diseñador a la hora de dar estilo a un documento estructurado. 2.Fácil de utilizar. La utilización de hojas de estilo CSS hace que el diseñador pueda reducir sustancialmente su carga de trabajo al diseñar todo un site. Esto se debe a que CSS es capaz de centralizar ciertos efectos visuales que plasmemos en diversas secciones del site, en lugar de tenerlos diseminados por páginas y páginas del site. 3. Reutilización en múltiples páginas. Una hoja de estilo que recoja aspectos visuales comunes a varias páginas puede ser reutilizada en cualquier sección del site aprovechando dichos efectos ya definidos. De esta manera es sencillo generar un estilo general del web y mantenerlo así consistente para todas las páginas. Así, si deseamos modificar un estilo que es común a todo el site, sólo necesitaríamos modificar una línea de nuestro fichero CSS (con la aproximación clásica que ofrece HTML, deberíamos modificar todas y cada una de las páginas). 4. Reutilización en múltiples páginas. Una hoja de estilo que recoja aspectos visuales comunes a varias páginas puede ser reutilizada en cualquier sección del site aprovechando dichos efectos ya definidos. De esta manera es sencillo generar un estilo general del web y mantenerlo así consistente para todas las páginas. Así, si deseamos modificar un estilo que es común a todo el site, sólo necesitaríamos modificar una línea de nuestro fichero CSS (con la aproximación clásica que ofrece HTML, deberíamos modificar todas y cada una de las páginas). Figura 1. Hoja de estilos personal Figura 2. Hoja de estilos personal Ejemplo 1. Fichero personal.css

a {color: white; background-color: black;} 5. Reduce el tamaño del código HTML enviado. Al centralizar los estilos ya no es necesario la utilización de tags como FONT en todos los documentos del site. De esta manera se reduce considerablemente el tiempo en que tarda en cargarse el código de una página. 6. Nos prepara para el futuro. Debemos ser conscientes que muchos tags como FONT, BASEFONT, U, STRIKE, S, CENTER, han sido marcados por el W3C como "deprecated", es decir, que se desaconseja su uso ya que serán eliminados en un futuro de la especificación. De igual manera HTML retornará progresivamente a sus orígenes, volviendo a ser un lenguaje para la estructuración de información. Esta es la vía de XML, cuya primera aproximación es el lenguaje de marcas XHTML. HTML5 no es una nueva versión del antiguo lenguaje de etiquetas, ni siquiera una mejora de esta ya antigua tecnología, sino un nuevo concepto para la construcción de sitios web y aplicaciones en una era que combina dispositivos móviles, computación en la nube y trabajos en red. Todo comenzó mucho tiempo atrás con una simple versión de HTML propuesta para crear la estructura básica de páginas web, organizar su contenido y compartir información. El lenguaje y la web misma nacieron principalmente con la intención de comunicar información por medio de texto. El limitado objetivo de HTML motivó a varias compañías a desarrollar nuevos lenguajes y programas para agregar características a la web nunca antes implementadas. Estos desarrollos iniciales crecieron hasta convertirse en populares y poderosos accesorios. Simples juegos y bromas animadas pronto se transformaron en sofisticadas aplicaciones, ofreciendo nuevas experiencias que cambiaron el concepto de la web para siempre. De las opciones propuestas, Java y Flash fueron las más exitosas; ambas fueron masivamente adoptadas y ampliamente consideradas como el futuro de Internet. Sin embargo, tan pronto como el número de usuarios se incrementó e Internet pasó de ser una forma de conectar amantes de los ordenadores a un campo estratégico para los negocios y la interacción social, limitaciones presentes en estas dos tecnologías probaron ser una sentencia de muerte. El mayor inconveniente de Java y Flash puede describirse como una falta de integración. Ambos fueron concebidos desde el principio como complementos (plug-ins), algo que se inserta dentro de una estructura pero que comparte con la

misma solo espacio en la pantalla. No existía comunicación e integración alguna entre aplicaciones y documentos. La falta de integración resultó ser crítica y preparó el camino para la evolución de un lenguaje que comparte espacio en el documento con HTML y no está afectado por las limitaciones de los plug-ins. Javascript, un lenguaje interpretado incluido en navegadores, claramente era la manera de mejorar la experiencia de los usuarios y proveer funcionalidad para la web. Sin embargo, después de algunos años de intentos fallidos para promoverlo y algunos malos usos, el mercado nunca lo adoptó plenamente y pronto su popularidad declinó. Los detractores tenían buenas razones para oponerse a su adopción. En ese momento, Javascript no era capaz de reemplazar la funcionalidad de Flash o Java. A pesar de ser evidente que ambos limitaban el alcance de las aplicaciones y aislaban el contenido web, populares funciones como la reproducción de video se estaban convirtiendo en una parte esencial de la web y solo eran efectivamente ofrecidas a través de estas tecnologías. A pesar del suceso inicial, el uso de Java comenzó a declinar. La naturaleza compleja del lenguaje, su evolución lenta y la falta de integración disminuyeron su importancia hasta el punto en el que hoy día no es más usado en aplicaciones web de importancia. Sin Java, el mercado volcó su atención a Flash. Pero el hecho de que Flash comparte las mismas características básicas que su competidor en la web lo hace también susceptible de correr el mismo destino. Mientras esta competencia silenciosa se llevaba a cabo, el software para acceder a la web continuaba evolucionando. Junto con nuevas funciones y técnicas rápidas de acceso a la red, los navegadores también mejoraron gradualmente sus intérpretes Javascript. Más potencia trajo más oportunidades y este lenguaje estaba listo para aprovecharlas. En cierto punto durante este proceso, se hizo evidente para algunos desarrolladores que ni Java o Flash podrían proveer las herramientas que ellos necesitaban para crear las aplicaciones demandadas por un número creciente de usuarios. Estos desarrolladores, impulsados por las mejoras otorgadas por los navegadores, comenzaron a aplicar Javascript en sus aplicaciones de un modo nunca visto. La innovación y los increíbles resultados obtenidos llamaron la atención de más programadores. Pronto lo que fue llamado la “Web 2.0” nació y la percepción de Javascript en la comunidad de programadores cambió radicalmente.

Javascript era claramente el lenguaje que permitía a los desarrolladores innovar y hacer cosas que nadie había podido hacer antes en la web. En los últimos años, programadores y diseñadores web alrededor del mundo surgieron con los más increíbles trucos para superar las limitaciones de esta tecnología y sus iniciales deficiencias en portabilidad. Gracias a estas nuevas implementaciones, Javascript, HTML y CSS se convirtieron pronto en la más perfecta combinación para la necesaria evolución de la web. HTML5 es, de hecho, una mejora de esta combinación, el pegamento que une todo. HTML5 propone estándares para cada aspecto de la web y también un propósito claro para cada una de las tecnologías involucradas. A partir de ahora, HTML provee los elementos estructurales, CSS se encuentra concentrado en cómo volver esa estructura utilizable y atractiva a la vista, y Javascript tiene todo el poder necesario para proveer dinamismo y construir aplicaciones web completamente funcionales. Las barreras entre sitios webs y aplicaciones finalmente han desaparecido. Las tecnologías requeridas para el proceso de integración están listas. El futuro de la web es prometedor y la evolución y combinación de estas tres tecnologías (HTML, CSS y Javascript) en una poderosa especificación está volviendo a Internet la plataforma líder de desarrollo. HTML5 indica claramente el camino.

“ Add your company slogan ”

PROGRAMACIÓN DE INTERFACES

WEB

I Profesor: Dr. José Benito Franco Urrea

LOGO

PROGRAMACIÓN DE INTERFACES WEB I 1. Introducción a la programación en páginas WEB. 1.1. HTML HTML es el lenguaje con el que se definen las páginas web. Básicamente se trata de un conjunto de etiquetas que sirven para definir el texto y otros elementos que compondrán una página web. El HTML es un lenguaje de marcación de elementos para la creación de documentos hipertexto, muy fácil de aprender, lo que permite que cualquier persona, aunque no haya programado en la vida, pueda enfrentarse a la tarea de crear una web.

PROGRAMACIÓN DE INTERFACES WEB I

Para qué sirve    

Describir estructura y contenido Complementar el texto con Objetos Se escribe en forma de “Etiquetas” Rodeada por Corchetes Angulares

< >

PROGRAMACIÓN DE INTERFACES WEB I

Estructura de Elementos

PROGRAMACIÓN DE INTERFACES WEB I

PROGRAMACIÓN DE INTERFACES WEB I HTML5 provee básicamente tres características: estructura, estilo y funcionalidad. Nunca fue declarado oficialmente pero, incluso cuando algunas APIs (Interface de Programación de Aplicaciones) y la especificación de CSS3 por completo no son parte del mismo, HTML5 es considerado el producto de la combinación de HTML, CSS y Javascript. Estas tecnologías son altamente dependientes y actúan como una sola unidad organizada bajo la especificación de HTML5.

PROGRAMACIÓN DE INTERFACES WEB I HTML está a cargo de la estructura, CSS presenta esa estructura y su contenido en la pantalla y Javascript hace el resto que (como veremos más adelante) es extremadamente significativo.

Estructura global Los documentos HTML se encuentran estrictamente organizados. Cada parte del documento está diferenciada, declarada y determinada por etiquetas específicas. En esta parte del capítulo vamos a ver cómo construir la estructura global de un documento HTML y los nuevos elementos semánticos incorporados en HTML5. <!DOCTYPE html>

PROGRAMACIÓN DE INTERFACES WEB I Luego de declarar el tipo de documento, debemos comenzar a construir la estructura HTML. Como siempre, la estructura tipo árbol de este lenguaje tiene su raíz en el elemento <html>. Este elemento envolverá al resto del código: <!DOCTYPE html> <html lang=”es”> </html>

El atributo lang en la etiqueta de apertura <html> es el único atributo que necesitamos especificar en HTML5. Este atributo define el idioma humano del contenido del documento que estamos creando, en este caso es por español.

PROGRAMACIÓN DE INTERFACES WEB I <head> Continuemos construyendo nuestra plantilla. El código HTML insertado entre las etiquetas <html> tiene que ser dividido entre dos secciones principales. Al igual que en versiones previas de HTML, la primera sección es la cabecera y la segunda el cuerpo. El siguiente paso, por lo tanto, será crear estas dos secciones en el código usando los elementos <head> y <body> ya conocidos. El elemento <head> va primero, por supuesto, y al igual que el resto de los elementos estructurales tiene una etiqueta de apertura y una de cierre: <!DOCTYPE html> <html lang="es"> <head> </head> </html>

Excepto por el título y algunos íconos, el resto de la información incorporada en el documento entre estas etiquetas es invisible para el usuario.

Dentro de las etiquetas <head> definiremos el título de nuestra página web, declararemos el set de caracteres correspondiente, proveeremos información general acerca del documento e incorporaremos los archivos externos con estilos, códigos Javascript o incluso imágenes necesarias para generar la página en la pantalla.

PROGRAMACIÓN DE INTERFACES WEB I <body> La siguiente gran sección que es parte principal de la organización de un documento HTML es el cuerpo. El cuerpo representa la parte visible de todo documento y es especificado entre etiquetas <body>. Estas etiquetas tampoco han cambiado en relación con versiones previas de HTML:

<!DOCTYPE html> <html lang="es"> <head> </head> <body> </body> </html>

PROGRAMACIÓN DE INTERFACES WEB I <meta> Es momento de construir la cabecera del documento. Algunos cambios e innovaciones fueron incorporados dentro de la cabecera, y uno de ellos es la etiqueta que define el juego de caracteres a utilizar para mostrar el documento. Ésta es una etiqueta <meta> que especifica cómo el texto será presentado en pantalla: <!DOCTYPE html> <html lang="es"> <head> <meta charset=”iso-8859-1”> </head> <body> </body> </html>

Reconoce Acentos <meta charset=” utf-8”>

PROGRAMACIÓN DE INTERFACES WEB I <title> La etiqueta <title>, como siempre, simplemente especifica el título del documento <!DOCTYPE html> <html lang="es"> <head> <meta charset=”iso-8859-1”> <title>Este texto es el título del documento</title> </head> <body> </body> </html>

PROGRAMACIÓN DE INTERFACES WEB I <header> Uno de los nuevos elementos incorporados en HTML5 es <header>. El elemento <header> no debe ser confundido con <head> usado antes para construir la cabecera del documento. Del mismo modo que <head>, la intención de <header> es proveer información introductoria (títulos, subtítulos, logos), pero difiere con respecto a <head> en su alcance. Mientras que el elemento <head> tiene el propósito de proveer información acerca de todo el documento, <header> es sado solo para el cuerpo o secciones específicas dentro del cuerpo: <!DOCTYPE html> <html lang="es"> <head> <meta charset=”iso-8859-1”> <title>Este texto es el título del documento</title> </head> <body> <header> <h1>Este es el título principal del sitio web</h1> </header> </body> </html>

PROGRAMACIÓN DE INTERFACES WEB I Escribir código y ejecutarlo <!DOCTYPE html> <html lang="es"> <head> <meta charset=”iso-8859-1”> <title>Este texto es el título del documento</title> </head> <body> <header> <h1>Este es el título principal del sitio web</h1> </header> </body> </html>

PROGRAMACIÓN DE INTERFACES WEB I

Estructura del cuerpo La estructura del cuerpo (el código entre las etiquetas <body>) generará la parte visible del documento. Este es el código que producirá nuestra página web.

HTML siempre ofreció diferentes formas de construir y organizar la información dentro del cuerpo de un documento. Uno de los primeros elementos provistos para este propósito fue <table>. Las tablas permitían a los diseñadores acomodar datos, texto, imágenes y herramientas dentro de filas y columnas de celdas, incluso sin que hayan sido concebidas para este propósito. El elemento <div> comenzó a dominar la escena. Con el surgimiento de webs más interactivas y la integración de HTML, CSS y Javascript, el uso de <div> se volvió una práctica común. Pero este elemento, así como <table>, no provee demasiada información acerca de las parte del cuerpo que está representando. Desde imágenes a menús, textos, enlaces, códigos, formularios, cualquier cosa puede ir entre las etiquetas de apertura y cierre de un elemento <div>.

PROGRAMACIÓN DE INTERFACES WEB I Organización La Figura 1-1 representa un diseño común encontrado en la mayoría de los sitios webs estos días. A pesar del hecho de que cada diseñador crea sus propios diseños, en general podremos identificar las siguientes secciones en cada sitio web estudiado:

PROGRAMACIÓN DE INTERFACES WEB I En la parte superior, descripto como Cabecera, se encuentra el espacio donde usualmente se ubica el logo, título, subtítulos y una corta descripción del sitio web o la página. Inmediatamente debajo, podemos ver la Barra de Navegación en la cual casi todos los desarrolladores ofrecen un menú o lista de enlaces con el propósito de facilitar la navegación a través del sitio. Los usuarios son guiados desde esta barra hacia las diferentes páginas o documentos, normalmente pertenecientes al mismo sitio web.

PROGRAMACIÓN DE INTERFACES WEB I El contenido más relevante de una página web se encuentra, en casi todo diseño, ubicado en su centro. Esta sección presenta información y enlaces valiosos. La mayoría de las veces es dividida en varias filas y columnas. En el ejemplo de la Figura 1-1 se utilizaron solo dos columnas: Información Principal y Barra Lateral, pero esta sección es extremadamente flexible y normalmente diseñadores la adaptan acorde a sus necesidades insertando más columnas, dividiendo cada columna entre bloques más pequeños o generando diferentes distribuciones y combinaciones. El contenido presentado en esta parte del diseño es usualmente de alta prioridad. En el diseño de ejemplo, Información Principal podría contener una lista de artículos, descripción de productos, entradas de un blog o cualquier otra información importante, y la Barra Lateral podría mostrar una lista de enlaces apuntando hacia cada uno se esos ítems. En un blog, por ejemplo, esta última columna ofrecerá una lista de enlaces apuntando a cada entrada del blog, información acerca del autor, etc…

PROGRAMACIÓN DE INTERFACES WEB I En la base de un diseño web clásico siempre nos encontramos con una barra más que aquí llamamos Institucional. La nombramos de esta manera porque esta es el área en donde normalmente se muestra información acerca del sitio web, el autor o la empresa, además de algunos enlaces con respecto a reglas, términos y condiciones y toda información adicional que el desarrollador considere importante compartir. La barra Institucional es un complemento de la Cabecera y es parte de lo que se considera estos días la estructura esencial de una página web, como podemos apreciar en el siguiente ejemplo:

PROGRAMACIÓN DE INTERFACES WEB I La Figura 1-2 es una representación de un blog normal. En este ejemplo se puede claramente identificar cada parte del diseño considerado anteriormente. 1. Cabecera 2. Barra de Navegación 3. Sección de Información Principal 4. Barra Lateral 5. El pie o la barra Institucional

PROGRAMACIÓN DE INTERFACES WEB I HTML5 considera esta estructura básica y provee nuevos elementos para diferenciar y declarar cada una de sus partes. A partir de ahora podemos decir al navegador para qué es cada sección:

PROGRAMACIÓN DE INTERFACES WEB I <nav> Siguiendo con nuestro ejemplo, la siguiente sección es la Barra de Navegación. Esta barra es generada en HTML5 con el elemento <nav>: <!DOCTYPE html> <html lang="es"> <head> <meta charset=”utf-8”> <title>Este texto es el título del documento</title> </head> <body> <header> <h1>Este es el título principal del sitio web</h1> </header> <nav> <ul> <li>principal</li> <li>fotos</li> <li>videos</li> <li>contacto</li> </ul> </nav> </body> </html>

PROGRAMACIÓN DE INTERFACES WEB I Como se puede apreciar en el ejemplo anterior, el elemento <nav> se encuentra dentro de las etiquetas <body> pero es ubicado después de la etiqueta de cierre de la cabecera (</header>), no dentro de las etiquetas <header>. Esto es porque <nav> no es parte de la cabecera sino una nueva sección.

PROGRAMACIÓN DE INTERFACES WEB I

<section> Siguiendo nuestro diseño estándar nos encontramos con las columnas que en la Figura 1-1 llamamos Información Principal y Barra Lateral. Como explicamos anteriormente, la columna Información Principal contiene la información más relevante del documento y puede ser encontrada en diferentes formas (por ejemplo, dividida en varios bloques o columnas). Debido a que el propósito de estas columnas es más general, el elemento en HTML5 que especifica estas secciones se llama simplemente <section>:

PROGRAMACIÓN DE INTERFACES WEB I <!DOCTYPE html> <html lang="es"> <head> <meta charset=”utf-8”> <title>Este texto es el título del documento</title> </head> <body> <header> <h1>Este es el título principal del sitio web</h1> </header> <nav> <ul> Al igual que la Barra de Navegación, <li>principal</li> la columna Información Principal es <li>fotos</li> una sección aparte. Por este motivo, <li>videos</li> la sección para Información Principal <li>contacto</li> va debajo de l a etiqueta de cierre </ul> </nav>. </nav> <section> </section> </body> </html>

PROGRAMACIÓN DE INTERFACES WEB I <aside> En un típico diseño web (Figura 1-1) la columna llamada Barra Lateral se ubica al lado de la columna Información Principal. Esta es una columna o sección que normalmente contiene datos relacionados con la información principal pero que no son relevantes o igual de importantes. </section> <aside> <blockquote>Mensaje número uno</blockquote> <blockquote>Mensaje número dos</blockquote> </aside> </body> </html>

PROGRAMACIÓN DE INTERFACES WEB I El elemento <aside> podría estar ubicado del lado derecho o izquierdo de nuestra página de ejemplo, la etiqueta no tiene una posición predefinida. El elemento <aside> solo describe la información que contiene, no el lugar dentro de la estructura. Este elemento puede estar ubicado en cualquier parte del diseño y ser usado siempre y cuando su contenido no sea considerado como el contenido principal del documento. Por ejemplo, podemos usar <aside> dentro del elemento <section> o incluso insertado entre la información relevante, como en el caso de una cita.

PROGRAMACIÓN DE INTERFACES WEB I Dentro del cuerpo El cuerpo de nuestro documento está listo. La estructura básica de nuestro sitio web fue finalizada, pero aún tenemos que trabajar en el contenido. Los elementos HTML5 estudiados hasta el momento nos ayudan a identificar cada sección del diseño y asignar un propósito intrínseco a cada una de ellas, pero lo que es realmente importante para nuestro sitio web se encuentra en el interior de estas secciones. La mayoría de los elementos ya estudiados fueron creados para construir una estructura para el documento HTML que pueda ser identificada y reconocida por los navegadores y nuevos dispositivos.

PROGRAMACIÓN DE INTERFACES WEB I <article> El diseño considerado anteriormente (Figura 1-1) es el más común y representa una estructura esencial para los sitios web estos días, pero es además ejemplo de cómo el contenido clave es mostrado en pantalla. Del mismo modo que los blogs están divididos en entradas, los sitios web normalmente presentan información relevante dividida en partes que comparten similares características. El elemento <article> nos permite identificar cada una de estas partes:

<section> <article> Este es el texto de mi primer mensaje </article> <article> Este es el texto de mi segundo mensaje </article> </section>

PROGRAMACIÓN DE INTERFACES WEB I Como puede observarse en el código, las etiquetas <article> se encuentran ubicadas dentro del elemento <section>. Las etiquetas <article> en nuestro ejemplo pertenecen a esta sección, son sus hijos, del mismo modo que cada elemento dentro de las etiquetas <body> es hijo del cuerpo. Y al igual que cada elemento hijo del cuerpo, las etiquetas <article> son ubicadas una sobre otra, como es mostrado en la Figura 1-4.

PROGRAMACIÓN DE INTERFACES WEB I El elemento <article> no está limitado por su nombre (no se limita, por ejemplo, a artículos de noticias). Este elemento fue creado con la intención de contener unidades independientes de contenido, por lo que puede incluir mensajes de foros, artículos de una revista digital, entradas de blog, comentarios de usuarios, etc… Lo que hace es agrupar porciones de información que están relacionadas entre sí independientemente de su naturaleza.

PROGRAMACIÓN DE INTERFACES WEB I

Como una parte independiente del documento, el contenido de cada elemento <article> tendrá su propia estructura. Para definir esta estructura, podemos aprovechar la versatilidad de los elementos <header> y <footer> estudiados anteriormente. Estos elementos son portables y pueden ser usados no solo para definir los límites del cuerpo sino también en cualquier sección de nuestro documento:

PROGRAMACIĂ&#x201C;N DE INTERFACES WEB I <section> <article> <header> <h1>TĂtulo del mensaje uno</h1> </header> Este es el texto de mi primer mensaje <footer> <p>comentarios (0)</p> </footer> </article> <article> <header> <h1>Titulo del mensaje dos</h1> </header> Este es el texto de mi segundo mensaje <footer> <p>comentarios (0)</p> </footer> </article> </section>

PROGRAMACIÓN DE INTERFACES WEB I

Los dos mensajes insertados en el código fueron construidos con el elemento <article> y tienen una estructura específica. En la parte superior de esta estructura incluimos las etiquetas <header> conteniendo el título definido con el elemento <h1>, debajo se encuentra el contenido mismo del mensaje y sobre el final, luego del texto, vienen las etiquetas <footer> especificando la cantidad de comentarios recibidos.

PROGRAMACIÓN DE INTERFACES WEB I

<hgroup> Dentro de cada elemento <header>, en la parte superior del cuerpo o al comienzo de cada <article>, incorporamos elementos <h1> para declarar un título. Básicamente, las etiquetas <h1> son todo lo que necesitamos para crear una línea de cabecera para cada parte del documento, pero es normal que necesitemos también agregar subtítulos o más información que especifique de qué se trata la página web o una sección en particular. De hecho, el elemento <header> fue creado para contener también otros elementos como tablas de contenido, formularios de búsqueda o textos cortos y logos. Para construir este tipo de cabeceras, podemos aprovechar el resto de las etiquetas H, como <h1>, <h2>, <h3>, <h4>, <h5> y <h6>, pero siempre considerando que por propósitos de procesamiento interno, y para evitar generar múltiples secciones durante la interpretación del documento por parte del navegador, estas etiquetas deben ser agrupadas juntas. Por esta razón, HTML5 provee el elemento <hgroup>:

PROGRAMACIÓN DE INTERFACES WEB I <section> <article> <header> <hgroup> <h1>Título del mensaje uno</h1> <h2>Subtítulo del mensaje uno</h2> </hgroup> <p>publicado 10-12-2011</p> </header> Este es el texto de mi primer mensaje <footer> <p>comentarios (0)</p> </footer> </article> <article> <header> <hgroup> <h1>Título del mensaje dos</h1> <h2>Subtítulo del mensaje dos</h2> </hgroup> <p>publicado 14-10-2013 </p> </header>

Este es el texto de mi segundo mensaje <footer> <p>comentarios (0)</p> </footer> </article> </section>

Siempre recuerde que <hgroup> fue creado solo con la intención de agrupar etiquetas H, exactamente como su nombre lo indica.

PROGRAMACIÓN DE INTERFACES WEB I

<figure> y <figcaption> La etiqueta <figure> fue creada para ayudarnos a ser aún más específicos a la hora de declarar el contenido del documento. Antes de que este elemento sea introducido, no podíamos identificar el contenido que era parte de la información pero a la vez independiente, como ilustraciones, fotos, videos, etc… Normalmente estos elementos son parte del contenido relevante pero pueden ser extraídos o movidos a otra parte sin afectar o interrumpir el flujo del documento. Cuando nos encontramos con esta clase de información, las etiquetas <figure> pueden ser usadas para identificarla:

PROGRAMACIĂ&#x201C;N DE INTERFACES WEB I </header> Este es el texto de mi primer mensaje <figure> <img src="img/imagen1.jpg"> <figcaption> Esta es la imagen del primer mensaje </figcaption> </figure> <footer> <p>comentarios (0)</p>

PROGRAMACIÓN DE INTERFACES WEB I En el código, en el primer mensaje, luego del texto insertamos una imagen :

<img src="img/imagen1.jpg"> Esta es una práctica común, a menudo el texto es enriquecido con imágenes o videos. Las etiquetas <figure> nos permiten envolver estos complementos visuales y diferenciarlos así de la información más relevante.

PROGRAMACIÓN DE INTERFACES WEB I <mark> La etiqueta <mark> fue agregada para resaltar parte de un texto que originalmente no era considerado importante pero ahora es relevante acorde con las acciones del usuario. El ejemplo que más se ajusta a este caso es un resultado de búsqueda. El elemento <mark> resaltará la parte del texto que concuerda con el texto buscado: <span>Mi <mark>coche</mark> es rojo</span> <section> <article> <header> <span>Mi <mark>coche</mark> es rojo</span> <hgroup> <h1>Título del mensaje uno</h1> <h2>Subtítulo del mensaje uno</h2>

PROGRAMACIÓN DE INTERFACES WEB I <small> La nueva especificidad de HTML es también evidente en elementos como <small>. Previamente este elemento era utilizado con la intención de presentar cualquier texto con letra pequeña. La palabra clave referenciaba el tamaño del texto, independientemente de su significado. En HTML5, el nuevo propósito de <small> es presentar la llamada letra pequeña, como impresiones legales, descargos, etc…

PROGRAMACIÓN DE INTERFACES WEB I <cite> Otro elemento que ha cambiado su naturaleza para volverse más específico es <cite>. Ahora las etiquetas <cite> encierran el título de un trabajo, como un libro, una película, una canción, etc…

<span>Amo la película <cite>Tentaciones</cite></span> <address> El elemento <address> es un viejo elemento convertido en un elemento estructural. No necesitamos usarlo previamente para construir nuestra plantilla, sin embargo podría ubicarse perfectamente en algunas situaciones en las que debemos presentar información de contacto relacionada con el contenido del elemento <article> o el cuerpo completo. Este elemento debería ser incluido dentro de <footer>, como en el siguiente ejemplo:

<address> <a href="EJM 1.html">Benny Franco</a> </address> </footer> </body>

PROGRAMACIÓN DE INTERFACES WEB I <time> En cada <article> de nuestra última plantilla incluimos la fecha indicando cuándo el mensaje fue publicado. Para esto usamos un simple elemento <p> dentro de la cabecera (<header>) del mensaje, pero existe un elemento en HTML5 específico para este propósito. El elemento <time> nos permite declarar un texto comprensible para humanos y navegadores que representa fecha y hora: <article> <header> <h1>Título del mensaje dos</h1> <time datetime="2011-10-12" pubdate>publicado 12-10-2011</time>

</header> Este es el texto del mensaje </article> El atributo datetime tiene el valor que representa la fecha comprensible para el navegador (timestamp). El formato de este valor deberá seguir un patrón similar al del siguiente ejemplo: 2011-10-12T12:10:45. También incluimos el atributo pubdate, el cual solo es agregado para indicar que el valor del atributo datetime representa la fecha de publicación.

PROGRAMACIÓN DE INTERFACES WEB I

Referencia rápida <header> Este elemento presenta información introductoria y puede ser aplicado en diferentes secciones del documento. Tiene el propósito de contener la cabecera de una sección pero también puede ser utilizado para agrupar índices, formularios de búsqueda, logos, etc… <nav> Este elemento indica una sección de enlaces con propósitos de navegación, como menús o índices. No todos los enlaces dentro de una página web tienen que estar dentro de un elemento <nav>, solo aquellos que forman partes de bloques de navegación. <section> Este elemento representa una sección general del documento. Es usualmente utilizado para construir varios bloques de contenido (por ejemplo, columnas) con el propósito de ordenar el contenido que comparte una característica específica, como capítulos o páginas de un libro, grupo de noticias, artículos, etc…

PROGRAMACIÓN DE INTERFACES WEB I <aside> Este elemento representa contenido que está relacionado con el contenido principal pero no es parte del mismo. Ejemplos pueden ser citas, información en barras laterales, publicidad, etc… <footer> Este elemento representa información adicional sobre su elemento padre. Por ejemplo, un elemento <footer> insertado al final del cuerpo proveerá información adicional sobre el cuerpo del documento, como el pie normal de una página web. Puede ser usado no solo para el cuerpo sino también para diferentes secciones dentro del cuerpo, otorgando información adicional sobre estas secciones específicas. <article> Este elemento representa una porción independiente de información relevante (por ejemplo, cada artículo de un periódico o cada entrada de un blog). El elemento <article> puede ser anidado y usado para mostrar una lista dentro de otra lista de ítems relacionados, como comentarios de usuarios en entradas de blogs, por ejemplo. <hgroup> Este elemento es usado para agrupar elementos H cuando la cabecera tiene múltiples niveles (por ejemplo, una cabecera con título y subtítulo).

PROGRAMACIÓN DE INTERFACES WEB I <figure> Este elemento representa una porción independiente de contenido (por ejemplo, imágenes, diagramas o videos) que son referenciadas desde el contenido principal. Esta es información que puede ser removida sin afectar el fluido del resto del contenido. <figcaption> Este elemento es utilizado para mostrar una leyenda o pequeño texto relacionado con el contenido de un elemento <figure>, como la descripción de una imagen. <mark> Este elemento resalta un texto que tiene relevancia en una situación en particular o que ha sido mostrado en respuesta de la actividad del usuario. <small> Este elemento representa contenido al margen, como letra pequeña (por ejemplo, descargos, restricciones legales, declaración de derechos, etc…).

PROGRAMACIÓN DE INTERFACES WEB I <cite> Este elemento es usado para mostrar el título de un trabajo (libro, película, poema, etc…). <address> Este elemento encierra información de contacto para un elemento <article> o el documento completo. Es recomendable que sea insertado dentro de un elemento <footer>. <time> Este elemento se utiliza para mostrar fecha y hora en formatos comprensibles por los usuarios y el navegador. El valor para los usuarios es ubicado entre las etiquetas mientras que el específico para programas y navegadores es incluido como el valor del atributo datetime. Un segundo atributo optativo llamado pubdate es usado para indicar que el valor de datetime es la fecha de publicación

“ Add your company slogan ”

PROGRAMACIÓN DE INTERFACES

WEB

I Profesor: Dr. José Benito Franco Urrea

LOGO

PROGRAMACIÓN DE INTERFACES WEB I

CSS y HTML Estilos CSS (Cascading Style Sheets) y modelos de caja Elementos block Con respecto a la estructura, básicamente cada navegador ordena los elementos por defecto de acuerdo a su tipo: block (bloque) o inline (en línea). Esta clasificación está asociada con la forma en que los elementos son mostrados en pantalla. Elementos block son posicionados uno sobre otro hacia abajo en la página. Elementos inline son posicionados lado a lado, uno al lado del otro en la misma línea, sin ningún salto de línea a menos que ya no haya más espacio horizontal para ubicarlos.

PROGRAMACIร N DE INTERFACES WEB I Casi todos los elementos estructurales en nuestros documentos serรกn tratados por los navegadores como elementos block por defecto. Esto significa que cada elemento HTML que representa una parte de la organizaciรณn visual (por ejemplo: <section>, <nav>, <header>, <footer>, <div>) serรก posicionado debajo del anterior.

PROGRAMACIÓN DE INTERFACES WEB I Modelos de caja Para aprender cómo podemos crear nuestra propia organización de los elementos en pantalla, debemos primero entender cómo los navegadores procesan el código HTML. Los navegadores consideran cada elemento HTML como una caja. Una página web es en realidad un grupo de cajas ordenadas siguiendo ciertas reglas. Estas reglas son establecidas por estilos provistos por los navegadores o por los diseñadores usando CSS.

CSS tiene un set predeterminado de propiedades destinados a sobrescribir los estilos provistos por navegadores y obtener la organización deseada. Estas propiedades no son específicas, tienen que ser combinadas para formar reglas que luego serán usadas para agrupar cajas y obtener la correcta disposición en pantalla. La combinación de estas reglas es normalmente llamada modelo o sistema de disposición. Todas estas reglas aplicadas juntas constituyen lo que se llama un modelo de caja.

PROGRAMACIÓN DE INTERFACES WEB I

Centrando el cuerpo de la plantilla El primer elemento que es parte del modelo de caja es siempre <body>. Normalmente, por diferentes razones de diseño, el contenido de este elemento debe ser posicionado horizontalmente. Siempre deberemos especificar el tamaño de este contenido, o un tamaño máximo, para obtener un diseño consistente a través de diferentes configuraciones de pantalla.

PROGRAMACIÓN DE INTERFACES WEB I Crear un nuevo archivo con nombre plantilla

.css

y con extensión

(plantilla.css)

Agregar la siguiente línea:

body { text-align: center;} Nota: el archivo plantilla.css debe de estar en el mismo directorio que el archivo ejemplo1.html

En el código del ejemplo1.html agregar la línea: <!DOCTYPE html>

<head> <meta charset=”UTF-8”> <title>Este texto es el título del documento</title>

PROGRAMACIÓN DE INTERFACES WEB I Normalmente, para la mayoría de los elementos, necesitamos personalizar los márgenes o simplemente mantenerlos al mínimo. Algunos elementos por defecto tienen márgenes que son diferentes de cero y en la mayoría de los casos demasiado amplios. A medida que avanzamos en la creación de nuestro diseño encontraremos que la mayoría de los elementos utilizados deben tener un margen de 0 pixeles. Para evitar el tener que repetir estilos constantemente, podemos utilizar el selector universal. Selector universal

Agregar la siguiente línea al archivo plantilla.css:

* {margin: 0px; padding: 0px;}

PROGRAMACIÓN DE INTERFACES WEB I Existe solo un modelo de caja que es considerado estándar estos días, y muchos otros que aún se encuentran en estado experimental. El modelo válido y ampliamente adoptado es el llamado Modelo de Caja Tradicional, el cual ha sido usado desde la primera versión de CSS.

Creando la caja principal Siguiendo con el diseño de nuestra plantilla, debemos especificar una tamaño o tamaño máximo para el contenido del cuerpo. En el código Ejemplo 1.thml agregamos un elemento <div> a la plantilla para agrupar todas las cajas dentro del cuerpo. Este <div> será considerado la caja principal para la construcción de nuestro modelo de caja (este es el propósito por el que lo agregamos). De este modo, modificando el tamaño de este elemento lo hacemos al mismo tiempo para todos los demás:

PROGRAMACIÓN DE INTERFACES WEB I

Agregar la siguiente línea al archivo plantilla.css: #agrupar {width: 960px; margin: 15px auto;text-align: left;} La regla en el código está referenciando por primera vez un elemento a través del valor de su atributo id. El carácter # le está diciendo al navegador que el elemento afectado por este conjunto de estilos tiene el atributo

id con el

valor agrupar. Esta regla provee tres estilos para la caja principal. El primer estilo establece un valor fijo de 960 pixeles. Esta caja tendrá siempre un ancho de 960 pixeles, lo que representa un valor común para un sitio web estos días (los valores se encuentranentre 960 y 980 pixeles de ancho.

PROGRAMACIÓN DE INTERFACES WEB I En el código el estilo margin: 15px auto asigna 15 pixeles al margen superior e inferior del elemento <div> que está afectando y declara como automático el tamaño de los márgenes de izquierda y derecha (los dos valores declarados son usados para definir los cuatro márgenes). De esta manera, habremos generado un espacio de 15 pixeles en la parte superior e inferior del cuerpo y los espacios a los laterales (margen izquierdo y derecho) serán calculados automáticamente de acuerdo al tamaño del cuerpo del documento y el elemento <div>, efectivamente centrando el contenido en pantalla.

PROGRAMACIÓN DE INTERFACES WEB I El segundo estilo es parte de lo que llamamos el Modelo de Caja Tradicional. En la regla previa del código en el archivo css especificamos que el contenido del cuerpo sería centrado horizontalmente con el estilo text-align: center. Pero esto solo afecta contenido inline, como textos o imágenes. Para elementos block, como un <div>, necesitamos establecer un valor específico para sus márgenes que los adapta automáticamente al tamaño de su elemento padre. La propiedad margin usada para este propósito puede tener cuatro valores: superior, derecho, inferior, izquierdo, en este orden. Esto significa que el primer valor declarado en el estilo representa el margen de la parte superior del elemento, el segundo es el margen de la derecha, y así sucesivamente.

PROGRAMACIÓN DE INTERFACES WEB I La página web ya está centrada y tiene un tamaño fijo de 960 pixeles.

La cabecera Continuemos con el resto de los elementos estructurales. Siguiendo la etiqueta de apertura del <div> principal se encuentra el primer elemento estructural de HTML5: <header>. Este elemento contiene el título principal de nuestra página web y estará ubicado en la parte superior de la pantalla. En nuestra plantilla, <header> fue identificado con el atributo id y el valor cabecera. Como ya mencionamos, cada elemento block, así como el cuerpo, por defecto tiene un valor de ancho del 100%. Esto significa que el elemento ocupará todo el espacio horizontal disponible. En el caso del cuerpo, ese espacio es el ancho total de la pantalla visible (la ventana del navegador), pero en el resto de los elementos el espacio máximo disponible estará determinado por el ancho de su elemento padre. En nuestro ejemplo, el espacio máximo disponible para los elemento dentro de la caja principal será de 960 pixeles, porque su padre es la caja principal la cual fue previamente configurada con este tamaño.

PROGRAMACIÓN DE INTERFACES WEB I Agregar la siguiente línea al archivo plantilla.css: body {text-align: center;} * {margin: 0px;padding: 5px;}

#cabecera {background: #FFFBB9;border: 1px solid #999999;padding: 20px;}

Debido a que <header> ocupará todo el espacio horizontal disponible en la caja principal y será tratado como un elemento block (y por esto posicionada en la parte superior de la página), lo único que resta por hacer es asignar estilos que nos permitirán reconocer el elemento cuando es presentado en pantalla. En la regla mostrada en el código del archivo css le otorgamos a <header> un fondo amarillo, un borde sólido de 1 pixel y un margen interior de 20 pixeles usando la propiedad padding.

PROGRAMACIÓN DE INTERFACES WEB I

Barra de navegación Siguiendo al elemento <header> se encuentra el elemento <nav>, el cual tiene el propósito de proporcionar ayuda para la navegación. Los enlaces agrupados dentro de este elemento representarán el menú de nuestro sitio web. Este menú será una simple barra ubicada debajo de la cabecera. Por este motivo, del mismo modo que el elemento <header>, la mayoría de los estilos que necesitamos para posicionar el elemento <nav> ya fueron asignados: <nav> es un elemento block por lo que será ubicado debajo del elemento previo, su ancho por defecto será 100% por lo que será tan ancho como su padre (el <div> principal), y (también por defecto) será tan alto como su contenido y los márgenes predeterminados. Por lo tanto, lo único que nos queda por hacer es mejorar su aspecto en pantalla. Esto último lo logramos agregando un fondo gris y un pequeño margen interno para separar las opciones del menú del borde del elemento:

PROGRAMACIÓN DE INTERFACES WEB I Agregar las siguientes línea al archivo plantilla.css: body {text-align: center;} * {margin: 0px;padding: 5px;} #cabecera {background: #FFFBB9;border: 1px solid #999999;padding: 20px;}

#menu { background: #CCCCCC; padding: 5px 15px;} #menu li {display: inline-block; list-style: none;padding: 5px;font: bold 14px verdana, sans-serif;} Dentro de la barra de navegación hay una lista creada con las etiquetas <ul> y <li>. Por defecto, los ítems de una lista son posicionados unos sobre otros. Para cambiar este comportamiento y colocar cada opción del menú una al lado de la otra, referenciamos los elementos <li> dentro de este elemento <nav> en particular usando el selector #menu li, y luego asignamos a todos ellos el estilo display: inline-block para convertirlos en lo que se llama cajas inline. A diferencia de los elementos block, los elementos afectados por el parámetro inline-block estandarizado en CSS3 no generan ningún salto de línea pero nos permiten tratarlos como elementos block y así declarar un valor de ancho determinado. Este parámetro también ajusta el tamaño del elemento de acuerdo con su contenido cuando el valor del ancho no fue especificado.

PROGRAMACIÓN DE INTERFACES WEB I

Section y aside Los siguientes elementos estructurales en nuestro código son dos cajas ordenadas horizontalmente. El Modelo de Caja Tradicional es construido sobre estilos CSS que nos permiten especificar la posición de cada caja. Usando la propiedad float podemos posicionar estas cajas del lado izquierdo o derecho de acuerdo a nuestras necesidades. Los elementos que utilizamos en nuestra plantilla HTML para crear estas cajas son <section> y <aside>, cada uno identificado con el atributo id y los valores seccion y columna respectivamente.

#menu { background: #CCCCCC; padding: 5px 15px;} #menu li {display: inline-block; list-style: none;padding: 5px;font: bold 14px verdana, sans-serif;}

#seccion {float: left; width: 660px; margin: 20px;} #columna {float: left; width: 220px; margin: 20px 0px; padding: 20px; background: #CCCCCC;}

PROGRAMACIÓN DE INTERFACES WEB I La propiedad de CSS float es una de las propiedades más ampliamente utilizadas para aplicar el Modelo de Caja Tradicional. Hace que el elemento flote hacia un lado o al otro en el espacio disponible. Los elementos afectados por float actúan como elementos block (con la diferencia de que son ubicados de acuerdo al valor de esta propiedad y no el flujo normal del documento). Los elementos son movidos a izquierda o derecha en el área disponible, tanto como sea posible, respondiendo al valor de float. La propiedad float mueve la caja al espacio disponible del lado especificado por su valor, width asigna un tamaño horizontal y margin, por supuesto, declara el margen del elemento. Afectado por estos valores, el contenido del elemento <section> estará situado a la izquierda de la pantalla con un tamaño de 660 pixeles, más 40 pixeles de margen, ocupando un espacio total de 700 pixeles de ancho.

PROGRAMACIÓN DE INTERFACES WEB I La propiedad float del elemento <aside> también tiene el valor left (izquierda). Esto significa que la caja generada será movida al espacio disponible a su izquierda. Debido a que la caja previa creada por el elemento <section> fue también movida a la izquierda de la pantalla, ahora el espacio disponible será solo el que esta caja dejó libre. La nueva caja quedará ubicada en la misma línea que la primera pero a su derecha, ocupando el espacio restante en la línea, creando la segunda columna de nuestro diseño. El tamaño declarado para esta segunda caja fue de 220 pixeles. También agregamos un fondo gris y configuramos un margen interno de 20 pixeles. Como resultado final, el ancho de esta caja será de 220 pixeles más 40 pixeles agregados por la propiedad padding (los márgenes de los lados fueron declarados a 0px).

PROGRAMACIÓN DE INTERFACES WEB I

Footer Para finalizar la aplicación del Modelo de Caja Tradicional, otra propiedad CSS tiene que ser aplicada al elemento <footer>. Esta propiedad devuelve al documento su flujo normal y nos permite posicionar <footer> debajo del último elemento en lugar de a su lado:

Agregar las siguientes línea al archivo plantilla.css:

#pie { clear: both; text-align: center; padding: 20px; border-top: 2px solid #999999;}

PROGRAMACIÓN DE INTERFACES WEB I Declara un borde de 2 pixeles en la parte superior de <footer>, un margen interno (padding) de 20 pixeles, y centra el texto dentro del elemento. A sí mismo, restaura el normal flujo del documento con la propiedad clear. Esta propiedad simplemente restaura las condiciones normales del área ocupada por el elemento, no permitiéndole posicionarse adyacente a una caja flotante. El valor usualmente utilizado es both, el cual significa que ambos lados del elemento serán restaurados y el elemento seguirá el flujo normal (este elemento ya no es flotante como los anteriores). Esto, para un elemento block, quiere decir que será posicionado debajo del último elemento, en una nueva línea. La propiedad clear también empuja los elementos verticalmente, haciendo que las cajas flotantes ocupen un área real en la pantalla. Sin esta propiedad, el navegador presenta el documento en pantalla como si los elementos flotantes no existieran y las cajas se superponen.

PROGRAMACIÓN DE INTERFACES WEB I

PROGRAMACIÓN DE INTERFACES WEB I Los valores left (izquierda) y right (derecha) de la propiedad float no significan que las cajas deben estar necesariamente posicionadas del lado izquierdo o derecho de la ventana. Lo que los valores hacen es volver flotante ese lado del elemento, rompiendo el flujo normal del documento. Si el valor es left, por ejemplo, el navegador tratará de posicionar el elemento del lado izquierdo en el espacio disponible. Si hay espacio disponible luego de otro elemento, este nuevo elemento será situado a su derecha, porque su lado izquierdo fue configurado como flotante. El elemento flota hacia la izquierda hasta que encuentra algo que lo bloquea, como otro elemento o el borde de su elemento padre. Esto es importante cuando queremos crear varias columnas en la pantalla. En este caso cada columna tendrá el valor left en la propiedad float para asegurar que cada columna estará continua a la otra en el orden correcto. De este modo, cada columna flotará hacia la izquierda hasta que es bloqueada por otra columna o el borde del elemento padre.

PROGRAMACIÓN DE INTERFACES WEB I Últimos toques Lo único que nos queda por hacer es trabajar en el diseño del contenido. Para esto, solo necesitamos configurar los pocos elementos HTML5 restantes:

Agregar las siguientes línea al archivo plantilla.css:

article {background: #FFFBCC; border: 1px solid #999999; padding: 20px; margin-bottom: 15px;} article footer {text-align: right;} time {color: #999999;} figcaption {font: italic 14px verdana, sans-serif;}

PROGRAMACIÓN DE INTERFACES WEB I La primera regla del código referencia todos los elementos <article> y les otorga algunos estilos básicos (color de fondo, un borde sólido de 1 pixel, margen interno y margen inferior). El margen inferior de 15 pixeles tiene el propósito de separar un elemento <article> del siguiente verticalmente. Cada elemento <article> cuenta también con un elemento <footer> que muestra el número de comentarios recibidos. Para referenciar un elemento <footer> dentro de un elemento <article>, usamos el selector article footer que significa “cada <footer> dentro de un <article> será afectado por los siguientes estilos”. Esta técnica de referencia fue aplicada aquí para alinear a la derecha el texto dentro de los elementos <footer> de cada <article>. Al final del código en el Listado 2-35 cambiamos el color de cada elemento <time> y diferenciamos la descripción de la imagen (insertada con el elemento <figcaption>) del resto del texto usando una tipo de letra diferente.

“ Add your company slogan ”

PROGRAMACIÓN DE INTERFACES

WEB

I Profesor: Dr. José Benito Franco Urrea

LOGO

PROGRAMACIÓN DE INTERFACES WEB I

Estilos en línea Una de las técnicas más simples para incorporar estilos CSS a un documento HTML es la de asignar los estilos dentro de las etiquetas por medio del atributo style.

PROGRAMACIÓN DE INTERFACES WEB I Documento HTML simple que contiene el elemento <p> modificado por el atributo style con el valor font-size: 20px. Este estilo cambia el tamaño por defecto del texto dentro del elemento <p> a un nuevo tamaño de 20 pixeles. Estilos1.html <!DOCTYPE html> <head> <meta charset="utf-8"/> <title>Ejemplos con CSS3</title> </head> <body> <p style=”font-size: 20px”>Página WEB con estilos CSS</p> </body> </html>

PROGRAMACIÓN DE INTERFACES WEB I Usar la técnica demostrada anteriormente es una buena manera de probar estilos y obtener una vista rápida de sus efectos, pero no es recomendado para aplicar estilos a todo el documento. La razón es simple: cuando usamos esta técnica, debemos escribir y repetir cada estilo en cada uno de los elementos que queremos modificar, incrementando el tamaño del documento a proporciones inaceptables y haciéndolo imposible de mantener y actualizar. Solo imagine lo que ocurriría si decide que en lugar de 20 pixeles el tamaño de cada uno de los elementos <p> debería ser de 24 pixeles. Tendría que modificar cada estilo en cada etiqueta <p> en el documento completo.

PROGRAMACIĂ&#x201C;N DE INTERFACES WEB I Estilos embebidos Una mejor alternativa es insertar los estilos en la cabecera del documento y luego usar referencias para afectar los elementos HTML correspondientes:

estilos2.html <!DOCTYPE html> <head> <meta charset="utf-8"/> <tittle>Ejemplos con CSS3</tittle> <style> p { font-size: 200%; font-weight: bold;} </style> </head> <body>

PROGRAMACIร N DE INTERFACES WEB I <p> Pรกgina WEB con estilos CSS </p> <p style="text-transform: uppercase;"> Prueba de transformaciรณn </p> <p style="text-transform: lowercase;"> Prueba de transformaciรณn </p> <p style="text-transform: capitalize;"> Prueba de transformaciรณn </p> </body> </html>

PROGRAMACIÓN DE INTERFACES WEB I Decoración del texto Añade a las cadenas de texto cierto formato mediante el uso de la propiedad "text-decoration", la cual puede tomar uno de los siguientes valores:

<!DOCTYPE html> <head> <meta charset="utf-8"/> <title>Ejemplos con CSS3</title> <style> p { font-size: 200%; font-weight: bold;} </style> </head> <body>

PROGRAMACIÓN DE INTERFACES WEB I <p style="text-decoration: underline;"> Prueba de decoración del texto </p> <p style="text-decoration: overline;"> Prueba de decoración del texto </p> <p style="text-decoration: line-through;"> Prueba de decoración del texto </p> </body> </html>

PROGRAMACIÓN DE INTERFACES WEB I Crear un nuevo archivo con nombre misestilos.css En la primera línea agregar

p { font-size: 50px } body{background: orange} p{color: yellow; background: blue} Crear el archivo estilos3.html <!DOCTYPE html> La etiqueta <link> inserta <head> archivos con estilos CSS <meta charset="utf-8"/> en nuestros documentos. <title>Ejemplos con CSS3</title> <link rel="stylesheet" href="misestilos.css"> </head> <body> <p> Página WEB con estilos CSS </p> </body> </html>

PROGRAMACIÓN DE INTERFACES WEB I

Almacenar todos nuestros estilos en un archivo externo e insertar este archivo dentro de cada documento que lo necesite es muy conveniente, sin embargo no podremos hacerlo sin buenos mecanismos que nos ayuden a establecer una específica relación entre estos estilos y los elementos del documento que van a ser afectados.

PROGRAMACIÓN DE INTERFACES WEB I Referenciando con el atributo id El atributo id es como un nombre que identifica al elemento. Esto significa que el valor de este atributo no puede ser duplicado. Este nombre debe ser único en todo el documento. Para referenciar un elemento en particular usando el atributo id desde nuestro archivo CSS la regla debe ser declarada con el símbolo # al frente del valor que usamos para identificar el elemento:

Archivo misestilos2.css agregar la línea #texto1 { font-size: 80px }

PROGRAMACIร N DE INTERFACES WEB I Nuestro cรณdigo HTML lucirรก de esta manera EJM 8.html: estilos4.html

<!DOCTYPE html> <head> <meta charset="utf-8"/> <title>Ejemplos con CSS3</title> <link rel="stylesheet" href="misestilos2.css"> </head> <body> <p id="texto1">Ejemplos con ID de estilos con CSS3</p> <p> texto sin estilo </p> </body> </html> El resultado de este procedimiento es que cada vez que hacemos una referencia usando el identificador texto1 en nuestro archivo CSS, el elemento con ese valor de id serรก modificado, pero el resto de los elementos <p>, o cualquier otro elemento en el mismo documento, no serรกn afectados.

PROGRAMACIÓN DE INTERFACES WEB I Referenciando con el atributo class La mayoría del tiempo, en lugar de utilizar el atributo id para propósitos de estilos es mejor utilizar class. Este atributo es más flexible y puede ser asignado a cada elemento HTML en el documento que comparte un diseño similar:

Archivo misestilos2.css agregar la línea #texto1 { font-size: 80px }

.texto2 { font-size: 30px }

PROGRAMACIĂ&#x201C;N DE INTERFACES WEB I Estilos4.html <!DOCTYPE html> <head> <meta charset="utf-8"/> <title>Ejemplos con CSS3</title> <link rel="stylesheet" href="misestilos2.css"> </head> <body> <p id="texto1"> Ejemplos con ID de estilos con CSS3 </p>

<p> otro texto sin estilo </p> <p class="texto2">Texto con estilo usando class</p> </body> </html>

PROGRAMACIÓN DE INTERFACES WEB I

Centrando el cuerpo El primer elemento que es parte del modelo de caja es siempre <body>. Normalmente, por diferentes razones de diseño, el contenido de este elemento debe ser posicionado horizontalmente. Siempre deberemos especificar el tamaño de este contenido, o un tamaño máximo, para obtener un diseño consistente a través de diferentes configuraciones de pantalla.

PROGRAMACIÓN DE INTERFACES WEB I Archivo misestilos2.css agregar la línea #texto1 { font-size: 80px } .texto2 { font-size: 30px }

body { text-align: center;}

Estilos4.html (sin cambio)

PROGRAMACIÓN DE INTERFACES WEB I El elemento <h1>, por ejemplo, será usado varias veces en el documento, no solo para el título principal de la página web como pasaba anteriormente sino también para secciones internas, por lo que tenemos que otorgarle los estilos apropiados: Archivo misestilos2.css agregar la línea

#texto1 { font-size: 80px } .texto2 { font-size: 30px } body { text-align: center;}

h1 {font: bold 20px verdana, sans-serif;} h2 {font: bold 15px verdana, sans-serif;}

PROGRAMACIÓN DE INTERFACES WEB I Estilos4.html

<!DOCTYPE html> <head> <meta charset="utf-8"/> <title> Ejemplos con CSS3 </title> <link rel="stylesheet" href="misestilos2.css"> </head> <body> <header> <h1>Este es el título principal del sitio web</h1> <h2>Segundo título</h2> </header> <p id="texto1">Ejemplos con ID de estilos con CSS3</p> <p> texto sin aplicar estilos </p> <p class="texto2">texto con estilo usuando class</p> </body> </html>

PROGRAMACIÓN DE INTERFACES WEB I La propiedad font, asignada a los elementos <h1> y <h2> en el código anterior, nos permite declarar todos los estilos para el texto en una sola línea. Las propiedades que pueden ser declaradas usando font son: font-style, font-variant, font-weight, font-size/lineheight, y font-family en este orden. Con estas reglas estamos cambiando el grosor, tamaño y tipo de letra del texto dentro de los elementos <h1> y <h2> a los valores que deseamos.

PROGRAMACIĂ&#x201C;N DE INTERFACES WEB I Archivo misestilos2.css agregar la lĂnea

#texto1 { font-size: 80px } .texto2 { font-size: 30px } body { text-align: center;} h1 {font: bold 20px verdana, sans-serif;} h2 {font: bold 15px verdana, sans-serif;}

* {margin: 0px;padding: 0px;}

PROGRAMACIÓN DE INTERFACES WEB I Colores Lista de colores disponibles por nombre: aqua, gray, navy, silver, black, green, olive, teal, blue, lime, purple, white, fuchsia, maroon, red, yellow. Están tomados de los dieciséis colores básicos que se generan como VGA. Colores definidos mediante valores RGB. Pueden definirse como valores porcentuales entre 0 y 100 % (color: rgb(100%,80%,60%)) , o mediante valores numéricos entre 0 y 255 (color: rgb(255,0,0)).

PROGRAMACIร N DE INTERFACES WEB I Colores definidos mediante valores hexadecimales con la estructura #RRGGBB (color: #FF0000). La notaciรณn hexadecimal puede abreviarse cuando sus valores se repiten para cada par, como en la expresiรณn color: #000. Colores web-safe. Son aquellos cuya visualizaciรณn se mantendrรก entre navegadores. Existen 216 de estos colores, los cuales se obtienen mediante incrementos del 20%, 51 unidades o 33 en hexadecimal (rgb(40%,100%,80%), rgb(0,204,153) o #669933).

PROGRAMACIÓN DE INTERFACES WEB I Unidades.- Medidas absolutas de longitud: -Pulgadas (in). -Centímetros (cm). -Milímetros (mm). -Puntos (pt). Medida tipográfica utilizada en la definición de las fuentes. En una pulgada hay 72 puntos (font-size: 18pt equivale a font-size: 0.25in). -Picas (pc). Mediada también tipográfica que hace corresponder una pica a 12 puntos.

Medidas relativas de longitud: em: se corresponde al tamaño de la fuente para el párrafo en concreto al que se aplique. Si definimos que el texto tendrá un tamaño de 14 puntos, el valor de 1em será equivalente a 14 puntos. ex: similar a em, pero hace corresponder el tamaño actual de la fuente, al que tendría una X minúscula.

PROGRAMACIÓN DE INTERFACES WEB I

Indentación Indentación de la primera línea de un párrafo. Es una propiedad que se aplica a elementos de tipo bloque, y acepta tanto un valor de longitud, como un porcentaje: P {text-indent: 0.25in;} Podemos conseguir una sangría francesa, utilizando valores negativos para la indentación: P {text-indent: -30px;}

PROGRAMACIĂ&#x201C;N DE INTERFACES WEB I Crear el archivo estilo.css .indentacion { text-indent: 0.25in; } .indentacion_francesa { margin-left: 0.25in; text-indent: -0.25in; } .indentacion:first-letter, p.indentacion_francesa:first-letter {font-size: 24pt;background-color: blue; color: white; padding: 5px; border: 1px solid navy;}

Crear el archivo Identacion.html <!DOCTYPE html> <head> <title>Propiedades del texto</title> <link rel="stylesheet" href="estilo.css"> </head> <body>

PROGRAMACIร N DE INTERFACES WEB I <p class="indentacion"> Texto de ejemplo sobre los valores de la indentaciรณn. Texto de ejemplo sobre los valores de la indentaciรณn.

</p> <p class="indentacion_francesa"> Texto de ejemplo sobre los valores de la indentaciรณn. Texto de ejemplo sobre los valores de la indentaciรณn.

</p> </body> </html>

PROGRAMACIÓN DE INTERFACES WEB I

Alineación Nos permite alinear los textos dentro de elementos de bloque de las siguientes formas: -Izquierda (left). -Centrado (center). -Derecha (right). -Justificado (justify), es decir, centrado a derecha e izquierda.

Crear el archivo estiloAlineacion.css

h1 { text-align: left; } h2 { text-align: right; } h3 { text-align: center; }

PROGRAMACIÓN DE INTERFACES WEB I

Crear el archivo alineacion.html <!DOCTYPE html> <head> <title>Propiedades del texto</title> <link rel="stylesheet" href="estiloAlineacion.css">

</head> <body> <h1>Alineación izquierda</h1> <h2>Alineación derecha</h2> <h3>Alineación centrada</h3> </body> </html>

PROGRAMACIÓN DE INTERFACES WEB I Anchura de líneas Define la distancia entre las líneas base de dos líneas de texto. En resumen, esta propiedad permite aumentar o disminuir la distancia vertical entre dos líneas de texto. Esta distancia pude expresarse con medidas relativa (em, ex), valores absolutos (cm, in, px) o porcentajes directamente.

Crear el archivo estiloAnchura.css p { width: 300px; } p.normal { line-height: 14pt; } p.grande { line-height: 150%; } p.xgrande { line-height: 200%; }

PROGRAMACIÓN DE INTERFACES WEB I

Crear el archivo anchura.html <!DOCTYPE html> <head> <title>Propiedades del texto</title> <link rel="stylesheet" href="estiloAnchura.css"> </head> <body> <p class="normal"> Texto con distintas medidas entre líneas para ver su comportamiento en párrafos de texto. </p> <p class="grande"> Texto con distintas medidas entre líneas para ver su comportamiento en párrafos de texto. </p> <p class="xgrande"> Texto con distintas medidas entre líneas para ver su comportamiento en párrafos de texto. </p> </body> </html>

PROGRAMACIÓN DE INTERFACES WEB I El atributo word-wrap tiene dos posibles valores: normal o break-word. Hace que las palabras no se corten, lo que sería el comportamiento normal que conocíamos hasta ahora, ocurriendo que las palabras largas nos puedan descuadrar nuestro diseño. Ahora podemos ver una caja que tenía una anchura de 300 px y que por culpa de una palabra muy larga se deforma la caja o el texto aparece por fuera.

PROGRAMACIĂ&#x201C;N DE INTERFACES WEB I CREAR EL ARCHIVO NUEVO cortaparrafo.css

#ejemplo{ width:100px; height:200px; background-color:red; } .ww{ word-wrap: break-word; } h2 {font: bold 15px verdana, sans-serif;}

p{color: green;}

PROGRAMACIร N DE INTERFACES WEB I CREAR EL ARCHIVO NUEVO cortaparrafo.html <!DOCTYPE html> <head> <title>Propiedades corta Pรกrrafo</title> <link rel="stylesheet" href="cortaparrafo.css"> </head> <body> <h2>Sin word-wrap</h2> <div id="ejemplo">

<P>Enalemanlaspalabrasseconformanavecesuniendoseaotraspalabrasporl oquesevuelvenenormes</P> </div> <h2>Con word-wrap</h2> <div class="ww" id="ejemplo"> <p>Enalemanlaspalabrasseconformanavecesuniendoseaotraspalabrasporl oquesevuelvenenormes</P> </div> </body> </html>

PROGRAMACIÓN DE INTERFACES WEB I El elemento <video> Una de las características más mencionadas de HTML5 fue la capacidad de procesar video.

CREAR EL ARCHIVO NUEVO video.html <!DOCTYPE html> <head> <title>Reproductor de Video</title> </head> <body> <section id="reproductor"> <video id="medio" width="720" height="400" controls> <source src="atreverse.mp4" controls></video> </section> </body> </html>

“ Add your company slogan ”

PROGRAMACIÓN DE INTERFACES

WEB

I Profesor: Dr. José Benito Franco Urrea

LOGO OCTUBRE 2013

PROGRAMACIĂ&#x201C;N DE INTERFACES WEB I Nuevas propiedades de CSS3 Las nuevas propiedades CSS3 son extremadamente poderosas y deben ser estudiadas una por una, pero para facilitar su aprendizaje vamos a aplicar todas ellas sobre la misma plantilla. Por este motivo comenzaremos por crear un documento HTML sencillo con algunos estilos bĂĄsicos:

Archivo nuevocss3.css

body {text-align: center;} #principal { display: block; width: 500px; margin: 50px auto; padding: 15px; text-align: center; border: 1px solid #999999; background: #DDDDDD;}

#titulo {font: bold 36px verdana, sans-serif;}

PROGRAMACIĂ&#x201C;N DE INTERFACES WEB I

Archivo nuevosestilos.html <!DOCTYPE html> <head> <title>Nuevos Estilos CSS3</title> <link rel="stylesheet" href="nuevocss3.css"> </head> <body> <header id="principal"> <span id="titulo">Estilos CSS Web 2.0</span> </header> </body> </html>

PROGRAMACIร N DE INTERFACES WEB I Border-radius La propiedad border-radius logra el efecto de esquinas redondeadas en las cajas de sus pรกginas web.

Modificar el Archivo nuevocss3.css

body {text-align: center;} #principal { display: block; width: 500px; margin: 50px auto; padding: 15px; text-align: center; border: 1px solid #999999; background: #DDDDDD;

border-radius: 20px;}

#titulo {font: bold 36px verdana, sans-serif;}

PROGRAMACIÓN DE INTERFACES WEB I Box-shadow Gracias a CSS3 y a la nueva propiedad box-shadow podremos aplicar sombras a nuestras cajas con solo una simple línea de código:

box-shadow: rgb(150,150,150) 5px 5px;} #titulo {font: bold 36px verdana, sans-serif;}

PROGRAMACIÓN DE INTERFACES WEB I Box-shadow box-shadow: rgb(150,150,150) 5px 5px 10px El valor de 10px se puede agregar es la distancia de difuminación

box-shadow: rgb(150,150,150) 5px 5px 10px inset palabra clave: inset. Esta palabra clave convierte a la sombra externa en una sombra interna, lo cual provee un efecto de profundidad al elemento afectado.

PROGRAMACIĂ&#x201C;N DE INTERFACES WEB I Modificar el Archivo nuevocss3.css body {text-align: center;} #principal { display: block; width: 500px; margin: 50px auto; padding: 15px; text-align: center; border: 1px solid #999999; background: #DDDDDD; border-radius: 20px;

box-shadow: rgb(150,150,150) 5px 5px 10px inset;} #titulo {font: bold 36px verdana, sans-serif;}

PROGRAMACIĂ&#x201C;N DE INTERFACES WEB I Text-shadow Para crear sombras para figuras irregulares como textos, existe una propiedad especial llamada text-shadow:

box-shadow: rgb(150,150,150) 5px 5px 10px inset;} #titulo {font: bold 36px verdana, sans-serif;

text-shadow: rgb(0,0,150) 3px 3px 5px;}

PROGRAMACIÓN DE INTERFACES WEB I @font-face

http://www.dafont.com

La propiedad @font-face permite a los diseñadores proveer un archivo conteniendo una fuente específica para mostrar sus textos en la página. Ahora podemos incluir cualquier fuente que necesitemos con solo proveer el archivo adecuado:

Modificar el Archivo nuevocss3.css body {text-align: center;} #principal { display: block; width: 500px; margin: 50px auto; padding: 15px; text-align: center; border: 1px solid #999999; background: #DDDDDD; border-radius: 20px; box-shadow: rgb(150,150,150) 5px 5px 10px inset;} #titulo {font: bold 36px MiNuevaFuente,verdana, sans-serif; text-shadow: rgb(0,0,150) 3px 3px 5px;}

@font-face { font-family: 'MiNuevaFuente'; src: url('COMICATE.TTF');}

PROGRAMACIÓN DE INTERFACES WEB I -moz- para Firefox. -webkit- para Safari y Chrome. -o- para Opera. -khtml- para Konqueror. -ms- para Internet Explorer. -chrome- específico para Google Chrome.

TAREAS. TAREA 1.- ETIQUETAS HTML. Que hace la etiqueta <h1> Headings Nos definen el tamaño de un título o cabecera. <h1> nos dá el tipo de letra más grande. <h6> nos dá el tipo de letra más pequeño. HTML agrega automaticamente un espacio antes y después de cada título. <h1> al ser usado como título de una página Web, es de suma importancia ya que es uno de los parámetros que Google y demás buscadores tiene en cuenta, a la hora de indexar un sitio web.

Ejemplo Código

Resultado

<html> <head> <title>Headings</title> </head>

Heading 1 Heading 2

<body> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> </body> </html>

Heading 3 Heading 4 Heading 5 Heading 6

<header> El header acompaña la carga de todas las páginas de su sitio y le da una identidad común a todas ellas. En todo diseño web hay una serie de elementos facilmente distinguibles. menú, cuerpo, header, footer.. El header (en español, encabezado) es la parte superior del página. Generalmente está formado por una serie de elementos comunes: logo de la

empresa, nombre, una imagen o imágenes representativas y, en algunos casos, datos de contacto como teléfomo e email. No hay una altura específica para el header, varia de un diseño web a otro. Pero conviene tener presente que un header excesivamente alto, obligará a a los usuarios a desplazar la barra lateral hacia abajo para lograr ver las variaciones de contenido correspondientes a cada página, lo que puede perjudicar la experiencia de navegación. Como su nombre lo sugiere, la etiqueta header tiene por objeto marcar una sección de la página HTML como el encabezado. Listado 3 muestra el ejemplo de código del Listado 2 modificado para que use un header . Listado 3. Añadiendo una etiqueta header . <!DOCTYPE html> <html> <head> <title> Una página HTML simple </title> </head> <body> <header>Header</header> <div id='content'>Content</div> <div id='footer'>Footer</div> </body> </html>

El doctype en el Listado 3 también se cambió para indicar que el navegador debería utilizar HTML5 para presentar la página. Desde este punto en adelante, todos los ejemplos suponen que usted está utilizando el doctype correcto. <nav> La etiqueta nav . El contenido dentro de la etiqueta nav tiene por objeto propósitos de navegación. Añadiendo una etiqueta nav al código de ejemplo da como resultado el código en el Listado 8. Listado 8. Añadiendo una etiqueta nav . <!DOCTYPE html> <html> <head> <title> Una página HTML simple </title> </head>

<body> <header>Header <nav> <a href='#'>Algún enlace de navegación</a> <a href='#'>Algún enlace de navegación adicional</a> <a href='#'>Un tercer enlace de navegación</a> </nav> </header> <section> <article> <p> Esta es una sección importante del contenido de la página. Tal vez una publicación en blog. </p> </aside> </p> Este es un aparte de la primera publicación en blog. </p> </aside> </article> <article> <p> Esta es una sección importante del contenido de la página. Tal vez una publicación en blog. </p> </article> </section> <footer>Footer</footer> </body> </html>

<section> El área section . La etiqueta section tiene por objeto identificar porciones significativas del contenido de la página. Esta etiqueta es de alguna forma análoga a dividir un libro en capítulos. Añadiendo una etiqueta section al código de ejemplo da como resultado el código en el Listado 4.

Listado 4. Añadiendo una etiqueta section . <!DOCTYPE html> <html> <head> <title> Una página HTML simple </title> </head> <body> <header>Header</header> <section> <p> Esta es una sección importante de la página. </p> </section> <div id='footer'>Footer</div> </body> </html>

<aside> La etiqueta aside . La etiqueta aside indica que el contenido dentro de ella está relacionado el contenido principal de la página pero que no es parte de ella. En cierta forma es análogo a usar paréntesis para hacer un comentario en un cuerpo de texto (como este). El contenido entre paréntesis proporciona información adicional sobre el elemento que lo contiene. Añadiendo una etiquetaaside al código de ejemplo da como resultado el código en el Listado 6. Listado 6. Añadiendo una etiqueta aside . <!DOCTYPE html> <html> <head> <title> Una página HTML simple </title> </head> <body> <header>Header</header> <section> <article> <p>

Esta es una sección importante del contenido de la página. Tal vez una publicación en blog. </p> </aside> </p> Este es un aparte de la primera publicación en blog. </p> </aside> </article> <article> <p> Esta es una sección importante del contenido de la página. Tal vez una publicación en blog. </p> </article> </section> <div id='footer'>Footer</div> </body> </html>

<footer> La etiqueta footer . La etiqueta footer marca el contenido dentro del elemento que es el pie de página del documento. Añadiendo una etiquetafooter al código de ejemplo da como resultado el código en el Listado 7. Listado 7. Añadiendo una etiqueta footer . <!DOCTYPE html> <html> <head> <title> Una página HTML simple </title> </head> <body> <header>Header</header> <section> <article> <p> Esta es una sección importante del contenido de la página. Tal vez una publicación en blog. </p> </aside>

</p> Este es un aparte de la primera publicación en blog. </p> </aside> </article> <article> <p> Esta es una sección importante del contenido de la página. Tal vez una publicación en blog. </p> </article> </section> <footer>Footer</footer> </body> </html>

en este punto, todas las etiquetas div originales han sido reemplazadas con etiquetas HTML5 estructurales. <ul> Listas no ordenadas: <ul> Las listas no ordenadas van dentro de la etiqueta <ul> y de su cierre </ul>. Cada punto que queramos añadir a la lista, lo haremos dentro de la etiqueta <li> y su cierre. Si no le indicamos nada a la etiqueta <li>, ésta se generará de forma automática. Pero si queremos definir nosotros mismo el símbolo del punto, podemos gracias al atributo “type”. Así podemos hacer que la lista esté definida por puntos negros (li type="disc"), por puntos con el fondo blanco (li type="circle") o por cuadrados (li type="square"). Aunque esta apariencia dependerá del navegador. Hay algunos navegadores que dan otras apariencias a estos mismos atributos. Vamos con un pequeño ejemplo en código: <ul> <li type="circle">Esto es un <li type="square">Este <li type="disc">Y este es </ul>

tipo de punto.</li> es otro.</li> otro diferente.</li>

Cuyo resultado visual será el que veremos a continuación: o  

Esto es un tipo de punto. Este es otro. Y este es otro diferente.

<li> Las listas <li> ... Elemento de lista <li> Cada uno de los elementos de una lista ha de insertarse entre las etiquetas <li> y </li>. Por ejemplo, para insertar en una lista los siguientes elementos:   

Perro Gato Periquito

Habría que escribir: ... <li>Perro</li> <li>Gato</li> <li>Periquito</li> ... Todos los elementos de la lista deberán encontrarse entre las etiquetas que indiquen si la lista es desordenada (con viñetas) u ordenada (numerada) como veremos a continuación.

TAREA 2. REQUISITOS PARA REGISTRAR UN DOMINIO. Antes de registrar un dominio .com, es necesario cumplir una serie de normas técnicas y administrativas: • La longitud mínima del nombre de dominio es de 2 caracteres y la máxima de 64. • Pueden consistir en todas las letras del alfabeto inglés y castellano, es decir: de la a a la z incluyendo la letra ñ, los acentos, números y guiones y, en general, todos los caracteres de la lengua castellana. Cualquier otro tipo de carácter, incluyendo espacios, subrayados y comas, no es válido. Por otro lado, no existen limitaciones al registro de nombres de dominio .com, por lo que su número es ilimitado, siempre que la empresa cumpla con los requisitos documentales exigidos. No obstante, se recomienda que las empresas registren sus marcas de productos, servicios,… como nombre de dominio, a fin de que la empresa goce de suficiente protección frente a terceros, tanto en el mundo físico como en el virtual. Las siguientes terminaciones tienen pre-requisitos registro:.org.mx, .gob.mx y .net.mx. A continuación se detallan los pre-requisitos.

obligatorios

para

Dominios .org.mx Únicamente podrán registrar dominios .org.mx las siguientes: 1) Organizaciones legalmente constituidas en México sin fines de lucro. 2) Sociedades y Asociaciones Civiles constituidas legalmente en México. 3) Personas físicas establecidas en México, que acrediten el uso del nombre de dominio sin fines de lucro. 4) Organismos internacionales sin fines de lucro establecidos en México. 5) Organismos No Gubernamentales constituidos en México. 6) Embajadas y consulados de países extranjeros establecidos en el territorio de México. 7) Partidos políticos y asociaciones de carácter político. 8) Asociaciones religiosas.

9) Instituciones dedicadas a la educación de personas con capacidades diferentes. 10) Instituciones de beneficencia privada. 11) Fideicomisos de carácter privado. NOTA: La organización relacionada con un nombre de dominio con terminación .gob.mx no podrá ser modificada salvo que se publique de forma oficinal en el Diario Oficial de la Federación o Gaceta del Estado que corresponda. Documentación requerida. 1) En caso de ser persona moral se deberá enviar documento que compruebe la calidad de Organización no lucrativa. En caso de ser persona física se deberá enviar una carta incluyendo el nombre del dominio y señalando que las actividades que realizan son primordialmente actividades sin fines de lucro. 2) Copia de identificación oficial de persona que firme la carta. 3) Adicionalmente NIC México puede solicitar al solicitante cualquier documentación que considere necesaria para el cumplimiento pleno de las Políticas de registro de dominios. Dominios .gob.mx Los dominios .gob.mx pueden ser registrados únicamente por las siguientes entidades: a) Gobierno Federal, Estatal y Municipal, Secretarias y Dependencias, Programas Gubernamentales, Organismos centralizados, descentralizados, desconcentrados, autónomos y Organismos paraestatales de la Administración Pública del Gobierno Mexicano. b) Empresas Estatales y paraestatales del Gobierno Mexicano. c) Embajadas de México. Fideicomisos de carácter público. Cualquier otra organización no incluida en esta lista no puede registrar un dominio gob.mx

Documentación requerida. El solicitante deberá enviar directamente por FAX a NIC México (www.nic.mx) lo siguiente: 1) Carta con membrete de la entidad del Gobierno Mexicano que solicite el registro, firmada por un representante legal. 2) Copia de una identificación oficial del representante legal que firme la carta. 3) Posteriormente en un plazo menor a 10 días, NIC México deberá recibir los documentos originales vía correo postal. NOTA: La organización relacionada con un nombre de dominio con terminación .gob.mx no podrá ser modificada salvo que se publique de forma oficinal en el Diario Oficial de la Federación o Gaceta del Estado que corresponda. Dominios .net.mx Después de pagar el dominio deberá solicitar a la empresa que lo registra que demuestre ante NIC México estar inscrita en la COFETEL, enviando su registro por FAX. De no cumplir con estos requisitos no podremos registrar su dominio y deberá seleccionar otro. PROVEEDORES DE HOSTING O DE HOSPEDAJES DE PÁGINAS. La selección del proveedor de hospedaje para la página web de su empresa es mucho más importante de lo que usted se imagina, ya que gran parte del buen funcionamiento y eficiencia operativa del sitio dependerá de esta decisión. Una selección inapropiada del hospedaje puede inclusive llegar a afectar negativamente los resultados de la campaña de promoción de su negocio. La mayoría de las PYMES emplean los servicios de los proveedores de servicio de Internet (ISP, Internet Service Provider) para tener acceso a la consulta de páginas web y al correo electrónico. Muchos de estos ISPs proveen también servicios de hospedaje de sitios como un servicio adicional. Sin embargo, usted seguramente preferirá contratar los servicios de un proveedor que estrictamente está dentro de la industria de servicios de hospedaje (WHP, Web Hosting Provider). Tal selección le asegurará que todos sus requerimientos de hospedaje estarán cubiertos. Contrate un ISP para el acceso a Internet y un WHP para hospedar su sitio web. Por lo general, la selección del proveedor de hospedaje de sitios web se basa en los siguientes criterios: 1. Plataforma de operación requerida (Unix, Linux, Windows).

2. Tipo de servidor web (Apache, IIS, iPlanet). 3. Scripts soportados (CGI, PHP, ASP, PERL, SSI, Frontpage extensions). 4. Bases de datos soportadas (SQL, MySQL, Oracle, ODBC). 5. Plataformas de operación soportadas (Mambo, Zen Cart, PHP-Nuke, etc.). 6. Espacio en disco requerido para la instalación y operación del sitio web. 7. Número de buzones de correo personales que serán asignados. 8. Servicios ofrecidos junto con el hospedaje (soporte, diseño, asesoría, atención personalizada, etc.). 9. Disponibilidad y confiabilidad de los servicios de hospedaje. 10. Costo del servicio. PROVEEDORES QUE COTIZAN PAGINAS WEB. Las páginas web se han convertido en una herramienta imprescindible para los negocios. No importando si se trata de una microempresa o una compañía transnacional, es difícil imaginar que una empresa pueda operar hoy en día sin el apoyo de una página web, a través de la cual puede uno promover sus productos y servicios y mantener contacto con todos sus clientes y prospectos. Como en cualesquier otro sector, en la industria de diseño página web también existen distintos precios y calidades, por lo que su primera misión como responsable del proyecto será determinar qué tipo de sitio web es el que deberá adquirir y cuál será el presupuesto de inversión que su compañía tendrá que destinar para el proyecto. Usted deberá ser muy cauteloso porque existen muchas ofertas de diseño web en el mercado, desde diseñadores Freelance, que ofrecen sus servicios en forma independiente, hasta firmas que brindan servicios de diseño web profesional especializado. Para poder seleccionar en forma correcta la oferta de diseño web más conveniente para su empresa. El proceso consiste esencialmente de tres etapas:

Fase 1

Fase 2

Fase 3

Definición de

Definición del

Cotizaciones y selección

requerimientos

tipo de sitio

del proveedor

Una vez definidos sus requerimientos y el tipo de sitio web que su empresa necesita, está usted listo para cotizar su proyecto y seleccionar la agencia de diseño web que se encargue del desarrollo del mismo. Si su presupuesto es limitado y sus requerimientos no son muy altos, es bastante probable que usted haya optado por contratar el desarrollo de una página web convencional y un proveedor local que ofrezca un atractivo paquete de diseño web sea tal vez su mejor alternativa. Por el contrario, si usted determinó que su empresa requiere del diseño de un sitio web profesional, entonces deberá contratar los servicios de un especialista SEO y en este caso quizá resulte necesario buscar dentro del país, inclusive fuera de éste, la agencia de diseño web que tenga la suficiente capacidad y experiencia para encargarse del desarrollo del proyecto. POSICIONAMIENTO WEB. "Posicionamiento web" es un término que, a grandes rasgos, hace referencia a todas las técnicas que se emplean para mejorar la visibilidad de un sitio web: Técnica de referencia, que consiste en presentar el sitio web en herramientas de búsqueda completando los formularios de dichas herramientas. Técnica de posicionamiento, que implica posicionar al sitio web o a páginas específicas del sitio entre los primeros resultados de la búsqueda de ciertas palabras clave. Técnica de clasificación, cuyo objetivo es similar al del posicionamiento pero se utilizan frases más elaboradas; parte de la función de esta técnica es identificar estas solicitudes. Lo difícil de este proceso no reside en promocionar el sitio web en los motores de búsqueda, sino en estructurar el contenido para que se posicione entre los primeros lugares en el resultado de la búsqueda de las palabras clave elegidas. De hecho, la mayoría de los usuarios de Internet utilizan los motores de búsqueda para encontrar información y lo hacen con la ayuda de palabras clave. Por eso, las compañías y organizaciones deben concentrarse primero en el contenido que ofrecen sus sitios web para que las necesidades de los usuarios de Internet sean cubiertas de la mejor manera, y luego definir las palabras clave que posiblemente estos usuarios introducirán.

REFERENCIAS. http://es.kioskea.net/contents/776-posicionamiento-web http://www.windepot.com.mx/attachments/File/Requisitos%20Registro%20de%20d ominio.pdf http://www.clarkemodet.com.mx/faqs/nombres_de_dominio/que_requisitos_hay_q ue_cumplir_para_poder_registrar_un_dominio_com_.aspx http://www.informaticamilenium.com.mx/paginas/mn/articulo118.htm VĂctor Ibarra.

RESUMEN 1. EL CICLO DE VIDA DE LA INFORMACIÓN EN LA WEB. El Ciclo de Vida no solo representa los procesos que se llevan a cabo en un sistema de información, sino también, los procesos que van desde la generación de información hasta que esta se convierte en conocimiento capaz de generar una nueva información, ya sea a nivel individual de las personas como a un nivel social. Según Ledón Tedros, 2002 «el ciclo de vida de la información es, coherentemente, tanto el conjunto de procesos por los que atraviesa la información durante su circulación, como la serie de transformaciones y entidades a las que todos y cada uno conducen». La Arquitectura de Información y el diseño de sitios web. Existen varias definiciones de arquitectura de información (AI) y una de las más completas es la dada por Rosenfeld y Morville, 1999 como la actividad que «clarifica la misión y visión del sitio…, determina el contenido y funcionalidad que el sitio va a tener, especifica como los usuarios van a encontrar la información al definir su organización, navegación, etiquetado y sistemas de búsqueda, mapea como el sitio se va a acomodar al cambio y crecimiento en el tiempo». De forma general, un sitio es un conjunto de páginas Web hipervínculadas que generalmente comparten un mismo tema y conforman una unidad debido a que tienen una misión en común y objetivos similares que se complementan. La propiedad y administración de cada sitio Web corresponde a un individuo o a una organización. Usualmente, las páginas de un determinado sitio suelen almacenarse en un solo servidor. Cada sitio contiene por lo menos una página inicial (o principal), que constituye el primer documento que ve el usuario al acceder al sitio y su entrada oficial para comenzar la exploración y navegación por sus contenidos. También puede contener archivos en otros formatos como pdf, audio, video, etc. El diseño de un sitio Web tiene cuatro etapas fundamentales: - Arquitectura de Información. - Diseño de interfase gráfica. - Implementación (programación, puesta en marcha). - Posicionamiento.

Un Sitio Web como sistema de información. Un sitio Web puede considerarse un sistema en tanto está compuesto por elementos que se relacionan entre si para cumplir determinados objetivos. Entre ellos se encuentran las siguientes entidades y procesos: Entidades - Información y los elementos a través de los cuales se representa y organiza (esquemas, estructuras, sistema de navegación, archivos, y las propias páginas que integran el sitio). - Equipo de realización (arquitecto de información, diseñador, programador, etc.) - Usuarios Procesos: todos las tareas que se realizan durante su concepción, diseño, implementación, posicionamiento y uso. En tal sentido, un sitio Web es un sistema cuyo objeto principal es la información que se transforma a medida que pasa por cada uno de los subprocesos que en él tienen lugar. - Selección - Organización de la información - Diseño de interfase - Implementación - Posicionamiento - Búsqueda y recuperación - Diseminación Estos procesos pertenecen a un sistema de información, por lo cual guardan una supuesta relación con los procesos identificados en el ciclo de vida de la información. La Arquitectura de Información y el Ciclo de Vida de la Información. Selección La selección de la información es el proceso que permite la entrada de la mayor cantidad de recursos al sistema conformado por un sitio Web. Este proceso además comprende la identificación de los contenidos posibles a incluir en el sitio para, en correspondencia con las necesidades de la audiencia, las potencialidades tecnológicas que se posean y el tipo de fuente de información, determinar qué contenidos formarán parte del sistema.

Si se ubica este proceso en el ciclo de vida de la información, se puede apreciar que guarda una estrecha relación con el proceso que allí se identifica con el mismo nombre, aunque tiene algunas peculiaridades relacionadas con: Los usuarios Las colecciones Cuando un sitio Web es diseñado a partir de los objetivos y la misión de una organización determinada, puede estar enfocado a los trabajadores o usuarios de dicha organización, o puede estar encaminado a promocionar los servicios y productos que brinda. Por otra parte, las colecciones en estos sistemas pueden contener tanto información propia como la que se encuentra disponible en otros sistemas que conforman la Web. Organización de la información (OI). La Organización de la Información en el ciclo de vida está compuesta por los procesos de selección, procesamiento y almacenamiento. En la Arquitectura de Información la Organización solo comprende el procesamiento de la información, ya que la Selección constituye un proceso independiente que le antecede a esta y el almacenamiento constituye el resultado del proceso de implementación. Los subprocesos que conforman la OI, están identificados por la determinación de los siguientes elementos*: - Esquemas de OI - Estructuras de OI - Sistema de navegación - Sistema de etiquetado - Sistema de búsqueda Un EOI es por tanto un sistema de clasificación que puede ser exacto, ambiguo o híbrido como los sistemas de clasificación usados en el resto de los sistemas de información, aunque en estos últimos las clases se predeterminan y durante la clasificación lo que se hace es ubicar el contenido del documento en una clase ya establecida, mientras que en la AI las clases que conforman los esquemas se determinan de acuerdo a la naturaleza de los contenidos que van a ser clasificados, por lo que las clases varían de un sitio a otro precisamente en concordancia con la temática que trate, y lo que se preestablece es el orden (alfabético, geográfico, temático, etc.) en que deben presentarse las clases.

Esquemas exactos. Los esquemas exactos organizan la información por vías que permiten una directa, sencilla y excluyente organización de esta. De tal forma dividen el conjunto de contenidos en clases o categorías mutuamente excluyentes.

Esquemas alfabéticos. Este tipo de esquema la mayoría de las veces se emplea como complemento de esquemas ambiguos de forma similar a las clasificaciones alfabéticas por materia. Esquemas cronológicos. Son aquellos que se aplican a las fuentes de información de acuerdo a la fecha en que fueron emitidos o, en algunos casos, a los períodos de tiempo que aborde el contenido de la fuente. Esquemas geográficos. En estos esquemas se organizan los contenidos a través del área o lugar geográfico al que corresponden. Mediante estos sistemas se puede acceder a las fuentes o recursos de información, no solo por temas, sino también, asociados con el mapa del lugar geográfico donde se corresponden y viceversa. Esquemas ambiguos. Dividen la información en categorías que se resisten a la definición exacta. Están influenciados por la ambigüedad del lenguaje y la subjetividad humana. Existen otros tipos de esquemas ambiguos propios del entorno digital ya que tienen en cuenta por sobre todas las cosas los mecanismos de interacción hombre máquina. Estos son: - Orientados a tareas - Dirigidos a una audiencia especifica - Metafóricos En el esquema orientado a tareas se organizan los contenidos y aplicaciones de un Sitio en una colección de procesos, funciones o tareas. Los esquemas dirigidos a una audiencia específica son convenientes en aquellos sitios en los que se puede definir claramente los contenidos y la navegación de diferentes audiencias.

Los esquemas metafóricos se pueden apreciar en los sitios que utilizan, tanto en la gráfica como en las etiquetas, metáforas que hacen relacionar a la audiencia lo que ya conocen de la vida cotidiana, con lo novedoso que le oferta el sitio. Esquemas híbridos. Los esquemas híbridos combinan los esquemas expuestos anteriormente. Su surgimiento viene dado por la necesidad de comunicar en una sola página Web las posibilidades generales de navegación que es puesta a consideración de la audiencia a partir de esa página en lo adelante. Estructuras de Organización de la Información. Las estructuras de OI definen las relaciones entre los grupos de contenido y los elementos que lo integran. Dado que el proceso de navegación viene dado por la hipertextualidad, las estructuras son propias de los ambientes digitales. Estas pueden ser de tres tipos: - Jerárquicas - Hipertextuales - Modelo de base de dato relacional En las estructuras jerárquicas existe una evidente relación con los sistemas de clasificación jerárquica. El hipertexto es la base de la Web, es una forma no- lineal de estructurar la información. El modelo relacional de base de datos estructura la información en tablas con campos (columnas) y registros (filas) que permite la búsqueda global y la validación de datos. Sistema de navegación. Se emplean para trazar el curso del usuario en su proceso de consulta, determinar su posición, y hallar el camino de regreso. Aportan sentido de contexto y comodidad. Estos pueden ser: Jerárquicos: constituyen la consecución de las estructuras jerárquicas. Globales: buscan la posibilidad de navegación tanto a lo profundo como a lo largo del sitio.

Locales: son propios de un subsitio o una sección que amerite una navegación autónoma. Específicos: Es más una característica editorial que de arquitectura. Estos sistemas de navegación se representan a través varios elementos que pueden ser: Integrados: En los sistemas de navegación global y local, los elementos más comunes e importantes son los que están integrados en las páginas relacionadas con el contenido del sitio. Barras de navegación y Menús desplegables. Remotos: Son externos a la jerarquía básica de un sitio y proporcionan una visión global de su contenido. Sistema de etiquetado. Los sistemas de etiquetas garantizan la representación general del contenido disponible en el sitio. La función fundamental de estas es comunicar la información eficientemente optimizando el espacio donde se muestra en la página Web, con un mensaje directo y claro, de forma que el usuario pueda identificar aquella etiqueta que representa los contenidos que está buscando. Las etiquetas pueden ser textuales o gráficas. Existen varios tipos de etiquetas y su clasificación está dada por los objetivos que cumple: - Etiquetas del Sistema de Navegación: Son tomadas como referencia para la navegación pues son las que interactúan en un primer momento con los usuarios. - Etiquetas del Sistema de Enlace: Aparecen el cuerpo de los párrafos y se enlazan con otros textos en función del contexto y su significado. - Etiquetas del Sistema de Cabeceras o Títulos: Se utilizan para encabezar los bloques de información. Hacen el papel de títulos o subtítulos. - Etiquetas del Sistemas de Indización: Son invisibles para el usuario. Desempeñan un papel de suma importancia en la representación del contenido de las páginas para la representación de estas en los motores de búsqueda. Sistemas de búsqueda. En este proceso la AI solo se encarga de diseñar como va a estar estructurado el sistema de búsqueda interna de un sitio Web. Los buscadores internos constituyen una opción alternativa para acceder a los contenidos del sitio.

En este proceso también se ponen de manifiesto los procesos de descripción física y de contenido representados en el ciclo de vida.

Víctor H. Ibarra Ortiz.

RESUMEN 2. COTIZACIONES DE PÁGINAS WEB. La diferencia en costos de páginas web se debe principalmente a que cada proveedor integra diferentes servicios en su oferta, además de que la calidad, funcionalidad y desempeño de la página web varían entre una propuesta y otra. Cuando uno desea adquirir una nueva página web para nuestro negocio o empresa, lo común es cotizar el diseño de esa página con dos o tres proveedores distintos para analizar costos y seleccionar aquella opción que resulte la más conveniente, comparando las características y precio de cada propuesta. Usted se preguntará a qué se debe que existan diferencias tan grandes entre las cotizaciones recibidas. La respuesta es muy sencilla y nos ofrece una explicación lógica a algo que es complejo de asimilar para la mayoría de las personas que no tienen una experiencia previa en este tipo de proyectos. La variación en los costos se debe a que cada agencia hace las cosas de una manera distinta, utilizan diferentes tecnologías, ejecutan diferentes actividades durante el desarrollo del proyecto. En resumen, cada proveedor entrega un producto de calidad y características diferentes. De ahí las diferencias en costo. Los servicios que se cotizan: Los cuatro servicios con los que está relacionada una cotización de una página web son: registro de dominio, hospedaje, diseño web y posicionamiento en buscadores. Una determinada propuesta puede incluir sólo el diseño de la página web o una combinación de estos servicios, lo mejor es separar estos cuatro servicios en dos grupos, cotizando por un lado el registro del dominio y el hospedaje, que son la parte económica del proyecto, con un proveedor dedicado a hospedaje web y el diseño web y posicionamiento en buscadores con una agencia especialista en mercadotecnia por Internet. Para poder comparar las propuestas recibidas, usted debe ser capaz de identificar qué servicios está ofreciendo cada proveedor, qué es lo que específicamente hará cada uno de ellos, qué tecnologías en particular se emplearán y cuál es el alcance real de cada propuesta. De esa manera, podrá entender las diferencias en costo y tomar su mejor decisión en base a un análisis de costo-beneficio.

Opciones disponibles en el mercado: Si usted contrata un paquete económico, su página web seguramente será hospedada en un servidor de bajo rendimiento, se le ofrecerá el servicio de registro en buscadores, el cual, por cierto, no sirve para nada. No es útil porque al ser un simple trámite de registro, no ayudará en nada a que su página web sea localizada a través de un buscador. En el otro caso, si adquiere un sitio web profesional, probablemente le convendrá contratar los distintos servicios con dos o tres diferentes proveedores. La razón principal de esta recomendación es porque una agencia especialista en mercadotecnia por Internet se enfoca al objetivo principal que es promover su negocio, dejando en manos de terceros una actividad técnica no estratégica como lo es el hospedaje y registro de dominios. En este caso, el dominio quedará correctamente registrado a su nombre o al del representante legal de su empresa. El sitio web se diseñará en base a sus requerimientos específicos, con un diseño sobrio a su medida y necesidades, e incluirá el servicio de posicionamiento en buscadores para que sus clientes potenciales puedan localizar fácilmente sus productos en la red. Entre estas dos opciones pueden existir diversas propuestas. En cada caso, la calidad, seguridad, rendimiento, operatividad y efectividad de su página web será distinta. Así mismo, la calidad del código y características del ambiente de operación serán muy diferentes entre una y otra propuesta. La mayoría de las empresas evalúan las páginas web únicamente desde el punto de vista gráfico, lo cual es un grave error. El código es lo que define la calidad de un sitio web. Comprendiendo las diferencias: Como en cualesquier otra industria, en el diseño web existen calidades y precios. Es responsabilidad de usted saber identificar cuál es la mejor alternativa para su empresa. Si usted quiere asegurarse que los objetivos de su proyecto se cumplan, estudie en qué consisten los cuatro servicios básicos (registro de dominio, hospedaje, diseño web y posicionamiento), defina claramente sus necesidades, cotice en base a estos requerimientos y seleccione la opción que ofrezca la mejor relación costo-beneficio.

RESUMEN 3. HACIA UN WEB ACCESIBLE. Hablar de accesibilidad Web es hablar de un acceso universal a la Web, independientemente del tipo de hardware, software, infraestructura de red, idioma, cultura, localización geográfica y capacidades de los usuarios. La idea principal radica en hacer la Web más accesible para todos los usuarios con independencia de las circunstancias y los dispositivos involucrados a la hora de acceder a la información. El objetivo del concepto de diseño universal es simplificar la vida de todos y hacer que los productos, las comunicaciones y el entorno sean más útiles para un mayor número de personas, con un costo adicional bajo o nulo. En este sentido, Cuba ha realizado un esfuerzo sostenido con vistas a eliminar las barreras físicas, que no son más que “…todos aquellos obstáculos que aparecen en el medio físico que dificultan, limitan o impiden a todas las personas, con independencia de sus capacidades y limitaciones, la libertad de movimiento, la estancia, la orientación o la realización de cualquier otra actividad social o individual con autonomía y seguridad. Entre estas barreras físicas se encuentran las urbanísticas, arquitectónicas, en el transporte y en las comunicaciones. Otro nombre recibido comúnmente es el de barrera de accesibilidad, un obstáculo que impide o dificulta la realización de una determinada tarea o actividad, y que afecta de esta manera la plena integración social de la persona”. Estas barreras pueden ser: físicas (de la naturaleza) y sociales: psicológicas, culturales, arquitectónicas, urbanísticas, de comunicación e información, etcétera. Las ayudas técnicas, es decir, cualquier medio que actúe como intermediario entre la persona con limitación, movilidad o comunicación reducida y el entorno, que facilite su autonomía individual, y por tanto, el acceso; permiten eliminar algunas barreras físicas, pero las barreras psicológicas o sociales sólo pueden ser eliminadas mediante la educación y la cultura. En el mundo Web, las ayudas técnicas aparecen en forma de teclados alternativos, dispositivos de apuntamiento, lectores de pantalla, ampliadores, y software de entrada de voz entre otros. En una página Web accesible, estos dispositivos y software deben posibilitar el acceso a la información contenida en esta. Atendiendo a estas cuestiones, varios países han presentado legislaciones que estipulan el desarrollo de los sitios Web accesibles, fundamentalmente de los sitios gubernamentales. En muchas ocasiones, las personas que diseñan los sitios Web no son profesionales del sector, y en otras, es frecuente que los que requieren de un sitio

soliciten al diseñador un tipo de diseño concreto, e incluso que se saque del bolsillo una hoja de papel en el que dibujó, él, un detallado boceto de lo que desea como Web, lo cual no sería demasiado problema si esta persona fuese avezada en las recomendaciones de accesibilidad de la W 3C, pero desafortunadamente, por lo general, estas personas ni conocen de la existencia de esta institución y menos aún el término, el uso y las ventajas de la accesibilidad. Esto no ocurre en otras esferas de las ciencias aplicadas, A ningún director de una empresa de maquinarias pesadas se le ocurriría sacar un papelito con el boceto de una combinada cañera que desea que sus ingenieros le diseñen. Eso es síntoma de que al sitio Web no se le considera lo suficientemente importante y complejo como para que deba estar en manos de expertos. Como contraparte, están los supuestos especialistas que han tenido una formación en ocasiones autodidacta, los cuales desconocen o subvaloran estos temas. Entonces cae en manos del profesional que requiere la página, exigir que su Web sea accesible, es decir, exigir la calidad de su producto. De cualquier modo, siguiéndolas, se hará la Web más asequible también para todos los usuarios, cualquiera que sea la aplicación que emplee el usuario navegador de sobremesa, navegador de voz, teléfono móvil, PC de automóvil, etc.- o las limitaciones bajo las que opere -entornos ruidosos, habitaciones infra o supra iluminadas, entorno de manos libres, etcétera. Aunque existen las llamadas guías breves de accesibilidad, estas sólo cumplen una pequeña parte de los requerimientos de accesibilidad de los contenidos, así que pasaremos a una descripción más amplia de estos acápites. Las pautas presentan diferentes niveles de prioridad, del 1 al 3 según se muestra a continuación: • Prioridad 1: El desarrollador tiene que satisfacer este punto de verificación. De otra forma, uno o más grupos de usuarios encontrarán imposible acceder a la información del documento. Satisfacer este punto de verificación es un requerimiento básico para que algunos grupos puedan utilizar los documentos Web. • Prioridad 2: El desarrollador debe satisfacer este punto de verificación. De otra forma, uno o más grupos encontrarán dificultades en el acceso a la información del documento. Satisfacer este punto de verificación eliminará importantes barreras de acceso a los documentos Web. • Prioridad 3: El desarrollador puede satisfacer este punto de verificación. De otra forma, uno o más grupos de usuarios encontrarán alguna dificultad para acceder a la información del documento. Satisfacer este punto de verificación mejorará La accesibilidad de los documentos Web.

• Lógicamente estos puntos de prioridad pueden variar en determinadas condiciones, así un punto de prioridad 2 puede convertirse en prioridad 1 y viceversa. En dependencia del cumplimiento de estas especificaciones se concederán los niveles de adecuación del documento Web que se evalúe: • Adecuación de nivel A (A): se satisfacen todos los puntos de verificación de prioridad 1. • Adecuación de nivel Doble A (AA): se satisfacen todos los puntos de verificación de prioridad 1 y 2. • Adecuación de nivel Triple A (AAA): se satisfacen todos los puntos de verificación de prioridad 1, 2 y 3. En este artículo, en lugar de describir las 14 pautas con sus numerosos puntos de verificación, describiremos los puntos de verificación de cada nivel de prioridad 1, 2o 3, es decir, los que deben cumplirse para que una página tenga un nivel de adecuación A, Doble A o Triple A. Puntos de verificación de prioridad1 • Proporcione un texto equivalente para todo elemento no textual -por ejemplo, mediante el "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 utilizadas como viñetas en las listas, espaciadores, botones gráficos, sonidos (ejecutados con o sin interacción del usuario), archivos exclusivamente auditivos, banda sonora del vídeo y vídeos. ("ASCII art", se refiere a los caracteres de texto y símbolos que se combinan para crear una imagen). (Un contenido es "equivalente" a otro cuando ambos cumplen esencialmente la misma función o propósito en la presentación al usuario. En el contexto de este documento, el equivalente debe cumplir esencialmente la misma función para la persona con discapacidad, al menos en la medida que sea posible, según la naturaleza de la discapacidad y el estado de la tecnología, como el contenido primario hecho para personas sin ninguna discapacidad. Por ejemplo, el texto "Luna llena" debe transmitir la misma información que una imagen de la luna llena cuando se presenta al usuario. Puesto que un contenido textual puede presentarse al usuario mediante un sintetizador de voz, braille o un texto mostrado visualmente, estas pautas requieren texto equivalente para los gráficos y la información auditiva. Los textos equivalentes deben escribirse de manera que transmitan los elementos esenciales del contenido). • Asegúrese de que toda la información transmitida mediante los colores también esté disponible sin color, por ejemplo mediante el contexto o por marcadores. • Identifique claramente los cambios en el idioma del texto del documento y en cualquier texto equivalente (por ejemplo, leyendas). • Organice el documento de forma que pueda ser leerse sin hoja de estilo. Por ejemplo, cuando un documento XHTML se interpreta sin asociarlo a una hoja

de estilo, tiene que ser posible leerlo. (Una hoja de estilo es un conjunto de instrucciones que especifican la presentación de un documento. La interacción entre el proveedor del contenido, el usuario y la aplicación de usuario de una hoja de estilo se denomina cascada). • Asegúrese de que los equivalentes de un contenido dinámico se actualizan cuando cambia el contenido dinámico. • Hasta que las aplicaciones de usuario permitan controlarlo, evite provocar destellos en la pantalla. • Utilice el lenguaje apropiado más claro y simple para el contenido de un sitio. Si utiliza mapas de imágenes: • Proporcione mapas de imagen controlados por el cliente en lugar de por el servidor, excepto donde las zonas sensibles no puedan definirse con una forma geométrica. • Proporcione vínculos redundantes en formato texto para cada zona activa de un mapa de imagen del servidor. (Una imagen que se dividió en zonas con acciones asociadas. Pinchar en una zona activa provoca una acción. Cuando el usuario hace clic en una zona activa del mapa de cliente, la aplicación de usuario calcula en qué zona se ha activado y sigue el vínculo asociado a esa zona. Hacer clic en una zona activa de un mapa de servidor genera las coordenadas que se envían al servidor, que realizará cierta acción). Si utiliza tablas: • 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. Si utiliza marcos (frames): • Titule cada marco para facilitar su identificación y navegación. Si utiliza "applets" y "scripts": • Asegúrese que los contenidos sean utilizables cuando se desconecten o no se soporten los scripts, applets u otros objetos programados. Si esto no es posible, proporcione información equivalente en una página alternativa accesible. Si se utiliza multimedia: • Hasta que las aplicaciones de usuario puedan leer en voz alta automáticamente el texto equivalente de la banda visual, proporcione una descripción auditiva de la información importante en de la banda visual de una presentación multimedia. • Para toda presentación multimedia tempo-dependiente -por ejemplo, una película o animación- sincronice alternativas equivalentes (por ejemplo, subtítulos o descripciones de la banda visual) con la presentación. Si todo falla:

• Si después de los mayores esfuerzos, no puede crear una página accesible, proporcione un vínculo a una página alternativa que utilice tecnologías W3C, sea accesible, tenga información (o funcionalidad) equivalente y se actualice tan a menudo como la página (original) inaccesible. Puntos de verificación de prioridad2 • Asegúrese de 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 en pantallas en blanco y negro [Prioridad 2 para las imágenes. Prioridad 3 para los textos]. • Cuando exista un marcador apropiado, utilice marcadores en lugar 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 correctamente las listas y los ítems de las listas. • Marque las citas. No utilice el marcador de citas para efectos de formato como sangrías. • Asegúrese de 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 que sean soportadas. • Evite características y elementos no aconsejados por las tecnologías W3C. (Un elemento o atributo no aconsejado es aquel que queda anticuado ante la aparición de nuevas construcciones. Los elementos no aconsejados quedarán obsoletos en futuras versiones de XHTML).

• 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 metadatos para añadir información semántica a las páginas y sitios. • Proporcione información sobre la estructura general de un sitio (por ejemplo, mapa del sitio o tabla de contenidos). • Utilice los mecanismos de navegación de forma coherente. Si utiliza tablas: • 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 efecto visual de formato. Si utiliza marcos (frames): • Describa el propósito de los marcos y cómo estos se relacionan entre ellos, si no resulta obvio solamente con el título del marco. Si utiliza formularios: • Hasta que las aplicaciones de usuario soporten explícitamente la asociación entre el control de formulario y la etiqueta, para todos los controles de formularios con etiquetas asociadas implícitamente, asegúrese de que la etiqueta se colocó adecuadamente. • Asocie explícitamente las etiquetas con sus controles. Si utiliza applets y scripts: • Asegúrese de que los manejadores de eventos sean independientes del dispositivo de entrada. • Hasta que las aplicaciones de usuario permitan congelar el movimiento de los contenidos, evite los movimientos en las páginas. • Haga estos elementos 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]. • Asegúrese de que cualquier elemento que tiene su propia interfaz pueda manejarse de forma independiente del dispositivo. • Para los "scripts", especifique manejadores de evento lógicos mejor que manejadores de eventos dependientes de dispositivos. Puntos de verificación de prioridad3 • Especifique la expansión de cada abreviatura o acrónimo cuando aparezcan por primera vez en el documento. • 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étera. • 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étera. • 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 Si utiliza mapas de imágenes: • 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. Si utiliza tablas: • 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. Si utiliza formularios: • 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.

La discusión de cada pauta con sus múltiples puntos de revisión requerirían todo un documento como este para cada una de ellas, Además serían aspectos bastantes técnicos por lo cual caería fuera de los intereses de esta contribución. CONSIDERACIONES FINALES. En Cuba, se diseñan y se publican varios sitios Web diariamente, muchos de ellos se destacan por la calidad de sus contenidos, por la relevancia de la información que ofrecen e incluso algunos de ellos por su flexibilidad y novedad a la hora de programarlos. Cada vez, se impone más la necesidad de crear sitios accesibles, esto es una realidad, estos términos se integran bastante bien en la nueva concepción de Infomed 2.0 en nuestro país, porque las nuevas herramientas utilizadas como bloques de construcción (Blogs, Wikis, sistemas de manejo de contenidos- CMS) implementan con bastante rigurosidad las pautas de accesibilidad de la W 3C.