Resultado de aprendizaje

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

Universidad Tecnológica del Sureste de Veracruz
Tecnologías de la Información y Comunicación

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


Página 1


Índice de Contenidos
Índice

2

Objetivo

3

Introducción

4

I.

Desarrollo de la Práctica

II.

5

Investigación

Conclusiones

22

Referencias Bibliográficas

24

Anexos


Página 2


Introducción
En 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


Página 3


I

DESARROLLO DE
LA PRÁCTICA


Página 4


I

DESARROLLO DE
LA PRÁCTICA


Página 5



Página 6



Página 7



Página 8


2
INVESTIGACIÓN


Página 9


RIA
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 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 RIA
Generalmente 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.

Cliente
Se 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.


Página 10


Servidor
Aquí 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 RIA
Consisten 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.


Página 11


Beneficios
A 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.


Página 12


Web 2.0
El 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,
losservicios
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.0
Para 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


Página 13


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


Página 14


HTML5
HTML5 es la quinta revisión de HTML (Hyper Text MarkupLanguage). 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>.


Página 15

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 XHTML
Nuevos elementos: article, dialog
Nuevos atributos: media, ping, autofocus, inputmode, min, max, pattern.
Elementoseliminados: 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>


Página 16


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


Página 17

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


Página 18


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


Página 19


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>
<b>

Define contenido de sonido

<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>
<caption>

Define un área para manipular(generar) gráficos

<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>
<dd>

Define una plantilla de datos

<del>

Define un texto eliminado

<details>

Define los detalles de un elemento

<dialog>
<div>

Define una diálogo(conversación)

<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

<embed>

Define contenido externo interactivo o un plugin

<eventsource>
<fieldset>

Define un destino para los eventos enviados por un servidor

<figure>

Define un grupo de contenido de medios, y sus etiquetas

<footer>

Define un pie para la sección o página

Define texto en negrita

Define una etiqueta para una tabla

Define una descripción de definiciones

Define una sección en un documento

Define un campo establecido


Página 20

<form>

Define un formulario

<h1> a <h6>

Define encabezados 1 a 6

<head>

Define información acerca del documento

<header>
<hr>

Define un encabezado para la sección o página

<html>

Define el documento HTML

<i>

Define texto en cursiva

<iframe>

Define una sub ventana (frame)

<img>

Define una imagen

<input>

Define un campo de entrada

<ins>

Define texto insertado

<kbd>

Define texto de teclado

<label>

Define una etiqueta para un control de un formulario

<legend>

Define un título en un <fieldset>

<li>

Define un ítem de lista

<link>

Define una referencia a un recurso

<mark>
<map>

Define un texto marcado

<menu>

Define una lista menú

<meta>

Define información relevante

<meter>

Define las medidas dentro de un rango predefinido

<nav>

Define enlaces de navegación

<nest>

Define un punto de anidación en una plantilla de datos

Define una linea horizontal

Define un mapa para una imagen

<datatemplate>
<noscript>

Define una sección sin scripts

<object>

Define un objeto a embeber

<ol>

Define una lista ordenada

<optgroup>

Define un grupo de opciones

<option>

Define una opción en una lista desplegable

<output>
<p>

Define algunos tipos de salida

<param>

Define un parámetro para un objeto

<pre>

Define texto preformateado

<progress>
<q>

Define el progreso de un tarea de cualquier tipo

<rule>
<samp>

Define las reglas para actualizar una plantilla

<script>

Define un script

<section>
<select>

Define una sección

<small>

Define texto pequeño

<source>
<span>

Define orígenes de medios

Define un párrafo

Define una cita corta
Define código de ejemplo

Define una lista de selección

Define una sección en un documento


Página 21

<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

<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>
<title>

Define la fecha/hora

<tr>

Define una fila de una tabla

<ul>

Define una lista desordenada

<var>

Define una variable

<video>

Define un vídeo

más arriba

)

Define el título del documento


Página 22

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


Página 23


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 sepodrían emplear en
todas las funciones establecidas.


Página 24


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


Página 25

Resultado de aprendizaje

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (18)

Similar a Resultado de aprendizaje

Similar a Resultado de aprendizaje (20)

Resultado de aprendizaje