En el mundo del Internet existen muchas tecnologías que se pueden emplear para programar los clientes web, las más extendidas y se pueden considerar estándar son : HyperText Markup Language (HTML) y JavaScript

1. DESARROLLO DE
APLICACIONES WEB
Wilson Alexis Márquez Coca

2. INTRODUCCIÓN
En el mundo del Internet
existen muchas tecnologías
que se pueden emplear para
programar los clientes web,
las más extendidas y se
pueden considerar estándar
son : HyperText Markup
Language (HTML) y JavaScript
Un buen sitio web tiene que ser:
• Eficacia de las herramientas de
navegación
• Simplicidad en el diseño visual y
en el objetivo
• Innovador
• Intuitivo

3. • Conocer las tecnologías disponibles para el desarrollo de aplicaciones
web cumpliendo estándares actuales de un entorno en constante
cambio.
OBJETIVO

4. • Una red de ordenadores mundial
Internet:
• Un conjunto de protocolos, tecnologías y convenciones desarrolladas sobre
Internet
World Wide Web:
• Documento en formato HTML, con hiperenlaces, que se puede descargar
desde un servidor web y se visualiza en un navegador web
Página web:
• Conjunto de páginas web, con contenido relacionado, identificados con la
misma URL
Sitio web:
• Aplicación informática completa con acceso vía web
Aplicación web:
TECNOLOGÍAS BASE DE UNA APLICACIÓN WEB

5. • Internet es un conjunto descentralizado
de redes de comunicación
interconectadas que utilizan protocolos
TCP/IP
• Funciona como una red lógica única, de
alcance mundial, aunque esté formada
por multitud de redes físicas
heterogéneas
INTERNET

6. • WWW, o “la Web”
• La web es un conjunto de protocolos, estándares y tecnologías,
basadas en Internet, diseñado originalmente para la consulta remota
de información en archivos de hipertexto
WORLD WIDE WEB

7. Una página web es un documento electrónico
adaptado a la web
Está diseñada para ser visualizado en un
navegador web, que la descargará de un
servidor web
Contiene texto, gráficos y contenido multimedia
Contiene enlaces integrados en el texto que permiten al usuario navegar o acceder a
diferentes páginas web relacionadas entre sí.
PAGINA WEB

8. Un navegador web que visualiza las páginas web que descarga desde un servidor web
Las páginas web tienen formato HTML y CSS,
tienen enlaces a otras páginas y a
contenido multimédia (imágenes, vídeos, audio)
El protocolo con el que se comunican el cliente y
el servidor es el Hiper Text Transfer Protocol (HTTP)
Las páginas se identifican con un nombre único
llamado coloquialmente dirección web (URL)
PAGINA WEB

9. Un sitio web es una colección de páginas
web relacionadas entre sí
El conjunto de páginas web que forman un
sitio web suelen compartir la primera parte
de la dirección web (el dominio)
https://intsuperior.edu.ec: Sitio web del
Instituto Nelson Torres
http://es.wikipedia.org: Sitio web de la
wikipedia en Español
SITIO WEB

10. SITIO WEB
Web corporativas de empresas
Blogs, redes sociales
Páginas personales
Buscadores
Sitios de noticias
Enciclopedias

11. Los sitios web eran conjuntos de páginas web en forma de ficheros HTML con
navegación secuencial
La edición de sitios web se realizaba con herramientas similares a la edición de
documentos
Las páginas empezaron a ser más dinámicas similares a pequeños programas
que se ejecutaban cada vez que un usuario pedía una página
contador de visitas
fecha actual
cambiar la imagen de cabecera
con lenguajes de script como PERL y PHP
los cambios serían cada vez más profundos y las páginas web se convertirían en
completas aplicaciones web
Aplicaciones Web

12. Una aplicación web es aquella aplicación que los usuarios pueden
utilizar accediendo a un servidor web a través de Internet mediante un
navegador
Es una aplicación software que se implementa para que su interfaz de
usuario se utilice desde un navegador web
• Las aplicaciones web son muy populares
• El navegador web como cliente ligero
• Independencia del sistema operativo
• Facilidad para actualizar y mantener aplicaciones web sin distribuir e
instalar software a miles de usuarios potenciales
Aplicaciones Web

13. La web sigue una arquitectura
cliente-servidor
• El navegador web actúa como cliente
• El servidor web actúa como servidor
• La comunicación se establece usando el
protocol http
NAVEGADORES Y SERVIDORES WEB

14. Un navegador web es una aplicación que se instala en el sistema que utiliza el usuario
El usuario escribe una dirección web. La dirección contiene el nombre del servidor web y el nombre del recurso que se
solicita
El navegador hace una petición al servidor y solicita el recurso
El navegador descarga el recurso y lo visualiza
Si el recurso en una página HTML, además de visualizar su contenido, descarga recursos adicionales como imágenes,
estilos, etc. y los visualiza integrados en la página
NAVEGADORES WEB

15. Software
Alberga sitios web estáticos y los sirve
con el protocolo http a los
navegadores web
Ejecuta aplicaciones web que el
usuario utiliza desde un navegador
web (usando http)
SERVIDORES WEB
Hardware
Servidor en el que se ejecuta el software
de servidor web.
Generalmente dispone de otros servicios
adicionales como un sistema gestor de
base de datos

16. SERVIDORES WEB

