TITULO DEL PROYECTO

DIANA JUDITH JAIMES DELGADO

CORPORACIN INTERAMERICANA DE EDUCACIN SUPERIOR

TECNICO EN SISTEMAS E INFORMATICA
BUCARAMANGA, 2013

TITULO DEL PROYECTO

DIANA JUDITH JAIMES DELGADO

DIRECTOR
INGENIERO RAFAEL RICARDO MANTILLA GIZA

PROYECTO PRESENTADO COMO REQUISITO PARA OPTAR AL TTULO DE

TECNICO EN SISTEMAS E INFORMATICA

CORPORACIN INTERAMERICANA DE EDUCACIN SUPERIOR

TECNICO/TECNOLOGO/INTENIERO DE SISTEMAS
BUCARAMANGA, 2013

Resumen

Sin lugar a dudas, el HypertextMarkupLanguage es la base del internet como la

conocemos hoy en da. Es un lenguaje en constante evolucin, que va mejorando
versin a versin. Ahora con la recin publicada versin, la 5, veremos un gran
cambio en la manera de escribir el cdigo base de nuestras pginas web.
Este proyecto es el manejo y desarrollo de la nueva tendencia del desarrollo web
que aplica la innovacin del html5 que establece una serie de nuevos elementos
y atributos que reflejan el uso tpico de los sitios web modernos. Conociendo la
importancia que ha dado esta tendencia al mercado mundial

4
iv

Abstract

Undoubtedly, the Hypertext Markup Language is the basis of the Internet as we

know it today. It is an evolving language, it gets better version by version. Now
with the newly released version, the 5th, we will see a big change in the way you
write the code base of our web pages.
This project is the management and development of the new web development
trend applies html5 innovation which provides a number of new elements and
attributes that reflect typical usage on modern websites.
Knowingtheimportancegiventothe global markettrend

AGRADECIMIENTOS

Por los logros obtenidos y agradeciendo la dedicacin y empeo dedicado a nuestro

conocimiento, doy gracias a la Corporacin Interamericana de Educacin Superior, a
todas las directivas que hacen posible la coordinacin y realizacin de este proyecto;
de igual forma quiero agradcele al profesor Rafael Ricardo Mantilla por su ms sincera
colaboracin y por aportar todo su conocimiento para que esto fuera llevado de la
manera ms profesional posible.

DEDICATORIA

El resultado de este proyecto lo dedico especialmente a DIOS quien ha hecho posible

que todo se realizara satisfactoriamente, seguidamente dedico este logro a toda mi
familia, esposa y a mis padres quien me han estado apoyando en todo sentido para
crecer como profesional.

TABLA DE CONTENIDO
Pg.
1. INTRODUCCION

1.1.

DESCRIPCION DEL PROBLEMA

1.2.

ANTECEDENTES DEL PROBLEMA

1.3.

FORMULACION DEL PROBLEMA

1.4

JUSTIFICION

2
3
4

2. MARCOS DE REFERENCIA

2.1.

MARCO CONCEPTUAL

2.2.

MARCO GEOGRAFICO

2.3.

MARCO METODOLOGICO7

2.3.1. Navegadores Web

2.3.2. HTML5.

2.3.3. Hojas De Estilo CSS/CSS3

10

2.3.4. Biblioteca JavaScript Jquery

12

2.3.5. Panel De Administracin Cpanel

13

2.3.6. Sitio Web Publico y URL

14

3. DISEO

15

3.1.

AMBIENTE DE DESARROLLO

16

3.2.

UNIDADES, MODULOS, FUNCIONES, ETC.

18

3.3.

CONTENIDO

19

4. DESARROLLO

20

4.1.

EXPLORACION, NAVEGACION, MENU PRINCIPAL

4.2.

MANUAL DE USUARIO

22

24

5. MANUAL DEL DESARROLLADOR

25
8

6. CRONOGRAMA

31

7. PRESUPUESTO
8. CONCLUSIONES

32
32

REFERENCIAS 33

1. INTRODUCCION

1.1 DESCRIPCIN DEL PROBLEMA

La gente ubicada en Bucaramanga Santander y su rea metropolitana carece

de un sitio Web que permita una comunicacin

dinmica y eficiente para

poder resolver sus problemas tecnolgicos que le facilite obtener un servicio de

