Está en la página 1de 9

2013

Implementando APIS de HTML5 con DRAG & DROP, Web Storage

Docente: MSc. Ileana Camacho Rostrn Ing. Skinner Abelardo Guills


UNAN-LEON
7/10/2013

RESUMEN DEL PROYECTO 2 IMPLENTANDO APIS CON HTML5.


Este trabajo se enfoca en el desarrollo APIS de HTML5, en esta seccin de trabajo del proyecto con APIS seleccione a trabajar Drag & Drop y Web Storage, las herramientas a utilizar para el desarrollo de los proyectos fueron las etiquetas de HTML5, documentos CSS normal y CSS3 adems la herramienta de mayor necesidad en este caso es JavaScript. Los APIS que disearon tienen la siguiente estructura:

En el primer ejemplo del ejercicio con Drag & Drop tiene como objetivo de arrastrar los artculos y soltarlo en el carrito de compra adems de hacer eso tiene la funcin de clculo de ir contabilizando el total de los artculos que se vallan soltando como el precio total, otra funcin que lleva es de ir reduciendo la cantidad de existencia de los artculos. Para poder hacer dichas funcionalidades se ocup el siguiente mtodo de desarrollo.

1) Estructura Semntica: Se realiz con el objetivo de llevar una estructura en cual sirva para que los motores de bsqueda como los navegadores o cualquier otro mecanismo automtico que lea el sitio web sepan con exactitud qu partes de su contenido corresponden cada una de ellos. Para esto se ocup las etiquetas Head, Header, Body, Aside, Footer. Adems los cdigos relevancia fueron.
<li class="HP" data-articulo="HP">HP PRECIO:$<span class="precio"> 500</span> Existencia: <span class="existencia">15</span></li> <li class="XPERIA" data-articulo="XPERIA">XPERIA PRECIO:$<span class="precio"> 300</span> Existencia: <span class="existencia">8</span></li> <li class="TABLET" data-articulo="TABLET">TABLET Precio:$<span class="precio"> 350</span> Existencia: <span class="existencia">20</span></li> </ul> </section> <section id="Carrito"> <img width="400px", height="500px" src="Imagenes/Carritos.png"> <span>$<span id="total">0</span></span>

2) CSS: En esta seccin van toda la estructura como se ver el sitio conforme los tamaos del ancho, la altura de la pgina, los mrgenes los colores y tamao de las letras dependiendo en que id de etiquetas pertenezcan. Las cuales afectaran al Body, Header, Footer entre otros. Los cdigos de relevancia son:
#ListaArticulos li{ margin-left:50px; margin-top:30px; display:inline-block; height:200px; list-style:none; width: 250px; }

.TV { background-image:url(../Imagenes/tv.png); background-size:250px; background-repeat:no-repeat; background-position:bottom center; #Carrito{ margin-left:100px; margin-top:30px;

3) JavaScript: En etas etapa de desarrollo en mi cdigo de JavaScript realiza el movimiento de arrastrar y soltar adems de llevar el cdigo de clculo de los precios de los productos al igual que la existencia de lista de artculos. Los cdigos relevantes son:
$('#ListaArticulos li').draggable({ helper:'clone' , placeholder: 'ui-state-highlight', opacity: '.8' }); $('#Carrito').droppable({ drop:eventoDrop }); function eventoDrop(evento,ui){ var draggable = ui.draggable; var existencia = parseInt(draggable.children('.existencia').text()); if(existencia>0){ var precio = parseFloat(draggable.children('.precio').text()); var total= parseFloat($('#total').text()); total=total+precio; existencia--; draggable.children('.existencia').text(existencia); $('#total').text(total); }

else{ alert('No hay Existencia para el articulo'+draggable.data('articulo')); }}});

En el segundo ejemplo del ejercicio con Web Storage tiene como objetivo de guardar de forma local en el navegador del cliente con Local Storage para que esto suceda va depender que el navegador pueda soportarlo en este caso Chrome y Mozilla son soportables. El ejercicio se basa en agregar el nombre completo de algn alumno y registrar algn promedio. Para poder hacer dichas funcionalidades se ocup el siguiente mtodo de desarrollo. 1) Estructura Semntica: Se realiz con el objetivo de llevar una estructura en cual sirva para que los motores de bsqueda como los navegadores o cualquier otro mecanismo automtico que lea el sitio web sepan con exactitud qu partes de su contenido corresponden cada una de ellos. Para esto se ocup las etiquetas Head, Header, Body, Aside, Footer. Adems los cdigos relevancia fueron.
<section class="formulario"> <form id="form"> <br><label>Inserte el nombre completo alumno:</label> <br /> <input type="text" id="nombre" placeHolder="Nombre" /><br /> <br><label>Inserte el Promedio Total:</label><br /> <input type="text" id="promedio" placeHolder="Promedio" /><br /> <br><button class="submit" type="submit"> Insertar</button> </form> </section> <aside id="Stor"> <h4>Captura Datos Storage</h4> <div id="datos"></div> </aside></div>

