CONCEPTOS DE PAGINAS WEB

redes sciales

Começar. É Gratuito
ou inscrever-se com seu endereço de e-mail
CONCEPTOS DE PAGINAS WEB por Mind Map: CONCEPTOS DE PAGINAS WEB

1. Cookies

1.1. HTTP es un protocolo SIN ESTADO

1.1.1. No se guarda información de la sesión/historia pasada

1.2. Uso de “cookies”

1.2.1. Un cookie es un string que se pasa en una cabecera HTTP y que el navegador puede guardar en un pequeño fichero de texto

1.2.2. El cookie se reenvía luego al servidor HTTP con cada petición del cliente a ese servidor

1.2.3.  Los cookies no pueden capturar información del cliente

1.2.4. Usos

1.2.4.1. Guardar las preferencias del usuario

1.2.4.2. Reconocimiento de usuarios

1.2.4.3. Ayuda a recoger datos usados por aplicaciones de compra electronica

1.3. Atributos

1.3.1.  Par (Nombre, Valor)

1.3.2.  Comentario (se puede presentar al usuario)

1.3.3. Especificación de las páginas y dominios a los que se puede enviar el cookie

1.3.4.  Fecha y hora de expiración

1.3.5. Requiere o no una página segura

1.3.6.  Versión

1.4. Tamaño máximo: 4Kbytes (Normalmente ocupan alrededor de 100 bytes)

1.5. Seguridad

1.5.1. No conviene poner información sensible en el cookie, mejor utilizar un

1.5.2. identificador en el cookie que sirva de clave de acceso en la base de

1.5.3. datos del servidor

1.5.4. Los cookies sólo pueden ir al dominio especificado

1.6. Funcionamiento de los Cookies

1.7. Programación de cookies con Java

1.7.1. Creación y envío de un cookie

1.7.1.1. Por un servlet como respuesta a una petición HTTP

1.7.1.2. clase javax.servlet.http.Cookie

1.7.1.2.1. // 1. crea el cookie Cookie cookie = new Cookie("nombre", "valor");

1.7.1.3. El cookie se envía como parte de una respuesta HTTP

1.7.1.3.1. // 2. envía el Cookie en un HTTPServletRestponse public void doGet (HttpServletRequest, request, HttpServletResponse response) throws IOException { response.addCookie (cookie)); }

1.7.2. Envío de un identificador único

1.7.2.1. La clase java.rmi.server.UID permite crear identificadores que son únicos dentro de la máquina en que se generan

1.7.2.1.1. String uid = new java.rmi.server.UID().toString();

1.7.2.2. Para enviarlo por HTTP hace falta codificarlo con el método enconde() de java.net.URLEncoder, que convierte el string al formato MIME denominado x-www-form-urlencoded

1.7.2.2.1. 'a' - 'z', 'A' - 'Z', y '0' - '9' no se modifican.

1.7.2.2.2. El carácter de espacio se transforma en '+'.

1.7.2.2.3. Los demás caracteres se convierten en string de 3-caracteres "%xy", donde xy es la representación hexadecimal con dos dígitos de los 8-bits del carácter

1.7.3. Recepción de cookies

1.7.3.1. Con una respuesta HTTP se pueden recibir varios cookies asociados

1.7.4. Configuración de cookies

1.7.4.1. La clase Cookie ofrece operaciones para configurar los atributos de cada cookie

1.7.4.1.1. Tiempo de expiración cookie.setMaxAge (numero_segundos); // si 0, entonces el cookie expira inmendiatamente // si negativo, entonces el cookie expira al apagar el navegador

1.7.4.1.2. Comentario cookie.setComment ("comentario");

1.7.4.1.3. Dominio cookie.setDomain ("patron_de_dominio");

1.7.4.1.4. Valor (para modificar el que se le dio al crearlo) cookie.setValue ("nuevovalor");

1.8. Alternativas a los cookies

1.8.1. Campos ocultos de los formularios

1.8.1.1. Obliga a procesar cada petición de página con el mecanismo de enviar formulario: anticuado (ver HTML dinámico)

1.8.2. Añadir información de estado al final del URL mediante query string del URL

1.8.2.1. http://maquina/pagina.html?parametro=valor

1.8.2.2. Poco seguro

