Desarrollo de

aplicaciones WEB
Contenido
• Sitios WEB, arquitectura cliente – servidor
• Sitios WEB responsivos
• Lenguaje HTML, HTML5
• Hojas de estilos CSS
• Lenguaje Java script, JQuery
• Bases de datos MySQL
• Aplicaciones WEB
Sitio WEB
Un sitio web es un espacio virtual en Internet. Se trata de un conjunto de páginas web relacionadas
temáticamente y que son accesibles desde un mismo dominio o subdominio de la World Wide Web
(WWW).
Una extensión o dominio de Internet es un nombre único que identifica a un sitio web en Internet y que se
encuentra asociado a una dirección IP.
Una dirección IP (Internet protocol) es un número único representado por cuatro segmentos separados
por puntos en la versión IPV4 (32 bits). También existe la versión IPV6 (128 bits) que son segmentos
expresados en hexadecimal separados por dos puntos.

Ejemplos de direcciones IPv4: 192.168.0.1, 66.228.118.51, 173.194.33.16

Ejemplo de una dirección IPv6: 2607 : f0d0 : 4545 : 3 : 200 : f8ff : fe21 : 67cf
Sitio WEB
Los dominios son asociados a un DNS (domain name server), estos servidores están
encargados de hacer la “traducción” de un nombre de dominio a una dirección IP, es decir,
cuando escribimos: www.google.com el servidor busca a que dirección IP esta
relacionado ese dominio y nos lleva al sitio.
También asociado a los sitios web tenemos las URL (uniform resource locator), que es la
dirección de un recurso en Internet. La URL nos indica la ubicación de un recurso (dominio
o IP) y el protocolo que se utiliza para accederlo (WWW, FTP, HTTP, SMTP).
Servidores
Un servidor es un equipo de cómputo con características muy por encima del promedio
dedicado a atender peticiones de los usuarios de acuerdo al servicio que presta, el cual
esta asociado a un protocolo de comunicación. Por ejemplo servidores de bases de datos,
FTP, web, de correo electrónico entre otros.
Los servidores se basan en la arquitectura cliente – servidor que básicamente consiste en
que un dispositivo tiene el rol de servidor y otros dispositivos tienen el rol de clientes.
Los clientes hacen peticiones utilizando una red para comunicarse con el servidor y de
esta forma acceder a los recursos que el servidor administra.
Servidores
Para probar un sitio web se debe contar con un servidor de web como mínimo, en caso de
que el sitio utilice otras tecnologías, se debe contar con los servidores correspondientes,
que pueden ser de correo electrónico, de archivos (FTP), de base de datos, entre otros.
Para habilitar un servidor local es necesario instalar el software necesario.
Servidores
Algunos paquetes para montar servidores locales con las tecnologías más comunes y
libres son:
Servidores
Al usar un servidor el sitio web se almacena en una carpeta, la cuál conocemos como
carpeta raíz, un servidor puede alojar uno o más sitios, pero cada uno de ellos en su
carpeta. El archivo principal en un sitio se debe llamar index.
La organización de los archivos de un sitio web es muy importante.
Instalación app server
Sitios web responsivos
Hoy en día hay muchos usuarios que navegan por Internet mediante tabletas,
smartphones y otros dispositivos, así que debemos tener en cuenta a estos usuarios para
que visualicen los sitios web con la misma satisfacción que si estuvieran accediendo a
través de una computadora.
La solución que se ofrece es lo que llamamos webs responsivas, páginas web
programadas en HTML5 y CSS3 que se adaptan a los diferentes tamaños de pantalla
reorganizando el contenido, escalando las imágenes y/o simplificando el menú.
Sitios web responsivos
Hay muchos frameworks (entorno de trabajo) que podemos utilizar para desarrollar este
tipo de páginas web.
Algunos de estos frameworks son Responsive Grid System, Bootstrap, Foundation,
Skeleton y Gumby.