soporte tcnico y de desarrollo de pginas web para sus empresas u hogares.
El problema se hace notorio en los diferentes sectores de la comunidad que
tienden a expandir sus negocios sin el apoyo de una pgina web, ya que hoy en
da la gente califica el crecimiento de una empresa de acuerdo a una pgina
que ella posea. Por otro lado se analiza que las personas no encuentran un
medio rpido y sencillo para poder obtener ayuda tecnolgica tanto en
empresas como en hogares, ya que muchas de las empresas de soporte
tcnico no brindan el servicio en lnea por medio de una pgina web.
La problemtica se hace ms evidente cuando observamos que pequeas
empresas de alto rendimiento empiezan a decaer por falta de publicidad, pues
hoy en da la publicidad y el medio de ventas y comunicacin los ofrece en gran
parte un servicio en lnea por medio de una pgina web.

1.2ANTECEDENTES DEL PROBLEMA

En Colombia y en el mundo, se han diseado e implementado en el campo

tecnolgico y administrativo Sitios web en muchsimas empresas que les
permite una salida eficaz hacia otros mercados nacionales e internacionales.
Del sondeo result el ranking de ciudades en las que ms se registran
dominios de Internet. Bogot lidera la lista con un 57.62% seguida por Medelln
con un 12.18%. Ibagu, Villavicencio y Cartagena fueron las ciudades que ms
incrementaron su participacin entre el 2011 y el 2012 sobre el total de
registros con un 277%, 114% y 45% respectivamente.
Este comportamiento se debe en parte al aumento en la adopcin de
Internet por parte de las empresas gracias a programas como Vive
Digital, e iniciativas privadas que estn logrando una masificacin real
de Internet en el pas, destac Gerardo Aristizbal, Gerente de la
empresa.
Segn Aristizbal, MI.COM.CO sigue incentivando la adopcin de
Internet a travs de programas para nuevas empresas, y para
empresas sin presencia en Internet que incluyen hosting, correo
electrnico y facilidades para crear una pgina web a precios cada vez
ms econmicos y accesibles.
Los registros continan con un sostenido amento y se espera un
crecimiento similar en el 2013.

La empresa administra en este

momento ms de 90,000 dominios de Internet a travs de su

sitiowww.mi.com.co y por intermedio de sus aliados comerciales.

1.3FORMULACION DEL PROBLEMA

Cmo disear e implementar un medio de informacin que sirva para dar a

conocer los diferentes procesos de las empresas para su crecimiento
comercial, adems para que estas mismas empresas o personas naturales
encuentren una manera sencilla de solucionar sus problemas tecnolgicos?

1.4 JUSTIFICACIN

Muchas de las empresas que estn en actividad no cuentan con una pgina
web y no tienen un medio rpido y eficaz donde puedan adquirirla, y a su vez
que encuentren soporte para sus problemas tecnolgicos.
Para muchas empresas de Colombia, en especial de Bucaramanga y su rea
metropolitana es imprescindible adquirir un sitio web, ya que esto mejorara su
publicidad y niveles de venta y produccin.
El proyecto les permitir a muchas personas, pequeas, medianas y grandes
empresas acceder de una forma rpida y eficaz al servicio de diseo web,
instalacin de redes y soporte tcnico, de una forma fcil y veraz, ahorrndoles
tiempo y dinero, ya que estos servicios se prestaran si desean de forma virtual
para que sea ms rpida la atencin y servicio.
El diseo e implementacin de un sitio web en conclusin estar promoviendo
el desarrollo de toda empresa tanto econmico como tecnolgico, y tambin
promover el desarrollo tecnolgico a cualquier persona natural y la motivara a
crear empresa.

2. MARCOS DE REFERENCIA

2.1MARCO CONCEPTUAL
Blog.

En espaol tambin equivale bitcora.

Es un sitio Web

actualizado peridicamente que recoge cronolgicamente artculos o

