Tema 1
Transcript of Tema 1
![Page 1: Tema 1](https://reader035.fdocumento.com/reader035/viewer/2022071900/55c02c72bb61eb2c578b476a/html5/thumbnails/1.jpg)
Tema 1.- Introducción a la programación Web
CFGM Sistemas Microinformáticos y Redes
Programación Web
![Page 2: Tema 1](https://reader035.fdocumento.com/reader035/viewer/2022071900/55c02c72bb61eb2c578b476a/html5/thumbnails/2.jpg)
1. Entorno Partes de una conexión web:
Cliente usuario utiliza navegador web
Servidor donde residen las páginas web
![Page 3: Tema 1](https://reader035.fdocumento.com/reader035/viewer/2022071900/55c02c72bb61eb2c578b476a/html5/thumbnails/3.jpg)
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.
![Page 4: Tema 1](https://reader035.fdocumento.com/reader035/viewer/2022071900/55c02c72bb61eb2c578b476a/html5/thumbnails/4.jpg)
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).
![Page 5: Tema 1](https://reader035.fdocumento.com/reader035/viewer/2022071900/55c02c72bb61eb2c578b476a/html5/thumbnails/5.jpg)
Peticiones de Páginas Web
![Page 6: Tema 1](https://reader035.fdocumento.com/reader035/viewer/2022071900/55c02c72bb61eb2c578b476a/html5/thumbnails/6.jpg)
![Page 7: Tema 1](https://reader035.fdocumento.com/reader035/viewer/2022071900/55c02c72bb61eb2c578b476a/html5/thumbnails/7.jpg)
![Page 8: Tema 1](https://reader035.fdocumento.com/reader035/viewer/2022071900/55c02c72bb61eb2c578b476a/html5/thumbnails/8.jpg)
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,…
![Page 9: Tema 1](https://reader035.fdocumento.com/reader035/viewer/2022071900/55c02c72bb61eb2c578b476a/html5/thumbnails/9.jpg)
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, …)
![Page 10: Tema 1](https://reader035.fdocumento.com/reader035/viewer/2022071900/55c02c72bb61eb2c578b476a/html5/thumbnails/10.jpg)
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.
![Page 11: Tema 1](https://reader035.fdocumento.com/reader035/viewer/2022071900/55c02c72bb61eb2c578b476a/html5/thumbnails/11.jpg)
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.
![Page 12: Tema 1](https://reader035.fdocumento.com/reader035/viewer/2022071900/55c02c72bb61eb2c578b476a/html5/thumbnails/12.jpg)
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, …)