Desarrollo de Aplicaciones Web

UNIVERSIDAD DE GUAYAQUIL
FACULTAD DE CIENCIAS MATEMÁTICAS Y FÍSICAS

CARRERA DE INGENIERÍA EN SISTEMAS COMPUTACIONALES
DESARROLLO DE APLICACIONES WEB
MSIG. JEFFERSON ELIAS NÚÑEZ GAIBOR
jefferson.nunezg@ug.edu.ec
12/1/2021 15:19:06
Universidad de Guayaquil
Facultad de Ciencias Matemáticas y Físicas
UNIDAD 1: INTRODUCCIÓN A
Carrera de Ingeniería en Sistemas Computacionales LAS APLICACIONES WEB
1.1 El internet y la web (nacimiento y crecimiento )
La world wide web es solo una manera de acceder a la información a través de Internet,
y aunque representa una gran porción de esta y sin duda la más popular, no deben
tratarse como sinónimos, porque no son lo mismo.
Internet es una red de computadoras que se encuentran interconectadas a nivel
mundial para compartir información.
Fuentes:
https://www.diferenciador.com/diferencia-entre-internet-y-web/
http://ific.uv.es/wop/SABER_MAS/internet.html
https://blogthinkbig.com/internet-y-la-web
12/1/2021 15:19:06
Desarrollo de Aplicaciones Web
1.2 Evolución de las aplicaciones Web
Fuentes:
https://www.timetoast.com/timelines/la-evolucion-de-las-aplicaciones-
web-499d1f8a-5537-44cf-bf36-86906c92f067
12/1/2021 15:19:06
1.3 El modelo cliente /servidor
Es un modelo de diseño de software en el que las tareas se reparten entre los

proveedores de recursos o servicios, llamados servidores, y los demandantes,
llamados clientes. Un cliente realiza peticiones a otro programa, el servidor, quien le
da respuesta. Esta idea también se puede aplicar a programas que se ejecutan sobre
una sola computadora, aunque es más ventajosa en un sistema operativo multiusuario
distribuido a través de una red de computadoras.
Algunos ejemplos de aplicaciones computacionales que usen el modelo cliente-
servidor son el Correo electrónico, un Servidor de impresión y la World Wide Web.
12/1/2021 15:19:06
1.4 Protocolos de internet (Arquitectura TCP/IP)
Nivel Aplicaciones
Servicios específicos a
usuarios
Transmitir datos de
forma óptima y libre de
errores entre
aplicaciones
Comunicación de
paquetes a través de la
red
Enlace y física entre

equipos
Nivel Físico
12/1/2021 15:19:06
1.5 URI
Uniform Resource Identifier: identificador uniforme de recursos.

Cadena que indica un recurso en internet. Puede llevar datos adicionales que
indiquen cosas como de qué forma acceder al recurso.
URN indica un nombre único y público de un recurso en internet.
URI identifica recurso pudiendo cambiar o no en toda la vida, la URL localiza por
lo que sí puede cambiar; quiere decir que una URL es siempre una URI, pero no
toda URI es una URL
12/1/2021 15:19:06
1.5 URL
Localizador de Recursos Uniforme, es un Identificador de recursos uniforme (Uniform

Resource Identifier, URI) define donde y como encontrar un recurso (pueden cambiar), esto es,
la dirección puede apuntar a recursos variables en el tiempo.
12/1/2021 15:19:06
Carrera de Ingeniería en Sistemas Computacionales
1.5 URI, URL y nombres de dominio
DNS (Domain Name System)

• Es el modo en el que los nombres de dominios en
internet son localizados y traducidos a direcciones IP.
• DNS: Nombres tienen una estructura jerarquica.

1.6 Protocolos http
(Hypertext Transfer Protocol, Protocolo de transferencia de hipertexto)
El propósito del protocolo HTTP es permitir la

transferencia de archivos (principalmente, en
formato HTML). entre un navegador (el cliente)
y un servidor web localizado mediante una
cadena de caracteres denominada
dirección URL.
12/1/2021 15:19:06
1.6 Protocolos http

El modelo Request/response de HTTP
1.6 Protocolos http

El modelo Request/response de HTTP
1.7 Servidores y Navegadores Web
• Obtiene la información del web.

–Más popular
– Netscape, Mozzilla, Chrome, Microsoft Internet Explorer
HTTP: Web Browser • Diferentes plataformas
– Opera, Safari
• Rápido
– Lynx
• Basado en texto
1.7 Servidores y Navegadores Web

HTTP: Web Server
• Programa que espera requerimientos de un cliente.

Provee ciertas funciones:
– Servir páginas web
– Correr programas y retornar la salida
– Controlar acceso al servidor
– Monitorear y loguear accesso
Ej. Apache, IIS, Netscape Web server, …
12/1/2021 15:19:06
Tecnologías para el desarrollo web
Cliente Servidor
JavaScript JSP
ASP.net Phyton
VB Script PHP
Html JSF
CSS Servlets
Resumen:
Cómo funciona la Web?
• 3 conceptos fundamentales: Web Server
• – URLs: direcciones de los recursos.
• – HTTP: diálogo entre cliente y servidor.
• – HTML: formato de los recursos. Web Browser
1 Click en la dirección (URL)

http://www.ug.edu.ec
2 Browser envía comando HTTP (METHOD):
Se conecta a www.ug.edu.ec
GET /inicio.html
3 Computadora remota envía el archivo
4 Computadora local muestra el archivo HTML
Prof: Ing. Karla Abad

1.8 Lenguajes de marcado

SGML (Standard Generalized Markup Language)
El lenguaje de marcado generalizado estándar(SGML; ISO 8879: 1986) es un

estándar para definir lenguajes de marcado generalizados para documentos.
HTML en teoría era un ejemplo de un lenguaje basado en SGML hasta HTML5,

que admite que los navegadores no pueden analizar como SGML (por razones de
compatibilidad) y codifica exactamente lo que debe hacer en su lugar.
SGML fue trabajado en 1998 al formato XML, un perfil exitoso de SGML. El uso
completo de SGML se encuentra raramente o nulo en nuevos proyectos.
1.8 Lenguajes de marcado

XML (eXtensible Markup Language)
Lenguaje de Marcado Extensible, es un meta-lenguaje que

permite definir lenguajes de marcas desarrollado por el
World Wide Web Consortium (W3C) utilizado para
almacenar datos en forma legible.
Proviene del lenguaje SGML y permite definir la gramática
de lenguajes específicos para estructurar documentos
grandes.
XML no ha nacido únicamente para su aplicación en 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.
Carrera de Ingeniería en Sistemas Computacionales 1.9 HTML: estructura y sintaxis
1.9.1 HTML: Elementos estructurales
Carrera de Ingeniería en Sistemas Computacionales 1.9 HTML: estructura y sintaxis
Para más detalles y ejercicios, se sugiere visitar:

https://www.w3schools.com/html
HTML: ESTRUCTURA Y SINTAXIS
INTRODUCCIÓN
HTML
LSI. ANGEL VELOZ RODRÍGUEZ, MGS. 12/1/2021 2

LENGUAGE HTML
 HTML es el lenguaje de marcado

estándar para crear páginas web.
12/1/2021 3
¿QUÉ ES EL HTML?
 HTML significa lenguaje de marcado de hipertexto

 HTML es el lenguaje de marcado estándar para crear
páginas web
 HTML describe la estructura de una página web
 HTML consiste en una serie de elementos
 Los elementos HTML le dicen al navegador cómo
mostrar el contenido
 Los elementos HTML etiquetan piezas de contenido
