Profesor: Jorge Cortés Gallardo - 2011

¿Qué es la ?

La Web 2.0 es la representación de la evolución de las aplicaciones tradicionales

hacia aplicaciones web enfocadas al usuario final. El Web 2.0 es una actitud y no

precisamente una tecnología.

La Web 2.0 es la transición que se ha dado de aplicaciones tradicionales hacia

aplicaciones que funcionan a través del web enfocadas al usuario final. Se trata

de aplicaciones que generen colaboración y de servicios que reemplacen las

aplicaciones de escritorio.

Es una etapa que ha definido nuevos proyectos en Internet y está preocupándose

por brindar mejores soluciones para el usuario final. Muchos aseguran que hemos

reinventado lo que era el Internet, otros hablan de burbujas e inversiones, pero la

realidad es que la evolución natural del medio realmente ha propuesto cosas más

interesantes.

Reconfiguración social o tecnológica

El concepto Web 2.0 significa una evolución de la web, pero es un cambio desde

el cerebro de cada uno de los usuarios de Internet significa una nueva

reconfiguración en la disposición de recursos, interacción entre usuarios y la

conformación de redes sociales.

La web 2.0 es el resultado de una evolución que ha tenido la red de redes en los

últimos años, ya que actualmente ofrece la posibilidad de utilizar una gran

cantidad de recursos de software gratuito, disponible desde web, para publicar

información en conjunto.

Se trata de un cambio de actitud y una reconfiguración ideológica de la

organización y uso de la web. En la actualidad ya estamos viviendo esta nueva

forma de concebir la web y los recursos que puede ofrecernos. En estos días ya

podemos acceder a sitios que te brindan los recursos gratuitos y libres en la web

para publicar información, comunicarte y crear imágenes.

¿De dónde viene el término ?

Dale Dougherty de O’Reilly dió a conocer este término, en el año 2004 se realizó la

primer Conferencia sobre la Web 2.0 y desde entonces se ha venido organizando

este evento año con año en el mes de octubre.

¿Reconfiguración social o

tecnológica?

Tal es el caso de los mensajeros en línea, los blogs para publicar información,

las Wikis, todos ellos funcionan con tecnología inserta en los sitios web, por lo que

los usuarios no tienen que hacer ninguna descarga.

Será el usuario quien publicará los contenidos, quien los administrará y quien se

otorgará la debida seriedad. Tal es el caso de los blogs, pues son los usuarios

quienes con el tratamiento de la información que le den pueden dar veracidad o

nulidad al contenido.

¿Qué tecnologías apoyan a la ?

El Web 2.0 no significa precisamente que existe una receta para que todas nuestras

aplicaciones web entren en este esquema. Sin embargo, existen varias tecnologías

que están utilizándose actualmente y que deberíamos de examinar con más cuidado

en busca de seguir evolucionando junto al web.

Tecnologías que dan vida a un proyecto Web 2.0:

• Transformar software de escritorio hacia la plataforma del web.

• Respeto a los estándares como el XHTML.

• Separación de contenido del diseño con uso de hojas de estilo.

• Sindicación de contenidos (RSS).

• Ajax (javascript ascincrónico y xml).

• Uso de Flash, Flex o Lazlo.

• Uso de Ruby on Rails para programar páginas dinámicas.

• Utilización de redes sociales al manejar usuarios y comunidades.

• Dar control total a los usuarios en el manejo de su información.

• Proveer APis o XML para que las aplicaciones puedan ser manipuladas por otros.

• Facilitar el posicionamiento con URL sencillos.

¿En qué nos sirve la Web ?

El uso de el término de Web 2.0 está de moda, dándole mucho peso a una

tendencia que ha estado presente desde hace algún tiempo. En Internet las

especulaciones han sido causantes de grandes burbujas tecnológicas y han

hecho fracasar a muchos proyectos.

Además, nuestros proyectos tienen que renovarse y evolucionar. El Web 2.0 no

es precisamente una tecnología, sino es la actitud con la que debemos trabajar

para desarrollar en Internet. Tal vez allí está la reflexión más importante del Web

2.0.

Yo ya estoy trabajando en renovar y mejorar algunos proyectos, no por que

busque etiquetarlos con nuevas versiones, sino por que creo firmemente que la

única constante debe ser el cambio, y en Internet, el cambio debe de estar

presente más frecuentemente.

Asincronía

Asincronía Hace referencia al suceso que no tiene lugar en total

correspondencia temporal con otro suceso.

Por ejemplo podemos hablar de motor asíncrono a aquel cuya velocidad de

rotación no corresponde con la frecuencia de corriente alterna que lo hace

funcionar.

Dos señales son asíncronas o no están sincronizadas, cuando sus

correspondientes instantes significativos no coinciden. modo de transmisión de

datos en el que el instante de emisión de cada carácter o bloque de caracteres se

fija arbitrariamente, sincronizando con Start-Stop.

Asincronía

Modelo Síncrono

Modelo Asíncrono

Las hojas de estilo en

cascada (en inglés Cascading Style Sheets), CSS

es un lenguaje usado para definir la presentación de

un documento estructurado escrito

en HTML o XML (y por extensión en XHTML).

El W3C (World Wide Web Consortium) es el

encargado de formular la especificación de las hojas

