UNIVERSIDAD LAICA ELOY ALFARO DE MANAB

Facultad Ciencias Informticas

Curso Cuarto B

Estudiante Quiroz Snchez Josu Efran

Diseo desarrollo de software

Profesor Ing. Marcos Ayovi

Tema Diseo de pginas web

Ao Lectivo 2011 - 2012

Contenido
INTRODUCCIN ................................................................................................................................... 3 OBJETIVOS ........................................................................................................................................... 4 General ............................................................................................................................................ 4 Especfico......................................................................................................................................... 4 PGINA WEB ....................................................................................................................................... 5 QU ES UNA PGINA WEB?........................................................................................................... 5 DEFINICIN.................................................................................................................................. 5 DEFINICIN SEGN OTRO AUTOR: .................................................................................. 6 CARACTERSTICAS: .................................................................................................................. 7 TIPOS DE PAGINA WEB ............................................................................................................ 9 PGINAS WEB ESTTICAS.................................................................................................. 9 PAGINAS WEB ANIMADAS ................................................................................................... 9 DIFERENCIA ENTRE SITIO WEB Y PGINA WEB .............................................................. 9 PASOS QUE SE DEBEN SEGUIR PARA CREAR UN PAGINA WEB ............................. 10 ELEMENTOS A TOMAR EN CUENTA ............................................................................... 10 CONCLUSIONES ........................................................................................................................... 13 RECOMENDACIONES.................................................................................................................. 14 BIBLIOGRAFIA ............................................................................................................................... 15

INTRODUCCIN
Una pgina Web es un documento situado en una red informtica al que se accede mediante enlaces de hipertexto, y ste es aquel texto que contiene elementos a partir de los cuales se pueden acceder a otra informacin. Las pginas web hoy en da son una til herramienta para que los usuarios den a conocer sus servicios a las personas que le competan, dando mayores beneficios a los consumidores. El propsito de esta investigacin es recolectar informacin sobre lo relacionado al diseo de pginas web, para que despus de este trabajo estar fuertes en este tema. Acompanos en esta exploracin de conocimientos y descubre con nosotros estos temas interesantes. .

OBJETIVOS General
Investigar todo lo referente a diseo de pginas web.

Especfico
Documentar los conocimientos que investigaremos sobre pginas web. Dar a conocer los pasos que se requiere para disear una pgina web. Definir los costos de los dominios. Fundamentar los tipos de pginas web que existen en el mercado. Conocer la parte legal de lo correspondiente a poner una pgina en la web.

PGINA WEB
QU ES UNA PGINA WEB?
Pues eso de entrada podemos preguntarnos qu es una pgina web. Habran dos respuestas: para el internauta y para el diseador. Para el internauta una pgina WEB es una pantalla en su monitor que le muestra la informacin que va buscando y enlaces a otros sitios relacionados. Para el diseador una pgina WEB es un documento construido para mostrar informacin en la pantalla de un monitor, que contiene adems de la informacin una serie de instrucciones para indicar como se ha de mostrar esa informacin. Estas instrucciones se escriben siguiendo un lenguaje llamado HTML Como ves el diseador define la pgina web como algo ms completo y tcnico que el simple internauta. La pgina web se concreta en un documento con un nombre terminado con la extensin .htm o .html. Una serie de pginas web interconectas e interrelacionadas de alguna forma (el mismo tema, el mismo objetivo...) forman un sitio web, que habitualmente est almacenado en un servidor. DEFINICIN Una pgina web es el nombre de un documento o informacin electrnica adaptada para la World Wide Web y que puede ser accedida mediante un navegador para mostrarse en un monitor de computadora o dispositivo mvil. Esta informacin se encuentra generalmente en formato HTML o XHTML, y puede proporcionar navegacin a otras pginas web mediante enlaces de hipertexto. Las pginas web frecuentemente incluyen otros recursos como hojas de estilo en cascada, guiones (scripts) e imgenes digitales, entre otros.

Las pginas web pueden estar almacenadas en un equipo local o un servidor web remoto. El servidor web puede restringir el acceso nicamente para redes privadas, p. ej., en una intranet corporativa, o puede publicar las pginas en la World Wide Web. El acceso a las pginas web es realizado mediante su transferencia desde servidores utilizando el protocolo de transferencia de

hipertexto (HTTP).

DEFINICIN SEGN OTRO AUTOR:

