Desarrollo Web

UNIVERSIDAD TECNOLÓGICA DE CIUDAD JUÁREZ

Ingeniería en tecnologías de la información

Desarrollo de aplicaciones web

Ing. Ricardo Trejo R.

ITIW41

Ingeniería web

De la luz Mateos Ramiro 14220113

Martínez Enríquez Omar 14220053

Olvera Hernández María Azucena 14220054

Vargas Castillo Everardo 14220216

8 de junio de 2015

ÍNDICE

INTRODUCCION ............................................................................................... 1

1. TECNOLOGÍAS WEB .................................................................................... 5

1.1 ASP........................................................................................................... 5

1.2 Java Server Pages (JSP) .......................................................................... 8

1.3 PHP .......................................................................................................... 9

2. HERRAMIENTAS ......................................................................................... 14

2.1 XML ........................................................................................................ 14

2.2 Java ........................................................................................................ 18

2.3 jQuery ..................................................................................................... 19

2.4 CSS ........................................................................................................ 20

3. MEDIOS DIGITALES ................................................................................... 31

3.1 Formatos de imagen ............................................................................... 31

3.2 Formatos de video .................................................................................. 33

3.3 Formato de audio .................................................................................... 35

4. MEDIAS DE SEGURIDAD ........................................................................... 38

4.1 MD5 ........................................................................................................ 38

4.2 SHA ........................................................................................................ 45

4.3 Certificados ............................................................................................. 48

CONCLUSIÓN ................................................................................................. 50

1

INTRODUCCION

La Web es una idea que se construyó sobre la Internet. Las conexiones físicas

son sobre la Internet, pero introduce una serie de ideas nuevas, heredando las

ya existentes.

Empezó a principios de 1990, en Suiza en el centro de investigación CERN

(centro de Estudios para la Investigación Nuclear) y la idea fue de Tim Berners-

Lee, que se gestó observando una libreta que él usaba para añadir y mantener

referencias de cómo funcionaban los ordenadores en el CERN.

Antes de la Web, la manera de obtener los datos por la Internet era caótica: había

un sinfín de maneras posibles y con ello había que conocer múltiples programas

y sistemas operativos. La Web introduce un concepto fundamental: la posibilidad

de lectura universal, que consiste en que una vez que la información esté

disponible, se pueda acceder a ella desde cualquier ordenador, desde cualquier

país, por cualquier persona autorizada, usando un único y simple programa.

Para que esto fuese posible, se utilizan una serie de conceptos, el más conocido

es el hipertexto.

Con Web los usuarios novatos podrían tener un tremendo poder para hallar y

tener acceso a la riqueza de información localizada en sistemas de cómputos en

todo el mundo.

Este solo hecho llevó un avance tremendo de Internet, un ímpetu tan grande

que en 1993 World Wide Web creció un sorprendente 341000%, tres años

después, en 1996, todavía se está duplicando cada 50 días.

¿Qué es La World Wide Web O La Web?

La World Wide Web consiste en ofrecer una interface simple y consistente para

acceder a la inmensidad de los recursos de Internet. Es la forma más moderna

de ofrecer información. El medio más potente. La información se ofrece en forma

de páginas electrónicas.

El World Wide Web o WWW o W3 o simplemente Web, permite saltar de un

lugar a otro en pos de lo que no interesa. Lo más interesante es que con unas

2

pocas ordenes se puede mover por toda la Internet. Para entender lo que es la

Web debemos tener una idea de lo que es el Hipertexto.

Hipertexto

Hipertexto son datos que contienen enlaces (links) a otros datos. En el lenguaje

Web, un documento de hipertexto no es solo algo que contiene datos, sino que

además contiene enlaces a otros documentos. Un ejemplo simple de hipertexto

es una enciclopedia que al final de un tema tiene referencias de algún tema en

especial o referencias bibliográficas a otros textos.

En Hipertexto, el ordenador hace que seguir esas referencias sea facilísimo. Esto

implica que el lector se puede saltar la estructura secuencial del texto y seguir lo

que más le gusta. En Hipertexto se pueden hacer enlaces en cualquier lugar, no

sólo al final. Cada enlace tiene una marca que lo destaca, puede estar resaltado,

subrayado o puede estar identificado por un número.

El hipertexto no está limitado a datos textuales, podemos encontrar dibujos del

elemento especificado, sonido o vídeo referido al tema. Estos documentos que

tienen gran variedad de datos, como sonido, vídeo, texto, en el mundo del

hipertexto se llama hipermedia.

El hipertexto es una herramienta potente para aprender y explicar. El texto debe

ser diseñado para ser explorado libremente y así se consigue una comunicación

de ideas más eficientes.

Dominio

Comprender los dominios y los nombres de dominio requiere que tengas un

pequeño conocimiento de cómo funciona Internet. Internet es, esencialmente,

una red de ordenadores que cambian información. Cuando tecleas una URL en

tu navegador web, envía un mensaje a otro ordenador de la red, el cual

encuentra el ordenador que contiene los datos que has pedido, y entonces esos

datos son enviados a tu ordenador.

Esto ocurre en cuestión de segundo. Cada ordenador, huésped, y servidor en la

red tiene un número de Protocolo de Internet (dirección IP). Las direcciones IP

son parte de un sistema global y estandarizado para identificar máquinas

conectadas a Internet.

3

Hablando técnicamente, los números IP son direcciones de 32 bits que consisten

en 8 octetos, y son expresados como cuatro números entre el 0 o 255, separados

por puntos, por ejemplo: 192.160.0.1. Los nombres de dominio son expresiones

alfanuméricas más fáciles de recordar que las combinaciones de números de las

direcciones IP. Hay básicamente 3 tipos de dominios usados actualmente en

Internet a nivel internacional:

.com Inicialmente entendido como uso "comercial". Está disponible para

cualquiera que lo registre.

.net Inicialmente reservado para los ordenadores que representan la

infraestructura de Internet.

.org Este nombre de dominio está especialmente ideado para las

organizaciones sin ánimo de lucro.

Anteriormente existían otros 3 tipos de dominio, hoy día están en desuso pero

conviene recordarlas.

.edu Diseñado para los colegios y universidades

.gob Diseñado para las agencias y ramas del gobierno de Estados Unidos

.mil Reservado para entidades militares.

Además, existen otros tipos de dominio que son particulares de cada país. Por

ejemplo, los dominios .fr de Francia, .ge de Alemania, .it de Italia, .jp de Japón o

.es de España. No funcionan como los 3 tipos internacionales, suelen tienen

sistemas de facturación diferentes y sólo pueden ser usados por empresas que

tengan el nombre registrado en su país. Para terminar, conviene decir que existe

un nuevo tipo de dominio internacional, .nu, que se ha hecho famoso por tener

un coste menor que .com, .net u .org. Tan sólo cuesta 25$, a diferencia de, como

veremos posteriormente, los 75$, que cuesta cualquiera de los otros 3.

¿Porque necesitas un dominio?

Lo primero, debes evaluar tus necesidades antes de plantearte el registro de un

dominio. Hazte a ti mismo las siguientes preguntas:

4

¿Cuál es la intención de este sitio web?

¿Necesita algún tipo de reconocimiento por razones mercadotécnicas?

¿La dirección URL será colocada en anuncios de publicidad?

Si tienes intención de usar el sitio web para promocionarte a ti mismo o tus

productos, es una buena idea registrar un nombre de dominio fácilmente

recordable. También es buena idea si tu empresa ya tiene un nombre o una

marca reconocida entre la industria o tu ámbito comercial. El nombre de dominio

te da identidad en Internet, así que escógelo cuidadosamente. Si tu sitio WEB es

de un pequeño comercio o una página personal que no requiere ningún tipo de

reconocimiento, no es necesario registrar un nombre de dominio.

5

1. TECNOLOGÍAS WEB

1.1 ASP

Es el lenguaje de scripting del lado del servidor creado por Microsoft.

ASP (Active Server Pages) es la tecnología desarrollada por Microsoft para la

creación de páginas dinámicas del servidor. ASP se escribe en la misma página

web, utilizando el lenguaje Visual Basic Script o Jscript (Javascript de Microsoft).

Un lenguaje del lado del servidor es aquel que se ejecuta en el servidor web,

justo antes de que se envíe la página a través de Internet al cliente. Las páginas

que se ejecutan en el servidor pueden realizar accesos a bases de datos,

conexiones en red, y otras tareas para crear la página final que verá el cliente.

El cliente solamente recibe una página con el código HTML resultante de la

ejecución de la página ASP. Como la página resultante contiene únicamente

código HTML, es compatible con todos los navegadores. Podemos saber algo

más sobre la programación del servidor y del cliente en el artículo qué es

DHTML.

El tipo de servidores que emplean este lenguaje son, evidentemente, todos

aquellos que funcionan con sistema Windows NT, aunque también se puede

utilizar en un PC con windows 98 si instalamos un servidor denominado Personal

Web Server. Incluso en sistemas Linux podemos utilizar las ASP si intalamos un

componente denominado Chilisoft, aunque parece claro que será mejor trabajar

sobre el servidor web para el que está pensado: Internet Information Server.

Con las ASP podemos realizar muchos tipos de aplicaciones distintas. Nos

permite acceso a bases de datos, al sistema de archivos del servidor y en general

