PROGRAMACIN WEB

BRENDA GONZLEZ GMEZ

TEMARIO
1. ARQUITECTURA
1.1. EVOLUCIN DE LAS APLICACIONES WEB. 1.2. ARQUITECTURA DE LAS APLICACIONES WEB. 1.3. TECNOLOGAS PARA EL DESARROLLO DE APLICACIONES WEB. 1.4. PLANIFICACIN DE APLICACIONES WEB

2. LENGUAJE DE MARCADO
2.1. INTRODUCCIN. 2.2. REPRESENTACIN DE DOCUMENTOS. 2.3. TIPOS DE DATOS BSICOS. 2.4. ESTRUCTURA GLOBAL DE UN DOCUMENTO. 2.5. ELEMENTOS BSICOS: TEXTO, VNCULOS, LISTAS, TABLAS, OBJETOS, IMGENES Y APLICACIONES. 2.6. ESTRUCTURA Y DISPOSICIN. 2.7. FORMULARIOS.

TEMARIO
3. LENGUAJE DE PRESENTACIN
3.1. INTRODUCCIN. 3.2. SINTAXIS. 3.3. SELECTORES. 3.4. TIPOS DE MEDIOS. 3.5. MODELO DE CAJA 3.6. APLICACIN EN DOCUMENTO WEB.

4. PROGRAMACIN DEL LADO CLIENTE2.1. INTRODUCCIN.

4.1. INTRODUCCIN AL LENGUAJE. 4.2. ELEMENTOS DE PROGRAMACIN. 4.3. MANIPULACIN DE OBJETOS

5. PROGRAMACIN DEL LADO DEL SERVIDOR

5.1. INTRODUCCIN AL LENGUAJE. 5.2. ELEMENTOS DE PROGRAMACIN. 5.3. APLICACIN.

HISTORIA DE INTERNET

PROTOCOLO HTTP
HTTP
Desde 1990, el protocolo HTTP (Protocolo de transferencia de hipertexto) es el protocolo ms utilizado en Internet. Este protocolo permite la transferencia de mensajes con encabezados que describen el contenido de los mensajes mediante la codificacin MIME extensiones multipropsito de correo en Internet. HTTP es el protocolo de transferencia de informacin que forma la base de la coleccin de informacin distribuida denominada World Wide Web.

NAVEGADOR Y SERVIDOS

ARQUITECTURAS WEB
HTTPS
El protocolo HTTPS es una versin segura del protocolo HTTP que implementa un canal de comunicacin seguro y basado en SSL ( Secure Socket Layers ) entre el navegador del cliente y el servidor HTTP.

ARQUITECTURAS WEB
HTTPS
El protocolo HTTPS (Hypertext Transfer Protocol Secure) garantiza que la informacin que sea transmitida entre la computadora del usuario y el sitio web, ser cifrada en su transmisin. Equivalente a una carta enviada por correo certificado, lo que se garantiza ser entregada a su receptor

 Necesitamos SSL si...

Si desarrollamos una tienda electrnica en Internet Aceptamos pedidos y pagos con tarjeta de crdito en lnea Ofrecemos un inicio de sesin en su sitio web, se procesan datos confidenciales como direcciones, fechas de nacimiento o nmeros de licencias, RFC, CURP, entre otros. Necesitamos cumplir normativas de seguridad y confidencialidad Valoramos la confidencialidad y espera que otros le otorguen su confianza

 HTTPS trabaja por defecto por el puerto TCP 443 , y antes de enviar los datos realiza algunas acciones previas.

ARQUITECTURA WEB
los arquitectos web disean y coordinan el desarrollo de sitios web. Los sitios web son una conjuncin muy compleja de distintos sistemas integrados entre s (Bases de datos, servidores, redes, componentes de backup y seguridad, etc... ).

Planeacin del Sitio ANTES DE DISEAR

Definir la visin y los objetivos del sitio Web. Definir el pblico objetivo. Equilibrar la demanda del usuario y la oferta institucional. Clasificar la informacin de manera correcta, eficiente y clara.

Redactar los contenidos de forma clara, sencilla y concisa

