dijous, 31 de gener del 2013

El mapa de Google

Els mapes de Google ens donen la possibilitat d'inserir-los en una pàgina web, sigui una imatge gran dins d'un missatge o una més petita a la barra lateral que indiqui la situació del nostre centre.
Anem a Google Maps, escrivim l'adreça del lloc, ens aproximem al punt desitjat i centrem al mapa. Podem triar la visualització de mapa o de satèl·lit. Un cop tenim la zona desitjada, cliquem el símbol d'enllaç i copiem el codi HTML com indica la imatge.

Si el volem inserir com un gadget a la barra lateral, cliquem Format - Afegeix un gadget - HTML/JavaScript, posem el Títol i a la zona de Contingut enganxem el codi que tenim a la memòria. Ara caldrà que retoquem el codi en funció del lloc on el vulguem inserir. El codi següent està adaptat a la nostra barra lateral. El que es veu en negreta és el que hem retocat.

<iframe width="250" height="250" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.es/maps?f=d&amp;source=s_d&amp;saddr=41.675528,2.781499&amp;daddr=&amp;hl=ca&amp;geocode=&amp;sll=41.675761,2.781872&amp;sspn=0.00236,0.002411&amp;t=h&amp;mra=mift&amp;mrsp=0&amp;sz=19&amp;ie=UTF8&amp;ll=41.675761,2.781872&amp;spn=0.00236,0.002411&amp;output=embed"></iframe><br /><small><a href="https://maps.google.es/maps?f=d&amp;source=embed&amp;saddr=41.675528,2.781499&amp;daddr=&amp;hl=ca&amp;geocode=&amp;sll=41.675761,2.781872&amp;sspn=0.00236,0.002411&amp;t=h&amp;mra=mift&amp;mrsp=0&amp;sz=19&amp;ie=UTF8&amp;ll=41.675761,2.781872&amp;spn=0.00236,0.002411" style="color:#0000FF;text-align:left">Mostra un mapa més gran</a></small>

Cliquem Desa. Ara hem de desplaçar el nostre gadget (queda a dalt) fins al lloc de la barra lateral on el volem veure i Desar organització. Ja podem Visualitzar el blog per veure'n el resultat.

Com fem el títol?

Sempre queda maco personalitzar el títol. I si és amb 3 D i fons transparent encara més... Aquí us deixem una imatge amb el que hem fet nosaltres amb el Microsoft Word 2010 (arxiu model) i el Paint Shop Pro, dues eines que tenim a l'escola.


Un cop tenim la imatge que ens servir de títol, ja podem anar a Format - Editar la barra de l'encapçalament - 
Seleccionar la imatge (si ja en tenim una, suprimir la imatge abans) - Ubicació (enlloc del títol i la descripció).

Hi ha webs on es poden fer Títols 3D molt més fàcilment. Només hem d'escriure el text, la lletra (tipus, mida, estil i color). Cliquem Preview i si ens agrada ja ens podem desar la imatge.

dimecres, 30 de gener del 2013

Més vídeos a Vimeo, el karaoke

No tot s'acaba en YouTube. A Vimeo la compartició és semblant. Cliquem Share-Show options, modifiquem la mida i el color de fons i copiem el codi per enganxar-lo a la pestanya HTML. En les opcions del vídeo hem de recordar de no activar mai l'Autoplay per no alentir la càrrega de la pàgina.
En aquest vídeo trobem una altra utilitat dels vídeos que és la de poder fer de karaoke.

Documents Google al blog

Des de Drive - Documents de Google també podem inserir al blog documents de text, documents PDF, dibuixos, presentacions, full de càlcul, formularis... que un cop inserits s'actualitzaran automàticament cada vegada que nosaltres modifiquem el fitxer original (si deixem activada aquesta opció). En tots els casos, per trobar el codi que hem d'afegir a la pestanya HTML, cal obrir el fitxer i al menú Arxiu clicar Publica al web.