como "este es un encabezado", "este es un párrafo",
"este es un enlace", etc.
12/1/2021 4
UN DOCUMENTO HTML SIMPLE
Ejemplo explicado:
 La <!DOCTYPE html> declaración define que este documento es un
documento HTML5
 El <html> elemento es el elemento raíz de una página HTML.
 El <head> elemento contiene metainformación sobre la página HTML.
 El <title> elemento especifica un título para la página HTML (que se
muestra en la barra de título del navegador o en la pestaña de la página)
 El <body> elemento define el cuerpo del documento y es un contenedor
para todos los contenidos visibles, como encabezados, párrafos, imágenes,
hipervínculos, tablas, listas, etc.
 El <h1> elemento define un encabezado grande
12/1/2021 5
 El <p> elemento define un párrafo.
¿QUÉ ES UN ELEMENTO HTML?
Un elemento HTML se define mediante una etiqueta de inicio, algo de contenido y una etiqueta de finalización:
 < tagname > El contenido va aquí ... < / tagname >
El elemento HTML es todo, desde la etiqueta de inicio hasta la etiqueta de finalización:
 < h1 > Mi primer encabezado < / h1 >
 < p > Mi primer párrafo. < / p >
Nota: Algunos elementos HTML no tienen contenido (como el elemento <br>). Estos elementos se llaman elementos
vacíos. ¡Los elementos vacíos no tienen una etiqueta final!
12/1/2021 6
NAVEGADORES WEB
 El propósito de un navegador web (Chrome,

Edge, Firefox, Safari) es leer documentos
HTML y mostrarlos correctamente.
 Un navegador no muestra las etiquetas
HTML, pero las usa para determinar cómo
mostrar el documento:
12/1/2021 7
ESTRUCTURA DE PÁGINA HTML
 Nota: Solo el contenido

dentro de la sección
<body> (el área blanca)
se mostrará en un
navegador.
12/1/2021 8
EDITORES HTML
 Las páginas web se pueden crear y modificar utilizando editores HTML profesionales.
 Sin embargo, para aprender HTML, se recomienda un editor de texto simple como Notepad (PC) o TextEdit
(Mac).
 Creemos que usar un editor de texto simple es una buena manera de aprender HTML.
12/1/2021 9
PRIMERA PÁGINA WEB CON BLOC DE NOTAS / TEXTEDIT
O CUALQUIER OTRO EDITOR
PRÁCTICA HTML
12/1/2021 10
DOCUMENTOS HTML
 Todos los documentos HTML deben comenzar con una declaración

de tipo de documento: <!DOCTYPE html>.
 El documento HTML en sí comienza <html>y termina con </html>.
 La parte visible del documento HTML está entre <body>y </body>.
12/1/2021 11
LA DECLARACIÓN <! DOCTYPE>
 La <!DOCTYPE>declaración representa el tipo de documento y ayuda a los navegadores a mostrar las páginas
web correctamente.
 Solo debe aparecer una vez, en la parte superior de la página (antes de cualquier etiqueta HTML).
 La <!DOCTYPE>declaración no distingue entre mayúsculas y minúsculas.
 La <!DOCTYPE>declaración para HTML5 es:
12/1/2021 12
ENCABEZADOS HTML
 Los encabezados HTML se definen con las etiquetas <h1>to <h6>.

 <h1>define el encabezado más importante. <h6>define el encabezado menos importante:
12/1/2021 13
PÁRRAFOS HTML
 Los párrafos HTML se definen con la <p> etiqueta:
12/1/2021 14
ENLACES HTML
 Los enlaces HTML se definen con la <a> etiqueta:
12/1/2021 15
IMÁGENES HTML
 Las imágenes HTML se definen con la <img>etiqueta.

 El archivo fuente (src), el texto alternativo (alt) width, y height se proporcionan como atributos:
12/1/2021 16
ELEMENTOS DE FORMATO HTML
Los elementos de formato fueron diseñados para mostrar tipos especiales de texto:
 <b> - Texto en negrita
 <strong> - Texto importante
 <i> - Texto en cursiva
 <em> - Texto enfatizado
 <mark> - Texto marcado
 <small> - Texto más pequeño
 <del> - Texto eliminado
 <ins> - Texto insertado
 <sub> - Texto del subíndice
 <sup> - Texto superíndice
12/1/2021 17
COMENTARIOS HTML
 Los comentarios HTML no se muestran en el  Con comentarios, puede colocar notificaciones y

navegador, pero pueden ayudar a documentar su recordatorios en su código HTML:
código fuente HTML.
 Observe que hay un signo de exclamación (!) En la

etiqueta de inicio, pero no en la etiqueta de
finalización.
 El navegador no muestra comentarios, pero pueden
ayudar a documentar su código fuente HTML.
12/1/2021 18
COLORES HTML
Nombres de colores
 En HTML, se puede especificar un color utilizando un nombre de color:
12/1/2021 19
COLOR DE FONDO
 Puede establecer el color de fondo para los elementos HTML:
12/1/2021 20
COLOR DE TEXTO
 Puedes configurar el color del texto:
12/1/2021 21
COLOR DE BORDE
 Puede establecer el color de los bordes:
12/1/2021 22
SEGUNDA PÁGINA WEB CON BLOC DE NOTAS / TEXTEDIT
O CUALQUIER OTRO EDITOR
PRÁCTICA HTML
12/1/2021 23
PRÁCTICA HTML
12/1/2021 24
PRÁCTICA HTML
12/1/2021 25
HTML: ESTRUCTURA Y SINTAXIS
TABLAS HTML
 Las tablas HTML permiten a los desarrolladores web organizar los datos en filas y columnas.
12/1/2021 2
DEFINIR UNA TABLA HTML
 La etiqueta <table> define una tabla HTML.

 Cada fila de la tabla se define con una etiqueta <tr>.
 Cada encabezado de tabla se define con una etiqueta <th>.
 Cada tabla de datos / celda se define con una etiqueta <td>.
 Por defecto, el texto en los elementos <th> está en negrita y centrado.
 Por defecto, el texto en los elementos <td> es regular y está alineado a la
izquierda.
 Los elementos <td> son los contenedores de datos de la tabla. Pueden
contener todo tipo de elementos HTML; texto, imágenes, listas, otras
tablas, etc.
12/1/2021 3
TABLA HTML: CELDA QUE ABARCA MUCHAS COLUMNAS
 Para hacer que una celda abarque más de una

columna, use el atributo colspan:
12/1/2021 4
TABLA HTML: CELDA QUE ABARCA MUCHAS FILAS
 Para hacer que una celda abarque más de una fila, use
el atributo rowspan:
12/1/2021 5
TABLA HTML: AGREGAR UN TÍTULO
 Para agregar un título a una tabla, use la etiqueta

<caption>.
 La etiqueta <caption> debe insertarse
inmediatamente después de la etiqueta <table>.
12/1/2021 6
LISTAS HTML
 Las listas HTML permiten a los desarrolladores web agrupar un conjunto de elementos relacionados en listas.
12/1/2021 7
LISTA HTML DESORDENADA
 Una lista desordenada comienza con la etiqueta <ul>.

Cada elemento de la lista comienza con la etiqueta
<li>.
 Los elementos de la lista se marcarán con viñetas
(pequeños círculos negros) de forma
predeterminada:
12/1/2021 8
LISTA HTML ORDENADA
 Una lista ordenada comienza con la etiqueta <ol>.

Cada elemento de la lista comienza con la etiqueta
<li>.
 Los elementos de la lista se marcarán con números
de forma predeterminada.
12/1/2021 9
LISTAS DE DESCRIPCIÓN HTML
 HTML también admite listas de descripción.

 Una lista de descripción es una lista de términos, con
