resultado de aprendizaje

INFORME DE PRÁCTICA

“Resultado de Aprendizaje Unidad l”

PRESENTA

Nicolás Ordaz Lucia Esmeralda

García González Elsa Edith

Rodríguez Zetina Carlos Gilberto

CUATRIMESTRE Y GRUPO

5°. “502”NOMBRE DEL DOCENTE

Ing. Rogelio Vázquez Hernández

Tecnología de la Información y Comunicación

Universidad Tecnológica del Sureste de Veracruz Página 1

Universidad Tecnológica del Sureste de Veracruz

Tecnologías de la Información y Comunicación


Índice de Contenidos

Índice 2

Objetivo 3

Introducción 4

I. Desarrollo de la Práctica 5

II. Investigación

Conclusiones 22

Referencias Bibliográficas 24

Anexos



IntroducciónEn este documento se desglosa toda la unidad vista en el primer parcial el cual contiene información basada en los siguientes temas:

ria, JavaScript Jquery html



DESARROLLO DE

LA PRÁCTICA


I

I


DESARROLLO DE

LA PRÁCTICA


I


INVESTIGACIÓN


2


RIALas 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 escritorio tradicionales. 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.

Arquitectura RIAGeneralmente se tiene una aplicación cliente “stateful” y una capa de servicios separada. Las RIA se apoya más sobre un desarrollo “cliente-servidor” en vez de un desarrollo web tradicional, en donde el estado se mantiene en el servidor en sesiones. El cliente sabe acerca de sí mismo y el tipo de datos que está solicitando y únicamente solicita los datos que necesita sin ninguna otra información.

ClienteSe maneja la interacción entre el usuario y la interfaz de usuario, el usuario invoca comandos, actualiza vistas y carga datos. Aquí se mantiene el estado de la aplicación, se manejan todas las peticiones de datos hacia el servidor y se controla como se presentan los datos.



ServidorAquí se manejan y se procesan todas las peticiones de la aplicación cliente y delega las acciones en el servidor, estas pueden ser, guardar datos en la base de datos, actualizar los archivos del sistema, retornar datos al servidor, o algún tipo de proceso analítico. Determina y le da formato a los datos que son retornados al cliente.

Aplicaciones RIAConsisten en el aprovechamiento de la experiencia del usuario en herramientas y funciones de escritorio tan naturales como copiar, cortar y pegar, redimensionar columnas, y ordenar etc., con el alcance y la flexibilidad de presentación y despliegue que ofrecen las aplicaciones o páginas Web junto con lo mejor de la multimedia (voz, vídeo, etc.).

Entre los beneficios principales de aplicaciones RIA tenemos una mejora importante en la experiencia visual, que hacen del uso de la aplicación algo muy sencillo, ofrece mejoras en la conectividad y despliegue instantáneo de la aplicación, agilizando su acceso, garantizan la desvinculación de la capa de presentación es decir acceso a la aplicación desde cualquier computador en cualquier lugar del mundo.



BeneficiosA pesar de que el desarrollo de aplicaciones multimedia para navegadores web está mucho más limitado y es más difícil que otro tipo de aplicaciones de escritorio, los esfuerzos se justifican por varios motivos:

No necesitan instalación (solo es necesario mantener actualizado el navegador web).

Las actualizaciones hacia nuevas versiones son automáticas.

Se pueden utilizar desde cualquier ordenador con una conexión a Internet sin depender del sistema operativo que este utilice.

Generalmente es menos probable la infección por virus, que utilizando por ejemplo programas ejecutables.

Más capacidad de respuesta, ya que el usuario interactúa directamente con el servidor, sin necesidad de recargar la página.

Ofrecen aplicaciones interactivas que no se pueden obtener utilizando solo HTML, incluyendo arrastrar y pegar, cálculos en el lado del cliente sin la necesidad de enviar la información al servidor.

Evita la problemática del uso de diferentes navegadores al abstraerse de ellos a través de un framework.



