Ria

INFORME DE PRÁCTICA
RIA
PRESENTA
Góngora Morales Gloria Lizette
Martínez González Jorge Alberto
CUATRIMESTRE Y GRUPO
5to. Cuatrimestre “502”
NOMBRE DEL DOCENTE
Ing. Vázquez Hernández Rogelio
Cd. Nanchital, Ver., a 25deFebrero de 2014
Universidad Tecnológica del Sureste de Veracruz
Tecnologías de la Información y Comunicación

Universidad Tecnológica del Sureste de Veracruz pág. 2
Índice de Contenidos
Índice de Contenidos........................................................................... 2
Objetivo................................................................................................... 3
Introducción ........................................................................................... 4
Desarrollo de la Práctica ............................................................ 6
Investigación............................................................................... 21
Conclusiones ........................................................................................ 24
Referencias Bibliograficas.................................................................. 25
Anexos................................................................................................... 26

Objetivo
Que el alumno realice prácticas Ria utilizando la librería JQuery así como
las hojas de estilo css, esto con el fin de mejorar su aprendizaje en el uso de
código HTML.

Introducción
Se realizó una RIA en la cual utilizaron las distintas herramientas de HTML,
veremos cómo realizar un sencillo sitio web con navegación AJAX usando
JQuery, como ya debemos saber esto se realiza para optimizar las páginas
web obteniendo así las ventajas de una aplicación de escritorio.

DESARROLLO DE LA
PRÁCTICA
I

Desarrollo de la Práctica
I

El marcado HTML
Lo primero que vamos a hacer es crear el marcado HTML. El esqueleto nos
servirá para todas las páginas y, en los archivos, podréis ver que tienen
distinto contenido.
-Screenshot-
Este código está dentro del elemento body. Nos sirve de esqueleto y
contendrá todo el contenido que carguemos dinámicamente con jQuery.
La parte más reseñable es la navegación. Los enlaces llevan a páginas
que podéis encontrar en los archivos, pero contienen el atributo data-
hash que, básicamente, es el mismo nombre pero sin HTML ni nada. Más
tarde nos valdremos de JavaScript para asignar este valor al
atributohref del enlace. De esta manera, nos aseguramos de que la
página funciona aunque JavaScript esté desactivado.
¿Y por qué usar hashes?
Los hashes nos permiten añadir entradas en el historial del navegador, sin
refrescar la página. Esto podríamos conseguirlo con pushState pero ahora
mismo su soporte en navegadores no es muy elevado. Además, revisando
esta parte de la URL con JavaScript, podemos cambiar la página cargada
a través de AJAX. Esto nos permite que, si pasamos la URL a alguien, llegue
a la URL a la que queremos que llegue.

El CSS
Echemos un vistazo al CSS de nuestro archivo. Como observaran es
bastante sencillo:
-Screenshot-(codigo)
/*
==================================================================
===========
HTML5 displaydefinitions
==================================================================
======== */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
/*
==================================================================
===========
Base
==================================================================
======== */
html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