continuara…
Capas de un sitio web
HTML (Hyper Text Markup Language)
El lenguaje de marcado de hipertexto (HTML) se utiliza para desarrollar páginas web, se
caracteriza por ser un lenguaje que modela páginas utilizando etiquetas (tags) que le
indican al navegador que elemento es y como lo debe presentar.
El diseño de una página web se realiza de forma independiente y mediante el lenguaje
HTML se modela.
Puede ser escrito en un bloc de notas ya que las páginas web son archivos de texto plano,
lo que hace que el lenguaje sea vigente ya que su transmisión es ágil. Pero también
existen herramientas que nos permiten obtener una vista de diseño para darnos una idea
del acomodo de los elementos.
Actualmente la versión de HTML que se ha vuelto popular es conocida como HTML 5.
2 minutos de historia
HTML
• No es un lenguaje de programación, no tiene estructuras de control y no maneja
variables.
• Es un lenguaje que tampoco se compila y no genera código objeto o archivos de
aplicación.
• Es interpretado por los navegadores.
• Las etiquetas no son sensibles a mayúsculas y minúsculas, algunos atributos si.
Etiquetas (tags)

Las etiquetas le indican al navegador que tipo de elemento es y sus características

(atributos).
La mayoría de las etiquetas se presentan en pares, la etiqueta inicial y la etiqueta de
cierre, por ejemplo: <table> </table>.
Las etiquetas se escriben entre símbolos < > y la de cierre </ >.
Estructura de una página web
Estructura de una página web
Documento HTML con título

<html>
<head>
<title>Mi primera página WEB</title>
</head>
</html>
Documento HTML con contenido
<html>
<head>
<title>Mi primera página WEB</title>
</head>
<body>
Hola a todos, como han deducido por el titulo esta es la
primera pagina web que hago, espero que les
guste. Seguiré mejorando.
</body>
</html>
Documento HTML con encabezados
<h1>Encabezado 1</h1>
<h2>Encabezado 2</h2>
<h3>Encabezado 3</h3>
<h4>Encabezado 4</h4>
<h5>Encabezado 5</h5>
<h6>Encabezado 6</h6>
Uso de etiquetas HTML
• <HR>
Dibujo de líneas horizontales
• <BR>
Escritura de contenido sin tener en cuenta espacios en blanco
• &nbsp;
• <P>
Escritura de párrafos
• Comentarios <!-- Esto es un comentario -->
Entorno
Sitios
Dando formato al texto
Presentación de texto en HTML
• Listas
• Numerada u ordenada <OL> <LI>
• No ordenada <UL> <LI>
Ejemplo de lista numerada (ordenada):
1. Preparar la mochila
1. Sacar los libros de ese día
2. Introducir los libros del día siguiente
2. Vestirme
3. Lavarme los dientes
4. Ir a la escuela

Ejemplo de lista con viñetas (sin ordenar):

• Perro
• Gato
• Aves
o Canario
o Loro
• Hámster
Enlaces hipertexto en HTML
• Página en otro directorio: dir/subdir/arch
• Uso de anclas:
<a name="nombreAncla">Comienzo</a>
• Referencia externa:
<a href="http://www.sitio.com/ancla_en#S">Texto sensible</a>
Enlaces hipertexto en HTML
• Texto: es el texto que mostrará el enlace. Si teníamos un texto
seleccionado, aparecerá ahí.
• Vínculo (href): es la página a la que irá redirigida el enlace, si se
trata de un enlace externo deberás escribirla empezando siempre
por http://. Haz clic sobre el icono de carpeta para buscar los
archivos que existan dentro del sitio. Por defecto Dreamweaver te
creará un enlace relativo al documento.
• Destino (target): la ventana donde se abrirá la página.
• Título (title): se trata de la ayuda contextual del vínculo, que
aparecerá al mantener un instante el cursor sobre el enlace.
Imágenes en HTML

<img src=“image001.gif">

• <IMG>
• La imagen tiene que estar en un archivo separado
• Ejemplos de tipo de archivo: BMP, GIF, JPEG, XPM,
XBM, PNG, TIFF,
Tablas