a todos los recursos que tenga el propio servidor. También tenemos la posibilidad

de comprar componentes ActiveX fabricados por distintas empresas de

6

desarrollo de software que sirven para realizar múltiples usos, como el envió de

correo, generar gráficas dinámicamente, y un largo etc.

Actualmente se ha presentado ya la segunda versión de ASP, el ASP.NET, que

comprende algunas mejoras en cuanto a posibilidades del lenguaje y rapidez con

la que funciona. ASP.NET tiene algunas diferencias en cuanto a sintaxis con el

ASP, de modo que se ha de tratar de distinta manera uno de otro.

Para enterarnos bien de lo que es ASP y aprender a programar en el lenguaje

disponemos de una sección en DesarrolloWeb dedicada por entero a tratar ASP

a fondo.

Al navegar más de alguna vez nos hemos topado con alguna página que tiene

archivos con extensión “.asp” y nos hemos preguntado qué significa éste tipo de

archivos. Microsoft introdujo esta tecnología llamada Active Server Pages en

diciembre de 1996, por lo que no es nada nueva. Es parte del Internet Information

Server (IIS) desde la versión 3.0 y es una tecnología de páginas activas que

permite el uso de diferentes scripts y componentes en conjunto con el tradicional

HTML para mostrar páginas generadas dinámicamente, traduciendo la definición

de Microsoft: “Las Active Server Pages son un ambiente de aplicación abierto y

gratuito en el que se puede combinar código HTML, scripts y componentes

ActiveX del servidor para crear soluciones dinámicas y poderosas para el web”.

El principio de la tecnología ASP es el VBScript, pero existe otra diversidad de

lenguajes de programación que pueden ser utilizados como lo es Perl, JScript,

etc.

El ASP es una tecnología dinámica funcionando del lado del servidor, lo que

significa que cuando el usuario solicita un documento ASP, las instrucciones de

programación dentro del script son ejecutadas para enviar al navegador

únicamente el código HTML resultante. La ventaja principal de las tecnologías

dependientes del servidor radica en la seguridad que tiene el programador sobre

su código, ya que éste se encuentra únicamente en los archivos del servidor que

al ser solicitado a través del web, es ejecutado, por lo que los usuario no tienen

acceso más que a la página resultante en su navegador.

7

Para insertar instrucciones ASP dentro del código HTML se incluye encerrado

entre “<% %>”. Estos comandos son los que procesa el servidor antes de enviar

la página al navegador. A continuación tenemos un ejemplo del código ASP en

el servidor y los resultados HTML que serán vistos en el navegador:

Código ASP Código HTML Resultado en el

Navegador



<% For I = 1 To 5 Step 1 %>

”>Maestros del

Web! 

<% Next %>





Maestros del

Web! 

 

 

 

 



Maestros del Web!

Maestros del Web!

Maestros del Web!

Maestros del Web!

Maestros del Web!

El ejemplo anterior crea un ciclo que se repite 5 veces y aumenta el tamaño del

tipo de letra en una frase establecida.

El desarrollo que se ha venido dando a lo que es ASP ha sido bastante amplio.

Entre sus funciones principales están el acceso a base de datos, envió de correo

electrónico, creación dinámica de gráficos y otros. Básicamente, muchas cosas

8

que podemos realizar por medio de CGI pueden ser realizadas con esta

tecnología. Esto debido a que el ASP es tan eficiente con escribir código

directamente a la interface de aplicación del servidor, con la ventaja de que es

más eficiente que el CGI que depende de un compilador ya que el ASP corre

como un servicio en el servidor, tomando ventaja de la arquitectura de

multitareas.

Para empezar con el desarrollo de las Active Server Pages es necesario un

servidor con Windows NT 4.x o mayor y el Internet Information Server. El IIS es

una aplicación gratuita que puede conseguirse en el Option Pack del NT.

También es posible utilizar

ASP en Windows 9x por medio del Personal Web Server junto al Option Pack

mencionado anteriormente.

En caso del uso de un servidor Linux, Chilisoft ha desarrollado el Chilisoft ASP

que también permite el uso de esta tecnología. Otra opción es InstantAsp

también para correr ASP en servidores que no sean el IIS.

La mayoría de proveedores de Hosting pagado con plataformas NT tienen

acceso a esta tecnología en sus servidores. El código puede ser trabajado en

cualquier editor HTML o de texto. Existen en el mercado dos herramientas para

trabajar profesionalmente el ASP en modo visual como lo son el Drumbeat 2000

y el Visual Interdev de Microsoft.

1.2 Java Server Pages (JSP)

Es una tecnología similar a los Servlets que ofrece una conveniente forma de

agregar contenido dinámico a un archivo HTML por utilizar código escrito en Java

dentro del archivo utilizando tags especiales que son procesados por el servidor

Web antes de enviarlos al cliente. La posibilidad de usar APIs de Java hacen de

JSP una poderosa herramienta de desarrollo ya que se obtiene la ventaja de la

programación orientada al objeto, como creación de clases especiales llamadas

componentes o Java Beans, independencia de la plataforma propia de la

programación en Java, etc.

9

La diferencia entre Servlets y JSP es que los Servlets son clases que deben

implementar la clase abstracta HttpServlet, en especial el

método doGet() o doPost() y deben ser previamente compilados, mientras que

los archivos JSP contienen código Java entre código HTML utilizando los

símbolos <% y %>. Por esto un archivo JSP debe ser interpretado por el servidor

al momento de la petición por parte del usuario.

Un servidor Web para Servlets y JSP como Jakarta Tomcat es una aplicación

escrita en Java que mantiene una Java Virtual Machine en ejecución para

compilar los archivos JSP y ejecutar Servlets. El tiempo que demora en la

compilación inicial de un JSP es contrarrestado por su rápido tiempo de

respuesta posterior ya que para procesar un requerimiento sólo tiene que

levantar un proceso liviano o thread dentro de la misma JVM para ejecutar un

archivo .class y no crear un proceso pesado como un intérprete de Perl para

programas CGI.

Como se puede deducir de esto, en realidad la tecnología JSP en sí no es nueva,

sino que sólo es una forma distinta y más fácil para crear Servlets. Si quieres ver

el servlet creado para un JSP ve en el directorio Work del servidor web.

1.3 PHP

PHP tal y como se conoce hoy en día es en realidad el sucesor de un producto

llamado PHP/FI. Creado en 1994 por Rasmus Lerdorf, la primera encarnación

de PHP era un conjunto simple de ficheros binarios Common Gateway Interface

(CGI) escritos en el lenguaje de programación C. Originalmente utilizado para

rastrear visitas de su currículum online, llamó al conjunto de scripts "Personal

Home Page Tools", más frecuentemente referenciado como "PHP Tools". Con el

paso del tiempo se quiso más funcionalidad, y Rasmus reescribió PHP Tools,

produciendo una implementación más grande y rica. Este nuevo modelo fue

capaz de interaccionar con bases de datos, y mucho más, proporcionando un

entorno de trabajo sobre cuyos usuarios podían desarrollar aplicaciones web

dinámicas sencillas tales como libros de visitas. En junio de 1995, Rasmus »

publicó el código fuente de PHP Tools, lo que permitió a los desarrolladores

usarlo como considerasen apropiado. Esto también permitió -y animó- a los

10

usuarios a proporcionar soluciones a los errores del código, y generalmente a

mejorarlo.

En septiembre de ese mismo año, Rasmus amplió PHP y -por un corto periodo

de tiempo- abandonó el nombre de PHP. Ahora, refiriéndose a las herramientas

como FI (abreviatura de "Forms Interpreter"), la nueva implementación incluía

algunas de las funciones básicas de PHP tal y como la conocemos hoy. Tenía

variables como las de Perl, interpretación automática de variables de formulario

y sintaxis incrustada HTML. La sintaxis por sí misma era similar a la de Perl,

aunque mucho más limitada, simple y algo inconsistente. De hecho, para

embeber el código en un fichero HTML, los desarrolladores tenían que usar

comentarios de HTML. Aunque este método no era completamente bien recibido,

FI continuó gozando de expansión y aceptación como una herramienta CGI ---

pero todavía no completamente como lenguaje. Sin embargo, esto comenzó a

cambiar al mes siguiente; en octubre de 1995 Rasmus publicó una versión nueva

del código. Recordando el nombre PHP, ahora era llamado (resumidamente)

"Personal Home Page Construcción Kit," y fue la primera versión que presumía

de ser, en aquel momento, considerada como una interfaz de scripts avanzada.

El lenguaje fue deliberadamente diseñado para asemejarse a C en estructura,

haciéndolo una adopción sencilla para desarrolladores familiarizados con C,

Perl, y lenguajes similares. Habiendo sido así bastante limitado a sistemas UNIX

y compatibles con POSIX, el potencial para una implementación de Windows NT

estaba siendo explorada.

El código fue completamente rehecho de nuevo, y en abril de 1996, combinando

los nombres de versiones anteriores, Rasmus introdujo PHP/FI. Esta

implementación de segunda generación comenzó realmente a desarrollar PHP

desde un conjunto de herramientas dentro de un lenguaje de programación de

derecho propio. Incluía soporte interno para DBM, mSQL, y bases de datos

Postgres95, cookies, soporte para funciones definidas por el usuario, y mucho

más. Ese mes de junio, PHP/FI brindó una versión 2.0. Sin embargo, un

