Fase2ParteA G 301122 13

ACTIVIDAD TRABAJO COLABORATIVO 2
Actividad Grupal
Por
JOHN ALEXANDER ROBAYO
Cdigo:
YON IVAN MARQUEZ BUITRAGO
Cdigo 82391374
301122 DISEOS DE SITIOS WEB

Grupo 13
Presentado a
MAURICIO PERDOMO VARGAS (Director)
Universidad Nacional Abierta y a Distancia UNAD

CEAD Arbelez - Jos Acevedo y Gmez
Ingeniera de Sistemas
Octubre de 2014
TABLA DE CONTENIDO
Introduccin,
Objetivos,
Desarrollo de la Actividad: Fase 2 Parte A: Diseo y Programacin del Sitio Web
Conclusiones
Bibliografa,
INTRODUCCIN
El diseo Web es una de las disciplinas que ms adeptos est ganando desde hace una
dcada y mejores resultados estn proporcionando laboral y econmicamente. El mundo
fascinante de la Web involucra un sin nmero de elementos multidisciplinarios y diversos que
acarrean gran riqueza en concepto y aplicacin.
Lograr que un sitio Web cumpla las metas propuestas en su implantacin no es solamente un
reto sino que adicionalmente es desarrollar la complejidad de un proyecto que involucre
reas como mercadeo, economa local y global, artes grficas, ingeniera de software, y
muchas otras ms.
El desarrollo de aplicativos WebSite es algo que est causando gran impacto en el mundo,
el diseador debe partir de la idea de cul es el objetivo del sitio o que es lo que desea
transmitir (comercializacin de productos de tecnologa) y centrar los esfuerzos en lograr que
el mensaje y lo que se est ofreciendo sea claro y de fcil acceso para los usuarios finales
(clientes), para lograr que el sitio sea atractivo para quien lo visita se debe realizar una
planificacin, diseo e implementacin del sitio web, se debe tener en cuenta la
navegabilidad, interactividad usabilidad, arquitectura y la interaccin de medios como el
audio, texto, imagen, enlaces y video.
La elaboracin se estos sitio no es solo la creacin de una plantillas en HTML, JAVA SCRIP
o cualquier lenguaje de programacin, por tal motivo en la implementacin del sitio web para
la empresa VENTASYA se pretende crear un WebSite que cumpla con la estructura y las
normas de un sitio web, de fcil acceso, con informacin clara y precisa de los productos
ofrecidos por la empresa y que nos permita realizar compras online.
Los documentos HTML se encuentran estrictamente organizados. Cada parte del documento
est diferenciada, declarada y determinada por etiquetas especficas. En este trabajo se
presenta la estructura global de un documento HTML y los nuevos elementos semnticos
incorporados en HTML5.
OBJETIVOS
Trabajar y crear sitios webs y aplicaciones con HTML5

Comprender y aplicar CSS en pginas web
Cmo incorporar Javascript dentro de nuestros documentos HTML
DESARROLLO DE LA ACTIVIDAD: FASE 2 PARTE A: DISEO Y

PROGRAMACIN DEL SITIO WEB
Estudiantes Activos: JOHN ALEXANDER ROBAYO

BUITRAGO
y YON IVAN MARQUEZ
El grupo subi el sitio en un servidor local o de prueba, y para ello lo realiz en

XAMPP, que es una distribucin de Apache completamente gratuita, se elabor la
edicin de la pgina en SublimeText 2.0
Pginas del sitio: Con respecto a lo que originalmente se haba establecido,
debimos cambiar algunos aspectos de nuestra pgina web, ya que no estn todas
las secciones que se definieron en el colaborativo 1, debido a que solo estamos
trabajando dos estudiantes.
Inicio (index.html): Pgina que siempre se muestra al iniciar la navegacin
Cdigo HTML5 de Index.html
<!DOCTYPE html>
<html lang="es" class="no-js"> 
<head>

