UNIVERSIDAD PRIVADA DE CIENCIAS ADMINISTRATIVAS Y TECNOLGICAS CARRERA DE INGENIERA DE SISTEMAS

GESTIN ACADMICA I - 2015

MDULO II

PROYECTO PARA LA DEMOSTRACIN DE COMPETENCIAS Pgina Web para la tienda deportiva impulse

ASIGNATURA: Actualizacin 1.

TURNO: Maana.

HORARIO: 08:30 10:30.

DOCENTE: Lic. Mamani Quispe Antonio

ESTUDIANTE:

Hidalgo Jimnez Rodrigo ngel

Cochabamba Bolivia 2015

CONTENIDO

1. Introduccin ................................................................................................................................ 1

2. Objetivos del proyecto ................................................................................................................ 2

2.1. Objetivo General ................................................................................................................. 2

2.2. Objetivos Especficos ........................................................................................................... 2

3. Marco Terico ............................................................................................................................. 2

3.1. Html5 ................................................................................................................................... 2

3.2. Css ....................................................................................................................................... 4

3.3. Responsivo .......................................................................................................................... 4

3.4. Boostrap .............................................................................................................................. 5

3.5. JavaScript ............................................................................................................................. 5

3.6. Angular ................................................................................................................................ 6

3.7. Mongo DB ............................................................................. Error! Marcador no definido.

4. Marco Prctico ............................................................................................................................ 6

5. Conclusin .................................................................................... Error! Marcador no definido.

6. Bibliografa ................................................................................... Error! Marcador no definido.

1

1. INTRODUCCIN Estar presente en la red es actualmente ms que una opcin es una obligacin, Internet se ha

convertido en el sistema ms importante de publicacin-obtencin de Informacin de la sociedad

actual, hace unos aos.

Las redes de comunicacin de rea extensa se utilizaban principalmente para servicios de

transferencia de archivos Correo electrnico, conexin remota a ordenadores centrales, etc. Uno

de los aspectos que motivaban esta limitacin era que los usuarios que tenan acceso a estos

servicios pertenecan a sectores puntuales de la sociedad.

Actualmente, las posibilidades han evolucionado a un nivel en el que es difcil imaginar aplicaciones

de la vida cotidiana que no tengan cabida en la red, este avance ha sido motivado, en gran medida,

por el aumento progresivo de usuarios: Internet es accesible desde todos los organismos pblicos y

privados, todas las grandes y medianas compaa, gran parte de las pequeas empresas y, en

general en una gran parte de los hogares que poseen una PC.

El nmero de usuarios de Internet se ha incrementado como consecuencia de los avances de las

tecnologas de desarrollo de sistemas de publicacin de informacin.

La realidad es que Internet es una herramienta de trabajo imprescindible en las empresas modernas,

universidades y en los organismos pblicos y privados.

Para facilitar la presencia de los Centros de Enseanza en internet, estas acceden para la publicacin

de su pgina Web y se le asigna una URL y correo electrnico. A partir de aqu desarrollar y

publicar su Web (contratando los servicios de alguna empresa privada).

Con estos precedentes, es posible encontrar sitios Web desde una pgina nica con los datos

postales del centro hasta contenidos muy completos, con un sistema de navegacin (mediante

enlaces de texto en forma arbrea, enlaces de texto sin orden, etc.).

Empleando herramientas de desarrollo de sitios web (HTML, ASP, JavaScript, etc.) para su creacin.

2

2. OBJETIVOS DEL PROYECTO

2.1. Objetivo General

Disear, construir y aplicar una propuesta de sitio web que integre y permita proporcionar

informacin de la empresa de venta de videojuegos soul of players, facilitando el acceso a los

diferentes recursos y servicios que ofrece e incorporando nuevas tecnologas.

El principal objetivo es realizar un prototipo del sitio web para impulse de forma que pueda

disponer de un sistema de publicacin en Internet para proporcionar informacin sobre la venta de

los distintos productos que tiene en sus tiendas

2.2. Objetivos Especficos

Dar en la web una imagen ms acorde con la empresa.

Facilitar el acceso a los contenidos de la empresa desde cualquier PC.

Aplicar los conocimientos bsicos de Html5 y Css.

Desarrollar una pgina responsiva para los diferentes dispositivos.

3. MARCO TERICO

3.1. Html5

HTML 5 (HyperText Markup Language, versin 5) es la quinta revisin mayor del lenguaje bsico de