interesante hecho sobre esto, es que sólo había una única versión completa de

11

PHP 2.0. Cuando finalmente pasó de la versión beta en noviembre de 1997, el

motor de análisis subyacente ya estaba siendo reescrito por completo.

Aunque vivió una corta vida de desarrollo, continuó gozando de un crecimiento

de popularidad en el aún joven mundo del desarrollo. En 1997 y 1998, PHP/FI

tenía un culto de varios miles de usuarios en todo el mundo. Una encuesta de

Netcraft en mayo de 1998 indicó que cerca de 60,000 dominios reportaron que

tenían cabeceras que contenían "PHP", indicando en efecto que el servidor host

lo tenía instalado. Este número se correspondía con aproximadamente el 1% de

todos los dominios de Internet del momento. A pesar de estas impresionantes

cifras, la maduración de PHP/FI estaba condenada por limitaciones; mientras

había varios contribuidores menores, aún era desarrollado principalmente por un

individuo.

Ejemplo #1 Ejemplo de Código PHP/FI







Hey, ¡está usando Netscape!







Lo siento, esta entrada no existe

12

Bienvenido !

Le quedan  créditos en su cuenta.



PHP 3

PHP 3.0 fue la primera versión que más se parecía al PHP que existe hoy.

Encontrando todavía PHP/FI 2.0 ineficiente y falto de las características que

necesitaban para impulsar una aplicación de comercio electrónico que estaban

desarrollando para un proyecto de universidad, Andi Gutmans y Zeev Suraski,

de Tel Aviv, Israel, comenzaron otra nueva versión del analizador subyacente en

1997. Proponiendo Rasmus online, discutieron varios aspectos de la

implementación actual y su redesarrollo de PHP. En un esfuerzo para mejorar el

motor y comenzar a construir sobre la base de usuario de PHP/FI existente, Andi,

Rasmus y Zeev decidieron colaborar en el desarrollo de un nuevo e

independiente lenguaje de programación. Este lenguaje completamente nuevo

fue publicado bajo un nuevo nombre, que eliminó la implicación del uso limitado

personal que el nombre PHP/FI tenía. Fue renombrado simplemente como 'PHP',

con el significado de un acrónimo recursivo - PHP: Hypertext Preprocessor.

Una de las mejores características de PHP 3.0 era su gran extensibilidad.

Además de proveer a los usuarios finales de una interfaz madura para múltiples

bases de datos, protocolos, y APIs, la sencillez de ampliar el lenguaje mismo

atrajo a docenas de desarrolladores que presentaron variedad de módulos.

Podría decirse que esta fue la clave para el tremendo éxito de PHP 3.0. Otras

características clave introducidas en PHP 3.0 incluían el soporte para

programación orientada a objetos y una sintaxis de lenguaje mucho más potente

y consistente.

13

En junio de 1998, con muchos nuevos desarrolladores de todo el mundo unidos

al esfuerzo, PHP 3.0 fue anunciado por el nuevo Equipo de Desarrollo de PHP

como el sucesor oficial de PHP/FI 2.0. El desarrollo activo de PHP/FI 2.0, que

estaba casi parado desde noviembre del año anterior, fue oficialmente finalizado.

Después de aproximadamente nueve meses de pruebas públicas, cuando el

anuncio de la versión oficial de PHP 3.0 vino, ya estaba instalado en más de

70,000 dominios de todo el mundo, y ya no estaba limitado a sistemas operativos

compatibles con POSIX. Una relativamente pequeña parte de de los dominios

que tenían instalado PHP estaban albergados en servidores que ejecutaban

Windows 95, 98, y NT, y Macintosh. En este punto, PHP 3.0 estaba instalado en

aproximadamente el 10% de los servidores web de Internet.

PHP 4

En el invierno de 1998, poco después del lanzamiento oficial de PHP 3.0, Andi

Gutmans y Zeev Suraski comenzaron a trabajar en una nueva versión del núcleo

de PHP. Los objetivos de diseño fueron mejorar la ejecución de aplicaciones

complejas y mejorar la modularidad del código base de PHP. Estas aplicaciones

se hicieron posibles por las nuevas características de PHP 3.0 y el apoyo de una

gran variedad de bases de datos y APIs de terceros, pero PHP 3.0 no estaba

diseñado para un mantenimiento tan complejo de aplicaciones eficientemente.

El nuevo motor, apodado 'Motor Zend' (proviene de sus nombres de pila, Zeev y

Andi), alcanzó estos objetivos de diseño satisfactoriamente, y se introdujo por

primera vez a mediados de 1999. PHP 4.0, basado en este motor, y asociado

con un gran rango de nuevas características adicionales, fue oficialmente

publicado en Mayo del 2000, casi dos años después que su predecesor. Además

de la mejora de rendimiento de esta versión, PHP 4.0 incluía otras características

clave como el soporte para la mayoría de los servidores Web, sesiones HTTP,

buffers de salida, formas más seguras de controlar las entradas de usuario y

muchas nuevas construcciones de lenguaje.

14

PHP 5

PHP 5 fue lanzado en Julio del 2004 después de un largo desarrollo y varios pre-

releases. Está básicamente impulsado por su núcleo, Zend Engine 2.0 que

contiene un nuevo modelo de objetos y docenas de nuevas opciones.

El equipo de desarrollo de PHP incluye docenas de desarrolladores, así como

docenas de otras personas trabajando en proyectos relacionados y de soporte

para PHP, como PEAR, PECL, y documentación, y una infraestructura en red

subyacente de más de cien servidores web individuales en seis de los siete

continentes del mundo. Aunque es solo una estimación basada en estadísticas

de años anteriores, es seguro suponer que PHP ahora está instalado en diez o

quizá cien millones de dominios en todo el mundo.

2. HERRAMIENTAS

2.1 XML

