lunes, 23 de marzo de 2015
Ejemplo de Pagina Web
Les dejare un link de una pagina web realizada utilizando como editor web Sublime Text 2:
Descargue la carpeta "Ejemplo" y ejecute el archivo index.html, para poder visualizar la pagina.
;)
Download
Lenguaje de Marcado
2.1 Introducción
Un lenguaje de marcas es un conjunto de palabras o marcas que se colocan junto al texto de un documento para especificar una propiedad del mismo.
Ejemplo: <negrita>Diseño de páginas web</negrita> <título>Diseño de páginas web</título>
Un tipo de dato es una propiedad o atributo que determina las características y
dominios, funciona en operaciones a las cuales se pueden aplicar, es decir, los
tipos de datos varían en junto con el lenguaje de programación que se utiliza, al
igual que sus estructuras lógicas debido a los compiladores de información que
determina cada software. Los tipos de datos pueden ser;
• Números enteros
• Números reales
• Valores lógicos
• Texto
• Nulo
• Etc.
Es importante conocer todos los tipos de datos para saber en qué lugar se
pueden aplicar de mejor forma y obtener resultados óptimos.
<header>: Delimita el encabezado visible del sitio dentro de esta etiqueta generalmente encontraremos el menú, logotipo, y encabezados del sitio.
<nav>: Dentro de nav pondremos siempre las ligas más importantes del sitio.
<aside> Representa una sección de una página que consiste en contenido que está tangencialmente relacionado con el contenido que le rodea, que podría ser considerado independiente de ese contenido.
<section> se usa para representar un bloque de nuestra página que tiene valor semántico, es decir, que aporta un significado a la página. Realmente si tenemos que clasificar por la importancia del significado, el ranking sería: article sería la etiqueta que contiene la información más relevante, section la que contiene información menos relevante, y div que contiene información que no aporta significado ninguno.
Un aspecto importante de la etiqueta section es que debe tener un título. La etiqueta section crea una sección de manera explícita en el outline del documento, por lo tanto debemos siempre asignarle un encabezado (h1-h6) ya que si no se le aplicará directamente untitle.
Por lo tanto, una buena forma de identificar cuando es necesario usar una etiqueta section es cuando tengamos la necesidad de aplicar un encabezado.
<article> representa una composición auto-contenida en un documento, página, una aplicación o en el sitio, que se destina a distribuir de forma independiente o reutilizable, por ejemplo, en la sindicación. Podría ser un mensaje en un foro, un artículo de una revista o un periódico, una entrada de blog, un comentario de un usuario, un widget interactivo o gadget, o cualquier otro elemento independiente del contenido.
Cuando los elementos <article> están anidados, los internos representan artículos relacionados con el exterior. Por ejemplo, los comentarios de un blog pueden ser elementos <article> anidados al que representa la entrada del blog.
Los datos del autor de un elemento <article> pueden ser proporcionados a través del elemento <address>, pero no se aplica a los elementos <article> anidados.
La fecha de publicación y el tiempo de un elemento <article> pueden ser descritos con el atributo pubdate atributo de un elemento <time>.
<address>. Es el elemento encargado de contener la información de contacto con los autores del documento.
<footer>: dentro de footer generalmente se ponen cosas como otras ligas, derechos de autor etc, pero no es exclusivo, podemos usarlos para desplegar lo que necesitemos, siempre y cuando este en el 'pie' de la pagina
<form name='nombre' method='get/post'
action='url' target = '_blank/_self'
enctype = 'x-www-form-urlencoded'>
...Cuerpo del formulario
</form>
Fuentes
Un lenguaje de marcas es un conjunto de palabras o marcas que se colocan junto al texto de un documento para especificar una propiedad del mismo.
Ejemplo: <negrita>Diseño de páginas web</negrita> <título>Diseño de páginas web</título>
HTML es un lenguaje de marcas orientado a la publicación de documentos en Internet. La mayoría de las marcas son semánticas. HTML es un lenguaje extensible , al que se le pueden añadir nuevas características, marcas y funciones.
Los documentos HTML están formados por una serie de bloques de texto con una entidad lógica (titulares, párrafos, listas, ...). La interpretación de estas entidades se deja al navegador, lo cual da una gran flexibilidad a la presentación del documento, que puede ser mostrado, por ejemplo, en terminales gráficos o de texto.
El HTML, es el lenguaje que permite diseñar los hipertextos. Hoy en día, la mayoría de los procesadores de textos disponen de opciones para guardar los documentos en este formato, por lo que no presenta dificultad.
Los documentos HTML están formados por una serie de bloques de texto con una entidad lógica (titulares, párrafos, listas, ...). La interpretación de estas entidades se deja al navegador, lo cual da una gran flexibilidad a la presentación del documento, que puede ser mostrado, por ejemplo, en terminales gráficos o de texto.
El HTML, es el lenguaje que permite diseñar los hipertextos. Hoy en día, la mayoría de los procesadores de textos disponen de opciones para guardar los documentos en este formato, por lo que no presenta dificultad.
Si queremos incluir efectos complicados, con imágenes en tres dimensiones, sonidos, imágenes en movimiento, consultar bases de datos, etc. entonces debemos utilizar un verdadero lenguaje de programación, como Java , ideal para Internet pues tiene la ventaja de que funciona independientemente de la plataforma (mac, pc, unix, etc.) donde se ejecuta.
Elementos
Cada elemento de un documento HTML consta de una marca de comienzo, un bloque de texto y una marca de fin. <MARCA>bloque de texto</MARCA>. Por ejemplo, <H1>Titular de nivel 1</H1>
Estos elementos se denominan contenedores , porque contienen un bloque de texto entre las dos marcas. También existen elementos vacíos , que no afectan a bloques de texto y, por tanto, no contienen marca de fin.
Por ejemplo, línea 1 <BR> línea 2
Por ejemplo, línea 1 <BR> línea 2
Atributos
Muchos elementos tienen atributos que definen propiedades del elemento: <MARCA ATRIBUTO="VALOR"> bloque de texto </MARCA>. Por ejemplo, <H1 ALIGN="CENTER">Titular de nivel 1 centrado</H1>
Es recomendable encerrar los valores de los atributos entre comillas dobles. En algunos casos es además obligatorio (por ejemplo, si contienen espacios en blanco).
Distinción entre mayúsculas y minúsculas
HTML no distingue entre mayúsculas y minúsculas. Cuando es importante hacerlo, cosa que puede ocurrir con los valores de algunos atributos (por ejemplo, nombres de ficheros), es preciso encerrar el valor entre comillas dobles. Por ejemplo, <IMG ALT="" SRC="BolaRoja.gif">
Comentarios
Los comentarios se escriben en HTML de la siguiente forma: <!-- Esto es un comentario -- >. Los caracteres de inicio del comentario, <!-- deben ir juntos, pero se permiten espacios entre los -- y el > del final. Los comentarios pueden expandirse varias líneas, aunque no es conveniente porque algunos visualizadores pueden no interpretarlos.
Interpretación de espacios, tabulaciones y retornos de carro
Los espacios, tabulaciones, líneas en blanco y retornos de carro del documento HTML se ignoran, tomándose como un único espacio en blanco. Esto permite añadir espacios para aumentar la claridad del documento. Cuando se quiere forzar un espacio en blanco, se hace de la siguiente forma:
Estructuración
HTML es un lenguaje estructurado. Existen unas reglas estructurales sobre dónde pueden y no pueden ir los elementos. Por ejemplo,
- Ciertos elementos no pueden contener otros elementos. Por ejemplo, no es correcto colocar un titular dentro de otro. Además, tampoco tiene sentido hacerlo. <H1><H2>Texto</H2></H1>
- Los elementos no se pueden solapar. No es correcto escribir <EM><H1>Texto</EM></H1>
Estructura de un documento HTML
<HTML>
<HEAD> ... Encabezamiento del documento </HEAD>
<BODY> ... Cuerpo del documento </BODY>
</HTML>
<HEAD> ... Encabezamiento del documento </HEAD>
<BODY> ... Cuerpo del documento </BODY>
</HTML>
Elementos más importantes del encabezamiento : TITLE y META.
<TITLE>Título de la página</TITLE>
<META NAME="description" CONTENT="Página dedicada al diseño eficiente de páginas web para internet mediante el lenguaje HTML y otras herramientas auxiliares">
<META NAME="keywords" CONTENT="web diseño HTML hipermedia">
<META HTTP-EQUIV="refresh" CONTENT="5; URL=http://dominio/pagina2.html">
<META HTTP-EQUIV="expires" CONTENT="Fri, 05 Jan 2001 13:00:00 GMT">
<TITLE>Título de la página</TITLE>
<META NAME="description" CONTENT="Página dedicada al diseño eficiente de páginas web para internet mediante el lenguaje HTML y otras herramientas auxiliares">
<META NAME="keywords" CONTENT="web diseño HTML hipermedia">
<META HTTP-EQUIV="refresh" CONTENT="5; URL=http://dominio/pagina2.html">
<META HTTP-EQUIV="expires" CONTENT="Fri, 05 Jan 2001 13:00:00 GMT">
El cuerpo del documento viene a continuación del encabezamiento, y contiene todo el texto y material del documento que se va a mostrar.
<BODY BGCOLOR="color" BACKGROUND="fichero imagen"
TEXT="color" LINK="color" VLINK="color" ALINK="color">
...
</BODY>
<BODY BGCOLOR="color" BACKGROUND="fichero imagen"
TEXT="color" LINK="color" VLINK="color" ALINK="color">
...
</BODY>
El formato de los colores se puede especificar de dos maneras distintas:
- Mediante el nombre del color. Por ejemplo, aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow (y otros 124 colores extendidos).
- Mediante la intensidad , en hexadecimal, de los componentes RGB (rojo, verde, azul) del color: #RRGGBB (siendo 00 la intensidad nula y FF el máximo brillo).
2.2. Representación de documentos.
La representación de documentos es útil para poder procesarlos y recuperar
información necesaria.
El objetivo de la representación de los documentos es el de traducir los mismos
a términos del sistema, es decir la codificación necesaria con la cual este
comprenda la información y la represente a los usuarios que la soliciten, los
documentos son alojados en un servidor el cual tiene el soporte necesario para
contenerlos y ejecutarlos cuando sea requerido. Esta representación se lleva a cabo mediante simplificaciones y generalizaciones que presentarán una vista
lógica de los mismos.
Cuando se habla de la representación de documentos HTML, se trata desde otro
enfoque, ya que se revisan las estructuras del diseño, el peso del mismo por la
organización de datos y contenidos. La información que se requiere para el
análisis del mismo se encuentra en el diseño maestro de la misma página o
documento en el que se determina las características de la estructura, como; el
número de páginas principales, el contenido de la página maestra, el número de
menús existentes, las opciones dentro de cada menú, las ramificaciones de cada
página y el diseño que tendrá cada contenido desde el marco principal o las
divisiones que mostrará cada uno.
2.3. Tipos de datos básicos.
dominios, funciona en operaciones a las cuales se pueden aplicar, es decir, los
tipos de datos varían en junto con el lenguaje de programación que se utiliza, al
igual que sus estructuras lógicas debido a los compiladores de información que
determina cada software. Los tipos de datos pueden ser;
• Números enteros
• Números reales
• Valores lógicos
• Texto
• Nulo
• Etc.
Es importante conocer todos los tipos de datos para saber en qué lugar se
pueden aplicar de mejor forma y obtener resultados óptimos.
¿Para qué son los tipos de datos básicos?
Los tipos de datos básicos se clasifican según la forma en que se utilicen y
pueden cambiar conforme el lenguaje en que se apliquen, sin embargo existe
una gran similitud entre todos estos ya que la mayoría se basan en C++.
Algunos lenguajes no se basan en C++, pues su estructura de programación es
más sencilla y no requiere de una lógica tan grande en los scripts, por ejemplo
HTML, tiene una sencilla aplicación que solo describe la formación del
documento con etiquetas las cuales solo contienen el nombre de lo que se está
realizando.
Actualmente los tipos de datos son aplicados en diferentes medios y plataformas,
es decir, debido a la naturaleza de los datos se crean aplicaciones que son
utilizadas en la web, calculadora, sistemas operativos, aplicaciones móviles, etc.
Lo que permite tener una gran variedad en el desarrollo y gran potencia de uso
en las mismas ya que con los scripts, se pueden mejorar o potenciar los
sistemas sin tener que agregar más piezas de hardware. Por ejemplo, la
empresa Nvidia® en los sistemas gráficos que utiliza, aplican núcleos de
procesamiento los cuales no se aprovechaban concretamente, por lo que en el
cambio y evolución de tecnologías se desarrolla un sistema llamado CUDA® el
cual es una pieza de código que aprovecha los núcleos del sistema grafico y los
potencia mejorando el rendimiento de las vistas 3d y aumentando la velocidad
de sistema.
¿Qué quiere decir esto?
Lo que se quiere dar a notar, es que la programación dependiendo de los tipos
de datos puede mejorar o no un sistema, cuando se comprenden los datos es
fácil entender el desarrollo de cualquier script. Los datos actualmente se utilizan
para aplicaciones web, gracias a la evolución de los dispositivos móviles, pues la
demanda aumenta cada día, estos datos pueden formar mapas, datos de geo
localización, información de consultas médicas en tiempo real, etc.
Algunos de los tipos de datos más utilizados son; numero enteros, números
reales, valores lógicos, strings, nulo, double, byte, etc.
2.4. Estructura global de un documento.
La estructura de un documento nos permitirá conocer el inicio y el final del
mismo, sin dejar a un lado los contenidos, los tamaños de la hoja y el margen
con el que contará y se divide en zonas principales que son;
• Cabeza
• Titulo
• Cuerpo
Dentro de los apartados el contenido el distinto y puede manejar un número
mayor de etiquetas y clasificaciones que se complementas con lenguajes de
programación como java, CSS3 y otros más. Todo lo que se encuentra dentro de
este documento se puede localizar mediante exploradores de internet siempre y
cuando se cumpla con los requerimientos de localización de documentos.
Las características de los documentos se pueden modificar dependiendo del
lenguaje de programación con el que se trabaje, es decir, no es la misma
estructura de un documento XML, HTML, PHP, MYSQL, SAP, las diferencias se
notarán en la sintaxis de cada uno y las instrucciones y manejos de códigos con
los que se cuenten.
Al hablar de un documento en general, sin intervenir en HTML o cualquier
lenguaje de programación, podemos notar que la estructura es la misma, cuenta
con un título o encabezado, el contenido o cuerpo y dentro del contenido se
puede aplicar información adicional como imágenes, citas, tablas, etc.
Es importante conocer los lenguajes de programación que se pueden acoplar a
otros y la codificación que requiere como UTF8 o ASSCI, para saber los riesgos
de incompatibilidad posibles dentro de cada elemento.
2.5. Elementos básicos: texto, vínculos, listas, tablas, objetos, imágenes y aplicaciones
Los elementos básicos con los que cuenta un documento HTML, son el medio
por el cual el usuario tiene interacción con la información, los elementos que son
más utilizados son;
Vínculos LENGUAJES DE PROGRAMACIÓN WEB (PHP, HTML5) 5
• Imágenes
• Objetos
• Aplicaciones
Actualmente con evolución de la programación de elementos se pueden apreciar
inclusive animaciones, videos, nuevos elementos como la realidad aumentada y
uso de más widgets.
Todos estos elementos son incluidos en el documento mediante etiquetas en el
código fuente, puede crearse todo de manera manual o con el apoyo de software
de diseño que facilita la creación y modificación de los elementos.
Algunas de las etiquetas que se utilizan para definir los elementos son;
• <div align=”center”>texto centrado</div>
• <U>texto subrayado</U>
• <a href="http://www.htmlquick.com/es/reference/tags/a.html">
• <object type="application/x-shockwaveflash"data=http://direccionweb.comstyle
="width: 425px; height:350px;" >
• <img src="imagen.gif">
2.6. Estructura y disposición.
<header>: Delimita el encabezado visible del sitio dentro de esta etiqueta generalmente encontraremos el menú, logotipo, y encabezados del sitio.
<nav>: Dentro de nav pondremos siempre las ligas más importantes del sitio.
<aside> Representa una sección de una página que consiste en contenido que está tangencialmente relacionado con el contenido que le rodea, que podría ser considerado independiente de ese contenido.
<section> se usa para representar un bloque de nuestra página que tiene valor semántico, es decir, que aporta un significado a la página. Realmente si tenemos que clasificar por la importancia del significado, el ranking sería: article sería la etiqueta que contiene la información más relevante, section la que contiene información menos relevante, y div que contiene información que no aporta significado ninguno.
Un aspecto importante de la etiqueta section es que debe tener un título. La etiqueta section crea una sección de manera explícita en el outline del documento, por lo tanto debemos siempre asignarle un encabezado (h1-h6) ya que si no se le aplicará directamente untitle.
Por lo tanto, una buena forma de identificar cuando es necesario usar una etiqueta section es cuando tengamos la necesidad de aplicar un encabezado.
<article> representa una composición auto-contenida en un documento, página, una aplicación o en el sitio, que se destina a distribuir de forma independiente o reutilizable, por ejemplo, en la sindicación. Podría ser un mensaje en un foro, un artículo de una revista o un periódico, una entrada de blog, un comentario de un usuario, un widget interactivo o gadget, o cualquier otro elemento independiente del contenido.
Cuando los elementos <article> están anidados, los internos representan artículos relacionados con el exterior. Por ejemplo, los comentarios de un blog pueden ser elementos <article> anidados al que representa la entrada del blog.
Los datos del autor de un elemento <article> pueden ser proporcionados a través del elemento <address>, pero no se aplica a los elementos <article> anidados.
La fecha de publicación y el tiempo de un elemento <article> pueden ser descritos con el atributo pubdate atributo de un elemento <time>.
<address>. Es el elemento encargado de contener la información de contacto con los autores del documento.
<footer>: dentro de footer generalmente se ponen cosas como otras ligas, derechos de autor etc, pero no es exclusivo, podemos usarlos para desplegar lo que necesitemos, siempre y cuando este en el 'pie' de la pagina
Ejemplo: Estructura básica de una pagina.
<!DOCTYPE html>
<html lang='es'>
<head>
<meta charset='utf-8' />
<title>Estructura básica de una página web en HTML5</title>
</head>
<body>
<header>
<nav>
<a href='inicio.html'>Inicio</a>
<a href='contacto.html'>Nosotros</a>
<a href='opcion1.html'>Opcion</a>
<a href='opcion2.html'>Opcion</a>
</nav>
</header>
<aside>
<p>Estas secciones son a menudo representadas como barras laterales o como
inserciones y contienen una explicación al margen como una definición de
glosario, publicidad, la biografía del autor,o en aplicaciones web, la
información de perfil o enlaces a blogs relacionados</p>
</aside>
<section>
<p>Un section es una manera de dividir la página por 'secciones' de tal
modo que podemos dividir el contenido de esta por temas</p>
<article>
<h1>El article es la parte mas importante del sitio</h1>
<p>Basicamente en el article pondremos lo más importante de la
página, en orden jerárquico, un article puede tener header y
footer, sin estropear el diseño.</p>
</article>
</section>
<footer>
<p> © Derechos reservados</p>
<p>Contacteme en manny.fco@hotmail.com</p>
</footer>
</body>
</html>
2.7. Formularios.
Los formularios son una característica del estándar HTML que permite a los autores llevar datos del exterior al interior de nuestro sistema. Esto se logra mediante componentes que transportan diversos tipos de datos para múltiples aplicaciones donde tu imaginación es el límite Los formularios están delimitados con la etiqueta <form> ... </form>, que permite reunir varios elementos de formulario, como botones y casillas de texto y que debe poseer los siguientes atributos:
- method indica cómo se enviarán las respuestas "post" es el valor que envía los datos al agente de procesamiento almacenándolos en el cuerpo del formulario, en tanto que "get" envía los datos agregándolos a la dirección URL y separándolos de la dirección con un signo de interrogación.
- action indica la dirección a la que se enviará la información (una url o dirección de correo electrónico: mailto:dirección_de_correo@equipo)
- target nos permite mostrar el resultado en la ventana deseada:
- target = '_blank' Fuerza que el documento referenciado por el enlace sea mostrado en una nueva ventana del navegador.
- target = '_self' El documento referenciado se mostrara en la misma ventana.
La sintaxis genérica para la etiqueta form:
Fuentes
[Videos de Muestra(Los videos son tomados de YouTube, no son de mi autoria)]
video
video
video
video
Arquitectura
1.1. Evolución de las aplicaciones web.
La Web 1.0, comenzó en los años 60`s, y en la Informática, es una frase que se refiere al estado de World Wide Web, este es un sistema de documentos de hipertextos los que van enlazados y que son accesibles gracias a la Internet. Con un navegador Web, los usuarios pueden visualizar sitios Web, los que están compuestos por paginas Web y estos contienen textos, imágenes, videos, etc., y en la cual, los usuarios pueden navegar a través de ellas usando hiperenlaces.
Esta fue creada para describir la Web antes del impacto que tiene el punto com. (2001), que es visto por muchas personas como el momento en que la Internet dio un giro.
Algunas de las características del sitio Web incluyen:
- Libros de visita online o guestbooks.
- Esta pagina ha sido construida dinámicamente a partir de una o varias bases de datos.
- Son páginas estáticas y no dinámicas, por el usuario que las visita.
- Posee formularios HTML, los que son enviados por vía email, en el cual, el usuario llena dicho formulario y luego de hacer clic es enviado mediante un cliente de correo electrónico, con el problema que en el código se pueden observar los detalles del envío del correo electrónico.
- Contienen contenidos que no se pueden actualizar y solo permite su lectura.
La Web 2.0, es una evolución de las aplicaciones tradicionales hacia las aplicaciones aplicadas en la Web. Esta también, es una forma de entender Internet, con la ayuda de nuevas herramientas y de tecnologías de corte informático. Además, se refiere a una nueva generación de webs basadas en la creación de contenidos los que son producidos por sus propios usuarios del portal. En la Web 2.0, además, los consumidores de dicha página son productores de la misma información que consumen.
La Web 2.0, es una herramienta, la que facilita el acceso a las publicaciones de los diferentes contenidos. Y esta a su vez va evolucionando, logrando así una mayor integración social y técnica, la que apunta hacia una mejora en los contenidos mediante una mayor participación comunitaria.
La Web 2.0, consta con las siguientes características:
La Web 4.0 es un nuevo modelo de Web que nace con el objetivo de resolver las limitaciones de la Web actual.
Es necesario un cambio de Paradigma, un nuevo modelo de Web. La Web 4.0 propone un nuevo modelo de interacción con el usuario más completo y personalizado, no limitándose simplemente a mostrar información, sino comportandose como un espejo mágico que de soluciones concretas a las necesidades el usuario.
Web 4.0 es una capa de integración necesaria para la explotación de la Web semántica y sus enormes posibilidades.
Se fundamenta en 4 pilares fundamentales:
Comprensión del lenguaje natural (NLU) y técnicas de Speech-to-text
Nuevos modelos de comunicación máquina-máquina (M2M). La red estará formada por agentes inteligentes en la nube, que serán capaces de comunicarse entre si y delegar la respuesta al agente adecuado.
Uso de información de contexto del usuario. Sentiment análisis, geolocalización, sensores…
Las páginas Web son el componente principal de una aplicación o sitio Web. Los browsers piden páginas (almacenadas o creadas dinámicamente) con información a los servidores Web. En algunos ambientes de desarrollo de aplicaciones Web, las páginas contienen código HTML y scripts dinámicos, que son ejecutados por el servidor antes de entregar la página.
Una vez que se entrega una página, la conexión entre el browser y el servidor Web se rompe, es decir que la lógica del negocio en el servidor solamente se activa por la ejecución de los scripts de las páginas solicitadas por el browser (en el servidor, no en el cliente). Cuando el browser ejecuta un script en el cliente, éste no tiene acceso directo a los recursos del servidor. Hay otros componentes que no son scripts, como los applets (una aplicación especial que se ejecuta dentro de un navegador) o los componentes ActiveX. Los scripts del cliente son por lo general código JavaScript o VBSscript, mezclados con código HTML
¿A quién te imaginas navegando por tu web?
• Utiliza el buscador Google o Utiliza el buscador Google o Yahoo y mira lo que y mira lo que hacen
otras organizaciones o sitios similares: analiza sus
mensajes recoge lo que más te gusta y ¡mejóralo! mensajes, recoge lo que más te gusta y ¡mejóralo!
• Si crees que tienes un proyecto que no existe en
Internet mucho mejor Internet, mucho mejor.
• Es importante centrarse en un objetivo principal.
• A continuación reúne el material que quieras utilizar y
describe en detalle una guía de qué harás, qué
cont id d á á t ti di d á tenidos pondrás, cuánto tiempo dispondrás para
crear tu web, y qué resultados esperas obtener.
- La Web esta catalogada como una plataforma; esto se refiere específicamente que todas las herramientas de la Web 2.0 están basadas en que tanto el software como los documentos están alojados al Internet y no al disco duro (PC).
- Aprovechar la inteligencia colectiva.
- Se dirige hacia una Web social de lectura-escritura (Nuevo Entorno Tecnosocial: NET).
- Fin del ciclo de actualizaciones de software.
- Son herramientas de poderosa simplicidad.
- Experiencias enriquecedoras del usuario
La mayoría de las tecnologías que hay detrás de la Web tradicional se siguen usando en la Web 2.0: así los estándares XHTML, las hojas de estilo (CSS), las páginas dinámicas, la sindicación de contenidos, la programación en AJAX o flash, entre otras muchas (Van Der Henst, 2005).
Funcionalidades tecnológicas de la Web 2.0 Según Roy Fielding, ”la World Wide Web es la aplicación que más se ha distribuido a nivel mundial”. Para entender cómo evolucionó esta aplicación y se convirtió en la Web 2.0 es necesario entender el principio que lleva a crear arquitecturas. El principio de arquitectura clave de la Web, según su creador, Tim Berners-Lee (1991) es que “la Web es, por su diseño y filosofía, un sistema descentralizado”. Este principio permite, por una parte, dar más libertad en el diseño de aplicaciones Web pero también añade un componente de “caos” a todo el sistema. Hay ocho funcionalidades tecnológicas que aparecen típicamente en un sitio Web 2.0
La web 2.0 significó la aparición de redes sociales ahora las redes semánticas se dan paso gracias a la Web 3.0, que centra su objetivo en la inteligencia artificial y al innovación tecnológica. Mencionaremos algunas de las características que la identifican su presencia:
Inteligencia. El proyecto de la red semántica conocida como la Web 3.0, pretende crear un método para clasificar las páginas de internet, un sistema de etiquetado que no solo permita a los buscadores encontrar la información en la red sino entenderla. Al conseguir este objetivo, el usuario podrá acudir a la Web para preguntar en su lengua y sin necesidad de claves por un determinado asunto. La web aprenderá del resultado de las búsquedas para próximas operaciones.
Abierta. El software libre, los estándares y las licencias Cretive Commons, se han convertido en habituales en internet. La información se distribuye libremente por la web, impidiendo que un solo dueño se apropie de ella. La plusvalía de la propiedad sobre la información se pierde a favor de un uso más democrático.
Facilidad. Los internautas que visitan un sitio web deben emplear cierto tiempo en conocerlo aprender a usarlo. Las nuevas tendencias de diseño buscan estándares hacia una Web más homogénea en sus funciones y más fácil de reconocer, además de crear espacios que el usuario pueda configurar a su gusto.
Rapidez. La transmisión de video en la red y el nacimiento de portales dedicados a esta tarea, como Youtube, son posibles con gracias a las rápidas conexiones de los usuarios. Las principales operadores de telecomunicaciones han empezado a implementar la fibra óptica hacia los usuarios con anchos de banda de hasta 3Mbps de ADSL que se convertirán en velocidades que irán de 30Mbps a 1000 Mbps.
Es necesario un cambio de Paradigma, un nuevo modelo de Web. La Web 4.0 propone un nuevo modelo de interacción con el usuario más completo y personalizado, no limitándose simplemente a mostrar información, sino comportandose como un espejo mágico que de soluciones concretas a las necesidades el usuario.
Web 4.0 es una capa de integración necesaria para la explotación de la Web semántica y sus enormes posibilidades.
Se fundamenta en 4 pilares fundamentales:
Comprensión del lenguaje natural (NLU) y técnicas de Speech-to-text
Nuevos modelos de comunicación máquina-máquina (M2M). La red estará formada por agentes inteligentes en la nube, que serán capaces de comunicarse entre si y delegar la respuesta al agente adecuado.
Uso de información de contexto del usuario. Sentiment análisis, geolocalización, sensores…
1.2. Arquitectura de las aplicaciones web.
La arquitectura tradicional de cliente/servidor también es conocida como arquitectura de dos capas. Requiere una interfaz de usuario que se instala y se ejecuta en una PC o estación de trabajo y envía solicitudes a un servidor para ejecutar operaciones complejas.
Las páginas Web son el componente principal de una aplicación o sitio Web. Los browsers piden páginas (almacenadas o creadas dinámicamente) con información a los servidores Web. En algunos ambientes de desarrollo de aplicaciones Web, las páginas contienen código HTML y scripts dinámicos, que son ejecutados por el servidor antes de entregar la página.
Una vez que se entrega una página, la conexión entre el browser y el servidor Web se rompe, es decir que la lógica del negocio en el servidor solamente se activa por la ejecución de los scripts de las páginas solicitadas por el browser (en el servidor, no en el cliente). Cuando el browser ejecuta un script en el cliente, éste no tiene acceso directo a los recursos del servidor. Hay otros componentes que no son scripts, como los applets (una aplicación especial que se ejecuta dentro de un navegador) o los componentes ActiveX. Los scripts del cliente son por lo general código JavaScript o VBSscript, mezclados con código HTML
Arquitectura de tres capas
La arquitectura de tres capas es un diseño reciente que introduce una capa intermedia en el proceso. Cada capa es un proceso separado y bien definido corriendo en plataformas separadas. En la arquitectura tradicional de tres capas se instala una interfaz de usuario en la computadora del usuario final (el cliente). La arquitectura asada en Web transforma la interfaz de búsqueda existente (el explorador de Web), en la interfaz del usuario final.
La arquitectura de las aplicaciones Web suelen presentar un esquema de tres niveles
El primer nivel consiste en la capa de presentación que incluye no sólo el navegador, sino tamién el servidor web que es el responsale de presentar los datos un formato adecuado.Elsegundo nivel está referido habitualmente a algún tipo de programa o script.
Finalmente, el tercer nivel proporciona al segundo los datos necesarios para su ejecución. Una aplicación Web típica recogerá datos del usuario (primer nivel), los enviará al servidor, que ejecutará un programa (segundo y tercer nivel) y cuyo resultado será formateado y presentado al usuario en el navegador (primer nivel otra vez).
1.3. Tecnologías para el desarrollo de aplicaciones web.
Para el desarrollo de aplicaciones web se han generado múltiples tecnologías entre
las que se encuentran:
CGI. Common Gateway Interface fue la primera técnica utilizada para que el
contenido de las páginas web se generará de manera dinámica, es común
encontrar en los diferentes servidores web el modulo que soporta la ejecución de
CGIs. De manera resumida se puede decir que el CGI es un mecanismo de comunicación entre el servidor web y una aplicación externa, esta aplicación
puede estar desarrollada en casi cualquier lenguaje, este solo debe cumplir la
condición de ser soportado por el servidor http, es común encontrar que la
mayoría de las aplicaciones CGIs se encuentren desarrolladas con el lenguaje
PERL.
Paginas dinámicas en servidor. Con la aparición de esta tecnología se entra a
una nueva forma de trabajo, la cual esta orientada al trabajo del diseñador web,
quien no necesariamente conoce de lenguajes de programación. Este nuevo
enfoque consiste en insertar pequeños fragmentos de lógica de programación en
la estructura HTML de la página, al contrario de lo que se hacia en los CGIs, que
era en el lenguaje de programación utilizar sentencias de impresión para generar
salidas HTML. En este sentido se conocen diferentes alternativas, entre ellas
mencionar PHP, ASP, JSP, entre otros.
Java. Java es un lenguaje de programación orientado a objetos desarrollado por
la compañía Sun Microsystems. Está construido a partir de lenguajes orientados
a objetos anteriores, como C++, pero no pretende ser compatible con ellos sino
ir mucho más lejos, añadiendo nuevas características como recolección de
basura, programación multihilos y manejo de memoria a cargo del lenguaje.
Java DataBase Connectivity. JDBC es una interfaz que provee comunicación
con bases de datos. Consiste en un conjunto de clases e interfaces escritas en
Java, que proveen una API (Interfaz de Programación de Aplicación) estándar
para desarrolladores de herramientas de base de datos, permitiendo independizar
la aplicación de la base de datos que utiliza.
La API JDBC es la interfaz natural a las abstracciones y conceptos básicos
de SQL (Lenguaje de Consultas Simple): permite crear conexiones, ejecutar
sentencias SQL y manipular los resultados obtenidos.
Servlets. El servlet se puede considerar como una evolución de los CGIs
desarrollada por SUN Microsystems como parte de la tecnología Java. Son
programas Java que proveen la funcionalidad de generar dinámicamente
contenidos web.
Java Server Pages. JSP provee a los desarrolladores de web de un entorno de
desarrollo para crear contenidos dinámicos en el servidor usando plantillas
HTML y XML (eXtensible Markup Language) en código Java, encapsulando la
lógica que genera el contenido de las páginas.
Cuando se ejecuta una página JSP es traducida a una clase de Java, la cual es
compilada para obtener un servlet. Esta fase de traducción y compilación ocurre
solamente cuando el archivo JSP es llamado la primera vez, o después de que
ocurran cambios.
eXtensible Markup Language La familia XML es un conjunto de
especificaciones que conforman el estándar que define las características de un
mecanismo independiente de plataformas desarrollado para compartir datos. Se
puede considerar a XML como un formato de transferencia de datos multiplataforma.
XML ha sido diseñado de tal manera que sea fácil de implementar. No ha
nacido sólo para su aplicación en Internet, sino que se propone como lenguaje de
bajo nivel (a nivel de aplicación, no de programación) para intercambio de
información estructurada entre diferentes plataformas.
XML hace uso de etiquetas (únicamente para delimitar datos) y atributos, y
deja la interpretación de los datos a la aplicación que los utiliza. Por esta razón
se van formando lenguajes a partir del XML, y desde este punto de vista XML
es un metalenguaje.
El conjunto de reglas o convenciones que impone la especificación XML
permite diseñar formatos de texto para los datos estructurados, haciendo que se
almacenen de manera no ambigua, independiente de la plataforma y que en el
momento de la recuperación se pueda verificar si la estructura es la correcta.
Applets de Java. Un applet es un componente de software que corre en el
contexto de otro programa, por ejemplo un navegador web. El applet debe correr
en un contenedor, que es proporcionado por un programa anfitrión, mediante un
plugin o en aplicaciones como teléfonos celulares que soportan el modelo de
programación por applets.
1.4. Planificación de aplicaciones web.
La planificación no es una actividad muy común en
proyectos tecnológicos… menos en proyectos web
• Se confunde gestión con ejecución
• La planificación es clave para
saber a dónde queremos llegar,
cómo y con qué recursos cómo
y con qué recursos.
• Es el primer paso del ciclo de
proyectos
• Utiliza el buscador Google o Utiliza el buscador Google o Yahoo y mira lo que y mira lo que hacen
otras organizaciones o sitios similares: analiza sus
mensajes recoge lo que más te gusta y ¡mejóralo! mensajes, recoge lo que más te gusta y ¡mejóralo!
• Si crees que tienes un proyecto que no existe en
Internet mucho mejor Internet, mucho mejor.
• Es importante centrarse en un objetivo principal.
• A continuación reúne el material que quieras utilizar y
describe en detalle una guía de qué harás, qué
cont id d á á t ti di d á tenidos pondrás, cuánto tiempo dispondrás para
crear tu web, y qué resultados esperas obtener.
Preguntas Iniciales
1. ¿Para qué necesita el sitio web la institución?
2. ¿Para qué necesita el sitio web la ¿Para qué necesita el sitio web la comunidad? comunidad?
3. ¿Qué es lo que buscan las personas en mi institución?
4. ¿Q é i d l i tit ió i t i Qué imagen de la institución quiero proyectar en mis
usuarios?
5. ¿Qué servicios interactivos entregaré a través del Sitio
Web?
Suscribirse a:
Entradas (Atom)