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 tecnológica?
social
o
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 correspondencia temporal con otro suceso.
que
no
tiene
lugar
en
total
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
Conceptos de CSS 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. 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. Estilos.css Pagina.html <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; }
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.
Sintaxis Por ejemplo:
H1 {align: left;} 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;}
Sintaxis
P {align: center;} P {color: #ff0000;}
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; }