Web 2.0El término Web 2.0 comprende aquellos sitios web que facilitan el compartir información, la interoperabilidad, el diseño centrado en el usuario y la colaboración en la World Wide Web. Un sitio Web 2.0 permite a los usuarios interactuar y colaborar entre sí como creadores de contenido generado por usuarios en una comunidad virtual, a diferencia de sitios web estáticos donde los usuarios se limitan a la observación pasiva de los contenidos que se han creado para ellos. Ejemplos de la Web 2.0 son las comunidades web, los servicios web, las aplicaciones Web, los servicios de red social, los servicios de alojamiento de videos, las wikis, blogs, mashups y folcsonomías.

El término Web 2.0 está asociado estrechamente con Tim O'Reilly, debido a la conferencia sobre la Web 2.0 de O'Reilly Media en 2004.2 Aunque el término sugiere una nueva versión de la World Wide Web, no se refiere a una actualización de las especificaciones técnicas de la web, sino más bien a cambios acumulativos en la forma en la que desarrolladores de software y usuarios finales utilizan la Web. El hecho de que la Web 2.0 es cualitativamente diferente de las tecnologías web anteriores ha sido cuestionado por el creador de la World Wide Web Tim Berners-Lee, quien calificó al término como "tan sólo una jerga"- precisamente porque tenía la intención de que la Web incorporase estos valores en el primer lugar.

Servicios de la web 2.0Para compartir en la Web 2.0 se utilizan una serie de herramientas, entre las que se pueden destacar:

Blogs: Un blog es un espacio web personal en el que su autor (puede haber varios autores autorizados) puede escribir cronológicamente artículos, noticias...(con imágenes y enlaces), pero además es un espacio colaborativo donde los lectores también pueden escribir sus comentarios a cada uno de los artículos (entradas/post) que ha realizado el autor. La blogosfera es el conjunto de blogs que hay en internet. Como servicio para la creación de blogs destacan Wordpress.com y Blogger.com


http://es.wikipedia.org/wiki/Tim_Berners-Lee

http://es.wikipedia.org/wiki/Web_2.0#cite_note-2

http://es.wikipedia.org/wiki/Tim_O'Reilly

http://es.wikipedia.org/wiki/Folcsonom%C3%ADa

http://es.wikipedia.org/wiki/Mashup_(aplicaci%C3%B3n_web_h%C3%ADbrida)


Wikis: En hawaiano "wiki" significa: rápido, informal. Una wiki es un espacio web corporativo, organizado mediante una estructura hipertextual de páginas (referenciadas en un menú lateral), donde varias personas elaboran contenidos de manera asíncrona. Basta pulsar el botón "editar" para acceder a los contenidos y modificarlos. Suelen mantener un archivo histórico de las versiones anteriores y facilitan la realización de copias de seguridad de los contenidos. Hay diversos servidores de wikis gratuitos.

Redes sociales: Sitios web donde cada usuario tiene una página donde publica contenidos y se comunica con otros usuarios. Ejemplos: Facebook, Twitter, Tuenti, Hi5, Myspace, etc. También existen redes sociales profesionales, dirigidas a establecer contactos dentro del mundo empresarial (LinkedIn, Xing, eConozco, Neurona...).

Entornos para compartir recursos: Entornos que nos permiten almacenar recursos o contenidos en Internet, compartirlos y visualizarlos cuando nos convenga. Constituyen una inmensa fuente de recursos y lugares donde publicar materiales para su difusión mundial. Existen de diversos tipos, según el contenido que albergan o el uso que se les da:

Documentos: Google Drive y Office Web Apps (SkyDrive), en los cuales podemos subir nuestros documentos, compartirlos y modificarlos.

Videos: Youtube, Vimeo, Dailymotion, Dalealplay... Contienen miles de vídeos subidos y compartidos por los usuarios.

Fotos: Picassa, Flickr... Permiten disfrutar y compartir las fotos también tenemos la oportunidad de organizar las fotos con etiquetas, separándolas por grupos como si fueran álbumes, podemos seleccionar y guardar aparte las fotos que no queremos publicar.

Agregadores de noticias: Digg, Meneame... Noticias de cualquier medio son agregadas y votadas por los usuarios.

Almacenamiento online: Dropbox, Google Drive, SkyDrive

Presentaciones: Prezzi, Slideshare.

Plataformas educativas

Aulas virtuales (síncronas)