textos de uno o varios autores, apareciendo primero el ms reciente,
donde el autor conserva siempre la libertad de dejar publicado lo que
crea pertinente. Es como un diario, pero publicado en la Web.
Chat: En espaol significa charla, tambin se conoce Cyber charla y en
ella varias personas de diferentes partes del mundo conversan en tiempo
real a travs de sus teclados micrfonos y cmaras. Es una herramienta
que funciona sobre el modelo cliente / servidor
Internet. Red de redes (www). Red mundial de la Informacin.
Hosting:El alojamiento web (en ingls web hosting) es el servicio que
provee a los usuarios de Internet un sistema para poder almacenar
informacin, imgenes, vdeo, o cualquier contenido accesible va web.
Notepad++: Es un editor de texto y de cdigo fuente libre con soporte
para varios lenguajes de programacin. De soporte nativo aMicrosoft
Windows.
Pgina Web:Una pgina web es un documento HTML/XHTML que es
accesible generalmente mediante el protocolo HTTP de Internet.

2.2MARCO GEOGRAFICO.

Actualmente, la mayora del tiempo que pasamos utilizando un equipo de

cmputo la pasamos usando un navegador web, ya sea navegando la web en
busca de informacin, comunicndonos con otros, realizando compras en lnea,
trabajando a travs de una aplicacin web o cualquier otra de la infinidad de
tareas que podemos realizar en la web.

Al considerar esto, es fcil concluir que el navegador web es una de las

aplicaciones ms importantes y necesarias que tenemos en nuestros equipos
de cmputo, es por esto que nos deberamos de tomar el tiempo necesario para
asegurar que usamos un buen navegador web.

Existen una gran variedad de navegadores web en el mercado, en mi opinin

personal, los mejores son gratuitos: Firefox, Chrome, Safari, Internet Explorer y
Opera. Cualquier de estos brinda una buena experiencia en la web, pero
siempre y cuando estn actualizados a la ltima versin disponible. Esto es an
ms importante en el caso de Internet Explorer.

Las versiones antiguas de Internet Explorer, tambin conocido como IE, en

especial IE6 y anteriores, no cumplen con las especificaciones y estndares
descritos por la W3C, un consorcio formado para establecer estndares y
especificaciones de tecnologas web, como son el HTML y el CSS, por lo que
los componentes web, ya sean paginas o scripts, desarrollados bajo estos
estndares no funcionaran bien en versiones antiguas de IE, y a su vez los
desarrollados para IE no funcionaran bien en los dems navegadores web
previamente mencionados.

2.3MARCO METODOLOGICO.

Tipo de investigacin

El tipo de investigacin utilizado para evidenciar la problemtica de las

empresas de Bucaramanga y su rea metropolitana en cuanto, es en primera
instancia Investigacin tecnolgica aplicada y en segundo lugar de corte social
constructivista.

Tipo de aplicativo diseado.

El tipo de aplicativo que se disea e implementa es: Sitio Web.

7

.2.3.1 NAVEGADORES WEB.

Actualmente, la mayora del tiempo que pasamos utilizando un equipo de

cmputo la pasamos usando un navegador web, ya sea navegando la web en
busca de informacin, comunicndonos con otros, realizando compras en lnea,
trabajando a travs de una aplicacin web o cualquier otra de la infinidad de
tareas que podemos realizar en la web.
Al considerar esto, es fcil concluir que el navegador web es una de las
aplicaciones ms importantes y necesarias que tenemos en nuestros equipos
de cmputo, es por esto que nos deberamos de tomar el tiempo necesario para
asegurar que usamos un buen navegador web.
Existen una gran variedad de navegadores web en el mercado, en mi opinin
personal, los mejores son gratuitos: Internet Explorer, Firefox, Chrome, Safari y
Opera. Cualquier de estos brinda una buena experiencia en la web, pero
siempre y cuando estn actualizados a la ltima versin disponible. Esto es an
ms importante en el caso de Internet Explorer.
Las versiones antiguas de Internet Explorer, tambin conocido como IE, en
especial IE6 y anteriores, no cumplen con las especificaciones y estndares

descritos por la W3C, un consorcio formado para establecer estndares y

especificaciones de tecnologas web, como son el HTML y el CSS, por lo que
los componentes web, ya sean paginas o scripts, desarrollados bajo estos
estndares no funcionaran bien en versiones antiguas de IE, y a su vez los
desarrollados para IE no funcionaran bien en los dems navegadores web
previamente mencionados.

