1

Guía

Del estudiante

Modalidad a distancia

Modulo: Desarrollos Web

DATOS DE IDENTIFICACION

TUTOR HECTOR MAURICIO LEAL PARGA

Teléfono 000-000-0000

E-mail infingml@yahoo.es

Lugar CERES – SABANA DE OCCIDENTE –

Corporación Universitaria Minuto de Dios – Rectoría Cundinamarca

2

BIENVENIDA

La Corporación Universitaria Minuto de Dios. UNIMINUTO –Educación a Distancia le da la bienvenida al Modulo Desarrollos Web. Esperamos que una vez terminado éste adquiera los conocimientos fundamentales de gestión de contenidos web, para que pueda continuar con el desarrollo del pregrado de forma exitosa, con la profundización que como profesional deberá alcanzar. Recuerde que la metodología a distancia implica un manejo de sus tiempos acorde con las exigencias propias del nivel de formación y de las estrategias propias de un profesional, por ello su rol como estudiante cobrará mayor relevancia y protagonismo. Aspectos fundamentales para la concepción formal de una disciplina basada en dedicación y compromiso. Le auspiciamos los mejores deseos por alcanzar los objetivos planteados y el éxito en su formación profesional.

3

INTRODUCCION

El desarrollo Web es el proceso de creación y mantenimiento de páginas web,

generalmente para ser parte de un sitio web disponible en la WWW. En el caso de la

educación se ha evidenciado que la necesidad de contar con profesionales con

conocimientos en desarrollo web, que sirvan de base para tomar decisiones en

situaciones de descubrimiento de nuevos hechos que plantea el manejo de información

web empresarial.

En éste modulo damos un recorrido que le permita adquirir las bases conceptuales del desarrollo web. Para ello, se inicia el proceso académico haciendo una revisión de fundamento de comunicación de datos, y a continuación se hará un afianzamiento del lenguaje HTML, la cual responden directamente a lo que se ha planificado, y por último revisaremos los conceptos de diseño y Aplicaciones Web con Visual Studio. Con ese recorrido temático, es preciso revisar todo lo referente al análisis y representación de sitios web y cómo éste tiene una directa relación con el manejo de información tipo web, que es hacia donde están encaminadas las empresas.

4

UNIDAD DE TRABAJO No. 2

El lenguaje HTML (Parte 2)

o

INDICADORES

Apropiar el concepto utilizado para desarrollar páginas Web con HTML.

Despertar el gusto por la construcción de páginas Web que van a ayudar a mejorar la calidad de vida de quienes los usen.

Reconocer la importancia del desarrollo de páginas Web, para mostrar la información al mundo

Producir páginas Web teniendo en cuenta las metodologías para tal fin.

Utilizar los medios tecnológicos para interactuar con los demás y aprender a trabajar en equipo.

TEMAS A DESARROLLAR EN LA UNIDAD

MARCO TEORICO DE FORMACION

1. Marcos. Limitaciónes de Accesibilidad, posicionamiento.

2. Formularios

3. Fondos. Posiciones, Fijamientos.

4. Formato de Color. Valores de Color, Nombres de Color.

5. Principios de CSS + XHTML.

Preguntas Generadoras

- ¿Qué importancia tienen las listas los marcos y los fondos en los desarrollos web?

5

1. Marcos.

Amados u odiados, útiles o inútiles, excelentes o pésimos, los marcos son instrumentos que forman ya parte habitual del web y que los navegadores gestionan hoy día a la perfección. Los detractores de los marcos afirman la inutilidad de subdividir ulteriormente las páginas web, las cuales, en última instancia, pueden resultar poco legibles. Otros, como yo, consideran que los marcos pueden llegar a ser muy útiles ya que se evita cargar las mismas imágenes y se mantienen ordenados el contenido y la estructura del sitio. Naturalmente, abusar de los marcos puede producir como resultado pésimas impostaciones gráficas, obteniendo un efecto contrario al previsto. Un punto en contra de los marcos es, ciertamente, su incompatibilidad con los programas de navegación gráfica destinados a invidentes, los cuales se bloquean impidiendo la lectura de las páginas.

Una buena solución es crear una versión con marco y una versión sin marco (como esta misma guía ha hecho). ¿Cómo se crean los marcos? Antes de nada, repasemos rápidamente las marcas HTML de gestión de marcos.

Documento

Marco <FRAMESET></FRAMESET> (en lugar de

<BODY>)

altura en filas <FRAMESET ROWS=,,,></FRAMESET>

(píxel ó %)

altura en filas <FRAMESET ROWS=*></FRAMESET>

