Lorenzo Martínez. Blog del curso Mentor HTML

Imágenes IV

2009-04-10T12:00:00.003+02:00

Aunque en el curso HTML no se explique su uso, muchos habéis realizado el curso de Word o utilizáis dicho editor de texto. Dentro de sus opciones existe una, WordArt, que es especialmente atractiva ya que nos permite construir títulos llamativos para nuestros documentos, como dicha opción existe también en FrontPage 2000/2003 la utizáis para colocar los títulos de las páginas.
Pulsando en este enlace podrás ver una página que solamente contiene el título generado con WordArt

La utilización de esta opción en una página Web no es muy recomendable, ya que para conseguir crear el título se genera una gran cantidad de código, que no es HTML, que dificulta la corrección del código que pudiese contener la página. Puedes verlo cargando la página anterior en el navegador y pulsando en el menú PÁGINA la opción Ver código fuente, si lo prefieres puedes pulsar en este otro enlace para verlo directamente.

Además genera una carpeta, mismo nombre que el documento HTML + _archivos, que contiene una carpeta de sistema _vti_cnf, un fichero xml y el gráfico que muestra el título. Generalmente con extensión .gif.

Para evitarnos complicaciones lo que vamos a hacer es utilizar el procedimiento anterior pero no para usarlo directamente sino solamente para que FrontPage nos cree el gráfico y podamos insertarlo posteriormente en nuestra página como una imagen normal y corriente. Para ello copiaremos el gráfico generado en nuestra carpeta de trabajo (la misma en la que vayamos a poner el documento HTML), crearemos un nuevo documento e insertaremos dicha imagen y guardaremos el archivo en la misma carpeta en la que se encuentre la imagen. Para finalizar borraremos el primer documento HTML creado y la carpeta generada. El resultado puedes verlo pulsando aquí, puedes ver el código generado utilizando el procedimiento explicado anteriormente o pulsando en este otro enlace.

Compara los dos códigos y piensa cual de los dos procedimientos te va a dar menos problemas.

RSS

2008-11-21T23:34:00.003+01:00

Había pensado hacer una explicación sobre qué es RSS y sobre cómo podemos leer las noticias pero después de ver este video he pensado que no lo iba a explicar mejor. Así que toca verlo.

FAVICON

2008-11-17T23:27:00.002+01:00

El favicon (favoritos icono) es una pequeña imagen que aparece en algunos navegadores precediendo a la dirección de la página Web.
Para poder insertarlo en nuestra página, necesitamos:

El icono. Para no tener problemas debe de ser de 16x16 píxeles, de 16 colores y preferentemente su formato debe de ser .ico. Los navegadores más modernos también admiten iconos en formato .png o gif. También recomenaría llamarlo favicon.
Añadir la siguiente línea entre las etiquetas <head> </head>, <link rel="shortcut icon" href="favicon.ico">.
El icono debemos situarlo en la carpeta raíz de nuestro sitio (es de suponer que la página principal de nuestro sitio la tenemos en dicha carpeta).
Añadir la página a los favoritos del navegador (si no lo hacemos no podremos ver el icono).

Siguiendo al pie de la letra estas instruciones deberíamos verlo, aunque he de decir que no esta garantizado al 100%.

Imágenes III

2008-11-15T15:36:00.001+01:00

En el ejercicio 1 del módulo 4 se pide que coloquéis 10 imágenes en miniatura.
Para presentar ordenadamente las imágenes un buen recurso es colocarlas en tablas pero si las imágenes tienen diferente orientación las celdas que las contienen hacen que todas las de la fila tomen la anchura o altura de la imagen que más ocupa y eso puede afear el aspecto de nuestra tabla.
Mediante la opción de PROPIEDADES DE IMAGEN de FrontPage podemos colocar todas las imágenes con las mismas dimensiones pero se deformarían todas aquellas que vieran modificada su relación entre anchura y altura.
La solución es, mediante un editor gráfico, recortar aquellas imágenes que no coincidan con la orientación elegida y posteriormente reducir el recorte.
Visita esta páginas de ejemplo.