una descripción de cada término.
 La etiqueta <dl> define la lista de descripción,
 la etiqueta <dt> define el término (nombre) y
 la etiqueta <dd> describe cada término:
12/1/2021 10
BLOQUES HTML Y ELEMENTOS EN LÍNEA
HTML
12/1/2021 11
ELEMENTOS A NIVEL DE BLOQUE
 Un elemento de nivel de bloque siempre comienza

en una nueva línea y ocupa todo el ancho disponible
(se extiende hacia la izquierda y la derecha tanto
como sea posible).
 El elemento <div> es un elemento de nivel de
bloque.
12/1/2021 12
ELEMENTOS A NIVEL DE BLOQUE EN HTML
12/1/2021 13
ELEMENTOS EN LÍNEA
 Un elemento en línea no comienza en una nueva

línea y solo ocupa el ancho que sea necesario.
 Un elemento en línea no puede contener un

elemento de nivel de bloque.
12/1/2021 14
ELEMENTOS EN LÍNEA EN HTML
12/1/2021 15
EL ELEMENTO <DIV>
 El elemento <div> se usa a menudo como

contenedor para otros elementos HTML.
 El elemento <div> tiene atributos no son
necesarios, pero style, class y id son
comunes.
 Cuando se usa junto con CSS, el elemento
<div> se puede usar para diseñar bloques de
contenido:
12/1/2021 16
EL ELEMENTO <SPAN>
 El elemento <span> es un contenedor en línea que

se usa para marcar una parte de un texto o una
parte de un documento.
 El elemento <span> tiene atributos no son
necesarios, pero style, class y id son comunes.
 Cuando se usa junto con CSS, el elemento <span> se
puede usar para dar estilo a partes del texto:
12/1/2021 17
APUNTES
 Hay dos valores de visualización: bloque y en línea

 Un elemento de nivel de bloque siempre comienza en una nueva línea y ocupa todo el ancho disponible
 Un elemento en línea no comienza en una nueva línea y solo ocupa tanto ancho como sea necesario
 El elemento <div> es un nivel de bloque y a menudo se usa como contenedor para otros elementos HTML
 El elemento <span> es un contenedor en línea utilizado para marcar una parte de un texto o una parte de un
documento
12/1/2021 18
CREAR PÁGINA(S) WEB HTML5
CONSIDERANDO SU ESTRUCTURA ESENCIAL DE ACUERDO AL ENUNCIADO PROPUESTO.
12/1/2021 19
HTML Y ESTILOS CSS
¿Qué es CSS?
 Las hojas de estilo en cascada (CSS) se utilizan para
formatear el diseño de una página web.
 Con CSS, puede controlar el color, la fuente, el tamaño
del texto, el espacio entre los elementos, cómo se
colocan y distribuyen los elementos, qué imágenes de
fondo o colores de fondo se utilizarán, diferentes
pantallas para diferentes dispositivos y tamaños de
pantalla, y mucho ¡más!
 CSS ahorra mucho trabajo.
 Puede controlar el diseño de varias páginas web a la vez.
12/1/2021 1
USANDO CSS
CSS se puede agregar a documentos HTML de 3

maneras:
 En línea : mediante el uso del atributo style dentro
de elementos HTML
 Interno : mediante el uso de un elemento <style> en
la sección <head>
 Externo : mediante el uso de un elemento <link>
para vincular a un archivo CSS externo
La forma más común de agregar CSS es mantener los
estilos en archivos CSS externos.
12/1/2021 2
CSS EN LÍNEA
 Se utiliza un CSS en línea para aplicar un estilo único

a un único elemento HTML.
 Un CSS en línea utiliza el atributo style de un
elemento HTML.
 El siguiente ejemplo establece el color del texto del
elemento <h1> en azul y el color del texto del
elemento <p> en rojo:
12/1/2021 3
CSS INTERNO
 Se usa un CSS interno para definir un estilo para una

sola página HTML.
 Un CSS interno se define en la sección <head> de
una página HTML, dentro de un elemento <style>.
 El siguiente ejemplo establece el color del texto de
TODOS los elementos <h1> (en esa página) en azul
y el color del texto de TODOS los elementos <p>
en rojo.
 Además, la página se mostrará con un color de fondo
"azul polvo":
12/1/2021 4
EL ATRIBUTO CLASS
 El atributo HTML class se usa para especificar una

clase para un elemento HTML.
 Varios elementos HTML pueden compartir la misma
clase.
 Los atributos class se usa a menudo para señalar un
nombre de clase en una hoja de estilo.
 También puede ser utilizado por un JavaScript para
acceder y manipular elementos con el nombre de
clase específico.
 El atributo class se puede usar en cualquier
elemento HTML.
 El nombre de la clase distingue entre mayúsculas y
minúsculas. 5
12/1/2021
LA SINTAXIS PARA CLASS
 Para crear una clase; escriba un carácter de punto (.),

seguido de un nombre de clase. Luego, defina las
propiedades CSS entre llaves {}
12/1/2021 6
CLASES MÚLTIPLES
 Los elementos HTML pueden pertenecer

a más de una clase.
 Para definir varias clases, separe los
nombres de las clases con un espacio, por
ejemplo, <div class = "city main">.
 El elemento tendrá un estilo de acuerdo
con todas las clases especificadas.
 En el siguiente ejemplo, el primer
<h2>elemento pertenece tanto a la
cityclase como a la mainclase, y obtendrá
los estilos CSS de ambas clases:
12/1/2021 7
DIFERENTES ELEMENTOS PUEDEN COMPARTIR LA MISMA CLASE
 Diferentes elementos HTML pueden apuntar al

mismo nombre de clase.
 En el siguiente ejemplo, tanto <h2>y <p> puntos
para la clase "ciudad" y compartirán el mismo estilo:
12/1/2021 8
CSS EXTERNO
 Se utiliza una hoja de estilo externa para definir el

estilo de muchas páginas HTML.
 Para usar una hoja de estilo externa, agregue un
enlace en la sección <head> de cada página HTML.
 La hoja de estilo externa se puede escribir en
cualquier editor de texto.
 El archivo no debe contener ningún código HTML y
debe guardarse con una extensión .css
12/1/2021 9
SELECTORES CSS
 Los selectores CSS se utilizan para "encontrar" (o seleccionar) los elementos HTML que desea
diseñar.
 Podemos dividir los selectores CSS en cinco categorías:
 Selectores simples (seleccione elementos basados en nombre, id, clase)
 Selectores de combinador (seleccione elementos basados en una relación específica entre ellos)
 Selectores de pseudo-clase (seleccionar elementos basados en un cierto estado)
 Selectores de pseudoelementos (seleccionar y diseñar una parte de un elemento)
 Selectores de atributos (seleccione elementos basados en un atributo o valor de atributo)
12/1/2021 10
SELECTORES CSS
El selector de elementos CSS

El selector de elementos selecciona elementos HTML en función del nombre del elemento.
Ejemplo
Aquí, todos los elementos <p> de la página estarán alineados al centro, con un color de texto rojo:
p{
text-align: center;
color: red;
}
12/1/2021 11
SELECTORES CSS
El selector de id. De CSS

El selector de id utiliza el atributo id de un elemento HTML para seleccionar un elemento específico.
La identificación de un elemento es única dentro de una página, por lo que el selector de identificación se utiliza para
seleccionar un elemento único.
Para seleccionar un elemento con una identificación específica, escriba un carácter hash (#), seguido de la identificación
del elemento.
Ejemplo
La siguiente regla CSS se aplicará al elemento HTML con id = "para1":
#para1 {
text-align: center;
color: red;
}
12/1/2021 12
Nota: ¡ Un nombre de identificación no puede comenzar con un número!

