UNIVERSIDAD POLITÉCNICA DE

DURANGO

REPORTE ESTANCIAS 2
INGENIERÍA EN TELEMÁTICA

ALUMNA: CARMEN YESENIA GALINDO

NÚMERO DE CONTROL: 1201150013

SEPTIMO CUATRIMESTRE

ASESOR INSTITUCIONAL: M.T. NELSON PAUL ROMERO ALVAREZ

ASESOR EMPRESARIAL: EMMANUEL SANCHEZ AVILA

CONTENIDO

TABLA DE ILUSTRACIONES .............................................................................................................. 2

INTRODUCCION ............................................................................................................................... 3
SUSTENTO TEÓRICO ........................................................................................................................ 4
PAGINA WEB: .............................................................................................................................. 4
XAMPP ......................................................................................................................................... 4
NAVICAT ...................................................................................................................................... 4
DREAMWEAVER .......................................................................................................................... 4
MARCO TEORICO ............................................................................................................................. 5
TABLA DE LOS HORARIOS ............................................................................................................ 5
CÓDIGO PARA LA CREACIÓN DE PESTAÑAS. ............................................................................... 7
CÓDIGO PARA CONFIGURAR EL BANNER. ................................................................................... 8
CÓDIGO INSERCIÓN DE IMAGEN ................................................................................................. 8
CÓDIGO PARA LAS REDES SOCIALES. .......................................................................................... 9
CÓDIGO PESTAÑA ¿QUIÉNES SOMOS? ..................................................................................... 11
CODIGO PESTAÑA CABAÑAS ..................................................................................................... 14
CÓDIGO DE LA PESTAÑA ACTIVIDADES. .................................................................................... 16
RESULTADOS ESPERADOS ............................................................................................................. 21
CONCLUSION ................................................................................................................................. 22
BIBLIOGRAFIA ................................................................................................................................ 23
TABLA DE ILUSTRACIONES

Ilustración 1 Activamos en XAMPP en MySQL y el Apache................................................................. 6

Ilustración 2 Creación de la base de datos personas. ......................................................................... 6
Ilustración 3 Muestra la tabla ya creada de la base de datos. ............................................................ 7
Ilustración 4 Página de inicio............................................................................................................. 10
Ilustración 5 Logotipo de la empresa y descripción. ......................................................................... 10
Ilustración 6 Dirección y las redes Sociales. ...................................................................................... 11
Ilustración 7 Pestaña de ¿quiénes somos?, logotipo e información................................................. 13
Ilustración 8 Imágenes de lo puedes ver si vas al rancho e información. ......................................... 13
Ilustración 9 Las cabañas del rancho................................................................................................. 16
Ilustración 10 Lago e información ..................................................................................................... 16
Ilustración 11 Imágenes de las actividades ....................................................................................... 19
Ilustración 12 Información de cada una de las actividades .............................................................. 19
Ilustración 13 Información de cada una de las actividades .............................................................. 20
INTRODUCCION

Al inicio de cuarto y séptimo cuatrimestre en la universidad se debe de

cumplir con la asignación de las primeras y segundas estancias, las cuales, el
alumno debe buscar por sí mismo cierta empresa relacionada a su carrera, que le
permita estar en constante aprendizaje y/o práctica de sus conocimientos
previamente adquiridos para resolver cualquier problema o situación que se le
presente.

El plazo de la segunda estancias es de 120 horas, por lo que el alumno debe

de organizarse con su horario escolar y con el horario que debe de cumplir con la
empresa en la que hará dichas prácticas como más se le ajusten para estar
cumpliendo en ambos lados, de no ser así podría salir perjudicado.

En la carrera de Ingeniería en Telemática se trata con un campo científico y

tecnológico, por lo que al buscar estancias se buscó un perfil donde se pudiera
implementar lo visto en la universidad desde primer cuatrimestre, ahora en séptimo
cuatrimestre se necesita un poco más de dificultad, en este caso realice la segunda
estancia en el Rancho El Oso en donde pude implementar mis conocimientos de
programación al realizar una página web.
SUSTENTO TEÓRICO

PAGINA WEB:
Una página web, es un documento o información electrónica capaz de
contener texto, sonido, vídeo, programas, enlaces, imágenes, y muchas otras
cosas, adaptada para la llamada World Wide Web (WWW) y que puede ser
accedida mediante un navegador. Esta información se encuentra generalmente en
formato HTML o XHTML, y puede proporcionar acceso a otras páginas web
mediante enlaces de hipertexto. Las páginas web frecuentemente también incluyen
otros recursos como pueden ser hojas de estilo en cascada, imágenes digitales,
entre otros.