<iframe height="300" src="https://docs.google.com/document/d/1PWbTPUT-FKKZEF0jxUanbOgC68YT3P11_6iSmslrnyQ/pub?embedded=true" width="550"></iframe>

Al codi, hi hem hagut d'afegir el que està en negreta per adaptar la mida a l'espai del blog. No ens oblidem de centrar els objectes inserits!

Document de text


Full de càlcul


Formulari


De presentacions de Google en podeu veure en aquesta mateix blog en aquesta entrada.

Issuu: Documents i presentacions

Ara penjarem un document sobre animals fantàstics, fet per alumnes de 3r, a Issuu. Va ser fet amb l'Open Office, fusionades totes les pàgines en un sol document i exportat a PDF.
Cal dir que, abans de pujar documents PDF o presentacions, aquest web demana que ens registrem. Un cop pujat triga uns minuts en estar disponible per a enllaçar-lo o descarregar-lo.
Com sempre, cliquem l'embed, configurem la mida i el color de fons, copiem el codi i l'enganxem a la pestanya HTML de l'entrada.
El codi antic té més opcions de configuració i no deixa publicitat


I aquí teniu què fa el codi nou...

SlideShare: document PDF i presentació

Una presentació pujada a internet perd les interaccions. Aquesta l'hem pujada (Upload) a SlideShare, ha trigat uns quants minuts en fer la conversió. Al cap d'una estona ja la podem veure a My Uploads. L'hem obert  i no funcionava.
Des del Power Point 2010 hem desat la presentació en format PDF. Conservava la interactivitat. L'hem pujat i funciona però no és interactiu. En descarregar-lo a l'ordinador torna a ser-ho.
Hem clicat el botó d'Embed, hem triat la mida mitjana (514 x 422) i n'hem copiat el codi. Ara ja el podem enganxar a la pestanya HTML del missatge. No ens oblidem de centrar l'objecte inserit.

Ara he provat amb una altra presentació no interactiva i sí ha funcionat. Ho podeu veure... 

dimarts, 29 de gener del 2013

Un blog accessible

Què podem fer per fer que el nostre web sigui més accessible? Donar la possibilitat de:
  •  canviar la mida de la lletra:  12   13   15     Ho podem fer inserint el codi següent en un gadget HTML/JavaScript de la barra lateral. 
<span style="font-weight:bold;">Mida de la lletra:</span> 
<a href="javascript:void(0);" onclick="javascript:body.style.fontSize=&apos;12px&apos;"><span>12</span></a> 
<a href="javascript:void(0);" onclick="javascript:body.style.fontSize=&apos;13px&apos;"><span>13</span></a> 
<a href="javascript:void(0);" onclick="javascript:body.style.fontSize=&apos;15px&apos;"><span>15</span></a>

Volem afegir o canviar mides de la lletra? Cap problema. Podem afegir un fragment de codi nou o canviar la parella de números en negreta.
Per augmentar/disminuir la mida de la lletra en el navegador, sempre podem fer servir les combinacions de tecles: Control + o Control- o mentre premem la tecla Control, moure la rodeta del ratolí.

  • escoltar els textos en comptes de llegir-los, amb l'ajuda del web VozMe. Nosaltres hem triat l'opció més senzilla d'implementar: L'usuari selecciona el text que vol sentir.... mitjançant un botó d'imatge i text. Hem copiat aquest codi que hem inserit en un gadget HTML/JavaScript a la barra lateral.
<script type="text/javascript" src="http://vozme.com/get_text.js"></script>
<button style="background:white url(http://vozme.com/img/paper_sound32x32.gif) 
 no-repeat left center;  min-height: 35px;  font-size:70%; padding:4px 4px 4px 35px;" 
 onclick="get_selection('ca','ml');">Selecciona un text i<br/>clica aquí per sentir-lo</button>