la World Wide Web, HTML. HTML 5 especifica dos variantes de sintaxis para HTML: un clsico

HTML (text/html), la variante conocida como HTML5 y una variante XHTMLconocida como

sintaxis XHTML5 que deber ser servida como XML (XHTML) (application/xhtml+xml). Esta es la

primera vez que HTML y XHTML se han desarrollado en paralelo.

Hay que aclarar que HTML5 sigue en borrador y lo seguir estando durante algunos aos ms. El

enfoque general ha cambiado bastante respecto a versiones anteriores de HTML, aadiendo

semntica y accesibilidad implcitas, especificando cada detalle y borrando cualquier ambigedad.

Tambin se tiene en cuenta que muchas pginas web actuales son dinmicas, parecindose ms a

aplicaciones que a documentos. Algo bsico es que HTML5 est definido en base al DOM (la

representacin interna de una web con la que trabaja un navegador), dejando de lado la

representacin real, definiendo a la vez un estndar HTML y XHTML.

3

En HTML5 hay varios elementos que sirven para estructurar mejor una pgina web, estableciendo

qu es cada seccin, y reemplazando en muchas ocasiones a div.

Estos son los elementos:

section representa una seccin general dentro de un documento o aplicacin, como un

captulo de un libro. Puede contener subsecciones y si lo acompaamos de h1-h6 podemos

estructurar mejor toda la pgina.

article representa un contenido independiente en un documento, el caso ms claro son las

entradas de un blog o las noticias de un peridico online. As, dentro de la portada podremos

tener varios artculos demarcados semnticamente, por lo que una herramienta puede

extraerlos fcilmente.

aside representa un contenido que est muy poco relacionado con el resto de la pgina,

como una barra lateral. Esencial para delimitar el contenido importante del contenido de

apoyo, haciendo ms caso al primero que al segundo.

header representa la cabecera de una seccin, y es de suponer que se le d ms importancia

que al resto, sobre todo si la seccin es un artculo.

footer representa el pi de una seccin, con informacin acerca de la pgina/seccin que

poco tiene que ver con el contenido de la pgina, como el autor, el copyright o el ao.

nav representa una seccin dedicada a la navegacin entre el sitio, como la tpica barra

superior de los peridicos.

4

3.2. Css3

Mientras que HTML nos permite definir la estructura una pgina web, las hojas de estilo en cascada

(Cascading Style Sheets o CSS) son las que nos ofrecen la posibilidad de definir las reglas y estilos de

representacin en diferentes dispositivos, ya sean pantallas de equipos de escritorio, porttiles,

mviles, impresoras u otros dispositivos capaces de mostrar contenidos web.

Las hojas de estilo nos permiten definir de manera eficiente la representacin de nuestras pginas

y es uno de los conocimientos fundamentales que todo diseador web debe manejar a la perfeccin

para realizar su trabajo.

La primera versin de CSS fue publicada a fines del ao 1996 y fue logrando popularidad y

aceptacin hasta llegar a la versin 2.1, estndar actual que ofrece gran compatibilidad con la

mayora de los navegadores del mercado.

A partir del ao 2005 se comenz a definir el sucesor de esta versin, al cual se lo conoce como CSS3

o Cascading Style Sheets Level 3. Actualmente en definicin, esta versin 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, CSS3 es

el estndar que dominar la web por los siguientes aos.

3.3. Responsivo El diseo responsivo es un diseo que responde al tamao del dispositivo desde el que se est

visualizando la web, adaptando las dimensiones del contenido y mostrando los elementos de una

forma ordenada y optimizada sea cual sea el soporte.

La tendencia en el mundo de las pginas web es que el usuario cada vez ms acceda desde

dispositivos mviles como telfonos o tabletas. Las estadsticas de 2012 arrojan un porcentaje

esclarecedor: el 40% de los usuarios que visitaron webs el ao pasado lo hicieron desde un

dispositivo mvil y un 25% de las compras en internet se realizan ya desde el telfono.

Ante estos datos, se entiende claramente la necesidad de tener una web que se visualice

correctamente desde cualquier soporte. En Trazada, utilizamos el diseo responsivo para

conseguirlo.

Aplicando el diseo responsivo desde la creacin de una nueva web se consiguen varios objetivos.

Se reducen costes de desarrollo. Teniendo un solo diseo web optimizado para todos los

dispositivos en vez de varios diseos independientes, uno para cada soporte.

Baja el rebote de usuarios. Una buena parte de los usuarios que abandonan una pgina web

