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