XAMPP
XAMPP es un servidor independiente en base a software libre, con el cual
podemos disponer de un servidor propio o simplemente usarlo para hacer pruebas
de nuestras páginas web, bases de datos, para desarrollar aplicaciones en php, con
conexión a base de datos SQL (LAMPP= Linux + Apache + MySQL + PHP + Perl)

NAVICAT
Navicat es un administrador gráfico de base de datos y un software de
desarrollo producido por PremiumSoft CyberTech Ltd. para MySQL, MariaDB,
Oracle, SQLite, PostgreSQL y Microsoft SQL Server. Cuenta con un Explorador
como interfaz gráfica de usuario soportando múltiples conexiones para bases de
datos locales y remotos. Su diseño está pensado para satisfacer las diferentes
necesidades de un amplio sector del público; desde administradores y
programadores de bases de datos a diferentes empresas que dan soporte y o
comparten información con clientes o socios.

DREAMWEAVER
Dreamweaver es la herramienta de diseño de páginas web más avanzada,
tal como se ha afirmado en muchos medios. Aunque sea un experto programador
de HTML el usuario que lo maneje, siempre se encontrarán en este programa
razones para utilizarlo, sobre todo en lo que a productividad se refiere.
MARCO TEORICO

En el inicio de las estancias realizadas en aproximadamente veintisiete días,

se estableció un acuerdo con el asesor empresarial para cumplir con un horario
definido entre las personas implicadas en el mismo, sin descuidar el horario escolar
o el de estas estancias, así que se optó solo por los días lunes, miércoles y viernes,
con un horario de 4 de la tarde a 8 de la noche.

En la siguiente tabla se muestran los horarios decididos por el asesor

empresarial, para realizar el proyecto.

TABLA DE LOS HORARIOS

Días Laborales Horario
Lunes 4:00 P.M. – 8:00 P.M.
Miércoles 4:00 P.M. – 8:00 P.M.
Viernes 4:00 P.M. – 8:00 P.M.

Tabla 1 Horario de Trabajo

Para la realización de esta segunda estancia se decidió por realizarla en El
Rancho el Oso, es una empresa que vende y renta cabañas y terrenos.

Al inicio para la realización de la página web comenzó por la investigación e

instalación de los softwares necesarios para realizar la página, los softwares a
utilizar serán xampp, Dreamweaver.

Una vez instalados abrimos xampp activamos MySQL y Apache.

 Ilustración 1 Activamos en XAMPP en MySQL y el Apache
Después se consiguió la información sobre la empresa, sobre lo que el
asesor empresarial quería que se mostrara en la página web, al principio de la
estancia en asesor empresarial decidió que se realizara una pequeña base de datos
en donde se guardara los datos de las personas que visiten la página se podrían
registrar y dejar un pequeño mensaje de alguna duda o comentario que tenga sobre
el rancho y sus alrededores.

En la imagen de abajo se muestra la realización de la base de datos en

Navicat.

Ilustración 2 Creación de la base de datos personas.

En la Imagen de abajo se muestra la base de datos ya realizada, se

muestra la tabla personas, con los campos ID, Nombre, Email, Teléfono y
Mensaje.
 Ilustración 3 Muestra la tabla ya creada de la base de datos.

Después de la realización de la base de datos el asesor creyó que sería mejor

sin una base de datos que la página son se mostrara la información del rancho,
donde encontrarlos teléfonos este otras cosas.

Cuando se comenzó a realizar la página opte por realizarla en Dreamweaver,

la página principal se verá alguna información sobre el rancho, como imagen datos
relevantes a este rancho, y un par de videos. Se muestran las pestañas de quienes
somos, cabañas, actividades y contacto.

En la imagen de abajo se muestra el código del home en donde le asignamos

los videos e imágenes, con una breve información. En el código de abajo es el que
muestra las pestanas y el banner, banner es un formato publicitario en Internet.
Esta forma de publicidad por internet consiste en incluir una pieza publicitaria dentro
de una página web. Prácticamente en la totalidad de los casos, su objetivo es atraer
tráfico hacia el sitio web del anunciante que paga por su inclusión.

CÓDIGO PARA LA CREACIÓN DE PESTAÑAS.

En el siguiente código nos muestra la creación de las pestañas, de inicio,
quienes somos, cabañas, contacto y actividades.

<ul id="menu">