Fuente de informacin compatible con la WWW y que puede ser accedida a travs de un navegador en internet. Por lo general las pginas web se presentan en formato que les da forma llamado HTML. Son documentos que soportan hipertexto. Las pginas web suelen estar disponibles en servidores web en internet. Generalmente mltiples pginas web en un mismo dominio constituyen un sitio web. Por lo general un sitio web tiene una pgina principal (el ndice que puede ser index.htm, index.php, index.asp) desde donde se enlazan otras pginas web del sitio formando una red. En un sitio pueden existir pginas web de acceso pblico y de acceso privado. El navegador web se encarga de solicitar una pgina web especfica a un servidor dependiendo de la direccin (URL). Esta peticin se realiza siguiendo el protocolo HTTP. Una pgina web puede estar constituida de texto esttico al que se le da formato con etiquetas HTML. O tambin puede armarse dinmicamente cada vez que se visita dependiendo de mltiples factores (como paso de parmetros, cookies, origen del visitante, PHP, ASP, etc), pero, por lo general, el servidor siempre responder en un formato HTML. Estas ltimas son llamadas pginas web dinmicas. Como se dijo anteriormente, las pginas web pueden ser visualizadas a travs de un navegador web como Internet Explorer, Netscape, Firefox, Opera, etc. Las pginas web pueden estar formadas por distintos elementos como: Texto hipervnculos, imgenes (generalmete formatos GIF, JPG y PNG), audio (M IDI, MP3 y WAV),Flash, Shockwave, grficos vectoriales (SVG), etc.

Tambin pueden poseer elementos no son visibles por el usuario amplan las posibilidades del HTML:

Scripts (generalmente JavaScript),

metatags,

Hojas

de

Estilo

(CSS),

etc.

Antiguamente diferentes navegadores a veces interpretaban de formas distintas una misma pgina web; incluso los webmasters deban adaptar los cdigos para uno u otro navegador web. Actualmente este problema casi no existe porque tanto diseadores web como desarrolladores de navegadores comenzaron a respetar los estndares para la creacin de pginas web. Estas reglas son creadas por el Consorcio World Wide Web (W3C) para HTML, CSS, XML, etc.

Las pginas web pueden hacerse desde cualquier editor de texto, aunque siempre ms sencillo usar los editores WYSIWYG, que son totalmente grficos como Dreamweaver o Frontpage, etc. (Ver Editores Web).

Con respecto a los buscadores de internet, una pgina web puede estar o no indexada. Esto determina si aparece o no en los resultados de bsqueda que hacen los usuarios en ese buscador. Cabe destacar que un sitio web puede estar indexado, pero no as todas las pginas web que pertenecen al mismo.

CARACTERSTICAS:
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. 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.

TIPOS DE PAGINA WEB PGINAS WEB ESTTICAS. Son las ms comunes y simples que
hay (como webprincipiantes.com). Son simples pginas hechas en HTML que muestran informacin. El que se llamen estticas no quiere decir que solo pueden tener texto y fotos, no. Tambin pueden tener videos, animaciones en flash (como banners) o imgenes animadas como las .gif.

PAGINAS WEB ANIMADAS. Es el clich que usan las pginas

hechas totalmente en FLASH. Flash es un programa que se usa para hacer animaciones. Los videos de youtube por ejemplo se muestran en flash. Las pginas de juegos online que hay por ah tambin estn llenas de juegos hechos con la tecnologa flash. As mismo hay quienes hacen pginas web totalmente en flash.

DIFERENCIA ENTRE SITIO WEB Y PGINA 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.

PASOS QUE SE DEBEN SEGUIR PARA CREAR UN PAGINA WEB

ELEMENTOS A TOMAR EN CUENTA A continuacin vamos a describir los componentes que debe tomar en cuenta a la hora de sacar nmeros: Obtencin del dominio (nombre del sitio). Servicios de alojamiento del sitio o pgina. Diseo propiamente dicho. Mantenimiento.

OBTENCIN DEL DOMINIO O NOMBRE:

Lo primero que hay que hacer es crear un nombre apropiado para nuestro sitio y verificar que est disponible. Lo importante aqu es destacar que una vez que tenemos el nombre seleccionado debemos registrar el dominio para que nos quede reservado. Los dominios ms recomendados son los .com por su universalidad y por ser la primera opcin que la mayora de la gente busca. Para Ecuador tambin e .ec y si el .com o el.es ya estn tomados, te quedan las opciones del .net, .info, .org, etc. El costo del registro de dominio es bastante econmico y, normalmente se hace por un ao, renovable. Los costos van a depender de la empresa que haga el trmite y pueden ir desde 45 dlares. Algunas empresas que ofrecen alojamiento pueden ofrecer un dominio gratis si s e contrata el alojamiento con ellos por un ao por lo menos. Recordamos que este dominio debe renovarse anualmente pues, en caso contrario, se podra perder.