<meta charset='UTF-8'/>
<meta content='yon ivan marquez buitrago' name='author'/>
<meta content='Pagina de ventas onlina de la empresa ventas ya' name='description'/>
<meta content='VENTAS, ECOMMERCE, ONLINE' name='keywords'/>
<title>VENTASYA COLOMBIA</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/Styles.css">
<link href='http://fonts.googleapis.com/css?family=Russo+One' rel='stylesheet'>
</head>
<body>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src='js/modernizr.js'></script>
<script src='js/prefixfree.min.js'></script>
<script src="js/logo.js"></script>
<script src='js/scriptPrincipal.js'></script>
<script src='js/jquery-2.1.1.js'></script>

<div id="agrupar">
<a name="arriba"></a>

<canvas width="130" height="120" id="logo">Tu navegador no sopora canvas</canvas>
</div>

<header>
<hgroup>
<h1>VentasYa.com</h1>
</hgroup>
<nav >

<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="categorias.html">Categorias</a></li>
<li><a href="catalogo.html">Catalogo</a></li>
<li><a href="compra.html">Cómo Comprar</a></li>
<li>Nuestras Tiendas</li>
<li><a href="contactos.html">Contáctenos</a></li>
</ul>
</nav>
</header>
<section>
<center>
<header id="cabecera">
<h1>Bienvenido a la pagina de VentasYa</h1>

</header>
<figure>
<img src="img/colagge.jpg" height="613" width="923"/> </figure>
</center>
<div id='textoP'>
<article>
<hgroup>

<small>Nos dedicamos a la comercializacin de equipos,
partes, suministros y accesorios de tecnologa informtica, comprometidos con el logro de la
satisfaccin de nuestros clientes, mediante la oferta y entrega oportuna de productos de alta calidad.
Contamos con un equipo humano calificado y proveedores
competentes para asegurar la satisfaccin de nuestros clientes, conscientes de nuestra responsabilidad
en el aseguramiento de la mejora continua de la eficacia del Sistema de Gestin, en cumplimiento de
los requisitos del cliente, los legales y los reglamentarios aplicables a la organizacin.</small>
<small>Visita
nuestro
<a
href="">canal
de
YouTube</a></small>
<small>Siguenos
en
twiter
como
<a
href="">@ventasya</a></small>
</hgroup>
</article>
</div>
</section>
<center>
<a href="#arriba" title="Ir Arriba"><small>Ir Arriba</a></small>
<center>
</div>
<footer id="pie">
<small>Derechos reservados; 2014 - Universidad Nacional Abierta y a Distancia UNAD</small>
<small>Participantes : JOHN ALEXANDER ROBAYO y YON IVAN MARQUEZ</small>
<canvas id='miCanvas'>
</canvas>
</footer>
</body>
</html>
Categoras (categoras.html): Informe de categoras y el porcentaje en ventas
Cdigo HTML5 de categorias.html

<!DOCTYPE html>
<head>
<meta content='john alexander robayo' name='author'/>
</head>
<body>
internet -->
<div id="agrupar">
</div>
<header>
<hgroup>
</hgroup>
<nav >
<ul>
</ul>
</nav>
</header>
<section>
<center>
<h1>Estos son nuestras Categorias en % de ventas</h1>
</header>
</center>
<div id='textoPr'>
<p>Audio y Video: <meter min='0' max='100' value='60'></meter>
60% </p>
<p>Computadores
Impresoras:
<meter
min='0'
max='100'
value='90'></meter> 90% </p>

<p>Celulares y Telémfonos: <meter min='0' max='100'
value='70'></meter> 70%</p>
<p>Consolas
Videojuegos:
<meter
min='0'
max='100'
<meter
min='0'
max='100'
value='30'></meter> 30% </p>

