PROGRAMACIÓN WEB.pptx
-
Upload
antonio-rodriguez-suarez -
Category
Documents
-
view
127 -
download
0
Transcript of PROGRAMACIÓN WEB.pptx
![Page 1: PROGRAMACIÓN WEB.pptx](https://reader033.fdocuments.ec/reader033/viewer/2022052620/5572135e497959fc0b922ab5/html5/thumbnails/1.jpg)
PROGRAMACIÓN WEBBRENDA GONZÁLEZ GÓMEZ
![Page 2: PROGRAMACIÓN WEB.pptx](https://reader033.fdocuments.ec/reader033/viewer/2022052620/5572135e497959fc0b922ab5/html5/thumbnails/2.jpg)
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.
![Page 3: PROGRAMACIÓN WEB.pptx](https://reader033.fdocuments.ec/reader033/viewer/2022052620/5572135e497959fc0b922ab5/html5/thumbnails/3.jpg)
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.
![Page 4: PROGRAMACIÓN WEB.pptx](https://reader033.fdocuments.ec/reader033/viewer/2022052620/5572135e497959fc0b922ab5/html5/thumbnails/4.jpg)
HISTORIA DE INTERNET
![Page 5: PROGRAMACIÓN WEB.pptx](https://reader033.fdocuments.ec/reader033/viewer/2022052620/5572135e497959fc0b922ab5/html5/thumbnails/5.jpg)
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.
![Page 6: PROGRAMACIÓN WEB.pptx](https://reader033.fdocuments.ec/reader033/viewer/2022052620/5572135e497959fc0b922ab5/html5/thumbnails/6.jpg)
NAVEGADOR Y SERVIDOS
![Page 7: PROGRAMACIÓN WEB.pptx](https://reader033.fdocuments.ec/reader033/viewer/2022052620/5572135e497959fc0b922ab5/html5/thumbnails/7.jpg)
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.
![Page 8: PROGRAMACIÓN WEB.pptx](https://reader033.fdocuments.ec/reader033/viewer/2022052620/5572135e497959fc0b922ab5/html5/thumbnails/8.jpg)
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
![Page 9: PROGRAMACIÓN WEB.pptx](https://reader033.fdocuments.ec/reader033/viewer/2022052620/5572135e497959fc0b922ab5/html5/thumbnails/9.jpg)
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
![Page 10: PROGRAMACIÓN WEB.pptx](https://reader033.fdocuments.ec/reader033/viewer/2022052620/5572135e497959fc0b922ab5/html5/thumbnails/10.jpg)
HTTPS trabaja por defecto por el puerto TCP 443 , y antes de enviar los datos realiza algunas acciones previas.
![Page 11: PROGRAMACIÓN WEB.pptx](https://reader033.fdocuments.ec/reader033/viewer/2022052620/5572135e497959fc0b922ab5/html5/thumbnails/11.jpg)
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... ).
![Page 12: PROGRAMACIÓN WEB.pptx](https://reader033.fdocuments.ec/reader033/viewer/2022052620/5572135e497959fc0b922ab5/html5/thumbnails/12.jpg)
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.
![Page 13: PROGRAMACIÓN WEB.pptx](https://reader033.fdocuments.ec/reader033/viewer/2022052620/5572135e497959fc0b922ab5/html5/thumbnails/13.jpg)
Planeación del SitioANTES DE DISEÑAR
Lineamientos de Identidad
Ejemplo:
![Page 14: PROGRAMACIÓN WEB.pptx](https://reader033.fdocuments.ec/reader033/viewer/2022052620/5572135e497959fc0b922ab5/html5/thumbnails/14.jpg)
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
![Page 15: PROGRAMACIÓN WEB.pptx](https://reader033.fdocuments.ec/reader033/viewer/2022052620/5572135e497959fc0b922ab5/html5/thumbnails/15.jpg)
![Page 16: PROGRAMACIÓN WEB.pptx](https://reader033.fdocuments.ec/reader033/viewer/2022052620/5572135e497959fc0b922ab5/html5/thumbnails/16.jpg)
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...).
![Page 17: PROGRAMACIÓN WEB.pptx](https://reader033.fdocuments.ec/reader033/viewer/2022052620/5572135e497959fc0b922ab5/html5/thumbnails/17.jpg)
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
![Page 18: PROGRAMACIÓN WEB.pptx](https://reader033.fdocuments.ec/reader033/viewer/2022052620/5572135e497959fc0b922ab5/html5/thumbnails/18.jpg)
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 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.
![Page 19: PROGRAMACIÓN WEB.pptx](https://reader033.fdocuments.ec/reader033/viewer/2022052620/5572135e497959fc0b922ab5/html5/thumbnails/19.jpg)
SGML (Standard Generalized Markup Language)
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)
![Page 20: PROGRAMACIÓN WEB.pptx](https://reader033.fdocuments.ec/reader033/viewer/2022052620/5572135e497959fc0b922ab5/html5/thumbnails/20.jpg)
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 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.
![Page 21: PROGRAMACIÓN WEB.pptx](https://reader033.fdocuments.ec/reader033/viewer/2022052620/5572135e497959fc0b922ab5/html5/thumbnails/21.jpg)
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>
![Page 22: PROGRAMACIÓN WEB.pptx](https://reader033.fdocuments.ec/reader033/viewer/2022052620/5572135e497959fc0b922ab5/html5/thumbnails/22.jpg)
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. ).
![Page 23: PROGRAMACIÓN WEB.pptx](https://reader033.fdocuments.ec/reader033/viewer/2022052620/5572135e497959fc0b922ab5/html5/thumbnails/23.jpg)
Elementos del lenguaje HTML
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 <.
![Page 24: PROGRAMACIÓN WEB.pptx](https://reader033.fdocuments.ec/reader033/viewer/2022052620/5572135e497959fc0b922ab5/html5/thumbnails/24.jpg)
Elementos del lenguaje HTML
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 <!--, le siguen uno o varios comentarios y termina con -->.
![Page 25: PROGRAMACIÓN WEB.pptx](https://reader033.fdocuments.ec/reader033/viewer/2022052620/5572135e497959fc0b922ab5/html5/thumbnails/25.jpg)
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 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>.
![Page 26: PROGRAMACIÓN WEB.pptx](https://reader033.fdocuments.ec/reader033/viewer/2022052620/5572135e497959fc0b922ab5/html5/thumbnails/26.jpg)
Elementos del lenguaje HTML
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.
![Page 27: PROGRAMACIÓN WEB.pptx](https://reader033.fdocuments.ec/reader033/viewer/2022052620/5572135e497959fc0b922ab5/html5/thumbnails/27.jpg)
Elementos del lenguaje HTML
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
![Page 28: PROGRAMACIÓN WEB.pptx](https://reader033.fdocuments.ec/reader033/viewer/2022052620/5572135e497959fc0b922ab5/html5/thumbnails/28.jpg)
Elementos del lenguaje HTML
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
![Page 29: PROGRAMACIÓN WEB.pptx](https://reader033.fdocuments.ec/reader033/viewer/2022052620/5572135e497959fc0b922ab5/html5/thumbnails/29.jpg)
Elementos del lenguaje HTML
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>. .
![Page 30: PROGRAMACIÓN WEB.pptx](https://reader033.fdocuments.ec/reader033/viewer/2022052620/5572135e497959fc0b922ab5/html5/thumbnails/30.jpg)
Elementos del lenguaje HTML
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>
![Page 31: PROGRAMACIÓN WEB.pptx](https://reader033.fdocuments.ec/reader033/viewer/2022052620/5572135e497959fc0b922ab5/html5/thumbnails/31.jpg)
Elementos del lenguaje HTML
Código Efecto visual
Convertir una imagen interna en un hipervínculo
<a href='http://www.itver.edu.mx'> <img src='itv.jpg'></a>
![Page 32: PROGRAMACIÓN WEB.pptx](https://reader033.fdocuments.ec/reader033/viewer/2022052620/5572135e497959fc0b922ab5/html5/thumbnails/32.jpg)
Elementos del lenguaje HTML
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
![Page 33: PROGRAMACIÓN WEB.pptx](https://reader033.fdocuments.ec/reader033/viewer/2022052620/5572135e497959fc0b922ab5/html5/thumbnails/33.jpg)
Elementos del lenguaje HTML
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>
![Page 34: PROGRAMACIÓN WEB.pptx](https://reader033.fdocuments.ec/reader033/viewer/2022052620/5572135e497959fc0b922ab5/html5/thumbnails/34.jpg)
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>.
![Page 35: PROGRAMACIÓN WEB.pptx](https://reader033.fdocuments.ec/reader033/viewer/2022052620/5572135e497959fc0b922ab5/html5/thumbnails/35.jpg)
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 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.
![Page 36: PROGRAMACIÓN WEB.pptx](https://reader033.fdocuments.ec/reader033/viewer/2022052620/5572135e497959fc0b922ab5/html5/thumbnails/36.jpg)
Elementos del lenguaje HTML
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.
![Page 37: PROGRAMACIÓN WEB.pptx](https://reader033.fdocuments.ec/reader033/viewer/2022052620/5572135e497959fc0b922ab5/html5/thumbnails/37.jpg)
Elementos del lenguaje HTML
<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>