SELECTORES CSS
El selector de clase CSS
El selector de clase selecciona elementos HTML con un atributo de clase específico.
Para seleccionar elementos con una clase específica, escriba un carácter de punto (.), Seguido del nombre de la clase.
Ejemplo
En este ejemplo, todos los elementos HTML con class = "center" estarán rojos y alineados al centro:
.center {
text-align: center;
color: red;
}
12/1/2021 13
SELECTORES CSS
El selector de clase CSS
También puede especificar que solo los elementos HTML específicos se vean afectados por una clase.
Ejemplo
En este ejemplo, solo los elementos <p> con class = "center" estarán alineados al centro:
p.center {
text-align: center;
color: red;
}
12/1/2021 14
SELECTORES CSS
Los elementos HTML también pueden referirse a más de una clase.
Ejemplo
En este ejemplo, el elemento <p> tendrá un estilo de acuerdo con class = "center" y class = "large":
<p class="center large">This paragraph refers to two classes.</p>
12/1/2021 15
Nota: ¡ Un nombre de clase no puede comenzar con un número!

SELECTORES CSS
El selector universal de CSS
El selector universal (*) selecciona todos los elementos HTML en la página.
Ejemplo
La siguiente regla CSS afectará a cada elemento HTML en la página:
*{
text-align: center;
color: blue;
}
12/1/2021 16
SELECTORES CSS
El selector de agrupación CSS
El selector de agrupación selecciona todos los elementos HTML con las mismas definiciones de estilo.
Mire el siguiente código CSS (los elementos h1, h2 y p tienen las mismas definiciones de estilo):
h1 {
text-align: center; Será mejor agrupar los selectores para minimizar el código.
color: red; Para agrupar selectores, separe cada selector con una coma.
}
Ejemplo
h2 { En este ejemplo, hemos agrupado los selectores del código anterior:
text-align: center; h1, h2, p {
color: red; text-align: center;
} color: red;
}
p{
text-align: center; 12/1/2021 17
color: red;
}
SELECTORES CSS
Todos los selectores simples de CSS
Selector Example Example description

Selects all elements with
.class .intro
class="intro"
Selects the element with
#id #firstname
id="firstname"
* * Selects all elements
element p Selects all <p> elements
Selects all <div> elements and all
element,element,.. div, p
<p> elements
12/1/2021 18
Unidades CSS
CSS tiene varias unidades diferentes para expresar una longitud.
Muchas de las propiedades CSS toman valores "longitud", tales como width, margin, padding, font-size, etc.
La longitud es un número seguido de una unidad de longitud, como 10px, 2em, etc.
No puede aparecer un espacio en blanco entre el número y la unidad. Sin embargo, si el valor es 0, la unidad
puede omitirse.
Para algunas propiedades CSS, se permiten longitudes negativas.
Hay dos tipos de unidades de longitud: absoluta y relativa.
12/1/2021 19
Longitudes absolutas
Las unidades de longitud absoluta son fijas y una longitud expresada en cualquiera de ellas
aparecerá exactamente como ese tamaño.
No se recomienda el uso de unidades de longitud absoluta en la pantalla, porque los tamaños
de pantalla varían mucho. Sin embargo, se pueden usar si se conoce el medio de salida, como
para el diseño de impresión.
Unit Description
cm centimetersTry it
mm millimetersTry it
in inches (1in = 96px = 2.54cm)Try it
px * pixels (1px = 1/96th of 1in)Try it
pt points (1pt = 1/72 of 1in)Try it
pc picas (1pc = 12 pt)
* Los píxeles (px) son relativos al dispositivo de visualización. Para dispositivos de baja
resolución, 1 px es un píxel (punto) de dispositivo de la pantalla. Para impresoras y
pantallas de alta resolución, 1px implica múltiples píxeles del dispositivo. 12/1/2021 20
Longitudes Relativas
Las unidades de longitud relativa especifican una longitud relativa a otra propiedad de longitud. Las unidades de longitud
relativa se escalan mejor entre diferentes medios de representación.
Unit Description
em Relative to the font-size of the element (2em means 2 times the size of the
current font)
ex Relative to the x-height of the current font (rarely used)
ch Relative to the width of the "0" (zero)
rem Relative to font-size of the root element
vw Relative to 1% of the width of the viewport*
vh Relative to 1% of the height of the viewport*
vmin Relative to 1% of viewport's* smaller dimension
vmax Relative to 1% of viewport's* larger dimension
% Relative to the parent element
Consejo: Las unidades em y rem son prácticas para crear diseños perfectamente escalables!
* Viewport = el tamaño de la ventana del navegador. Si la ventana gráfica tiene 50 cm de
ancho, 1vw = 0.5 cm.
12/1/2021 21
MODELO DE CAJA CSS
Todos los elementos HTML se pueden considerar como cuadros. En CSS, el término "modelo de caja" se
usa cuando se habla de diseño.
El modelo de cuadro CSS es esencialmente un cuadro que envuelve todos los elementos
HTML. Consiste en: márgenes, bordes, relleno y el contenido real.
•Contenido : el contenido del cuadro,

donde aparecen el texto y las
imágenes.
•Relleno : borra un área alrededor del
contenido. El acolchado es
transparente
•Borde : un borde que rodea el
relleno y el contenido.
•Margen : borra un área fuera del
borde. El margen es transparente
12/1/2021 22
MODELO DE CAJA CSS
12/1/2021 23
CONSIDERANDO SU ESTRUCTURA ESENCIAL DE ACUERDO AL ENUNCIADO PROPUESTO.
12/1/2021 24
MAQUETACIÓN
La maquetación web es el proceso en el que el prototipo gráfico

también denominado «layout» (con los requisitos estructurales y estéticos
definidos y aprobados en un análisis inicial) pasa a transformase en código
html, css y js (estándares web) para que los navegadores puedan
interpretarlo correctamente.
HTML tiene varios elementos semánticos que definen las

diferentes partes de una página web:
<header> - Define un encabezado para un documento o una sección

<nav> - Define un conjunto de enlaces de navegación
<section> - Define una sección en un documento
<article> - Define un contenido independiente e independiente
<aside> - Define contenido aparte del contenido (como una barra
12/1/2021
lateral) 1
<footer> - Define un pie de página para un documento o una sección
MAQUETACIÓN
Técnicas de diseño HTML
Existen cuatro técnicas diferentes para crear diseños de varias columnas. Cada técnica tiene sus pros y sus contras:
• Frameworks CSS
• Propiedad flotante CSS
• CSS flexbox
• Cuadricula CSS
Frameworks de CSS
Si desea crear su diseño rápidamente, puede usar un frameworks CSS, como W3.CSS o Bootstrap .
Diseño de cuadrícula CSS

El módulo de diseño de cuadrícula CSS ofrece un sistema de diseño basado en cuadrícula, con filas y columnas, lo que
facilita el diseño de páginas web sin tener que usar flotantes y posicionamiento.
12/1/2021 2
MAQUETACIÓN
Diseño flotante CSS
Es común hacer diseños web completos utilizando la propiedad float CSS . Flotar es fácil de aprender: solo necesita
recordar cómo funcionan las propiedades float y clear. Desventajas: los elementos flotantes están vinculados al flujo de
documentos, lo que puede dañar la flexibilidad.
/* Clear floats after the columns */
<!DOCTYPE html> /* Create two columns/boxes that floats next to each other */ section:after {
<html lang="en"> nav { content: "";
<head> float: left; display: table;
<title>CSS Template</title> width: 30%; clear: both;
<meta charset="utf-8"> height: 300px; /* only for demonstration, should be removed */ }
<meta name="viewport" content="width=device-width, initial-scale=1"> background: #ccc;
<style> padding: 20px; /* Style the footer */
*{ } footer {
box-sizing: border-box; background-color: #777;
} /* Style the list inside the menu */ padding: 10px;
nav ul { text-align: center;
body { list-style-type: none; color: white;
font-family: Arial, Helvetica, sans-serif; padding: 0; }
} }
/* Responsive layout - makes the two columns/boxes stack on top
/* Style the header */ article { of each other instead of next to each other, on small screens */
header { float: left; @media (max-width: 600px) {
background-color: #666; padding: 20px; nav, article {
padding: 30px; width: 70%; width: 100%;
text-align: center; background-color: #f1f1f1; height: auto; 12/1/2021 3
font-size: 35px; height: 300px; /* only for demonstration, should be removed */ }
color: white; } }
} </style>
</head>
<body>
<h2>CSS Layout Float</h2>

