Universidad Tecnológica de Querétaro

Universidad
Tecnológica de
Querétaro
76
Digitally signed by Universidad
Tecnológica de Querétaro
DN: cn=Universidad Tecnológica de
Querétaro, c=MX, o=Universidad
Tecnológica de Querétaro, ou=UTEQ,
[email protected]
Date: 2006.04.27 13:28:41 +02'00'
UNIVERSIDAD TECNOLÓGICA DE QUERÉTARO
Voluntad - Conocimiento - Servicio
LAIN DISEÑO DE PÁGINAS WEB
GAS PUBLICIDAD ALTERNATIVA
Reporte de Estadía para obtener el Título de
Técnico Superior Universitario en Telemática
SELENE ALEJANDRA JÁCOME HERNÁNDEZ
Santiago de Querétaro
Febrero 2006
AGRADECIMIENTOS
Este documento y mi carrera entera la dedico a personas tan
especiales como mi familia y amigos que impulsaron esta etapa de
mi vida; a profesores que a pesar de todo me apoyaron, y hasta se
tomaron la molestia de ayudarme, a pesar de que no es mi
vocación.
Estaré eternamente agradecida, ya que en esta etapa adquirí
conocimientos en el área de redes y telecomunicaciones que jamás
me interesaron en el pasado.
También quisiera agradecer a personas que recientemente entraron
en mi vida y que me impulsaron en la recta final de mi Reporte de
Estadía para cerrar este ciclo de la mejor manera posible, pues no
me dejaron caer, a pesar de mi desesperación por llegar a creer que
no podría lograrlo.
AGRADECIMIENOS
ÍNDICE
INTRODUCCIÓN
CAPÍTULO l LAIN DISEÑO DE PÁGINAS WEB
1.1 Gas publicidad alternativa
8
1.1.1 Giro de la empresa
8
1.1.2 Organigrama
11
1.2 Análisis de necesidades
11
1.2.1 Definición del proyecto
11
1.2.2 Objetivo
12
1.2.3 Justificación
13
1.3 Alternativas de solución
14
1.4 Elección de alternativa óptima
14
1.5 Plan de trabajo
15
1.5.1 Diagrama de Gantt
15
1.5.2 Especificaciones
16
CAPÍTULO ll DESARROLLO DEL PROYECTO
2.1 Organización del proyecto
21
2.1.1 Análisis de la información
21
2.1.2 Borradores de la página
21
2.1.3 Constatar la información
22
2.1.4 Programación y diseño
22
5
2.1.5 Diseño en html y sothink
22
2.1.6 Programación en php
23
2.1.7 Creación de tablas para base de datos
23
2.1.8 Verificación y última revisión
23
2.1.9 Subir la información a la red
24
2.1.10 Verificación de funcionamiento
24
2.2 Diseño de www.qroquis.com.mx
25
CAPÍTULO lll CONCLUSIONES
3.1 Dificultades
31
3.2 Logros obtenidos
33
3.3 Recomendaciones
34
3.4 Aportaciones
34
ANEXOS
GLOSARIO
MATERIAL DE CONSULTA
6
CAPÍTULO I
LAIN
DISEÑO DE
PÁGINAS WEB
7
1.1
Gas publicidad alternativa
1.1.1 Giro de la empresa
La empresa se encarga de:
-- Campañas de publicidad en medios masivos
-- Estrategia, contratación y manejo de medios
-- Diseño gráfico
-- Arquitectura de marca
-- Identidad corporativa
-- Diseño editorial
-- Diseño Web
En esta empresa se buscan:
Clientes apasionados por lo que hacen
Clientes dispuestos a aceptar nuevos retos y propuestas
Clientes cansados de seguir pagando por una estrategia y una
compañía sin personalidad ni futuro
Clientes que crean que cualquier meta se puede alcanzar
8
Clientes con los que cuenta la empresa
A continuación se presentarán algunas de los clientes o marcas que
manejan o con las cuales han trabajado:
Fig. 1.1 Clientes de la empresa
9
La propuesta de la empresa es principalmente:
Estamos abiertos a toda propuesta de trabajo que quiera
plantearnos.
Nuestra
especialidad
es
la
comunicación,
la
exploración de nuevos medios y sobre todo, mucho sentido común.
Nos gusta trabajar por proyecto y a base de resultados obtener el
próximo trabajo. Creemos que la creatividad se mide por resultados.
Si usted cree en estos parámetros y en nuestro trabajo, estamos
para servirle.
Contacto
Fig. 1.2 Imágenes del edificio en donde labora el equipo de gas publicidad alternativo
10
1.1.2 Organigrama
Luis Enrique Plascencia Alcántara
Rodrigo Jiménez Enciso
Dirección y Coordinación de
Proyectos
Dirección y Coordinación de
Proyectos
Verónica Lecuna
Diseño Gráfico
Shantal Donato
Diseño Gráfico
Magda Basaldua
Diseño Gráfico
Alejandra Jacome Hdz.
Diseño de Páginas Web
Fig. 1.3 Organigrama de la empresa
1.2
Análisis de necesidades
1.2.1 Definición del proyecto
La empresa gas publicidad alternativa ofrece un servicio de
desarrollo o diseño de páginas web, para lo cual subcontratan a
otras empresas o personal capacitado en esta área. Razón por la
cual la empresa inmobiliaria Editora de Bienes en Inmobiliarios S.A.
de C.V., solicitó los servicios de la empresa gas publicidad para el
diseño y desarrollo de una página web en la que se puedan realizar
búsquedas de los inmuebles que esta empresa ofrece.
11
Cabe mencionar que esta empresa cuenta con una revista publicada
semanalmente; sin embargo, Editora de Bienes en Inmobiliarios S.A.
de C.V. busca que el usuario cuente con información de sus
servicios desde su casa y además de tener la posibilidad de realizar
consultas de bienes raíces de una forma sencilla, rápida y eficiente
para adquirir lo que el cliente necesita.
Dicha página se realizará con las herramientas:
Html, php, una base de datos virtual en mysql.
Dream Weaver: se utilizará este software ya que permite
al usuario programar las páginas web, así como también
ver de manera más rápida la parte gráfica o ejecutar la
página a la par de la programación.
1.2.2 Objetivo
Desarrollar una página web a la empresa inmobiliario Editora de
Bienes en Inmobiliarios S.A. de C.V., requiere que el usuario tenga
la información de la empresa a la mano.
Lograr lo que otras páginas web de bienes inmobiliarios proyectan y
ofrecen, para así colocar a la página web que se realizará para la
empresa inmobiliaria como una muy buena opción para consultar
bienes inmobiliarios en Querétaro.
12
1.2.3 Justificación
La página web que se requiere diseñar, representa un acceso más
para la gente que desee consultar algún espacio diferente al papel
impreso; en este caso la revista qroquis.
La revista lleva por nombre qroquis, por lo tanto, la página web
tendrá el mismo nombre para que el usuario pueda identificar
rápidamente la página y la relación entre ambas sea más que obvia.
La página se diseñará para cubrir las necesidades del cliente en
busca de: consultar, comprar, vender o rentar propiedades o
inmuebles en el área de Querétaro, colocando a la empresa
inmobiliaria Editora de Bienes en Inmobiliarios S.A. de C.V. a la
vanguardia.
Los beneficios que se obtendrán para la empresa inmobiliaria
Editora de Bienes en Inmobiliarios S.A. de C.V. con el diseño de la
página web serán de gran ayuda para los clientes que buscan
nuevas alternativas en el área de propiedades o inmuebles, y para
personas que ya habían tenido la oportunidad de consultar la
revista, y que querían tener la información desde la comodidad de
su hogar, sin tener que ir al super de la esquina, ya que la revista
qroquis se puede obtener gratis en cualquier Super Q.
De esta manera y cumpliendo con los objetivos de la página web
realizada, la empresa gas publicidad alternativa no tendrá que
subcontratar personal capacitado en el área de programación para
cubrir la necesidad de la empresa inmobiliaria Editora de Bienes en
13
Inmobiliarios S.A. de C.V., en el área de diseño de páginas web,
cumpliendo así con la petición de la empresa inmobiliaria.
1.3
Alternativas de solución
Existen dos alternativas para realizar la página web:
Páginas web estáticas, es decir, diseñar páginas web sin
programación utilizando html y flash.
Páginas web dinámicas, en donde el usuario pueda
interactuar con la base de datos.
1.4
Elección de la alternativa óptima
Se eligió diseñar una página web programando en html, y sothink
para efectos de diseño, contar con bases de datos y tener una
mejor administración (altas, bajas, cambios) y una mejor y más
rápida búsqueda por parte del usuario (consultas).
Además, se otorgará la ventaja que no se dependerá de una
persona que sepa de sistemas para actualizar la información, lo
podrá hacer el administrador del proyecto con una clave para
disponer de las bases de datos del proyecto.
14
Se necesitan algunos elementos indispensables para consultar la
página, como por ejemplo contar con algún explorador, que
obviamente será el que muestre la página y contar con memoria
suficiente en la PC, es decir, no tener la PC muy saturada ya que el
proceso se efectuará de una manera más lenta.
Sin embargo, la página será diseñada de una manera tan sencilla
que los requisitos para su funcionamiento estarán por debajo del
estándar, para que el usuario o cliente tome el proyecto como una
mejor opción.
1.5 Plan de trabajo
1.5.1 Diagrama de Gantt
Actividades
Mayo
Junio
Julio
Agosto
MMJVLMMJVLMMJVLMMJVLMMJVLMMJVLMMJVLMMJVLMMJ VLMMJVLMMJVLMMJVLMMJVLMMJVLMMJVLMMJV
Anal
´ isisdeinformación
Borradoresdeprogramación
Constatarlainformación
Programaciónydiseño
DiseñoenhtmlySothink
Programaciónenphp
Creacióndetablasparabasededatos
Verificaciónyúltimarevisión
Subirlainformaciónalared
Verificacióndefuncionamiento
15
1.5.2 Especificaciones
Análisis de la información: con la recopilación de datos que
se adquirían por parte de la empresa gas Publicidad y de la
empresa Editora de Bienes en Inmobiliarios S.A. de C.V., se
podrá verificar si es totalmente alcanzable o si se tendrían que
realizar algunos cambios en el proyecto. El análisis es
primordial y servirá de base para todo lo que sigue
posteriormente, ya que en determinado caso que no se
recopilara la información más elemental, el proyecto se tendría
que estar regresando a esa fase.
Con el análisis del proyecto se podrá tener en cuenta las
necesidades inmediatas que requiere la página web, para que
los clientes o usuarios queden satisfechos con los servicios
que ofrezca el proyecto.
Borradores de programación: teniendo el análisis más
certero, entonces se podrá comenzar a plasmar las
posibles ideas que se tengan para el proyecto en cuanto a
programación se refiere, ya que gas publicidad alternativa
será quien brinde la parte de diseño gráfico al proyecto, es
decir, por medio de una de las diseñadoras con las que
cuenta gas publicidad alternativa, se efectuará el diseño
gráfico de la página web.
16
Teniendo conocimiento de esto, queda acoplar de manera
precisa el diseño gráfico y la programación de la página
web.
Constatar la información: una vez, contando con la
información y el o los borradores que se obtendrán del
análisis, lo más efectivo será comprobar que todos los
datos que fueron recopilados sean correctos, para así
comenzar a programar.
Diseño en html y sothink: el diseño más común y sencillo se
realizará en html; debido a que se desea realizar menús en
un diseñador de menús llamado sothink, con el cual se
agilizarán las cosas y se cumplirá con un requisito
indispensable en la empresa, es decir,
un excelente
diseño.
Programación en php: la programación que se realizará en
php, será la más compleja, o el que se encargue de la
manipulación de la o las tablas que se realizarán en la base
de datos, y de toda la demás programación como los
registros, las altas, bajas, cambios y consultas que se
efectuarán dentro de la página, y todas aquellas
operaciones que el usuario desee efectuar.
17
Creación de tablas para base de datos: para empezar, se
creará una base de datos provisional con un programa
llamado MySql para verificar las tablas dentro del
proyecto, ya que una vez que se tenga todo terminado se
tendrá que volver a hacer las tablas y dar de alta una base
de datos cuando esté en el servidor.
Las tablas que se crearán deberán cubrir las necesidades
del proyecto, ya que por medio de éstas se llevarán los
registros de todo aquello que el usuario dé de alta en la
base de datos, y que el proyecto requiere para el manejo
de los mismos.
Verificación y última revisión: teniendo todos los demás
puntos o procesos a favor, es decir, después de haber
creado las bases de datos se requiere comprobar su
efectividad, por lo cual se realizarán pruebas para saber si
en realidad hay conexión de la página con las bases de
datos diseñadas, por medio de un servidor virtual en
MySql.
18
Subir la información al servidor: ya que ésta es una parte
del proyecto, se debe subir la información a un servidor,
en un espacio que haya sido reservado para la página
web, y así ver la página funcionando, pero esta vez no de
manera virtual, sino de forma en la cual cualquier usuario
pueda verla navegando por internet.
Verificación de funcionamiento: después de haber tenido
éxito con el punto anterior, la siguiente y última face es
mostrar el proyecto final a las empresas gas publicidad
alternativa y a Editora de Bienes en Inmobiliarios S.A. de
C.V., para su aprobación.
19
CAPÍTULO II
DESARROLLO DEL
PROYECTO
20
2.1
2.1.1 Análisis de la información
Con base en la información que se adquirió por medio de gas
publicidad alternativa y de la empresa Editora de Bienes en
Inmobiliarios S.A. de C.V., se logró formar una excelente base para
así continuar con el borrador.
La información base recopilada es información elemental como
requisitos de la página: consultas, poder insertar, eliminar o
modificar información; para ser más exactos, manipular la
información de manera sencilla. Evitándose con esto retrocesos en
el proceso del proyecto.
2.1.2 Borradores de programación
Los borradores que se realizaron fueron de gran ayuda y una buena
base para realizar la programación de la página web, con más
certeza y confianza en lo que se realizó.
Sin embargo, los borradores que se propusieron no fueron los
mismos que ya después se programaron, porque el diseño que
proporcionó la empresa fue muy diferente; en cambio lo esencial
(como registro, altas, bajas, cambio y consultas) quedaron igual.
21
2.1.3 Constatar la información
La información que fue brindada por parte de las dos empresas fue
veraz y completa desde el principio, por lo cual, no se tuvo que
recurrir a ninguna consulta extra con alguna de las dos empresas.
2.1.4 Programación y diseño
Ya que la empresa proporcionó el diseño y como la programación se
desarrolló aparte, se tuvieron que acoplar ambos elementos, es
decir, utilizar el diseño gráfico de la página web y la programación
para obtener el resultado esperado. Sin embargo, no fue posible
dejar el diseño al 100% ya que algunos elementos no se pudieron
realizar dentro de la programación, por lo tanto, se decidió modificar
un poco el diseño sin que afectara demasiado a la imagen global de
la página web.1
2.1.5 Diseño en html y sothink
Se comenzó programando tan solo lo más esencial en html,
elaborando los menús en sothink; sin embargo, el menú lo diseñó
gas publicidad alternativa, por lo cual ya no se requirió de este
diseñador de menús.
1
Si se desea consultar parte de la programación y del diseño de la página web realizada, se
podrá observar en la página de anexos en el anexo A.
22
2.1.6 Programación en php
Al momento de estar programando en html se decidió, por
practicidad, realizar la programación de html y php en conjunto, ya
que es más rápido y sencillo que la programación de html y php por
separado, además facilita el trabajo al programador.
Se programó lo que por default iría en php, como la conexión a la
base de datos en MySql, las búsquedas, las altas, las bajas y los
cambios de una manera temporal al principio, esto con el objetivo de
realizar pruebas. Al final, los programas y la base de datos, ya
depurados, se subirán al servidor para establecerlos de forma
definitiva.
2.1.7 Creación de tablas para base de datos
Las tablas que se crearon cubrieron totalmente las necesidades del
proyecto; registro del usuario, inmuebles, y los tipos de operaciones
que el usuario desee realizar dentro de la página web.
2.1.8 Verificación y última revisión
Este punto (que es de suma importancia antes de subir la
información al servidor) se efectuó con éxito y con la aprobación del
asesor, así como también con la aprobación de las empresas las
cuales brindaron su apoyo en todo momento.
23
Se logró finalizar el proyecto, para así pasar a las últimas dos fases
del proyecto: subir el sitio web al servidor y, la fase final y más
importante, la verificación de funcionamiento de la página web.
2.1.9 Subir la información al servidor
Ya que en esta área no se tenía ningún conocimiento, se tuvo que
solicitar apoyo en cuanto a cómo subir una página web al servidor
realizando investigaciones y por medio de asesorías.
La empresa gas publicidad alternativa ya había tramitado un
contrato de web hosting, es decir un espacio en un servidor y un
dominio. La persona que tramitó todo esto fue el Ing. Roberto
Heinze de la empresa Sonidos Web, proporcionándo un nombre de
usuario y una clave para acceder al servidor que hospedará al sitio
web que lleva por nombre www.qroquis.com.mx.
2.1.10 Verificación de funcionamiento
Una vez que la página se subió a la red y que está a disposición de
cualquier tipo de usuario, la verificación de funcionamiento de la
página se puede constatar desde cualquier computadora conectada
a internet.
24
2.2 Diseño de www.qroquis.com.mx
d.
a.
e.
f.
b.
c.
g.
h.
Fig. 2.1 Página principal del proyecto
Se ha dividido la primera página en 7 partes:
a. El logo de la revista (qroquis) en donde se publican los
inmuebles que se están vendiendo o rentando; además dicha
publicación se puede conseguir fácilmente en cualquier Super
Q.
b. El eslogan de la revista, que como se podrá observar, también
se coloca en la página.
c. Esta sección es parte medular para el o los administradores,
ya que es en donde se coloca el nombre de usuario y la clave,
para que se puedan realizar las modificaciones, altas y bajas
pertinentes para los inmuebles.
Esta parte sólo podrá modificarse por personal autorizado.
25
d. ¿Quiénes somos? es el primer botón que se presenta en la
página, consta de la información básica de la empresa que
solicitó la elaboración de la página web con motivo de lanzar la
revista al público en general.2
e. En el tercer botón se muestra el tipo de inmueble; tiene como
segunda opción mostrar, ya sea todos los inmuebles
disponibles o mostrar inmuebles por clasificación3:
-Casas
-Departamentos
-Fraccionamientos
-Bodegas
-Locales comerciales
-Oficinas
-Terrenos
2
Enlace una referencia a la definición de la revista.
Los inmuebles por clasificación se definirán más adelante por parte de la empresa, ya que esa parte del
proyecto aún no se concreta en su totalidad por parte de la empresa.
3
26
Fig. 2.2 Página en donde se muestran los tipos de Inmuebles con los que cuenta
Editora de Bienes en Inmobiliarios S.A. de C.V.
Para efectos de bases de datos, con el botón de tipo de
operación se le piden datos al usuario, tales como:
- Nombre: si se tiene dos nombres, se colocan los dos.
- Apellido: en el cual, obviamente se colocan ambos
apellidos, paterno y materno.
- Dirección: se ingresa la dirección completa en la que se
puede encontrar al posible cliente.
- Teléfono: se ingresan tanto teléfonos de casa como
móviles, teléfono de la empresa.
- E_mail: se coloca el correo electrónico, ya sea individuales
o de la empresa.
27
- Comentarios: este espacio es libre para anotar opiniones
que pueden ayudar a mejorar el aspecto del sitio web, así
como también es un espacio donde el usuario o posible
cliente puede aprovechar para explicar o dar una definición
de lo que quiere vender o comprar y dar una referencia de
la compañía para la que trabaja, si es el caso de venta.
Si es que el usuario quiere consultar algo antes de tomar
alguna decisión importante, lo puede hacer por medio de
una búsqueda rápida con el botón que está en la parte
inferior del botón, tipo de operación llamado buscar.
Al término del llenado del formato, se da clic en el botón de
enviar, esta información irá directamente a la base de datos
de usuario
Nom
Ap
Dir
Tel
Mail
Fig. 2.3 Ejemplo de una tabla física en relación a la tabla que se creó para la página web.
El usuario que quiera utilizar la página para venta, también enviará
un correo a la página gas publicidad alternativa con los datos antes
mencionados; esto servirá para tomar una decisión por parte de los
coordinadores, Luis Enrique Plascencia Alcántara y Rodrigo
Jiménez Enciso, para subir, bajar o modificar la información
proporcionada por medio de la página y el correo.
28
Para realizar las acciones mencionadas se creará una página para
la empresa gas publicidad alternativa, por medio de la cual se van a
realizar altas, bajas o modificaciones de los inmuebles que el
usuario desea vender.
f. El botón de contacto contiene datos de la empresa que en
este caso realizó la página, es decir, contiene los datos de gas
publicidad alternativa, tales como la dirección, el código postal,
el estado, el teléfono de la empresa y correo electrónico de la
empresa.
Las búsquedas se realizarán de una manera más específica y
rápida que si se realizaran búsquedas por medio del botón
clasificados, por lo cual se colocará el tipo de operación y el tipo de
inmueble que se desea localizar.
g. Tipo de operación, ya sea venta o renta del inmueble deseado.
h. Tipo de inmuebles, se coloca ya sea departamento, casa,
bodega, etc.
29
CAPÍTULO IIl
CONCLUSIONES
30
3.1 Dificultades
Los obstáculos que se presentaron principalmente fueron:
- Software: ya que las computadoras utilizadas para el diseño
dentro de la empresa son iMac, y no todos los paquetes
son compatibles con Microsoft. Se tuvo que definir un
software compatible con ambas, por lo cual requirió de una
toma de decisiones por parte de los coordinadores, de la
diseñadora gráfica que colaboró en el proyecto y de una
decisión propia. Es importante conocer tanto la versión del
software, así como también la forma de instalación y si
cumple con los requisitos para el proyecto.
- División del trabajo: el diseño gráfico, o la parte gráfica se
realizó con el apoyo de una de las diseñadoras de la
empresa gas publicidad alternativa; además la empresa
maneja la imagen de varías compañías, la carga de trabajo
que tenía en ese momento impidió entregar el diseño a
tiempo. Debido a esto la programación de la página se fue
atrasando por lo que se determinó realizar una página piloto
o de prueba para la empresa que se pudiera entregar el
trabajo a tiempo.
Al final la empresa no aprobó el borrador y la página piloto,
manejándose el diseño que se había propuesto con
anterioridad.
31
- Programación: una de las dudas que surgió en la
realización del proyecto fue cómo hacer para que los
coordinadores pudiesen realizar los cambios, altas y bajas
de la información proporcionada por el usuario; por lo que
se necesitó de asesorías por parte del asesor de empresa,
así como también surgieron dudas de cómo subir la
información a la red, ya que sólo se tenían conocimientos
inconcretos y la información que anteriormente se subía era
al servidor de la carrera de Telemática por parte de la
Universidad.
- Factibilidad: se realizó el proyecto de dos maneras, esto se
debió a que al terminar el proyecto la primera vez (es decir
en forma de mapeo, para respetar al 100% el diseño que
fue otorgado por la empresa gas publicidad alternativa).
Algunos elementos del diseño de las páginas no eran
factibles por medio de esta técnica, por lo tanto, se tuvo que
volver a empezar y realizar todo por medio de php. Se
consideró sustituir elementos del diseño, como botones y
accesos, que de alguna manera no se iban a realizar en la
forma que se plantearon y que por razones de factibilidad y
eficacia no se realizaron de acuerdo con el formato.
32
Sin embargo, cumplen con la función que deben
desempeñar y con resultados más directos y sin tanta
redundancia o repetición entre elementos de las páginas,
como ocurría con el diseño anterior.
3.2 Logros obtenidos
Los resultados que se consiguieron son:
La realización de una página web en la que se pueden consultar
inmuebles, orientada a personas que quieren comprar, vender o
informarse acerca de propiedades ubicados en el estado de
Querétaro.
Esta página representa un acceso fácil, confiable, útil y sencillo,
pero que pueda ser manipulada en algunos aspectos por medio de
los coordinadores del proyecto, ya que la información que contiene
la página va a estar cambiando, de manera semanal o mensual,
mostrando nuevos inmuebles para los usuarios del sitio.
33
3.3 Recomendaciones
Dependiendo del éxito del proyecto qroquis, tanto de la revista y del
sitio, se podrían ampliar los horizontes o metas en general del
proyecto como: un trato más personalizado al cliente por medio de
las bases de datos, llevar un conteo del número de usuarios, llevar
otro conteo de las veces que determinado cliente realiza alguna
compra o venta, para tener una lista de clientes o usuarios
frecuentes.
3.4 Aportaciones
Lo que se buscó desde el principio, por medio del proyecto, fue
ampliar los conocimientos de diseño de páginas web, pero desde
otro punto de vista, como lo es el de la publicidad; por medio de la
empresa se operó con otro tipo de software que nunca se había
utilizado en el caso de las computadoras iMac, así como también se
manipuló dicho software.
Se realizó la conexión a Internet de una iMac y de una PC, con
software Microsoft, asignando direcciones IP, DNS y Gateway por lo
cual también se manejó un poco de redes.
34
ANEXOS
35
ANEXO A
Programación y diseño principal de la página web
Página principal:
<?php
session_register('error');
?>
<html>
<head>
<meta http-equiv="Content-Language" content="es-mx">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Pagina nueva 1</title>
<style>
BODY {
SCROLLBAR-FACE-COLOR: #ffffff; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; SCROLLBARSHADOW-COLOR: #006400; SCROLLBAR-3DLIGHT-COLOR: #006400; SCROLLBARARROW-COLOR: #006400; SCROLLBAR-TRACK-COLOR: #ffffff; SCROLLBARDARKSHADOW-COLOR: #006400;
}
36
</style>
<script language="JavaScript">
<!-function FP_preloadImgs() {//v1.0
var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }
}
function FP_swapImg() {//v1.0
var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2;
n<args.length;
n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
elm.$src=elm.src; elm.src=args[n+1]; } }
}
function FP_getObjectByID(id,o) {//v1.0
var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);
else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;
if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)
for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }
f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }
return null;
}
// -->
</script>
</head>
<body onload="FP_preloadImgs(/*url*/'imagenes/button22.jpg', /*url*/'imagenes/button23.jpg',
/*url*/'imagenes/button25.jpg', /*url*/'imagenes/button26.jpg', /*url*/'imagenes/button28.jpg',
/*url*/'imagenes/button29.jpg')">
<table border="0" width="100%" id="table1">
<tr>
<td>
<p align="center"> </p>
37
<p align="center"><a href="informacion.htm">
<img border="0" id="img7" src="imagenes/button21.jpg" height="40"
width="200" alt="¿Quienes somos?" fp-style="fp-btn: Glow Rectangle 6" fp-title="¿Quienes
somos?" onmouseover="FP_swapImg(1,0,/*id*/'img7',/*url*/'imagenes/button22.jpg')"
onmouseout="FP_swapImg(0,0,/*id*/'img7',/*url*/'imagenes/button21.jpg')"
onmousedown="FP_swapImg(1,0,/*id*/'img7',/*url*/'imagenes/button23.jpg')"
onmouseup="FP_swapImg(0,0,/*id*/'img7',/*url*/'imagenes/button22.jpg')"></a></p>
<p align="center"><a href="clasificados.html">
<img border="0" id="img8" src="imagenes/button24.jpg" height="40"
width="200" alt="Clasificados" fp-style="fp-btn: Glow Rectangle 6" fp-title="Clasificados"
onmouseover="FP_swapImg(1,0,/*id*/'img8',/*url*/'imagenes/button25.jpg')"
onmouseout="FP_swapImg(0,0,/*id*/'img8',/*url*/'imagenes/button24.jpg')"
onmousedown="FP_swapImg(1,0,/*id*/'img8',/*url*/'imagenes/button26.jpg')"
onmouseup="FP_swapImg(0,0,/*id*/'img8',/*url*/'imagenes/button25.jpg')"></a></p>
<p align="center"><a href="contacto.htm">
<img border="0" id="img9" src="imagenes/button27.jpg" height="40"
width="200" alt="Contacto" fp-style="fp-btn: Glow Rectangle 6" fp-title="Contacto"
onmouseover="FP_swapImg(1,0,/*id*/'img9',/*url*/'imagenes/button28.jpg')"
onmouseout="FP_swapImg(0,0,/*id*/'img9',/*url*/'imagenes/button27.jpg')"
onmousedown="FP_swapImg(1,0,/*id*/'img9',/*url*/'imagenes/button29.jpg')"
onmouseup="FP_swapImg(0,0,/*id*/'img9',/*url*/'imagenes/button28.jpg')"></a></p>
<p> </td>
<td width="474" valign="top">
<img border="0" src="imagenes/logo.png" align="right" width="437"
height="219"></td>
</tr>
</table>
<table border="0" width="762" id="table2" height="167">
<tr>
<td width="368">
<p align="center"><font face="Verdana">Búsquedas</font></td>
<td width="377">
<p align="center"><font face="Verdana">Administración</font></td>
</tr>
<tr>
<td width="368">
38
<form method="GET" action="clasificados.php">
<input type="hidden" name="limiteb" value=9>
<input type="hidden" name="limitea" value=0>
<p align="center"><font face="Verdana">Tipo de Operación
</font> 
<br>
<select size="1" name="operacion" style="color: #008000; font-weight:
bold; ">
<option value="venta">Venta</option>
<option value="renta">Renta</option>
</select></p>
<p align="center"><font face="Verdana">Tipo de Inmueble<br></font>
<select size="1" name="tipo" style="font-family:Verdana; color:#008000;
font-weight:bold" >
<option value="casa">Casas</option>
<option value="terreno">Terrenos</option>
<option value="bodega">Bodegas</option>
<option value="local">Locales Comerciales</option>
<option value="oficina">Oficinas</option>
<option value="departamento">Departamentos</option>
<option value="fraccionamiento">Fraccionamientos</option>
</select></p>
<p align="center">
<input type="submit" value="Buscar" style="border:1px solid #70B511;
color: #008000; background-color: #FFFFFF; font -family:Verdana; font-weight:bold"></td>
</form>
<td width="362" valign="top">
<form method="POST" action="login.php">
<p align="center"><font face="Verdana"><br>Nombre:
<input type="text" name="usuario" size="20" style="font-family: Verdana;
color: #70B511; font-weight: bold"><br><br>Clave:   
<input type="password" name="clave" size="20" style="font-family:
Verdana; color: #70B511; font-weight: bold"><br> </font></p>
<p align="center"><font face="Verdana"><br></font>
<input type="submit" value="Ingresar" style="border:1px solid #008000;
font-family: Verdana; color: #70B511; font -weight: bold; background-color: #FFFFFF"></p>
39
</form>
</td>
<td width="14"> </td>
</tr>
</table>
<p align="center"><font color="#FF0000"><b><?php if(isset($error)==1) echo "Error:
"Usuario No Registrado""; ?></b></font><br>
</p>
</body>
</html>
40
Página en donde se muestran los tipos de Inmuebles con los que
cuanta Editora de Bienes en Inmobiliarios S.A. de C.V. :
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoftcom:office:office" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv="Content-Language" content="es-mx">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<link rel="File-List" href="clasificados_archivos/filelist.xml">
<title>Qroquis</title>
<style>
BODY {
SCROLLBAR-FACE-COLOR: #ffffff; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; SCROLLBARSHADOW-COLOR: #006400; SCROLLBAR-3DLIGHT-COLOR: #006400; SCROLLBAR-
41
ARROW-COLOR: #006400; SCROLLBAR-TRACK-COLOR: #ffffff; SCROLLBARDARKSHADOW-COLOR: #006400;
}
</style>
<script language="JavaScript">
<!-function FP_preloadImgs() {//v1.0
var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }
}
function FP_swapImg() {//v1.0
var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2;
n<args.length;
n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
elm.$src=elm.src; elm.src=args[n+1]; } }
}
function FP_getObjectByID(id,o) {//v1.0
var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);
else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;
if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)
for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }
f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }
return null;
}
// -->
</script>
<!--[if !mso]>
<style>
v\:*
{ behavior: url(#default#VML) }
o\:*
{ behavior: url(#default#VML) }
.shape
{ behavior: url(#default#VML) }
</style>
<![endif]-->
42
<!--[if gte mso 9]>
<xml><o:shapedefaults v:ext="edit" spidmax="1027"/>
</xml><![endif]-->
</head>
<body onload="FP_preloadImgs(/*url*/'button5.jpg', /*url*/'button6.jpg', /*url*/'button8.jpg',
/*url*/'button9.jpg', /*url*/'buttonB.jpg', /*url*/'buttonC.jpg')" style="text-align: center">
<div align="center">
<table cellpadding="0" cellspacing="0" width="686" height="35">
<!-- MSTableType="layout" -->
<tr>
<td width="169" height="35" valign="top">
<p align="center">
<img border="0" src="imagenes/logotipo.JPG" width="143"
height="76"></td>
<td width="70" height="35"> </td>
<td width="145" height="35" valign="bottom">
<p align="center"><a href="#">
<img border="0" id="img1" src="button4.jpg" height="29" width="145"
alt="¿quiénes somos?" fp-style="fp-btn: Corporate 2; fp-font: Verdana; fp-font -color-normal:
#484848; fp-font -color-hover: #363636; fp-bgcolor: #008000" fp-title="¿quiénes somos?"
onmouseover="FP_swapImg(1,0,/*id*/'img1',/*url*/'button5.jpg')"
onmouseout="FP_swapImg(0,0,/*id*/'img1',/*url*/'button4.jpg')"
onmousedown="FP_swapImg(1,0,/*id*/'img1',/*url*/'button6.jpg')"
onmouseup="FP_swapImg(0,0,/*id*/'img1',/*url*/'button5.jpg')"></a></td>
<td width="158" height="35" valign="bottom">
<p align="center"><a href="#">
<img border="0" id="img4" src="button7.jpg" height="29" width="145"
alt="clasificados" fp-style="fp-btn: Corporate 2; fp-font: Verdana; fp-font-color-normal: #484848;
fp-font-color-hover: #363636; fp-bgcolor: #008000" fp-title="clasificados"
onmouseover="FP_swapImg(1,0,/*id*/'img4',/*url*/'button8.jpg')"
onmouseout="FP_swapImg(0,0,/*id*/'img4',/*url*/'button7.jpg')"
onmousedown="FP_swapImg(1,0,/*id*/'img4',/*url*/'button9.jpg')"
onmouseup="FP_swapImg(0,0,/*id*/'img4',/*url*/'button8.jpg')"></a></td>
<td width="143" height="35" valign="bottom"><a href="#">
43
<img border="0" id="img5" src="buttonA.jpg" height="29" width="145"
alt="contacto" fp-style="fp-btn: Corporate 2; fp-font: Verdana; fp-font-color-normal: #484848; fpfont-color-hover: #363636; fp-bgcolor: #008000" fp-title="contacto"
onmouseover="FP_swapImg(1,0,/*id*/'img5',/*url*/'buttonB.jpg')"
onmouseout="FP_swapImg(0,0,/*id*/'img5',/*url*/'buttonA.jpg')"
onmousedown="FP_swapImg(1,0,/*id*/'img5',/*url*/'buttonC.jpg')"
onmouseup="FP_swapImg(0,0,/*id*/'img5',/*url*/'buttonB.jpg')"></a></td>
</tr>
</table>
</div>
<hr noshade color="#008000" width="95%">
<center> <table border="0" width="724" id="table1" bgcolor="#DDDDDD">
<tr>
<td width="29">
<p align="left"> </td>
<td width="685">
<p align="left"><b><font face="Trebuchet MS" color="#6B6B6B">Tipo
de Inmueble</font></b></td>
</tr>
</table>
</center><font face="Trebuchet MS"><br>
</font>
<table border="0" width="686" cellspacing="0" cellpadding="0" id="table2" height="292">
<!-- MSTableType="nolayout" -->
<tr>
<td valign="top" colspan="2">
<p align="left"><font face="Trebuchet MS"><font size="5">
<font color="#008000">+</font> </font><b><font color="#6B6B6B"
size="5">Casas</font></b><br> 
<font size="2"> </font><font color="#6B6B6B"><b><font size="2">
</font> venta/renta</b></font></font></td>
<td valign="top" height="73" colspan="3">
<p align="left"><font face="Trebuchet MS"><font size="5">
<font color="#008000">+</font> </font><font size="5" color="#6B6B6B"><b>
Bodegas</b></font><font size="2"
color="#6B6B6B"><b><br></b></font> 
44
<font size="2"> </font><font color="#6B6B6B"><b><font size="2"> 
</font>
venta/renta</b></font></font></td>
</tr>
<tr>
<td valign="top" colspan="2">
<p align="left"><font face="Trebuchet MS"><font size="5">
<font color="#008000">+</font> </font><b><font color="#6B6B6B" size="5">
Departamentos</font><font size="2" color="#6B6B6B"><br></font></b> 
<font size="2"> </font><font color="#6B6B6B"><b><font size="2"> 
</font>
venta/renta</b></font></font></td>
<td valign="top" height="73" colspan="3"><font face="Trebuchet MS">
<font size="5"><font color="#008000">+</font> </font>
<font size="5" color="#6B6B6B"><b>Locales
Comerciales</b></font><br> 
<font size="2"> </font><font color="#6B6B6B"><b><font size="2"> 
</font>
venta/renta</b></font></font></td>
</tr>
<tr>
<td valign="top" colspan="2"><font face="Trebuchet MS"><font size="5">
<font color="#008000">+</font> </font><font size="5" color="#6B6B6B"><b>
Fraccionamientos</b></font><br>  <font size="2">   </font>
<font color="#6B6B6B"><b>venta/renta</b></font></font></td>
<td valign="top" height="73" colspan="3"><font face="Trebuchet MS">
<font size="5"><font color="#008000">+</font> </font>
<font size="5" color="#6B6B6B"><b>Oficinas</b></font><br> 
<font size="2"> </font><font color="#6B6B6B"><b><font size="2"> 
</font>
venta/renta</b></font></font></td>
</tr>
<tr>
<td width="205" valign="top"><font face="Trebuchet MS"><font size="5">
<font color="#008000">+</font> </font><font size="5" color="#6B6B6B"><b>
Terrenos</b></font><br>  <font size="2">   </font>
45
<font color="#6B6B6B"><b>venta/renta</b></font></font></td>
<td width="123" valign="top">
<p align="center">
<img border="0" src="imagenes/1.jpg" width="111" height="73"
align="left"></td>
<td height="73" width="122" valign="top">
<img border="0" src="imagenes/2.jpg" width="111" height="70"
align="left"></td>
<td height="73" width="118" valign="top">
<img border="0" src="imagenes/3.jpg" width="111" height="70"
align="left"></td>
<td height="73" width="115" valign="top">
<img border="0" src="imagenes/4.jpg" width="111" height="74"
align="right"></td>
</tr>
</table>
<p><!--[if gte vml 1]><v:roundrect id="_x0000_s1032"
alt="" style='position:absolute;left:3.75pt;top:4.5pt;width:577.5pt;height:384.75pt;
z-index:-1' arcsize="3052f" filled="f" fillcolor="green" strokecolor="#006400"/><![endif]--><![if
!vml]><span
style='mso-ignore:vglayout;position:absolute;z-index:-1;left:4px;top:5px;
width:772px;height:515px'><img width=772 height=515
src="clasificados_archivos/image001.gif" v:shapes="_x0000_s1032"></span><![endif]></p>
<p align="right"> </p>
</body>
</html>
46
GLOSARIO
47
Servidor virtual: en él podrá encontrar no sólo todas las
herramientas de programación y servidores de datos como SQL
Server y MySQL, además no es necesario tener Internet o contratar
un espacio en un servidor real para poder realizar consultas de la
base de datos de la página web.
IP: la dirección IP es el identificador de cada host dentro de su red
de redes. Cada host conectado a una red tiene una dirección IP
asignada, la cual debe ser distinta a todas las demás direcciones
que estén vigentes en ese momento en el conjunto de redes visibles
por el host. En el caso de Internet, no puede haber dos ordenadores
con 2 direcciones IP (públicas) iguales. Pero sí podríamos tener dos
ordenadores con la misma dirección IP siempre y cuando
pertenezcan a redes independientes entre sí (sin ningún camino
posible que las comunique).
Las direcciones IP están formadas por 4 bytes (32 bits). Se suelen
representar de la forma a.b.c.d donde cada una de estas letras es
un número comprendido entre el 0 y el 255. Por ejemplo, la
dirección IP del servidor de IBM (www.ibm.com) es 129.42.18.99.
48
DNS: el Domain Name System (DNS) es una base de datos
distribuida y jerárquica que almacena información asociada a
nombres de dominio en redes como internet. Aunque como base de
datos el DNS es capaz de asociar distintos tipos de información a
cada nombre, los usos más comunes son la asignación de nombres
de dominio a direcciones IP y la localización de los servidores de
correo electrónico de cada dominio.
Gateway: un Gateway es un servidor que proporciona a clientes
conectividad hacia el mundo exterior, estén o no dentro de una red
privada.
Hosting: el Hosting no es ni mas ni menos que un espacio (ofrecido
en megabites ) para almacenar nuestra web en su servidor .
HTML: acrónimo inglés de Hyper Text Markup Language (lenguaje
de marcación de hipertexto), es un lenguaje de marcas diseñado
para estructurar textos y presentarlos en forma de hipertexto, que es
el formato estándar de las páginas web. Gracias a Internet y a los
navegadores del tipo Explorer o Netscape, el HTML se ha
convertido en uno de los formatos más populares que existen para
la construcción de documentos.
49
Sothink: el programa nos propone una lista interesante de opciones
para configurar un menú, como pueden ser los distintos epígrafes,
los sub-apartados de cada uno y los enlaces a los que se debe
dirigir cada opción. Además, permite configurar el estilo de
presentación de los enlaces y la manera de desplegar el menú de
opciones.
PHP: originado inicialmente del nombre PHP Tools, o Personal
Home Page Tools, es un lenguaje de programación interpretado. Se
utiliza entre otras cosas para la programación de páginas web
activas, y se destaca por su capacidad de mezclarse con el código
HTML
MYSQL: es un gestor de Bases de Datos multiusuario que gestiona
bases de datos relacionales poniendo las tablas en ficheros
diferenciados.
Dream weaver: software para diseñar páginas web, permite mostrar
un documento de tres formas distintas: en la vista de Diseño, en la
vista de Código y en una vista dividida que muestra tanto el diseño
como el código. (Puede cambiar la vista en la que desea trabajar
seleccionando una vista en la barra de herramientas de
Dreamweaver.) De forma predeterminada, Dreamweaver muestra la
ventana de documento en la vista de Diseño.
50
MATERIAL DE
CONSULTA
51
- UNAV 2002.Manuales de consulta
/ http://www.unav.es/cti
/manuales.7 de Enero del 2006
- Wikipedia 2001. ¿Qué es PHP? / http://es.wikipedia.org/wiki/PHP
7 de Enero del 2006
- Wikipedia 2001.Wikipedia ¿Qué es DNS? / http://es.wikipedia.org/
wiki/DNS. 7 de Enero del 2006
- Wikipedia 2001. Wikipedia ¿Qué es un GATEWAY? / http://es.
wikipedia.org /wiki/GA. 7 de Enero del 2006
- Wikipedia 2000. Wikipedia ¿Qué es una IP? / http://es.wikipedia.
org/wiki/IP . 7 de Enero del 2006
- Wikipedia 1999. Protocolos TCP/IP /
http://www.saulo.net/pub
/tcpip/ . 7 de Enero del 2006
52