Compe-AC1
-
Upload
rodrigo-hidalgo -
Category
Documents
-
view
220 -
download
0
description
Transcript of Compe-AC1
-
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