1. Tema 1.- Introducción a
la programación Web
CFGM Sistemas
Microinformáticos y Redes
Programación Web

2. 1. Entorno

Partes de una conexión web:
Cliente  usuario utiliza navegador web
Servidor  donde residen las páginas web

3. 2. Tecnologías




Navegador web: aplicación que opera a través de
Internet.
HTML: lenguaje de marcado predominante para la
elaboración de páginas web.
CSS: lenguaje usado para definir la presentación de
un documento estructurado.
Javascript: lenguaje de programación interpretado.
Se utiliza principalmente para permitir mejoras en la
interfaz de usuario y páginas web dinámicas.

4. 


Framework: conjunto de bibliotecas y
programas que permiten realizar aplicaciones
web en Python de manera más sencilla
Python, PHP, ASP, … : Lenguajes de
programación del lado del servidor.
Apache: Servidor de páginas web más
utilizado (Linux).

5. Peticiones de Páginas Web

8. 3. Herramientas para el
desarrollo web
Para realizar páginas web básicas basta con un editor
de textos y un navegador web.
Tipos de editores
 Editores de texto (texto plano):



Simples. Ej. Bloc de notas
Dedicados a la programación. Con funciones útiles, como
resaltar palabras o proporcionar listado de etiquetas, …
Aplicaciones WYSIWYG:



Programas especializados que trabajan de forma gráfica.
No necesitas conocer a fondo la sintaxis.
Ej. Macromedia Dreamweaver, NVU, Ms. FrontPage,…

9. 4. Consideraciones iniciales

Planificar el trabajo



Importante planificar el trabajo.
Elaborar un esquema con los elementos que se
van a incluir (imágenes, sonidos, enlaces, etc.).
Leyes y normativas



No podemos incluir cualquier elemento.
Propiedad intelectual y datos personales.
Pedir permiso o utilizar recursos gratuitos (con
licencia Creative Commons, GPL, …)

10. Rendimiento de las páginas web
Visualización y descarga
 Resolución de pantalla (nº píxeles)


Servidores y ordenadores personales


Resolución muy alta –> página muy grande.
Muchos applets (programas) –> más lenta.
Peso de la página

Cuantos menos “pesen” los elementos menos
tardará en llegar hasta el cliente.

11. 5. Elementos gráficos y
multimedia

Imágenes

Formatos recomendados para web




JPEG – fotografías / 16 m. de colores / compresión.
GIF – gráficos lineales / 256 colores / animaciones.
PNG – mejora GIF pero sin animaciones.
Sonidos y vídeos



Tamaño: muy “pesados”  comprimidos.
Extensiones o plugin para reproducirlos.
Utilizar enlaces o colocarlos al final del código.

12. Prácticas
1.
2.
3.
4.
5.
6.
7.
Crea un banner online con tu nombre. (indica la URL e insértalo)
Busca algunas aplicaciones para la creación de GIF animados e
indica sus características. Elige la que más te guste y crea uno.
Busca alguna página en la que puedas encontrar música libre de
royalties y descárgate algunos archivos (indica la URL) ¿Cuáles son
sus condiciones de uso?
Busca alguna página con imágenes gratuitas (indica la URL) y
descárgate una (insértala en el documento).
Utilizando alguna herramienta de tratamiento de imágenes (p.e.
GIMP) abre una foto y guárdala en formato JPG y GIF. ¿qué
diferencias aprecias? Haz lo mismo con un dibujo lineal y vuelve a
comprobar qué ha cambiado. (inserta las imágenes y explica que
ocurre en cada caso)
Busca en un sitio para redimensionar las imágenes online.
Redimensiona una imagen, indica el tamaño inicial y el resultante.
Haz un cuadro resumen con los formatos de imágenes, audio y vídeo
más importantes e indica algunas de las características de cada uno
(colores, uso adecuado, tamaño, calidad, …)