Imágenes II

2008-07-15T17:36:00.004+02:00

Uno de los problemas más frecuentes, relacionado con las imágenes en el curso, es que éstas no se cargan cuando vemos la página que hemos subido a Internet mientras que en modo local, en nuestro ordenador lo hacen sin problemas.
Imagínate que estás creando una página Web y necesitas una o varias imágenes, lo más normal es que navegues por internet y te las descargues pulsando el botón derecho del ratón y seleccionando la opción GUARDAR IMAGEN COMO.., al hacerlo se abre la ventana de GUARDAR IMAGEN y pulsamos el botón de GUARDAR sin preocuparnos de nada más. El resultado es que la imagen se guarda en la carpeta MIS IMAGENES.
A continuación nos ponemos a trabajar con nuestro editor de HTML e insertamos las imágenes en nuestra página. Comprobamos el resultado en el explorador o en la vista previa del programa y todo está perfecto.
Para finalizar subo el documento htm y las imágenes utilizadas y los coloco o bien en la carpeta public_hml de mi servidor o en una subcarpeta creada dentro de public. Veo la página en Internet y compruebo que las imágenes no se cargan.
¿Por qué no se cargan las imágenes? Simplemente porque cuando se han insertado en el documento estaban en la carpeta Mis imágenes y el código que se ha copiado indica que dichas imágenes estaban en esa carpeta y además todo el camino que hay que recorrer desde la carpeta en la que se encuentra mi documento htm hasta la carpeta Mis imágenes. Al subir el documento a Internet hemos puesto todos los archivos en la misma carpeta y cuando un internauta solicita cargar nuestra página, su navegador lee el código y al llegar a una instrucción de carga de la imagen se encuentra que tiene que ir a buscar la imagen a una carpeta determina del servidor y además siguiendo el camino marcado pero resulta que ni el camino a seguir es el correcto ni tan siquiera la carpeta indicada existe en el servidor de Internet por lo que el resultado no puede ser otro que el que la imagen o imágenes no se carguen.
La solución más sencilla es colocar la imagen que voy a utilizar en la misma carpeta que se encuentra el documento HTML en la que la voy a insertar, de esta manera cuando suba todo a Internet no tendré que preocuparme con colocar todos los documentos en la misma carpeta las imágenes se cargarán sin ningún tipo de problema.
Otra solución es crearme dentro de la carpeta del curso una carpeta denominada imagenes (sin acento) e ir colocando en ella todas las imágenes que voy a utilizar en mis trabajos, deberé colocar en ella las imágenes antes de insertarlas en mi página. En el servidor de Internet crearé otra carpeta con el mismo nombre y subiré a dicha carpeta todas las imágenes. De esta forma el camino que hay que seguir y el nombre de la carpeta en el servidor coincidirán exactamente con el indicado en el código.

Imágenes I

2008-06-21T20:33:00.002+02:00

Con éste voy a iniciar una serie de artículos sobre las imágenes. Para empezar aquí van una serie de recomendaciones de uso general.

Utiliza el formato gráfico más adecuado en tus imágenes. Fotografías jpg , dibujos GIF.
No es necesario que las imágenes tengan una calidad muy alta, las resoluciones muy altas en las imágenes son necesarias solamente para su impresión. si es necesario puedes reducir la calidad de la imagen con un editor gráfico.
Utilízalas de una forma racional lo que más o menos quiere decir que no hay que abusar de ellas en nuestras páginas, principalmente de los gifs animados.
Ten en cuenta que muchas imágenes tienen un propietario y que sin su autorización no es legal utilizarlas. Procurar usar en nuestras páginas imágenes sin copyright.
No modifiques el tamaño con el que se mostrará la imagen mediante los atributos width y height de la etiqueta <img>, redimensiona la imagen mediante un editor gráfico.
Utiliza el atributo alt para mostrar un texto descriptivo en el caso de que la imagen no se cargue o el usuario haya desactivado la carga de imágenes en el navegador.
Si es posible evita el uso de imágenes de fondo. En el caso de hacerlo define un color de fondo similar al de la imagen para poder leer el texto hasta que se cargue el fondo.
Carga los gráficos de forma entrelazada ( GIF, PNG) o pregresiva (JPG) para que el usuario pueda ver la imagen incompleta mientras se carga.