<li class="active"><a href="../estancia/index.PHP"><span>INICIO</span></a></li>

<li><a href="info.PHP"><span>QUIENES SOMOS?</span></a></li>

<li><a href="cabanas.PHP"><span>CABAÑAS</span></a></li>

<li><a href="actividades.PHP"><span>ACTIVIDADES</span></a></li>

<li><a href="contacto.PHP" class="auto-style1" style="left: 2px; top: -1px; width: 152px">

<span style="left: 0px; top: 2px">CONTACTO</span></a></li>

</ul>

</nav>

CÓDIGO PARA CONFIGURAR EL BANNER.

Para esta parte del código nos muestra la configuración de los banners,
banner es un formato publicitario en Internet. Esta forma de publicidad por internet
consiste en incluir una pieza publicitaria dentro de una página web. Prácticamente
en la totalidad de los casos, su objetivo es atraer tráfico hacia el sitio web del
anunciante que paga por su inclusión.

<div id="slider" style="left: -3px; top: 218px">

<ul class="items">

<li> <img src="../estancia/imagenes/lago.jpg" alt="">

<div class="banner">

<span class="title"><span class="color2">El Oso</span><span class="color1"></span></span>

</div></li>

<li><img src="../estancia/imagenes/cabana1.jpg" alt="">

<div class="banner">

<span class="title"><span class="color2">El Oso</span><span class="color1"></span></span>

</div></li></ul>

</div></header></div>

CÓDIGO INSERCIÓN DE IMAGEN.

 En esta parte del código se muestra como insertar una imagen y una breve
información sobre el rancho.

<div class="wrapper">

<figure class="left marg_right1"><img src="../estancia/imagenes/logo.jpg" alt=""></figure>

<p >En el <span lang="es-mx"> Rancho El Oso te ofrece la oportunidad de tener tu propio espacio
en la sierra de Durango entre montañas, lagos y cañadas podrás compartir momentos y
experiencias inolvidables con tu familia y amigos, en escenarios naturales
incomparables.</span></p>

<p >&nbsp;</p>

</div>

</div>

CÓDIGO PARA LAS REDES SOCIALES.

Esta parte del código es para mostrar las redes sociales y se le agrego la
dirección del rancho.

<footer>

<ul id="icons">

<li class="first">Siguenos en:</li>

<li><a href="#" class="normaltip" title="Facebook"><img src="imagenes/face.jpg"

alt="https://www.facebook.com/ranchoelosodgo/?ref=page_internal/"></a></li>

<li><a href="#" class="normaltip" title="Twitter"><img src="imagenes/twiter.jpg"

alt="https://twitter.com/Rancho_El_Oso"></a></li>

<li><a href="#" class="normaltip" title="Instagram"><img src="imagenes/instagram.jpg"

alt="https://www.instagram.com/ranchoeloso/"></a></li>

</ul><span lang="es-mx">DIRECCION</span> <br>COM. E. RICARDO VAZQUEZ L1 A M33 34016

Victoria de Durango, Durango <span lang="es-mx"></span>

</footer>

En esta imagen ya se muestra la interfaz de la página, las pestañas y una

imagen de una parte del rancho.
 Ilustración 4 Página de inicio
Aquí se muestra el logotipo de la empresa, una breve descripción de lo que
podrás conocer si vas al rancho, imágenes de las cabañas y habitaciones que hay
en el rancho.

Ilustración 5 Logotipo de la empresa y descripción.

 En esta imagen se muestra la dirección y las redes sociales donde podrás
encontrar más información del rancho.

Ilustración 6 Dirección y las redes Sociales.

CÓDIGO PESTAÑA ¿QUIÉNES SOMOS?

El código que se utilizó para cada una de las pestañas, es similar a la de
inicio, ya que se muestran imágenes del rancho y una leve información.

Esta parte del código se encuentra en la pestaña de ¿Quiénes somos?, en

esta parte se mostrara el logotipo y su lema.

<div class="bg1">

<div class="main">

<article id="content2">

<div class="wrapper">

<div class="col2 marg_right1">

<h3><span lang="es-mx"> </span><span lang="es-mx"> El Espíritu de la

Montana</span>!</h3>

<div class="wrapper">

<figure class="left marg_right1"><img src="../estancia/imagenes/logo.jpg"

alt=""></figure>

En esta parte del código se muestra la configuración para la información del

propósito del rancho el oso.
 <p><span lang="es-mx">