2.3.2 HTML5.
HTML, siglas de HyperText Markup Language (lenguaje de marcado de
hipertexto), es el lenguaje de marcado predominante para la elaboracin de
pginas web. HTML se escribe en forma de etiquetas, rodeadas por
corchetes angulares (<,>).Tambin puede describir, hasta un cierto punto, la
apariencia de un documento. Cada atributo y contenido tiene ciertas
restricciones para que se considere vlido al documento HTML. Todas las
variantes de HTML abren las instrucciones con <; > y los cierran con </>. Por
ejemplo, <p>text </>.
HTML5 (HyperText Markup Language, versin 5) es la quinta revisin
importante del lenguaje bsico de la World Wide Web, HTML. Al no ser
reconocido en viejas versiones de navegadores por sus nuevas etiquetas, se le
recomienda al usuario comn actualizar a la versin ms nueva, para poder
disfrutar de todo el potencial que trae HTML5.

HTML5 establece una serie de nuevos elementos y atributos que reflejan el uso
tpico de los sitios web modernos. El HTML5 introduce nuevas formas de
escribir cdigo, as que la sintaxis entre ellos puede variar ligeramente. HTML5
establece una serie de nuevos elementos y atributos que reflejan el uso tpico
de los sitios web modernos. Algunos de ellos son tcnicamente similares a las
etiquetas <div> y <span>, pero tienen un significado semntico, como por
ejemplo <nav> (bloque de navegacin del sitio web) y <footer>. Otros
elementos proporcionan nuevas funcionalidades a travs de una interfaz
estandarizada, como los elementos <audio> y <video>. Mejoras en el elemento
<canvas>, capaz de renderizar en los navegadores ms importantes (Mozilla,
Chrome, Opera, Safari e IE) elementos 3D.
Algunos elementos de HTML 4.01 han quedado obsoletos, incluyendo
elementos puramente de presentacin, como <Font> y <center>, cuyos efectos
son manejados por el CSS. Tambin hay un renovado nfasis en la importancia
del scripting.

2.3.3 HOJAS DE ESTILO CSS/CSS3.

Las hojas de estilo css3 actualmente en definicin, nos ofrece una gran
variedad de opciones muy importantes para las necesidades del diseo web
actual. Desde opciones de sombreado y redondeado, hasta funciones
avanzadas de movimiento y transformacin como las siguientes.
10

1) El text-shadow propiedad se utiliza de la siguiente manera:

-text-shadow: 2px 2px 2px # 000;
Esto produce el siguiente texto con una sombra 2px derecha y debajo del texto,
lo que desdibuja por 2px:
2)El margin establece todas las propiedades de margen en una
declaracin. Esta propiedad puede tener de uno a cuatro valores.
-margin: 0.25em auto;
3) El min-height establece la altura mnima de un elemento.
La propiedad min-height no incluye relleno, bordes o mrgenes.
- min-height:100px;
4) El overflow indica qu sucede si el contenido desborda la caja de un
elemento.
- overflow:scroll;
5) backgroundestablece todas las propiedades de fondo en una declaracin.
Las propiedades que se pueden establecer son: background-color, backgroundposition, fondo grande, background-repeat, fondo de origen estadounidense,
fondo, clip, background-attachment y background-image.
-background: #00ff00 url('smiley.gif')
6) El padding establece todas las propiedades de relleno en una
declaracin. Esta propiedad puede tener de uno a cuatro valores.
-padding: 5px 10px 15px 20px;
o

relleno superior es 10px

relleno derecho es 5px

relleno de fondo es 15px

11

margen izquierdo es 20px

7) El font-family puede tener varios nombres de fuente como un sistema de

"reserva". Si el navegador no es compatible con la primera fuente, trata la
siguiente fuente.
- font-family:"Times New Roman;
8)border-radius es una propiedad que le permite agregar bordes redondeados a
los elementos.
- border:2pxsolid;
border-radius:25px;

2.3.5 PANEL DE ADMINISTRACION CPANEL.

El cPanel es una herramienta de administracin basado en tecnologas web

para administrar sitios de manera fcil, con una interfaz limpia. A cPanel se
accede por los puertos 2082 y 2083 (para versiones de SSL). La autenticacin
es por HTTP o una pgina de ingreso.
cPanel entrega un gran nivel de control al usuario individual, mientras se
mantiene la seguridad. Aunque el administrador de sistema puede desactivar
cualquier caracterstica para cada cliente en cualquier momento, el usuario
puede usar cualquier elemento que se encuentre disponible.

