REPÚBLICA BOLIVARIANA DE VENEZUELA

INSTITUTO UNIVERSITARIO DE MERCADOTÉCNIA

CATEDRA: SEMINARIO I
SECCIÓN: IS9A

DOCUMENTACIÓN DEL DESARROLLO DE CÓDIGO DE LA

APLICACIÓN WEB

Profesor: Jorge Marfil

Participantes:
Natiushka Muñoz, C.I.: 16.984.635
Rosemery González, C.I.: 17.286.148

Caracas, agosto 2018

Ámbito del proyecto
En este proyecto decidimos desarrollar una página web a elección propia. La llamaremos
Empresa.

Objetivos.
Nuestro principal objetivo es afianzar los conocimientos de programación y entender como
interactúa la red con la ayuda de diferentes aplicaciones y a su vez crear un Sitio Web para
dar a conocer la EMPRESA

Estructura del sitio web

Al inicio el sitio web mostrará varias opciones en una botonera donde podrá elegir:
 Principal
 Empresa: Esta desplegará una lista que muestra la Misión, Visión, Valores y
Organigrama de la empresa.
 Estadística
 Proyectos
 Publicaciones
 Venezuela

DISEÑO WEB
Aplicaciones utilizadas:
HTML5: es la quinta revisión importante del lenguaje básico de la World Wide Web, HTML.
HTML5 especifica dos variantes de sintaxis para HTML: una «clásica», HTML (text/html),
conocida como HTML5, y una variante XHTML conocida como sintaxis XHTML5 que deberá
servirse con sintaxis XML (application/xhtml+xml). Esta es la primera vez que HTML y
XHTML se han desarrollado en paralelo. La versión definitiva de la quinta revisión del
estándar se publicó en octubre de 2014.
PHP: acrónimo recursivo en inglés de PHP Hypertext Preprocessor (preprocesador de
hipertexto), es un lenguaje de programación de propósito general de código del lado
del servidor originalmente diseñado para el desarrollo web de contenido dinámico. Fue
uno de los primeros lenguajes de programación del lado del servidor que se podían
incorporar directamente en un documento HTML en lugar de llamar a un archivo externo
que procese los datos. PHP es un lenguaje de script del lado del servidor, los scripts están
incrustados en los documentos HTML y el servidor los interpreta y ejecuta antes de servir las
páginas al cliente también podemos decir que el cliente no ve el código PHP sino los
resultados que produce.

Una de las ventajas de PHP es potente, fácil de aprender, de libre distribución, permite el
acceso a bases de datos y otras funcionalidades orientadas a la red y dispone de soporte en
la Web

MYSQL: es un sistema de gestión de bases de datos relacional desarrollado bajo licencia

dual: Licencia pública general/Licencia comercial por Oracle Corporation y está considerada
como la base datos de código abierto más popular del mundo, y una de las más populares
en general junto a Oracle y Microsoft SQL Server, sobre todo para entornos de desarrollo
web.
SUBLIMETEX: es un editor de texto y editor de código fuente está escrito en C++ y
Python para los plugins. Se puede descargar y evaluar de forma gratuita. Sin embargo no es
software libre o de código abierto y se debe obtener una licencia para su uso continuado,
aunque la versión de evaluación es plenamente funcional y no tiene fecha de caducidad.
CSS (siglas en inglés de Cascading Style Sheets), en español "Hojas de estilo en cascada", es
un lenguaje de diseño gráfico para definir y crear la presentación de un documento
estructurado escrito en un lenguaje de marcado. Es muy usado para establecer el diseño
visual de los documentos web, e interfaces de usuario escritas en HTML o XHTML; el
lenguaje puede ser aplicado a cualquier documento XML, incluyendo XHTML, SVG, XUL, RSS,
etcétera. También permite aplicar estilos no visuales, como las hojas de estilo auditivas.
Junto con HTML y JavaScript, CSS es una tecnología usada por muchos sitios web para crear
páginas visualmente atractivas, interfaces de usuario para aplicaciones web, y GUIs para
muchas aplicaciones móviles (como Firefox OS).

BOOTSTRAP: es un framework web o conjunto de herramientas de código abierto para

diseño de sitios y aplicaciones web. Contiene plantillas de diseño con tipografía, formularios,
botones, cuadros, menús de navegación y otros elementos de diseño basado en HTML y
CSS, así como extensiones de JavaScript adicionales. A diferencia de muchos frameworks
web, solo se ocupa del desarrollo front-end.

PRÁCTICA DE NAVEGACIÓN

