• Author / Uploaded
• rgomezcabezas

• Categories
• HTML
• Lenguaje de marcado
• Página web
• Red mundial
• Tecnología

Citation preview

---

Aplicaciones web - por_CF 15/03/10 8:53 Página 1

Aplicaciones web Jesús Niño Camazón

01_unidad 01 Aplicaciones web

15/3/10

1

10:52

Página 6

Introducción a las aplicaciones web

vamos a conocer... 1. Esquema de funcionamiento de un servicio web 2. Lenguajes de marcas 3. Lenguajes de script de navegador 4. Hojas de estilo 5. Lenguajes de script de servidor 6. Herramientas de diseño web 7. Relación entre páginas web y bases de datos PRÁCTICA PROFESIONAL Diseñar la página web de una empresa MUNDO LABORAL Los magos del posicionamiento en buscadores

y al finalizar esta unidad... Identificarás los elementos de un servicio web. Conocerás los lenguajes de marcas. Crearás páginas web utilizando lenguajes de marcas. Conocerás el funcionamiento de los scripts en los navegadores. Editarás hojas de estilo. Conocerás el funcionamiento de los scripts en los servidores. Elegirás herramientas de diseño web que se adapten a tus necesidades. Relacionarás páginas web y bases de datos.

01_unidad 01 Aplicaciones web

15/3/10

10:52

Página 7

7

CASO PRÁCTICO INICIAL situación de partida Antonio le ha pedido a su amigo José el diseño de la página web de su empresa, que se llama Esos4; la empresa está especializada en programas de gestión y aplicaciones para la Web 2.0.

El posicionamiento de las páginas se consigue creando páginas web sin errores y cumpliendo los estándares del W3C (World Wide Web Consortium). Si se respetan los estándares, los buscadores pueden recorrer las páginas sin problema.

José tiene algunos conocimientos de marketing y conoce la disciplina SEO (Search Engine Optimization, optimización para motores de búsqueda). El objetivo de la optimización es mostrar las páginas web en los primeros resultados de las búsquedas que se realizan en los buscadores como Google, Bing, Yahoo… En este caso, José está interesado en posicionar la página de la empresa de Antonio en el primer puesto de las búsquedas «aplicaciones web 2.0».

Para facilitar la labor a los buscadores también es necesario incluir una buena descripción en las cabeceras de las páginas que se van a diseñar. José creará las páginas en el lenguaje de marcas HTML y serán estáticas y sin JavaScript. Por otro lado, Esos4 le ha informado de que en un par de meses quieren incorporar un apartado de noticias. José se está planteando incluir un gestor de contenidos en el desarrollo web.

estudio del caso 1. ¿Qué son los estándares?

7. ¿Qué es HTML?

2. ¿Merece la pena hacer caso de las recomendaciones de los estándares abiertos para facilitar el recorrido a los buscadores?

8. ¿Qué interesa más, páginas estáticas o dinámicas? 9. ¿Qué es una hoja de estilo? ¿Facilita el recorrido a los buscadores?

3. ¿Qué es el posicionamiento?

10. ¿Para qué sirve un script?

4. ¿Cómo posicionar mejor las páginas?

11. ¿Qué es JavaScript?

5. ¿Qué es SEO, para qué sirve?

12. ¿Qué herramientas son necesarias para diseñar páginas web?

6. ¿Qué es un lenguaje de marcas?

01_unidad 01 Aplicaciones web

15/3/10

10:52

Página 8

Unidad 1

8

1. Esquema de funcionamiento de un servicio web Un servicio web es un conjunto de protocolos y estándares con capacidad para intercambiar datos entre aplicaciones. Las aplicaciones de software son mecanismos que utilizan los usuarios para comunicarse y son desarrolladas en diferentes lenguajes de programación; estos son formas de crear aplicaciones software que se ejecutan en un equipo informático. Las aplicaciones intercambian datos en redes de ordenadores. Por ejemplo, en Internet, la forma de intercambiar datos entre aplicaciones se realiza por medio de reglas denominadas protocolos que establecen la comunicación entre clientes y servidores; los clientes son los usuarios que, mediante aplicaciones como los navegadores web, se comunican con otros ordenadores e interactúan con ellos.

caso práctico inicial Los diseñadores de páginas web deben cumplir los estándares del W3C y utilizar las herramientas del W3C para reconocer, orientar y ayudar a corregir errores en las páginas web.

