curso de diseño web - guia 1

18
Klenfort    Tecnología informática / www.klenfor t.com Curso de Diseño Web Guía 1 Instructor. Lcda. Vickarla Mata

Upload: nelmarys-hammoud

Post on 14-Oct-2015

8 views

Category:

Documents


0 download

TRANSCRIPT

  • Klenfort Tecnologa informtica / www.klenfort.com

    Curso de Diseo Web

    Gua 1 Instructor. Lcda. Vickarla Mata

  • Klenfort Tecnologa informtica / www.klenfort.com

    Algunas Definiciones Bsicas

    Aplicaciones Web

    Farr (2005) establece que una aplicacin Web es una aplicacin ubicada en un

    servidor Web que ofrece un determinado servicio, es accesible desde diversas redes

    telemticas, siendo la ms comn Internet (World Wide Web).

    Las pginas Web son el componente principal de estas aplicaciones y su principal

    protocolo de comunicacin es HTTP. Su contenido puede variar de forma automatizada

    dependiendo de fuentes internas o externas.

    Los usuarios usan las Aplicacin Web accediendo, mediante un navegador Web

    (Browser), a un Servidor a travs de Internet o de una intranet.

    Internet es un sistema mundial de redes de computadoras, un conjunto integrado

    por las diferentes redes a nivel mundial que puede accesar informacin de otra

    computadora y poder tener incluso comunicacin directa con otros usuarios en otras

    computadoras (Mejas, s.f).

    Word Wide Web (Red mundial de documentos HTML)

    La Web es un Sistema basado en mens que usa el modelo cliente servidor.

    Organiza los recursos de la Internet en todo el mundo en una serie de pginas de

    mens o pantallas, que aparecen en la computadora (Stair y Reynolds, s.f).

    La Word Wide Web es un Sistema de informacin distribuido basado en

    hipertexto. Los documentos almacenados en el sistema Web pueden ser de varios

    tipos, siendo el ms comn los documentos HTML.

    La WWW fue desarrollada por Tim Berners en el centro europeo de investigacin

    nuclear (CERN, European Center for Nuclear Research), Ginebra. Originalmente se

    concibi como un sistema de administracin interno de documentos. A partir de este

    sencillo inicio, la Word Wide Web ha crecido hasta convertirse en un conjunto de

    decenas de millares de computadoras de propiedad independiente que trabajan juntas

    como una sola en servicio de la Internet. Estas computadoras, llamadas servidores en

  • Klenfort Tecnologa informtica / www.klenfort.com

    la Web, estn esparcidas por todo el mundo y contienen todos los tipos imaginables de

    datos.

    Componentes Web

    Protocolo de transferencia de hipertexto (HTTP). Microsoft (2006) define HTTP

    como un Protocolo utilizado para transferir informacin en el World Wide Web. Una

    direccin HTTP es un tipo de Localizador de recursos universal o direccin URL. Este

    es un protocolo sin estado, es decir, que no almacenada ninguna informacin sobre

    conexiones anteriores. Al finalizar la transaccin todos los datos se pierden.

    Navegador Web (Web Browsers). Un navegador Web es una aplicacin que

    traduce documentos de hipertexto (documentos que integran imagen y sonido),

    comnmente descritos en HTML, desde servidores Web en todo el mundo. Estos

    archivos son recuperados mediante combinaciones de letras, nmeros y otros

    caracteres, denominadas URL.

    El URL indica la manera en que se acceden a los documentos HTTP, estos

    proporcionan un nombre global nico para cada documento al que se puede acceder

    desde los sistemas Web.

    Ejemplos: Internet Explorer, Mozilla Firefox, Google Chrome, Opera, entre otros.

    HTML (Hypertext Markup Language). HTML (Lenguaje para el Formato de

    Documentos de Hipertexto) es el lenguaje estndar para la descripcin de pginas

    Web. Los indicadores de HTML permiten al navegador o Browsers conocer como dar

    forma al texto: como titular, como una lista o como un cuerpo de texto. HTML tambin

    indica si debe insertarse imgenes, sonido y otros elementos.

    Pginas Web. Una pgina Web es un nico archivo escrito en un lenguaje de

    codificacin, comnmente en lenguaje HTML, con un nombre de archivo asignado. Las

    pginas Web pueden ser de dos tipos:

  • Klenfort Tecnologa informtica / www.klenfort.com

    Pgina Esttica. Pgina codificada en lenguaje HTML. No poseen

    conexin a base de datos. Este tipo de pgina es til cuando no se requiere de

    actualizaciones constantes.

    Pgina Dinmica. Se conoce con el nombre de pgina Web dinmica

    a aqulla, cuyo contenido se genera a partir de lo que un usuario introduce en un

    Web o formulario. Alguna de sus funciones bsicas son las siguientes:

    almacenar, mostrar y actualizar el contenido de una base de datos, generar

    pginas Web de contenido esttico y mejorar la interaccin entre el usuario y el

    sitio Web.

    Servidor Web. Un Servidor Web es un equipo mantenido por un administrador de

    sistema o un proveedor de servicios Internet (ISP), que localiza y responde a las

    solicitudes del navegador del usuario.

    Dominio

    Un dominio o nombre de dominio es el nombre que identifica un sitio web. Cada

    dominio tiene que ser nico en Internet. Por ejemplo, "www.masadelante.com" es el

    nombre de dominio de la pgina web de Masadelante. Un solo servidor web puede

    servir mltiples pginas web de mltiples dominios, pero un dominio slo puede apuntar

    a un servidor.

    Un dominio se compone normalmente de tres partes: en www.google.com, las tres

    w (www), el nombre de la organizacin (google) y el tipo de organizacin (com).

    Puesto que Internet se basa en direcciones IP, y no en nombres de dominio, cada

    servidor web requiere de un servidor de nombres de dominio (DNS) para traducir los

    nombres de los dominios a direcciones IP.

  • Klenfort Tecnologa informtica / www.klenfort.com

    Tipos de Organizacin ms comunes

    .aero, para la Industria del transporte areo

    .asia, la regin de Asia + Oceania.

    .biz, para los Negocios

    .cat, para pginas en cataln

    .com, para fines comerciales

    .coop, para Cooperativas

    .edu, para Educacin

    .eu, la regin de Europa

    .gov y .gob, para Gobierno y Entidades Pblicas

    .info, para Informacin

    .int, para Entidades Internacionales, organizaciones como la ONU

    .jobs, para Departamentos de empleo y recursos humanos en empresas

    .mil, para el Departamento de Defensa de los Estados Unidos (nico pas con

    dominio de primer nivel para el ejrcito)

    .mobi, para empresas de telefona mvil o servicios para mvil.

    .museum, para los Museos

    .name, para Nombres de personas

    .net, para Infraestructura de red

    .org, para organizaciones

    .pro, para profesionales con una titulacin universitaria.

    .tel, para servicios de comunicacin por internet

    .travel, para pginas de la industria de viajes y turismo.

    1 - QU ES HTML? HTML es el lenguaje que se emplea para el desarrollo de pginas de Internet. Este lenguaje est constituido de elementos que el navegador interpreta y las despliega en la pantalla de acuerdo a su objetivo. Existen elementos para disponer imgenes

  • Klenfort Tecnologa informtica / www.klenfort.com

    sobre una pgina, hipervnculos que nos permiten dirigirnos a otra pgina, listas, tablas para tabular datos, etc. Para poder crear una pgina HTML se requiere un simple editor de texto y un navegador de Internet (IExplorer, FireFox etc.).

    2 - Estructura interna de una pgina HTML. Las instrucciones HTML estn encerradas entre los caracteres: < y >. Muchos elementos HTML requieren una marca de comienzo y otra de finalizacin. Todo aquello que est fuera de las marcas del lenguaje se imprime en la pantalla (dentro del navegador). La estructura bsica de una pgina HTML es:

    Cuerpo de la pgina.

    Una pgina HTML es un archivo que generalmente tiene como extensin los caracteres html. Por ejemplo podemos llamar a nuestra primera pgina con el nombre: pagina1.html Si observamos toda pgina comienza con la marca: y finaliza con la marca: Los fines de marcas tienen el mismo nombre que el comienzo de marca, ms el caracter / Una pgina HTML tiene dos secciones muy bien definidas que son la cabecera:

  • Klenfort Tecnologa informtica / www.klenfort.com

    Y el cuerpo de la pgina:

    Cuerpo de la pgina.

    Todo el texto que dispongamos dentro del aparece dentro del navegador tal cual lo hayamos escrito. Todas las pginas tiene como mnimo esta estructura: cabecera y cuerpo. Otra cosa importante es que el lenguaje HTML no es sensible a maysculas y minsculas, es decir podemos escribirlo como ms nos guste, adems no requiere que dispongamos cada marca en una lnea (podramos inclusive escribir toda la pgina en una sola lnea! cosa que no conviene ya que somos nosotros quienes tendremos que modificarla en algn momento). Por ltimo deber resolver un problema, es decir confeccionar una pgina HTML. Recomiendo tipear las marcas HTML para aprenderlas de memoria. No es conveniente copiar y pegar. Cuando recuerde todas las marcas, podr copiar y pegar trozos de pginas HTML para agilizar el desarrollo.

    Cabecera La cabecera se emplea para facilitar informacin acerca del documento y est

    delimitada por

    prlogo

    Dentro de la cabecera podemos destacar el ttulo que indica el nombre del documento

    Ejemplo

    Bienvenido a nuestra gua rpida Cuerpo del documento ...

    Cuerpo

  • Klenfort Tecnologa informtica / www.klenfort.com

    El resto del documento residir entre las marcas y . Esta es la estructura mnima que debe poseer todo documento HTML:

    Bienvenido a la gua rpida Documento...

    A continuacin describiremos algunos elementos que pueden aparecer dentro del cuerpo.

    ETIQUETAS Y PROPIEDADES

    Etiquetas en el Head

    Ttulo Ttulo de la Pgina

    Actualiza la pagina cada ss segundos.

    Llama una pgina diferente a los ss segundos.

  • Klenfort Tecnologa informtica / www.klenfort.com

    SIZE="..."--Especifica el grosor de la lnea.

    COLOR="..."--Especifica el color de la lnea.(IE)

    WIDTH="..."--Especifica la longitud de la lnea como porcentaje de la pgina, ejemplo. WIDTH=70% .

    ALIGN="..."--Especifica el alineamiento: RIGHT, LEFT, o CENTER.

    NOSHADE--Muestra la lnea como slido.

    Texto

    Se utiliza para separar prrafos. Dado que para el HTML todo el texto es continuo, necesitamos algn mecanismo para indicar el principio y el fin de un prrafo. Las marcas inicial y final son y

    Salto de lnea.

    Nombre

    Hipervnculo, enlace a otra pgina o texto.

    Atributos:

    HREF="..."--Especifica la URL (ubicacin) al documento sealado.

    NAME="..."--Especifica el nombre del encadenamiento.

    onClick="-- Especifica un codigo script cunado se hace click con el mouse. onMouseOver="--Activa un codigo script cuando el mouse est sobre el link. REL="..."-- Especifica una relacin Directa. REV="..."--Especifica una relacin Inversa. TARGET="..."--Especifica la ventana donde se mostrar la pgina. El contenido puede ser el nombre de un Frame pre-definido o alguno como sigue: Valores: "_blank"--Carga la pgina en una ventana en blanco. "_parent"--Craga la pgina en la ventana del documento que lo llam.

  • Klenfort Tecnologa informtica / www.klenfort.com

    "_self"--Carga la pgina en la misma ventana. (Omisin) "_top"--Carga la pgina en toda la ventana, sin importar el frame. TITLE="..."--Especifica una leyenda que aparece cuando se ubica sobre el link, pero que aun no se ha seleccionado.

    Todo texto que empiece por ser ignorado por el browser, y por lo tanto no ser visible. Esto sirve al autor del documento para comentar su fichero fuente.

    .....< /BLINK> Hace el texto parapadeante.

    Reproduce un archivo de sonidos en el fondo cuando la pgina es cargada. Este archivo de sonido puede ser de tipo (.wav or .au) o midi (.mid).

    Atributos: SRC="..."-- indica el archivo de musica. LOOP="n"-- Indica el numero de veces que se repite. Un valor de "-1" o "INFINITE" indica una reproduccin sin interrupcin.

    ...< /MARQUEE> (IE)

    Fija un texto que se desplaza por la pantalla. Atributos: ALIGN="..."-- Especifica el alineaminto del texto. Loa valores posibles son "TOP", "MIDDLE", o "BOTTOM". BEHAVIOR="..."--Indica la forma de presentacin "SCROLL" (omisin), "SLIDE", o "ALTERNATE". "SLIDE" hace que el texto se desplaze afuera y adentro , "ALTERNATE" muestra el texto adelante y atras repetidamente.

    BGCOLOR="..."-- Fija el color de fondo.

    DIRECTION="..."--Indica la Direccin "LEFT" (omisin) o "RIGHT".

    HEIGHT="..."-- Fija la altura del texto en Pixels o %.

    HSPACE="n"--Fija el margen en espacios a la derecha e izquierda del texto.

  • Klenfort Tecnologa informtica / www.klenfort.com

    LOOP="n"-- Fija el numero de repeticiones. Un valor de "-1" o "INFINITE" repite indefinidamente. SCROLLAMOUNT="n"-- Fija el Numero de pixel entre cada display.

    SCROLLDELAY="n"--Indica el tiempo de espera para mostrar cada texto. VSPACE="n"-- Fija el margen superior e inferior del texto.

    WIDTH="..."-- Fija el ancho del Marquee en pixels o %.

    Atributos de Fondos y colores de texto

    Atributo Descripcin

    Este atributo permite escoger un color para el fondo de la pgina. Donde "rr" "gg" y "bb" son valores hexadecimales

    comprendidos entre 00 y FF que especifican el grado de saturacin de los

    colores rojo, verde y azul.

    Este atributo especifica una imagen residente en el servidor la cual se utilizar como fondo de pgina.

    Permite controlar el color del texto

    estndar, es decir, todo texto que no especifique un enlace.

    . LINK color del enlace que an no ha

    sido visitado

    ALINK color muy fugaz que aparece cuando se hace clic sobre el enlace

    VLINK es el color de un enlace que ya

    ha sido visitado

    Estilo Fsico o estilo de los caracteres

  • Klenfort Tecnologa informtica / www.klenfort.com

    Negrita hola! hola!

    Cursiva hola! hola!

    Subrayado hola! hola!

    Mquina de escribir hola! hola!

    Smbolos ms usados

    & &

    < <

    > >

    " "

    Espacio en blanco

    Otros smbolos

    SISTEMA DE NAVEGACIN

    Hiperenlace (tambin llamado enlace, vnculo, hipervnculo o liga) es un elemento de un documento electrnico que hace referencia a otro recurso, por ejemplo, otro documento o un punto especfico del mismo.

    Su funcionamiento es muy simple: el texto que queramos permita ir a otra pgina se marca de forma especial (ya veremos cmo). A partir de entonces, en la pgina aprecer resaltado (originalmente, mediante color azul y subrayado), y cuando el ratn se mueva sobre dicho texto, cambiara el puntero para indicar que ah tenemos un

  • Klenfort Tecnologa informtica / www.klenfort.com

    enlace. Al pulsar sobre l, instruimos al navegador para abrir la pgina a la que hace referencia.

    Nombre

    Rutas Absolutas: Las rutas absolutas proporcionan la URL completa del documento vinculado, incluido el protocolo que se debe usar (generalmente, http:// para pginas Web). Por ejemplo, http://www.macromedia.com/support/dreamweaver/contents.html es una ruta absoluta.

    Para vincular un documento situado en otro servidor, es preciso emplear una ruta absoluta. Aunque tambin puede utilizar vnculos de rutas absolutas para vnculos locales (de documentos del mismo sitio), se desaconseja utilizar este sistema, ya que si mueve el sitio a otro dominio se rompern todos los vnculos de las rutas absolutas locales. El uso de rutas relativas para vnculos locales tambin ofrece una mayor flexibilidad si necesita mover archivos dentro del sitio.

    TITLE Al igual que para el elemento IMG, tambin en el caso de los enlaces hipertextuales podemos definir un texto con un comentario que se activar cuando pasemos el ratn por encima del enlace. La sintaxis es: Visita HTMLpoint

    RUTAS Rutas Relativas: Las rutas relativas al documento son las ms adecuadas para utilizar con vnculos locales en la mayora de los sitios Web. Resultan particularmente tiles cuando el documento actual y el documento con el que se establece el vnculo se encuentran en la misma carpeta y es probable que vayan a permanecer juntos. Tambin puede utilizar una ruta relativa al documento para establecer un vnculo con un documento de otra carpeta, pero especificando la ruta a travs de la jerarqua de carpetas desde el documento actual hasta el vinculado. En una ruta relativa al documento se omite la parte de la URL absoluta que coincide en los documentos actual y vinculado y se indica nicamente la parte de la ruta que difiere. Por ejemplo, supongamos que tiene un sitio con la siguiente estructura:

  • Klenfort Tecnologa informtica / www.klenfort.com

    La creacin de vnculos desde contents.html hasta otros archivos se hace de la siguiente forma:

    Para establecer un vnculo desde contents.html hasta hours.html (ambos archivos se encuentran en la misma carpeta), el nombre de archivo ser la ruta relativa: hours.html.

    Para establecer un vnculo con tips.html (en la subcarpeta llamada resources), utilice la ruta relativa resources/tips.html.

    Cada barra diagonal (/) representa un nivel por debajo en la jerarqua de carpetas.

    Para establecer un vnculo con index.html (en la carpeta padre, un nivel por encima de contents.html), utilice la ruta relativa ../index.html.

    Cada ../ representa un nivel por encima en la jerarqua de carpetas.

    Para establecer un vnculo con catalog.html (en una subcarpeta distinta de la carpeta padre), utilice la ruta relativa ../products/catalog.html.

    ../ sube a la carpeta padre; products/ baja a la subcarpeta "products".

    Enlaces con partes de un mismo documento

    Podemos crear enlaces con puntos especficos de un mismo documento gracias al cdigo . En otras palabras, si con los enlaces examinados hasta

    ahora llegamos a un documento, con llegamos a una parte concreta del

    documento.

    A continuacin, figura el procedimiento que hay que seguir para crear enlaces con puntos internos del documento:

  • Klenfort Tecnologa informtica / www.klenfort.com

    Inserta la marca en el punto del documento al que quieres que se

    llegue (.ANCORA es un identificador del punto en el que el navegador deber visualizar la pgina. Obviamente puedes sustituirlo con otros trminos).

    En el enlace desde el que quieres llegar al punto del nuevo documento, inserta la siguiente sintaxis:

    Visita HTMLpoint

    La almohadilla (#) indica que se trata de un enlace interno. En este ejemplo se manda a un punto de la misma pgina, porque a la derecha de la almohadilla aparece el nombre del enlace interno, mientras que a su izquierda no hay nada escrito. Si quisiramos llegar a un punto concreto de un documento externo, la sintaxis correcta sera:

    Visita HTMLpoint

    Donde "nome_file.htm" es el nombre del documento al que hay que llegar, y "ancora" es el punto preciso de dicho documento.

    IMGENES

    A diferencia de muchos procesadores de texto (Ms Word, por ejemplo), los hipertextos no se "funden" con las imgenes que les sirven de acompaamiento grfico, sino que se limitan a invocarlas desde un lugar especfico de un sitio o en la Web. Dicho de otro modo, existe una divisin muy clara entre archivo .htm. Los documentos HTML se limitan a prever dentro de ellos un espacio en el que se insertan las imgenes solicitadas.

    La marca no necesita cierre y su sintaxis correcta es:

    donde SRC corresponde al ingls Search y es el recorrido del que el navegador saca la imagen (en este caso "imagen.gif"). Como hemos sealado, esta marca es nica en el sentido de que NO lleva como cierre el correspondiente . ALT

    El uso de texto para comentar las imgenes es una regla fundamental que debemos observar en la creacin de sitios Web por varias razones:

    Algunos navegadores podran estar impostados para no invocar las imgenes;

  • Klenfort Tecnologa informtica / www.klenfort.com

    Los navegadores textuales para invidentes no conseguiran interpretar las imgenes si carecieran de comentario;

    Es posible evitar pies de imagen incluyendo comentarios dentro de la imagen misma. En todos estos casos, el uso de comentarios resuelve el problema y permite optimizar la pgina web. La sintaxis correcta de los comentarios es la siguiente:

    WIDTH y HEIGHT

    Es posible definir la anchura y la altura de la imagen gracias a los atributos width y

    height, respectivamente:

    donde WIDTH=178 es la dimensin horizontal (ancho) de la imagen expresada en pxel, y HEIGHT=180 la dimensin vertical (alto). Mediante estos atributos podemos definir dimensiones diferentes de las que realmente tiene la imagen. En cualquier caso, es aconsejable insertar imgenes con su tamao efectivo sobre todo si estn en formato GIF, dado que, cuando se cambian las medidas, este formato pierde mucha calidad.

    Border

    Con el atributo BORDER podemos aplicar un borde a la imagen. Los valores son numricos y van expresados en pxel. Si impostamos el valor BORDER en 0, la imagen no va recuadrada. Cuando omitimos este atributo, el navegador no aplica ningn borde, pero si la imagen es tambin un enlace automticamente se le asignar un BORDER=1. La sintaxis correcta es:

    HSPACE y VSPACE

    Con estos dos atributos podemos establecer la distancia en pxel de la imagen a los objetos que se encuentran a los cuatro lados de la misma. HSPACE define la distancia de los lados derecho e izquierdo de la imagen a los objetos ms cercanos (texto, imgenes, apliques, etc.).

  • Klenfort Tecnologa informtica / www.klenfort.com

    VSPACE define la distancia de los lados superior e inferior de la imagen a los objetos ms cercanos (texto, imgenes, apliques, etc.). La sintaxis correcta es

    Estos atributos resultan tiles cuando queremos distanciar la imagen de los objetos ms cercanos. ALIGN

    El atributo ALIGN define la posicin de la imagen respecto al texto colocado inmediatamente antes o despus de la misma. Existen varias opciones para el atributo ALIGN:

    ALIGN=top: alinea la primera lnea de texto con la parte superior de la imagen.

    ALIGN=middle: alinea la primera lnea del texto con el centro de la imagen.

    ALIGN=bottom: alinea la primera lnea de texto con la parte inferior de la imagen.

    ALIGN=left: el texto se coloca a la derecha de la imagen empezando desde la parte superior de la misma.

    ALIGN=right: el texto se coloca a la izquierda de la imagen empezando desde la parte superior de la misma.

    Tablas

    Una tabla HTML puede ser considerada de manera simple como un grupo de filas donde cada una de ellas contiene un grupo de celdas. Las tablas, as como toda estructura en documentos HTML, son definidas usando tags. Una tabla simple puede ser insertada en un documento HTML usando tres tags: el tag HTML table (principal contenedor), el tag HTML tr (fila contenedora) y el tag HTML td (celda simple). Veamos un ejemplo: Celda 1 Celda 2 Celda 3 Celda 4

  • Klenfort Tecnologa informtica / www.klenfort.com

    Celda 5 Celda 6

    Celda 1 Celda 2 Celda 3

    Celda 4 Celda 5 Celda 6

    Nota: Los bordes en este ejemplo son creados utilizando el atributo "border" para el tag HTML table, el cual es slo utilizado para mejorar la visualizacin. Como los atributos de presentacin van siendo desaprobados con cada versin del estndar HTML, y dado que los mismos efectos pueden lograrse usando hojas de estilo, recomendamos evitar el uso de atributos de presentacin como "border". Ten en cuenta que las celdas vacas igual deben ser declaradas utilizando sus respectivos tags para lograr correctitud en el cdigo. Cuando el contenido de una celda debe ser vaco, deberas usar siempre un espacio en blanco () en su lugar. Esto har que tu pgina sea ms comatible, dado que ciertos navegadores tienen problemas al mostrar celdas vacas. Fuente: http://livedocs.adobe.com/dreamweaver/8_es/using/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=16_link3.htm http://www.htmlpoint.com/guida/html_09.htm