html, button, input, select, textarea { font-family: sans-serif; color: #222; }
body { margin: 0; font-size: 1em; line-height: 1.4; background: #FFFFFF;}
::-moz-selection { background: #82CDBE; color: #071337; text-shadow: none; }
::selection { background: #82CDBE; color: #071337; text-shadow: none; }
/*
==================================================================
===========
Links
==================================================================
======== */
a { color: #00e; text-decoration: none;}
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thindotted; }
a:hover, a:active { outline: 0; }
/*
==================================================================
===========
Typography
==================================================================
======== */
abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em
0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new',
monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
/*
==================================================================
===========
Lists
==================================================================
======== */
ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
navul, navol { list-style: none; list-style-image: none; margin: 0; padding: 0; }

/*
==================================================================
===========
Embeddedcontent
==================================================================
======== */
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
svg:not(:root) { overflow: hidden; }
/*
==================================================================
===========
Figures
==================================================================
======== */
figure { margin: 0; }
/*
==================================================================
===========
Forms
==================================================================
======== */
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }

label { cursor: pointer; }
legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline;
*vertical-align: middle; }
button, input { line-height: normal; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor:
pointer; -webkit-appearance: button; *overflow: visible; }
button[disabled], input[disabled] { cursor: default; }
nput[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0;
*width: 13px; *height: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box;
-webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-
search-cancel-button { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
input:valid, textarea:valid { }
input:invalid, textarea:invalid { background-color: #f0dddd; }
/*
==================================================================
===========
Tables
==================================================================
======== */
table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }

/*
==================================================================
===========
ChromeFramePrompt
==================================================================
======== */
.chromeframe{ margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em
0; }
/* ==|== non-semantichelperclasses
========================================
Please define yourstylesbeforethissection.
==================================================================
======== */
/* Forimagereplacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-
color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr;
*line-height: 0; }
.ir br{ display: none; }
/* Hidefrombothscreenreaders and browsers */
.hidden { display: none !important; visibility: hidden; }
/* Hideonlyvisually */
.visuallyhidden{ border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow:
hidden; padding: 0; position: absolute; width: 1px; }
/* Extendsthe .visuallyhiddenclasstoallowtheelementto be
focusablewhennavigatedtoviathekeyboard */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto;
height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hidevisually and fromscreenreaders, butmaintainlayout */
.invisible { visibility: hidden; }
/* Containfloats */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix{ *zoom: 1; }
/* ==|== printstyles
=======================================================
Printstyles.
Inlinedtoavoidrequired HTTP connection: h5bp.com/r
==================================================================
======== */
@media print {
* { background: transparent !important; color: black !important; box-
shadow:none !important; text-shadow: none !important; filter:none !important; -
ms-filter: none !important; } /* Black printsfaster: h5bp.com/s */
a, a:visited { text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't
show links forimages, orjavascript/internal links */
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; } /* h5bp.com/t */
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }

@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
}
/*
==================================================================
===========
Basic Layout
==================================================================
======== */
#wrapper {
background: white;
width: 960px;
margin: 40px auto 10px auto;
padding: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: 0px 1px 5px 1px #38466F;
-moz-box-shadow: 0px 1px 5px 1px #38466F;
box-shadow: 0px 1px 5px 1px #38466F;
}
#header> h2, #header>h1{
margin: 0;
}
#header> h2 {

color: #303647;
}
#header> h1 {
color: #071337;
}
#nav {
margin: 20px 0;
width: 100%;
display: block;
padding: 0;
}
#nav> li {
float: left;
list-style:none;
}
#nav> li > a {
padding: 5px 10px;
background: #38466F;
border: solid 1px #071337;
color: #E1E6F5;
-khtml-border-radius: 5px;
border-radius: 5px;
display: block;
margin-right: 10px;