<p>Audio
Reproductores:
value='40'></meter> 40%</p>
<p>Tablets:
<meter
min='0'
max='100'
value='50'></meter>
50%</p>
<p>Cámaras y Videocámaras: <meter
max='100' value='70'></meter> 70%</p>
</div>
<center>
<center>
</section>
min='0'
</div>
<footer id="pie">
<small>Participantes : John Alexander Robayo y Yon Ivan Márquez Buitrago</small>
</canvas>
</footer>
</body>
</html>
Catlogo (catalogo.html): Aqu se muestran los productos a la venta con opcin de

enviar al carrito de compras
Cdigo HTML5 de catalogo.html

<!DOCTYPE html>
<head>
</head>
<body>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<div id="agrupar">
<header>
<hgroup>
</hgroup>
<nav >
<ul>
</ul>
</nav>
</header>
<header>
<a href="./carritodecompras.php" title="ver carrito de compras">
<right> <img src="img/carrito.png"></right>
</a>
</header>
<center>
<h1>Catalogo VentasYa</h1>
</header>
</center>
<article id="seccion1">
<?php
include 'conexion.php';
$re=mysql_query("select * from productos")or die(mysql_error());
while ($f=mysql_fetch_array($re)) {
?>
<div class="producto">
<center>
<img src="./productos/<?php echo $f['imagen'];?>"><br>
<span><?php echo $f['nombre'];?></span><br>

</center>
</div>
<?php
}
?>
<div id="productos">
<figure>
<header>
<hgroup>
<h1 id="smarthphone">SmarthPhones</h1>
<h2>Motorola</h2>
</hgroup>
</header>
<img src="img/motog.jpg" height="150" width="150"/>
<figcaption>
Moto G
</figcaption>
<footer>
<p>$400.000 COP</p>
<a href="./carritodecompras.php"><p>Comprar</p></a>
</footer>
<header>
<hgroup>
<h1 id="H1">Tables</h1>
<h2>Apple</h2>
</hgroup>
</header>
<img src="img/ipad2.png" height="150" width="150"/>
<figcaption>
Ipad 2
</figcaption>
<footer>
<p>$1.200.000 COP</p>
</footer>
</figure>
</div>
</article>
<article id="seccion2">
<aside id="columna">
<figure>
<header>
<hgroup>
<h1 id="H2">Portatiles</h1>
<h2>Lenovo</h2>
</hgroup>
</header>
<img src="img/laptop.png" height="150" width="150"/>
<figcaption>
Portatil Lenovo de la Serie X
</figcaption>
<footer>
<p>$2.200.000 COP</p>
</footer>
<header>
<hgroup>
<h1 id="H3">Televisores</h1>
<h2>Samsung</h2>
</hgroup>
</header>
<img src="img/televisor.jpg" height="150" width="150"/>
<figcaption>
TV Samsung Full HD
</figcaption>
<footer>
<p>$3.200.000 COP</p>
</footer>
</figure>
</aside>
</article>
<blockquote>Deja tu comentario</blockquote>
<form>
<p><textarea placeholder="Deja Tu comentario" id="comentario"></textarea></p>
<p><input type="submit" name="Enviar"/><input type="reset" name="Borrar" /></p>
</form>
<center>
<center>
</div>
<footer id="pie">
<small>Derechos reservados; 2014 - Universidad Nacional Abierta y a Distancia
UNAD</small>
<small>Participantes : John Alexander Robayo y Yon Ivan Márquez
Buitrago</small>
</canvas>
</footer>
</body>
</html>
Cmo Comprar (comprar.html): Ejemplo de poner audio y video en la pagina
Cdigo HTML5 de compras.html