<Table>
<tr>
<td>&nbsp</td>
<td>&nbsp</td>
<td>Texto dentro de una celda</td>
<td>&nbsp</td>
<td>&nbsp</td>
</tr>
</Table>
Formularios en HTML
• Formularios
• Botones de acción
• Botones de Selección
• Cajas de selección
• Cajas de texto multilínea
Formularios en HTML
Los atributos de un formulario son:
Action: que indica la ubicación del agente procesador;
Method: que determina el método utilizado (Post o Get) para empaquetar el formulario
antes de ser enviado al agente procesador;
Target: que indica dónde serán mostrados los resultados del proceso.
Formularios en HTML
Vemos los atributos que tiene el elemento input nos encontramos los siguientes:

• Type: indica el tipo de campo de entrada de datos que vamos a utilizar. Dependiendo del tipo que indiquemos
obtendremos un resultado u otro. Los valores que puede tener el atributo type son: “text”, “password”, “checkbox”,
“radio”, “submit”, “reset”, “file”, “hidden”, “image” y “button”.
• Id: es el identificador del campo. Es importante ya que será el nombre por el cual podremos identificar, de forma
unívoca, al campo.
• Size: , será el tamaño del campo. Es decir, el número de caracteres que podríamos insertar en el campo de texto.
• Name: es el nombre del campo el cual se enviará desde el formulario al servidor.
• Value: será el valor por defecto que tendrá el campo de texto y que le aparecerá al usuario al cargar el formulario.
Hojas de estilo CSS
Las hojas de estilo representan un avance importante para los diseñadores de páginas
web, al darles un mayor rango de posibilidades para mejorar la apariencia de sus
páginas.
Resuelven estos problemas de apariencia y al mismo tiempo reemplazan al
limitado rango de mecanismos de presentación del HTML. Con las hojas de
estilo es más fácil especificar la cantidad de espacio entre líneas, el sangrado
de las líneas, los colores a utilizar para el texto y el fondo, el tamaño y estilo
de las fuentes, y otros muchos detalles.
Sintaxis hojas de estilo CSS
Su estructura siempre es la siguiente:
El formato a seguir para definir una regla es:
selector { propiedad: valor;} ó selector {propiedad: valor1 valor2 valor3;}
Puede tener varios valores. Aunque como lo habitual es escribir varias propiedades para un selector, se suele
emplear la sintaxis:
selector {
propiedad1: valor;
propiedad2: valor1 valor2;
propiedad3: valor;
propiedad4: valor;
}
Utilizando hojas de estilo CSS
Básicamente podemos utilizar estilos de tres maneras:
• Los estilos declarados en la cabecera (<head>...</head>), entre las etiquetas <style type="text/css">
y </style>.
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
background: url('imagenes/fondo.gif') repeat-x bottom;
}
Utilizando hojas de estilo CSS
• Los estilos declarados en la cabecera (<head>...</head>), entre las etiquetas <style
type="text/css"> y </style>.
<link href="ruta/miestilo.css" rel="stylesheet" type="text/css" />
• Crear un Estilo en línea. Este estilo sólo afecta al elemento en cuestión, ya que lo
que realmente estamos haciendo es definir las propiedades CSS empleando el
atributo style del elemento:
<p style="color: red; font-size: 30px;">Este texto está en rojo y con un tamaño de 30
píxeles</p>
Utilizando hojas de estilo CSS
Una clase es un selector que afectará sólo a aquellas etiquetas que nosotros decidamos, por ejemplo:
.rojo {color: red;}
Ahora podríamos aplicar este estilo sobre cualquier etiqueta que queramos. No hay más que emplear el
atributo class para indicar la clase asignada.
<p class="rojo">Éste es un texto en rojo.</p>
<div class="rojo">
<p>Este texto también es rojo.</p>
<p>Y también éste.</p>
</div>
Utilizando hojas de estilo CSS
También tenemos los selectores de identidad. Estos selectores identifican al elemento
por su ID. Por lo tanto, sólo afectarán a un elemento en concreto de la página, por
ejemplo:
#contenedor {width: 600px;}
Observa que este tipo de selector va precedido por una gato o carácter de número (#),
para aplicarlo usamos:
<div id="contenedor">Este es un bloque que contiene texto</div>
Panel diseñador CSS
Las siguientes secciones están disponibles en la interfaz de
Diseñador de CSS:
• Fuentes (Sources): una colección de archivos CSS asociados al
proyecto
• @Medios (Media): consultas de medios para controlar el
tamaño de la pantalla
• Selectores (Selectors): selectores asociados a la consulta de
medios seleccionada en el panel @Medios
• Propiedades (Propierties): propiedades asociadas con el
selector escogido, con una opción para mostrar solo las
propiedades establecidas
Sitios web responsivos

No existe una resolución que sea dominante en el desarrollo web, por lo que nos deberemos de
basar en las estadísticas y los requerimientos de nuestro proyecto.
Sin embargo a la hora de trabajar con responsive sí existen unas resoluciones “límite” que
establecen la forma de concebir los diseños para los distintos tipos de dispositivos.
• Móvil pequeño: (QVGA) 320x240px
• Móvil: (WVGA) 480x800px
• Tablet: 768x1024 / 768x1280px
• PC pequeño: 1024x768px (960px)
• PC doméstico: Más de 1280px

regresamos …
Sitios web responsivos

Es imposible realizar la prueba de una aplicación web móvil dado que no es posible tener
todos los dispositivos físicamente para realizar pruebas. Existen webs con gran
porcentaje de fiabilidad para realizar dichas pruebas.

http://mobiletest.me/
Sitios web responsivos
Sitios web responsivos

Dado que vamos a trabajar con múltiples dispositivos, resoluciones, etc lo más adecuado
suele ser trabajar siempre que sea posible NO con píxeles o unidades fijas, sino relativas,
como em o rem.
http://www.desarrolloweb.com/articulos/unidades-medida-css-responsive.html
em: Es una unidad de medida relativa que fija el tamaño en referencia al tamaño de tipo
de letra de su contenedor.
rem: Es una unidad de medida relativa que fija su tamaño siempre en referencia al
tamaño del tipo de letra del raíz (html o body) de la página.
Sitios web responsivos

La implementación técnica del Responsive Design se realiza por las media queries.
Se trata de un recurso añadido en CSS3 y que permite cargar unas u otras declaraciones
CSS en función de las características del dispositivo.
Consisten de un @media type y una o mas expresiones las cuales se resuelve como
verdadera o falsa. Los estilos contenidos se aplican si el resultado de la consulta es
verdadera.
Se pueden especificar múltiples media queries y pueden ser verdaderas varias a la vez.
Sitios web responsivos
Por ejemplo:
div { width: 150px; height: 150px }
.caja1 { background-color: purple}
.caja2 { background-color: blue }
/* Media query */
@media (min-width: 600px) {
.caja1 { background-color: green }
.caja2 { background-color: orange }
} que o igual".
Las funciones multimedia es como se conoce a
las distintas características o propiedades que
podemos consultar para aplicar unos estilos u
otros.
Las más utilizadas son las relacionadas con las
dimensiones de visualización de la página para
adaptar el contenido al espacio visible.
La mayoría de las funciones multimedia
pueden ser precedidas por "min-" o "max-"
para expresar "mayor que" o igual o "menor
Sitios web responsivos

Estas son algunas de las consultas más útiles en el diseño responsive:

height, device-height, width, device-width, orientation, aspect-ratio, device-aspect-
ratio, color, color-index, monochrome, resolution, scan, grid, monochrome

http://www.w3.org/TR/css3-mediaqueries/
JavaScript

JavaScript es un lenguaje de scripting interpretado basado en el navegador que ejecuta el

código del lado del cliente.
Esto significa que cualquier código que se escribe en JavaScript se entrega desde el
servidor junto a las páginas web, y todo el código se ejecuta desde el navegador del
usuario (en el dispositivo del usuario) en lugar de hacerlo directamente en el servidor
donde se encuentra la página web.
Les proporciona a las páginas web, efectos y funciones complementarias a las
consideradas como estándar HTML Este tipo de lenguaje de programación, con
frecuencia son empleados en los sitios web como son la validación de datos o algunos
efectos visuales.
JavaScript agregando el código

La última norma de HTML disponible en

http://www.w3.org/TR/html401/interact/scripts.html
recomiendo utilizar:
<script type="text/javascript">
</script>
Estas etiquetas es muy recomendable colocarlas dentro de la etiqueta <head></head> ya
que esta sección se carga antes que el resto de la página.
JavaScript elementos

• Variables
• Operadores
• Expresiones
• Declaraciones
• Objetos
• Los objetos son muy importantes, porque gracias a unos objetos predefinidos del lenguaje podemos
acceder a las diferentes características de una página HTML. Esto se llama "Document Object Model“
conocido como DOM.

• Funciones y métodos
JavaScript eventos

Los eventos suceden a tres niveles:

•A nivel del documento HTML
•A nivel de un formulario individual
•A nivel de un elemento de un formulario
El evento es gestionado por una sección de código en JavaScript (Gestor de Eventos)
Declaración de Gestores de Eventos: similar a los atributos en HTML
JavaScript eventos

<BODY onLoad="cargarfuncion()" onUnload="descargarfuncion()">

<FORM name="nombre_del_formulario" ...

onSubmit="función_o_sentencia">

<INPUT type="button" name="mycheck" value="HA!" onClick= "alert(‘Te he dicho que no

me aprietes’)">
JavaScript eventos