Revisar que la informacin del sitio sea fidedigna. Actualizar la informacin de manera permanente. Evitar la duplicidad de informacin.

Incluir espacios para la Atencin (Cliente).

Evitar un sitio Web excesivamente dinmico.

Planeacin del Sitio ANTES DE DISEAR

Lineamientos de Identidad Ejemplo:

DISEO A CONSIDERAR
El espacio y el espacio en blanco en el layout 1. Mantener una resolucin de pantalla como objetivo, pero no te cierres: 2. Utiliza todo el espacio disponible, pero se flexible: 3. Usa el color para definir los espacios

HTML (HyperText Markup Language)

Es un lenguaje muy sencillo que permite describir hipertexto, es decir, texto presentado de forma estructurada y agradable, con enlaces (hyperlinks) que conducen a otros documentos o fuentes de informacin relacionadas, y con inserciones multimedia (grficos, sonido...).

SGML (Standard Generalized Markup Language)

Es el estndar internacional para la definicin de la estructura y el contenido de diferentes tipos de documentos. SGML: Origen y objetivos.
Surgi en la industria editorial para facilitar el intercambio de datos (composicin tipogrfica) Ha evolucionado fuera de ese mbito editorial para intercambio de informacin textual Provee un marco para describir la estructura lgica de los documentos

Identifica los elementos estructurales o de contenido

Codifica las relaciones jerrquicas entre los elementos

SGML (Standard Generalized Markup Language)

Ha servido de punto de partida para otros muchos subconjuntos de lenguajes como el Extensible Markup Language (XML).
HTML representa estructura y diseo; XML permite definir etiquetas propias y representa la estructura definida en la DTD, permite validar el documento XML, que se concreta en MathML (para frmulas matemticas), XSL (para hojas de estilo en XML), SMIL (para documentos multimedia), WML (para tecnologa WAP), XTM ( para Topic Maps), etc. RDF sirve para la descripcin de recursos, XHTML es una reformulacin de HTML como aplicacin XML, etc.

SGML (Standard Generalized Markup Language)

SGML: Caractersticas
Los elementos de contenido estn identificados a travs de marcas embebidas, Por ejemplo . <title> el ttulo </title>

Permite la creacin de marcas definidas de acuerdo a las necesidades planteadas por la estructura lgica de un tipo de documento especfico
El estndar SGML contiene reglas generales para describir tipos especficos de documentos: las Definiciones de Tipos de Documentos (DTD)

SGML (Standard Generalized Markup Language)

DTD La DTD es un modelo abstracto del documento, similar a un modelo de datos que describe entidades y relaciones en un programa de BD. En ambos casos los datos estn estructurados:
BD (tablas con filas y columnas)

SGML marcas (tags) embebidas

Las DTDs determinan:

Qu elementos estn permitidos en un tipo de documento dado Las relaciones entre los elementos

Las DTDs pueden crearse para cada tipo de documento. Cada nuevo tipo requiere su propia DTD.

Ejemplo
<!DOCTYPE html> <html> <head> <meta http-equiv='Content-Type' content='text/html; charset=windows-1252' /> <title>Programacin web</title> </head> <body> <p>Aprendiendo HTML><p> </body> </html>

Elementos del lenguaje HTML

Caracteres :
Cualquier cadena de caracteres imprimibles que no represente un marcado se representa literalmente, aunque los espacios y tabuladores se reducen a un solo carcter cuando no estn dentro de un bloque preformateado <pre>.

Marcadores, marcas o etiquetas (tags) :

Los marcadores delimitan elementos de un documento como cabeceras, prrafos, etc. La mayora de los marcadores constan de una marca inicial < ...> , que da el nombre y atributos del elemento, seguida del contenido secuencia de caracteres y una marca final </...>. Las marcas iniciales se escriben entre los smbolos '<' y '>' (menor y mayor) y las finales entre '</' y '>' (menor, barra y mayor). Por ejemplo, <h1>Hola Mundo</h1>, indica que 'Hola Mundo' es una cabecera de nivel uno. Algunos elementos slo tienen una marca inicial (por ejemplo el tag <hr /> que representa una lnea horizontal y <br /> inserta un salto de lnea donde se coloque. Puede colocar tantas como desee y se insertar un salto de lnea por cada una de ellas. ).