2. Seguridad con HTTPS

2.1. HTTPS (Hypertext Transfer Protocol Secure)

2.1.1. Permite que la información sensible (datos de usuario, passwords,pagos, etc.) no pueda ser interceptada durante la transferencia de pagos

2.1.2. La información viaja por un canal cifrado sobre SSL/TLS

2.1.2.1. TLS (Transport Layer Security) es el protocolo estandarizado por IETF (RFC 2246), basado en SSL (Secure Sockets Layer)

2.1.2.2. Usa

2.1.2.3. Requiere que el servidor tenga un certificado digital

2.1.3. Para utilizar HTTPS el servidor recibe las conexiones en el puerto 443(por defecto)

2.1.4. La URL indica el uso de este protocolo: https://...

2.2. Experimentar el protocolo HTTP usando telnet (en Unix)

2.2.1. telnet www.dominio.com 80

2.3. Escribir un programa Java sencillo que implemente un cliente de HTTP

2.3.1. Usa las clases del paquete java.net y java.io

2.3.2.  Otra alternativa más directa es usar la clase JEditorPane que puede

2.3.3. interpretar código HTML

3. Tecnologías de programación de aplicaciones Web

3.1. Navegadores (browsers)

3.1.1. Permiten acceder a la web y visualizar en modo gráfico documentos HTML (XHTML)

3.2. Aceptan la instalación de plugins (módulos con funcionalidad extra)

3.2.1. Para procesar ciertos tipos de documentos (p.ej, PDF)

3.2.2.  Presentaciones flash

3.3. Más populares:

3.3.1. WorldWideWeb (Tim Berners-Lee, 1991)

3.3.2.  Mosaic (NCSA, 1993)

3.3.3.  Mozilla (1998)

3.3.4. Microsoft Internet Explorer (1995): solo en Windows

3.3.5.  Safari (2003): en Mac OS X [Apple llegó bien tarde a la Web...]

3.3.6.  Chrome (2008): multiplataforma

3.3.7.  Opera (1996): el que más tecnologías soporta, multiplataforma

4. Generación dinámica de información en el cliente

4.1. En una página HTML se pueden incrustar elementos computacionales y scripts:

4.1.1. <object>

4.1.1.1. El navegador reconoce el tipo de elemento y lo ejecuta (requiere

4.1.1.2. normalmente un plugin)

4.2. • DHTML (Dynamic HTML): HTML donde se ejecuta un código de un lenguaje de script (como JavaScript)

4.3. Se puede combinar con eventos de navegación y formularios

5. Tecnologías de script

5.1. JavaScript

5.1.1. Lenguaje de script cuyo código se puede insertar en páginas HTML

5.1.2.  ECMAScript (ECMA-262, 1992): versión estandarizada por ECMA (European Computer Manufacturer’s Association)

5.1.3. Permite al navegador alterar los contenidos presentes en una página Web

5.2. AJAX (Asynchronous JavaScript And XML)

5.2.1. Creación de aplicaciones Web interactivas

5.2.2.  Las aplicaciones se ejecutan en el cliente

5.2.3. Comprende varias tecnologías:

5.2.3.1. XHTML y CSS: Presentación basada en estándares

5.2.3.2. DOM: Interacción y manipulación dinámica de la presentación

5.2.3.3. XML, XSLT y JSON: Intercambio y manipulación de información

5.2.3.4. XMLHttpRequest: Intercambio asíncrono de información

5.2.3.5. JavaScript: Unión del resto de tecnologías

5.2.4. En AJAX el cliente hace una petición al servidor por medio del objeto XMLHttpRequest

5.2.4.1. El servidor procesa la petición y devuelve una respuesta en XML en

5.2.4.2. El propio objeto XMLHttpRequest procesa dicha respuesta y

5.2.4.3. actualiza únicamente las secciones necesarias de la página, evitando

6. Gestores de contenidos

6.1. Content Management Systems (CMS)

6.1.1. Frameworks para la creación y administración de contenidos de sitios web

6.1.2.  Permiten la edición de los contenidos por varias personas con distintos

6.1.3. roles (administrador, editor, participante, etc.)

6.1.4. Separa la presentación de la información de su gestión en las bases de datos asociadas