<p>In this example, we have created a header, two columns/boxes and a footer. On
smaller screens, the columns will stack on top of each other.</p>
<p>Resize the browser window to see the responsive effect (you will learn more
about this in our next chapter - HTML Responsive.)</p>
<header>
<h2>Cities</h2>
</header>
<section>
<nav>
<ul>
<li><a href="#">London</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Tokyo</a></li>
</ul>
</nav>
<article>
<h1>London</h1>
<p>London is the capital city of England. It is the most populous city in the
United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two
millennia, its history going back to its founding by the Romans, who named it
Londinium.</p>
</article>
</section>
<footer>
<p>Footer</p>
</footer>
</body>
</html> 12/1/2021 4
MAQUETACIÓN
Diseño CSS Flexbox
El uso de flexbox asegura que los elementos se comporten de manera predecible cuando el
diseño de la página debe acomodar diferentes tamaños de pantalla y diferentes dispositivos de
visualización. /* Style the content */
article {
-webkit-flex: 3;
<!DOCTYPE html> /* Container for flexboxes */ -ms-flex: 3;
<html lang="en"> section { flex: 3;
<head> display: -webkit-flex; background-color: #f1f1f1;
<title>CSS Template</title> display: flex; padding: 10px;
<meta charset="utf-8"> } }
<meta name="viewport" content="width=device-
width, initial-scale=1"> /* Style the navigation menu */ /* Style the footer */
<style> nav { footer {
*{ -webkit-flex: 1; background-color: #777;
box-sizing: border-box; -ms-flex: 1; padding: 10px;
} flex: 1; text-align: center;
background: #ccc; color: white;
body { padding: 20px; }
font-family: Arial, Helvetica, sans-serif; }
} /* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to
/* Style the list inside the menu */ each other */
/* Style the header */ nav ul { @media (max-width: 600px) {
header { list-style-type: none; section {
background-color: #666; padding: 0; -webkit-flex-direction: column;
padding: 30px; } flex-direction: column; 12/1/2021 5
text-align: center; }
font-size: 35px; }
color: white; </style>
} </head>
<body>
<h2>CSS Layout Flexbox</h2>

<p>In this example, we have created a header, two columns/boxes and a footer.
On smaller screens, the columns will stack on top of each other.</p>
<p>Resize the browser window to see the responsive effect.</p>
<p><strong>Note:</strong> Flexbox is not supported in Internet Explorer 10
and earlier versions.</p>
<header>
<h2>Cities</h2>
</header>
<section>
<nav>
<ul>
<li><a href="#">London</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Tokyo</a></li>
</ul>
</nav>
<article>
<h1>London</h1>
<p>London is the capital city of England. It is the most populous city in the
United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for
two millennia, its history going back to its founding by the Romans, who named it
Londinium.</p>
</article>
</section>
<footer>
<p>Footer</p>
</footer>
</body> 12/1/2021 6
</html>
RESPONSIVE
¡El diseño web receptivo se trata de crear páginas web que se vean bien en todos los dispositivos!
Un diseño web receptivo se ajustará automáticamente para diferentes tamaños de pantalla y ventanas gráficas.
12/1/2021 7
¿Qué es el diseño web receptivo?
Responsive Web Design se trata de usar HTML y CSS para redimensionar, ocultar, reducir o
ampliar automáticamente un sitio web, para que se vea bien en todos los dispositivos
(computadoras de escritorio, tabletas y teléfonos):
@media only screen and (max-width:800px) {

/* For tablets: */
.main {
width: 80%;
padding: 0;
}
.right {
width: 100%;
}
}
@media only screen and (max-width:500px) {
/* For mobile phones: */
.menu, .main, .right {
width: 100%;
}
}
</style>
12/1/2021 8
MAQUETACIÓN / RESPONSIVE
12/1/2021 9
DESARROLLO DE APLICACIONES
WEB
Programación del lado del cliente
JAVASCRIPT: Introducción
 JavaScript es el lenguaje de programación ligero más popular en
Internet.
 JavaScript es un lenguaje interpretado (las secuencias de comandos
se ejecutan sin compilación preliminar).
 Usualmente está embebido directamente en las páginas html a través
de la etiqueta <script> de forma interna o externa.
 Interna:
<script type="text/javascript">
document.write("<p>Mi primer JavaScript</p>");
</script>
Archivo con extensión .js
Externa:
<script type="text/javascript" src="myScript.js"></script>
http://www.w3schools.com/js/js_intro.asp
JAVASCRIPT: Qué puede hacer?
 JavaScript puede reaccionar a eventos - Un JavaScript puede ser
configurado para ejecutarse cuando algo sucede, como cuando una página ha
terminado de cargar o cuando un usuario da click en un elemento html.
 JavaScript puede manipular elementos HTML - JavaScript puede leer y
modificar el contenido de un elemento HTML a través del uso de DOM.
 JavaScript se puede utilizar para validar datos - un JavaScript se puede
utilizar para validar formularios de entrada de datos.
 JavaScript puede ser utilizado para detectar el browser del visitante - y
dependiendo del browser cargar otra página diseñada específicamente para
ese navegador.
 JavaScript puse ser usado para crear cookies - JavaScript puede ser usado
para almacenar y recuperar información en la computadora del visitante.
JAVASCRIPT: Sintáxis
 JavaScripts puede ser colocado dentro de las secciones <head> o <body> de una
página html.
<html>
<body><h1>My Web Page</h1>
<p id="demo">Un párrafo</p>
<script type="text/javascript">
document.getElementById("demo").innerHTML=“Mi primer
JavaScript";
</script>
</body>
</html>
 Nota: Colocar el código javascript debajo de la página asegura que éste no

se ejecute antes de que el elemento <p> sea creado.
JAVASCRIPT: Sintaxis (Funciones y eventos)
 El ejemplo anterior de JavaScript es ejecutado cuando la página carga.
 Sin embargo, algunas veces nosotros necesitamos ejecutar código JavaScript cuando
ocurre un evento, por ejemplo cuando un usuario hace click sobre un botón.
 Entonces colocamos el script dentro de una function.
 Normalmente las funciones son usados en combinación con eventos.
Llama a la función cuando ocurre el evento click
Revisar lista de eventos en:https://www.w3schools.com/jsref/dom_obj_event.asp

JavaScript Display Possibilities
JavaScript can mostrar datos en diferentes maneras:
Escribiendo dentro de un elemento HTML, utilzando innerHTML.

Ej. document.getElementById("demo").innerHTML = 5 + 6;
Escribiendo como salida del documento HTML, utilizando document.write().

Ej. document.write(5 + 6);
Escribiendo una caja de alerta, utlizando window.alert() o alert().

Ej. alert(5+ 6);
Escribiendo en la consola del navegador, utilizando console.log().