2) CSS: En esta seccin van toda la estructura como se ver el sitio conforme los tamaos del ancho, la altura de la pgina, los mrgenes los colores y tamao de las letras dependiendo en que id de etiquetas pertenezcan. Las cuales afectaran al Body, Header, Footer entre otros. Los cdigos de relevancia son:
#form{ margin-left:30px; margin-bottom:50px; margin-top:20px; } .formulario { display:block; margin:0 auto; width:510px; color: #666666; background-color:#aab143; font-family:Arial; font-size:24px; } label { display:block; margin-top:20px; letter-spacing:1px; } #nombre{ width:380px; height:27px; background:#666666; border:2px solid #f6f6f6; padding:10px; margin-top:5px; font-size:14px; color:#ffffff; } #promedio{

width:380px; height:27px; background:#666666; border:2px solid #f6f6f6; padding:10px; margin-top:5px; font-size:14px; color:#ffffff; } button.submit:hover { opacity:.55; cursor: pointer; color: #fff; } button { width:150px; height:35px; background:#666666; border:2px solid #f6f6f6; padding:10px; margin-top:5px; margin-bottom:10px; font-size:18px ; color:#ffffff; } #Stor div { padding:5em 0; margin-bottom:20px; margin-left:10px; background:#FFF; font-size:12px; color:#000; border: 0px solid #000000; vertical-align:middle; text-align:center;

border-radius: 10px 10px 10px 10px; -moz-border-radius: 10px 10px 10px 10px; -webkit-border-radius: 10px 10px 10px 10px; border: 0px solid #000000; }

3) JavaScript: En etas etapa de desarrollo en mi cdigo de JavaScript realiza la captura de los datos que se vallan ingresando en el formulario de cada uno de los inputs de los cuadros de texto adems tienen un botn en la que permite insertar los valores directamente en el Local Storage. Los cdigos relevantes son:
$(document).on("ready",function(){ if(window.localStorage){ //localStorage.clear(); $("#form").submit(function(){ var nombre = $(this).find("#nombre").val(); var promedio = $(this).find("#promedio").val(); var datos =""; localStorage[nombre] = promedio; for (i in localStorage){ datos += "<b>nombre: </b>"+i+ " <b>promedio: </b>"+localStorage[i]+"<br />"; } $("#datos").html(datos) return false; }) } else { alert("su navegador no es compatible por favor instale un navegador mas actualizado!"); } })

Observacin: En cada uno de los ejercicios estn completamente comentados.

CONCLUSION: Esta entrega examin la utilidad de las APIs Drag & Drop y Web Storage. Estas dos APIs fueron seleccionadas porque juntas demuestran tanto la innovacin como el uso prctico de las APIs. El Drag & Drop se ocupa mucho en pginas de correo electrnico como Gmail que te permite arrastrar documentos e imgenes en el correo electrnico, adems otra pgina que ocupa tal tecnologa es el de Facebook que te permite arrastrar y soltar tus fotos directamente en tu muro en el inicio de seccin de tu perfil. La herramienta Web Storage es una nueva tecnologa que permite a muchos usuarios dejar de usar los cookies que poseen los navegadores. Disear sitios web Offline es una de las innovaciones que realice con el Web Storage de almacenamientos locales de modo cliente. La nica desventaja de esta herramienta es que tienen limitantes de guardar los datos de registro de la BD poseen poca capacidad, otra limitante es que algunos navegadores viejos no lo soportan. Estas dos APIs juntas ilustran una combinacin de modelo del uso de HTML5 para uso comercial y social. Por lo tanto, su utilidad demuestra la facilitacin apropiada y gestin general de una aplicacin de Internet HTML5 enriquecida. En este proyecto aprend cosas nuevas que no haba experimentado y me gusta estos temas de los APIs de HTML5. Terminando con esta conclusin le agradezco su enseanza MSc. Ileana Camacho.