al entrar desde un dispositivo mvil es porque no pueden visualizar correctamente el

contenido. Con el diseo responsivo, el usuario disfrutar siempre de una buena experiencia

de navegacin.

5

Se mejoran los resultados de conversin. Al tener una pgina que se v de forma optimizada

para mviles y tabletas, el porcentaje de usuarios que adquieren un producto o envan un

formulario es mayor.

Permite desarrollar una estrategia de marketing sobre la web unificada para todos los

soportes, haciendo que esta sea ms slida y mejorando su efectividad.

Desde que esta tendencia se consolid en el mundo de la web, los equipos de desarrollo tanto de

Trazada como de QDQ incorporamos las buenas prcticas del diseo responsivo a nuestro sistema

de produccin, de forma que ya no concebimos el nacimiento de una nueva pgina web sin que esta

se visualice perfectamente en todos los dispositivos.

3.4. Bootstrap

ootstrap, es un framework originalmente creado por Twitter, que permite crear interfaces web con

CSS y JavaScript, cuya particularidad es la de adaptar la interfaz del sitio web al tamao del

dispositivo en que se visualice. Es decir, el sitio web se adapta automticamente al tamao de una

PC, una Tablet u otro dispositivo. Esta tcnica de diseo y desarrollo se conoce como responsive

design o diseo adaptativo.

El beneficio de usar responsive design en un sitio web, es principalmente que el sitio web se adapta

automticamente al dispositivo desde donde se acceda. Lo que se usa con ms frecuencia, y que a

mi opinin personal me gusta ms, es el uso de media queries, que es un mdulo de CSS3 que

permite la representacin de contenido para adaptarse a condiciones como la resolucin de la

pantalla y si trabajs las dimensiones de tu contenido en porcentajes, puedes tener una web muy

fluida capaz de adaptarse a casi cualquier tamao de forma automtica.

Bootstrap tiene un soporte relativamente incompleto para HTML5 y CSS 3, pero es compatible con

la mayora de los navegadores web. La informacin bsica de compatibilidad de sitios web o

aplicaciones esta disponible para todos los dispositivos y navegadores. Existe un concepto de

compatibilidad parcial que hace disponible la informacin bsica de un sitio web para todos los

dispositivos y navegadores. Por ejemplo, las propiedades introducidas en CSS3 para las esquinas

redondeadas, gradientes y sombras son usadas por Bootstrap a pesar de la falta de soporte de

navegadores antiguos. Esto extiende la funcionalidad de la herramienta, pero no es requerida para

su uso.

3.5. JavaScript

Javascript es un lenguaje con muchas posibilidades, utilizado para crear pequeos programas que

luego son insertados en una pgina web y en programas ms grandes, orientados a objetos mucho

ms complejos. Con Javascript podemos crear diferentes efectos e interactuar con nuestros

usuarios.

Este lenguaje posee varias caractersticas, entre ellas podemos mencionar que es un lenguaje

basado en acciones que posee menos restricciones. Adems, es un lenguaje que utiliza Windows y

sistemas X-Windows, gran parte de la programacin en este lenguaje est centrada en describir

6

objetos, escribir funciones que respondan a movimientos del mouse, aperturas, utilizacin de teclas,

cargas de pginas entre otros.

Es necesario resaltar que hay dos tipos de JavaScript: por un lado est el que se ejecuta en el cliente,

este es el Javascript propiamente dicho, aunque tcnicamente se denomina Navigator JavaScript.

Pero tambin existe un Javascript que se ejecuta en el servidor, es ms reciente y se denomina

LiveWire Javascript.

3.6. Angular

AngularJS es un framework de JavaScript de cdigo abierto, mantenido por Google, que ayuda con

la gestin de lo que se conoce como aplicaciones de una sola pgina. Su objetivo es aumentar las

aplicaciones basadas en navegador con capacidad de Modelo Vista Controlador (MVC), en un

esfuerzo para hacer que el desarrollo y las pruebas sean ms fciles.

La biblioteca lee el HTML que contiene atributos de las etiquetas personalizadas adicionales,

entonces obedece a las directivas de los atributos personalizados, y une las piezas de entrada o

salida de la pgina a un modelo representado por las variables estndar de JavaScript. Los valores

de las variables de JavaScript se pueden configurar manualmente, o recuperados de los recursos

JSON estticas o dinmicas.

4. MARCO PRCTICO

7

8

9

10