1

3º Unidad Didáctica

Editores y Páginas WEB

Eduard Lara

2

3.1 Editores para el desarrollo webCódigo – Texto WYSIWYG (What You See Is What You Get) Software Propietario vs Software LibreEstándar de facto:

Complementos (plugins) de Mozilla Firefox

3.2 Consideraciones iniciales

ÍNDICE

3

RECURSOS WEB

Editor web permite al desarrollador escribir en el lenguaje de programación webNavegador web permite comprobar el resultado del documento que ha creado.

FirefoxInternet Explorer, Firefox, Chrome

Navegadores

Emacs, Gedit, Xedit

Bloc de notasEditores de Texto

LinuxWindows

4

TIPOS EDITORES WEB

Editores de códigoPermiten escribir y modificar archivos digitales compuestos por texto plano.

Editores de texto simpleProcesadores de textoEditores 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

5

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

6

EDITORES DE CÓDIGO (TEXTO)

Código HTML puro y duro.

7

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.

8

EDITORES VISUALES (WYSIWYG)

Código HTML puro y duro.

Interpretación código HTML

9

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ápidoMas lento y complicado

Facilidad de aprendizaje

WYSIWYGEditor texto

COMPARATIVA

10

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

11

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/

12

EDITORES PROPIETARIOS

http://www.evrsoft.com/1stpage2.shtml

First Page 20061st Page 2000 2.0 is the tool that letsyou create powerful, great lookingwebsites faster, easier and on-time.

http://www.visicommedia.com/acehtml/

AceHTML

13

EL “STANDARD” DE FACTO O NO*

14

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.

15

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

16

EDITORES WEB (SOFTWARE LIBRE)

Amaya es un proyecto de código abierto liderado por W3Chttp://www.cdlibre.org/consultar/catalogo/Desarrollo-Web_Editores-web.html

17

EDITORES WEB (SOFTWARE LIBRE)

http://nvudev.com

Nvu (pronunciado N-view)Un completo sistema de desarrollo webpara Linux usuarios así como para usuarios Windows y Macintosh, que rivaliza con programas como FrontPage y Dreamweaver.

18

PLUGINS DE LOS NAVEGADORES

Adobe Reader

Adobe Flash

Java

Quicktime

Real Player

Shockwave

Windows Media Player

19

COMPLEMENTO PARA FIREFOX:FIREBUG

20

MONITORIZACIÓN RED CON FIREBUG

21

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 normativasC. Rendimiento de las paginas web

22

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 2

23

PLANIFICACIÓN DEL TRABAJO

El boceto contendrá los siguientes listadosListado 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

24

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

25

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

26

PLANIFICACIÓN DEL TRABAJO

mi_sitio_web/mi_sitio_web/index.htmlmi_sitio_web/pagina1.htmlmi_sitio_web/pagina2.htmlmi_sitio_web/imágenesmi_sitio_web/imágenes/imagen1.jpgmi_sitio_web/imágenes/imagen2.jpgmi_sitio_web/videosmi_sitio_web/videos/video1.avimi_sitio_web/videos/video2.avimi_sitio_web/sonidosmi_sitio_web/sonidos/sonidos1.wav

27

PLANIFICACIÓN DEL TRABAJO

Direccionamiento de elementos en una paginaDireccionamiento absoluto.

http://maquina.dominio/sitio_web/multi/image.jpgAl 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

28

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.

29

LEYES Y NORMATIVAS

Es necesario pedir permiso (preferiblemente por escrito) o asegurarse de que este ha sido concedido de antemano mediante una licencia Creative Commonso GNU GPL.

Proveedores elementos Web gratuitosCreative 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)

30

RENDIMIENTO PÁGINAS WEB

Cuestiones relacionadas con la visualización y descarga de páginas web

Navegadores webResolución de pantallaServidores webPeso de la página

31

RENDIMIENTO PÁGINAS WEB

Navegadores webNavegadores 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.

32

RENDIMIENTO PÁGINAS WEB

Resolución pantallaLa 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

33

RENDIMIENTO PÁGINAS WEB

Servidores web y ordenadores personalesEn 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).

34

RENDIMIENTO PÁGINAS WEB

Peso de la páginaCuantos 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 posibleNo incrustarlos en la propia página web sino hacerlos accesibles al usuario mediante un enlace.

35

ELEMENTOS MULTIMEDIA

Por multimedia se entiende los elementos gráficos o sonoros:

Imágenes SonidosVídeos Animaciones

36

ELEMENTOS MULTIMEDIA

ImágenesNo 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.

37

ELEMENTOS MULTIMEDIA

Formato JPEGConocido 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

38

ELEMENTOS MULTIMEDIA

Formato GIFDestinado a la representación de gráficos lineales

(logos, dibujos, etc.).Formato de imagen sin pérdida por compresión.

Admite hasta 256 coloresUso 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

39

ELEMENTOS MULTIMEDIA

Formato TIFFEl 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.

40

ELEMENTOS MULTIMEDIA

Formato PNGMejora 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.

41

ELEMENTOS MULTIMEDIA

TIFF (sin compresión), GIF

JPG, TIFF (sin compresión)

Compatibilidad

PNG, TIFF (con compresión LZW), GIF

JPGFormato de compresión adecuado para la web

PNG, TIFF, GIFTIFF, PNGFormato 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áficosFotografías

Imágenes - Resumen

42

ELEMENTOS MULTIMEDIA

Problemática Sonidos y videosTamaño excesivo ficheros multimediaFormato archivos para reproducción

EjemploPelícula de 1 minuto de duración, sin comprensión y resolución 600x480 pixels → 1 Gigabyte

Deben estar comprimidos

43

ELEMENTOS MULTIMEDIA

0.9 MBBajaReal Audio (RA)0.05 MBSintetizadorMIDI10 MBCDWAV0.5 MBCDWMA

1MBCDMP3TamañoCalidadFormato Tamaños 1

minuto de audio y video en disco

0.1-8.5 MBAltaSWF4.5 MBAltaAVI1-10 MBNormalWMV

17 MB32 MB47 MB

LPNormal

Alta

MPEG-2

Audio

Imagen

44

ELEMENTOS MULTIMEDIA

Comprensión de audio y videoEs 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ó.

45

ELEMENTOS MULTIMEDIA

Formato de audio y videosNo confundir tecnologías de codificación con

formatos de almacenamiento de los archivos

MPEG (coincide)MPEG

Vorbis (audio), Theora (video) y Speex (audio-voz)

OGGCodecs internosFormato almacenamiento

Determinados formatos están asociados a un software reproductor determinado:

- Formato WMV ↔ Windows Media Video- Formato RM ↔ Real Player

46

ELEMENTOS MULTIMEDIA

Formato audio-video streamingSistema para la transmisión en tiempo real de

imágenes animadas y sonidosPermite 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.

47

ELEMENTOS MULTIMEDIA

Recomendación archivos de audio y videoNo 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.