de estilo que servirán de estándar para los agentes

de usuario o navegadores.

Conceptos de CSS

La idea que se encuentra detrás del desarrollo de CSS es separar

la estructura de un documento de su presentación.

Los tres tipos de estilos

Una hoja de estilo interna, que es una hoja de estilo que está incrustada

dentro de un documento HTML. (Va a la derecha dentro del elemento <head>.)

De esta manera se obtiene el beneficio de separar la información del estilo del

código HTML propiamente dicho. Se puede optar por copiar la hoja de estilo

incrustada de una página a otra (esta posibilidad es difícil de ejecutar si se

desea para guardar las copias sincronizadas).

<html>

<head>

<title>Documento sin título</title>

<style type="text/css">

h1

{

color:#F00;

background-color:#FF0;

}

</style>

</head>

<body>

<h1>Este mensaje es de color rojo sobre fondo amarillo.</h1>

</body>

</html>

Una hoja de estilo externa, es una hoja de estilo que está almacenada en un

archivo diferente al archivo donde se almacena el código HTML de la página Web.

Esta es la manera de programar más potente, porque separa completamente las

reglas de formateo para la página HTML de la estructura básica de la página.

<html>

<head>

<title>Problema</title>

<link rel="StyleSheet" href="estilos.css" type="text/css">

</head>

<body>

<h1>Definición de hojas de estilo en un archivo externo.</h1>

<p> Texto </p>

</body>

</html>

body {

background-color:#eafadd;

}

h1{

color:#0000cc;

font-family:times new roman;

font-size:25px;

text-align:center;

text-decoration:underline;

}

p{

color:#555555;

font-family:verdana;

text-align:justify;

}

Pagina.html Estilos.css

Un estilo en línea (inline) es un método para insertar el lenguaje de estilo de

página directamente dentro de una etiqueta HTML. Esta manera de proceder no

es totalmente adecuada. El incrustar la descripción del formateo dentro del

documento de la página Web, a nivel de código, se convierte en una manera

larga, tediosa y poco elegante de resolver el problema de la programación de la

página. Este modo de trabajo se podría usar de manera ocasional si se

pretende aplicar un formateo con prisa, al vuelo. No es todo lo claro o

estructurado que debería ser, pero funciona. Éste es el método recomendado

para maquetar correos electrónicos en HTML.

<DIV STYLE="font-size:18px; font-family:arial; color:red">

Este texto tiene color azul

</DIV>

Ventajas de usar las hojas de estilo

Las ventajas de utilizar CSS (u otro lenguaje de estilo) son:

Control centralizado de la presentación de un sitio web completo con lo que se

agiliza de forma considerable la actualización del mismo.

Los navegadores permiten a los usuarios especificar su propia hoja de estilo local,

que será aplicada a un sitio web, con lo que aumenta considerablemente la

accesibilidad. Por ejemplo, personas con deficiencias visuales pueden configurar su

propia hoja de estilo para aumentar el tamaño del texto o remarcar más los enlaces.

Una página puede disponer de diferentes hojas de estilo según el dispositivo que la

muestre o, incluso, a elección del usuario. Por ejemplo, para ser impresa, mostrada

en un dispositivo móvil o ser "leída" por un sintetizador de voz.

El documento HTML en sí mismo es más claro de entender y se consigue reducir

considerablemente su tamaño (siempre y cuando no se utilice estilo en línea).

Sintaxis

La sintaxis básica de CSS es muy simple e intuitiva. Consta de una serie

de Reglas que describen la forma en que se visualiza cada uno de los

elementos del siguiente modo:

Selector {Propiedad: Valor;}

Por ejemplo:

H1 {align: left;}

A la primera parte (fuera de los corchetes) se le llama Selector, y es la que

indica a qué elemento HTML afectará (en este caso a las cabeceras de nivel 1).

Lo que hay entre los corchetes es lo que se denomina Declaración, y es donde

indicamos cómo se va a ver el selector.

La declaración está formada a su vez por una Propiedad ( en el caso de arriba

align, alineación) a la que se asigna un Valor (left, izquerda, en el ejemplo).

O sea, lo que dice la regla de arriba es que queremos que las cabeceras de primer

nivel aparezcan alineadas a la izquierda.

Si quisiéramos que los párrafos aparecieran centrados y en cloror rojo, podríamos

escribir esto:

P {align: center;}

P {color: #ff0000;}

Por ejemplo:

H1 {align: left;}

Sintaxis

Con la primera regla indicamos que queremos una alineación centrada y con la

segunda asignamos el color rojo.

Pero este modo es poco eficiente. Si queremos especificar varias propiedades

tendremos que repetir la línea muchas veces. Para simplificar esto, CSS permite

unir varias declaraciones en una misma regla, de modo que lo anterior se podría

escribir, de forma mucho más clara y concisa, del siguiente modo:

P {align: center; color: #ff0000;}

Que tiene exactamente el mismo significado. Fíjense bien en que las declaraciones

se separan unas de otras por medio del signo "punto y coma" ( ; ), y que cada

propiedad se separa de su valor por medio del signo "dos puntos" ( : ). También se

podría haber escrito en la forma:

P {

align: center;

color: #ff0000;

}

Sintaxis P {align: center;}

P {color: #ff0000;}