Agradecería que, una vez usado el manual, me indicaras qué te ha parecido. GRACIAS
http://www.videoedicion.org//index.php?board=7;action=display;threadid=13497

Si después de leer este manual sigues teniendo dudas, puedes usar el foro

http://foro.videoedicion.org
http://www.videoedicion.org

  © Ramón Cutanda López (videoed) 13 de Enero de 2005 (Cieza - Murcia - España)


*** MANUAL EN CONSTRUCCIÓN ***

1. Introducción: por qué un manual sobre cómo hacer manuales

2. Cómo debe ser un manual que será publicado en internet
    2.1 Cómo hacer un manual que se descargue rápido
       2.1.1 Depurando código
       2.1.2 Optimizando el peso de las imágenes
          2.1.2.1 JPEG y GIF: Cuando y cómo
    2.2 Compatibilidad con diversidad de navegadores
        2.2.1 Algunos consejos para redactar documentos con Composer de Mozilla/Netscape
          2.2.1.1 Evitando problemas con las tildes
          2.2.1.2 Haciendo que los enlaces se abran en páginas distintas
        2.2.2 Subiendo correctamente los archivos al FTP



1. Introducción: por qué un manual sobre cómo hacer manuales

    Desde hace unos meses algunos usuarios de videoedicion.org os habéis animado a enviarme algunos manuales. Ha sido una sorpresa agradable comprobar que tratáis de enviarme los manuales siguiendo el estilo y el formato que siempre he usado, así que me he decidido a escribir este manual para que todo el que quiera escribir uno sepa cómo lo hago yo. Que quede claro, no obstante, que mi forma de redactar manuales no es ni la mejor ni la peor, sino simplemente la que yo he encontrado más adecuada a las características de la página. En cualquier caso, detallo a continuación lo que administrar videoedicion.org me ha enseñado con el paso de los años sobre cómo debería ser, a mi modo de ver, una página web.

2. Cómo debe ser un manual que será publicado en internet

    Sólo hay tres requisitos:

    1. Que sea rápido de descargar
    2. Que sea compatible con todos los navegadores
    3. Que esté bien estructurado

2.1 Cómo hacer un manual que se descargue rápido

    Dos son los secretos: limpieza de código e imágenes de poco peso (medido en Kbytes).

2.1.1 Depurando código

    Un texto sin código es lo que escribes en el bloc de notas de Windows. No puedes usar negrita, ni cursiva, ni varios tipos de letras, ni colores... Sólo texto llano y simple. En el mismo momento que queremos darle algún formato al texto debemos empezar a insertar códigos para que se sepa qué es negrita, qué es cursiva, qué partes están en un tipo diferente de letra, etc. Las páginas de internet están escritas en formato HTML (Hiper Text Markup Language) Escribir directamente en código HTML es un trabajo de chinos, así que se recurre a editores HTML que suelen ofrecer dos modos de trabajo. Uno es directamente en código HTML para una mayor precisión, y otra que es el denomidado WYSIWYG, que son las iniciales de What You See Is What You Get o, en cristiano, "Como Lo Ves Es Como Se Queda" El problema es que trabajando en modo WYSIWYG todo puede parecer correcto, pero dependiendo del programa usado podemos obtener código oculto sobrante, código basura innecesario que hará que aumente el tamaño de nuestro archivo HTML, además de poder causar numerosas incompatibilidades. ¿Verdad que en alguna ocasión te ha pasado que al escribir en Word has querido tabular una línea pero en lugar de desplazar la primera línea tan sólo resulta que se desplaza todo un párrafo? ¿o que has ido a poner/quitar negrita a una palabra y no puedes? ¿O que al pulsar la tecla espacio o borrar, de repente, se cambia el tipo de letra? Eso ocurre cuando se han ido añadiendo códigos, que no vemos en formato WYSIWYG, pero que sí están presentes y tienen su influencia sobre el texo

    Veamos un ejemplo. Voy a obtener el texto del siguiente párrafo (con las dos líneas inclusive) en modo WYSIWYG con tres programas diferentes: Escribiendo directamente en Word de Microsoft y luego guardando como página web, con Macromedia Dreamweaver 2004 y con el Composer del Mozilla 1.7.1


