lunes, 3 de diciembre de 2012

MANIPULAR TABLAS EN UNA PAGINA WEB.

Una tabla está formada por filas y columnas y a la intersección de estas le llamamos celdas, en las que se puede insertar texto y gráficos. Las tablas son una buena herramienta para organizar los datos en una página web, además nos permiten estructurar las páginas de nuestro sitio separando la cabecera, el menú, el contenido.

Creación de una tabla

Para crear una tabla se debe usar la instrucción Table, seguida de parámetros que indican la

anchura, el color o imagen de fondo, etc.

Ejemplo:

<table>

</table>

Estas dos instrucciones indican al explorador de Internet que en este lugar de la página se va a

crear una tabla.

Uso de encabezados de tabla

Después de que se haya indicado al explorador de Internet que se va a crear una tabla, es necesario definir cuántas columnas de tabla se desean utilizar. Para ello se deben utilizar las instrucciones <TH>, las cuales indican los encabezados de tabla.

Ejemplo:

<Table>
<TH>Columna 1</th><TH>Columna 2<TH>Columna 3</TH>
</table>

MANIPULAR OBJETOS Y FORMULARIOS EN UNA PAGINA WEB.

En este capítulo finalizamos el estudio de los objetos del navegador viendo cómo manipular formularios. Este punto es especialmente importante: si aprendemos correctamente a manipular todos los objetos de un formulario, podremos hacer funciones que nos permitan validarlo antes de enviar estos datos a un servidor, ahorrándole la faena de tener que verificar la corrección de los datos enviados.

El objeto form

Este objeto es el contenedor de todos los elementos del formulario. Como ya vimos al tratar el objeto document, los formularios se agrupan en un array dentro de document. Cada elemento de este array es un objeto de tipo form.

Propiedades

action. Es una cadena que contiene la URL del parámetro ACTION del form, es decir, la dirección en la que los datos del formulario serán procesados.
elements. Es un array que contiene todos los elementos del formulario, en el mismo orden en el que se definen en el documento HTML. Por ejemplo, si en el formulario hemos puesto, en este orden, una caja de texto, un checkbox y una lista de selección, la caja de texto será elements[0], el checkbox será elements[1] y la lista de selección será elements[2].
encoding. Es una cadena que tiene la codificación mime especificada en el parámetro ENCTYPE del form.
method. Es una cadena que tiene el nombre del método con el que se va a recibir/procesar la información del formulario (GET/POST).

Métodos

reset(). Resetea el formulario: tiene el mismo efecto que si pulsáramos un botón de tipo RESET dispuesto en el form.
submit(). Envía el formulario: tiene el mismo efecto que si pulsáramos un botón de tipo SUBMIT dispuesto en el form.

Vistas ahora las propiedades y métodos del objeto form, pasamos a estudiar, uno por uno, todos los objetos contenidos en el formulario.

Establecer Vínculos e hipervínculos

Con Los hipervínculos de pueden activar frases o palabras de la pagina para que al pulsar sobre ellas se salta a cualquier otra pagina de internet que decidamos.

Los Enlaces Hipervínculo no son más que unas zonas especiales de nuestro texto que ofrecen la posibilidad de pulsar sobre ellas para ir a otras páginas. Lo realmente novedoso es la posibilidad de navegar hasta páginas que se encuentran en el otro extremo de la tierra.

Los enlaces pueden clasificarse en 2 tipos: Los Internos / Locales y los externos:

1. Los enlaces internos son aquellos Que enlazan las páginas que componen un mismo sitio web. Todas estas páginas estarán generalmente en el mismo servidor, y por tanto estarán también en el mismo ordenador. Por esta razón solo será necesario indicar en nuestro código el nombre del archivo donde esta la pagina que queremos enlazar y el directorio en el que se encuentran. Ejemplo:/hobbies/index.html

2. Los enlaces externos permiten saltar desde una pagina hasta otra puede estar en cualquier lugar del mundo (En otro servidor web). Al crear estos enlaces es necesario especificar la dirección completa de internet (URL) de la pagina que queremos enlazar.

Ejemplo: http//www.otroservidor.com/hobbies/index.html

Cabe resaltar que aunque la mayoría de las veces los LINKS se usan para enlazar una página con otras, también pueden usarse con imágenes, sonido, video, etc.,