6.1.5. Implementados generalmente con tecnologías estándar (PHP, MySQL, etc.)

6.2. Aplicaciones

6.2.1. Blogs, Foros, Wikis

6.2.2.  Plataformas de enseñanza on-line

6.2.3.  Publicaciones digitales

6.2.4.  Difusión de contenido multimedia

7. XML

7.1. XML (eXtensible Markup Language )

7.1.1. Especificación de carácter genérico derivada del Estándar SGML (Standard Generalized Markup Language) que permite definir lenguajes de marcado

7.1.2. Es un metalenguaje: sirve para definir lenguajes de marcado

7.1.3. Y para describir, almacenar e intercambiar datos en la Web

7.2. Es extensible a través de la definición de nuevas etiquetas

7.3. Los documentos XML pueden ser validados contra una DTD (Definición de Tipo de Documento)

7.4. El análisis de un documento XML es un proceso estandarizado, lo que permite utilizar cualquier analizador, evitando de este modo errores y optimizando el desarrollo de aplicaciones

7.5. XML – lenguajes derivados

7.5.1. XSL (EXtensible Stylesheet Language)

7.5.2. Xlink (XML Linking Language)

7.5.3. XPointer y Xfragments

7.5.4. Xquery

7.5.5. XSchema

7.5.6. CSS (Cascading Style Sheets)

7.5.7. Xforms

7.5.8. MathML

7.5.9. VoiceXML

7.5.10. ebXML

7.6. XML – Estándares de seguridad

7.6.1. XML-Encryption

7.6.2. XML-Signature

7.6.3. XKMS (XML Key Management Specification)

7.6.4. XACML (eXtensible Access Control Markup Language)

7.6.5. XrML (eXtensible rights Markup Language)

7.6.6. SAML (Security Assertion Markup Language)

7.6.7. JavaScript Object Notation

7.6.7.1. Lenguaje textual (legible por humanos) para intercambio de datos

7.6.7.2.  Descrito en RFC 4627 (2006)

7.6.7.3.  Se suele utilizar en aplicaciones AJAX, como alternativa a XML

7.6.8. JSON Schema

7.6.8.1. Define la estructura de datos JSON (lo que XSD para XML)

7.6.9. PNG (Portable Network Graphics)