console.log(5 + 6);
DOM : DOCUMENT OBJECT MODEL
 Estándar que define un API para la representación de documentos HTML
y XML.
 Representa estos documentos como árboles de nodos. En DOM todo es
un nodo.
 Es una interfaz de programación de aplicaciones para acceder y manipular
dinámicamente contenido, estructura y estilo en documentos utilizando lenguajes
como ECMAScript (JavaScript).
Ejemplo XML DOM
http://www.w3.org/DOM/
DOM : DOCUMENT OBJECT MODEL
 El HTML DOM es un estandar para obtener, cambiar, añadir o eliminar
elementos HTML.
Ejemplo HTML DOM
http://www.w3schools.com/htmldom/default.asp
JavaScript: Métodos principales
 getElementById(id)
 Permite obtener un elemento del documento html por su
ID. Retorna un elemento.
 Ejemplo:
 document.getElementById("demo").innerHTML = "Hello
JavaScript";
 document.getElementById('myImage').src='pic_bulbon.gif'
 getElementsByTagName(tagname)
 Permite obtener elementos por su nombre de etiqueta.
Retorna un arreglo de elementos
 var x = document.getElementsByTagName("p");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}
 getElementsByName(name)
 Permite obtener elementos por el valor de su atributo
name. Retorna un arreglo de elementos
 var x = document.getElementsByName("animal");
var i;
for (i = 0;i < x.length;i++) {
if (x[i].type == "checkbox") {
x[i].checked = true;
}
}
 querySelector(selector)
 Retorna el primer elemento cuyo selector CSS coincida
con el especificado.
 document.querySelector("#demo").innerHTML = "Hello
World!";
 var y= document.querySelector("a[target]");
 y.style.color= "red";
 querySelectorAll(selector)
 Retorna todos los elementos cuyo selector CSS coincida
con el especificado.
 var x = document.querySelectorAll(".example");
 x[0].style.backgroundColor = "red";
 var x = document.querySelectorAll("a[target]");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.border = "10px solid red";
}
 createElement(tagname)
 Crea un nodo de tipo elemento, según el nombre de
etiqueta especificado.
 var para = document.createElement("P"); // Create a
<p> element
para.innerHTML = "This is a paragraph."; // Insert
text
document.getElementById("myDIV").appendChild(para); //
Append <p> to <div> with id="myDIV"
 appendChild(child)
 Agrega el nodo especificado, como último hijo.
 var item;
 var lista = document.querySelector("ul");//selecciona elemento
ul
for (i = 0;i < 10;i++) {
 item = document.createElement("li"); //crea elemento li
 Item.innerHTML = " Item" + i; // escribe contenido en elemento item
 lista.appendChild(item); // agrega el item a la lista
}
 removeChild(child)
 Elimina el nodo especificado.
 var lista = document.querySelector("ul");//selecciona la lista ul
 var items = document.querySelector("ul li");//selecciona
elementos li de la lista ul
 for (var i = 0;i < lista.length;i++) {
if (lista.hasChildNodes()) {
lista.removeChild(items[i]);// elimina cada item de la lista
}
 }
JavaScript: objeto Style
 El objeto style de cada elemento html representa su
estilo individual.
 document.getElementById("demo").style.display = "none";
 document.getElementById("demo").style.fontSize = "35px";
JavaScript: Eventos
Los eventos HTML son "cosas" que le suceden a los elementos HTML.
Cuando se usa JavaScript en páginas HTML, JavaScript puede "reaccionar" ante
estos eventos.
Un evento HTML puede ser algo que hace el navegador o algo que hace un usuario.
Aquí hay algunos ejemplos de eventos HTML:
•Una página web HTML ha terminado de cargarse

•Se modificó un campo de entrada HTML
•Se hizo clic en un botón HTML
A menudo, cuando ocurren eventos, es posible que desee hacer algo.

JavaScript le permite ejecutar código cuando se detectan eventos.
JavaScript: Eventos
HTML permite agregar atributos de controlador de eventos, con
código JavaScript , a elementos HTML.
Con comillas simples:

<element event='some JavaScript'>
Con comillas dobles:
<element event="some JavaScript">
<!DOCTYPE html>
<html>
<body>
<button onclick="document.getElementById('demo').innerHTML=Date()">The time is?</button>
<p id="demo"></p>
</body>
</html>
JavaScript: Eventos
HTML permite agregar atributos de controlador de eventos, con
código JavaScript , a elementos HTML.
Con comillas simples:

<element event='some JavaScript'>
Con comillas dobles:
<element event="some JavaScript"> <!DOCTYPE html>
<html>
<!DOCTYPE html> <body>
<html>
<body> <p>Click the button to display the date.</p>
<button <button onclick="displayDate()">The time is?</button>

onclick="document.getElementById('demo').inner
HTML=Date()">The time is?</button> <script>
function displayDate() {
<button onclick="this.innerHTML=Date()">The document.getElementById("demo").innerHTML =
time is?</button> Date();
}
<p id="demo"></p> </script>
</body> <p id="demo"></p>

</html>
</body>
</html>
JavaScript: Eventos
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<body onload="myFunction()"> <body>
<h1>Hello World!</h1> <img src="w3html.gif" onload="loadImage()"

width="100" height="132">
<script>
function myFunction() { <script>
alert("Page is loaded"); function loadImage() {
} alert("Image is loaded");
</script> }
</script>
</body>
</html> </body>
</html>
JavaScript: Eventos
Algunos eventos HTML comunes:
Evento Descripción
onchange Se ha cambiado un elemento HTML.
onclick El usuario hace clic en un elemento
HTML.
onmouseover El usuario mueve el mouse sobre un
elemento HTML
onmouseout El usuario aleja el mouse de un elemento
HTML
onkeydown El usuario presiona una tecla del teclado
onload El navegador ha terminado de cargar la
página.
La lista es mucho más larga: W3Schools JavaScript Reference HTML DOM

Events .
JavaScript: Validación de Formularios
 El elemento <form> de html define un formulario que es utilizado para
recolectar datos de entrada del usuario.
Ejemplo:
<form name="form_datos" action="/action_page.php" method="get">
<label>Nombre:</label>
<input type="text" name= "nombre"/></br>
<label>Apellidos:</label>
<input type="text" name="apellidos"/></br>
<input type="submit" value="Enviar"/>
</form>
 El elemento <form> de html define un formulario que es utilizado para
recolectar datos de entrada del usuario.
Propiedades de los elementos de formulario Html
Un formulario html contiene elementos de formaulario. Los elementos de
formulario más importantes son los <input>.
Los elementos input pueden ser mostrados de manera diferente,dependiendo
del valor de su atributo type.
Ejemplos:
Botones: <input type="button">, <input type="reset">, <input type="submit">
Cajas de texto: <input type="text">, <input type="password">, <input type="number">

Casillas de verificacion: <input type="checkbox">
Botones de opcion: <input type="radio">
Campos ocultos: <input type="hidden">
Cajas de fecha o tiempo: <input type="date">, <input type="time">

Cajas para selección de archivos: <input type="file">
Para más información visitar:

https://www.w3schools.com/html/html_form_input_types.asp
Adicionalmente existen otros elementos de formulario como:
El elemento <select> que define una lista drop-down (combo).Ejemplo:

<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
El elemento <textArea> que define una caja de texto de varias líneas
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
Validación de Formularios
Ejemplo validación campo vacio.

Uso de expresiones regulares para validación

Las expresiones regulares (regex) son modelos que describen las
combinaciones de caracteres en el texto. Se podrían definir como una serie
de caracteres que forman un patrón, de tal forma que podemos comparar
el patrón con otros conjuntos de caracteres para ver las coincidencias.
Manual para expresiones regulares