Encuestas en línea



HTML5HTML5 es la quinta revisión de HTML (Hyper Text Markup Language). HTML5 está en desarrollo ya por algún tiempo y parecía lejano el día de cuando comencemos a utilizarlo, ahora ya estamos llegando al momento de cuando esto se convierta una práctica común entre los desarrolladores aunque muchos predicen que recién el 2022 se hará un uso masivo de ello, pero a pesar de ello ya existen navegadores con soporte completo del HTML5.

Los webmasters ven esto como un gran paso hacia el desarrollo de aplicaciones ricas en multimedia y con mejores prestaciones. HTML5 cambiará la manera que trabajamos con el HTML ya que se convertirá en un estándar de codificación y no únicamente un markup para HTML4 sino un nuevo lenguaje HTML5 que hará más sencillo su uso para todos incluyendo navegadores y desarrolladores; ya existen muchos ejemplos hechas en Javascript y algunas APIs que ya utilizan el estándar a venir “HTML5.”

HTML5 especifica dos variantes de sintaxis para HTML: un clásico HTML (text/html), la variante conocida como HTML5 y una variante XHTML conocida como sintaxis XHTML5 que deberá ser servida como XML (XHTML) (application/xhtml+xml) y es la primera vez que HTML y XHTML se han desarrollado en paralelo, cuyo desarrollo está siendo regulado por el consorcio W3C.

La mayoría de los sitios están basadas en HTML y utilizan HTML 4, pero esto irá cambiando en los próximos meses y años, hasta ahora el código HTML apenas ha evolucionado de la versión HTML 2.0 únicamente corrigiendo algunos problemas hasta la versión HTML 4, junto a algunas nuevas características; HTML 5 se basa en el HTML 4 pero por su propia cuenta será completamente diferente y cambiará la manera que su navegador muestre los sitios web en el monitor de su PC. HTML 5 tendrá mayor inclinación al uso de JavaScript, y si tiene Javascript deshabilitado las páginas se mostrarán incorrectamente.

Nuevos elementos

HTML5 incluye un conjunto de nuevos elementos y atributos principalmente originados por las formas típicas de uso de los sitios web modernos. Algunos elementos son técnicamente similares a las etiquetas <div> y <span>, pero tienen un significado semántico, por ejemplo <nav> es un bloque de navegación del sitio web y <footer> la parte inferior de la página. Hay otros elementos nuevos que proporcionan nuevas funcionalidades a través de una interfaz estandarizada, como los elementos <audio> y <video> que además están disponibles en Javascript. Por otra parte se mejoró bastante el elemento <canvas>.


http://es.wikipedia.org/wiki/W3C


Algunos elementos de HTML 4.01 han quedado obsoletos tales como <font> y <center>, ya que las hojas de estilo son totalmente suficientes para ello. Y se enfatiza bastante en la importancia del scripting DOM para el comportamiento de la web.

Diferencias con HTML 4 y XHTMLNuevos elementos: article, dialog

Nuevos atributos: media, ping, autofocus, inputmode, min, max, pattern.

Elementos eliminados: acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, s, strike, tt, u

Atributos eliminados:

rev y charset en <link> y <a>

target en <link>

nohref en <area>

profile en <head>

version en <html>

name en <map>

scheme en <meta>

archiv, classid, codetype, declare y standby en <object>

valuetype en <param>

charset en <script>

summary en <header>

axis y abrr en <td> y <th>



La siguiente imagen muestra la actual manera de hacerla con HTML 4



La siguiente figura muestra de cómo se haría lo mismo con HTML 5



Como se nota, la última manera resultará siendo más limpia puesto que HTMl 5

efectivamente hace más sencillo estructurar una página web utilizando los nuevos

elementos. Una vez que la mayoría de los navegadores soporten HTML 5 la web será

más rica y más veloz.

Navegadores compatibles con HTML 5

Con el creciente interés en HTML 5 muchos navegadores se están perfilando a ese

aspecto, actualmente Webkit (Safari, Google Chrome, Shiira, iCab4, …) es totalmente

compatible con el HTML5, Mozilla Firefox 3.5 soporta pero no es 100% compatible