La Etiqueta <a>…</a>.-

Permite incluir en al paginas enlaces hipertexto su atributo href permite indicar cual es la pagina a la que debe saltar el usuario al pulsar sobre el texto adecuado. El texto del enlace será aquel que se introduzca entre las instrucciones de inicio y fin de la etiqueta <a>.

Utilizar etiquetas en una página web

Un documento HTML ha de estar delimitado por la etiqueta< ht ml> y</ht ml>. Dentro de este

documento, podemos asimismo distinguir dos partes principales:

El encabezado, delimitado por<head> y</head> donde colocaremos etiquetas de índole

informativo como por ejemplo el titulo de nuestra página.

El cuerpo, flanqueado por las etiquetas<body> y</body>, que será donde colocaremos

nuestro texto e imágenes delimitados a su vez por otras etiquetas como las que hemos visto.

El resultado es un documento con la siguiente estructura:

<html>

<head>

Etiquetas y contenidos del encabezado

Datos que no aparecen en nuestra página pero que son importantes para catalogarla: Titulo,

palabras clave,...

</head>

<body>

Etiquetas y contenidos del cuerpo

Parte del documento que será mostrada por el navegador: Texto e imágenes

</body>

</html>

Con todo lo que conocemos ya sobre HTML podemos construir una página web que ya tiene

bastante sentido. Vemos un ejemplo a continuación.

<html>

<head>

<title>Elaboración de Paginas Web</title>

</head>

<body>

Bienvenido,
Estás en la página Elaboración de Páginas Web de Tercer Semestre.
Aquí aprenderás de manera personal a realizar tu pagina web.

</body>

</html>

Cómo ya hemos dicho el HTML es un lenguaje de marcas (etiquetas). Así todo nuestro texto

estará encerrado entre etiquetas: Una etiqueta de inicio y una etiqueta de fin.

Funcionan de la siguiente manera:

<etiqueta> inicio de una etiqueta

</etiqueta> el cierre de una etiqueta.

Algunas etiquetas, que iremos viendo a lo largo del manual, no llevan etiqueta de cierre, en ese

caso se cierra, dentro de la propia etiqueta, tal y cómo vemos a continuación.

<etiqueta /> Los elementos que no llevan etiqueta de cierre, se cierran en la misma etiqueta de

apertura, por ejemplo:

Las etiquetas deben de ir siempre en minúsculas. Encontrarás muchas páginas WEB en las que las etiquetas están en mayúsculas, hasta el HTML 4.0 era indiferente la utilización de minúsculas o mayúsculas y muchos autores utilizaban las mayúsculas por claridad.

Todo lo que vaya entre dos etiquetas HTML se verá afectado por éstas, por ejemplo:

<h1>Esto es un encabezado</h1>

Pero esto no, esto es un párrafo

Estas son algunas de las etiquetas más utilizadas:

< html>marcan el inicio y el final de una pagina web< /html>
< title>establece un titulo para la pagina< /title>
< body bgcolor="">establece un color de fondo para la pagina

< body background="">establece una imagen de fondo para la pagina < body

text="">establece el color de letra en la pagina

< h1>establece un encabezado en la pagina< /h1> < hr>agrega una línea separadora

Etiquetas de texto

pone el texto en negrita

pone el texto en cursiva 
 cambia el color de texto

cambia el tamaño del texto cambia el tipo de letra cambia el color el tamaño y el tipo

de letra

Etiquetas de enlace< aref0"">texto< /a> añade un enlace utilizado la palabra texto< ahref="">< img src="">< /a> añade un enlace utilizando una imagen

Etiquetas secundarias

Algunas veces, necesitaremos añadir dos etiquetas a un texto, por ejemplo, supongamos y esto es sólo un ejemplo, que un título sea también un enlace, veamos cómo lo haríamos (utilizamos pseudo código puesto que todavía no hemos visto el código html).

<título><enlace>lo que se a.co m</enlace></título>

En cambio el siguiente código sería incorrecto

<título><enlace>lo que se a.co m</titulo></enlace>