Además de los protocolos, los estándares también forman parte de los servicios web. Los estándares son especificaciones disponibles públicamente para lograr una tarea específica. Un ejemplo de estándares son los del W3C (World Wide Web Consortium); este tipo de organizaciones son comités responsables de la arquitectura y reglamentación de los servicios web, y su objetivo principal es la creación de estándares web y pautas. Desde 1994, el W3C ha publicado más de ciento diez estándares, denominados «Recomendaciones del W3C». Los servicios web comunican diferentes aplicaciones software independientemente de las plataformas sobre las que se instalen, la capacidad para comunicar múltiples sistemas diferentes se realiza por medio de protocolos y estándares abiertos.

saber más

En el esquema de funcionamiento básico de un servicio web intervienen:

Estándar W3C: http://www.w3.org

• Clientes: son quienes hacen las peticiones (navegador web). • Servidores: programas que se ejecutan continuamente en un ordenador, a la espera de que les lleguen las solicitudes de los clientes y responden mediante una página web (servidor web). • Aplicaciones de software: mecanismos que utilizan los clientes y los servidores para comunicarse (navegador web). • Lenguaje de programación: forma de crear las aplicaciones software (C++). • Red de ordenadores: conjunto de ordenadores y/o dispositivos conectados por medio de cables, señales, ondas o cualquier otro método de transporte de datos que comparten información (Internet). • Protocolos: conjunto de reglas utilizadas en la comunicación entre los clientes y los servidores HTTP (HyperText Transfer Protocol), diseñado para transferir páginas HTML. • Estándares: conjunto de reglas normalizadas que describen los requisitos que deben ser cumplidos por un producto, proceso o servicio, con el objetivo de establecer un mecanismo base para permitir que distintos elementos hardware o software que lo utilicen sean compatibles entre sí. Uno de los estándares más conocidos es el HTML (HyperText Markup Language), un lenguaje de marcas utilizado para definir la estructura de los documentos; de esta forma todos comparten el mismo lenguaje para la representación de la información. Al usar el mismo formato para el desarrollo se consigue que cualquier usuario que interprete dicho lenguaje represente el documento de la web de la misma forma.

01_unidad 01 Aplicaciones web

15/3/10

10:52

Página 9

Introducción a las aplicaciones web

9

2. Lenguajes de marcas Los lenguajes de marcas sirven para codificar documentos. La codificación se realiza incorporando etiquetas o marcas que tienen información adicional acerca de la estructura del texto. Las marcas son códigos que indican a un programa cómo debe tratar su contenido; si se desea que un texto aparezca con un determinado formato, dicho texto debe ir delimitado por la correspondiente marca que indique cómo debe ser mostrado. El lenguaje de marcas más popular es el HTML, siglas de HyperText Markup Language (Lenguaje para el Formato de Documentos de Hipertexto), el lenguaje usado por la World Wide Web. Otros ejemplos de lenguajes de marcas son XHTML (Extensible HyperText Markup Language), RSS 2.0 (Really Simple Syndication), RTF (Rich Text Format), etc. La versión actual del HTML es el HTML 4.01, que es una revisión del HTML 4. Este tiene mecanismos para utilizar hojas de estilo, ejecución de scripts, marcos, tablas más ricas y otras ventajas que pueden consultarse en la especificación del HTML 4.01. HTML es el lenguaje utilizado para construir páginas web. Mediante una estructura se crea contenido en forma de texto; asimismo, se puede incorporar otro tipo de elementos a ese contenido, como imágenes, sonidos… HTML se escribe mediante «etiquetas» rodeadas entre los signos de menor que y mayor que () y algunas tienen atributos que pueden tomar algún valor. La mayoría de las etiquetas deben cerrarse de igual modo que se abren. Para cerrar una etiqueta se utilizan los signos de mayor que y menor que y la barra(). Por ejemplo, si tenemos la etiqueta que indica el inicio de un documento HTML, el cierre será . Por convención, los archivos de formato HTML utilizan la extensión .htm o .html. La extensión de un archivo es una cadena de caracteres que va unida al nombre de un archivo y precedida por un punto y cuya función principal es diferenciar el contenido del archivo de modo que el sistema operativo disponga del procedimiento necesario para ejecutarlo o interpretarlo. Para crear páginas web con HTML es necesario un editor de textos básico, como puede ser el bloc de notas de Windows o cualquier otro editor que admita texto sin formato, como por ejemplo GNU Emacs, Microsoft Wordpad, TextPad, Vim, etc. Como hemos dicho anteriormente, HTML se escribe en forma de etiquetas.

a

GNU Emacs.

