UNACH

APUNTE DE PGINAS Y SITIOS WEB

Ing. Jorge Fernando Cruz P

INDICE
INDICE.........................................................................................................................................1 PGINA WEB............................................................................................................................. 2 ELEMENTOS DE UNA PGINA WEB ...................................................................................4 CARACTERSTICAS .................................................................................................................5 QU ES UN SITIO WEB? .......................................................................................................6 DIFERENCIA ENTRE SITIO WEB Y PGINA WEB .......................................................... 7
Ing. Jorge Fernando Cruz P.

ESTRUCTURA DE UNA PAGINA WEB ................................................................................7 PROGRAMA PARA CREAR PAGINAS WEB .......................................................................8
Ejemplos de Programas utilizados para Crear Sitios Web ....................................................................... 9

FASES DE DESARROLLO DE UNA WEB .............................................................................9 TEMA PARA CONSULTAR .................................................................................................. 10

COMO PUBLICAR UN SITIO WEB? ........................................................................................................ 10

Pgina

PGIN WEB

Ing. Jorge Fernando Cruz P.

Una pgina web es una fuente de informacin adaptada para la World Wide Web (WWW) y accesible mediante un navegador de Internet. sta informacin se presenta generalmente en formato HTML y puede contener hiperenlaces a otras pginas web, constituyendo la red enlazada de la World Wide Web. Las pginas web pueden ser cargadas de un ordenador o computador local o remoto, llamado Servidor Web, el cual servir de HOST. El servidor web puede restringir las pginas a una red privada, por ejemplo, una intranet, o puede publicar las pginas en el World Wide Web. Las pginas web son solicitadas y transferidas de los servidores usando el Protocolo de Transferencia de Hypertexto (HTTP - Hypertext Transfer Protocol). La accin del Servidor HOST de guardar la pgina web, se denomina HOSTING. Las pginas web pueden consistir en archivos de texto esttico, o se pueden leer una serie de archivos con cdigo que instruya al servidor cmo construir el HTML para cada pgina que es solicitada, a esto se le conoce como Pgina Web Dinmica. Una pgina Web est compuesta por uno o varios documentos html relacionados entre s mediante hipervnculos (enlaces). Adems estos documentos pueden contener otros elementos como pueden ser imgenes, sonidos, animaciones multimedia, aplicaciones A continuacin, se comentan ciertos conceptos relacionados con el diseo y/o desarrollo Web. Pgina Web: Sitio Web: HTML: Documento realizado en HTML y que es parte de un sitio Web. Aparte del HTML se pueden utilizar otros lenguajes complementarios como PHP, ASP, Javascript Pgina principal y sus otras pginas, grficos, documentos, multimedia y otros archivos asociados que se almacenan en un servidor Web o en el disco duro de un equipo. (Lenguaje de marcado de hipertexto) Lenguaje estndar de marcas Pgina

Hipervnculo:

empleado para documentos del World Wide Web. Al hipervnculo se le suele llamar enlace Web o en su versin anglosajona link. Un hipervnculo es una conexin de una pgina a otro destino como, por ejemplo, otra pgina o una ubicacin diferente en la misma pgina. El destino es con frecuencia otra pgina Web, pero tambin puede ser una imagen, una direccin de correo electrnico, un archivo (como por ejemplo, un archivo multimedia o un documento de Microsoft Office) o un programa. Un hipervnculo puede ser texto o una imagen.