SSH Access - cPanel tiene integrado un applet Java que permite una
conexin directa con el servidor va SSH. Se encuentra desactivado en la
12

mayora de los sitios debido a que es un riesgo para la seguridad del

servidor.
Crontab - cPanel provee una interfaz para el manejo de las listas de

tareas.
OpenPGPSupport
CGI Scripts -Autoinstala varios scripts para cualquier sitio webPermite evitar el acceso a direcciones IP especficas
Aunque hay otros Control Panel, cPanel se distingue por su facilidad
para realizar respaldos completos o parciales (algunos proveedores de
host no dan derechos para restaurar respaldos )

2.3.6SITIO WEB PUBLICO Y URL.

http://www.sanandresantander.com/
San Andrs es un municipio del departamento de Santander, Colombia, forma
parte de la provincia de Garca Rovira.

13

3. DISEO.

HS
IA
SN
T
OA
R
RN
N
ID
AR
E
S
(
S
)

14

3.1 AMBIENTE DE DESARROLLO.

Tabla 1. Tipo de aplicativo diseado Sitio Web

Tipo de aplicativo

Sitio Web

Herramienta

Notepad++ - WOW Slider

Dar

conocer

la

historia

del

municipio, su geografa, sus sitios

Utilidad

Usuarios

tursticos entre otros.

Todos

El tipo de herramienta que se utiliza para el diseo e implementacin del sitio

Web es la herramienta Notepad++ y WOW Slider.

15

 Herramienta Informtica

En lo referente al diseo de un sitio web o pgina web, se pueden utilizar

herramientas Notepad++, dreamweaver, flash, photoshop y fireworks. Aca
utilizamos Notepad++ y WOW Slider.

Tabla 2. Matriz de identificacin de herramienta software utilizada

Notepad++

Nombre de la Herramienta

Notepad++
V 6.5.1

Versin

Fabricante

DON HO
Libre

Tipo de Licenciamiento

Descripcin de funciones utilizadas Editor de texto, editor de cdigo

en la elaboracin del aplicativo.
fuente.

Tabla 3.

Matriz de identificacin de herramienta software

WOW Slider
16

Nombre de la Herramienta

wowslider-win-setup.zip

Versin

12.0.4

Fabricante

Adobe Systems

Tipo de Licenciamiento

Adobe CLUF

Descripcin de funciones utilizadas Galera de imgenes.

en la elaboracin del aplicativo.

3.2. UNIDADES, MODULOS, PROCEDIMIENTOS, FUNCIONES, ETC.

HTML5 aspectos generales

Etiquetas (tags)
Hojas de estilos (CSS)
Estructura bsica y semntica de un documento html
Ttulos y metadatos
Parrafos y saltos de lnea
Deteccin de los caracteres
Etiquetas html5 y nueva semntica en su estructural:
article
aside
footer
header
nav
section

17

Los nuevos elementos de HTML5, y su estructuracin.

Nueva semntica
Elementos estructurales
Elementos estructurales complementarios
Elementos semnticos en lnea
Multimedia y multimedios
Elemento canvas.

Recursos:
Editor (dreamweaver, notepad plus ++, sublime text 2, etc).
Phoptoshop, corel draw, mspaint, etc.
Elementos multimedia personalizados
Hosting y cpanel.
Documento base
Video tutorial

3.3. CONTENIDO.

La temtica tratada en el sitio web es relacionada a la informtica y sistemas

tecnolgicos, hablando del diseo de pginas web, del soporte de instalaciones
de redes cableadas y wifi, del soporte para mantenimiento preventivo y
correctivo de computadores y el servicio de atencin en lnea para cualquier
problema informtico. Aparte de eso el contenido de la pgina habla de la
empresa square-si dando a conocer sus valores, su misin y su visin.

18

4. DESARROLLO.

19

20

4.1. EXPLORACION, NAVEGACION, MENU PRINCIPAL.

La pagina principal muestra un men con varios enlaces, el cual se organizan

de la siguiente manera.

Inicio: Muestra un resumen general de los servicios como son el diseo

de paginas web, soporte de redes y mantenimiento de computadores.

Empresa: Aca desprenden dos enlaces relacionados con la empresa.

1. Quienes somos: En este enlace se menciona los valores de la
empresa y el contacto humano y administrativo que existe entre la
empresa y el cliente.

21