Las etiquetas pueden a veces llevar atributos que nos permiten especificar más las etiquetas que utilizamos. Los atributos son como los adjetivos. Por ejemplo supongamos que tenemos una etiqueta<hombre> y queremos especificar que es guapo. Así que utilizaremos el atributo "apariencia" a este atributo le daremos el valor de "guapo". Nos quedaría apariencia="guapo". Así nuestro< ho m br e> nos quedaría <hombre apariencia="guapo">.

Etiquetas de párrafo

Para esto se utiliza la etiqueta y . Este comando es muy útil debido a que si uno escribe algo (en el editor que se este utilizando) por mucho espacio que uno le de siempre al texto, siempre va a aparecer en la misma línea.

Para alinear un párrafo se utiliza el comando< align> y</a lign>, utilizado dentro de la etiqueta

. Se puede alinear de tres formas diferentes:

Pár r afo ... Alinea a la izquierda.
Pár r afo ... Realiza un centrado.
Pár r afo ... Alinea a la derecha.
 indica el inicio de un párrafo nuevo
 cambia el texto a otra línea
< pre>añade un texto preformateado < /pre>
< li>sirve para listar objetos
< ul>añade numeración a los objetos listados
< ul>añade viñetas a los objetos listados< /ul>
< blockquote>resalta una línea ubicada en un párrafo
< /blockquote> indica el inicio de una definición

Cuando nosotros queremos que lo que escribimos aparezca en otra línea utilizamos el comando

.

Al terminar de escribir un párrafo es conveniente y estético utilizar el comando para separar un párrafo de otro que es .

Etiquetas para darlefor m a to al texto:

Para el tamaño y tipo de letra se usa la etiqueta<fo nt > y< /fo nt>, que posee tres atributos:

tamaño(siz e), Tipo de letra o fuente(fa c e) y color .

Formato:

y Sirve para colocar un texto en Negrita.y sirve para subrayar un texto<strike>y </strike> sirve para tachar un texto.y cumple la misma función que 
y para colocar un texto en cursiva.

texto con énfasis texto con énfasis<cite>citación</cite>citació n<dfn>definición</dfn>de finició n<kbd>teclado</kbd>te clado<samp>ejemplo</samp>e je mplo

size: regula el tamaño de los caracteres.

Ejemplo: texto...</fo nt > .

face: es la fuente que se quiere usar, arial, times new roman, etc.

Para elegir nosotros mismos el color que queremos que tengan los links o enlaces e incluso el

texto, las etiquetas que se utilizan para hacer esto son las siguientes:

* text="#número" Para el color del texto

* link="#número" Para el color de los enlaces

* vlink="#número" El color con que aparecerán los enlaces ya visitados

* alink="#número" Color del enlace cuando lo pulsamos.

Veamos la etiqueta<ht ml> nos dice que se trata de un documento html, pero podemos utilizar

el atributo lang para especificar el idioma del contenido del documento, así nos quedaría<ht ml

lang="es">. Los atributos se especifican indicando el nombre del atributo (lang) y su valor (es).

En castellano estaríamos diciendo: esto es un documento html en español. Los atributos siempre

se añaden en la etiqueta de inicio y los valores de un atributo siempre deben estar entre comillas.

Etiquetas de imagen

< img src="">permite añadir una imagen ala pagina

< img src=""align0"top">alinea el titulo de la imagen en la parte superior < img src=""align="middle">alinea el titulo de la imagen en la parte de en medio < img src=""align"bottom"> alinea el titulo de la imagen en la
parte inferior

Por lo tanto la etiqueta <body> puede quedar del siguiente modo: <body bgcolor="#num" text="#num" link="#num" vlink="#num" alink="#num">

Ahora veremos como poner una imagen de fondo. Es muy sencillo, basta con usar la etiqueta:

background="localización de la imagen" Esta etiqueta va dentro de la etiqueta <body>. Ejemplo:

Las listas pueden ser: Lista desordenada,< ul> (Unordered List).

Lista ordenada,<o l> (Ordered List).

Ejemplos de diferentes tipos de listas:

Lista con números romanos:

<ol>

<li type=I>Manzana
<li type=I>Zanahoria
<li type=I>Lechuga
<li type=I>Tomate

</ol>

I Manzana
II Zanahoria
III Lechuga
IV Tomate

Lista numerada:

<ol>

