Tema 1.- Introducción a la programación Web

CFGM Sistemas Microinformáticos y Redes

Programación Web

1. Entorno Partes de una conexión web:

Cliente usuario utiliza navegador web

Servidor donde residen las páginas web

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.

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).

Peticiones de Páginas Web

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,…

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, …)

Rendimiento de las páginas web

Visualización y descarga Resolución de pantalla (nº píxeles)

Resolución muy alta –> página muy grande.

Servidores y ordenadores personales Muchos applets (programas) –> más lenta.

Peso de la página Cuantos menos “pesen” los elementos menos

tardará en llegar hasta el cliente.

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.

Prácticas1. Crea un banner online con tu nombre. (indica la URL e insértalo)2. 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.3. 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?

4. Busca alguna página con imágenes gratuitas (indica la URL) y descárgate una (insértala en el documento).

5. 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)

6. Busca en un sitio para redimensionar las imágenes online. Redimensiona una imagen, indica el tamaño inicial y el resultante.

7. 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, …)