background: -moz-linear-gradient(top, #38466f 0%, #303647 100%); /* FF3.6+
*/
background: -webkit-gradient(linear, left top, leftbottom, color-
stop(0%,#38466f), color-stop(100%,#303647)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #38466f 0%,#303647 100%); /*
Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #38466f 0%,#303647 100%); /* Opera
11.10+ */
background: -ms-linear-gradient(top, #38466f 0%,#303647 100%); /* IE10+ */
background: linear-gradient(top, #38466f 0%,#303647 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#38466f',
endColorstr='#303647',GradientType=0 ); /* IE6-9 */
}
#nav> li > a:hover {
background: #303647;
}
#contenido {
margin-top: 20px;
border: 1px dotted #CCC;
padding: 10px;
-khtml-border-radius: 5px;
border-radius: 5px;
}
.ejemplo {
font-size: 0.6em;
color: #071337;
}

.ejemplo a, .ejemplo a:visited {
color: #38466F;
}
.ejemplo a:hover {
text-decoration: underline;
}
-Screenshot-(Vista)

La parte de jQuery
Esta es quizá la parte más interesante, ya que es la que se encarga de
mover el sitio:
Vamos de arriba a abajo.
Lo primero que hacemos es cambiarle a cada uno de los enlaces de la
barra de navegación el atributo href, por el contenido de data-hash que,
como ya hemos explicado, nos servirá para crear entradas en el historial.
Luego, asociamos a cada elemento a de la navegación, una función
gestora del evento click. Lo que hacemos es almacenar el valor del hash,
prevenir la navegación y esperar a que termine la función revisarURL, la
cual recibe el hash como parámetro. Estamos haciendo uso de
losdeferred.
Cuando cargue la página, el script revisará la URL (sin hash ninguno) para
ver si tiene algún hash ya en ella y, de ser así, cargarlo en vez de mostrar el
contenido del inicio.
Lo siguiente que hacemos es establecer un temporizador recurrente que
comprueba periódicamente (cada 250 ms) un cambio en la URL, de esta
manera, nos aseguramos de que si el usuario pulsa el botón atrás o
adelante en el navegador, el contenido de la página cambie de manera
acorde.
Vamos al punto de la cuestión con la función revisarUrl.
Lo primero que hacemos es crear nuestro objeto deferred. En caso de que
no pasemos hash a la función, lo sacaremos de la URL. Si aun así no
tenemos un hash, el script extrae el nombre del archivo de la barra de
direcciones.
Si el hash es distinto a la URL anterior, comienza el proceso de cambio de
página en el que nuevamente, volvemos a hacer uso de los deferreds.
Si la carga de la página tiene éxito, filtramos el contenido para obtener
únicamente lo almacenado en la div con id de contenido ya que el resto
no nos sirve. En caso de error, rechazamos y pasamos un error
personalizado, que colocaremos en la página.
La función cargarPagina tan solo hace una petición AJAX normal que
devolvemos para aprovecharnos del potencial de los elementos deferred.

INVESTIGACIÓN
2

Investigación
Rich Internet Applications
Las rich Internet applications, o RIA (en
español "aplicaciones de Internet
enriquecidas"), son aplicaciones web que
tienen la mayoría de las características de
las aplicaciones de escritoriotradicionales.
Estas aplicaciones utilizan un navegador
web estandarizado para ejecutarse y por
medio de complementos o mediante
una máquina virtual se agregan las
características adicionales.
Las RIA surgen como una combinación de las
ventajas que ofrecen las aplicaciones web y
las aplicaciones tradicionales. Buscan mejorar la experiencia y
productividad del usuario.
Normalmente en las aplicaciones web, hay una recarga continua
de páginas cada vez que el usuario pulsa sobre un enlace. De esta forma
se produce un tráfico muy alto entre el cliente y el servidor, llegando
muchas veces a recargar la misma página con un cambio mínimo.
En los entornos RIA, en cambio, no se producen recargas de página, ya
que desde el principio se carga toda la aplicación, y sólo se produce
comunicación con el servidor cuando se necesitan datos externos como
datos de una base de datos o de otros ficheros externos.
2

Hoja de estilos en cascada (css)
Las hojas de estilo en cascada o (Cascading Style
Sheets, o sus siglas CSS) hacen referencia a un
lenguaje de hojas de estilos usado para describir
la presentación semántica (el aspecto y formato)
de un documento escrito en lenguaje de marcas.
Su aplicación más común es dar estilo a páginas
webs escritas en lenguaje HTML y XHTML, pero
también puede ser aplicado a cualquier tipo de
documentos XML, incluyendo SVG y XUL.
La información de estilo puede ser adjuntada como un documento
separado o en el mismo documento HTML. En este último caso podrían
definirse estilos generales en la cabecera del documento o en cada
etiqueta particular mediante el atributo "<style>".
jQuery
jQuery es una biblioteca de JavaScript, creada inicialmente por John
Resig, que permite simplificar la manera de interactuar con los
documentosHTML, manipular el árbol DOM, manejar eventos, desarrollar
animaciones y agregar interacción con la técnica AJAX a páginas web.
Fue presentada el 14 de enero de 2006 en el BarCamp NYC. jQuery es la
biblioteca de JavaScript más utilizada.
jQuery es software libre y de código abierto, posee un doble
licenciamiento bajo la Licencia MIT y la Licencia Pública General de
GNU v2, permitiendo su uso en proyectos libres y privativos.2 jQuery, al igual
que otras bibliotecas, ofrece una serie de funcionalidades basadas en
JavaScript que de otra manera requerirían de mucho más código, es
decir, con las funciones propias de esta biblioteca se logran grandes
resultados en menos tiempo y espacio.

Conclusiones

Referencias Bibliograficas
http://es.wikipedia.org/wiki/AJAX
http://es.wikipedia.org/wiki/Rich_Internet_Application
http://es.wikipedia.org/wiki/JQuery

ANEXOS

Anexo 1
Anexos

Ria

Recomendados

Recomendados

Más contenido relacionado

Similar a Ria

Similar a Ria (20)

Último

Último (15)

Ria