http://www.desarrolloweb.com/articulos/2033.php
http://www.w3schools.com/js/js_obj_regexp.asp
Ejemplo validación campo fecha.
var regexFecha = /^(0[1-9]|1\d|2\d|3[1-2])\/(0[1-9]|1[0-2])\/\d{4}$/;

Ejemplo validación grupos de opciones.
Ejercicio práctico:
1.- Crear formulario
2.- Aplicar CSS
3.- Crear JavaScript con validaciones
Conociendo PHP
Introducción a uno de
los lenguajes de
programación web
más usados en
Internet
¿Qué es PHP?
Lenguaje de programación
para generar páginas web
El ciclo web
1
solicitud
4 navegador servidor web 2
respuesta
3
presentación
proceso
respuesta web
El contenido del documento .html es pasado

tal cual a la respuesta HTML
HTML .html
servidor
web
HTML .php
Un documento dinámico (como .php) es

procesado para obtener HTML
respuesta web
servidor
web
en el proceso, un documento dinámico puede

involucrar diversos recursos
base de datos email archivos gráficos etc

¿Por qué PHP?
• Es ampliamente soportado por los servicios de
hosting
• Es libre
• Un número significativo de sites se ha escrito
en PHP (Wikipedia , YouTube, Yahoo, Facebook,
WordPress…)
• Muchos paquetes importantes están escritos en
PHP (WordPress, OS Commerce, Joomla,
Drupal…)
• Es simple, directo, flexible…
• Ha evolucionado para soportar programación
orientada a objetos
Conociendo PHP
para empezar
instalando PHP
instalar instalar PHP

Apache MySQL + MySQL
instalar
configurar
PHP
PHP
instalar
módulo PHP
En la instalación manual
hay que bajar cada
configurar configurar componente, instalarlo
Apache PHP y configurarlo.
LAMP, WAMP, …
• Típicamente, PHP se
instala para trabajar
junto con Apache y
MySQL
• Cuando la instalación
L A M P aparece en Linux, se
la llama LAMP
• Cuando la instalación
aparece en Windows,
se la llama WAMP
W A M P • Y así por el estilo…
M A M P
XAMPP
• Hay varios proyectos
que difunden paquetes
que contienen esas
instalaciones típicas.
• Usarlos puede facilitar
la instalación, y el día
a día con el entorno de
desarrollo.
• XAMPP es uno de tales

paquetes. No sólo provee PHP,
sino también Perl y Python y
está disponible tanto para
Linux, como para Windows,
Mac OS X y Solaris
Editores, IDEs
• Igual que con HTML, CSS,
Javascript y otros
lenguajes web, es posible
trabajar usando un
simple editor de texto,
como Notepad, aunque
contar con un entorno de
desarrollo puede facilitar
mucho las cosas.
• Hay editores de texto
muy útiles para
programación, como
Notepad++, jEdit, …
• Y entornos de desarrollo
muy buenos, como
Dreamweaver, Aptana,
Eclipse, Zend Studio…
Editores, IDEs
• Estos son los que suelo
usar
• Notepad cuando no hay
nada más a la mano
• Notepad++ es excelente,
ligero, con FTP y una
buena utilidad para
convertir Unicode
• Dreamweaver es excelente
para el diseño HTML, tiene
buen soporte para PHP
• Aptana esta basada en
Eclipse, pero tiene mucho
mejor soporte para PHP,
HTML, Javascript…
• Nano, cuando estoy Linux
y no hay nada más a la
mano
Empezando
El panel de control de XAMPP, desde donde podemos

iniciar y detener sus servicios
Conociendo PHP
lo básico
¡Hola Mundo!
hola_mundo.php
<?php
echo '¡Hola Mundo!';
?>
• El código php se escribe entre etiquetas <?php y

?>
• Para escribir algo en la página, podemos usar
echo
• Las cadenas se escriben entre apóstrofes 'así', ó
entre comillas "así"
• El nombre del archivo tiene la extensión php
¡Hola Mundo!
hola_mundo.php
<?php
?>
htdocs
…¡Hola Mundo!
htdocs
htdocs/index.php http://localhost/index.php
htdocs/hola_mundo.php http://localhost/hola_mundo.php
…¡Hola Mundo!
http://localhost/hola_mundo.php
servidor
web
navegador
¡Hola Mundo! <?php
?>
HTML .php
…¡Hola Mundo!
hola_mundo.php
<html>
<body>
<h1>
<?php echo '¡Hola Mundo!';?>
</h1>
</body>
</html>
• Un documento php es básicamente html con

código inserto
• Los bloques php se reemplazan por su
resultado
…¡Hola Mundo!
<html>
<body>
<h1>
¡Hola Mundo!
</h1>
</body>
</html>
Cuadrados
cuadrados.php
<html>
<body>
<h1>Cuadrados</h1>
<table border="1">
<?php for ($i=1; $i<=10; $i++) { ?>
<tr>
<td><?php echo $i;?></td>
<td><?php echo $i*$i;?></td>
</tr>
<?php } ?>
</table>
</body>
</html>
…Cuadrados
<html>
<body>
<h1>Cuadrados</h1>
<table border="1">
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>4</td>
</tr>
…
<tr>
<td>10</td>
<td>100</td>
</tr>
</table>
</body>
</html>
Conociendo PHP
formularios
Métodos de intercambio de información
Métodos para intercambiar información entre cliente y servidor

Método GET : el cliente le solicita al servidor web que le devuelva la información
identificada en la propia URL. Lo más común es que las peticiones se refieran a un
documento HTML o a una imagen, aunque también se puede referir a un programa de
base de datos.
Método POST : mientras que el método GET se utiliza para recuperar información, el
método POST se usa habitualmente para enviar información a un servidor web. Estos
casos suelen darse al enviar el contenido de un formulario o especificar parámetros para
algún tipo de componente ejecutado en el servidor.
Otros métodos de envío de Datos:
PUT para actualizar un recurso del servidor
DELETE para eliminar un recurso del servidor
PHP: Variables súper globales
Son variables internas que están disponibles siempre en todos los ámbitos:
$GLOBALS — Hace referencia a todas las variables disponibles en el ámbito
global
$_SERVER — Información del entorno del servidor y de ejecución
$_GET — Variables HTTP GET
$_POST — Variables POST de HTTP
$_FILES — Variables de subida de ficheros HTTP
$_REQUEST — Variables HTTP Request. Por defecto contiene el contenido
de $_GET, $_POST y $_COOKIE.
$_SESSION — Variables de sesión
$_ENV — Variables de entorno
$_COOKIE — Cookies HTTP
Hola Tú
hola_form.php
<html>
<body>
<form action="hola.php" method="get">
Nombre:
<input type="text" name="nombre"/>
<input type="submit" value="OK"/>
</form>
</body>
</html>
…Hola Tú
hola.php
<html>
<body>
<h1>
<?php echo '¡Hola '.$_GET['nombre'].'!';?>
</h1>
</body>
</html>
Hola Tú
hola_form.php
<html>
<body>
<form action="hola.php" method="post">
Nombre:
<input type="text" name="nombre"/>
<input type="submit" value="OK"/>
</form>
</body>
</html>
…Hola Tú
hola.php
<html>
<body>
<h1>
<?php echo '¡Hola '.$_POST['nombre'].'!';?>
</h1>
</body>
</html>
…Hola Tú
http://localhost/hola_form.php
<form>...</form> <form>...</form>
hola_form.php
navegador
action=hola.php
servidor
web
nombre=Angel
¡Hola Angel! <?php