* Fa poc que en català ha deixat de funcionar. Però continua funcionant en castellà i en anglès...
  • traduir els missatges a un altre idioma gràcies al gadget de Blogger que hem afegit (Tradueix amb l'opció desplegable) a la barra lateral.
  • cercar informació dins del mateix blog amb el gadget de Blogger (Quadre de cerca amb totes les pestanyes activades) a la barra lateral.
Més informació sobre accessibilitat.

Els vídeos - Youtube

Ara veurem tot el procés per publicar un vídeo, inserir-lo i canviar-ne la mida.

Els últims canvis de Google han fet molt més senzill el procés d'inserció. Des de la mateixa entrada al bloc, cliquem Insereix un vídeo i ja podem cercar-lo entre els nostres vídeos de YouTube... Però si cliquem Càrrega-Tria un vídeo per penjar, el vídeo s'emmagatzemarà amb les imatges de Picasa on tenim un espai limitat. (Si només t'interessa el procés d'inserció clica aquesta entrada del bloc)

Podem agafar una gravació de la festa de l'escola, editar-la amb el Movie Maker o un altre programa d'edició de vídeo i penjar-la al YouTube i inserir-la al blog. Aquests dos últims passos són els que podem veure en el següent vídeo:


Aquest vídeo mostra tot el procés de pujada i compartició fins a inserir el codi en una zona HTML en el blog. Si volem modificar les mides per fer-lo més gran, o  fer-lo més petit per posar-lo a la barra lateral, ens  caldrà modificar l'amplada i l'alçada del vídeo (sempre mantenint la proporcionalitat).

<center>
<iframe allowfullscreen="" frameborder="0" height="344" src="http://www.youtube.com/embed/YmL6C29CdQQ" width="459"></iframe>
</center>

Per adaptar-lo a l'espai de la barra lateral-ample 250 px  =>>  344 X 250 / 459 = 187 píxels d'alçada.
El nou codi serà:

<center>
<iframe allowfullscreen="" frameborder="0" height="187" src="http://www.youtube.com/embed/YmL6C29CdQQ" width="250"></iframe>
</center>

Consell: Si hem d'inserir molts vídeos en el mateix missatge, o a la mateixa pàgina hi ha molts vídeos, la velocitat de càrrega del blog baixarà molt. Podem anar a Configuració-Entrades i baixar el número de missatges a la pàgina principal, fer i compartir la llista de reproducció dels vídeos dins el teu canal de YouTube, donar-los l'enllaç perquè els vagin a visualitzar d'un en un a YouTube o baixar la mida dels vídeos (si els volen veure grans sempre podran triar veure'ls a pantalla completa). Podem trobar més vídeos a Vimeo.

Kizoa: fotos animades

A Kizoa podem fer diapositives i col·lages amb efectes de transició, text, música... Cal registrar-se.
Hem de pujar les fotos i anar triant els efectes. La versió gratuïta, al costat de la versió Premium, no té massa opcions per triar però es pot fer un treball molt digne per inserir al blog. A Slideshare teniu un tutorial detallat de Kizoa.


Compte si en poses molts a la pàgina principal. Tenen arrencada automàtica.
Podem fer un treball semblant des d'altres webs com PictureTrail (tutorial) o Photopeach.(tutorial

El calendari / l'agenda d'activitats

A la barra lateral hi podem inserir un calendari que, connectat amb el Google Calendar, pot servir també d'agenda d'activitats.
Si voleu un calendari buit per a la barra lateral, podeu copiar aquest codi. Les mides en negreta es poden canviar.

<iframe src="https://www.google.com/calendar/embed?showTitle=0&amp;showPrint=0&amp;showTabs=0&amp;showCalendars=0&amp;showTz=0&amp;height=250&amp;wkst=2&amp;hl=ca&amp;bgcolor=%23FFFFFF&amp;src=nld7snrt25b64p9q15d6hor37g%40group.calendar.google.com&amp;color=%23875509&amp;ctz=Europe%2FMadrid" style=" border:solid 1px #777 " width="250" height="250" frameborder="0" scrolling="no"></iframe>

    
Calendari                                                                  Agenda d'activitats
Si aneu seguint aquest vídeo pas a pas podeu fer-vos la vostra agenda d'activitats.

La mascota