Lenguaje de Lenguaje con el que est desarrollada una pgina Web programacin: Editor: Servidor: Ing. Jorge Fernando Cruz P. Cliente FTP: Hosting: Dominio: ISP: Programa utilizado para crear pginas Web sin la necesidad de tener que aprender el lenguaje. Ejemplos: Macro-media Dreamweaver., SharePoint Workspac Mquina conectada a Internet que entre otros servicios- ofrece albergue para pginas Web haciendo que estn accesibles desde cualquier punto de Internet. Programa que permite conectarse al servidor para publicar pginas Web. Hospedaje Web. Direccin Web asociada a una pgina Web. En el mbito del desarrollo de sitios web, se puede decir que un ISP es un proveedor de servicios para web. Los diferentes servicios que pueden ofrecer son: conexin a Internet, registro de dominio, hospedaje de sitios web, servicios de contadores de servicios, libros de visitas gratuitos, estadsticas para web, entre otros. (Universal Resource Location / Localizador de recursos universal) Cadena que proporciona la direccin de Internet de un sitio Web o un recurso del World Wide Web, junto con el protocolo mediante el cual se tiene acceso al sitio o al recurso. El tipo ms comn de direccin URL es http://, que proporciona la direccin de Internet de una pgina Web. Otros tipos de direccin URL son gopher://, que proporciona la direccin de Internet de un directorio Gopher, y ftp:// que proporciona la ubicacin de red de un recurso FTP. Ejemplos: http://www.mitecnologico.com , http://www.google.com Programas desarrollados con Java para mejorar la presentacin de las pginas Web que realizan animaciones, juegos e interaccin con el usuario. reas rectangulares que subdividen las ventanas de algunas pginas Web, cada una de las cuales contiene un documento de hipertexto independiente de los dems. Un webmaster es el encargado de crear, disear, estructurar, maquetar, publicar, promocionar y mantener un sitio web. Deben utilizarse nicamente para datos tabulados. Nunca para maquetar. Elemento grfico con forma rectangular, normalmente animado, cuyo contenido es publicidad Archivo grfico que se puede insertar en una pgina Web y mostrar

URL:

Applets: Frames (marcos): Webmaster Tablas Banner: Imagen:

Pgina

Propiedades:

en un explorador de Web. Existen diferentes formatos: GIF, JPEG, BMP, TIFF, WMF y PNG, entre otros. Caractersticas de un elemento del Web actual, como el ttulo y la direccin URL de un Web o el nombre y el valor inicial de un campo de formulario. Tambin puede especificar propiedades para elementos de pgina como tablas, grficos y elementos activos.

ELEMENTOS DE UN PGIN WEB

Ing. Jorge Fernando Cruz P.

Una pgina web tiene contenido que puede ser visto o escuchado por el usuario final. Estos elementos incluyen, pero no exclusivamente: 1. Texto. El texto editable se muestra en pantalla con alguna de las fuentes que el usuario tiene instaladas (a veces se utiliza una tecnologa de fuentes incrustadas, con lo que vemos en el monitor una fuente que realmente no poseemos, pero es poco frecuente.) El texto editable puede marcarse con el ratn o el teclado y copiarse a otra aplicacin, como el bloc de notas (muchos de los elementos textuales de las pginas, en especial los ttulos, botones de navegacin, etc. son realmente grficos, y su texto no es editable.) 2. Grficos. Son ficheros enlazados desde el fichero de la pgina propiamente dicho. Se puede hablar de dos formatos casi exclusivamente: GIF y JPG. Hablamos en detalle de este tema en la seccin de Grficos para la Web. 3. Formularios.

Pgina