Evento Ocurre Cuando Gestor

blur El usuario quita el cursor de un elemento de formulario onBlur

click El usuario clica un link o un elemento de formulario onClick

change El usuario cambia el valor de un texto, un área de texto o onChange

selecciona un elemento.
focus El usuario coloca el cursor en un elemento de formulario. onFocus

load El usuario carga una página en el Navegador onLoad

Mouseover El usuario mueve el ratón sobre un link onMouseOver

Select El usuario selecciona un campo del elemento de un onSelect

formulario
Submit Se envía un formulario onSubmit

Unload Se descarga la página onUnload

JavaScript clases

• Clases Predefinidas
• Clase String: Cada vez que se asigna una cadena de caracteres a una variable, se crea un objeto de la clase
String
• Clase Math: Se usa para efectuar cálculos matemáticos
• Clase Date: Para el manejo de fechas y horas

• Clases del Browser o Navegador: Tienen que ver con la navegación

• Clases del Documento HTML: Están asociadas con cualquier elemento de una página Web
(link, ancla, formulario)
• Clases definidas por el usuario
JavaScript clases
jQuery

JQuery es una librería de JavaScript. Esta librería de código abierto, simplifica la tarea de
programar en JavaScript y permite agregar interactividad a un sitio web sin tener
conocimientos del lenguaje.
Basados en esta librería, existe una infinita cantidad de plugins (gratis y pagos) creados
por desarrolladores de todo el mundo. Estos plugins resuelven situaciones concretas
dentro del diseño de un sitio, por ejemplo: un menú responsive, una galería de fotos, un
carrousel de imágenes, un slide, un header que cambia de tamaño, el deslizamiento del
scroll al hacer clic en un botón (anclas HTML), la transición entre páginas y miles de
efectos más.
jQuery como implementarlo