2. Nuestra Gente: En este enlace se menciona la misin de la

empresa y la calidad humana.

Servicios: Ac desprenden tres enlaces relacionados con los servicios

que la empresa brinda.
1. Diseo: En este enlace se habla del servicio de diseo de
pginas web, de los diferentes paquetes que la empresa brida a
cada tipo de persona o empresa.
2. Redes: En este enlace se muestra el servicio de soporte de redes
y la tecnologa que utiliza la empresa para facilitarlo.
3. Mantenimiento: En este enlace se menciona todo acerca del
servicio de mantenimiento de computadores, tanto correctivo
como preventivo.

Contctenos: Este enlace lo llevara al formulario con el cual se podrn

dejar todas las preguntas e inquietudes para que alguien encargado de la
empresa le facilite una solucin inmediata.

22

4.2. MANUAL DE USUARIO

El entorno de la pgina tiene un manejo sencillo, y el utilizar lo nuevo de html5

facilita la interaccin de varios enlaces en la pgina principal.

Encabezado: En esta parte tendremos el slider que es la animacin de

imgenes relacionadas con la empresa, y el men donde se encuentra el
inicio, empresa, servicios y contctenos.

Cuerpo: Tendremos dos casillas, en la casilla izquierda veremos un

cmodo reproductor multimedia que contiene una meloda para
acompaar la visita de la pgina, tambin encontraremos la informacin
de los enlaces correspondientes al men y es donde se encontrara el
formulario al dar clic en el enlace contctenos. En la casilla derecha
aparecern unas imgenes con relacin a la empresa, estticas y sin
enlace mostrando al final de ella un video que se puede apreciar sin salir
del sitio.

Pie de pgina: En la parte final veremos una breve informacin de la

empresa, posterior de unas imgenes de las empresas que respaldan la
empresa.

23

5. MANUAL DEL DESARROLLADOR.

CODIGO HTML5.
<!DOCTYPE html>
<html lang="es">
<head>
<title>EstructuraB&aacute;sicaSem&aacute;ntica en HTML5 y CSS3 </title>
<meta charset="iso-8859-1" />
<meta name="description" content="Estructura
B&aacute;sicaSem&aacute;ntica en HTML5 y CSS3 con responsivedesing" />
<link rel="stylesheet" href="css/estilos1.css" />
<link href=
'http://www.square-si.com/favicon.ico' rel='shortcut icon' type='image/xicon'/>
<br>
<link href=
'http://www.square-si.com/favicon.ico' rel='icon' type='image/x-icon'/>
<link rel="stylesheet" type="text/css" href="jquery/engine1/style.css" />
<script type="text/javascript" src="jquery/engine1/jquery.js"></script>
</head>
<body>
<h1>Estructura Sem&aacute;ntica en HTML5 </h1>
<header>
<div id="wowslider-container1">
<div class="ws_images"><ul>

24

<li><imgsrc="jquery/data1/images/diseo.jpg" alt="diseo" title="diseo"

id="wows1_0"/></li>
<li><imgsrc="jquery/data1/images/mantenimiento.jpg" alt="mantenimiento"
title="mantenimiento" id="wows1_1"/>MANTENIMIENTO DE REDES Y
COMPUTADORAS</li>
<li><imgsrc="jquery/data1/images/redes.jpg" alt="redes" title="redes"
id="wows1_2"/></li>
<li><imgsrc="jquery/data1/images/fon1.jpg" alt="fon1" title="fon1" id="wows1_3"/></li>
</ul></div>
<div class="ws_bullets"><div>
<a href="#" title="diseo"><imgsrc="jquery/data1/tooltips/diseo.jpg" alt="diseo"/>1</a>
<a href="#" title="mantenimiento"><imgsrc="jquery/data1/tooltips/mantenimiento.jpg"
alt="mantenimiento"/>2</a>
<a href="#" title="redes"><imgsrc="jquery/data1/tooltips/redes.jpg" alt="redes"/>3</a>
<a href="#" title="fon1"><imgsrc="jquery/data1/tooltips/fon1.jpg" alt="fon1"/>4</a>

CODIGO CSS3
*{
margin: 0;
padding: 0;
}
a:visited {text-decoration:none;color:black;}
a:active{text-decoration:none;color:black;}
a:hover{font-size:24; font-weight:bold;color: red;}