Son una mezcla de texto y a veces grficos, que permiten enviar informacin por parte del visitante, por ejemplo, consultando un catlogo, solicitando ms informacin, comunicando su opinin, votando en una encuesta. Existen diferentes modelos de formulario; algunos simplemente se envan por correo electrnico; otros funcionan ejecutando un programa guin en el servidor. 4. Javascript. Es un tipo de lenguaje de programacin que se interpreta y ejecuta por parte del navegador; muy utilizado para diferentes efectos visuales, en especial los efectos de cambio de imagen al pasar el ratn por encima. Ampliamos la cuestin tambin en un artculo especfico, con abundantes enlaces. 5. Java. El cdigo Java est tambin escrito en un lenguaje de programacin independiente de plataforma (vlido para cualquier tipo de ordenador) que tambin permite diferentes efectos, interactividad... Tratamos tambin el tema en el mismo artculo en que ampliamos detalles sobre Javascript. 6. Shockwave/Flash . Interesantes imgenes fijas o animaciones interactivas de tipo vectorial, extremadamente compactas. Es preciso un plug-in para poder verlas en el navegador, aunque las versiones ms recientes lo incluyen y es gratis: se puede obtener, si hace falta, de Macromedia. Su pgina es un buen ejemplo del uso de este tipo de componentes para pginas web, cada vez ms utilizados. Existen otros componentes que, ms que formar parte de las pginas web, las acompaan y suelen guardarse al disco duro para despus verlos o ejecutarlos: Ficheros adjuntos: zip, rar, sit...Es frecuente que encontremos en muchos sitios programas o ficheros comprimidos en algn formato (normalmente el zip), para acelerar el tiempo de descarga por parte de los usuarios. Cada zip, rar o sit tiene en su interior uno o varios ficheros, que se extraen a la carpeta que indiquemos al programa que los abre y maneja. El programa ms utilizado es Winzip. Este es shareware, pero existen otras utilidades semejantes gratis; adems, windows a partir de la versin Me puede encargarse por s mismo de este tipo de formato de compresin. Podemos encontrarlos en cualquier servidor de programas. Se trata de un aadido imprescindible para navegar. Documentos PDF(Portable Document Format). Se utilizan tambin bastante.

Ing. Jorge Fernando Cruz P.

CRCTERISTICS
Una pgina web est compuesta principalmente por informacin (slo texto y/o mdulos multimedia) as como por hiperenlaces; adems puede contener o asociar datos de estilo para especificar cmo debe visualizarse, y tambin aplicaciones embebidas para as hacerla interactiva.

Pgina

Las pginas web son escritas en un lenguaje de marcado que provee la capacidad de manejar e insertar hiperenlaces, generalmente HTML. El contenido de la pgina puede ser predeterminado (pgina web esttica) o generado al momento de visualizarla o solicitarla a un servidor web (pgina web dinmica). Las pginas dinmicas que se generan al momento de la visualizacin, se especifican a travs de algn lenguaje interpretado, generalmente JavaScript, y la aplicacin encargada de visualizar el contenido es la que realmente debe generarlo. Las pginas dinmicas que se generan, al ser solicitadas, son creadas por una aplicacin en el servidor web que alberga las mismas. Respecto a la estructura de las pginas web, algunos organismos, en especial el W3C, suelen establecer directivas con la intencin de normalizar el diseo, y para as facilitar y simplificar la visualizacin e interpretacin del contenido. Una pgina web es en esencia una tarjeta de presentacin digital, ya sea para empresas, organizaciones, o personas, as como una tarjeta de presentacin de ideas y de informaciones. As mismo, la nueva tendencia orienta a que las pginas web no sean slo atractivas para los internautas, sino tambin optimizadas (preparadas) para los buscadores a travs del cdigo fuente. Forzar esta doble funcin puede, sin embargo, crear conflictos respecto de la calidad del contenido.

Ing. Jorge Fernando Cruz P.

QUE ES UN SITIO WEB?

Pgina En ingls website o web site, un sitio web es un sitio (localizacin) en la World Wide Web que contiene documentos (pginas web) organizados jerrquicamente. Cada documento (pgina web) contiene texto y o grficos que aparecen como informacin digital en la pantalla de un ordenador. Un sitio puede contener una combinacin de grficos, texto, audio, vdeo, y otros materiales dinmicos o estticos.

Cada sitio web tiene una pgina de inicio (en ingls Home Page), que es el primer documento que ve el usuario cuando entra en el sitio web poniendo el nombre del dominio de ese sitio web en un navegador. El sitio normalmente tiene otros documentos (pginas web) adicionales. Cada sitio pertenece y es gestionado y por un individuo, una compaa o una organizacin. Como medio, los sitios web son similares a las pelculas, a la televisin o a las revistas, en que tambin crean y manipulan imgenes digitales y texto, pero un sitio web es tambin un medio de comunicacin. La diferencia principal entre un sitio web y los medios tradicionales es que un sitio web est en una red de ordenadores (Internet) y est codificado de manera que permite que los usuarios interacten con l. Una vez en un sitio web, puedes realizar compras, bsquedas, enviar mensajes, y otras actividades interactivas.