<li>Manzana
<li>Zanahoria
<li>Lechuga
<li>Tomate

</ol>

1 Manzana
2 Zanahoria
3 Lechuga
4 Tomate

ESQUEMATIZAR LA ESTRUCTURA GENERAL DE UNA PAGINA WEB.

PLANIFIQUE LA ESTRUCTURA ANTES DE EMPEZAR
Antes de crear un conjunto de paginas web uno ha de tener una idea clara de como va a ser la estructura de dichas paginas, es conveniente hacer un esquema, para la mayoria de los casos una hoja de papel y un lapicero bastara, pero si el emplazamiento va a albergar un gran numero de pagina es recomendable algun tipo de programa que permita manejar estructuras de tipo grafo.

LA ESTRUCTURA DEPENDE DEL CONTENIDO
No es lo mismo crear una estructura de navegacion para un sitio que desea publicar informacion al estilo de un libro cuya estructura estara formada por capitulos, este tipo de informacion se adapta bastante bien a una estructura lineal como jerarquica. Mientras que un sitio donde se expone un tutorial o un tour es mas apropiada una estructura de tipo lineal.

DEFINIR OBJETIVOS Y CONTENIDOS DE LA PÁGINA WEB.

Es importante tomar uan decision par elegir que objetivos consideramos primordiales antes del desarrollo de la pagina web. La eleccion, condiciona de manera clave la concepcion y el diseño del proyecto, el cual debe ser coherente con los objetivos de la empresa. Por ejemplo:

Conseguir 250 contactos comerciales en 1 año.
Ofrecer a los clientes una herramienta de seleccion del producto mas adecuado para que se informen y comparen sin presiones
Impactar al vistante co una web espectacular que refuerce la imagen de marca
Vender software directamente desde internet buscando el ahorro de costos de distribucion.

Tu web puede ser algo mas. Ya que habla por ti, por tus productos por tus servicios, por lo que ademas puede:
ofrecer al visitante ocasional una motivacion para contactar,
una razon para recordarte o quizas una utilidad que le ahorra tiempo, encontrar una informacion que estaba buscando.
Facilitar y agilizar el trabajo de colaboradores y de empleados.
Apoya laimagen de marca.
vende y completa el proceso de venta.
Ofrece asistencia y soporte tecnico.
facilita una comunicacion agil y fluida con tus cliente y proveedores.

APLICAR LA TEORIA DEL COLOR CONSIDERANDO EL CIRCULO CROMATICO,CONTRASTES, EL RGB Y CMY.

Empezaremos diciendo que el color en sí no existe, no es una característica del objeto, es másbien una apreciación subjetiva nuestra. Por tanto, podemos definirlo como, una sensación que seproduce en respuesta a la estimulación del ojo y de sus mecanismos nerviosos, por la energíaluminosa de ciertas longitudes de onda.El color es pues un hecho de la visión que resulta de las diferencias de percepciones del ojo adistintas longitudes de onda que componen lo que se denomina el "espectro" de luz blancareflejada en una hoja de papel. Estas ondas visibles son aquellas cuya longitud de onda estácomprendida entre los 400 y los 700 nanómetros; más allá de estos límites siguen existiendoradiaciones, pero ya no son percibidos por nuestra vista.En las artes gráficas tenemos dos grandes categorías con respecto al color, imagen en color eimagen en blanco y negro, en éstas últimas podemos diferenciar: - imágenes a pluma. -imágenes tramadas: mediante diferentes tipos de gris. Asimismo, las imágenes en color sepueden dividir en dos categorías: - colores planos: manchas uniformes de color. - degradados,también tramadas. El color es un elemento básico a la hora de elaborar un mensaje visual.Muchas veces, el color no es un simple atributo que recubre la forma de las cosas en busca de lafidelidad reproducida. A pesar de que, sin el color la forma permanece, con frecuencia el Mensajeses, precisamente, el Color, o lo que sólo puede expresarse por el Color.El color está presente en todos los aspectos de la identidad empresarial y de marca. En laidentidad, las empresas pueden hacer que el color sea el principal elemento de su identidadutilizando un único color o una paleta de colores como parte de su identidad visual. Si el color seemplea uniformemente en una serie de elementos de la identidad, se termina convirtiendo en larúbrica de la empresa.