Elementos del lenguaje HTML

Nombres de etiquetas
Los nombres consisten en una letra seguida de letras, dgitos, puntos o guiones. Los ejemplos <h1> y <hr> anteriores son ejemplos de nombres de etiquetas. La longitud de un nombre esta limitada a 72 caracteres en la definicin del HTML. Los nombres de elementos y atributos no distinguen entre maysculas y minsculas, pero los nombres de entidades (la representacin alternativa de los caracteres) s. En las marcas, el nombre del elemento debe comenzar inmediatamente despus del <.

Elementos del lenguaje HTML

Atributos : Cuando una marca inicial admite atributos, stos se escriben a continuacin del nombre del elemento. Generalmente los atributos tienen la forma nombre, signo igual, valor del atributo aunque en algunos casos basta con el nombre del atributo. Se pueden poner espacios en blanco antes y despus del signo igual.

El valor de un atributo puede ser una cadena de caracteres entre comillas (simples o dobles) que no contenga el smbolo de fin de marca '>' o un nombre como los definidos en el apartado anterior. Por ejemplo, en
<img src='foto.gif'>

Comentarios :
Una declaracin de comentarios comienza con <!--, le siguen uno o varios comentarios y termina con -->.

Elementos del lenguaje HTML

Marcadores o etiquetas HTML obligatorios:
Marcador <html>: todos y cada uno de los documentos HTML deben empezar y terminar con este marcador que sirve para indicar que se trata de un documento HTML. En el marcador de cierre es obligatoria la barra inclinada (/html).

Marcador <head>: los documentos HTML se dividen en dos partes, la cabecera y el cuerpo. Los navegadores Web necesitan distinguir entre cabecera y cuerpo para poder interpretar correctamente los documentos. En general la cabecera del documento (head) incluye la informacin general sobre el documento. Este marcador tienen su marcador de terminacin con la barra inclinada (/head). Marcador <body>: incluye el contenido real del documento (body o cuerpo). Este marcador tiene tambin su marcador de terminacin con la barra inclinada </body>.

Elementos del lenguaje HTML

Marcador <meta> Las metatags son etiquetas html que se incorporan en el encabezado de una pgina web y que resultan invisibles para un visitante normal, pero de gran utilidad para navegadores u otros programas que puedan valerse de esta informacin.
Meta tag Descripcin

<meta content='copyright' name='autor'> <meta http-equiv='content-type' content='text/html; charset=iso-8859-1' /> <meta http-equiv='refresh' content='30;URL=./indice.html' /> <meta name='Description' content='El SGML es un sistema' /> <meta name='Keywords' content='css, xhtml, html' />

Indica quien posee los derechos de contenido de la pgina.

Indica al servidor que el recurso es un documento del tipo html. Que est escrito en texto plano y el conjunto de caracteres con los que se ha escrito el contenido de la pgina.
Carga la URL en content segundos. En este caso en 30 segundos Este tag lo usan los buscadores para dar una descripcin del contenido de la pgina. Este tag lo usarn los "robots" enviados por los buscadores y se usar para indicar las palabras claves relacionadas con la pgina en cuestin. Las palabras se deben separar por comas. Determina si los robots indezaran la pgina. Los posibles valores de content son: all para que el robot tenga en cuenta esta pgina y pueda seguir los links contenidos en la misma (este es el valor predeterminado), noindex para que no la tenga en cuenta.

<meta name='Robots' content='all'/>

Elementos del lenguaje HTML

Lenguaje HTML
<b>texto en negrita</b> <i>texto en cursiva o itlica</i> <u>texto subrayado</u> <b><i><u>combinando las tres anteriores</u></i></b>

Resultado en navegador
texto en negrita texto en cursiva o itlica texto subrayado combinando las tres anteriores

<tt>fuente tipo de mquina de escribir</tt>

Subndice. Por ejemplo H₂O Superndice. Por ejemplo x²

Fuente tipo de mquina de escribir

H2O x2

Elementos del lenguaje HTML