XML, siglas en inglés de eXtensible Markup Language ('lenguaje de marcas

extensible'), es un lenguaje de marcas desarrollado por el World Wide Web

Consortium (W3C) utilizado para almacenar datos en forma legible. Deriva del

lenguaje SGML y permite definir la gramática de lenguajes específicos (de la

misma manera que HTML es a su vez un lenguaje definido por SGML) para

estructurar documentos grandes. A diferencia de otros lenguajes, XML da

soporte a bases de datos, siendo útil cuando varias aplicaciones deben

comunicarse entre sí o integrar información.1

15

XML no ha nacido sólo para su aplicación para Internet, sino que se propone

como un estándar para el intercambio de información estructurada entre

diferentes plataformas. Se puede usar en bases de datos, editores de texto,

hojas de cálculo y casi cualquier cosa imaginable.

XML es una tecnología sencilla que tiene a su alrededor otras que la

complementan y la hacen mucho más grande y con unas posibilidades mucho

mayores. Tiene un papel muy importante en la actualidad ya que permite la

compatibilidad entre sistemas para compartir la información de una manera

segura, fiable y fácil.

HISTORIA

XML proviene de un lenguaje inventado por IBM en los años setenta, llamado

GML (Generalized Markup Language), que surgió por la necesidad que tenía la

empresa de almacenar grandes cantidades de información y compartirla en otros

SO y plataformas. Este lenguaje gustó a la ISO, por lo que en 1986 trabajaron

para normalizarlo, creando SGML (Standard Generalized Markup Language),

capaz de adaptarse a un gran abanico de problemas. A partir de él se han creado

otros sistemas para almacenar información.

En el año 1989 Tim Berners Lee creó la web, y junto con ella el lenguaje HTML.

Este lenguaje se definió en el marco de SGML y fue de lejos la aplicación más

conocida de este estándar. Los navegadores web sin embargo siempre han

puesto pocas exigencias al código HTML que interpretan y así las páginas web

son caóticas y no cumplen con la sintaxis. Estas páginas web dependen

fuertemente de una forma específica de lidiar con los errores y las

16

ambigüedades, lo que hace a las páginas más frágiles y a los navegadores más

complejos.

Otra limitación del HTML es que cada documento pertenece a un vocabulario

fijo, establecido por el DTD. No se pueden combinar elementos de diferentes

vocabularios. Asimismo es imposible para un intérprete (por ejemplo un

navegador) analizar el documento sin tener conocimiento de su gramática (del

DTD). Por ejemplo, el navegador sabe que antes de una etiqueta <div> debe

haberse cerrado cualquier previamente abierto. Los navegadores

resolvieron esto incluyendo lógica ad hoc para el HTML, en vez de incluir un

analizador genérico. Ambas opciones, de todos modos, son muy complejas para

los navegadores.

Se buscó entonces definir un subconjunto del SGML que permita:

Mezclar elementos de diferentes lenguajes. Es decir que los lenguajes sean

extensibles.

La creación de analizadores simples, sin ninguna lógica especial para cada

lenguaje.

Empezar de cero y hacer hincapié en que no se acepte nunca un documento con

errores de sintaxis.

Para hacer esto XML deja de lado muchas características de SGML que estaban

pensadas para facilitar la escritura manual de documentos. XML en cambio está

orientado a hacer las cosas más sencillas para los programas automáticos que

necesiten interpretar el documento.

Críticas

17

XML y sus extensiones han sido regularmente criticadas por su nivel de detalle

y complejidad.3 El mapeo del modelo de árbol básico de XML hacia los sistema

de tipos de lenguajes de programación o bases de datos puede ser difícil,

especialmente cuando se utiliza XML para el intercambio de datos altamente

estructurados entre aplicaciones, lo que no era su objetivo primario de diseño.

Otras críticas intentan refutar la afirmación de que XML es un lenguaje

autodescriptivo4 (aunque la especificación XML no hace ninguna afirmación de

este tipo). Se propone a JSON y YAML frecuentemente como alternativas,

centrándose ambas en la representación de datos estructurados, en lugar de

documentos narrativos.

Ventajas del XML

Es extensible: Después de diseñado y puesto en producción, es posible extender

XML con la adición de nuevas etiquetas, de modo que se pueda continuar

utilizando sin complicación alguna.

El analizador es un componente estándar, no es necesario crear un analizador

específico para cada versión de lenguaje XML. Esto posibilita el empleo de

cualquiera de los analizadores disponibles. De esta manera se evitan bugs y se

acelera el desarrollo de aplicaciones.

Si un tercero decide usar un documento creado en XML, es sencillo entender su

estructura y procesarla. Mejora la compatibilidad entre aplicaciones. Podemos

comunicar aplicaciones de distintas plataformas, sin que importe el origen de los

datos, es decir, podríamos tener una aplicación en Linux con una base de datos

Postgres y comunicarla con otra aplicación en Windows y Base de Datos MS-

SQL Server.

Transformamos datos en información, pues se le añade un significado concreto

y los asociamos a un contexto, con lo cual tenemos flexibilidad para estructurar

documentos.

18

2.2 Java

Java es un lenguaje de programación con el que podemos realizar cualquier tipo

de programa. En la actualidad es un lenguaje muy extendido y cada vez cobra

más importancia tanto en el ámbito de Internet como en la informática en general.

Está desarrollado por la compañía Sun Microsystems con gran dedicación y

siempre enfocado a cubrir las necesidades tecnológicas más punteras.

Una de las principales características por las que Java se ha hecho muy famoso

es que es un lenguaje independiente de la plataforma. Eso quiere decir que si

hacemos un programa en Java podrá funcionar en cualquier ordenador del

mercado. Es una ventaja significativa para los desarrolladores de software, pues

antes tenían que hacer un programa para cada sistema operativo, por ejemplo

Windows, Linux, Apple, etc. Esto lo consigue porque se ha creado una Máquina

de Java para cada sistema que hace de puente entre el sistema operativo y el

programa de Java y posibilita que este último se entienda perfectamente.

La independencia de plataforma es una de las razones por las que Java es

interesante para Internet, ya que muchas personas deben tener acceso con

ordenadores distintos. Pero no se queda ahí, Java está desarrollándose incluso

para distintos tipos de dispositivos además del ordenador como móviles,

agendas y en general para cualquier cosa que se le ocurra a la industria.

Pasado y presente

Java fue pensado originalmente para utilizarse en cualquier tipo de

electrodoméstico pero la idea fracasó. Uno de los fundadores de Sun rescató la

idea para utilizarla en el ámbito de Internet y convirtieron a Java en un lenguaje

potente, seguro y universal gracias a que lo puede utilizar todo el mundo y es

gratuito. Una de los primeros triunfos de Java fue que se integró en el navegador

Netscape y permitía ejecutar programas dentro de una página web, hasta

entonces impensable con el HTML.

Actualmente Java se utiliza en un amplio abanico de posibilidades y casi

cualquier cosa que se puede hacer en cualquier lenguaje se puede hacer

también en Java y muchas veces con grandes ventajas. Para lo que nos interesa

19

a nosotros, con Java podemos programar páginas web dinámicas, con accesos

a bases de datos, utilizando XML, con cualquier tipo de conexión de red entre

cualquier sistema. En general, cualquier aplicación que deseemos hacer con

acceso a través web se puede hacer utilizando Java.

2.3 jQuery

jQuery es uno de los complementos más esenciales para el desarrollo web,

usado en millones de sitios en toda la web, ya que nos facilita mucho el desarrollo

de aplicaciones enriquecidas del lado del cliente, en Javascript, compatibles con

todos los navegadores.

Para los que se inician, conviene aclarar que jQuery no es un lenguaje, sino una

serie de funciones y métodos de Javascript. Por tanto, Javascript es el lenguaje

y jQuery es una librería que podemos usar opcionalmente si queremos facilitar

nuestra vida cuando programamos en Javascript. A veces nos podemos referir

a jQuery como framework o incluso como un API de funciones, útiles en la

mayoría de proyectos web.

Antes de llegar jQuery los desarrolladores estábamos obligados a discriminar

entre los diversos navegadores, para ejecutar aquel código Javascript que

funcionaba en cada browser. Con la llegada de jQuery la principal ventaja es que

ya no necesitamos preocuparnos sobre si el navegador del usuario es Explorer,

Chrome, Firefox, etc. sino que la propia librería hará el trabajo "sucio" por

nosotros y ejecutará el código que sea compatible con el software del cliente que

está accediendo a nuestra web. Para ello usaremos las funciones que jQuery

nos proporciona, dentro de un grandísimo abanico de funcionalidades que

además se extiende por medio de miles de plugins que ofrece la comunidad para

implementar cualquier tipo de comportamiento.

Para aprender jQuery necesitas saber Javascript. No requiere ser un gran

maestro en el lenguaje, pero al menos sí trabajar con él con cierta soltura. Date

cuenta que cuando programas con jQuery en realidad estás programando con

Javascript, por ello es importante que no intentes empezar la casa por el tejado

y primero aprendas el lenguaje "padre".

20

En el presente manual te acercamos todas, o la mayoría de, las funcionalidades

que están presentes en el "core" de jQuery. Aprenderás cosas tan variadas como

modificar dinámicamente los estilos de la página, manipular el DOM, realizar

efectos vistosos, trabajar con Ajax, crear tus propios plugins y un largo etc.

Tenemos además otros manuales que te explican asuntos más concretos como

las jQueryUI.

2.4 CSS

¿Qué es CSS? ¿Para qué se utiliza? Veremos ejemplos sencillos y prácticos de

este lenguaje para entender su utilidad dentro de internet en el diseño y

programación de páginas web.

DEFINICIÓN O CONCEPTO DE LENGUAJE CSS

CSS es un lenguaje utilizado en la presentación de documentos HTML. Un

documento HTML viene siendo coloquialmente “una página web”. Entonces

podemos decir que el lenguaje CSS sirve para organizar la presentación y

aspecto de una página web. Este lenguaje es principalmente utilizado por parte

de los navegadores web de internet y por los programadores web informáticos

para elegir multitud de opciones de presentación como colores, tipos y tamaños

de letra, etc.

La filosofía de CSS se basa en intentar separar lo que es la estructura del

documento HTML de su presentación. Por decirlo de alguna manera: la página

web sería lo que hay debajo (el contenido) y CSS sería un cristal de color que

hace que el contenido se vea de una forma u otra. Usando esta filosofía, resulta

muy fácil cambiarle el aspecto a una página web: basta con cambiar “el cristal”

21

que tiene delante. Piensa por ejemplo qué ocurre si tienes un libro de papel y lo

miras a través de un cristal de color azul: que ves el libro azul. En cambio, si lo

miras a través de un cristal amarillo, verás el libro amarillo. El libro (el contenido)

es el mismo, pero lo puedes ver de distintas maneras.

Algunas opciones básicas del lenguaje CSS por ejemplo pueden ser el poder

cambiar el color de algunas típicas etiquetas HTML como <H1> (h1 es una

etiqueta en el lenguaje HTML destinada a mostrar un texto como encabezado,

en tamaño grande). Pero también hay funciones algo más complejas, como

introducir espaciado entre elementos <DIV> (div es una etiqueta HTML para

identificar una determinada región o división de contenido dentro de una página

web) o establecer imágenes de fondo.

CSS es muy intuitivo y sencillo una vez se llega a aprender, ya que para su

definición siempre se hace uso de un identificador de etiqueta HTML (como por

ejemplo <H1>), y luego indicamos con qué aspecto queremos que se muestren

todas las etiquetas <H1> que aparezcan en un documento. Al igual que con

<H1> podemos definir cómo queremos que se muestren las distintas partes del

documento HTML, pudiendo en cada caso definir sus propiedades (color, tipo de

fuente, tamaño, espacio, imagen) con algún determinado valor deseado.

Vamos a partir de un ejemplo muy sencillo, que tratará de una página web o

archivo HTML donde tan solo tendremos una párrafo de texto y sobre cuya

etiqueta iremos realizando cambios e iremos aplicando los conocimientos

que vamos a ir adquiriendo y posteriormente veremos los resultados que

obtenemos.

Nuestro documento html contendrá el siguiente texto de partida (en este caso se

ha llamado ejemplo.html):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Ejemplo aplicación CSS - aprenderaprogramar.com </title>

</head>

<body>

22

Texto de ejemplo para visualizar resultados 

</body>

</html>

Una vez creado el documento ejemplo.html en nuestro ordenador, lo abriremos

con un navegador web, cuyo resultado será similar a éste dependiendo del

navegador que utilicemos:

Una vez hemos visualizado este ejemplo tenemos una página web que tan solo

tiene un párrafo (“Texto de ejemplo para visualizar resultados”). Este aparece en

color negro por defecto y nosotros, para ver la utilidad de CSS deseamos mostrar

el texto en rojo. En realidad con CSS podemos hacer cosas mucho más

complejas, pero solo queremos poner un ejemplo para mostrar la utilidad de

CSS.

Para ello vamos a crear nuestro archivo de hojas de estilo CSS que llamaremos

estilos.css, que crearemos en el mismo directorio donde tengamos el archivo

ejemplo.html y que contendrá lo siguiente:

/* Comentario en nuestro primer archivo css estilos.css

– www.aprenderaprogramar.com*/

p {color:red;}

Para crear el archivo basta abrir un editor de texto como el bloc de notas como

Notepad++ o el simple bloc de notas de Windows, escribir el texto y guardar el

archivo con el nombre adecuado.

http://www.aprenderaprogramar.com/

23

En la primera línea hemos insertado un comentario CSS. Para insertar un

comentario usamos la cadena de caracteres “/*” seguido del comentario que

queremos y cerramos la cadena con “*/”.

La segunda línea es propiamente donde definimos el estilo que queremos

mostrar. En este caso, p{color:red;} que indica que queremos un estilo para la

etiqueta cuya propiedad color sea igual a red (rojo en inglés).

El patrón será el siguiente: nombre etiqueta HTML (en este caso p para la

etiqueta de HTML) seguido de “{“, seguido de una lista de propiedades-

valores separadas por “;” y finalizamos con “}”. A su vez la lista de propiedades-

valores será un conjunto de palabras que indicará la propiedad que queremos

cambiar, en nuestro caso color, seguido de “:” y el valor que queremos asignar

para esa propiedad, en este caso red ya que queremos mostrar el texto en rojo.

Además de color podríamos establecer tipo de fuente, tamaño de fuente, y

distintas propiedades.

Pues bien una vez tenemos nuestro archivo de estilos, estilos.css, debemos de

importarlo para su uso a nuestra página web o documento html, ejemplo.html.

Para ello ponemos lo siguiente entre las etiquetas <head> y </head> de nuestro

ejemplo.html.

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

Este código lo que hace es indicar que existe un archivo con una definición de

estilos u hoja de estilos (stylesheet) que contiene código css (text/css) y que se

encuentra en la ruta estilos.css. Si el fichero se encontrara en otro directorio

habría que especificar la ruta, por ejemplo : templates/estilos.css.

Así tendremos nuestro archivo ejemplo.html con el siguiente texto:

24

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Ejemplo aplicación CSS - aprenderaprogramar.com</title>


</head>

<body>

Texto de ejemplo para visualizar resultados 

</body>

</html>

Y una vez que guardamos el archivo html con este nuevo código, recargamos la

página web en el navegador obteniendo el texto de la etiqueta en rojo:

Aquí podemos ver la facilidad de CSS para cambiar la presentación ya que si

ahora quisiéramos cambiar el color, fuente, tamaño, etc, de la etiqueta para

nuestra página web, tan solo deberíamos de cambiar las propiedades en el

fichero estilos.css sin alterar nada en la página web siendo más fácil, rápido y

legible que tener que estar modificando todas y cada una de las etiquetas 

que aparecieran en nuestra página web.

25

Ahora bien, imaginemos que tenemos una página web con 3 etiquetas pero

no deseamos que todas tengan la misma presentación. Pues para estas

situaciones CSS incorpora los llamados selectores. Estos selectores, nos indican

para qué elementos debemos de adoptar los estilos definidos en ellos.

Principalmente hay 2 tipos de selectores, el punto ( . ) y la almohadilla ( # ).

El selector . afecta a todas las etiquetas HMTL que tengan un atributo en HTML

del tipo class. Por ejemplo para podríamos definir un estilo CSS

del tipo .azul{color:blue;}. Escribiendo esto en el archivo css lo que hacemos es

definir que cada vez que se indique que una etiqueta es de clase “azul” la

propiedad de estilo color será establecida a blue (blue es azul en inglés). Así si

escribiéramos Texto de ejemplo para visualizar resultados,

el navegador busca en el css cómo se ha definido que deben ser todos los

elementos en los que se indique que usen la clase “azul”. Esta clase además de

un color podría establecer tamaño de texto, interlineado, tipo de fuente y

múltiples atributos.

El otro selector más utilizado es #. Este afecta a todas las etiquetas HTML que

tengan un atributo en HTML del tipo id. Por ejemplo Este texto

está identificado significa que esta etiqueta de HTML lleva un “identificador”

o nombre único en esa página web, en este caso “verde”. Podríamos definir un

estilo CSS del tipo#verde{color:green;}. Con este código hemos definido un estilo

para la etiqueta con id verde, de modo que la propiedad color tomará el

valor green (green es verde en inglés). Es decir, el elemento de la página web

que lleve el identificador indicado tomará las propiedades de estilo que se hayan

especificado. El id es único dentro de una página web: no puede haber dos

etiquetas cuyo id sea el mismo.

Normalmente el selector “#” se utiliza para un solo elemento (por ejemplo, el

encabezado o el pie) en toda la página web identificado por su atributo id,

mientras que el selector “.” también llamado selector de clase es utilizado para

un grupo más amplio de elementos en concreto todos los que tengan sus

atributos class iguales que los definidos por el selector “.”.

26

Vamos ahora a realizar algunos cambios en nuestros documentos, tanto

ejemplo.html como sobre estilos.css y veremos más claro lo anteriormente

explicado.



<html>

<head>



</head>

<body>

Texto de ejemplo para visualizar resultados de la class

azul 

Este texto también utiliza la clase azul 

Texto de ejemplo para visualizar resultados de la class

roja 

Texto de ejemplo para visualizar resultados de la id

postdata 

</body>

</html>

También deberemos de cambiar nuestro fichero estilos.css para definir las

propiedades de las etiquetas correspondientes, quedando así:

27

/* Comentario en nuestro primer archivo css estilos.css

– www.aprenderaprogramar.com*/

.azul{color:blue;}

.roja{color:red;}

#postdata{color:green;font-size:10px;}

Y al refrescar nuestro navegador obtendríamos el siguiente resultado:

Como podemos observar hemos modificado nuestro documento html para que

tuviera 4 parrafos. Los 2 primeros pertenecen a la misma clase azul ya que su

atributo class se corresponde con el estilo azul que se ha definido en la hoja de

estilos (en el archivo estilos.css).

El tercero pertenece a la clase “roja”, mientras que el cuarto es un párrafo con id

postdata y por tanto pertenece al estilo del selector único postdata.

http://www.aprenderaprogramar.com/

28

AMBITO DE DEFINICION PARA CSS

La forma de definición de estilos css que hemos explicado en este artículo es la

que más separa la presentación de la información en una página web. Es muy

útil porque tenemos los estilos por un lado y los contenidos por otro. Si en un

momento dado queremos cambiar la forma en que se ve la página pero no sus

contenidos, únicamente tendríamos que modificar los archivos css. Pero también

existen estas otras 2 formas de aplicar estilos.

1- Definición en línea: En este método se define las propiedades de la etiqueta

HTML con el atributo style dentro del mismo archivo HTML y se le asigna una

determinada cadena que definiría el comportamiento. Ejemplo: 

En este ejemplo asignamos en línea a la etiqueta p el style (style es estilo en

inglés) definido, en el que la propiedad color toma el valorred de modo que el

texto se mostrará en rojo. Esta opción de definición, es rápida y para pequeñas

cosas o reparaciones de mantenimiento web puede ser útil, pero si se abusa de

esta técnica tendremos una página web muy poco legible ya que tendremos en

un mismo archivo el contenido de la página web junto con su presentación. Hacer

cambios en la presentación se hace entonces más complicado, al tener que ir

revisando todas las etiquetas que queramos cambiar una por una.

2- Definición hoja de estilos interna:En este método se definen las propiedades

de estilo de la misma manera que hacíamos en el archivo css independiente,

pero en este caso se hace en la misma página entre las etiquetas <head> y

</head>, como vemos en el siguiente ejemplo.

29



<html>

<head>


<style type="text/css">

p{color:red;}

</style>

</head>

<body>

Texto ejemplo 

</body>

</html>

Como podemos observar definimos el estilo dentro de las etiquetas <head> y

</head>. Para delimitar lo que es definición de estilos se usa la etiqueta <style>

y </style> a modo de apertura y cierre de la definición de estilos. El código se

escribe igual que en el archivo css y aunque no es igual de independiente, esta

forma de definición al menos es algo más separada y legible que la anterior

opción ya que la definición de la presentación al menos no se mezcla con el

contenido de la página web.

ESTANDARIZACIÓN

Tras la aparición del lenguaje CSS surgió la necesidad de estandarizar su uso

para todos los navegadores y los desarrolladores de software, ya que existían

muchas formas de escribir código CSS. Además, los navegadores interpretaban

30

algunas definiciones de estilo de distintas maneras y esto hacía más complicado

el desarrollo de páginas web. De hecho, las personas que trabajan en desarrollos

web muchas veces se enfrentan a que un navegador muestra una página web

de distinta manera aunque el código sea el mismo, simplemente por la forma en

que el navegador interpreta el código. El organismo encargado de la

estandarización al respecto es el llamado W3C que definió la primera versión

CSS1 en 1996. Posteriormente se han desarrollado las revisiones 2, 2.1 y 3 que

es la más actual. El lenguaje CSS seguirá evolucionando, pero hoy día puede

decirse que ha sido un éxito al simplificar el mantenimiento de páginas web.

Antes, los contenidos y los estilos de presentación estaban mezclados. Con

CSS, quedan separados y se hace más fácil el diseño y mantenimiento de

páginas web.

http://www.w3c.es/

31

3. MEDIOS DIGITALES

3.1 Formatos de Video

GIF (Graphic Image File Format).

El formato GIF es el formato de archivo que se utiliza habitualmente para mostrar

gráficos e imágenes de color indexado en documentos HTML en Internet y otros

servicios en línea. GIF es un formato comprimido con LZW diseñado para

minimizar el tamaño del archivo y el tiempo de transferencia electrónica. El

formato GIF preserva la transparencia en imágenes de color indexado.

Es el formato más adecuado para aquellas imágenes sencillas, de formas

simples y en las que no existe un elevado número de colores.

Sus características son:

Número de colores: de 2 a 256 de una paleta de 24 bits.

Formato de compresión sin pérdida basado en el algoritmo LZW.

Carga progresiva en el navegador.

Máscara de trasparencia de 1 bit.

Permite la animación simple.

JPEG (Joint Photographic Experts Group).

Fue diseñado para la compresión de imágenes fotográficas, basándose en el

hecho de que el ojo humano no es perfecto y no es capaz de captar toda la

información que se puede almacenar el una imagen de 24 bits.

El formato JPEG intenta eliminar la información que el ojo humano no es capaz

de distinguir, por eso se dice que posee un formato de compresión con pérdida,

porque elimina información.

El formato JPEG se utiliza habitualmente para mostrar fotografías y otras

imágenes de tono continuo en documentos HTML en Internet y otros servicios

32

en línea. El formato JPEG admite los modos de color CMYK, RGB y Escala de

grises pero no admite canales alfa (No preserva la transparencia). A diferencia

del formato GIF, JPEG retiene toda la información de color de una imagen RGB

pero comprime el tamaño del archivo descartando datos selectivamente.

Las características de este formato son:

Número de colores: 24 bits color o 8 bits B/N

Elevado grado de posibilidad de compresión.

Formato de compresión con pérdida.

No permite trasparencia, ni canal alfa.

No permite la animación.

Por regla general, es el más indicado para aquellas imágenes que son

fotografías.

PNG (Portable Network Graphics).

Proporciona un formato compresión de imágenes sin pérdida.

El formato PNG es uno de los formatos más interesantes. Aunque su uso no está

tan extendido en este momento, cada vez más rápidamente está siendo bien

acogido por los desarrolladores de páginas web. Desarrollado como una

alternativa sin patente al formato GIF, el formato de gráficos de red portátiles

(PNG) se utiliza para una compresión sin pérdidas y para la visualización de

imágenes en Internet. A diferencia del formato GIF, PNG admite imágenes de 24

bits y produce transparencia de fondo sin bordes irregulares. Esto es algo que

consigue por medio del "canal alpha", que permite definir el grado de

transparencia u opacidad de un color. Sin embargo, algunos navegadores Web

no admiten imágenes PNG, o no las soportan del todo bien, es el caso de Internet

Explorer 6, que tiene diversos problemas sobre todo con los archivos

semitransparentes. El formato PNG admite también imágenes RGB, en 8 bit, de

33

color indexado, opcionalmente en escala de grises y de mapa de bits sin canales

alfa. PNG conserva la transparencia en imágenes en escala de grises y RGB, lo

que resulta extremadamente útil para utilizarse en Flash, donde PNG es

totalmente compatible.

Las características de este formato son:

Color indexado hasta 256 colores y TrueColor hasta 48 bits por pixel.

Mayor compresión que el formato GIF (+10%)

Compresión sin pérdida.

Canal alfa. (Transparencia variable)

No permite animación.

3.2 Formatos de video

A continuación se hablara sobre los formatos de video más utilizados y

aceptados por diferentes aplicaciones Web, y diferentes redes sociales

1. Mpeg. Es uno de los estándares de compresión de audio/video más

utilizados. Tiene grandes ventajas respecto acompatibilidad,

compresión y calidad de la imagen. Lo soportan sitios como youtube,

vimeo, entre otros y se divide en los siguientes tipos:

MPEG-1: Calidad de video CD-ROM. Lentos, velocidad de transferencia

limitada (1.5 Mbits) , resolución de 352×240.

MPEG-2: Mayor calidad, mayor ancho de banda (3 a 10). En esa banda,

proporciona 720×486 pixels de resolución, es decir, calidad TV. Ofrece

compatibilidad con MPEG-1.

MPEG-4: Tiene características de MPEG-1 y MPEG-2, expande MPEG-

1 para soportar “objetos” audio/vídeo, contenido 3D, codificación de baja

velocidad binaria y soporte para gestión de derechos digitales (protección

34

de copyright) actualmente se emplea como codec HDTV en detrimento de

MPEG-2.

1. FLV. Desarrollado por Adobe permite ser incrustado en archivos flash

(.swf) para presentaciones y aplicaciones multimedia. Es uno de los más

soportados por sitios como:

YouTube

Antiguo Google Video

Reuters.com

Yahoo! Video

MySpace.

1. DivX. Utilizado para la compresión y visualización de películas gracias

a que permite disminuir el espacio en disco de un vídeo sin pérdida

significativa de calidad

2. Mov. Formato especial de los sistemas Mac. Requieren Quick time player

para visualizarles

3. Avi. El formato avi permite almacenar simultáneamente un flujo de datos

de video y varios flujos de audio.

Los anteriores son algunos de los formatos más populares. Ellos varían de

un códec a otro en calidad, capacidad, sonido etc. Lo realmente importante es

buscar la solución que más se ajuste a tus necesidades y a las capacidades de

la aplicación que vayas a utilizar (sitios web, redes sociales, envió de correos,

multimedia).

35

3.3 Formato de audio

WMA

Windows Media Audio (WMA) es una tecnología de compresión de

audio desarrollada por Microsoft. El nombre puede usarse para referirse

al formato de archivo de audio o al códec de audio. Es software propietario que

forma parte de la suite Windows Media.

WMA consiste de cuatro códecs distintos. El códec WMA original, conocido

simplemente como WMA, fue concebido como competidor al MP3 y

al RealAudio. WMA Pro, un códec más moderno y avanzado, soporta

audio surround y de alta resolución. También existe un formato de compresión

sin pérdida, WMA Lossless, el cual comprime audio sin perder definición (el WMA

regular tiene compresión con pérdida). Existe otra variación llamada WMA Voice,

enfocada en contenido hablado, aplica compresión y está diseñado para tasas

de bits muy bajas.

MP3

El formato MP3 (MPEG 1 Layer 3) fue creado por el Instituto Fraunhofer

y por su extraordinario grado de compresión y alta calidad está

prácticamente monopolizando el mundo del audio digital.

Es ideal para publicar audios en la web. Se puede escuchar desde la

mayoría de reproductores.

La transformación de WAV a MP3 o la publicación directa de una

grabación en formato MP3 es un proceso fácil y al alcance de los

principales editores de audio.

Tiene un enorme nivel de compresión respecto al WAV. En igualdad del

resto de condiciones reduciría el tamaño del archivo de un fragmento

musical con un factor entre 1/10 y 1/12.

Presentan una mínima pérdida de calidad.

36

Formato MIDI

El formato MIDI (Musical Instrument Digital Interface = Interface Digital

para Instrumentos Digitales) en realidad no resulta de un proceso de

digitalización de un sonido analógico. Un archivo de extensión *.mid

almacena secuencias de dispositivos MIDI (sintetizadores) donde se

recoge qué instrumento interviene, en qué forma lo hace y cuándo.

Este formato es interpretado por los principales reproductores del

mercado: Windows Media Player, QuickTime, etc.

Los archivos MIDI se pueden editar y manipular mediante programas

especiales y distintos de los empleados para editar formatos WAV, MP3,

etc. El manejo de estos programas suele conllevar ciertos conocimientos

musicales.

Los archivos MIDI permiten audios de cierta duración con un reducido

peso. Esto es debido a que no guardan el sonido sino la información o

partitura necesaria para que el ordenador la componga y reproduzca a

través de la tarjeta de sonido.

Se suelen utilizar en sonidos de fondo de páginas HTML o para escuchar

composiciones musicales de carácter instrumental.

El formato MIDI no permite la riqueza de matices sonoros que otros

formatos ni la grabación a partir de eventos sonoros analógicos.

Formato WAV

El formato WAV (WaveForm Audio File) es un archivo que desarrolló

originalmente Microsoft para guardar audio. Los archivos tienen extensión

*.wav

Es ideal para guardar audios originales a partir de los cuales se puede

comprimir y guardar en distintos tamaños de muestreo para publicar en la

web.

37

Es un formato de excelente calidad de audio.

Sin embargo produce archivos de un peso enorme. Una canción extraída

de un CD (16 bytes, 44100 Hz y estéreo) puede ocupar entre 20 y 30 Mb.

Compresión: Los archivos WAV se pueden guardar con distintos tipos de

compresión. Las más utilizadas son la compresión PCM y la compresión

ADPCM. No obstante incluso definiendo un sistema de compresión, con

un audio de cierta duración se genera un archivo excesivamente pesado.

El formato WAV se suele utilizar para fragmentos muy cortos (no

superiores a 3-4 segundos), normalmente en calidad mono y con una

compresión Microsoft ADPCM 4 bits.

MP4

Otro formato bastante importante y que ha tenido un boom en los últimos años

es el MP4. En realidad la calidad de este formato es muy parecida a la del MP3,

pero con un tamaño mucho más reducido. También podemos encontrar este tipo

de compresión en los famosos FLV de Youtube y muchas otras páginas de

Internet. El MP4 es el rey de los formatos de audio en Internet, y generalmente

es el que encontraremos a la hora de reproducir audio en la Web y sobre todo

en smartphones y cualquier otro pequeño dispositivo. Dada su versatilidad y su

extraordinaria compresión es el formato ideal para mover archivos por la Red.

38

4. MEDIAS DE SEGURIDAD

4.1 MD5

Continuamente descargamos nuevo software para nuestros ordenadores y

dispositivos y, a menudo, lo hacemos desde páginas web que no son las

oficiales. Esto, aunque no pueda parecer peligroso para nuestros sistemas, sí lo

es, ya que esa aplicación que hemos descargado podría haber sido modificada,

incluyendo en ella un virus o troyano. Como más vale prevenir que curar, hoy

hablaremos sobre el algoritmo MD5, y cómo puede ayudarnos a comprobar que

nuestras descargas no hayan sido modificadas con respecto a cómo fueron

publicadas por sus desarrolladores, además de ver otras aplicaciones de éste.

Si te preocupa la seguridad de tu sistema operativo, seguramente seas

cuidadoso con lo que descargas e instalas en él. Pero a veces, instalamos

software que ha sido descargado de una web que no es la oficial de dicho

programa, o utilizamos un instalador antiguo del que no sabemos con seguridad

de dónde procede. En estos casos, no está de más asegurarse que el software

que va a instalarse es de confianza, y que no ha sido alterado por algún

malintencionado usuario que haya podido añadir un virus o troyano al instalador.

Para realizar esta comprobación, la opción más usada es el algoritmo MD5, que,

además de tener otras aplicaciones, nos dirá con certeza si el software que

acabamos de descargar es el oficial o ha sufrido algún cambio con respecto a

éste y puede resultar peligroso para nuestro sistema.

MD5, ¿qué es y cómo funciona?

39

En vez de dar una definición técnica, vamos a tratar de explicar de una forma

más básica qué es y cómo funciona el MD5. Es un algoritmo que proporciona un

código asociado a un archivo o un texto concretos. De esta forma, a la hora de

descargar un determinado archivo, como puede ser un instalador, el código

generado por el algoritmo, también llamado hash, viene “unido” al archivo.

Para que nosotros podamos ver este código MD5, existe software que analiza el

archivo descargado y obtiene dicho código de él. Con el hash de nuestra

descarga, podemos acudir a la web del desarrollador del programa del que

tenemos el instalador y buscar el código MD5 de su instalador original. Una vez

tengamos disponibles los dos códigos MD5, el de nuestro archivo descargado y

el del instalador o software de la web oficial del desarrollador,

podremos comparar ambos y ver si coinciden y nuestro archivo es fiable o no.

¿Qué usos tiene?

Aparte de asegurarnos si un instalador es fiable –que es su uso más extenso– el

algoritmo MD5 tiene otros usos también muy interesantes. El primero de ellos,

es que, mediante un programa, también podemos crear el código MD5 de un

archivo propio, para que quien haga uso de él pueda comprobar su integridad.

Otra aplicación verdaderamente interesante está en las instalaciones

de firmware, en las que además de proporcionarnos la información referente a la

seguridad del archivo, puede servir también para comprobar que la descarga de

éste se ha realizado correctamente, y dispongamos del archivo completo y

correcto. Esto, como decimos, es de gran utilidad a la hora de instalar un

nuevo firmware o sistema operativo en nuestros dispositivos, como puede ser un

router, o en el momento de flashear una ROM cocinada en

un smartphone Android, ya que realizar una instalación de estas características

con un archivo dañado o incompleto, puede dejarnos en ocasiones con un

dispositivo inutilizable, o hacernos perder una buena parte de nuestro tiempo.

Por último, pero no menos interesante, otra utilidad que podemos darle al

algoritmo MD5 es la de poder comprobar que un texto no haya sido modificado,

y haya podido llegar de forma distinta a como era de forma original. Existe

software, e incluso páginas web, en las que podemos escribir un texto y que

éstas nos devuelven su hash; así, ofreciéndole este dato a nuestro destinatario,

40

éste podrá comprobar si el texto que le hemos enviado no ha sido alterado antes

de llegar hasta él.

En Linux

El algoritmo MD5 es una función hash muy utilizada en Linux (aunque está

siendo progresivamente sustituido por SHA), que tiene dos aplicaciones

principales:

login en Linux: en Linux se utiliza el algoritmo MD5 para encriptar las

claves de los usuarios y es el valor hash el que se almacena. En el login

se aplica MD5 al password y si el valor hash obtenido coincide con el

almacenado el usuario es autentificado.

descargas de archivos de Internet: el algoritmo MD5 se utiliza

ampliamente en las descargas de archivos de Internet para asegurarse

de que el archivo no se ha alterado, ya sea de manera intencionada (virus

o troyanos introducidos en el software por un usuario malicioso) o por una

descarga incompleta o corrupta.

Cómo se usa MD5 en Linux

En Linux disponemos del comando md5sum (paquete coreutils), el cual aplicado

a un documento devuelve la suma MD5.

Comprobar la suma MD5 de un archivo: por ejemplo, supongamos que hemos

bajado un archivo, el IDE de Netbeans, descargamos el mencionado archivo en

nuestro home, entonces tendríamos ya descargado el mencionado archivo como

sabemos que este se ha descargado correctamente? para saber esto utilizamos

el MD5, como hacemos esto?.. Sencillo abrimos la consola o terminal y

escribimos:

linux01:/home/aperedo# md5sum netbeans-6.5.1-ml-linux.sh

210a674e5bf65bffb8f141c3d98923fe netbeans-6.5.1-ml-linux.sh

Como vemos nos muestra un código “210a674e5bf65bffb8f141c3d98923fe” y

luego el archivo entonces lo único que debemos hacer es comparar este código

41

con el que nos da el proveedor del paquete o programa en este caso SUN, tal

como vemos en la siguiente imagen:

Ejemplo MD5

Otro ejemplo supongamos que hemos descargado las imágenes ISO de 3 DVD’s

de Debian Lenny 5.0, y además un archivo con el

checksum, debian5.0lenny_dvds.md5, cuyo contenido es:

cda56ed1c9e9ace3de44eba1c36069a7 Debian5.0lenny-dvd1.iso

6ede8c75fec92e10636b6c0bf5ee9860 Debian5.0lenny-dvd2.iso

0b4921ddb67425687a5e053ff288dcba Debian5.0lenny-dvd3.iso

Verificaremos que la descarga ha sido correcta ejecutando:

linux01:/home/aperedo# md5sum -c debian5.0lenny_dvds.md5

Si las imágenes ISO son correctas, obtendremos:

Debian5.0lenny-dvd1.iso: La suma coincide



Si alguna de las imágenes está corrupta, aparecerá un mensaje que nos advierte

de que la suma no coincide:


42


Debian5.0lenny-dvd3.iso: La suma no coincide

ATENCIÓN: 1 de las 3 sumas de comprobación calculada NO coincidieron

Crear la suma MD5 correspondiente a un archivo: si aplicamos el

comando md5sum a un archivo obtendremos su cheksum:

linux01:/home/aperedo# md5sum /boot/vmlinuz-2.6.26-1-686

ca894dd6579df021d73cf1e473d03a54 /boot/vmlinuz-2.6.26-1-686

Para guardar el checksum redirigiremos la salida a un archivo:

md5sum /boot/vmlinuz > Miejemplo.md5

En Windows

En Windows lo tenemos más sencillo… y con muchas aplicaciones que hacen el

trabajo por nosotros, me permito recomendarles la siguiente

opción, Md5Checker ocupa apenas 300KB de espacio y no necesita instalarse,

para los que deseen acá les dejo un enlace para que vean laspantallas

(screenshot) del programa.

45

4.2 SHA

SHA (Secure Hash Algorithm, Algoritmo de Hash Seguro) es una familia de

funciones hash de cifrado publicadas por el Instituto Nacional de Estándares y

Tecnología (NIST). La primera versión del algoritmo fue creada en 1993 con el

nombre de SHA, aunque en la actualidad se la conoce como SHA-0 para evitar

confusiones con las versiones posteriores. La segunda versión del sistema,

publicada con el nombre de SHA-1, fue publicada dos años más tarde.

Posteriormente se han publicado SHA-2 en 2001 (formada por diversas

46

funciones: SHA-224, SHA-256, SHA-384, y SHA-512) y la más reciente, SHA-3,

que fue seleccionada en una competición de funciones hash celebrada por el

NIST en 2012. Esta última versión se caracteriza por ser la que más difiere de

sus predecesoras.

A lo largo de su historia, se conocen algunos ataques a esta familia de

algoritmos:

En 1998 se encontró una vulnerabilidad para SHA-0, aunque esta no se podía

extender a SHA-1. En cualquier caso, la NSA aumentó en ese momento la

seguridad del SHA-1.

En 2004 se encontró una debilidad matemática en SHA-1, que permitiría

encontrar colisiones de hash más rápido. Sin embargo, este hallazgo resulta

poco relevante, pues la complejidad de búsqueda de colisiones pasaría de 280

a 269, algo que aún es computacionalmente inviable, requiriendo incluso más

trabajo que MD5 (264).

SHA-1

SHA-1 ha sido examinado muy de cerca por la comunidad criptográfica pública,

y no se ha encontrado ningún ataque efectivo. No obstante, en el año 2004, un

número de ataques significativos fueron divulgados sobre funciones

criptográficas de hash con una estructura similar a SHA-1; lo que ha planteado

dudas sobre la seguridad a largo plazo de SHA-1.

SHA-0 y SHA-1 producen una salida resumen de 160 bits (20 bytes) de un

mensaje que puede tener un tamaño máximo de 264 bits, y se basa en principios

similares a los usados por el profesor Ronald L. Rivest del MIT en el diseño de

los algoritmos de resumen de mensaje MD4 y MD5.

La codificación hash vacía para SHA-1 corresponde a:\

SHA1 ("") = da39a3ee5e6b4b0d3255bfef95601890afd80709

47

Ataques contra SHA-1

La resistencia del algoritmo SHA-1 se ha visto comprometida a lo largo del año

2005. Después de que MD5, entre otros, quedara seriamente comprometido en

el 2004 por parte de un equipo de investigadores chinos, el tiempo de vida de

SHA-1 quedó visto para sentencia.

El mismo equipo de investigadores chinos, compuesto por Xiaoyun Wang, Yiqun

Lisa Yin y Hongbo Yu (principalmente de la Shandong University en China), ha

demostrado que son capaces de romper el SHA-1 en al menos 269 operaciones,

unas 2000 veces más rápido que un ataque de fuerza bruta (que requeriría 280

operaciones). Los últimos ataques contra SHA-1 han logrado debilitarlo hasta

263.

Según el NIST:

«Este ataque es de particular importancia para las aplicaciones que usan firmas

digitales tales como marcas de tiempo y notarías. Sin embargo, muchas

aplicaciones que usan firmas digitales incluyen información sobre el contexto que

hacen este ataque difícil de llevar a cabo en la práctica.»

A pesar de que 263 suponen aún un número alto de operaciones, se encuentra

dentro de los límites de las capacidades actuales de cálculos, y es previsible que

con el paso del tiempo romper esta función sea trivial, al aumentar las

capacidades de cálculo y al ser más serios los ataques contra SHA-1.

La importancia de la rotura de una función hash se debe interpretar en el

siguiente sentido: Un hash permite crear una huella digital, teóricamente única,

de un archivo. Una colisión entre hashes supondría la posibilidad de la existencia

de dos documentos con la misma huella. La inicial similitud propuesta con la

equivalencia a que hubiese personas que compartiesen las mismas huellas

digitales, o peor aún, el mismo ADN no es adecuada pues, aunque fuera trivial

48

encontrar dos ficheros con el mismo resumen criptográfico ello no implicaría que

los ficheros fueran congruentes en el contexto adecuado. Siguiendo con la

hipótesis de la similitud biométrica de dos personas, sería el equivalente a

necesitar modificar el número de brazos en una persona para que su impresión

dactilar fuera igual a la de otra.

A pesar de que el NIST contempla funciones de SHA de mayor tamaño (por

ejemplo, el SHA-512, de 512 bits de longitud), expertos de la talla de Bruce

Schneier abogan por, sin llamar a alarmismos, buscar una nueva función hash

estandarizada que permita sustituir a SHA-1. Los nombres que se mencionan al

respecto son Tiger, de los creadores de Serpent, y WHIRLPOOL, de los

creadores de AES.

4.3 Certificados

¿Qué es un certificado SSL?

SSL es un protocolo para cuyo uso es necesario contar con un certificado SSL.

Un certificado SSL es un pequeño archivo de datos que vincula digitalmente una

clave de encriptación con los datos de su empresa. Generalmente estos datos

son:

Su nombre de dominio, nombre de servidor y nombre de host

El nombre y la ubicación de su empresa

En determinados casos, la información de contacto de su empresa

Existen diferentes tipos de certificados web que evalúan la seguridad, la

accesibilidad, el cumplimiento de estándares de programación o la adecuación

a buscadores de los sitios web.

Tipos de certificado web

Entre los diferentes tipos de certificado existentes, pueden citarse:

49

SeguridadVersiSign: VeriSign es la autoridad líder en certificación SSL (Secure

Sockets Layer) que permite realizar comunicaciones, comercio electrónico e

interacciones de forma segura en sitios Web, intranets y extranets. Seleccione la

marca de mayor confianza en Internet y active el mejor cifrado SSL disponible

para todos los visitantes de su sitio Web.

Qweb: Acrónimo de Quality Web Enterprise Bureau, QWEB.es certifica a los

visitantes de un sitio web que éste cumple con todos los requerimientos de

calidad de los principales buscadores, algo fundamental para lograr un buen

posicionamiento.

W3C validation service: El servicio de validación de CSS del W3C. Es

un software libre creado por el W3C para ayudar a los diseñadores y

desarrolladores web a validar hojas de estilo en cascada y documentos (X)HTML

Confianza Online: Confianza Online es una asociación con el fin de aumentar

la confianza de los usuarios en el uso de Internet y los medios digitales.

Certificadas.cl: Directorio web Certificadas, dedicado a la indexación de

empresas con un correcto nivel de seo y que cumplen los mejores protocolos de

navegación y accesibilidad

Óptima: Optima Web es un sello de calidad enfocado a los portales web de las

empresas. Está enmarcado dentro de los distintivos públicos de confianza en

línea regulados por la Dirección General de Consumo, a través del INC. Está

basado en un código de conducta al que se suscriben las empresas que obtienen

el sello.

Security Guardian: Security Guardian es un servicio online que identifica,

registra, audita y certifica la seguridad, privacidad y la confianza de las páginas

Web con el objetivo de fomentar la confianza online gracias al uso de los sellos

de seguridad de Security Guardian.

50

CONCLUSIÓN

De la luz Mateos Ramiro

Para concluir el tema pienso que hoy la actualidad nos damos cuenta de que

hablar de tecnologías web engloba muchos campos y que sus áreas son

diversas y complejas, desde solo consultar información con un navegador ya sea

Firefox, safari, opera, Chrome, buscar una imagen, consultar sitos de empresas,

hacer compras electrónicas, jugar, conocer lugares en 3D, así como consultar

datos estadísticos, bases de datos, sitios de gobierno, etc., etc… Las tecnologías

juegan un papel muy importante en la web, debido a estas herramientas

podemos acceder al internet, que no es solo sentarte frente a un ordenador y

abrir el internet sino que hay un gran trabajo detrás para hacer posible este tipo

de tecnología, donde miles de personas trabajan actualizando datos, creando los

método para mantener todos los enlaces y las comunicaciones.

Martínez Enríquez Omar

Dentro de este trabajo de investigación, vimos temas muy interesantes acerca

de todo lo relacionado con el desarrollo de aplicaciones web. Vimos los lenguajes

de programación como PHP, como lo utilizamos y en que momento usarlo.

También vimos las herramientas, la que me llamo la atención es java, ya que se

usa todos los días en todos los navegadores, pero en realidad no sabía cómo

funcionaba y que era lo que hacía.

Otro tema que me llamo la atención son las medias de seguridad que podemos

utilizar, tal como md5 que nos sirve para encriptar información como las

contraseñas al momento de registrarlas en las bases de datos.

Olvera Hernández María Azucena

En conclusión sabes que es muy beneficioso todo los lenguajes de programación

y sus herramientas ya que con la ayuda de todos esos recursos podemos fabricar

nuestros sitios web, por lo tanto saber a cuáles son las características de los

medios digitales es de mucha ayuda ya que al momento de incorporarlos a

nuestra página, le podremos dar un efecto único, de igual manera con las

medidas de seguridad tomando en cuenta que hay personas que se dedican a

51

hacer daño a cualquier sistema web incluso corres el riesgo si manejas datos

sensibles, es una forma de tener en cuenta que en la programación hay que

poner seguridad y no dejarlo a la suerte. Por último son sumamente importante

estas tecnologías ya que nos facilita unir bases de datos entre otros.

Vargas Castillo Everardo

Actualmente existen diferentes lenguajes de programación para desarrollar en la

web, estos han ido surgiendo debido a las tendencias y necesidades de las

plataformas.

Desde los inicios de Internet, fueron surgiendo diferentes demandas por los

usuarios y se dieron soluciones mediante lenguajes estáticos. A medida que

paso el tiempo, las tecnologías fueron desarrollándose y surgieron nuevos

problemas a dar solución. Esto dio lugar a desarrollar lenguajes de programación

para la web dinámicos, que permitieran interactuar con los usuarios y

utilizaran sistemas de Bases de Datos, sin embargo, el lenguaje de HTML abrió

una puerta al mundo permitiéndole a las personas expresar sus ideas por medio

de páginas.

http://www.maestrosdelweb.com/principiantes/%c2%bfque-son-las-bases-de-datos/

Desarrollo Web

Documents

Transcript of Desarrollo Web