17. Existen varios tipos de dispositivos móviles, pero los más populares son los
teléfonos móviles y las tabletas
Estos dispositivos suelen disponer de navegadores
web completos, por lo que pueden acceder a cualquier
aplicación web
Debido a sus características (pequeña pantalla y
control táctil) es recomendable que exista una versión adaptada de la aplicación
web
APLICACIONES WEB EN DISPOSITIVOS
MÓVILES

18. • Responsive web design
Técnicas y herramientas que permiten
que los elementos de la web se
adapten al tamaño del dispositivo y su
forma de interacción
El contenido puede ser diferente
porque el usuario tiene intenciones
diferentes cuando accede a una web
desde el móvil o desde el PC
DISEÑO WEB ADAPTABLE

19. ❑ Material básico
❑ Un editor de texto
cualquiera (ej. el bloc de
notas)
❑ Un navegador cualquiera
Material necesario para crear una
página WEB
❑ Material avanzado
❑ Un editor de texto profesional → Notepad++ ó XML Spy
❑ Un editor de gráficos / retoque fotofráfico → Photoshop ó
GIMP
❑ Editores específicos de páginas WEB
❑Microsoft FrontPage
❑Macromedia DreamWeaver
❑NVU (gratuito y de código libre, basado en el núcleo
Firefox)
❑ Plugins de Firefox 3.X pensados para el desarrollo web
❑ Un servidor WEB como Apache
❑ Varios navegadores y en varias versiones (para hacer
pruebas)

20. ❑HTML es el lenguaje con el que se definen páginas WEB
❑Es texto plano
❑Se trata de un conjunto de etiquetas que sirven para indicar que
el texto dentro de la etiqueta hay que tratarlo de manera
especial
❑Ej: <b>Texto en negrita</b>
❑Ha evolucionado a lo largo del tiempo
❑Se ha llevado a cabo un proceso de estandarización
❑Word Wide Web Consortium: http://www.w3.org
Pincelada sobre el HTML

21. ❑ Las etiquetas están estructuradas (en un árbol)
❑ Hay dos secciones claramente diferenciadas (cabecera y cuerpo)
❑ Las etiquetas van pareadas
<html>
<head>
<title>Título de la página</title>
<script type="text/javascript">...</script>
</head>
<body>
<h1>Encabezado</h1>
<p>Podemos crear un párrafo <b>resaltando</b> parte
de sus contenidos.</p>
</body>
</html>
Ejemplo de página WEB simple

22. ❑ Si planeamos un sitio WEB grande, es útil crear plantillas que podamos utilizar
como partida para crear cada una de las secciones de nuestro sitio WEB
❑ Podemos definir varias plantillas para distintos tipos de páginas
❑ Consejos
❑ No utilizar espacios en blanco o acentos en los nombres de ficheros
❑ Hay que tener cuidado con las mayúsculas y minúsculas: los servidores no son
siempre Windows!!!
❑ Asegurarse que nombre tiene que tener el documento por defecto (normalmente index.html,
o index.htm)
❑ Utilizar siempre la misma extensión para los archivos del proyecto (.htm, .html, .xhtml) pero
no mezclarlas
❑Advertencia: La extensión no indica el tipo de contenido
Construir páginas WEB y sitios WEB

23. ❑ Formatos de imágenes
❑ Los formatos más habituales son JPG, GIF y PNG
❑ Lo ideal sería utilizar JPG y PNG (sin patente)
❑ Tratamiento de las imágenes
❑ No utilizar imágenes que no quepan en la pantalla, y si lo hacemos utilizar un
programa de edición para hacerlas más pequeñas
❑Por defecto el navegador es capaz de escalarla automáticamente pero se transmite
por la red el documento completo !!!
❑ Es recomendable estructurar los recursos e imágenes en directorios para su
fácil acceso.
❑ Al estructurar de manera correcta los contenidos se simplifica la tarea de subir los archivos
al servidor.
Imágenes y otros recursos

24. • Document Object Model (en español modelo en objetos para la
representación de documentos)
• Interfaz de programación estandarizada para la estructuración de
documentos HTML y XML.
• El objetivo es facilitar a los programadores el añadir, eliminar o editar
contenido, atributos y estilos.
• Sirve como un enlace entre lenguajes de programación como
JavaScript y el documento web
• Representación del documento en una estructura de árbol en la que
cada nodo es un objeto independiente y controlable.
Document Object Model (DOM)

25. • El ejemplo de Document Object Model
EJEMPLO

26. • El carácter “menor que” <
• Una palabra o carácter que determina qué etiqueta se está
escribiendo
• Cualquier número de atributos HTML que se quiera usar, escritos de
la forma nombre =”valor”
• El carácter “mayor que” >
ETIQUETAS
<head>

27. • Etiqueta de apertura: Se utiliza para indicar dónde empieza
un elemento. Está envuelta en corchete de apertura y cierre.
Por ejemplo puedes usar la etiqueta de inicio <p> para crear
un párrafo.
• Contenido: El contenido es el resultado que ve la audiencia.
• Etiqueta de cierre: Es lo mismo que la etiqueta de apertura
pero con una barra inclinada delante del nombre del
elemento. Es decir, </p> para finalizar un párrafo.
ETIQUETAS

28. ETIQUETAS
• <!DOCTYPE html>
• <html>
• <head>
• <meta name="viewport" content="width=device-width,initial-scale=1">
• <link href="style.css" rel="stylesheet">
• <title>Título de la página</title>
• </head>
• <body>
• <p><strong>Hola Mundo</strong></p>
• <div><img src=“imagen.jpg"></div>
• </body>
• </html>