PROGRAMACIÓN WEB.pptx

PROGRAMACIÓN WEBBRENDA GONZÁLEZ GÓMEZ

TEMARIO

1. ARQUITECTURA

1.1. EVOLUCIÓN DE LAS APLICACIONES WEB.

1.2. ARQUITECTURA DE LAS APLICACIONES WEB.

1.3. TECNOLOGÍAS PARA EL DESARROLLO DE APLICACIONES WEB.

1.4. PLANIFICACIÓN DE APLICACIONES WEB

2. LENGUAJE DE MARCADO

2.1. INTRODUCCIÓN.

2.2. REPRESENTACIÓN DE DOCUMENTOS.

2.3. TIPOS DE DATOS BÁSICOS.

2.4. ESTRUCTURA GLOBAL DE UN DOCUMENTO.

2.5. ELEMENTOS BÁSICOS: TEXTO, VÍNCULOS, LISTAS, TABLAS, OBJETOS, IMÁGENES Y

APLICACIONES.

2.6. ESTRUCTURA Y DISPOSICIÓN.

2.7. FORMULARIOS.

TEMARIO

3. LENGUAJE DE PRESENTACIÓN

3.1. INTRODUCCIÓN.

3.2. SINTAXIS.

3.3. SELECTORES.

3.4. TIPOS DE MEDIOS.

3.5. MODELO DE CAJA

3.6. APLICACIÓN EN DOCUMENTO WEB.

4. PROGRAMACIÓN DEL LADO CLIENTE2.1. INTRODUCCIÓN.

4.1. INTRODUCCIÓN AL LENGUAJE.

4.2. ELEMENTOS DE PROGRAMACIÓN.

4.3. MANIPULACIÓN DE OBJETOS

5. PROGRAMACIÓN DEL LADO DEL SERVIDOR

5.1. INTRODUCCIÓN AL LENGUAJE.

5.2. ELEMENTOS DE PROGRAMACIÓN.

5.3. APLICACIÓN.

HISTORIA DE INTERNET

PROTOCOLO HTTP

HTTP Desde 1990, el protocolo HTTP (Protocolo de transferencia de

hipertexto) es el protocolo más utilizado en Internet.

Este protocolo permite la transferencia de mensajes con encabezados que describen el contenido de los mensajes mediante la codificación MIME -extensiones multipropósito de correo en Internet.

HTTP es el protocolo de transferencia de información que forma la base de la colección de información distribuida denominada World Wide Web.

NAVEGADOR Y SERVIDOS

ARQUITECTURAS WEB

HTTPS El protocolo HTTPS es una versión segura del protocolo HTTP que

implementa un canal de comunicación 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

información que sea transmitida entre la computadora del usuario y el sitio web, será cifrada en su transmisión. Equivalente a una carta enviada por correo certificado, lo que se garantiza será entregada a su receptor

Necesitamos SSL si...

Si desarrollamos una tienda electrónica en Internet

Aceptamos pedidos y pagos con tarjeta de crédito en línea

Ofrecemos un inicio de sesión en su sitio web, se procesan datos confidenciales como direcciones, fechas de nacimiento o números 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 diseñan y coordinan el desarrollo de sitios web. Los sitios web son una conjunción muy compleja de distintos sistemas integrados entre sí (Bases de datos, servidores, redes, componentes de backup y seguridad, etc... ).

Planeación del SitioANTES DE DISEÑAR

Definir la visión y los objetivos del sitio Web.

Definir el público objetivo.

Equilibrar la demanda del usuario y la oferta institucional.

Clasificar la información de manera correcta, eficiente y clara.

Redactar los contenidos de forma clara, sencilla y concisa

Revisar que la información del sitio sea fidedigna.

Actualizar la información de manera permanente.

Evitar la duplicidad de información.

Incluir espacios para la Atención (Cliente).

Evitar un sitio Web excesivamente dinámico.

Planeación del SitioANTES DE DISEÑAR

Lineamientos de Identidad

Ejemplo:

DISEÑO A CONSIDERAR…

El espacio y el espacio en blanco en el layout

1. Mantener una resolución 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

http://www.lawebera.es/comunidad/articulos/diseno-grafico/eleccion-buena-paleta-colores-web.php

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 información relacionadas, y con inserciones multimedia (gráficos, sonido...).

SGML (Standard Generalized Markup Language)

Es el estándar internacional para la definición 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 (composición tipográfica)

Ha evolucionado fuera de ese ámbito editorial para intercambio de información textual

Provee un marco para describir la estructura lógica de los documentos

Identifica los elementos estructurales o de contenido

Codifica las relaciones jerárquicas entre los elementos


Ha servido de punto de partida para otros muchos subconjuntos de lenguajes como el Extensible Markup Language (XML).

HTML representa estructura y diseño;

XML permite definir etiquetas propias y representa la estructura definida en la DTD, permite validar el documento XML, que se concreta en MathML (para fórmulas matemáticas),

XSL (para hojas de estilo en XML),

SMIL (para documentos multimedia),

WML (para tecnología WAP),

XTM ( para Topic Maps), etc.

RDF sirve para la descripción de recursos,

XHTML es una reformulación de HTML como aplicación XML, etc.


SGML: Características

Los elementos de contenido están identificados a través de marcas embebidas, Por ejemplo . <title> el título </title>

Permite la creación de marcas definidas de acuerdo a las necesidades planteadas por la estructura lógica de un tipo de documento específico