<!DOCTYPE html>
<head>
</head>
<body>
internet -->
<div id="agrupar">
</div>
<header>
<hgroup>
</hgroup>
<nav >
<ul>
</ul>
</nav>
</header>
<section>
<center>
<h1>Cómo Comprar en Internet</h1>
</header>
</center>
<div id='textoPr'>
<div id='mediaC'>
<div class='particion' style='margin-right:50px'>
<hgroup>
<h2>Video</h2>
</hgroup>
<video width='320' height='240' controls='controls'>
<source
src='media/video.webm'
type='video/webm' />
Tu navegador no es compatible con esta
parte de la pagina.
</video>
</div>
<div class='particion'>
<hgroup>
<h2>Audio</h2>
</hgroup>
<audio controls='controls'></audio>
</div>
</div>
</div>
</section>
<center>
<center>
</div>
<footer id="pie">
</canvas>
</footer>
</body>
</html>
Nuestras Tiendas: (En construccin)

Contctenos:
Cdigo HTML5 de contactos.html

<!DOCTYPE html>
<head>
</head>
<body>
internet -->
<div id="agrupar">
</div>
<header>
<hgroup>
</hgroup>
<nav >
<ul>
</ul>
</nav>
</header>
<section>
<center>
<h1>Contáctanos</h1>
</header>
</center>
<div id='textoPr'>
<form>
<label for='nombre'>Nombre:</label>
<input type='text' id='nombre' placeholder='Escribe
tu
nombre' required>
<label for='correo'>E-mail:</label>
<input type='email' id='correo' placeholder='Escribe tu Email' required>
<label for='edad'>Edad:</label>
<input type='number' id='edad' min='0'>
<label for='calificacion'>Calificanos:</label>
<input type='range' id='calificacion' min='0'
max='10'
value='0'>
<label for='fecha'>Fecha:</label>
<input type= 'date' id='fecha'>
<input type='submit' value= 'Enviar Datos' id='btnSubmit'>
</form>
</div>
<center>
<center>
</section>
</div>
<footer id="pie">
</canvas>
</footer>
</body>
</html>
STYLES.CSS
body {
margin:0px;
background:#f7f6f6;
font-family:"Trebuchet MS",Helvetica,sans-serif;
background-image: url(../img/fondoretro.jpg);
background-repeat: no-repeat;
background-size: cover;
background-color: #FFF6F1; /*Le damos color al fondo*/
font-family: "Helvetica", Arial;/*Definimos las fuentes*/
}
h1 {
font-family:Helvetica, sans-serif;
text-shadow:rgba(0,0,0,0.5) 3px 3px 5px;
color:#fff;
}
header, section, footer, aside, nav, article, figure, figcaption, hgroup {
display:block;
}
header hgroup h1{
border-bottom: solid;
padding-bottom:10px;
border-width: 1px;
border-color: #1D1D1D;
text-shadow: 0px 0px 30px rgba(0,0,0,0.5);
}
#agrupar {
width:1000px;
margin:15px auto;
text-align:center;
}
#cabecera {
background:#004bff;
border: 1px solid #0094ff;
padding: 10px;
box-shadow: 0px 0px 20px rgba(0,0,0,0.5);
-moz-border-radius:10px / 10px;
-webkit-border-radius: 10px / 10px;
border-radius:10px / 10px;
}
canvas {
float:left;
}
#menu {
//float:left;
background:#f7f6f6;
padding: 30px 15px;
}
nav ul li {/*Editamos la botonera de navegacion, en este caso editamos lo que esta en
la etiqueta li que esta dentro de ul que a la vez esta dentro de nav*/
display: inline-block;/*Desplegamos los elemenotos horizontalmente*/
margin-right: 20px;/*espacio de 20 pixeles a la derecha de cada elemento*/
color: #1D1D1D;/*asignamos el color*/
cursor: pointer;/*definimos la manito de dar click para que aparezca cuando paso encima*/
padding: 5px;
transition:all 0.5s linear;/*Para hacer transicion sobre los botones de navegacion*/
-webkit-transition:all 0.5s linear;
-moz-transition:all 0.5s linear;
-o-transition:all 0.5s linear;
}
nav ul li:hover {
background-color:#1D1D1D;
color: #C44C2D;
border-radius: 5px;
}
nav ul li a {/*Le quitamos el subrayado a los botones de navegacion*/
text-decoration: none;
}
#textoPr/*Se agrupo una seccion agrupada en el id textoPr dentro de un div*/
{
width: 923px;/*Se define ancho*/
height: 300px;/*Se define Altura*/
/*background-color:#16124A;/*se define color de fondo*/
/*color: #FFF;/*definimos el color del texto*/
margin: 0 auto;/*Centramos el contenido*/

text-align: left;/*Alineamos texto a la izquierda*/
border-radius: 20px;/*utilizamos el borde redondeado*/
padding: 20px;/*separamos el texto d elos bordes*/
box-shadow: 0px 0px 20px rgba(0,0,0,0.5);/*colocamos sombra al div*/
}
#textoP/*Se agrupo una seccion agrupada en el id textoPr dentro de un div*/
{
/*background-color:#16124A;/*se define color de fondo*/
/*color: #FFF;/*definimos el color del texto*/
}
#pie {
clear:both;
text-align:center;
padding:20px;
border-top: 2px solid #999999;
}
#seccion1 {
float: left;
width: 450px;
margin: 20px 0px;
padding: 20px;
}
article {
background:#f7f6f6;
padding:20px;
margin-bottom:15px;
}
#seccion2 {
float: left;
width: 400px;
margin: 20px 0px;
padding: 20px;
}
#comentario {
width:370px;
}
#textoFo/*Se agrupo una seccion agrupada en el id textoPr dentro de un div*/
{

background-color:#01DF01;/*se define color de fondo*/
color: #FFF;/*definimos el color del texto*/
}
a{/*cambiamos los link*/
color: #C44C2D;/*asignamos color del link*/
font-weight: bold;/*le damos negrilla a los link*/
}
#miCanvas{/**/
position: absolute;/*El cuadro se extiendo por toda la pantalla a lo ancho*/
/*top: 0px;*/
bottom: 0px;/**/
left: 0px;/**/
/*border:solid;*//**/
}
meter{
background-color: #FFF;
padding: 5px;
border-radius: 5px;
color:#C44C2D;
margin-left: 20px;
width: 200px;
}
label{
display: block;
}
#btnSubmit{
border:none;
color: #C44C2D;
padding: 4px;
margin: 20px;
cursor: pointer;
font-family: 'Russo One', sans-serif;
}
#calificacion{
width: 150px;
-webkit-appearance:none;
height: 20px;
border-radius: 5px;
cursor: pointer;
}
#calificacion::-webkit-slider-thumb{
-webkit-appearance:none;
background-color: #C44C2D;
border-radius: 10px;
height: 15px;
width: 10px;
}
#mediaC{
box-sizing:border-box;
}
.particion{
display: inline-block;
width: 45%;
}
#mediaC audio{
height: 200px;
}
#mediaC video{
height: 180px;
}
SCRIPTS
logo.js
window.addEventListener('load', init);
function init() {
var canvas = document.getElementById('logo');
var ctx1 = canvas.getContext('2d');
ctx1.beginPath();
ctx1.moveTo(100, 70);
ctx1.arc(70, 70, 30, a_radianes(0), a_radianes(360), true);
ctx1.fillStyle = "#05c0fc";
ctx1.strokeStyle = "#05c0fc";
ctx1.stroke();
ctx1.fill();
ctx2.beginPath();
ctx2.fillStyle = "black";
ctx2.strokeStyle = "black";
ctx2.stroke();
ctx2.fill();
ctx3.beginPath();
ctx3.fillStyle = "#fff";
ctx3.strokeStyle = "rgba(0,0,0,0.5)";
ctx3.stroke();
ctx3.fill();
ctx4.beginPath();
ctx4.strokeStyle = "#15b608";
ctx4.stroke();
ctx5.beginPath();
ctx5.arc(70, 70, 40, a_radianes(190), a_radianes(360), false);
ctx5.arc(80, 70, 50, a_radianes(190), a_radianes(360), false);
ctx5.lineTo(110, 70);
ctx5.strokeStyle = "black";
ctx5.stroke();
}
function a_radianes(grados) {
return (grados * Math.PI) / 180;
}
ScriptPrincipal.JS
$(document).on("ready",configurarApp);/**/
function configurarApp()/*funcion que cambia tamao al lienzo*/
{
var canvas = document.getElementById("miCanvas");/*guardar en la variable canvas mi elemento
de id*/
var ctx = canvas.getContext("2d");/*obtener el contexto para poder dibujar en 2d*/
canvas.width=screen.availWidth;/*cambio el ancho del canvas, devolviendo el ancho del
navegador*/
dibujaFooter(canvas,ctx)
}
function dibujaFooter(canvas,contexto)
{
contexto.fillStyle="rgba(0,0,0,0.2)"
contexto.moveTo(0,0);
contexto.quadraticCurveTo(0,-50,canvas.width-100,canvas.height-50);
contexto.fill();
//contexto.stroke();
//quadraticCurveTo(cpx,cpy,x,y);
CONCLUSIONES
HTML5 puede ser imaginado como un edificio soportado por tres grandes
columnas: HTML, CSS y Javascript.
Para trabajar y crear sitios webs y aplicaciones con HTML5, necesitamos saber
primero cmo esa estructura es construida. Crear fundamentos fuertes nos
ayudar ms adelante a aplicar el resto de los componentes para aprovechar
completamente estas nuevas tecnologas.
CSS
proveer las funciones requeridas por desarrolladores, aquellas que
programadores haban creado desde aos atrs usando cdigos Javascript
complicados de implementar y no siempre compatibles.
FUENTES BIBLIOGRAFICAS
Gauchat, Juan Diego.El gran libro de HTML5, CSS3 y Javascript. MARCOMBO,
S.A. 2012.
Salazar Ziga, Jorge Eduardo. Puentes Andrade, Orlando. Universidad Nacional
Abierta Y A Distancia Facultad De Ciencias Bsicas E Ingeniera. Programa de
Ingeniera De Sistemas. Modulo Diseo De Sitios Web. 2009

Fase2ParteA G 301122 13

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Fase2ParteA G 301122 13

Transféré par

Droits d'auteur :

Formats disponibles

ACTIVIDAD TRABAJO COLABORATIVO 2

301122 DISEOS DE SITIOS WEB

Universidad Nacional Abierta y a Distancia UNAD

Trabajar y crear sitios webs y aplicaciones con HTML5

DESARROLLO DE LA ACTIVIDAD: FASE 2 PARTE A: DISEO Y

Estudiantes Activos: JOHN ALEXANDER ROBAYO

y YON IVAN MARQUEZ

El grupo subi el sitio en un servidor local o de prueba, y para ello lo realiz en

Cdigo HTML5 de Index.html

<h1>Bienvenido a la pagina de VentasYa</h1>

Categoras (categoras.html): Informe de categoras y el porcentaje en ventas

Cdigo HTML5 de categorias.html

value='90'></meter> 90% </p>

value='30'></meter> 30% </p>

Catlogo (catalogo.html): Aqu se muestran los productos a la venta con opcin de

Cdigo HTML5 de catalogo.html

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script><!-- Utiliza el jquery

Cmo Comprar (comprar.html): Ejemplo de poner audio y video en la pagina

Cdigo HTML5 de compras.html

Nuestras Tiendas: (En construccin)

Cdigo HTML5 de contactos.html

margin: 0 auto;/*Centramos el contenido*/

width: 923px;/*Se define ancho*/

Vous aimerez peut-être aussi

margin: 0 auto;/Centramos el contenido/

width: 923px;/Se define ancho/