<br><br><br><br><br><br><br><br><br><br><br>Rancho El Oso cumple el
sueño de un hombre cuyos primeros años de vida transcurrieron en la sierra
duranguense. Después de adquirirlo, su propietario inicio con el reto de ayudarle a
la naturaleza a recuperar la depredación causada por el hombre en este lugar, ya
que Otinapa fue un centro maderero que tuvo su auge en la primera mitad del
Siglo XX.</span></p>

<p >&nbsp;</p>

</div>

</div>

<div class="wrapper">

<h3> </h3>

<figure class="col1 marg_right1"><img

src="../estancia/imagenes/aa.jpg"><br>

<span lang="es-mx">
</span></figure>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n
bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&
nbsp;

<br></span></figure>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<br><br><figure class="col1 marg_right1"><img

src="../estancia/imagenes/bb.jpg"><br>

<span lang="es-mx"></span></figure>
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<br><br><br><br><br><br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&
nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;</span></figure></span></figure>

Ilustración 7 Pestaña de ¿quiénes somos?, logotipo e información.

Ilustración 8 Imágenes de lo puedes ver si vas al rancho e información.

 En la pestaña de cabañas se muestran imágenes e información sobre las
cabañas y habitaciones, un parte donde puedes hacer tu reservación, puedes
escoger tus fechas de reserva.

CODIGO PESTAÑA CABAÑAS

El código siguiente corresponde a la pestaña de cabañas, aunque en todas
las pestañas se utilizó un poco del mismo código de la pestaña de inicio.

<div class="bg1">

<div class="main">

<article id="content2">

<div class="wrapper">

<div class="col2 marg_right1">

<h3><span lang="es-mx"> </span><span lang="es-mx">

CABANAS</span>!</h3>

<div class="wrapper">

<figure class="left marg_right1"><img src="../estancia/imagenes/logo.jpg" alt=""></figure>

<p ><span lang="es-mx"> <br><br><br><br><br><br><br><br><br><br><br>En una primera etapa

el desarrollo de montaña Rancho El Oso, pone a la venta terrenos rústicos en diversas áreas de la
propiedad que se orientaran a actividades específicas.</span></p>

<p >&nbsp;</p>

</div>

</div>

<div class="wrapper">

Este código es para mostrar las imágenes, de las cabañas y habla un poco
sobre las actividades que se pude hacer en el rancho.

<figure class="left marg_right1"><img src="../estancia/imagenes/cabana1.jpg">

<span lang="es-mx"><br> </span></figure>

<figure class="left marg_right1"><img src="../estancia/imagenes/cabana2.jpg"><br>

<span lang="es-mx"><br></span></figure>

<figure class="left marg_right1"><img src="../estancia/imagenes/cabana.jpg"><br>

<span lang="es-mx"></span></figure>

<figure class="left marg_right1"><img src="../estancia/imagenes/images2.jpg"><br>

<span lang="es-mx"><br></span></figure>

<figure class="left marg_right1"><img src="../estancia/imagenes/lago.jpg"><br>

<span lang="es-mx"></span></figure>

<div class="main">

<article id="content2">

<div class="wrapper">

<div class="col2 marg_right1">

<h3><span lang="es-mx"> </span><span lang="es-mx">

¡TENEMOS UNA OPCION PARA TI!</span>!</h3>

<div class="wrapper">

<p ><span lang="es-mx"> <br>En una de las zonas se creara una pista de motocross rodeada de
lotes para quienes gustan de este deporte extremo; en otro espacio se contara con una pista de
bicicross y senderos para bici de montaña; además habrá zonas específicas para realizar senderismo,
campismo y cabalgatas en rutas seguras y exclusivas para ello. </span></p>

<p >&nbsp;</p>

</div>

</div>

<div class="wrapper">

</div>

</article>

</div>

</div>

<div class="main">
 Ilustración 9 Las cabañas del rancho

Ilustración 10 Lago e información

CÓDIGO DE LA PESTAÑA ACTIVIDADES.

En la parte de actividades se muestran las actividades ya mencionadas e
información de cada una de ellas. Y por último viene una pestaña en donde te
muestra toda la información del rancho, como teléfonos y emails.

<div class="main">

<article id="content2">
<div class="wrapper">

<div class="col2 marg_right1">

<h3><span lang="es-mx"> </span><span lang="es-mx">

PISTA DE MOTOCROSS</span>!</h3>

<div class="wrapper">

<p ><span lang="es-mx"> <br>Para quienes disfrutan de las emociones extremas y han hecho de
ellas su forma de vida, contamos con un conjunto de terrenos en cuyo centro se construirá una
pista de motocross. Para respetar todos los condominos, las actividades tendrán zonas
delimitadas. </span></p>