25

@font-face {
font-family: "Chalet";
src: url("../fonts/Chalet.eot");
src: url("../fonts/Chalet.eot?#iefix") format("embedded-opentype"),
url("../fonts/Chalet.woff") format("woff"),
url("../fonts/Chalet.ttf") format("truetype"),
url("../fonts/Chalet.svg#Chalet") format("svg");
font-weight: normal;
font-style: normal;
}

body {
background: #212121 url(../img/fondo.jpg);
color: #ff8c00;
font-family: "chalet", Helvetica, Verdana;
font-size: 1em;
}

h1 {
color: #ff8c00;
margin: 0.25em auto;
text-align: center;
text-shadow: 5px 5px 10px rgba(123,47,9,0.5);
}

26

header, nav, footer{

/*background: #c0c0c0;*/
border-radius: 0.5em;
margin: 0.5em auto;
max-width: 960px;
padding:0.25em;
text-align:center;

}
CODIGO PHP
<?php

@$nombre=addslashes($_post['nombre']);
@$email=addslashes($_post['email']);
@$web=addslashes($_post['web']);
@$mensaje=addslashes($_post['mensaje']);

$cabeceras = "from: @email\n"

. "reply-to: $email\n";

$asunto="Mensaje desde la pagina web";

$email_to= "marlonf.pineda@hotmail.com";
$contenido= "$nombre ha enviado un mensaje desde la web
www.square-si.com\n"
."\n"

27

"Nombre: $nombre\n"
."Email: $email\n"
."Sitio web: $web\n"
."Mensaje: $mensaje\n"
."\n";

if (@mail ($email_to $asunto ,$contenido ,$cabeceras )) {

die("Gracias, su mensaje se envio correctamente.");
else {
die("Error: Su informacion no pudo se enviada, intente mas tarde"):
}

CODIGO JQUERY
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>WOWSlider generated by WOWSlider.com</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="WOW Slider, Photo Slideshow, CSS
Gallery" />
<meta name="description" content="WOWSlider created with WOW Slider, a
free wizard program that helps you easily generate beautiful web slideshow" />
<!-- Start WOWSlider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="engine1/style.css" />

28

<script type="text/javascript" src="engine1/jquery.js"></script>

<!-- End WOWSlider.com HEAD section -->
</head>
<body style="background-color:#d7d7d7">
<!-- Start WOWSlider.com BODY section -->
<div id="wowslider-container1">
<div class="ws_images"><ul>
<li><imgsrc="data1/images/diseo.jpg" alt="diseo" title="diseo" id="wows1_0"/></li>
<li><imgsrc="data1/images/mantenimiento.jpg" alt="mantenimiento"
title="mantenimiento" id="wows1_1"/>MANTENIMIENTO DE REDES Y
COMPUTADORAS</li>
<li><imgsrc="data1/images/redes.jpg" alt="redes" title="redes" id="wows1_2"/></li>
<li><imgsrc="data1/images/fon1.jpg" alt="fon1" title="fon1" id="wows1_3"/></li>
</ul></div>

29

6.CRONOGRAMA

UNIDADES/MESES

JUNIO

JULIO

Definicin del problema

Realizacin del anlisis de
los requerimientos de la
empresa.
Recopilacin de la
informacin
Organizacin de la
informacin
Diseo preliminar de la
estructuracin de la pagina
Anlisis y eleccin de las
herramientas de trabajo
(software a utilizar).
Elaboracin del diseo lgico
de la pgina Web.
Elaboracin del diseo
externo de la pgina Web.
Pruebas.
Propuesta al plantel.

30

AGOSTO

7. PRESUPUESTO

Compra de hosting = 150.000

Diseo de pgina =450.000

Sueldo por das laborados = 300.000

Materiales para proyecto =

TOTAL =

100.000

1.000.000

8. CONCLUSIONES.

Los resultados del proyecto superaron las expectativas, su desarrollo fue

satisfactorio. Las posibles mejoras que se podran realizar a la pagina seria
enlazarla a una completa base de datos.
Pero en conclusin los conocimientos obtenidos al desarrollar este proyecto
fueron muy profesionales, que sern aplicados de ahora en adelante y darn
muchos resultados laborales como profesionales.

31

REFERENCIAS.

-www.cvinteramericana.com/disenoweb

32