echo '¡Hola '
.$_POST['nombre']
.'!';
?>
HTML hola.php
…Hola Tú
hola_tu.php versión de una página
<html>
<body>
<?php
$nombre = isset($_POST['nombre'])?$_POST['nombre']:'';
?>
<form action="hola_tu.php" method="post">
Nombre:
<input type="text" name="nombre"
value="<?php echo $nombre;?>"/>
<input type="submit" value="OK">
</form>
<?php if ($nombre) {
echo '<h1>¡Hola '.$nombre.'!</h1>';
}?>
</body>
</html>
…Hola Tú
http://localhost/hola_tu.php
<form>...</form>
<?php
$nombre = ...;
?>
navegador
action=hola_tu.php
servidor <form>...</form>
web <?php
nombre=Angel if ($nombre) {
echo '<h1>¡Hola '
.$nombre.'!</h1>';
}
¡Hola Angel! ?>
hola_tu.php
HTML
Conociendo PHP
un poco más
Bloques básicos
$x = 1+1; asignación
if ($x>0) { switch ($x) { decisión
... case 1:
} ... • if
break; • if/else
if ($x>0) { ...
... default • switch
} else { ...
... break;
} }
for ($i=0; $i<10; $i++) { repetición

...
} • for
• while
while ($i<10) { do {
• do-while
... ...
} } while ($i<10);
Arrays
$x = 1; (
$a = array(2, 3, $x, 'Hola'); [0]=>2
[1]=>3
[2]=>1
[3]=>'Hola'
)
a[3] 'Hola'
foreach ($a as $item) { 2
echo $item.'<br/>'; 3
} 1
'Hola'
foreach ($a as $indice=>$item) { 0: 2

echo $indice.': '.$item.'<br/>'; 1: 3
} 2: 1
3: 'Hola'
Funciones
function hola_mundo() { hola_mundo();
}
function hola($x) { hola('Mundo');

echo '¡Hola '.$x.'!';
}
function saludo($y) { hola('Mundo');

return '¡Hola '.$y.'!';
}
function hola($x) {
echo saludo($x);
}
¡Hola Mundo!
Clases
class Hola() { $h = new Hola();
function saludo($y) { $h->hola('Mundo');
return '¡Hola '.$y.'!';
}
function hola($x) {
echo $this->saludo($x);
}
}
¡Hola Mundo!
include
cabecera.php
echo '<h1>Conociendo PHP</h1>';
_hola_mundo.php
echo 'Hola Mundo';
hola_mundo.php
<html>
<body>
<?php include 'cabecera.php';?>
<?php include '_hola_mundo.php';?>
</body>
</html>
require
funciones.php
function hola() {
return '¡Hola Mundo!';
}
_hola_mundo.php
echo hola();
hola_mundo.php
<html>
<body>
<?php require('funciones.php');?>
<?php include '_hola_mundo.php';?>
</body>
</html>
include & require
• include() y require() son similares, la diferencia es
que si no existe el archivo a incluir, include()
emitirá una alarma, mientras que require()
terminará el programa.
• Un mismo archivo se puede incluir más de una
vez.
• Para prevenir duplicaciones en las inclusiones
existen include_once() y require_once().
Frameworks
• Un framework es una forma de
organizar el trabajo.
• Luego de un tiempo desarrollando,
uno empieza a notar ciertos
patrones de organización. Aún sin
proponérselo, va surgiendo un
framework.
• Algunos frameworks muy difundidos
en la comunidad PHP son Laravel,
CakePHP, CodeIgniter, Zend,
Symphony…
• Un framework estandarizado obliga
a seguir ciertas convenciones de
organización, pero pone a nuestra
disposición código ampliamente
probado y optimizado.
Referencias
• PHP site
– http://php.net
• W3Schools – PHP
– http://www.w3schools.com/PHP/default.asp
• CakePHP
– http://cakephp.org
• CodeIgniter
– http://codeigniter.com
• Zend Framework
– http://framework.zend.com/
• Symphony
– http://www.symfony-project.org/
• Coquette Icons
– http://dryicons.com/free-icons/preview/coquette-icons-set/
Conociendo PHP
Introducción a uno de
los lenguajes de
programación web
más usados en
Internet
preguntas,
comentarios

Desarrollo de Aplicaciones Web

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Desarrollo de Aplicaciones Web

Cargado por

Copyright:

Formatos disponibles

UNIVERSIDAD DE GUAYAQUIL

FACULTAD DE CIENCIAS MATEMÁTICAS Y FÍSICAS

DESARROLLO DE APLICACIONES WEB

MSIG. JEFFERSON ELIAS NÚÑEZ GAIBOR

1.1 El internet y la web (nacimiento y crecimiento )

1.2 Evolución de las aplicaciones Web

1.3 El modelo cliente /servidor

Es un modelo de diseño de software en el que las tareas se reparten entre los

1.4 Protocolos de internet (Arquitectura TCP/IP)

Enlace y física entre

Uniform Resource Identifier: identificador uniforme de recursos.

Localizador de Recursos Uniforme, es un Identificador de recursos uniforme (Uniform

1.5 URI, URL y nombres de dominio

DNS (Domain Name System)

• DNS: Nombres tienen una estructura jerarquica.

1.6 Protocolos http

(Hypertext Transfer Protocol, Protocolo de transferencia de hipertexto)

El propósito del protocolo HTTP es permitir la

1.6 Protocolos http

1.6 Protocolos http

1.7 Servidores y Navegadores Web

• Obtiene la información del web.

1.7 Servidores y Navegadores Web

• Programa que espera requerimientos de un cliente.

1 Click en la dirección (URL)

Prof: Ing. Karla Abad

1.8 Lenguajes de marcado

El lenguaje de marcado generalizado estándar(SGML; ISO 8879: 1986) es un

HTML en teoría era un ejemplo de un lenguaje basado en SGML hasta HTML5,

1.8 Lenguajes de marcado

Lenguaje de Marcado Extensible, es un meta-lenguaje que

XML no ha nacido únicamente para su aplicación en Internet, sino que se

Para más detalles y ejercicios, se sugiere visitar:

LSI. ANGEL VELOZ RODRÍGUEZ, MGS. 12/1/2021 2

 HTML es el lenguaje de marcado

 HTML significa lenguaje de marcado de hipertexto

 El propósito de un navegador web (Chrome,

 Nota: Solo el contenido

 Todos los documentos HTML deben comenzar con una declaración

 Los encabezados HTML se definen con las etiquetas <h1>to <h6>.

 Los párrafos HTML se definen con la <p> etiqueta:

 Los enlaces HTML se definen con la <a> etiqueta:

 Las imágenes HTML se definen con la <img>etiqueta.

 Los comentarios HTML no se muestran en el  Con comentarios, puede colocar notificaciones y

 Observe que hay un signo de exclamación (!) En la

 Puede establecer el color de fondo para los elementos HTML:

 Puedes configurar el color del texto:

 Puede establecer el color de los bordes:

 La etiqueta <table> define una tabla HTML.

 Para hacer que una celda abarque más de una

 Para agregar un título a una tabla, use la etiqueta

 Una lista desordenada comienza con la etiqueta <ul>.

 Una lista ordenada comienza con la etiqueta <ol>.

 HTML también admite listas de descripción.

 Un elemento de nivel de bloque siempre comienza

 Un elemento en línea no comienza en una nueva

 Un elemento en línea no puede contener un

 El elemento <div> se usa a menudo como

 El elemento <span> es un contenedor en línea que

 Hay dos valores de visualización: bloque y en línea

CSS se puede agregar a documentos HTML de 3

 Se utiliza un CSS en línea para aplicar un estilo único

 Se usa un CSS interno para definir un estilo para una