3º Unidad Didáctica Editores y Páginas WEB Eduard Lara 1
ÍNDICE 3.1 Editores para el desarrollo web Código Texto WYSIWYG (What You See Is What You Get) Software Propietario vs Software Libre Estándar de facto: Complementos (plugins) de Mozilla Firefox 3.2 Consideraciones iniciales 2
RECURSOS WEB Editor web permite al desarrollador escribir en el lenguaje de programación web Navegador web permite comprobar el resultado del documento que ha creado. Editores de Texto Navegadores Windows Bloc de notas Internet Explorer, Firefox, Chrome Linux Emacs, Gedit, Xedit Firefox 3
TIPOS EDITORES WEB Editores de código Permiten escribir y modificar archivos digitales compuestos por texto plano. Editores de texto simple Procesadores de texto Editores dedicados a la creación de páginas web Editores visuales (WYSIWYG) Permiten la edición de la visualización de la página web 4
EDITORES DE CÓDIGO (TEXTO) Editores de texto simple (Bloc de notas). No incorpora códigos de control que puedan «confundir» al navegador Procesadores de texto (word, wordpad). No se utilizan porque introducen caracteres extraños a la programación web. Editores dedicados (como Ultraedit). Resaltan palabras reservadas, Proporcionan listados de etiquetas, Introducen instrucciones de forma automática 5
EDITORES DE CÓDIGO (TEXTO) Código HTML puro y duro. 6
EDITORES VISUALES (WYSIWYG) What You See Is What You Get = Lo que ves, es lo que obtienes. Son programas especializados en los que se trabaja de forma gràfica. El desarrollador trabaja directamente con los elementos de la pagina web. La aplicación es la encargada de componer la estructura de código en el lenguaje elegido en función de realizaciones gráficas. El desarrollador no necesita conocer a fondo la sintaxis del lenguaje determinado. 7
EDITORES VISUALES (WYSIWYG) Código HTML puro y duro. Interpretación código HTML 8
COMPARATIVA Editor texto WYSIWYG Facilidad de aprendizaje Construcción de código Comodidad Dominio de la técnica Mas lento y complicado Lo construye el propio programador Necesita activar el navegador para ver el resultado Mejor opción para aprender y dominar el lenguaje Mas sencillo y rápido Lo construye el programa. Puede incluir código mas complejo Mas cómoda. Permiten comprobar el resultado al instante Pierde la practica de la programación 9
APRENDIZAJE IDEAL Conocer a fondo el lenguaje con el que se trabaja (con lo cual se puede trabajar con editores de texto sin problemas) Aprovechar las facilidades que aporta al desarrollador el uso de aplicaciones WYSIWYG (con la mejora en el rendimiento que ello conlleva). 10
SOFTWARE PROPIETARIO El software comercial es el software, libre o no, que es comercializado, es decir, que las compañías que lo producen, cobran dinero por el producto, su distribución o soporte. Por ejemplo la licencia del Dreamweaver: http://www.adobe.com/products/eula/tools/ 11
EDITORES PROPIETARIOS First Page 2006 1st Page 2000 2.0 is the tool that lets you create powerful, great looking websites faster, easier and on-time. AceHTML http://www.visicommedia.com/acehtml/ http://www.evrsoft.com/1stpage2.shtml 12
EL STANDARD DE FACTO O NO* 13
SOFTWARE LIBRE VS FREEWARE Free Software (software libre): Libertad para ejecutar, copiar, distribuir, estudiar, cambiar y mejorar el software. Libre no significa no comercial Freeware (Software gratuito): Distribución sin costo y por tiempo ilimitado. No se puede modificar la aplicación (el código fuente), ni venderla. Hay que dar cuenta de su autor. Shareware: La finalidad es lograr que un usuario pague, luego de un tiempo "trial" limitado y con la finalidad de habilitar toda la funcionalidad. Se incluye el código fuente o no. 14
SOFTWARE LIBRE Basado en 4 libertades de usuarios del software: La libertad de usar el programa, con cualquier propósito (libertad 0). La libertad de estudiar el funcionamiento del programa, y adaptarlo a las necesidades (libertad 1). Código abierto La libertad de distribuir copias, con lo que puede ayudar a otros (libertad 2). La libertad de mejorar el programa y hacer públicas las mejoras, de modo que toda la comunidad se beneficie (libertad 3). Código abierto 15
EDITORES WEB (SOFTWARE LIBRE) Amaya es un proyecto de código abierto liderado por W3C http://www.cdlibre.org/consultar/catalog o/ Desarrollo-Web_Editores-web.html 16
EDITORES WEB (SOFTWARE LIBRE) Nvu (pronunciado N-view) Un completo sistema de desarrollo web para Linux usuarios así como para usuarios Windows y Macintosh, que rivaliza con programas como FrontPage y Dreamweaver. http://nvudev.com 17
PLUGINS DE LOS NAVEGADORES Adobe Reader Adobe Flash Java Quicktime Real Player Shockwave Windows Media Player 18
COMPLEMENTO PARA FIREFOX: FIREBUG 19
MONITORIZACIÓN RED CON FIREBUG 20
CONSIDERACIONES INICIALES A.Planificación del trabajo Tema de la página Web Elaboración de un boceto de la página Web. Criterios almacenamiento archivos en el servidor. B. Leyes y normativas C. Rendimiento de las paginas web 21
PLANIFICACIÓN DEL TRABAJO 1) Indicar el tema sobre que versará la página web. 2) Elaborar un esquema o boceto de la página web. El boceto contendrá la distribución de los contenidos en la página web. Enlace1 Enlace2 Menu FOTO Texto Descriptivo Enlace pag 1 Enlace3 Enlace 4 FOTO Texto Descriptivo Enlace pag 2 22
PLANIFICACIÓN DEL TRABAJO El boceto contendrá los siguientes listados Listado de elementos necesarios (textos, imágenes, sonidos, enlaces, logos, etc.) para dotar de contenido a la página. Enumeración de herramientas. Contar con Herramienta Flash si se decide hacer una animación. Hoja de ruta. Guía con los pasos a desarrollar a lo largo de todo el proceso. En el futuro, se irán haciendo modificaciones respecto al diseño original. Ejemplos de bocetos de páginas web en www.coolhomepages.com o www.pixelmakers.com.br 23
PLANIFICACIÓN DEL TRABAJO 3) Criterios almacenamiento en el servidor. a) Nombre que se da a los archivos - Evitar uso caracteres especiales. No utilizar acentos, cedillas (ç), letra ñ, espacios en blanco, etc.) - Utilizar minúsculas. Algunos S.O. diferencian entre mayúsculas y minúsculas. Los programadores recomiendan programar en minúsculas - La pagina índex. 1º página que buscan los servidores cuando no se indica ningún fichero. Llamar así a nuestra página principal, con la extensión acorde al lenguaje utilizado:.html,.php 24
PLANIFICACIÓN DEL TRABAJO b) Organizar los archivos Un problema habitual es que la página web no cargue correctamente los componentes debido a que no se encuentra donde dice el documento-web. Es necesario organizar los elementos de la página web cuidadosamente. - Crear una carpeta raíz en la cual estarán las páginas web que se vayan desarrollando -Crear diferentes carpetas por cada tipo de elemento que lleve cada pagina: imágenes, vídeos, sonidos, animaciones, etc. 25
PLANIFICACIÓN DEL TRABAJO mi_sitio_web/ mi_sitio_web/index.html mi_sitio_web/pagina1.html mi_sitio_web/pagina2.html mi_sitio_web/imágenes mi_sitio_web/imágenes/imagen1.jpg mi_sitio_web/imágenes/imagen2.jpg mi_sitio_web/videos mi_sitio_web/videos/video1.avi mi_sitio_web/videos/video2.avi mi_sitio_web/sonidos mi_sitio_web/sonidos/sonidos1.wav 26
PLANIFICACIÓN DEL TRABAJO Direccionamiento de elementos en una pagina Direccionamiento absoluto. http://maquina.dominio/sitio_web/multi/image.jpg Al mover el directorio de una página web al servidor y cambiar el path, los elementos pueden no ser encontrados si se utiliza direccionamiento absoluto. Direccionamiento relativo.../multi/image.jpg Es la dirección relativa del elemento respecto a la página que lo llama. Método más recomendable 27
LEYES Y NORMATIVAS Se puede incluir desde el punto de vista legal cualquier elemento en una página web? La respuesta es no. Toda creación o invento de Internet (diseño web, imagen, texto) tiene un autor, y su uso esta sometido a ciertas restricciones. El autor es acreedor a los derechos de la propiedad intelectual, que protegen su obra Los derechos existen desde el mismo momento de la creación de la obra (no es necesario inscribirla en un registro. 28
LEYES Y NORMATIVAS Es necesario pedir permiso (preferiblemente por escrito) o asegurarse de que este ha sido concedido de antemano mediante una licencia Creative Commons o GNU GPL. Proveedores elementos Web gratuitos Creative Commons (http://creativecommons.org) Internet Archive (www.archive.org) Stock.xchng (www.sxc.hu) ImageAfter (www.imageafter.com) A1 Free Sound Effects (www.alfreesoundeffects.com) Bravenet (resources.bravenet.com) Free Flash Intro's (www.freeflashintros.com) Flash Fair (www.flashfair.com) 29
RENDIMIENTO PÁGINAS WEB Cuestiones relacionadas con la visualización y descarga de páginas web Navegadores web Resolución de pantalla Servidores web Peso de la página 30
RENDIMIENTO PÁGINAS WEB Navegadores web Navegadores con diferentes versiones, pueden soportar diferentes funcionalidades. Las primeras versiones de los mismos eran, lógicamente, menos avanzadas que las actuales. Los nuevos navegadores solucionan aquellas deficiencias que provocaban problemas de seguridad en versiones anteriores. 31
RENDIMIENTO PÁGINAS WEB Resolución pantalla La resolución de pantalla es el número de píxeles (unidad en la que se descompone una imagen digital) que se muestran en la misma. Ejemplo: Resolución de 1024x768 píxeles, 1024 píxeles de ancho por 768 de alto. Si un monitor está configurado con una resolución mas baja, tendrá que hacer un uso excesivo de las barras de desplazamiento para ver una página web Se suele recomendar utilizar resoluciones de 800x600 32
RENDIMIENTO PÁGINAS WEB Servidores web y ordenadores personales En algunos ordenadores personales la inclusión de algunos elementos en los documentos web pueden causar problemas (applets y objetos multimedia pueden ralentizar la navegación. En otros casos la lentitud en la carga de una página se puede deber a la escasa potencia de los servidores. Ejemplo: Páginas realizadas con lenguajes de script o de guiones de servidor (PHP o ASP). 33
RENDIMIENTO PÁGINAS WEB Peso de la página Cuantos menos elementos de gran tamaño se hayan añadido a la página, menos tardará en ser descargada por el cliente. Si se incluyen archivos grandes (Megabytes), la página tardará más en visualizarse. Solución: Comprimir los ficheros lo máximo posible No incrustarlos en la propia página web sino hacerlos accesibles al usuario mediante un enlace. 34
ELEMENTOS MULTIMEDIA Por multimedia se entiende los elementos gráficos o sonoros: Imágenes Sonidos Vídeos Animaciones 35
ELEMENTOS MULTIMEDIA Imágenes No todos los formatos son adecuados para su utilización en páginas web. Se recomiendan: -JPEG -GIF -PNG -TIFF Cada formato tiene ventajas y desventajas, siendo conveniente conocer sus puntos fuertes y débiles antes de utilizarlos en Internet. 36
Formato JPEG ELEMENTOS MULTIMEDIA Conocido también como JPG (necesidad en algunos S.O. de limitar a 3 letras la extensión). Ideal para fotografías, al ser capaz de representar más de 16 millones de colores. Es un formato de compresión, por lo que toda imagen convertida a JPEG perderá calidad (es decir, información) respecto al original. Esta pérdida se refleja en transiciones deficientes entre colores, lo que provoca un menor detalle y áreas poco definidas 37
ELEMENTOS MULTIMEDIA Formato GIF Destinado a la representación de gráficos lineales (logos, dibujos, etc.). Formato de imagen sin pérdida por compresión. Admite hasta 256 colores Uso desaconsejado en fotografías. No ofrece transiciones suaves entre las distintas tonalidades. Admite la definición de áreas transparentes o la superposición de fotos para crear gráficos animados. Son usados para dotar a la página web de contenidos dinámicos o que llamen la atención 38
ELEMENTOS MULTIMEDIA Formato TIFF El formato TIFF adopta la extensión.tif y conjuga las características de GIF y JPEG. Ideal para almacenar fotografías ya que permite guardarlas, exportarlas, sin que con cada operación se pierda información (como ocurre con JPEG). Tamaño imagen JPEG < Tamaño imagen TIFF, incluso utilizando métodos de compresión sin pérdida como los filtros LZW. Formato de compresión no siempre aceptado por navegadores web. No sirve para Internet. 39
ELEMENTOS MULTIMEDIA Formato PNG Mejora la mayoría de las prestaciones de GIF (excepto la animación, que no la admite). Ofrece muchas de las posibilidades del formato TIFF, no está recomendado para guardar fotografías, especialmente si se desea reducir su «peso». Todavía no está totalmente implantado, siendo a veces necesaria la instalación de extensiones. 40
ELEMENTOS MULTIMEDIA Imágenes - Resumen Fotografías Gráficos Propiedades Formato adecuado para almacenamiento Formato de compresión adecuado para la web Compatibilidad Tonalidades continuas con pocas líneas o bordes. Más de 16 millones de colores. TIFF, PNG JPG JPG, TIFF (sin compresión) Colores sólidos con un máximo de 256 tonalidades, líneas, bordes con contraste y texto. PNG, TIFF, GIF PNG, TIFF (con compresión LZW), GIF TIFF (sin compresión), GIF 41
ELEMENTOS MULTIMEDIA Problemática Sonidos y videos Tamaño excesivo ficheros multimedia Formato archivos para reproducción Ejemplo Película de 1 minuto de duración, sin comprensión y resolución 600x480 pixels 1 Gigabyte Deben estar comprimidos 42
ELEMENTOS MULTIMEDIA Formato Calidad Tamaño Tamaños 1 MP3 CD 1MB minuto de audio y video en disco WMA CD 0.5 MB WAV MIDI Real Audio (RA) CD Sintetizador Baja 10 MB 0.05 MB 0.9 MB Audio MPEG-2 WMV LP Normal Alta Normal 17 MB 32 MB 47 MB 1-10 MB Imagen AVI Alta 4.5 MB SWF Alta 0.1-8.5 MB 43
ELEMENTOS MULTIMEDIA Comprensión de audio y video Es necesario recurrir a los codecs (codec/encoder), complementos de software que permiten la compresión y descompresión de datos de audio y vídeo. Algunos permiten la compresión sin pérdida apreciable como es el caso del MPEG-2, utilizado en las películas en formato DVD. Los datos sólo pueden ser «leídos» por un ordenador que tenga instalado el mismo codec que los comprimió. 44
ELEMENTOS MULTIMEDIA Formato de audio y videos No confundir tecnologías de codificación con formatos de almacenamiento de los archivos Formato almacenamiento OGG MPEG Codecs internos Vorbis (audio), Theora (video) y Speex (audio-voz) MPEG (coincide) Determinados formatos están asociados a un software reproductor determinado: - Formato WMV Windows Media Video - Formato RM Real Player 45
ELEMENTOS MULTIMEDIA Formato audio-video streaming Sistema para la transmisión en tiempo real de imágenes animadas y sonidos Permite al usuario visualizar el contenido de un archivo, mientras sigue recibiendo más datos. El usuario no necesita «descargarse» totalmente el archivo (ya sea a su disco duro o a su navegador web) para visualizarlo. Es ideal para la visualización de contenidos multimedia online. El formato AVI no lo permite. 46
ELEMENTOS MULTIMEDIA Recomendación archivos de audio y video No incluir directamente en la página estos archivos, sino que sean accesibles mediante un enlace en el que se avise claramente al usuario del tipo de formato de compresión del archivo y su tamaño en megabytes. Si se incrusta en la página web, deberá situarse al final de las instrucciones HTML, permitiendo que el navegador cargue el texto y las imágenes antes que el archivo de audio o vídeo. 47