Ing. Jorge Fernando Cruz P.

DIFERENCI ENTRE SITIO WEB Y PGIN WEB

A veces se utiliza errneamente el trmino pgina web para referirse a sitio web. Una pgina web es parte de un sitio web y es un nico archivo con un nombre de archivo asignado, mientras que un sitio web es un conjunto de archivos llamados pginas web. Si lo comparramos con un libro, un sitio web sera el libro entero y una pgina web de ese sitio web sera un captulo de ese libro. El ttulo del libro sera el nombre del dominio del sitio web. Un captulo, al igual que una pgina web, tiene un nombre que lo define. Decimos que sera un captulo y no una pgina del libro porque a menudo es necesario desplazarse hacia bajo en la pantalla para ver todo el contenido de una pgina web, al igual que en un libro te desplazas a travs de varias pginas para ver todo el contenido de un captulo. El ndice de los captulos del libro sera el equivalente al mapa del sitio web (sitemap en ingls).

ESTRUCTUR DE UN PGIN WEB

Generalmente las pginas web siguen una estructura para que tus visitantes no se pierdan y puedan encontrar lo que buscan fcilmente. Nota: aunque hayan estructuras armadas, t puedes crear tu pgina web como ms te guste Estructura bsica Las estructuras son necesarias para que tus visitantes no se mareen, nosotros a lo largo de este curso crearemos una pgina web con la siguiente estructura:

Cabecera: aqu ir el logo de tu pgina web.

Pgina

Men lateral: en este men pondrs los accesos a las secciones ms importantes. Contenido: toda pgina web debe tener un contenido especfico por seccin, nosotros lo pondremos aqu, as al cambiar de seccin cambiamos esta parte de la pgina y el resto lo dejamos todo igual. Pie de pgina: aqu irn los accesos tiles, a la pgina donde este nuestra direccin de email para que nos contacten, a la pgina de ayuda que crearemos o a lo que nos parezca ms til.

Ing. Jorge Fernando Cruz P.

PROGRM PR CRER PGINS WEB

Existen muchos programas para crear una pgina web, para todo tipo de necesidades, de pago y gratuitos, etc., etc. El mejor programa para crear una pgina web es Dreamweaver, el nico problema es que para utilizarlo debemos comprarlo y no es nada barato. Algunos editores muy conocidos son Dreamweaver, Go Live o NVU. Son software especializado en la creacin de sitios web, construidos para crear y modificar el cdigo HTML, CSS, PHP, etc. de tus pginas web. Tienen funciones muy tiles para un diseador web, como el editor grfico, que te permite crear webs con pocos conocimientos de HTML ya que se asemeja a un procesador de textos. Otras funciones muy interesantes de estos programas son el permitir remplazar cdigo de mltiples pginas a la vez, la comprobacin de errores de programacin en el cdigo, pre visualizar las pginas en diferentes navegadores, etc. En esta misma web hay un manual de Dreamweaver para que aprendas a manejarlo. Lo ms interesante sin duda para una persona que est aprendiendo a hacer webs es el editor grfico. T creas la pgina como si del Word se tratara; escribes el texto, los ttulos, pones las imgenes, eliges los colores, etc. y el programa te guarda la pgina con el cdigo HTML listo. Es lo que se llama What You See Is What You Get

Pgina

(WYSIWYG), lo que ves es lo que obtienes. Se les llama as con razn, puesto que utilizandolos no es necesario escribir nada de cdigo HTML para crear una pgina web. La desventaja que tienen estos programas es que si no sabes nada de HTML el diseo de tu pgina va a estar algo limitado, porque con el editor grfico se pueden hacer cosas bsicas o intermedias, pero para funciones ms complicadas es muy recomendable saber un poco de HTML.