2.1 Cómo hacer un manual que se descargue rápido

    Dos son los secretos: limpieza de código e imágenes pequeñas.


    Para crear este texto (líneas horizontales inclusives)

- Microsoft Word ha usado éste código  (3.417 bytes)
- Macromedia Dreamweaver MX 2004 ha usado éste código  (553 bytes)
- El Composer 1.7.1 de Mozilla ha usado éste código  (595 bytes)

    Como se ha podido comprobar nadie en su sano juicio usaría Word como editor de código HTML. El aumento en la complejidad del código (casi 5 veces más que Dreamweaver o Composer) provoca un retardo notable en la velocidad de carga de la página, no sólo por la mayor información que se ha de descargar desde internet, sino también porque la mayor complejidad del código requerirá más potencia del procesador del ordenador en el que se abre la página. No obstante, si alguna vez os mandan algo en Word que queréis publicar en HTML podeís usar el depurador de código de Dreamweaver. Si abrimos el archivo anteriormente generado por Word en Dreamweaver y usamos la función "Comandos -> Limpiar HTML de Word" obtenemos éste código (1.030 bytes) Como se puede apreciar se ha reducido el tamaño del archivo en más de dos tercios del tamaño original.

    Por lo tanto, el primer consejo que os puedo dar a la hora de redactar un manual es **NO USAR WORD** para escribir y luego guardar como HTML, sino escribir directamente en un editor HTML. Dreamweaver es el más potente de todos los editores HTML que conozco, pero también es complejo y caro (http://www.macromedia.com/es/buy) El Composer de Mozilla, sin embargo, es gratuíto y me ofrece TODO lo que yo necesito en mis manuales:

    - Un editor de código HTML MUY sencillo, con las funciones más básicas (formato de letra, enlaces, tablas e inserción de imágenes) y que no inserta código "basura", tan sólo lo que yo quiero
    - Posibilidad de trabajar en modo WYSIWYG, con etiquetas HTML (para saber más fácilmente qué es cada cosa dentro del código) y directamente con el propio código HTML
    - Viene integrado en Mozilla, que es mi navegador por defecto

2.1.2 Optimizando el peso de las imágenes

    Hablo aquí de peso y no de tamaño para evitar la confusión entre dimensiones y cantidad de datos. De ese modo hablaremos de tamaño en píxeles y de peso en Kbytes. Observa las dos imágenes de ejemplo que muestro a continuación. Tienes 2 minutos para encontrar las diferencias. ¡Tiempo!:

Ejemplo 1 --> Ejemplo 2 -->

    ¿Las has encontrado? ¿Sí? ¡Enhorabuena!... porque no las hay. La calidad de las dos imágenes es la misma. Sin embargo, pincha en ellas con el botón derecho del ratón y observa en el apartado "Propiedades" el peso de las mismas. Verás que el Ejemplo 1 pesa 65,3 Kbytes y que el Ejemplo 2 pesa 4,69 Kbytes, casi 14 veces menos.

    Observemos otros dos ejemplos:

    Ejemplo 3 -->  Ejemplo 4 -->

    Ahora podemos comprobar que el Ejemplo 4 ha sufrido una importante pérdida de calidad (de colores para ser exactos) con respeto al Ejemplo 3. El Ejemplo 3 pesa 82,4 Kbyes y mientras que el peso del Ejemplo 4 es de 7,23 Kbytes, poco más de 11 veces menos que el Ejemplo 3.

    La pregunta del millón: ¿Cómo lograr que una imagen tenga el menor tamaño posible sin que la pérdida de calidad sea notable?  -> Lee el siquiente apartado

2.1.2.1 JPEG y GIF: Cuando y cómo

CUANDO

    - Usaremos JPEG siempre que trabajemos con imágenes del mundo real

    - Usaremos GIF en la mayor parte de los casos en los que trabajemos con imágenes sintéticas, como capturas de pantallas, texto o gráficos vectoriales.


    Las imágenes en formato GIF tienen una profundidad de color máxima de 8 bits, lo que pertite almacenar hasta 256 colores diferentes, o tonos de grises si la imagen está en blanco y negro. Lo bueno del formato GIF es que podemos "restringir" colores. Voluntariamente, he restringido las imágenes de los Ejemplos 2 y 4 a 5 colores. El número total de colores diferentes del Ejemplo 2 es precisamente 5, luego restringiendo los colores del GIF a 5 tenemos el 100% de calidad, ya que quedan registrados todos los colores posibles y no se pierde ninguno. En el Ejemplo 4 queda patente que 5 es un número más que insuficiente de colores para mostrar una imagen real. En el segundo caso siempre deberíamos optar por el formato JPEG

CÓMO

- Siempre que usemos el formato GIF emplearemos la restricción de colores.

- Siempre que usemos el formato JPEG ajustaremos la relación de compresión hasta lograr la mejor relación peso/calidad


    Casi todos los programas que trabajen con fotografía nos van a permitir ajustar la relación de compresión de un archivo JPEG, pero es menos corriente que podamos restringir el número de colores de un archivo GIF. Adobe Photoshop es para mí una herramienta INDISPENSABLE, así que basaré mi explicación en la versión CS (la 8 si seguimos la numeración) de dicha herramienta. La mejor manera de ajustar el peso final de una imagen es usar "Archivo -> Guardar para Web"

    En el caso de elegir GIF restrictivo puede sucecer que cambien los colores de la imagen, dependiendo de la paleta de colores seleccionada. Para elegir la adecuada prueba las paletas disponibles: perceptual, selectiva, adaptable o restrictiva



    En las dos esquinas inferiores de la ventana de "Guardar para Web" tenemos información detallada sobre los valores finales del archivo. Si trabajando con GIF y paleta restringida obtienes un número de colores superior a 128 comprueba siempre el tamaño que obtendrías al comprimir a JPEG, puesto que es probable que sea similar o inferior en JPEG.




2.2 Compatibilidad con diversidad de navegadores

    En mis primeros contactos con internet (1995) el navegador de internet más usado era Netscape en sus versiones 4.x. Mis primeras navegaciones fueron con Netscape, así que cuando internet entró en mi casa en el 2000, a pesar de que Windows 98 ya había impuesto "por cojones" (con perdón) su Internet Explorer en miles de hogares, yo seguía usando Netscape para Navegar y leer mi correo. y cuando tuve por primera vez la idea de hacer una página web personal me sorprendí muy gratamente de lo sencillo que era usar el Composer. Más adelante quise complicar un poco la cosa y empecé a usar Dreamweaver, pero lo usaba tan sólo para crear la estructura de marcos, efectos rollovers, popups, etc. Para redactar el texto seguía usando siempre el Composer. Para mí una herramienta tremendamente efectiva.

        Netscape lanzó, con muchísimo retraso, la versión 6 que fue una cagada total, y me duele decirlo, pero es que fue un fracaso total. El Composer de la versión 6 mejoraba en algunos aspectos el de la 4, así que seguía usando Netscape 4.5 para Navegar y el Composer 6, complementado con Dreamweaver, para crear páginas web. El uso de diferentes editores HTML, navegadores y servidores de internet me hicieron darme cuenta de la enorme cantidad de fallos de compatibilidad que podían surgir:

2.2.1 Algunos consejos para redactar documentos con Composer de Mozilla/Netscape

2.2.1.1 Evitando problemas con las tildes

    Redactando con Composer 4.x me percaté que los enlaces con tildes no funcionaban, pero redactando con Netscape 6 sí. Confié en que todo iba bien porque al comprobar los enlaces en Netscape 4.x/6 funcionaban correctamente. Sin embargo, cuando ya tenía escritos un montón de manuales comprobé que los enlaces con tildes no funcionaban si se usaba Internet Explorer como navegador. Mi gozo en un pozo. Más del 95% de los usuarios de la página usan Internet Explorer, así que dejo fuera de juego a muchos usuarios, pero rehacer todos los enlaces sería un trabajo colosal. Este inconveniente se puede solucionar de forma sencilla. Imagina que ahora mismo quisiera crear el apartado "Introducción" y que me interesara marcarlo como punto de referencia para poder enlazarlo en diversas ocasiones a lo largo del texto.

1. Introducción

Introducción tiene tilde en la ó. La forma estándar de crear el punto de referencia sería seleccionar todo el texto, ir a "Insertar -> Enlace interno con nombre" y luego pinchar en aceptar.





    Si queremos crear ahora un enlace al apartado anterior comprobaremos que dicho enlace funciona sin problemas en versiones 6.x y posteriores de Netscape y en todas las de Mozilla/Firebird. Sin embargo, no funciona en Internet Explorer.

    Para comprobar lo que acabo de decir pincha aquí par ir a la introducción del ejemplo anterior.

    Sin embargo, sin pinchas en el enlace que lleva a la auténtica introducción de este manual comprobarás que funciona sin problemas en todos los navegadores

1. Introducción: por qué un manual sobre cómo hacer manuales

    ¿Cómo  lo he hecho? Siguiendo estos pasos:



  

 Hay dos enlaces a la introducción. El que acabamos de crear, marcado con el número 1 en la imagen anterior, y el que yo creé al comienzo de este documento, marcado con el número 2. La diferencia entre ellos es tan sutil como crucial. En el enlace nº 2 no hay tilde en "Introduccion". El truco está en crear el enlace interno *SIN* tilde, aunque el texto marcado sí que la tenga. El Composer, por defecto, asigna como nombre de enlace interno lo mismo que haya marcado en la selección. Para evitar el problema de las tildes tan sólo hemos de crear el enlace interno sin tilde. Este cambio sólo has de realizarlo si el texto marcado contiene alguna tilde. Si no la hay, pues no hay problema alguno




2.2.1.2 Haciendo que los enlaces se abran en páginas distintas

    Para evitar interrumpir la lectura es fácil indicarle a Composer que queremos que un enlace se abra en una página nueva. Por ejemplo, pincha aquí para ir a los manuales de la página

    Para hacer un enlace de este tipo, sigue estos pasos:




2.2.2 Subiendo correctamente los archivos al FTP

    Usa sólo letras y números y NUNCA dejes espacios, uses tildes, ñ o caracteres especiales. Muchos servidores no aceptarán archivos con estos nombres y, si los aceptan, es más que probable que luego tengas problemas para visualizar o enlazar a esos archivos. Presento a continuación algunos ejemplos de hombres de archivos que no serían válidos o con los que  probablemente tendrías problemas.

¡hola!.htm -> ¡, !, ¿, ?, (, ) etc... son caracteres no válidos
españa.htm -> ñ es un caracter no válido
videoedición.htm -> la tilde en la última o es un caracter no válido
video edicion.htm -> Hay un espacio, nombre de archivo no válido. Si quieres separar palabras la mejor solución es que uses puntos o guiones bajos. El archivo anterior funcionaría correctamente de cualquiera de las siguientes formas:

video_edicion.htm
video.edicion.htm

    Otra cosa a tener en cuenta es que existe distincion entre mayúscula y minúscula. Si en tu servidor FTP existe en archivo Manuales.htm, no intentes abrirlo como manuales.htm porque te saldrá un error indicándote que la página no existe. Mi consejo es que siempre uses minúsculas en los nombres de archivos, aunque a mi, personalmente, me gusta poner la primera letra en mayúscula. No tengo problemas porque SIEMPRE lo hago, y por lo tanto, SIEMPRE lo tengo en cuenta a la hora de crear enlaces

*** MANUAL EN CONSTRUCCIÓN ***

© Ramón Cutanda López (videoed) 13 de Enero de 2005