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/

Enllacem!

No es pot entendre Internet sense els enllaços entre documents, és un desl seus fets diferenciadors davant altres sistemes de comunicació de la informació.

Podem vincular des dels nostres articles altres documents, pàgines web, etc. Caldrà sempre seleccionar un text o una imatge i ,una vegada s’activi la icona ‘Insereix/edita un enllaç‘ omplir les dades de la finestra següent:

imagen-3

Observeu els camps a omplir:

  • URL de l’enllaç
  • Destinació (a la mateixa pantalla-finestra o en finestra-pestanya nova)
  • Classe

Els omplim i fem cic sobre el botó ‘Insereix‘. L’enllaç ja està preparat! Publiqueu i comproveu el seu comportament.

Inserir una imatge

Per inserir una imatge a un article del nostre bloc podem utilitzar diferents maneres:

  • Copiar i enganxar directament. En ocasions aquesta opció no s’executa, depenent fonamentalment del navegador i de l’aplicació des de la qual volem fer aquesta acció
  • Fer clic sobre la icona ‘Afegeix una imatge‘ situada a la part superior dreta d ela zona d’edició de l’article. Veureu tres opcions diferenciades: ‘Des de l’ordinador’, ‘Des d’una URL’ i Mediateca

Com afegir una imatge a un article del nostre bloc

Iniciarem la pràctica inserint una imatge des d’una URL. Segui les indicacions de la pantalla gran ;-))

Opcions generals

Les opcions generals del bloc es poden governar des del menú superior i lateral esquerre, Opcions > General.

xtecblocs72.png xtecblocs73.png

Si voleu, podeu canviar el nom del bloc (compte, no ho confongueu amb l’URL o adreça d’accés: no és el mateix). També podeu fer canvis en la descripció del bloc i fer que els visitants es registrin o no per deixar comentaris. L’adreça electrònica no es pot canviar. Cal tenir en compte que aquesta adreça serà on rebreu les diverses informacions que us enviï el sistema. Si feu algun canvi, recordeu de prémer Desa els canvis.

xtecblocs71.pngAltres canvis que podeu fer corresponen als formats de l’hora, la data i el calendari.

Aparença

L’aparença visual són un conjunt d’arxius que defineixen l’aspecte i el comportament visual del bloc. Acostumen a integrar part de codi PHP que genera els documents HTML acompanyat d’uns fulls d’estils que defineixen.

Aquesta separació del contingut i del disseny deixa modificar l’aspecte visual del bloc amb molt poc esforç i sense que afecti el contingut del bloc. Això permet, finalment, la disponibilitat de diferents aparences visuals. L’aparença que teniu assignada al vostre bloc es pot saber ràpidament:

xtecblocs126.png xtecblocs127.png

xtecblocs129.png

Si voleu més informacio sobre aquest tema consulteu l’AJUDA de l’aplicació

Articles i pàgines

Els articles són les diferents entrades que feu en el bloc i que estan lligades a la data en la qual s’ha portat a terme l’entrada. Els articles apareixen publicats a la pantalla principal del bloc ordenats cronològicament, de manera que el darrer article apareix en la primera posició. Les pàgines són similars als articles, tret que funcionen fora de la cronologia normal del bloc. Podeu utilitzar les pàgines per organitzar i escriure-hi qualsevol contingut. Normalment, les pàgines es col·loquen en el menú superior i/o lateral del bloc, mentre que els articles es mostren a la columna central, a la part superior, els més recents i, a mesura que aneu baixant, els més antics.

Fem un bloc (1)

Per crear el nostre bloc utilitzarem el servei XTECBlocs del Departament d’Ensenyament. Aquest entorn està creat específicament pels docents a partir de l’editor de blocs WordPress. Les seves condicions d’ús estan especificades al mateix aplicatiu. Llegiu-les amb deteniment.

Una vegada llegides les condicions anem a crear el nostre bloc!

Sí, més coses!!!

Resulta una mica complicat fer-se una imatge aproximada del que significa per a l’usuari d’Internet allò que anomenem Web. 2.0. Pot ser una ullada a les següents adreces ens ajudi a entendre millor de què estem parlant.

Visiteu la web Mapa Visual de la Web 2.0 i l’entrada de la Wiquistart.

I aquesta altra adreça d’un… Mapa conceptual

I si una vegada vist això no heu tingut prou… què tal aquesta pàgina:

El món de la web 2.0