(* = tamaño

relativo)

anchura en columnas

<FRAMESET COLS=,,,></FRAMESET>

(píxel ó %)

anchura en

columnas <FRAMESET COLS=*></FRAMESET>

(* = tamaño

relativo)

anchura del borde

<FRAMESET BORDER=?>

borde <FRAMESET FRAMEBORDER="yes|no">

color del borde <FRAMESET BORDERCOLOR="#$$$$$$">

Definición del

marco <FRAME> (contenido de

cada uno de

los recuadros)

documento que se debe mostrar

<FRAME SRC="URL">

denominazione

del frame <FRAME NAME="***"|_blank|_self| _parent|_top>

anchura de los

márgenes <FRAME MARGINWIDTH=?> (margen

izquierdo y

derecho)

altura de los

márgenes <FRAME MARGINHEIGHT=?> (margen

superior e

inferior)

barra de <FRAME

6

desplazamiento

o no SCROLLING="YES|NO|AUTO">

no redimensionable

<FRAME NORESIZE>

borde <FRAME FRAMEBORDER="yes|no">

color del borde <FRAME BORDERCOLOR="#$$$$$$">

contenido en

ausencia de

marco

<NOFRAMES></NOFRAMES> (para navegadores antiguos)

Para crear una página dividida en marcos, es necesario crear varios archivos HTML referidos a un archivo principal, que es el que permite su gestión. Así pues, antes de nada hace falta impostar este archivo "fuente", y, posteriormente, los demás archivos que componen el marco.

Imaginemos que debemos crear una ventana dividida en marcos como la de la figura, con un marco en la parte superior fijo (en el cual cargaremos el archivo "top.htm", que deberemos crear aparte) y un marco central (en el cual cargaremos el archivo "central.htm", que deberemos, asimismo, crear aparte) que cambiará según cual sea la página que deba mostrar. Como hemos señalado antes, la gestión de estos dos marcos correrá a cargo de un tercer archivo, el cual deberá invocarlos asignándoles una parte de la página. He aquí el código de esta página:

<FRAMESET rows="80,*"> <frame name="alto" src="top.htm"> <frame name="central" src="central.htm">

</FRAMESET> Como podemos ver, el código del marco está encerrado entre las marcas <FRAMESET></FRAMESET> que se comportan como las marcas usuales <HTML></HTML>. El tamaño de los marcos, o mejor dicho, el espacio que cada uno de ellos debe ocupar en la página, queda establecido mediante la marca rows="80,*, que significa que el marco alto (que en este caso es una fila, "row") debe tener 80 píxel, mientras que "*" significa que todo el resto debe asignarse al marco central. Asimismo, habríamos podido expresar el tamaño de los marcos en tantos por ciento de esta manera:

<FRAMESET rows="20%,*"> Una vez impostados los dos parámetros <FRAMESET></FRAMESET>, dentro de ellos se definen los nombres y los archivos que deberán invocarse en los dos marcos creados. Es necesario dar un nombre al marco (name="alto") e indicar el archivo HTML que deberá cargarse dentro del marco (SRC="top.htm"). Deben, por tanto, crearse previamente dos archivos de nombre "top.htm" y "central.htm". Fíjate bien en lo importante que es la colocación dentro del código para una correcta interpretación por parte del navegador. Así, si se invirtiera el orden de esta manera:

<FRAMESET rows="80,*">

7

<frame name="central" src="central.htm"> <frame name="alto" src="top.htm">

</FRAMESET>

el navegador invertiría el orden de asignación y cargaría el archivo "central.htm" en el marco superior, y el archivo "top.htm" en el marco central.

Códigos y marcos

Para eliminar el borde gris de los marcos, se debe insertar el siguiente código: <frameset cols="20%,60%,20%" border=0> Para impedir que los marcos sean redimensionados por el visitante: <frame name="alto" src="top.htm" noresize> Para eliminar siempre las barras de desplazamiento (scrollbars): <frame name="alto" src="top.htm" scrolling="no"> Para mostrarlas siempre: <frame name="alto" src="top.htm" scrolling="yes"> Para mostrarlas sólo cuando son necesarias: <frame name="alto" src="top.htm" scrolling="auto"> Para regular la distancia del contenido del marco al margen superior (marginheight) y a los márgenes izquierdo y derecho (marginwidth): <frame name="alto" src="top.htm" marginheight=2 marginwidth=5>

2. Formularios

¿Qué son los formularios?

