Monthly Archives: març 2011

Modificar les mides d’un vídeo

Per modificar les mides d’un vídeo inserit al vostre bloc cal modificar els valors de les etiquetes width i height al codi d’inserció.
Aquí teniu una llista de mides que mantenen la proporció:

425-373
375-329
350-307
300-263
275-241
250-219
200-175

Feu proves!

Vídeo (1)

Directament des de l’editor, podeu inserir vídeos externs procedents de YouTubeGoogle VideoiFilmRevverMetacafeMySpaceGoEar en els vostres articles o pàgines dels blocs.

Per poder inserir vídeos des de les fonts comentades, en algunes ocasions cal conèixer els seus URL i fer clic al botó de l’editor de la imatge.

anarchymediabutton.png

Se us obrirà una finestra on heu d’escriure l’URL del vídeo que voleu inserir en el vostre article o pàgina.

enterURL.gif

Per exemple, per inserir un vídeo del YouTube, podeu seguir el procediment que es descriu tot seguit.

Aneu a la web de YouTube i busqueu el vídeo que voleu inserir en el vostre article o pàgina. A la dreta de la pantalla, apareixeran diverses opcions, en funció si feu clic sobre Comparteix o Insereix. Des de l’opció Comparteix apareix una URL mentre que des de la opció Insereix del vídeo obre un camp de formulari amb un codi que cal copiar a enganxar-lo a la vista HTML de l’article:

<iframe title=”YouTube video player” width=”480″ height=”390″ src=”http://www.youtube.com/embed/_A-ZVCjfWf8″ frameborder=”0″ allowfullscreen></iframe>

Així, aconseguireu que l’article tingui un vídeo incrustat i es pugui reproduir, com en aquest exemple:

Optimitzar imatges

Tractar imatges per inserir-les al web és una tasca fonamental per incrementar la satisfacció de l’experiència d’usuari/ària i rendibilitzar la velocitat de càrrega de les nostres pàgines.
En moltes ocasions és necessari fer un tractament de les imatges originals per tal de modificar la seva mida (amplada i alçada mesurada en píxels) i el seu pes (mesurat en kb). Per fer aquest tractament disposem de molts programes i aplicacions. La nostra pràctica la farem amb un de codi lliure, el GIMP. Podeu descarregar-vos una versió portable o bé fer una instal·lació.

Tractament d’imatges. Tasques bàsiques amb el GIMP.

Obrir una imatge

Feu clic al menú “Fitxer” de la finestra principal “GIMP”.
Escolliu l’opció “Obre”.
Cerqueu la imatge que voleu obrir i un cop seleccionada feu clic al botó “Obre”.

gimp_2

Escalar una imatge

Obriu una imatge.
Feu clic al menú “Imatge” de la imatge que teniu oberta.
Escolliu l’opció “Escala la imatge”.
Modifiqueu els valors d’amplada i/o alçada i feu clic al botó “Escala”.
La cadena que mostra la fletxa blava, activa o desactiva l’opció de mantenir la proporció de la imatge. És a dir, si tenim la cadena activada i reduïm l’amplada de la imatge a 250 píxels, el programa automàticament calcularà l’alçada corresponent. Si en canvi volem modificar la imatge sense mantenir les proporcions originals hem de fer clic a la cadena abans de modificar l’alçada i amplada de la imatge.

gimp_4

Retallar una imatge

Obriu una imatge.
Feu servir l’eina “Selecció rectangular” d’eines per seleccionar una àrea de la imatge.

gimp_8

Feu clic al menú “Imatge”.
Escolliu l’opció “Escapça la selecció”.

gimp_7

Desar una imatge

Per a poder desar els canvis que heu realitzat sobre una imatge feu clic al menú “Fitxer” de la imatge i escolliu “Desa” o “Anomena i desa”. És important que la imatge la deixem en un format vàlid per la web.

Hi ha tres tipus d’imatge vàlids per a publicar a la web: JPEG, PNG i GIF. Els dos primers els farem servir per a les imatges amb molts colors, com les fotografies i el GIF el deixarem per a les imatges amb pocs colors tipus gràfiques.

Desfer una acció

Podeu desfer qualsevol acció prement Ctrl + Z o bé fent clic al menú “Edita -> Desfés”. El GIMP permet desfer moltes accions, no només l’última, cosa que ens permet treballar amb la seguretat que sempre podem tornar molts passos enrera.

Més informació

A continuació teniu una llista d’enllaços on trobar informació ampliada del programa:
Guia de programari lliure de l’XTEC: http://www.xtec.cat/at_usuari/guies/pl
Manual oficial del programa: http://docs.gimp.org/es/