mientras que como siempre Microsoft Internet Explorer todavía no reconoce el HTML 5

aunque comentan que para su versión 9 ya lo hará.

Elementos HTML 5



Tag Descripción

<comment> Define un comentario

<!DOCTYPE> Define el tipo de documento

<a> Define un enlace

<abbr> Define una abreviatura

<address> Define un elemento de dirección

<area> Define un área dentro de una imagen

<article> Define un artículo

<aside> Define el contenido de al lado (sidebar)

<audio> Define contenido de sonido

<b> Define texto en negrita

<base> Define una URL base para todos los enlaces en una página

<bdo> Define la dirección del texto a mostrar

<blockquote> Define un bloque de cita

<body> Define el elemento BODY

<br> Define un salto de línea

<button> Define un botón

<canvas> Define un área para manipular(generar) gráficos

<caption> Define una etiqueta para una tabla

<cite> Define una citación

<code> Define un texto de código

<col> Define los atributos para las columnas de una tabla

<colgroup> Define grupos de columnas de la tabla

<command> Define un botón de comandos

<datagrid> Define datos en una lista-árbol

<datalist> Define una lista desplegable

<datatemplate> Define una plantilla de datos

<dd> Define una descripción de definiciones

<del> Define un texto eliminado

<details> Define los detalles de un elemento

<dialog> Define una diálogo(conversación)

<div> Define una sección en un documento

<dfn> Define un término de definición

<dl> Define una lista de definiciones

<dt> Define un término de definiciones

<em> Define texto enfatizado



<progress> Define el progreso de un tarea de cualquier tipo

<q> Define una cita corta

<rule> Define las reglas para actualizar una plantilla

<samp> Define código de ejemplo

<script> Define un script

<section> Define una sección

<select> Define una lista de selección

<small> Define texto pequeño

<source> Define orígenes de medios

<span> Define una sección en un documento

<strong> Define texto en negrita

<style> Define una definición de estilos

<sub> Define texto subscript (posicionado más abajo)

<sup> Define texto superscript (posicionado más arriba)

<table> Define una tabla

<tbody> Define el cuerpo de la tabla

<td> Define una celda de tabla

<textarea> Define un área de texto (memo)

<tfoot> Define el pie de una tabla

<th> Define el encabezado de una tabla

<thead> Define el encabezado de una tabla

<time> Define la fecha/hora

<title> Define el título del documento

<tr> Define una fila de una tabla

<ul> Define una lista desordenada

<var> Define una variable

<video> Define un vídeo



Atributo Valor Descripción

class nombre de clase Especifica un nombre de clase para un

elemento (utilizado en una hoja de estilo

CSS)

contenteditable true, false Especifica si un usuario puede o no editar el

contenido

contextmenu menu_id Especifica el menú contextual para un

elemento

dir ltr, rtr Especifíca la dirección del texto en un

elemento

draggable true, false, auto Especifica si un usuario puede o no mover

un elemento

id id Especifica un único nombre de identificación

para un elemento

irrelevant true, false Especifica si un elemento es irrelevante, si lo

es, dicho elemento no se muestra

lang código de idioma Especifica un idioma para el contenido de un

elemento

ref URL, id Especifica una referencia a otro documento /

otra parte de un documento (usado

únicamente si se estableció el

atributo template)

registrationmark marca de registro Especifica una marca de registro para un

elemento

style definición de estilo Especifica un estilo en línea para un

elemento

tabindex número Especifica el orden de tabulación de un

elemento

template URL, id Especifica una referencia a otro documento /



otra parte de un documento que deba ser

aplicada a un elemento

title texto Especifica información extra acerca de un

elemento

Conclusiones

Se estableció una serie de procedimientos que nos ayudan a poder realizar aplicaciones de interfaz gráfica. Con contenido extenso y acciones muy dedicadas que se podrían emplear en todas las funciones establecidas.



Referencias Bibliograficas

http://es.wikipedia.org/wiki/JavaScript

http://es.wikipedia.org/wiki/JQuery

http://es.wikipedia.org/wiki/HTML5

http://www.desarrolloweb.com/articulos/que-es-html5.html


resultado de aprendizaje

Documents