Todos los plugins de JQuery necesitan la librería de JQuery para funcionar. La librería es un archivo
.js que se puede descargar desde el sitio oficial: https://jquery.com/ colocar en una carpeta js y luego
vincular con una etiqueta <script>, por ejemplo:
<script src="js/jquery-3.2.1.min.js"></script>
Otra forma de vincular la librería es utilizando el servidor de Google. De esta manera no necesitamos
descargarla ni subirla a nuestro servidor. En ese caso, el código es el mismo pero con ruta absoluta:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
La página donde Google ofrece los vínculos a diferentes recursos es la siguiente:
https://developers.google.com/speed/libraries/#jquery
jQuery la función

La función es un bloque de código JavaScript que contiene instrucciones que necesita el

plugin para ejecutarse. Se escribe dentro del body entre las etiquetas <script></script>.
Puede ir inmediatamente debajo de la estructura HTML del plugin o antes de que cierre la
etiqueta body. Si es posible es mejor colocarla hacia el final del documento para que la
descarga de la página sea más rápida.
PHP

PHP (acrónimo recursivo de PHP: Hypertext Preprocessor) es un lenguaje de código

abierto que se ejecuta en el servidor especialmente adecuado para el desarrollo web y
que puede ser incrustado en HTML.
El código de PHP está encerrado entre las etiquetas especiales de comienzo y final <?php
ó <? y ?> que permiten entrar y salir del "modo PHP".
Lo que distingue a PHP es que el código es ejecutado en el servidor, generando HTML y
enviándolo al cliente. El cliente recibirá el resultado de ejecutar el script, aunque no sabrá
el código que lo genero.
PHP