7.6.9.1. Estandarizado por W3C (1996) y por ISO ((ISO/IEC 15948:2003)

7.6.9.2.  Mucho mejor que GIF (Graphics Interchange Format):

7.6.9.2.1. GIF está patentado por Unisys y necesita licencia para su empleo,

7.6.9.2.2. PNG es libre: PNG's Not GIF

7.6.9.2.3. Mejor formato de compresión (5-25% mejor) sin perder calidad

7.6.9.2.4. Colores más ricos y precisos (16,7 millones vs. 256 en GIF)

7.6.9.2.5. Soporta canales alfa y hasta 256 niveles de transparencia (GIF solo 1)

7.6.9.3. No permite imágenes animadas (GIF sí)

7.6.9.4. JPEG (Joint Photographic Experts Group) permite utilizar ratios de compresión muy altos pero en detrimento de la calidad de la imagen

7.6.9.5. SVG (Scalable Vector Graphics)

7.6.9.5.1. Descripción de gráficos vectoriales en dos dimensiones,

7.6.9.5.2. Recomendación del W3C (2001)

7.6.9.5.3. Define tres tipos de objetos gráficos:

7.6.9.5.4. Permite crear gráficos dinámicos y animados

8. Internacionalización

8.1. La Web funciona en todos los países y todos los idiomas

8.2. Unicode/ISO 10646

8.2.1. Estándar universal para codificar texto multi-lenguaje

8.2.2.  Mantenido por UTC (Unicode Technical Committee)

8.2.3.  Define tres formas de codificación: UTF-8, UTF-16 y UTF-32

8.3. Para indicar el conjunto de caracteres que se utiliza

8.3.1. En XHTML, dentro de <HEAD>, con una etiqueta <META>: <meta http‐equiv="Content‐Type" content="text/html; charset= utf‐8" />  En XML: <?xml version="1.0" encoding="UTF‐8" ?>

8.4. Para indicar el idioma en una parte del contenido de una página

8.4.1. En HTML: lang="es"

8.4.2. En XML: xml:lang="es"

9. En XML: xml:lang="es"

10. Accesibilidad

10.1. Web Accessibility Initiative (WAI) del W3C

10.2. WCAG: Web Content Accessibility Guidelines 2.0 (W3C, 2008)

10.3. Accesibilidad – WCAG 2.0 Guidelines

10.3.1. 1 Perceivable

10.3.2. 2 Operable

10.3.3. 3 Understandable

10.3.4. 4 Robust

11. Web ubicua

11.1. Web ubicua y universal

11.1.1. Nuevas aplicaciones

11.1.1.1. Conectar una cámara de fotos a una impresora cercana

11.1.1.2. Usar el móvil para dar una presentación con un proyector

11.1.1.3. inalámbrico

11.1.2. Descubrimiento y coordinación dinámica de los recursos

11.1.2.1. UPnP (Universal Plug and Play)

11.1.2.2. Jini

11.1.2.3. WSD (Web services for devices)

11.2. Inteligencia ambiental

11.3.  Internet de las cosas

11.4.  Agentes inteligentes

12. Evolución de la Web

13. Pila tecnológica del W3C

14. HTML

14.1. Lenguaje con el que se definen páginas Web

14.1.1. Permite describir el contenido de una página, incluyendo texto y otros elementos (imágenes, videos, pequeñas aplicaciones, etc.)

14.2. Texto plano que incluye etiquetas que sirven para indicar un tratamiento especial

14.2.1. Meta-información: <meta name="keywords" content="Curso Web, UCM"/>

14.2.2. Estructura del documento: <head><body><h1>

14.2.3. Formato: <b>Texto en negrita</b>

14.2.4. Enlaces a otros objetos: <a href="http://www.ucm.es/">

14.2.5. Formularios: <form>

14.3. Versiones actuales:

14.3.1. HTML 4.01 (W3C, 1999)

14.3.1.1. Estandarizado también por ISO en 2000

14.3.2. HTML 5 (W3C, 17/12/2012)

14.3.2.1. Para 2014 se definirán los tests de interoperabilidad

14.3.3. XHTML 1.1 (2001), actualmente definiéndose XHTML 5

15. Identificadores de Recursos

15.1. UniformResourceLocator (URL)

15.1.1. Descriptor del acceso (cómo encontrar) un recurso

15.1.2. esquema://autoridad/ruta/archivo?solicitud

15.1.3. Esquema: http, https, ftp, mailto, ldap, file, ...

15.1.4. Autoridad: www.ucm.es

15.1.5. https://cv3.sim.ucm.es/portal/help/main?help=sakai.siteinfo

15.1.6. Se puede incluir también el puerto

15.1.7. (por defecto 80 para http y 443 para https)

15.1.8. https://cv3.sim.ucm.es:443/portal/help/main?help=sakai.siteinfo

15.2. UniformResourceIdentifier (URI)

15.2.1. Identificador inequívoco de un recurso

15.2.2. Definido en RFC 2396

15.2.3. Más completo que URL, permite identificar una parte del recurso

15.2.4. principal, determinada por el “fragmento”

15.2.5. esquema://máquina/directorio/archivo?solicitud#fragmento

15.2.6. http://www.sans.org/top25‐software‐errors/#cat1

16. Modelo cliente-servidor

16.1. Un cliente demanda servicios o recursos a un servidor a través de una interfaz, usando un protocolo

17. Protocolo HTTP

17.1. Protocolo de aplicación para transferencia de hipertexto

17.1.1. Funciona sobre TCP/IP

17.2. Permite a un navegador (cliente, user agent) solicitar una página a un servidor y que éste la envíe

17.3. Basado en el envío de comandos y respuestas en texto ASCII

17.4. Tipos de mensajes

17.4.1. HTTP/1.0

17.4.1.1. GET

17.4.1.1.1. Solicitud de un recurso

17.4.1.2. POST

17.4.1.2.1. Envío de datos al servidor para que los procese (p.ej. con un script CGI)

17.4.1.2.2. Ejemplo: datos de un formulario

17.4.1.3. HEAD

17.4.1.3.1. Como el GET pero pide al servidor que solo envíe la cabecera de la

17.4.1.3.2. respuesta (esto es, que responda sin enviar el objeto requerido)

17.4.1.3.3. Para comprobar características de un recurso sin descargarlo

17.4.2. HTTP/1.1

17.4.2.1. GET, POST, HEAD

17.4.2.2. PUT

17.4.2.2.1. Sube archivos en el cuerpo de la solicitud

17.4.2.3. DELETE

17.4.2.3.1. Borra el archivo especificado en el campo URL

17.4.2.4. Otros: OPTIONS, TRACE and CONNECT

17.5. Mensajes HTTP

17.5.1. Línea inicial

17.5.1.1. Solicitud (request)

17.5.1.1.1. GET /path/to/file/index.html HTTP/1.0

17.5.1.2. Respuesta

17.5.1.2.1. HTTP/1.0 200 OK

17.5.1.2.2. HTTP/1.0 404 Not Found

17.5.1.3. Códigos de estado típicos

17.5.1.3.1. 200 OK Solicitud existosa – el recurso resultante sigue en el cuerpo

17.5.1.3.2. 400 Bad Request El servidor no entiende la solicitud

17.5.1.3.3. 404 Not Found El recurso solicitado no existe en el servidor

17.5.1.3.4. 301 Moved Permanently

17.5.1.3.5. 302 Moved Temporarily

17.5.1.3.6. 303 See Other (solo en HTTP 1.1) El recurso se ha movido a otro

17.5.1.3.7. URL (indicado en la cabecera Location:), y debe ser

17.5.1.3.8. automáticamente recuperado por el cliente (redirección)

17.5.1.3.9. 500 Server Error Error inesperado del servidor

17.5.2. 0..n líneas de cabecera

17.5.2.1. Proporcionan información de la solicitud o respuesta

17.5.2.2. Estructura: Nombre-cabecera: valor

17.5.2.3. Nombre de cabecera

17.5.2.3.1. HTTP 1.0 define 16 (ninguno obligatorio)

17.5.2.3.2. HTTP 1.1 define 46, y requiere al menos una (Host:)

17.5.2.4. Por net-politeness (cortesía en la red) el cliente pone las siguientes:

17.5.2.4.1. From: dirección email o programa solicitante

17.5.2.4.2. User-Agent: identifica el programa que hace la petición con la forma:

17.5.2.4.3. “nombre-programa/x.xx“

17.5.2.4.4. Host:www.ucm.es

17.5.2.4.5. User‐Agent:Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:11.0) Gecko/20120313 Firefox/11.0