Cdigo Efecto visual

<img alt ='' src="images/moneda.jpg" /> El tag <img> tiene dos atributos que debemos considerar alt y title, muestran un ttulo al estar el mouse sobre la imagen

Elementos del lenguaje HTML

Hiperenlaces Es la piedra angular de HTML, este tag se utiliza para crear hipervnculos: el texto en cual podemos hacer clic en un navegador para ir a otra pgina web. La sintaxis es la siguiente:
<a href="www.itver.edu.mx">I.T.V</a>

Enlaces internos
Primero hay que definir el punto objetivo de la vinculacin ( Por ejemplo: <a name="marucuya">) y a continuacin se hace referencia en las partes que necesitamos a dicho punto (Por ejemplo: <a href="#marucuya"> <a href='#maracuya'>Maracuy</a> <a href='#macadamia'>Nuez de Macadamia</a>

<a href='#chaya'>Chaya</a>
El <a name='maracuya'>maracuy</a>. .

Elementos del lenguaje HTML

iframes Un iframe es un marco flotante que puede estar colocado en cualquier parte de la pgina. Las propiedades de un iframe son:
Propiedad scrolling, scrolling='auto': automtico, scrolling='YES':forzado, scrolling='NO': Valor por defecto. Propiedad frameborder: 0 sin borde, 1 o superior ancho del marco Altura y su ancho: height='390' width='640' <iframe title='Sudfrica 2010' width='640' height='390' src='http://www.youtube.com/embed/dzsuE5ugxf4' frameborder='0' > </iframe>

Elementos del lenguaje HTML

Cdigo Efecto visual

Convertir una imagen interna en un hipervnculo

<a href='http://www.itver.edu.mx'> <img src='itv.jpg'></a>

Elementos del lenguaje HTML

Formateo de prrafos o bloques: El inicio de un prrafo se indica con el tag <p> y su final con el tag </p>. El espaciado y los retornos de lnea son ignorados p navegadores que interpretan html.

Para agregar un retorno de lnea es necesario usar el tag nico <br />.
<br /> adems soporta el atributo CLEAR = LEFT | RIGHT Elemento <hr /> inserta un lnea adems de un retorno de lnea

Elementos del lenguaje HTML

Listas Listas desordenadas Estn englobadas por las etiquetas <ul>...</ul> (unordered list). Cada uno de los elementos de la lista comenzar con una etiqueta <li>.
<ul>
<li>Caf</li> <li>Leche</li> <li>T</li>

</ul>

Elementos del lenguaje HTML

Listas numeradas u ordenadas Se engloban por las tags <ol>.....</ol> y cada elemento de la lista estar encabezado por la tag <li>.

Elementos del lenguaje HTML

Listas de glosario Este tipo de lista denominado 'definition list' requiere tres tags(<dl>, <dt> y <dd>) para destacar el texto en cuestin. el tag puede util para construir definiciones (por ejemplo: recetas) .

Para construir una lista, el texto debe escribirse entre los tags de definicin de listas <dl> y </dl>. Los tags <dt> y su correspondiente </dt
un definicin de trmino y <dd> as como su correspondiente </dd> son una descripcin.

Elementos del lenguaje HTML

Multimedia Mp3. Hoy por hoy este formaro es el estndar en audio sin embargo no todos los navegadores lo soportan. La alternativa es usar script permitan. El cdigo funciona para iExplorer, FireFox, Google Chrome, Opera y Safari. El plugin Quick Time deber instalarse por nica vez. Agregar entre los tags <head></head> el archivo soundpop.js el cual se encarga de cargar el archivo mp3 dependiendo del navegador. El evento onclick ejecuta el mtodo PlayerOpen. Note que puede usarlo para reproducir mltiples mp3.

Elementos del lenguaje HTML

<head> <script type='text/JavaScript' src='soundpop.js'></script> </head> <body> ... // Otros cdigos <a href='mp3/Llorandosefue.mp3.mp3' target='_self' onclick="javascript:PlayerOpen('LFO&#8217;s Revenge',this.href); return false">Llorando se fue</a> ... //Otros cdigos </body>