En les classes dels nens més petits les mascotes solen tenir molt d'èxit. Les animacions que tenen en moure el ratolí solen estar molt ben fetes. A aquest gatet li podem donar menjar o el podem fer jugar amb una pilota.
A Bunnyhero Labs en trobarem una per adoptar. Li posem nom, escrivim qui l'adopta, podem canviar-li el color... i en acabat cliquem Finish.
Ara cal dir-li a quin espai web ens el volem endur i endur-nos el codi: Other sites - icona de Blogger - Copy.
Si el volem inserir com un gadget a la barra lateral, cliquem Format - Afegeix un gadget - HTML/JavaScript, posem el Títol i a la zona de Contingut enganxem el codi que tenim a la memòria.Cliquem Desa. Ara hem de desplaçar el nostre gadget (queda a dalt) fins al lloc de la barra lateral on el volem veure i Desar l'organització. Ja podem Visualitzar el blog per veure'n el resultat.

dilluns, 28 de gener del 2013

Els arxius d'audio: música, podcast...

Els arxius de so (mp3) i els arxius flash (swf), no es poden inserir directament sinó que primer els hem de pujar a una pàgina que es dediqui a contenir aquest tipus de fitxers.
Pot ser ivoox,  Soundcloud o Goear. Per pujar fitxers a aquests webs, caldrà registrar-se.
Podem gravar una entrevista, un poema o una nadala cantada pels nens de la classe amb el programa Audacity. Permet tallar silencis, modificar el volum... i exportar el so gravat a mp3.

Amb la sessió iniciada a Ivoox, cliquem Subir - Selecciona el archivo de audio - Cerquem el fitxer mp3 i cliquem Obre. El fitxer ja comença a pujar i mentrestant podem omplir la fitxa del que pugem amb el títol, descripció, categoria, tags... i acabem clicant Envia. Podem fer un canal on posar-hi més fitxers... Al cap d'uns 5-10 minuts, el tema ja està preparat per compartir-lo i fer-lo públic.

Per portar-lo al blog, cliquem la icona de compartició, després Portar-lo al blog i copiem el codi del reproductor que ens agradi. Recordem que l'hem d'enganxar en un missatge després de clicar el botó HTML. Cliquem el botó Redacta i expliquem el que es podrà escoltar. Ja veiem el gadget i el podem desplaçar on vulguem o centrar-lo.
També el podem inserir com un gadget a la barra lateral. És possible que en aquest cas hàgim de triar un reproductor "mini" o redimensionar l'ample si el codi té una amplada superior a 250 píxels.

A les imatges podem veure com s'obté el codi a SoundCloud i a Goear.

Street View

Ara que hem vist el mapa de Google, pot ser que ens interessi aprofitar Street View per a identificar millor el lloc.
Igual que en el mapa de google, anem a Google Maps, escrivim l'adreça del lloc, ens aproximem al punt desitjat i centrem al mapa. Ara hem d'arrossegar el ninot de color taronja fins al lloc desitjat i girar fins a estar encarats a l'edifici. Amaguem el mapa que hi ha a la part inferior dreta, cliquem el símbol d'enllaç i copiem el codi HTML com hem fet abans amb el mapa de Google.
Si el volem inserir com un gadget a la barra lateral, cliquem Format - Afegeix un gadget - HTML/JavaScript, posem el Títol i a la zona de Contingut enganxem el codi que tenim a la memòria. Ara caldrà que retoquem el codi en funció del lloc on el vulguem inserir. El que es veu en negreta és el que hem retocat.

<iframe width="250" height="250" . . . 

Cliquem Desa. Ara hem de desplaçar el nostre gadget (queda a dalt) fins al lloc de la barra lateral on el volem veure i Desar organització. Ja podem Visualitzar el blog per veure'n el resultat.

            Mostra en un mapa més gran

La previsió del temps

Aquest gadget ens el podem descarregar de la pàgina Eltiempo.es. Cal triar la província, la ciutat, el format (atenció a la amplada - surt a la columna de la dreta), personalitzar el contingut, modificar l'amplada per adaptar-la a la vostra barra lateral (250 píxels?). Acceptem les condicions, generem el codi i el copiem.

