10 abril, 2009

Imágenes IV

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.

Lorenzo Martínez. @ 12:00 PM   0 comments

21 noviembre, 2008

RSS

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.

Lorenzo Martínez. @ 11:34 PM   0 comments

17 noviembre, 2008

FAVICON

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

Lorenzo Martínez. @ 11:27 PM   0 comments

15 noviembre, 2008

Imágenes III

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.

Lorenzo Martínez. @ 3:36 PM   0 comments

15 julio, 2008

Imágenes II

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.

Lorenzo Martínez. @ 5:36 PM   0 comments

21 junio, 2008

Imágenes I

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.

Lorenzo Martínez. @ 8:33 PM   0 comments

13 abril, 2008

Vamos a ejercitarnos un poco

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

  3. 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í.


  4. 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í.


  5. 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í.

Lorenzo Martínez. @ 12:59 AM   1 comments