viernes, 23 de julio de 2010
COMO CREAR UN ENLACE CON IMAGENES
En el capítulo anterior vimos como crear un enlace (link) utilizando un texto. Como sabes, no solo puedes crear enlaces usando texto, sino también imágen, puedes insertar una imagen en tu página utilizando ![]()
:
Esto insertaría la imagen "dibujo.gif" en la página. Ten en cuenta que si pruebas este ejemplo en tu ordenador debe existir una imagen con este nombre. Si no es así puedes utilizar cualquiera que tengas. También es importante que la imagen esté guardada en la misma carpeta que el documento html donde lo estás creando, si no es así, la imagen no se verá.
En el caso de que estés utilizando una imagen que esté en una carpeta distinta (por ejemplo 'images') tendrás que modificar la línea de esta forma:
... es decir, es muy importante que indiques el camino (o path) donde está almacenada la imagen. (Si no sabes qué es una carpeta o un 'camino' o un 'path' deberías aprender antes algo de Windows, tienes tutoriales gratis en http://www.territoriopc.com/)
Para hacer que esta imagen sea un enlace que salte a la página de Disney simplemente hay que realizar la siguiente modificación:
De esta forma tan simple, al hacer click con el ratón sobre la imagen, automáticamente pasaremos a la página http://www.disney.com/
Puedes probar en una página de prueba con varios enlaces de este tipo, eso si, asegúrate de utilizar imágenes que ya existan en tu ordenador.
Existen otras posibilidades a la hora de crear enlaces, por ejemplo puedes llegar a crear un botón. Pero para ello es mejor utilizar JavaScript, que es un sencillo lenguaje de programación gracias al cual podemos mejorar sensiblemente el aspecto de nuestras páginas.
viernes, 16 de julio de 2010
Enlaces Con Imágenes
Los enlaces hipertexto pueden ser también definidos sobre imágenes de tal forma que al picar con el ratón sobre algún punto de la superficie de éstas, se pase al documento correspondiente. Esto suele ser utilizado sobre todo para introducir botones de navegación en las páginas HTML.
http://www.google.com.co/
Una imagen que actúa de hiperenlace se distingue mediante un borde de color alrededor de ésta, como puede observarse en el ejemplo anterior.
Si en un enlace se indica la dirección de una imagen dicha imagen no será cargada junto con la página sino que será cargada sólo en el caso de que dicho enlace sea activado.
Pasos: En tu Panel de Admin vas a Links, Editar (o añadir) seleccionas el que quieras, te vas a avanzado y pegas el link de la imagen en donde lo indica.
http://www.google.com.co/
Una imagen que actúa de hiperenlace se distingue mediante un borde de color alrededor de ésta, como puede observarse en el ejemplo anterior.
Si en un enlace se indica la dirección de una imagen dicha imagen no será cargada junto con la página sino que será cargada sólo en el caso de que dicho enlace sea activado.
Pasos: En tu Panel de Admin vas a Links, Editar (o añadir) seleccionas el que quieras, te vas a avanzado y pegas el link de la imagen en donde lo indica.
Logros
LOGROS
- Identifica el proceso de conformacion de las diferesntes clases de red.
- Conoce el proceso mediante el cual se produce las comunicaciones en la red.
- Identifica y experimenta procesos para presentar trabajos que desarrollen su creatividad.
- Elabora trabajos que permitan el desarrollo del conocimiento sobre la tecnologia.
Contenidos
CONTENIDOS
- Enlaces con imagenes.
- Creacion de portal en internet.
- ¿Cuales son los beneficios.?
- ¿Que es una tarjeta de red?.
- Concentradores y computadores.
- Modems y routers.
- Medios de transmision.
- Cable coaxial
- Cable por trenzado.
- Tecnologia movil.
- Procesos que sigue para el manejo de programas.
- Proyectos de ciencia tecnologia.
viernes, 4 de junio de 2010
TRATAMIENTO DE IMAGENES PARA LA WEB
Las imágenes son una parte importante de la web. De hecho, la mayoría de las páginas web distribuyen su espacio entre texto e imágenes.
Éstas añaden una nota de color a los sitios y si se usan correctamente, ayudan al usuario a entender de lo que se está hablando.
Tipos de imágenes
Los formatos de imágenes web más usados son .gif, .jpg y .png:
GIF: es un formato de archivo sin pérdida, es decir, se conserva cada pixel de la imágen original, lo que implica que el tamaño suele ser mayor que en formatos .JPG. No obstante, para gráficos sencillos con pocos colores es muy eficiente. Sin duda su mayor ventaja frente a los otros formatos es que permite crear animaciones
JPG: comprime mucho más las imágenes que los formatos .GIF, por lo que los archivos pesan menos. Es excelente para trabajar con fotografías de muchos colores y texturas, mantiene la calidad con pesos de imagen realmente bajos. Como inconveniente pierde algo de información y puede afectar a su calidad, pero en la mayoría de los casos no es apreciable a simple vista. No permite crear imágenes animadas.
PNG: este formato surgió como alternativa al .GIF debido a algunos problemas legales que empezaron a surgir de su uso. Es, por tanto, muy similar a éste, salvo que no permite crear animaciones.
Herramientas de edición de imágenes
Ya se comentó brevemente en este manual un poco acerca de los editores de imágenes. Si haces páginas webs deberías tener en tu ordenador un programa de este tipo para poder editar las imágenes a tu gusto.
Para crear tu web, se necesita un programa de edición de imágenes que te permita modificarlas, cambiar el tamaño, añadirles notas de texto, cambiar el formato y sobre todo optimizarlas para la web.
Puede parecer algo complementario, pero conforme vayas creando tu web te darás cuenta de que necesitas un programa que te permita editar tus imágenes, ya sea de forma sencilla, como por ejemplo recortando o ampliando su tamaño, o con métodos más sofisticados como los filtros de imagen.
Algunas de las cosas más básicas que se pueden hacer con estos editores de imágenes y que nos sirven de ejemplo, son:
Recortar una imagen
Esto es muy útil para eliminar de la imagen partes que no queremos. Por ejemplo, puede venirte muy bien la foto de un paisaje como este, pero no querer incluir el marco amarillo:
Redimensionar la imagen
A menudo una imagen es más grande o más pequeña de lo que necesitamos, y aunque puede establecerse su tamaño exacto mediante los atributos width y height, no es la forma adecuada de cambiar su tamaño, ya que en realidad no lo estamos modificando, lo que estamos cambiando es su forma de verse en el navegador (el archivo sigue teniendo el mismo tamaño). La mejor opción es utilizar un programa de dibujo como el Photoshop que cambie el tamaño real de la imagen.
Rotar una imagen
En ocasiones es útil cambiar la orientación de una imagen, pra esto se puede usar cualquier editor gráfico. Puede rotarse de forma vertical u horizontal en varios angulos, en la mayoría de los programas buenos te permite rotar la imagen un número determinado de grados.
Filtros de imagen
Los filtros pueden llegar a transformar una imagen por completo dándole efectos increíbles. Con ellos, podrás dar a tus imágenes un aire diferente. Lo mejor para comprenderlo es ver algunos ejemplos, éstos en concreto han sido hecho con Photoshop:
Imagen original:
Los formatos de imágenes web más usados son .gif, .jpg y .png:
GIF: es un formato de archivo sin pérdida, es decir, se conserva cada pixel de la imágen original, lo que implica que el tamaño suele ser mayor que en formatos .JPG. No obstante, para gráficos sencillos con pocos colores es muy eficiente. Sin duda su mayor ventaja frente a los otros formatos es que permite crear animaciones
JPG: comprime mucho más las imágenes que los formatos .GIF, por lo que los archivos pesan menos. Es excelente para trabajar con fotografías de muchos colores y texturas, mantiene la calidad con pesos de imagen realmente bajos. Como inconveniente pierde algo de información y puede afectar a su calidad, pero en la mayoría de los casos no es apreciable a simple vista. No permite crear imágenes animadas.
PNG: este formato surgió como alternativa al .GIF debido a algunos problemas legales que empezaron a surgir de su uso. Es, por tanto, muy similar a éste, salvo que no permite crear animaciones.
Herramientas de edición de imágenes
Ya se comentó brevemente en este manual un poco acerca de los editores de imágenes. Si haces páginas webs deberías tener en tu ordenador un programa de este tipo para poder editar las imágenes a tu gusto.
Para crear tu web, se necesita un programa de edición de imágenes que te permita modificarlas, cambiar el tamaño, añadirles notas de texto, cambiar el formato y sobre todo optimizarlas para la web.
Puede parecer algo complementario, pero conforme vayas creando tu web te darás cuenta de que necesitas un programa que te permita editar tus imágenes, ya sea de forma sencilla, como por ejemplo recortando o ampliando su tamaño, o con métodos más sofisticados como los filtros de imagen.
Algunas de las cosas más básicas que se pueden hacer con estos editores de imágenes y que nos sirven de ejemplo, son:
Recortar una imagen
Esto es muy útil para eliminar de la imagen partes que no queremos. Por ejemplo, puede venirte muy bien la foto de un paisaje como este, pero no querer incluir el marco amarillo:
Redimensionar la imagen
A menudo una imagen es más grande o más pequeña de lo que necesitamos, y aunque puede establecerse su tamaño exacto mediante los atributos width y height, no es la forma adecuada de cambiar su tamaño, ya que en realidad no lo estamos modificando, lo que estamos cambiando es su forma de verse en el navegador (el archivo sigue teniendo el mismo tamaño). La mejor opción es utilizar un programa de dibujo como el Photoshop que cambie el tamaño real de la imagen.
Rotar una imagen
En ocasiones es útil cambiar la orientación de una imagen, pra esto se puede usar cualquier editor gráfico. Puede rotarse de forma vertical u horizontal en varios angulos, en la mayoría de los programas buenos te permite rotar la imagen un número determinado de grados.
Filtros de imagen
Los filtros pueden llegar a transformar una imagen por completo dándole efectos increíbles. Con ellos, podrás dar a tus imágenes un aire diferente. Lo mejor para comprenderlo es ver algunos ejemplos, éstos en concreto han sido hecho con Photoshop:
Imagen original:
Optimizar las imagenes
es para ocupar el espacio menos posible y conserven una buena calidad de imagen. Si las imágenes son muy pesadas (si su tamaño es muy grande), las páginas web tardan mucho en cargar y hacemos esperar a los usuarios, lo que no conviene en ningún caso. Cuanto menos ocupen más rápido cargará tu página y menos harás esperar a tus visitantes.
Suscribirse a:
Entradas (Atom)