<center>
<div id="c_c4ad5ba8fe09ef669ebb78cb1d3ad6a7" class="completo"></div><script type="text/javascript" src="http://ca.eltiempo.es/widget/widget_loader/c4ad5ba8fe09ef669ebb78cb1d3ad6a7"></script>
</center>

Si el volem inserir com un gadget a la barra lateral, cliquem Format - Afegeix un gadget - HTML/JavaScript, posem el Títol i a la zona de Contingut enganxem el codi que tenim a la memòria. Les etiquetes <center> i </center> faran que el gadget quedi centrat. Cliquem Desa. Ara hem de desplaçar el nostre gadget (queda a dalt) fins al lloc de la barra lateral on el volem veure i Desar organització.
Ja podem Visualitzar el blog per veure'n el resultat.

 Més idees sobre el temps

Les hores amb quarts en català

La gràcia d'aquest rellotge es troba en el fet que expressa les hores amb quarts. Així ajudem a conservar les expressions tradicionals i facilitem l'aprenentatge al que no hi estigui familiaritzat.
Ens podem descarregar el codi des d'aquesta pàgina de Comunicació Digital. El podem personalitzar triant el format, el color i la mida. Cliquem Crea rellotge i ens ensenya el codi que cal copiar i enganxar al blog.
Aquest codi que veieu aquí correspon al rellotge de dalt amb una mida de 250 píxels.

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0" width=250" height="133"><param name="movie" value="http://www.comunicaciodigital.com/rellotge_catala_incrustat/eHORACAT.swf?t=5&w=230&h=120" /><param name="wmode" value="transparent" />
<embed src="http://www.comunicaciodigital.com/rellotge_catala_incrustat/eHORACAT.swf?t=5&w=230&h=120" width="250" height="133" wmode="transparent" type="application/x-shockwave-flash"/></embed></object>

Si el volem inserir com un gadget a la barra lateral, cliquem Format - Afegeix un gadget - HTML/JavaScript, posem el Títol i a la zona de Contingut enganxem el codi que tenim a la memòria. Les etiquetes <center> i </center> faran que el gadget quedi centrat. Cliquem Desa. Ara hem de desplaçar el nostre gadget (queda a dalt) fins al lloc de la barra lateral on el volem veure i Desar organització.
Ja podem Visualitzar el blog per veure'n el resultat.

Podeu trobar més models de rellotges a Clocklink.com

dijous, 17 de gener del 2013

Les activitats flash

Els arxius flash (swf), com els d'audio (mp3), no els podem pujar directament al blog. Han d'estar allotjats en una altra web o a Dropbox.
Per inserir un arxiu flash necessitem escriure a la pestanya HTML el codi següent:

<object type="application/x-shockwave-flash" data="URLarxiu.swf" width="ample" height="alt">
<param name="movie" value="URLarxiu.swf" /></object>


Després hem de substituir URLarxiu.swf per l'adreça de l'arxiu flash que volem inserir. Finalment hem d'ajustar l'amplada i l'alçada de l'objecte inserit.

Nosaltres hem anat al blog de Mates divertides i hem trobat aquest experiment: http://www.matematicasdivertidas.com/Zonaflash/juegosflash/tangram.swf . A vegades no és tan fàcil saber l'adreça de l'arxiu flash. En les mides, després d'algunes proves hem decidit posar 500 d'ample i 500 d'alt.
El resultat del codi és el següent:

<object data="http://www.matematicasdivertidas.com/Zonaflash/juegosflash/tangram.swf" height="500" type="application/x-shockwave-flash" width="500">
<param name="movie" value="http://www.matematicasdivertidas.com/Zonaflash/juegosflash/tangram.swf" /></object>

Només ens queda centrar l'objecte. Des del menú Redacta seleccionem l'objecte i l'alineem al centre. Des del menú HTML escrivim <center> abans del codi l'objecte i </center> al final del mateix codi.