SERVICIOS DE ALOJAMIENTO DEL SITIO

Una vez que tenemos el nombre del dominio comprado, debemos contratar el alojamiento de nuestro sitio. Es decir el "lugar" virtual en donde estar la informacin disponible para que nuestra Web se pueda ver desde cualquier parte del mundo. Como en el caso anterior hay muchas empresas que ofrecen este servicio, pero es importante estar con una que sea responsable y que nos garantice un tiempo mximo de disponibilidad. Es recomendable que esta tarea, seleccin de empresa de alojamiento, sea realizada con la ayuda de una persona experta. Hay que tener cuidado con las empresas que ofrecen precios muy baratos, pero que tienen una psima calidad de disponibilidad y servicio. De all la importancia de saber con quin contratamos. El costo del alojamiento depende de las facilidades y caractersticas que tenga el mismo, como por ejemplo, espacio de almacenamiento de informacin y la capacidad del trfico mensual. Sin embargo los costos pueden ir normalmente desde 5 a 95 $ al mes.

En promedio un alojamiento bsico para una micro o pequea empresa puede estar alrededor de 10 $ al mes. Otro costo adicional que normalmente existe es el de darse de alta, pero en todo caso es un pago que se hace slo una vez y que por lo general es menor de 30 $.

DISEO Y DESARROLLO DE UN SITIO WEB

Ms all de lo que vayamos a realizar con nuestro sitio Web, hoy en da es fundamental tener una pgina propia para estar presentes en la red. Es tan indispensable como lo puede ser un telfono fijo o un mvil. De entrada una tarjeta de la empresa con una direccin Web y un e-mail propio, mejora la imagen en forma automtica. El precio va a depender de lo que se quiera hacer con nuestra pgina.

PGINA WEB BSICA

Por ejemplo un sitio sencillo que permita hacernos visibles cuando alguien nos busca, que permita decir quines somos, que hacemos, cuales son nuestros productos y/o servicios, y cmo pueden los clientes comunicarse con nosotros, ya es suficiente como para justificar esa pequea inversin que puede marcar la diferencia.

Pgina Web exclusiva

Agregarle elementos de diseo grfico, animaciones, audio o video puede incrementar el precio, aunque la inversin sera razonable si vamos a obtener un beneficio. La cuestin es definir los objetivos de la pgina y los componentes que debe tener y en base a ello acordar un presupuesto apropiado. No hay mejor propaganda que estar en la red y si comparamos con otros medios de publicidad veremos que esta inversin es bastante econmica.

CONCLUSIONES He logrado comprender en que se basa el diseo de una pgina web.

Gracias a lo aprendido en este trabajo puedo

desarrollar un criterio

formado para recomendar que interfaz de pgina web que sera mejor para los diferentes sistemas. Aprend todo lo necesario que una persona necesita saber a momento de hablar de interfaz de pgina web.

RECOMENDACIONES
Utilizar lo lineamentos adecuados al momento de crear la interfaz de usuario. Usar colores adecuados de acuerdo a la necesidad de la interfaz de usuario. Tener en cuenta los tres modelos al momento de realizar la interfaz de usuario (programador, usuario, diseador)

BIBLIOGRAFIA

Barreto, A. (08 de diciembre de 2008). modelamiento de interfaz de usuario. Recuperado el 17 de Agosto de 2011, de http://www.dragonobscuro.com/archivos/multimedia/diu.pdf Lucas, P. (15 de noviembre de 2009). sofnet. Recuperado el 17 de Agosto de 2011, de http://ocw.uc3m.es/informatica/diseno-basado-en-componentes/apuntes/05Patrones_de_diseno.pdf Susana Parralez. (26 de julio de 2011). Recuperado el 17 de Agosto de 2011, de aprende GUI: http://www.dragon-obscuro.com/archivos/multimedia/diu.pdf Velez, P. (08 de enero de 2010). diseo de software. Recuperado el 17 de Agosto de 2011, de http://www.uv.es/rosado/sid/Capitulo6_HMI.pdf