<p >&nbsp;</p>

</div>

<div class="col2 marg_right1">

<h3><span lang="es-mx"> </span><span lang="es-mx">

RUTAS PARA CICLISMO</span>!</h3>

<div class="wrapper">

<p ><span lang="es-mx"> <br>Además de haberse proyectado una pista de bicicross, a lo largo de
la zona específica para bicicletas encontrarás rutas que desafiarán tu habilidad en la bici de
montaña. ¡Atrévete a recorrer parte de la Sierra Madre en tu "caballo de acero"! </span></p>

<p >&nbsp;</p>

</div>

<div class="col2 marg_right1">

<h3><span lang="es-mx"> </span><span lang="es-mx">

SENDERISMO</span>!</h3>

<div class="wrapper">

<p ><span lang="es-mx"> <br>Caminar en la sierra mientras disfrutas de la naturaleza...¡que tienes

que vivir! Solo o en compañía de tus seres queridos, encontrarás esta experiencia altamente
satisfactoria. </span></p>

<p >&nbsp;</p>
</div>

<div class="col2 marg_right1">

<h3><span lang="es-mx"> </span><span lang="es-mx">

CABALGATA</span>!</h3>

<div class="wrapper">

<p ><span lang="es-mx"> <br>Nada como recorrer Rancho El Oso en el lomo de un buen caballo,
ese es el verdadero espíritu de la montaña, ¡Llénate de él!</span></p>

<p >&nbsp;</p>

</div>

<div class="col2 marg_right1">

<h3><span lang="es-mx"> </span><span lang="es-mx">

ACTIVIDADES DEL CAMPO</span>!</h3>

<div class="wrapper">

<p ><span lang="es-mx"> <br>Ven al establo a ordeñar las vacas, a la caballeriza a alimentar tu
caballo o acompaña a nuestros perros ovejeros a cuidar a las borregas del rancho. </span></p>

<p >&nbsp;</p>

</div>

<div class="col2 marg_right1">

<h3><span lang="es-mx"> </span><span lang="es-mx">

ESCUCHA LA MONTAÑA</span>!</h3>

<div class="wrapper">

<p ><span lang="es-mx"> <br>No es un silencio cualquiera. La voz de la montaña tiene sus propias
notas y aquí podrás escucharlas. ¡Te encantarán!</span></p>

<p >&nbsp;</p></div></div>

<div class="wrapper">

Imágenes de la interfaz de la pestaña de actividades, donde te muestra

imágenes de dichas actividades.
 Ilustración 11 Imágenes de las actividades

Información de todas las actividades que existen en el rancho, sobre la pista

de motocross, la ruta para ciclismo, cabalgata, actividades del campo y escuchar a
la montaña.

Ilustración 12 Información de cada una de las actividades

Ilustración 13 Información de cada una de las actividades
RESULTADOS ESPERADOS

Al principio del proyecto se optó por la realización de una base de datos para
la página web, donde las personas interesadas en algún dato de las cabañas o los
terrenos ya sea para comprar o rentar, pudiesen dejar sus datos y sus dudas, pero
por falta de tiempo el asesor decidió hacer un cambió el proyecto. Se presentó una
página web donde las personas podrán ver la ubicación del rancho, las actividades
que se realizan en este.
CONCLUSION
Si desde el principio se hubiese creado la conexión de la página web a una
base de datos, la página estaría mas completa, pero por falta de tiempo no se llegó
a realizar, aunque la página que se realizo es bastante útil, ya que muestra lo que
las personas desean ver que son sus atracciones y las locaciones del rancho, ya
más adelante se complementara la página con la base de datos.
BIBLIOGRAFIA
[1] Dreamweaver, autor Miguel Ángel Alvarez, fecha de realización 01 de enero de
2001. http://www.desarrolloweb.com/articulos/332.php

[2] XAMPP, Actualizado 2015/03/18. Contenido bajo licencia Creative Commons

4.0 Diseño basado en Materialize.
http://www.um.es/docencia/barzana/DAWEB/Desarrollo-de-aplicaciones-web-
Xampp.html

[3] Página Web, modificada por última vez el 7 dic 2016 a las 14:23.
https://es.wikipedia.org/wiki/P%C3%A1gina_web

[4] Navicat, modificada por última vez el 22 nov 2016 a las 10:08.
https://es.wikipedia.org/wiki/Navicat