Los formularios son posiblemente la herramineta más utilizada en Internet para obtener datos e información acerca de la gente que navega nuestro sitio. La idea de los formularios es recolectar información online en la interacción con el usuario y luego ejecutar una determinada acción con la misma, que podría ser por ejemplo, quizás el caso más utilizado, un formulario de venta que el usuario completa y luego es enviado vía email al vendedor en forma encriptada. Este tema a diferencia de los anteriores es bastante más complejo y oscuro, aparecerán terminos como CGI scripts, Perl o bien lenguajes de programación como C, que seguramente nos desalentarán al principio, pero que con el tiempo asumiremos como familiares. La idea de esta sintética guía de formularios es brindar al newbie o novato un pantallazo general de lo que es posible hacer con simples formularios en nuestro sitio web.

¿Cómo los definimos?

Cinco son solamente las etiquetas que el código HTML posee para definir todos los elementos interactivos que un formulario puede presentar: <FORM>, <INPUT>, <SELECT>, <OPTION> y <TEXTAREA>. Estas etiquetas, junto a un número de modificadores o atributos, son suficientes para indicarle al navegador cliente cómo debe recolectar la información, cómo debe manejarla una vez recolectada y cómo debe interactuar con el servidor.

Etiqueta <FORM>

8

Todo formulario debe estar encerrado entre el par de etiquetas <FORM> y </FORM>, y debe ser ubicado en el cuerpo de cualquier documento HTML, es decir, entre el par de etiquetas <BODY> y </BODY>. Esta etiqueta <FORM> presenta tres atributos posibles:

Comando Descripción

ACTION

el valor de este parámetro es la URL del programa o guión en el Servidor Web utilizado para procesar la información recolectada.

METHOD puede asumir el valor GET o el valor POST, y definen la manera en la cual los datos son transferidos al servidor.

ENCTYPE este atributo está reservado para que la información viaje en forma encriptada a través de Internet.

Los dos primeros atributos de la tabla son de uso obligatorio para cualquier formulario que generemos, ya que establecen dónde enviar la información y cómo enviarla. El atributo o parámetro ENCTYPE es optativo y no es realmente importante.

Etiqueta <INPUT>

La etiqueta <INPUT> es la segunda etiqueta más importante de los formularios. Se la puede definir como una etiqueta multifunción, ya que con la misma podemos crear "push buttons", "radio buttons", "check boxes", y simples recuadros para ingresar texto. Posee ocho posibles parámetros: ALIGN, CHECKED, MAXLENGTH, NAME, SIZE, SRC, TYPE, y VALUE. Pero no se asusten con tantos parámetros porque normalmente solo se utilizan a lo sumo solo cinco. Los atributos cruciales para toda etiqueta <INPUT> son NAME, que asocia un nombre con cada variable ingresada; y TYPE, que puede asumir los valores TEXT, PASSWORD, CHECKBOX, RADIO, SUBMIT, RESET, IMAGE, and HIDDEN; de acuerdo al tipo de elemento que querramos representar. Más adelante todo será más claro con los ejemplos.

Etiqueta <SELECT>

Este par de etiquetas define una lista de elementos de los cuales el usuario debe seleccionar uno o varios, de acuerdo a los atributos que especifiquemos.

Etiqueta <OPTION>

Con esta etiqueta definimos cada elemento de las listas designadas con el par <SELECT> y </SELECT>.

Etiqueta <TEXTAREA>

Este par de etiquetas nos permiten definir un area de dimensiones arbitrarias que funciona como una suerte de editor, donde el usuario puede ingresar texto.

3. Fondos.

Hasta ahora sabemos crear un documento html, con su estructura mínima. Sabemos incluir

párrafos y alinearlos, incluir imágenes, enlaces y listas. Es el momento de darle un poco de

color a la página.

El lenguaje html no es muy bueno en este sentido, pero sus instrucciones básicas permiten

especificar un color de fondo para nuestra página, o incluir una imagen de fondo. Tambien

podemos especificar el color en el que aparecerán los enlaces (links) en su estado normal,

activo (seleccionado) o visitado.

Estos cambios los logramos añadiendo atributos a la etiqueta <body>:

9

<html> <head> <title>Mi pagina en colores</title> </head> <body bgcolor="#507FFF"> <h1>bienvenido a mi página</h1> <p>Aqui iria el resto de la página</p> </body> </html>