Vamos a ejercitarnos un poco

2008-04-13T00:59:00.018+02:00

La imagen que tienes a tu izquierda representa la estructura de carpetas en un disco duro. Teniendo en cuenta dicha estructura intenta averiguar las direcciones para que se muestren las imágenes o funcionen los enlaces.

1. Estás realizando el ejercicio correspondiente al curriculum virtual, y está guardado en la carpeta c_virtual. Si en dicho ejercicio vas a insertar una imagen,imagen1.gif, que se encuentra almacenada en la misma carpeta. ¿Qué dirección deberás poner en el atributo href? Para ver la solución coloca el ratón aquí.
2. Vas a crear una página índice, guardada en la carpeta curso_HTML en ella crearás un enlace cuyo destino sea el ejercicio cvirtual.htm, guardado en la carpeta c_virtual.htm. ¿Qué dirección deberás poner en el enlace? Para ver la solución coloca el ratón aquí.

En la carpeta modulo_3 vas a realizar un ejercicio denominado ejer1_mod3.htm, en él vas a crear un enlace externo a la página ejer1_mod1.htm que se encuentra en la carpeta modulo_1. ¿Qué dirección deberás poner en el enlace? Para ver la solución coloca el ratón aquí.

En el ejercicio ejer1_mod4.htm que se encuentra en la carpeta modulo_4, vas a insertar una imagen, imagen3.gif, que se encuentra en la carpeta imagenes. ¿Qué dirección deberás poner para insertar correctamente la imagen? Para ver la solución coloca el ratón aquí.

En la carpeta curso_HTML deseas crear una página índice desde la que se pueda acceder a todos tus ejercicios. ¿Qué dirección deberás poner para enlazar con la página index.html que se encuentra en la carpeta act_final.htm ¿Qué dirección deberás poner en el enlace? Para ver la solución coloca el ratón aquí.
¿ Y para enlazar con la página index.htm que se encuentra en la carpeta modulo_5, qué dirección deberás poner en el enlace? Para ver la solución coloca el ratón aquí.

Rutas absolutas y relativas

2008-03-14T23:37:00.003+01:00