Ejemplos de Programas utilizados para Crear Sitios Web

Adove Dreamweaver CS5.5: Es una de las Herramientas para Crear un Sitio Web muy popular y potente. Le permite disear y manipular el cdigo de un sitio, de forma rpida y sencilla. Se trata de un programa de escritorio. Se pueden generar plantilla CSS, y HTML de forma casi instantnea. Ing. Jorge Fernando Cruz P. ASP.NET: Es una de las Herramientas para Crear un Sitio Web propia de Microsoft Windows, que le permite crear potentes aplicaciones (Pginas Web, Intranet, Aplicaciones Web, etc.). Con el cdigo de programacin propio de Windows ASP.NET y el gestor de base de datos Microsoft SQL Server, se pueden crear aplicaciones monstruosas de lado del servidor. PHP: La competencia directa de ASP.NET. A diferencia de ASP.NET, PHP es un lenguaje de programacin web gratuito y de cdigo abierto. Le permite crear aplicaciones web dinmicas de lado del servidor, y en conjunto con MYSQL (base de datos de cdigo abierto) se pueden crear aplicaciones monstruosas al igual que ASP.NET. Flash Professional CS5.5: Es un software propio de la compaa Adobe (igual que Dreamweaver CS5.5), que le permite crear aplicaciones grficas y dinmicas. Para aquellos artistas que les encantan el diseo grfico y la animacin, Flash Professional CS5.5 es una buena opcin para el desarrollo de su sitio web. Con su potente Action Script, se pueden crear aplicaciones sorprendentes. Pero hay un pequeo problema (mejor dicho enorme), los buscadores no son muy amigos de Flash. Pgina

FSES DE DESRROLLO DE UN WEB

Para elegir las herramientas a utilizar, antes debemos identificar las fases del proceso que forman el ciclo de vida de un desarrollo web. Diseo: el diseo consiste en crear esbozos de la web final mediante una herramienta grfica, como Photoshop, GIMP o Inkscape.

 Maquetacin HTML/CSS: la maquetacin consiste en convertir los esbozos creados en la fase anterior en plantillas HTML, su respectiva hoja de estilos, y las imgenes usadas. Es posible saltarse la fase anterior para comenzar directamente con esta fase, dependiendo de si dominamos herramientas como Photoshop o no. Programacin cliente: la programacin cliente consiste bsicamente en Javascript. Una web puede no tener necesidad de hacer programacin cliente, como puede ser una pequea web corporativa con poca informacin esttica, o puede que requiera enormes esfuerzos en esta fase, como ocurre con los proyectos Web 2.0. Programacin servidor: en esta fase, que se desarrolla junto con la anterior, crearemos la aplicacin web en un lenguaje de servidor, como puede ser PHP, ASP .NET, Python, Perl, etc. Depuracin: esta fase enlaza la anterior con la siguiente, y es donde haremos las pruebas unitarias, aserciones, trazas, etc. Pruebas en local: en nuestro servidor local haremos todas las pruebas posibles. Ing. Jorge Fernando Cruz P. Subir ficheros al hosting: una vez nuestra web est completada y bien testeada en nuestro servidor local (desarrollo), la subiremos al servidor del hosting elegido (produccin). Dependiendo del hosting, podremos usar FTP, SFTP (SSH), WebDAV, o incluso Subversion. Yo aconsejo usar Subversion si as lo permite el servidor, por su comodidad y rapidez, adems de por su principal utilidad, que es la de control de versiones. Pruebas en hosting: realizaremos las ltimas pruebas en el servidor del hosting para comprobar que el cambio de servidor no ha afectado a nada. Para evitar problemas, nuestro servidor local debe tener exactamente la misma configuracin que el servidor del hosting.

TEM PR CONSULTR
COMO PUBLICAR UN SITIO WEB?

Pgina

10