3º Unidad Didáctica
Editores y Páginas WEB
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
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.
Firefox Internet Explorer, Firefox, Chrome Navegadores Emacs, Gedit, Xedit Bloc de notas Editores de Texto Linux Windows
TIPOS EDITORES WEB
Editores de códigoPermiten 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
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,
EDITORES DE CÓDIGO (TEXTO)
Código
HTML puro y duro.
EDITORES VISUALES (WYSIWYG)
• What You See Is What You Get = Lo que ves, es loque 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.
EDITORES VISUALES (WYSIWYG)
Código HTML puro y duro. Interpretación código HTML
Pierde la practica de la programación
Mejor opción para aprender y dominar el lenguaje
Dominio de la técnica
Mas cómoda. Permiten comprobar el resultado al instante
Necesita activar el navegador para ver el resultado
Comodidad
Lo construye el programa. Puede incluir código mas complejo
Lo construye el
propio programador
Construcción de código
Mas sencillo y rápido Mas lento y complicado Facilidad de aprendizaje WYSIWYG Editor texto
COMPARATIVA
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).
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:
EDITORES PROPIETARIOS
http://www.evrsoft.com/1stpage2.shtml First Page 2006
1st Page 2000 2.0 is the tool that lets you create powerful, great looking
websites faster, easier and on-time.
http://www.visicommedia.com/acehtml/
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.
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
EDITORES WEB (SOFTWARE
LIBRE)
Amaya es un proyecto de código abierto
liderado por W3C
http://www.cdlibre.org/consultar/catalog
o/
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
PLUGINS DE LOS NAVEGADORES
Adobe Reader
Adobe Flash
Java
Quicktime
Real Player
Shockwave
COMPLEMENTO PARA FIREFOX:
FIREBUG
MONITORIZACIÓN
RED CON FIREBUG
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
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. Menu Enlace1 Enlace2 Enlace3 Enlace 4 FOTO Texto Descriptivo Enlace pag 1 FOTO Texto Descriptivo Enlace pag 2PLANIFICACIÓ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
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
PLANIFICACIÓN DEL TRABAJO
b) Organizar los archivosUn 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.
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.wavPLANIFICACIÓ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
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.
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)
RENDIMIENTO PÁGINAS WEB
Cuestiones relacionadas con la visualización y
descarga de páginas web
Navegadores web
Resolución de pantalla
Servidores web
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.
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
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
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.
ELEMENTOS MULTIMEDIA
Por multimedia se entiende los elementos gráficos o sonoros:
Imágenes Sonidos Vídeos
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.
ELEMENTOS MULTIMEDIA
Formato JPEG
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
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
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
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
ELEMENTOS MULTIMEDIA
TIFF (sin compresión),
GIF JPG, TIFF (sin compresión) Compatibilidad PNG, TIFF (con compresión LZW), GIF JPG Formato de compresión adecuado para la web PNG, TIFF, GIF TIFF, PNG Formato adecuado para almacenamiento
Colores sólidos con un
máximo de 256
tonalidades, líneas,
bordes con contraste y texto.
Tonalidades
continuas con pocas líneas o bordes. Más de 16 millones de colores. Propiedades Gráficos Fotografías Imágenes - Resumen
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
ELEMENTOS MULTIMEDIA
0.9 MB Baja
Real Audio (RA)
0.05 MB Sintetizador MIDI 10 MB CD WAV 0.5 MB CD WMA 1MB CD MP3 Tamaño Calidad Formato Tamaños 1 minuto de audio y video en disco 0.1-8.5 MB Alta SWF 4.5 MB Alta AVI 1-10 MB Normal WMV 17 MB 32 MB 47 MB LP Normal Alta MPEG-2 Audio Imagen
ELEMENTOS MULTIMEDIA
Comprensión de audio y video
Es necesario recurrir a los codecs
(codec/encoder),
complementos de software quepermiten 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ó.
ELEMENTOS MULTIMEDIA
Formato de audio y videos
No confundir tecnologías de codificación con
formatos de almacenamiento de los archivos
MPEG (coincide) MPEG
Vorbis (audio), Theora (video) y Speex (audio-voz)
OGG
Codecs internos Formato almacenamiento
Determinados formatos están asociados a un
software reproductor determinado:
- Formato WMV ↔ Windows Media Video
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
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.