En la entrada anterior hablábamos de que uno de los errores más frecuentes por los que nuestros enlaces no funcionaban o por los que las imágenes no se cargaban era porque denominábamos incorrectamente los ficheros que vamos a utilizar en Internet.
La segunda causa por la que nuestros enalces pueden fallar o nuestras imágenes no cargarse es la definición incorrecta de sus direcciones.
La dirección o U.R.L. está compuesta por el protocolo de Internet utilizado (http://); por el nombre del servidor (palmera.pntic.mec.es); por la ruta (/jmart210/index.htm) que se debe de seguir dentro del servidor para llegar al fichero que se debe de mostrar.
Un dirección de una página Web es absoluta cuando en ella indicamos el protocolo y el nombre del servidor. Por ejemplo: http://www.mentor.mec.es. Es la forma en la que escribiremos la dirección de aquellos enlaces cuyo destino esté situado fuera de nuestro sitio Web.
Ahora bien, si el destino del enlace está situado en el mismo sitio Web, podemos evitarnos escribir el nombre del protocolo y del servidor. El navegador al encontrarse un enlace en el que no se especifica el nombre del servidor, supone que se encuentra en la misma ruta que la última página cargada. Esta ruta en la que no aparecen los nombres de protocolo y servidor se denomina ruta relativa.
Si cargo mi página http://palmera.pntic.mec.es/jmart210/index.htm y en ella pulso un enlace cuya ruta es: ejercicios/practica1.htm, la dirección absoluta sería: http://palmera.pntic.mec.es/ejercicios/practica1.htm
Si mi página es http://palmera.pntic.mec.es/jmart210/index.htm y pulso un enlace cuya ruta es: pagina2.htm, la dirección absoluta sería : http://palmera.pntic.mec.es/pagina2.htm
Si pulsara un enlace cuya ruta fuese curso_htm/ejercicios/practica1.htm la dirección sería:
http://palmera.pntic.mec.es/curso_htm/ejercicios/practica1.htm
Si te fijas la ruta relativa indicada se añade a la dirección de la última página cargada, exceptuando el nombre del fichero.
En ocasiones la definición de las rutas relativas no es tan sencilla ( si utilizamos un editor de HTML éste las calcula por nosotros). Imagínate que he cargado la página, http://palmera.pntic.mec.es/curso_htm/ejercicios/practica1.htm y en ella voy a definir un enlace que me lleva a la página: http://palmera.pntic.mec.es/curso_htm/soluciones/sol1.htm. En este caso las rutas no coinciden exactamente por lo que si escribiera soluciones/sol1.htm, como en los casos anteriores la ruta no sería correcta porque se añadiría a la ruta indicada y me daría la siguiente dirección absoluta. http://palmera.pntic.mec.es/curso_htm/ejercicios/soluciones/sol1.htm que no es la correspondiente a la página deseada.
Para solucionar este problema vamos a recurrir al símbolo ../, éste indica al navegador que debe de subir un nivel en la estructura de carpetas, es decir , la carpeta activa es soluciones, si retrocede un nivel nos encontraremos en curso_htm y esta carpeta ya es común a las dos direcciones.
La ruta relativa correcta sería ../soluciones/sol1.htm. Mediante ../retrocedo un nivel y me colocaré en curso_htm y a continuación le añado la carpeta a la que debe de ir y el nombre del fichero a cargar.
Puedo utilizar todos los símbolos ../ que desee, por ejemplo ../../../practica 2.htm, indicaría que debo de subir tres niveles en la estructura de archivos y cargar el fichero practica2.htm

Nombres de ficheros en Internet

2008-02-14T23:50:00.003+01:00

En la entrada anterior citamos que una de las causas más frecuentes por las que las imágenes no se cargaban en nuestras páginas era porque no las habíamos subido al servidor de Internet y recordábamos que un documento HTML es solamente texto, que las imágenes, animaciones, gráficos, sonidos, videos, etc. que en ella se ven son ficheros externos a nuestro documento y que por lo tanto había que subirlos al servidor de Internet o enviárselos a nuestro amigo también en el correo.
Hoy vamos a nombrar otra causa frecuente por la que las imágenes no aparecen en nuestras páginas en Internet, a pesar de que estamos seguros de que las hemos subido, y también la causa por la que algunos enlaces a otros documentos no funcionan.
Esa causa es simplemente que el nombre de fichero de nuestro gráfico o del documento destino del enlace no son nombres de ficheros válidos en Internet.
Un nombre de fichero no es válido en Internet si en su nombre aparecen caracteres especiales, como por ejemplo la letra ñ o acentos. La causa es que los teclados de los servidores están configurados en idioma inglés y en inglés no existen ni la letra eñe ni los acentos.
Para agravar las cosas es muy posible que no nos demos cuenta del fallo hasta que subamos nuestro fichero al servidor, ya que en modo local, en nuestro ordenador con el teclado castellano y con Windows, los gráficos se mostrarán correctamente y los enalces funcionarán.
Deberemos poner también especial cuidado en el uso de mayúsculas y minúsculas en los nombres de ficheros, los servidores de Internet en su amyaoría utilizan UNIX o LINUX como Sistemas Operativos y estos sistemas diferencian entre las letras mayúsculas y minúsculas, para ellos dos ficheros serán iguales cuando coincidan exactamente no sólo el nombre de fichero y la extensión sino que además deberán coincidir también las mayúsculas y minúsculas que formen sus nombre.
Para finalizar dos recomendaciones. La primera es procurar no dejar espacios en blanco, hoy día Firefox y Explorer, los dos navegadores más usados, no dan errores si los nombres de ficheros poseeen espacios en blanco pero otros navegadores menos utilizados o versiones antiguas podrían no cargar el fichero por contener un espacio en blanco. Usaremos el guión bajo (_) para unir los nombres formados por dos o más palabras.
La segunda es procurar utilizar nombres cortos, llamar a un fichero El_Cuaderno_del_Tipografo.htm es perder tiempo, tipografo.htm o cuaderno.htm son nombres más racionales.

Enviar páginas Web en el corro

2008-01-22T23:07:00.001+01:00

Al comenzar el curso, los primeros ejercicios se deben enviar al tutor adjuntando nuestra página en un mensaje de correo electrónico.

Aunque todavía no se ha llegado al tema de multimedia, es bastante frecuente que en alguna página se incluyan ya algunas imágenes.

Al enviar el trabajo al tutor adjunto en un correo se suele enviar el documento HTML pero se olvida de adjuntar los ficheros gráficos correspondientes a las imágenes.

Hay que tener en cuenta que un documento HTML es un documento de texto. En su interior existe un código (texto) que es interpretado por un tipo de programa, al que nosotros llamamos explorador o navegador, que muestra en su ventana el resultado de interpretar dicho código.

En el documento HTML no están contenidos los ficheros gráficos, de sonido, de video que podemos insertar en él, solamente contiene un código que le indica al navegador que debe mostrar el gráfico que se lindica, que está guardado en la carpeta que se indica y que debe hacerlo con las dimensiones que también se especifican y nada más las imágenes no están incrustadas dentro del documento HTML como puede ocurrir en Word que solamente hay un documento, en nuetro caso tendremos un documento HTML y un archivo por cada una de las imágenes, videos, sonidos, etc. que utilicemos en la página.

A la hora de mandar nuestra página Web en el correo y posteriormente también a la hora de subirla al servidor además del documento HTML deberemos enviar o subir el resto de archivos que utilicemos en su confección.

Direcciones de páginas

2008-01-11T22:25:00.000+01:00

En muchas ocasiones al visitar el foro de noticias, los enlaces a las páginas no funcionan. La causa más frecuente es que sea un fallo mecanográfico el que origine el que la dirección no sea correcta.
Para evitar estos errores, en lugar de escribir en el correo o en el mensaje del foro la dirección, podemos escribirla antes en el cuadro de texto dirección del navegador, una vez que hayamos comprobado que la dirección es correcta, porque la página se ha cargado, seleccionamos la dirección, la copiamos pulsando encima de ella con el botón derecho del ratón y seleccionando la opción Copiar.
A continuación en el cuerpo del mensaje que vayamos a enviar al foro o por correo electrónico, hacemos clic con el botón derecho del ratón y seleccionamos Pegar.
De esta forma podemos tener la seguridad de que la dirección que enviémos nos llevará a la página deseada.

Si el video no se ve bien puedes descargárte otra versión pulsando aquí.

Presentación

2008-01-11T21:06:00.000+01:00

Mi nombre es Lorenzo Martínez y además de trabajar en un Centro de Educación de Personas Adultas en mis ratos libres tutorizo un Curso Mentor, cursos de Educación a Distancia a través de Internet organizados por el M.E.C. y las Comunidades Autónomas, en concreto dedicado a HTML.

La idea es que este blog pueda servir de ayuda a mis alumnos, también a los matriculados con otros tutores o que realicen otros cursos de HTML, no ya en lo relacionado con los contenidos o con actividades del curso sino con recomendaciones, utilidades, trucos que puedan facilitar su trabajo.

Ya aviso que éste es mi tercer intento de hacer un blog relacionado con mi trabajo y que las dos anteriores no funcionaron excesivamente bien, mejor dicho fracasaron estrepitosamente pero espero hacer bueno el refrán de "a la tercera va la vencida".