17.5.2.5. El servidor suele poner las siguientes:

17.5.2.5.1. Server: identifica el software del servidor "Program-name/x.xx".

17.5.2.5.2. Last-Modified: fecha de modificación del recurso (se usa para gestioanr las cachés). En Greenwich Mean Time Content‐Type:text/html; charset=iso‐8859‐1 Date:Fri, 14 Dec 2012 09:23:36 GMT Server:Apache

18. Funcionamiento

19. Servidores Web

19.1. Procesan mensajes HTTP de clientes y devuelven mensajes con la información solicitada

19.1.1. Estados  Datos  Códigos de error

19.2. Todas las operaciones pueden adjuntar objetos o recursos Web descritos por su URL

19.2.1. Documentos HTML  Ficheros multimedia  Aplicaciones CGI

19.3. Ejemplos de servidores Web

19.3.1. Apache (apache.org)

19.3.1.1. El más estándar en linux (también funciona en windows)

19.3.2. Internet Information Server (IIS)

19.3.2.1. Solo para windows, basado en la tecnología .NET

19.3.3. Nginx (nginx.org)

19.3.3.1. Muy ligero y escalable, aunque menos versátil que Apache

20. Generación dinámica de información en el servidor

20.1. CGI (Common Gateway Interface)

20.1.1. Una de las primeras formas de crear contenido dinámico

20.1.2.  Estándar que define un mecanismo de comunicación para que un cliente solicite información a un servidor web

20.1.3. El programa CGI se arranca, se ejecuta, devuelve el resultado y acaba

20.2. Código incrustado en HTML

20.2.1. El servidor reconoce ciertas etiquetas y ejecuta el código que contienen

20.2.2.  El programa tiene acceso a componentes del servidor