a

Microsoft Wordpad.

saber más • XHTML es más esricto y similar a HTML pero con algunas diferencias. Más información sobre XHTML: http://www.w3.org/MarkUp • Especificación de HTML: http://www.w3.org/TR/1999 /REC-html401-19991224 • Existe un boceto de HTML 5: http://dev.w3.org/html5/ spec/Overview.html#intro duction

01_unidad 01 Aplicaciones web

15/3/10

10:52

Página 10

Unidad 1

10

recuerda

Las etiquetas que describen la estructura general de un documento son tres:

• Toda etiqueta está encerrada entre los signos menor que y mayor que (), y algunas tienen atributos que pueden tomar un valor concreto.

• : limita el documento e indica que se encuentra escrito en este lenguaje; señala el inicio y el final del documento.

• Se abren y se cierran; por ejemplo: negrita • Algunas etiquetas no necesitan cerrarse como .

vocabulario Metainformación: datos adicionales que están relacionados con la página y son transparentes al usuario.

• : cabecera del documento, especifica el prólogo del resto del archivo. Define la cabecera del documento HTML, suele contener información sobre el documento y no se muestra al usuario. Indica el título y permite aportar metainformación al documento, para su mejor identificación e indexación por los motores de búsqueda. • : encierra el contenido del documento. Define el contenido principal o cuerpo del documento. Esta es la parte del documento HTML que se muestra en el navegador; dentro de esta etiqueta pueden definirse propiedades comunes a toda la página, como color de fondo, del texto y márgenes de la página web, el color de los enlaces visitados...

EJEMPLO ¿Cómo crear una página web con un editor de textos básico? 1. Abrimos un editor de textos básico, por ejemplo el bloc de notas de Windows Vista (INICIO > PROGRAMAS > ACCESORIOS > BLOC DE NOTAS) y escribimos el siguiente código:

Mi primera página

Mi primera página

2. Guardamos con extensión .html, el tipo de documento es: TODOS LOS ARCHIVOS (*.*). 3. Abrimos con un navegador, en este caso Mozilla Firefox aunque cualquier navegador puede servir.

01_unidad 01 Aplicaciones web

15/3/10

10:52

Página 11

Introducción a las aplicaciones web

11

Etiquetas básicas Estas etiquetas son generales y aparecen en cualquier documento HTML. ETIQUETA

FUNCIÓN

Define el tipo de documento

,

Define el inicio y el final de un documento HTML

,

Define información sobre el documento

,

Define el cuerpo del documento

Define un comentario

Etiquetas del head Son las etiquetas que describen la cabecera del documento. El uso de estas etiquetas es transparente al usuario; sirven para poner el título de la página y la metainformación: la descripción, keywords, autor, hoja de estilos… ETIQUETA

FUNCIÓN

,

Define el título del documento

Define una descripción del documento; la descripción se escribe en «content»

Define las keywords (palabras que identifican un documento)

Define el autor del documento

Define un recurso; por ejemplo, incluir una hoja de estilo

EJEMPLO Contenido de la cabecera head. Para ver el código fuente de una página pulsamos en VER del navegador y a continuación en CÓDIGO FUENTE.

caso práctico inicial • José necesita posicionar en los primeros puestos de los buscadores la página de la empresa Esos4, por eso debe hacer una buena metadescripción en la cabecera head. • Las etiquetas metadescripción son relevantes a la hora de aparecer en los resultados de los buscadores. • Las técnicas que permiten valorar el posicionamiento en buscadores para los sitios web se denominan SEO (Search Engine Optimization, optimización para motores de búsqueda).

01_unidad 01 Aplicaciones web

15/3/10

10:52

Página 12

Unidad 1

12

Etiquetas del body Etiquetas que sirven para mostrar los objetos de la página; por ejemplo, para dar formato a un texto, crear listas, tablas, insertar imágenes, sonidos, etc.

saber más

ETIQUETA

FUNCIÓN

Etiquetas HTML:

a , a

Define encabezados

http://www.w3schools.com/ html

,

Define un párrafo




Inserta una línea en blanco

Inserta una línea

,

Define un estilo para el texto, negrita

,

Define un estilo para el texto, itálica

recuerda

,

Define un estilo para el texto, grande

Diferencias entre HTML y XHTML:

,

Define un estilo para el texto, pequeño

En HTML la etiqueta es
sin cerrar.

,

Define un estilo para el texto, subrayado

,

Define un estilo para el texto, subíndice

,

Define un estilo para el texto, superíndice

,