El estándar SGML contiene reglas generales para describir tipos específicos de documentos: las Definiciones de Tipos de Documentos (DTD)


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 están estructurados:

BD (tablas con filas y columnas)

SGML marcas (tags) embebidas

Las DTDs determinan:

Qué elementos están 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>Programación 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 carácter cuando no están dentro de un bloque preformateado <pre>.

Marcadores, marcas o etiquetas (tags) :

Los marcadores delimitan elementos de un documento como cabeceras, párrafos, etc. La mayoría 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 símbolos '<' 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 sólo tienen una marca inicial (por ejemplo el tag <hr /> que representa una línea horizontal y <br /> inserta un salto de línea donde se coloque. Puede colocar tantas como desee y se insertará un salto de línea por cada una de ellas. ).


Nombres de etiquetas

Los nombres consisten en una letra seguida de letras, dígitos, 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 definición del HTML. Los nombres de elementos y atributos no distinguen entre mayúsculas y minúsculas, pero los nombres de entidades (la representación alternativa de los caracteres) sí.

En las marcas, el nombre del elemento debe comenzar inmediatamente después del <.


Atributos : Cuando una marca inicial admite atributos, éstos se escriben a continuación 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 después del signo igual.

El valor de un atributo puede ser una cadena de caracteres entre comillas (simples o dobles) que no contenga el símbolo de fin de marca '>' o un nombre como los definidos en el apartado anterior. Por ejemplo, en

<img src='foto.gif'>

Comentarios :

Una declaración de comentarios comienza con .


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 información general sobre el documento. Este marcador tienen su marcador de terminación con la barra inclinada (/head).

Marcador <body>: incluye el contenido real del documento (body o cuerpo). Este marcador tiene también su marcador de terminación con la barra inclinada </body>.


Marcador <meta> Las metatags son etiquetas html que se incorporan en el encabezado de una página web y que resultan invisibles para un visitante normal, pero de gran utilidad para navegadores u otros programas que puedan valerse de esta información.

Meta tag Descripción

<meta content='copyright' name='autor'> Indica quien posee los derechos de contenido de la página.

<meta http-equiv='content-type'content='text/html; charset=iso-8859-1' />

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 página.

<meta http-equiv='refresh'content='30;URL=./indice.html' /> Carga la URL en content segundos. En este caso en 30 segundos

<meta name='Description' content='El SGML es un sistema' />

Este tag lo usan los buscadores para dar una descripción del contenido de la página.

<meta name='Keywords' content='css, xhtml, html' />

Este tag lo usarán los "robots" enviados por los buscadores y se usará para indicar las palabras claves relacionadas con la página en cuestión. Las palabras se deben separar por comas.

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

Determina si los robots indezaran la página. Los posibles valores de content son:all para que el robot tenga en cuenta esta página y pueda seguir los links contenidos en la misma (este es el valor predeterminado), noindex para que no la tenga en cuenta.


Lenguaje HTML Resultado en navegador

<b>texto en negrita</b> texto en negrita

<i>texto en cursiva o itálica</i> texto en cursiva o itálica

<u>texto subrayado</u> texto subrayado

<b><i><u>combinando las tres anteriores</u></i></b>

combinando las tres anteriores

<tt>fuente tipo de máquina de escribir</tt>

Fuente tipo de máquina de escribir

Subíndice. Por ejemplo H<sub>2</sub>O

H2O

Superíndice. Por ejemplo x<sup>2</sup>

x2


Código Efecto visual

<img alt ='' src="images/moneda.jpg" />

El tag <img> tiene dos atributos que debemos considerar alt y title, muestran un título al estar el mouse sobre la imagen


Hiperenlaces

Es la piedra angular de HTML, este tag se utiliza para crear hipervínculos: el texto en cual podemos hacer clic en un navegador para ir a otra página 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 vinculación ( Por ejemplo: <a name="marucuya">) y a continuación 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>. .


iframes

Un iframe es un marco flotante que puede estar colocado en cualquier parte de la página. Las propiedades de un iframe son:

Propiedad scrolling, scrolling='auto': automático, 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='Sudáfrica 2010' width='640' height='390' src='http://www.youtube.com/embed/dzsuE5ugxf4' frameborder='0' >

</iframe>


Código Efecto visual

Convertir una imagen interna en un hipervínculo

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


Formateo de párrafos o bloques:

El inicio de un párrafo se indica con el tag <p> y su final con el tag </p>. El espaciado y los retornos de línea son ignorados p

navegadores que interpretan html.

Para agregar un retorno de línea es necesario usar el tag único <br />.

<br /> además soporta el atributo CLEAR = LEFT | RIGHT

Elemento <hr /> inserta un línea además de un retorno de línea


Listas

Listas desordenadas

Están 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>


Listas numeradas u ordenadas

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


Listas de glosario

Este tipo de lista denominado 'definition list' requiere tres tags(<dl>, <dt> y <dd>) para destacar el texto en cuestión. el tag puede util

para construir definiciones (por ejemplo: recetas) .

Para construir una lista, el texto debe escribirse entre los tags de definición de listas <dl> y </dl>. Los tags <dt> y su correspondiente </dt

un definición de término y <dd> así como su correspondiente </dd> son una descripción.


Multimedia

Mp3. Hoy por hoy este formaro es el estándar en audio sin embargo no todos los navegadores lo soportan. La alternativa es usar script permitan.

El código 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 método PlayerOpen. Note que puede usarlo para reproducir múltiples mp3.


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

Documents

PROGRAMACIÓN WEB.pptx