El color se indica en código hexadecimal, precedido del carácter almohadilla (#). Los

colores que puedes usar son infinitos, pero su correcta visualización dependerá de la

configuración del PC donde se vea. Si usas colores complejos, no se verán bien salvo que tu

visitante posea un PC configurado en color de 16 bits o 32 bits. Para sistemas inferiores

(256 colores o menos) es mejor atenerse a los colores básicos.

Netscape ofrece una tabla de 216 "colores seguros" que teóricamente se verán bien en

cualquier ordenador. Aqui la tienes.

Si no quieres ceñirte a esta tabla de colores, y quieres elegir otro personalizado, el nombre

hexadecimal puedes conseguirlo con cualquier programa de gráficos. O una solución mas

sencilla, usa un color picker. Se trata de unos programas que te ofrecen el nombre

hexadecimal de cualquier color que tengas en la pantalla, sin mas que posar el cursor sobre

él. Hay muchos, y mi favorito es sin duda el color pad, pequeño, cómodo y freeware. Con

él puedes conseguir el color exacto de toda página web que veas por ahi, o duplicar los

colores de tu gráfico favorito.

Tambien puedes señalar los colores por su nombre. Efectivamente algunos colores tienen

nombre, aunque no es el método mas recomendado para utilizarlos. En esta página podrás

jugar con los colores y aprender sus nombres.

fondos

<html> <head> <title>Mi pagina en colores</title> </head> <body background="bkgnd2.gif"> <h1>bienvenido a mi página</h1> <p>Aqui iria el resto de la página</p> </body> </html>

Eso que acabas de ver es lo que has de hacer si deseas incluir un gráfico de fondo en tu

página. Fácil, sustituyes en la etiqueta body el atributo bgcolor= por background= y indicas

la ruta (absoluta o relativa) al gráfico elegido. Ya sabes, ha de ser gif o jpg, y cuidado, no se

te ocurra poner un gráfico de colores fuertes o no se verá el texto. Ah, y no hace falta que

sea del tamaño de tu página. El navegador se encarga de multiplicarlo las veces que sean

necesarias para rellenar todo el fondo.

10

4. Formato de Color.

Seguramente se está preguntando: « ¿Tiene algún significado esta extraña combinación de letras y números?» Pues la respuesta es «Sí» y así es como funciona:) Formato de los códigos HTML: Cada código HTML comprende el símbolo «#» y 6 letras o números. Estos números se expresan en el sistema de numeración hexadecimal. Por ejemplo «FF» en hexadecimal representa el número 255 en Decimal. Significado de los símbolos: Significado de los símbolos: Los dos primeros símbolos del código de color HTML representan la intensidad del color rojo. 00 es el menos intenso y FF es el más intenso. El tercer y el cuarto número representan la intensidad del verde y el quinto y el sexto representan la intensidad del azul. Así, con esta combinación de la intensidad del rojo, verde y azul podemos mezclar cualquier color que deseemos de corazón;) Ejemplos: #FF0000 - Con este código HTML le decimos al navegador que muestre la máxima cantidad de rojo y nada de verde ni de azul. El resultado es evidentemente el color rojo puro: #00FF00 - Este código HTML muestra solo el verde y nada de rojo ni de azul. El resultado es: #0000FF - Este código HTML muestra solo el azul y nada de rojo ni de verde. El resultado es: #FFFF00 - Con la combinación de color rojo y verde obtenemos el amarillo: #CCEEFF - Cogemos un poco de rojo, un poco más de verde y el máximo de azul para obtener el color del cielo:

5. Principios de CSS + XHTML.

XHTML es un estándar (al igual que el HTML) propuesto por el Consorcio W3C, y se pretende conseguir que todos los documentos web sean compatibles en cualquier navegador (no solamente en ordenadores, sino también en cualquier dispositivo). Según el propio organismo, es una "reformulación del estándar HTML 4", con el que es compatible al 100%. CSS son las siglas de "Cascade StyleSheet", y especifica la forma del diseño de los documentos (tanto XHTML como HTML). Una misma página web (un mismo documento XHTML, por ejemplo) puede ser vista de diferente forma en un PC que un PDA, gracias a diferentes hojas de estilo CSS. Utilizar XHTML+CSS te puede ayudar a mejorar tu posicionamiento web en Google. Por una parte, conseguirás que el código de tus páginas web sea más limpio y claro a los ojos del robot de Google ('googlebot' es capaz de leer documentos XHTML). Facilitar la labor a este robot siempre es un punto a nuestro favor. Por otra parte, aumentarás la densidad de las palabras clave dentro de los contenidos (ver 'dónde situar las keywords'), ya que muchas de las etiquetas te ocuparán muchísimo menos espacio. Esto también supone un menor peso para tus páginas web, lo cual Google agradecerá. Y podrás a su vez cambiar rápidamente los estilos de ciertas palabras, modificando la importancia que les quieres otorgar.