Al ser la página de una empresa el usuario puede acceder a la misma para conocer sobre
todo sobre ésta. A primera vista el sitio web mostrará varias opciones en una botonera
donde podrá elegir:
 Principal
 Empresa: Esta desplegará una lista que muestra la Misión, Visión, Valores y
Organigrama de la empresa.
 Estadística
 Proyectos
 Publicaciones
 Venezuela
En esta botonera el usuario puede transportarse a través de la página.
En el botón denominado como PRINCIPAL sirve para que siempre que el usuario se haya
dirigido a alguna de las partes de la página pueda volver al inicio de la misma donde se
muestra un Slider que pasa noticias de la empresa en el caso de querer publicarse.

El botón denominado EMPRESA al desplegarse le muestra al usuario las opciones de Misión,

Visión, Valores y Organigrama, donde podrá visualizar bajo qué características se rige la
empresa así como también la organización jerárquica de la misma.

El botón denominado ESTADÍSTICA llevará al usuario a los logros obtenidos por la empresa.
El botón denominado PROYECTOS llevará al usuario a las planificaciones que tenga la
empresa por realizar para dar así una información constante y confiable al usuario.

El botón denominado ESTADÍSTICA llevará al usuario a los logros obtenidos por la empresa.

El botón denominado PUBLICACIONES éste lleva al usuario a conocer temas de información

de la empresa, donde podrá descargar dicha información.

El botón denominado VENEZUELA lleva al usuario a un video donde se muestran las

características de la empresa.

CARACTERÍSTICAS DEL PROYECTO

En la realización del desarrollo del proyecto se quiso plantear un fácil manejo de la página
para el usuario de manera que pudiera cumplir con las necesidades que este pudiera
presentar, por lo que se implementó la creación una Página Web para una empresa,
teniendo de esta manera las siguientes características.
La página PRINCIPAL será la más importante ya que es la que muestra todas las opciones
que se pueden encontrar dentro de la página. Para este espacio utiliza un diseño agradable
y ligero a la vista del usuario.
El sitio Web está desarrollado en base al tipo de diseño de contenido, ya que esta expresa
mucho mejor la información, con el fin de atraer más usuarios, teniendo la empresa más
receptividad.
El sitio Web contiene mucha información referente a la empresa que se desea dar a
conocer.

ESTRUCTURA Y ORGANIZACIÓN DE LA PÁGINA

El objetivo es organizar todos los elementos del sitio Web en partes independientes, pero
entrelazadas e hipervinculadas para mayor detalle del contenido.
Se realizó de manera organizada con el fin del fácil manejo y comprensión del usuario.
A continuación se muestra el desarrollo de código de la página Web creada, donde
se especificara para que funcione cada uno.
DOCUMENTACIÓN DEL DESARROLLO DE CÓDIGO DE PÁGINA WEB
INDEX.PHP INCLUDE

El Include es el encargado de concatenar frangmentos de código de archivos separados para así formar la página principal,
incluyendo entre sí los códigos de las diferentes partes de la página
CINTILLO

El código anteriormente reflejado cumple la función de mostrar el título principal de la página Web, el cual es identificado como
“EMPRESA”
BOTONERA

Parte 01 del capture del código

Parte 02 del código
El código presentado cumple la función de darle a la página una botonera de opciones donde direcciona al usuario al lugar de la
página que desee visitar, teniendo una de ellos (Empresa) la opción de desplegarse
SLIDER

Parte 01 del código

Parte 02 del código
Este código es el encargado de la transición constante de información que se desee colocar como por ejemplo noticias.
FUNDA

A través de este código y seleccionando el botón EMPRESA se muestra la información de la misma (Misión, Visión y Valores)
ORGANIGRAMA

A través de este código mostramos el organigrama de la empresa

ESTADÍTICA

Parte 01 del código

Parte 02 del código
Con el código anteriormente mostrado al seleccionar el botón ESTADÍSTICA nos direcciona a la información de la estadística de la
empresa así como su nombre lo indica.
PROYECTOS

Parte 01 del código

Parte 02 del código
Con este código podemos seleccionar en la botonera PROYECTOS y nos envía a los proyectos que están siendo desarrollados o que
están por desarrollarse en la empresa.
INTITUCIONES

Código que le permite al usuario registrarse en la página de la empresa, identificado como una institución para que pueda tener un
contacto directo.
CONTACTO

Parte 01 del código

Parte 02 del código
Con este código mostramos la dirección e información de contacto de la empresa, obteniendo la dirección de google maps y
colocando la dirección URL para que al cliquear pueda vincularlo con el mapa directamente.
PIE DE PÁGINA WEB

Con este código en el caso de esta página mostramos los nombres de las creadoras del sitio web y la universidad donde estudiamos,
pudiendo ser modificado de ser requerido.