• PHP es sensible a mayúsculas y minúsculas.

• Las variables inician con $.
• No es necesario declarar un tipo para la variable, aún cuando PHP soporta tipos de datos.
• Podemos incluir clases o archivos externos al script actual.
• Ofrece funciones especificas como puede ser para el acceso a bases de datos de MySQL.
• El código puede estar incrustado en HTML.
• Ofrece colecciones (arreglos) para el manejo de diferente datos.
PHP
MySQL

Es un sistema de gestión de bases de datos relacional desarrollado bajo licencia dual:

licencia pública general y licencia comercial por Oracle Corporation, está considerado
como la base datos de código abierto más popular y uno de las más populares en general
junto a Oracle y Microsoft SQL Server; especialmente para entornos de desarrollo web.
Basado en el lenguaje de consulta estructurado SQL (Structured Query Language) puede
ser utilizado por desarrolladores bajo licencia pública, pero las empresas deben pagar la
licencia correspondiente.
Este gestor puede funcionar sobre las plataformas más populares como son Microsoft
Windows, Linux y Mac Os; así como en otras derivadas de estas o de otros proveedores.
MySQL

Se maneja en línea de comandos basado en sentencias SQL, las instrucciones que

encontramos en MySQL para el manejo de datos es:
• DDL
• Create, Alter, Drop, Truncate

• DML
• Insert, Delete, Update, Select
MySQL - PHPMyAdmin

Es una herramienta desarrollado en PHP para administrar bases de datos MySQL desde
un entorno gráfico, la cuál se distribuye con la mayoría de paquetes de servidores de
software libre (apache, PHP, MySQL). Además de encontrarla en los paneles de
administración de los sitios que ofrecen hospedaje y soporte para bases de datos de
MySQL.
MySQL - PHPMyAdmin
PHP y MySQL

Una combinación común en aplicaciones web es el lenguaje del lado del servidor PHP y el
gestor de datos MySQL, existiendo actualmente aplicaciones muy potente como es
prestashop, wordpress, Moodle, entre otras hechas utilizando estas dos tecnologías.
PHP y MySQL

El acceso a una base de datos se hace utilizando consultas SQL, el resultado obtenido es
desplegado al usuario mediante páginas HTML.
Se puede mejorar el diseño de las páginas que muestran los datos utilizando CSS.
Finalmente se puede mejorar la respuesta de las páginas utilizando Jquery para actualizar
desde el servidor sin cargar la página o actualizarla.
PHP y MySQL

La forma más básica de acceso a una base de datos desde PHP consiste en las siguientes
acciones:
1. Se conecta al servidor de base de datos.
2. Se selecciona una base de datos.
3. Se ejecuta una consulta ya sea de acción o selección.
4. Se cierra la conexión al servidor de base de datos.
PHP y MySQL

Existen dos versiones para poder conectarse a MySQL desde PHP que son mysql y mysqli, las diferencias
son las siguientes:
1. MySQL es la versión antigua e historica que se da para conectar a la base de datos, en cambio MySQLi es
la nueva versión de la anterior dicha MySQL , orientada a objetos (POO).
2.Si se debe utilizar para un mayor rendimiento, se recomienda MySQLi puesto a que tiene mayor opciones
de optimizar la velocidad.
3. Ahora hay que tener un objetivo claro, en cuanto a las funciones mysql_xx() y mysqli_xx() , son las
siguientes:
a) Las funciones mysql_xxx() (www.php.net/mysql) se usan para acceder a Mysql versiones 4.0 e inferiores desde PHP versiones 4.x o 5.x e
inferiores.
b) Las funciones mysqli_xxx() (www.php.net/mysqli) las puedes usar sólo en PHP versión 5.x en adelante y se usan para conectarte a Mysql 4.1
en adelante (hasta 5.x).
PHP y MySQL - Conexión
PHP y MySQL - Consultas