Centra un texto



Define márgenes

,

Hipervínculo o enlace. Por ejemplo: Google

Imagen. Requiere del atributo src, indica la ruta en la que se encuentra la imagen. Por ejemplo:

,

Define una tabla

,

Define título de una tabla

,

Fila de una tabla

,

Celda dentro de una tabla

,

Define una lista

,

Define una lista ordenada con números

,

Define los elementos de una lista

,

Define un formulario

En XHTML la etiqueta se cierra
.

ACTIVIDADES 1. Crea una página web en la que el título sea «Mi primera página web». 2. Crea una página web que tenga los siguientes elementos: • Título: Esos4. • Keywords: desarrollos, esos4, programación, gestión, web, internet. • Autor: Esos4. • Descripción: empresa especializada en aplicaciones Web 2.0.

01_unidad 01 Aplicaciones web

15/3/10

10:52

Página 13

Introducción a las aplicaciones web

13

3. Lenguajes de script de navegador Los lenguajes de script son lenguajes de programación que sirven para crear programas que realizan acciones dentro de una página web, como por ejemplo cambiar dinámicamente el contenido de un documento, modificar el comportamiento normal del navegador, validar formularios, realizar pequeños trucos visuales, etc.

recuerda JavaScript es el lenguaje de script de la Web.

Los scripts se ejecutan en el navegador del cliente al cargar la página o cuando sucede algo especial, como puede ser pulsar sobre un enlace. Conviene recordar que los scripts no se ejecutan en la máquina donde están alojados, por lo que no podrán realizar algunas operaciones como manejar bases de datos en el servidor. El lenguaje de script que se utiliza en HTML es JavaScript. Fue desarrollado por Netscape Communications, y es el lenguaje de programación del lado del cliente más utilizado y compatible con la mayoría de los navegadores actuales. Es un lenguaje interpretado, lo que quiere decir que no requiere compilación, son los navegadores los que se encargan de interpretar el código.

saber más • Netscape Communications fue comprada por AOL en 1999. http://www.aol.com/ • JavaScript:

El código JavaScript se puede indicar en la dirección donde se encuentra el fichero JavaScript mediante la etiqueta:

http://www.w3schools.com /js • Google Chrome:

http://google.com/chrome • Apple Safari:

En el parámetro src incluimos la dirección donde está el fichero Javascript.

http:/apple.com/es/safari

La otra opción para utilizar JavaScript es insertar el código en el fichero HTML, utilizando la etiqueta:

EJEMPLO Código en JavaScript insertado en un documento HTML. 1. Abrimos un editor de textos y escribimos el código:





aparece es similar en todos los navegadores, una caja de texto con el mensaje «¡Hola, mundo!».

a

a Mensaje Internet Explorer.

2. Guardamos el fichero con extensión.html 3. Abrimos el fichero con un navegador, el mensaje que

a Mensaje Apple Safari.

ACTIVIDADES 3. Crea un script que muestre una alerta con tu nombre y apellidos.

Mensaje Google Chrome.

01_unidad 01 Aplicaciones web

15/3/10

10:52

Página 14

Unidad 1

14

4. Hojas de estilo Las hojas de estilo en cascada (Cascading Style Sheets), cuyas siglas son CSS, se utilizan para definir la presentación de un documento escrito en HTML o XML. Las hojas de estilo describen cómo se va a mostrar un documento en pantalla.

saber más Hojas de estilo: http://www.w3schools.com/css

Al crear una página web tenemos que comprobar qué hacen los elementos dentro de la página, como por ejemplo párrafos, tablas, listas, etc. Este funcionamiento lo plasmamos en el documento HTML, mientras que el aspecto de cada elemento, como el color, el tamaño y tipo de letra, o la posición de los elementos lo podemos hacer en hojas de estilo CSS. 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 navegadores. La idea que se encuentra detrás del desarrollo de las CSS es separar la estructura de un documento de su presentación. La información sobre los estilos que va a tener la página puede estar incluida en el documento HTML (etiqueta Resultado

Fichero: ejemplo.html



Cabecera ejemplo

01_unidad 01 Aplicaciones web

15/3/10

10:52

Página 15

Introducción a las aplicaciones web

15

EJEMPLO (continuación) 2. Estilo CSS separado del documento HTML. El estilo se edita y se guarda en un fichero diferente al fichero HTM. Se llama a ese fichero desde el documento HTML donde queremos incluir dicho estilo:

Fichero: ejemplo.html

Fichero: style.css



Cabecera ejemplo