d.CIRCULO CROMATICO.

El ojo humano puede distinguir entre 10.000 colores. Se pueden además emplear tres dimensionesfísicas del color para relacionar experiencias de percepción con propiedades materiales: saturación,brillantez y tono.El círculo cromático nos sirve para observar la organización básica y la interrelación de los colores.También lo podemos emplear como forma para hacer la selección de color que nos parezcaadecuada a nuestro diseño. Podemos encontrar diversos círculos de color, pero el que aquí vemosestá compuesto de 12 colores básicos.Dentro encontramos el negro, que se produce gracias a la mezcla de todos ellos.En este círculo cromático podemos encontrar:

•

los colores primarios:

rojo, azul y amarillo;

•

los secundarios:

verde, violeta y naranja;

•

y los terciarios:

rojo violáceo, rojo anaranjado, amarillo anaranjado, amarillo verdoso,azul verdoso y azul violáceo.

e.RGB (RED, GREEN, BUE) y CMY (CYAN, MAGENTA, YELLOW)

Los tonos secundarios se obtienen al mezclar partes iguales de dos primarios; los tonos terciariosse consiguen al mezclar partes iguales de un tono primario y de un secundario adyacente. Losprimarios son colores que se consideran absolutos y que no pueden crearse mediante la mezclade otros colores. Sin embargo, mezclar los primarios en diversas combinaciones crea un númeroinfinito de colores. Dependiendo de qué ámbito, podemos encontrar tres juegos de coloresprimarios:

√

Los artistas y diseñadores parten de un juego formado por el

rojo, el amarillo y el azul

.Mezclando pigmentos de éstos colores pueden obtenerse todos los demás tonos.

√

El segundo juego de primarios es el del

rojo, verde y el azul,

conocidos como

primariosaditivos

. Son los primarios de la luz y se utilizan en el campo de la ciencia o en laformación de imágenes de monitores. Si se mezclan en distintos tantos por ciento, formanotros colores y si lo hacen en cantidades iguales producen la luz blanca.

√

El tercer juego se compone de

magenta, amarillo y cyan.

Se tratan de los

primariossustractivos

y son los empleados por los impresores. En imprenta, la separación decolores se realiza utilizando filtros para restar luz de los primarios aditivos, con lo que seobtienen los colores de impresión por proceso sustractivo.

f.CONTRASTES.El tono:

Es el matiz del color, es decir el color en sí mismo, supone su cualidad cromática, es-simplemente- un sinónimo de color. Es la cualidad que define la mezcla de un color con blanco ynegro. Está relacionado con la longitud de onda de su radiación. Según su tonalidad se puededecir que un color es rojo, amarillo, verde... Aquí podemos hacer una división entre:

•

tonos cálidos (rojo, amarillo y anaranjados). Aquellos que asociamos con la luz solar, elfuego...

•

y tonos fríos (azul y verde). Los colores fríos son aquellos que asociamos con el agua, laluz de la luna ...Los términos "cálido" y "frío" se utilizan para calificar a aquellos tonos que connotan dichascualidades; éstos términos se designan por lo que denominamos "temperatura de color". Lasdiferencias entre los colores cálidos y los fríos pueden ser muy sutiles. Por ejemplo, el papelblanco puede parecer más cálido o más frío por una leve presencia de rojo o azul. Lo mismoocurre con el gris y el negro.

La brillantez:

Tiene que ver con la intensidad o el nivel de energía. Es la luminosidad de un color(la capacidad de reflejar el blanco), es decir, el brillo. Alude a la claridad u oscuridad de un tono.Es una condición variable, que puede alterar fundamentalmente la apariencia de un color. Laluminosidad puede variar añadiendo negro o blanco a un tono.En general, con los tonos puros que tienen un valor más luminoso (amarillo, naranja, verde) seconsiguen las mejores variantes claras, mientras que los tonos puros que tienen normalmente unvalor normalmente menos luminoso (rojo, azul, violeta) ofrecen las mejores variantes oscuras.

La saturación:

Está relacionada con la pureza cromática o falta de dilución con el blanco.Constituye la pureza del color respecto al gris, y depende de la cantidad de blanco presente.Cuanto más saturado está un color, más puro es y menos mezcla de gris posee