20.2.3.  Lenguajes habituales:

20.2.3.1. PHP

20.2.3.2. ASP (Active Server Pages)

20.2.3.3. JSP (Java Server Pages)

20.3. J2EE (Java Enterprise Edition): servlets

21. Estándares de la Web

21.1. Los estándares de internet los define el IETF (Internet Engineering Task Force)

21.1.1.  http://www.ietf.org/  Utiliza el mecanismo de Request for Comments (RFC)

21.2. Desde 1995 el W3C (World Wide Web Consortium) define los estándares de la Web

21.2.1. World Wide Web Consortium (W3C)

21.2.2. Más de 400 organizaciones

22. Tecnologías multimedia

22.1. SMIL (Synchronized Multimedia Integration Language)

22.1.1. Basado en XML. Actualmente en versión 3

22.1.2.  Creación de presentaciones audiovisuales interactivas

22.1.3. Se puede integrar con otros lenguajes de la familia XML

22.1.4.  Permite incluir vínculos en presentaciones multimedia

23. Web 2.0

23.1. Al principio los usuarios de la Web eran pasivos: solo podían recuperar información

23.2. Web 2.0 es un término que define una forma de usar la web por usuarios y desarrolladores

23.2.1. La Web como medio de colaboración e interacción entre usuarios

23.2.2.  Los usuarios como creadores de contenidos

23.2.3.  Comunidades virtuales

23.2.4.  Experiencia de usuario más rica

23.3. Ejemplos:

23.3.1. Blogs: personal blogs, microblogging, corporate, etc.

23.3.2.  Wikis

23.3.3.  Compartición de videos y música

23.3.4.  Redes sociales

23.3.5.  Aplicaciones web: webmail, groupware, comercio electrónico, etc.

23.3.6.  Servicios web: aplicaciones como composición de servicios Web

23.3.7. Mashups: aplicaciones que combinan y agregan datos de distintas fuentes para presentarlos de manera más conveniente: traducción automática, servicios de geolocalización, sistemas de pago electrónico, agregadores de noticias, etc.

23.4. Conceptos de la Web 2.0:

23.4.1. RIA (Rich Internet application): experiencia del escritorio en el navegador

23.4.2. WOA (Web-oriented architecture): composición de aplicaciones Web

23.4.3. Web Social: mayor interacción del usuario final que pasa a ser parte integral de la Web

24. Servicios Web

24.1. Una forma de implementar el modelo cliente-servidor en la web

24.1.1. Las aplicaciones definen los servicios que proporcionan con WSDL

24.1.2. (Web Service Description Language, basado en XML)

24.1.3.  Y los declaran en un registro UDDI (Universal Description, Discovery and Integration)

24.1.4.  Los clientes pueden buscar localizar el servicio apropiado en el servidor UDDI

24.1.5.  E invocar remotamente los servicios web

24.1.5.1. Todas las invocaciones se hacen con el protocolo SOAP (Simple Object Access Protocol), basado en XML

25. Web semántica

25.1. Movimiento colaborativo liderado por W3C con el propósito de que se incluya contenido semántico en las páginas Web

25.1.1. Para facilitar el procesado automático de la información en la Web

25.1.2.  Una nueva Web con agentes inteligentes que traten toda la información

25.1.3. por nosotros

25.1.4.  La Web inicial era para ser visualizada por personas, no por máquinas

25.2. RDF (Resource Description Framework)

25.2.1. Lenguaje para describir los recursos de la Web con meta-datos

25.2.2.  RDF Schema: vocabulario para describir propiedades y clases de

25.2.3. recursos basados en RDF

25.3. OWL (Web Ontology Language)

25.3.1. Una ontología define un conjunto de términos en un área de conocimiento, y sus relaciones

25.4. Para la sintaxis se puede utilizar XML aunque hay alternativas, como Turtle (Terse RDF Triple Language)

25.5. Smartphones y tablets están cambiando el paradigma

25.5.1. Las aplicaciones en los dispositivos móviles hacen cada vez un uso

25.5.2. más intensivo de servicios en la Web

25.5.3.  A través de widgets y apps

25.6. Mobile Web Initiative (MWI)

25.6.1. Mobile Web Initiative (MWI)

26. Web móvil