How-to-do

Presentació de fotos

11 de febr. 2012, 2:34 publicada per Albert Profe

Les últimes fotos del National Geographic publicades a la web en un slide estàtic -presentació de diapositives-:

Com es fa? Molt fàcil:

1.- Codi HTML:

<div style="width:100%; overflow:auto; white-space:nowrap;">

<img src="http://www.example.com/image1.jpg">
<img src="http://www.example.com/image2.jpg">

</div>

2.- Substituir la adreça web on tens les imatges, pots col·locar tantes com en vulguis.

3.- Pots modificar la amplada (que ocupi el 80% del espai).

Recorda que per fer una presentació dinàmica des de Picassa només cal:

1.- Anar a Insereix>Presentació Web de Picassa

2.- Seleccionar una col·lecció.

També des de Insereix>Presentació (des de Google Docs)

Afegir fotos des de Picasa

22 de març 2011, 2:20 publicada per Albert Profe [ actualitzat el 24 de març 2011, 2:31 ]

Amb el mateix compte de correu de Gmail, pots obrir un compte de Picasa i desar fotos fins a un total de 10GB, es a dir, molt per sobre dels 100 MB de Google Sites.

Pots entrar en Picasa, pujar la foto i després inserir-la al Google Sites amb:

Inserir>Imatge>Adreça URL,

però també ho pots fer directament des del Sites.

Com? Aquí ho expliquem en 4 pasos:

En el Google Sites, ves a Insereix i cerca l'opció Foto de Picasa.

Insereix> Foto de Picasa
S'obrirà una finestra Insereix, on pots triar Album web de Picasa o l'opció Penjar les fotos. La primera t'ofereix inserir una foto existent al Picasa, la segona pujar-la si no hi és.
Si tries la opció Album web de Picassa només s'ha triar la imatge, en el segon cas s'ha de pujar la imatge segons els pasos següents:

Selecciona a la mateixa finestra l'arxiu -foto- que vols pujar des del teu ordinador.
Selecciona l'àlbum on es desarà la imatge. Es refereix a un àlbum prèviament creat al Picassa.
Clica el botó Pujar.

Com estem a Inserir, un cop pujada la foto es realitzaran dos accions: desar la foto al Picasa i inserir la foto on tinguis el cursor. La foto no ocuparà espai al Google Sites i es crea un link a la imatge desada al Picasa.

Web Picasa:

https://picasaweb.google.com

Imatges per afegir Fotos des del Picasa:

Afegir Vídeo

13 de març 2011, 14:05 publicada per Albert Profe [ actualitzat el 25 de març 2012, 8:52 ]

Una utilitat molt estesa i demanada és afegir un reproductor de vídeo des del propi web (o per defecte un altre web on siguem propietaris). Es a dir, el reproductor i el vídeo s'allotjaran en el vostre web. No es tracta de enllaçar un vídeo de YouTube o Google si no de tindre'l a la web i reproduir-lo directament.

Aquí teniu l'exemple:

Ho farem en 6 passos:

1.- En primer lloc, hem de descarregar el reproductor de vídeo que volem. En el nostre cas, descarreguem des de la plana:

http://www.alsacreations.fr/dewplayer-en

el reproductor DewPlayer, que és open source i fàcil instal·lar.

2.- A una plana tipus "Emmagatzematge de fitxers" del nostre Site pujarem el reproductor que volem, Dewplayer té diversos i escollim DewTube.swf. Hem de carregar el fitxer .swf a una plana d'aquest tipus ja que funciona com un FTP. Per exemple:

https://sites.google.com/site/albertprofe/documents/musica

3.- També pugem el vídeo.flv que volem a la mateixa plana. Podem separar el reproductor i el vídeo en carpetes per tindre un major ordre. En el nostre cas Avions.flv.

4.- Ara que ja tenim el reproductor -en format .swf- i el vídeo -en format .flv- a la nostra web ja podem incrustar el codi HTML corresponent on vulguem que aparegui el nostre reproductor.

5.- On posa la teva web has de escriure la direcció de la web de Google Sites on s'han pujat el reproductor i el vídeo. Recordem que en el nostre exemple era:

https://sites.google.com/site/albertprofe/documents/musica

6.- On posa video has de escriure el nom del teu vídeo. Recordem que en el nostre exemple era:

https://sites.google.com/site/albertprofe/

documents/musica/Avions.flv

ARXIUS PUJATS

CODI HTML

<object type="application/x-shockwave-flash" data="la teva web
/dewtube.swf" width="512" height="384">

<param name="allowFullScreen" value="true" />

<param name="movie" value="la teva web
/dewtube.swf" />

<param name="flashvars" value="movie=la teva web
/video.flv&width=512&height=384" />

</object>

Afegir àudio: Playlist

13 de març 2011, 8:00 publicada per Albert Profe [ actualitzat el 18 de març 2011, 14:07 ]

Nivell de dificultat: alt

En aquesta tercera part el que farem és afegir un reproductor d'àudio i unes cançons amb un menú PLaylist des del propi web (o per defecte un altre web on siguem propietaris). Es a dir, el reproductor i les cançons s'allotjaran en el vostre web.

Aquí teniu l'exemple (imatge):

Ho farem en 7 passos:

1.- En primer lloc, hem de descarregar el reproductor que volem. En el nostre cas, descarreguem des de la plana:

http://www.alsacreations.fr/dewplayer-en

el reproductor DewPlayer, que és open source i fàcil instal·lar.

2.- A una plana tipus "Emmagatzematge de fitxers" del nostre Site pujarem el reproductor que volem, Dewplayer té diversos i escollim DewPlayer-Playlist.swf. Hem de carregar el fitxer .swf a una plana d'aquest tipus ja que funciona com un FTP. Per exemple:

https://sites.google.com/site/albertprofe/documents/musica

3.- També pugem les cançons que volem en la nostra llista del reproductor a la mateixa plana. Podem separar el reproductor i les cançons en carpetes per tindre un major ordre.

4.- Ara que ja tenim el reproductor -en format .swf- i les cançons -en format .mp3- a la nostra web ja podem incrustar el codi HTML corresponent on vulguem que aparegui el nostre reproductor.

5.- On posa la teva web has de escriure la direcció de la web de Google Sites on s'han pujat el reproductor i les cançons. Recordem que en el nostre exemple era:

sites.google.com/site/albertprofe/documents/musica

6.- On posa playlist s'ha de crear un fitxer de text -amb el bloc de notes per exemple- que el desarem amb format .xlm amb els noms de les cançons. El fitxer es pot dir playlist.xlm per no tindre problemes i el pugem a la web, al mateix lloc que les cançons.

7.- Substitueix canço1,
canço2 i

canço3 amb els noms de les teves cançons

 que tenen una extensió mp3.

CODI HTML

<param name="wmode" value="transparent" />

<param name="movie" value="la teva web/dewplayer-playlist.swf" />

<param name="flashvars" value="xml=la teva web/playlist.xml&autoreplay=1&showtime=1&volume=60" />

</object>

CODI FITXER .XLM PER EL PLAYLIST

<?xml version="1.0" encoding="UTF-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/"> <title>playlist</title> <trackList> <track>

<location>canço1.mp3</location>
<title>nom-canço1</title>
</track>
<track>

<location>canço2.mp3</location>
<title>nom-canço2</title>
</track>
       <track>

<location>canço3.mp3</location>
<title>nom-canço3</title>
</track>
   </trackList> </playlist>

Afegir àudio: Llista

13 de març 2011, 0:09 publicada per Albert Profe [ actualitzat el 14 de març 2011, 9:09 ]

En aquesta segona part el que farem és afegir un reproductor d'àudio i unes cançons a una llista des del propi web (o per defecte un altre web on siguem propietaris). Es a dir, el reproductor i les cançons s'allotjaran en el vostre web.

Aquí teniu l'exemple:

Ho farem en 6 passos:

1.- En primer lloc, hem de descarregar el reproductor que volem. En el nostre cas, descarreguem des de la plana:

http://www.alsacreations.fr/dewplayer-en

el reproductor DewPlayer, que és open source i fàcil instal·lar.

2.- A una plana tipus "Emmagatzematge de fitxers" del nostre Site pujarem el reproductor que volem, Dewplayer té diversos i escollim DewPlayer-Multi.swf. Hem de carregar el fitxer .swf a una plana d'aquest tipus ja que funciona com un FTP. Per exemple:

https://sites.google.com/site/albertprofe/documents/musica

3.- També pugem les cançons que volem en la nostra llista del reproductor a la mateixa plana. Podem separar el reproductor i les cançons en carpetes per tindre un major ordre.

4.- Ara que ja tenim el reproductor -en format .swf- i les cançons -en format .mp3- a la nostra web ja podem incrustar el codi HTML corresponent on vulguem que aparegui el nostre reproductor.

5.- On posa la teva web has de escriure la direcció de la web de Google Sites on s'han pujat el reproductor i les cançons. Recordem que en el nostre exemple era:

sites.google.com/site/albertprofe/documents/musica

6.- On posa canço has d'escriure el noms de les cançons. Com hi ha més d'una les separem amb el símbol | (Alt Gr + 1, que si per alguna raó no funciona es pot escriure també %7C): és diu Pipe. No cal deixar els espais en blanc. En el nostre cas:

<object type="application/x-shockwave-flash"

data="http://la teva web/dewplayer-multi.swf?
mp3=http://la teva web/canço.mp3
&showtime=1
&bgcolor=c3d9ff
&volume=80"
width="200" height="20">

<param name="movie"
value="http://la teva web/dewplayer-multi.swf?
mp3=http://la teva web/canço.mp3
&showtime=1
&bgcolor=c3d9ff
&volume=80" />

</object>

Afegir àudio: Senzill

12 de març 2011, 9:26 publicada per Albert Profe [ actualitzat el 14 de març 2011, 1:10 ]

Aquí teniu un exemple:

Com es fa? Senzill, ho farem en tres passos:

1.- Primer de tot es tracta de afegir aquest codi HTML incrustat al lloc on vulgueu afegir l'àudio:

<embed type="application/x-shockwave-flash" src="http://www.google.com/reader/ui/3523697345-audio-player.swf" flashvars="audioUrl=Web del fitxer mp3" width="400" height="27" quality="best"></embed>

2.- Ho podeu fer directament amb el botó HTML del editor de la plana (i aleshores copieu i enganxeu el codi a la finestra que se us obre) o anar a:

Insereix>Més Gadgets...>Destacats>Embed Gadget.

3.- Necessiteu la direcció web on hi és l'àudio i l'enganxeu enlloc de "Web del fitxer mp3"; en el meu cas és aquesta, a mode d'exemple:

http://downloads.bbc.co.uk/podcasts/radio1/

mills/mills_20110311-1200a.mp3

podcast de BBC Radio1, Scott Mills (1)

Botó HTML

Finestra pel codi HTML

Barra de Navegació Horitzontal Desplegable

6 de febr. 2011, 9:30 publicada per Albert Profe [ actualitzat el 6 de febr. 2011, 10:12 ]

Instruccions - Navegació horitzontal

Apart de la barra de navegació vertical pot inserir una barra de navegació horitzontal amb desplegables, és molt senzill, segueix els passos i ho veuràs:

És necessari habilitar aquesta nova navegació, per a això utilitzeu el botó Més accions, a continuació, Administrar lloc i anar a un Lloc de disseny.
Utilitzeu el botó Canviar Disseny de Llocs i després marcar la casella de navegació horitzontal i utilitzar el botó Acceptar.
Quan tornis a la pantalla de Disseny de llocs on ja hi és la nova secció de navegació horitzontal: utilitzeu l'enllaç "editar" per afegir el contingut de les seves pàgines per a la navegació horitzontal.
Per afegir una pàgina del vostre lloc utilitzi l'enllaç "Afegeix pàgina" per mostrar el mapa web per recollir a la seva pàgina des de, o buscar la pàgina que desitja tenir a la barra de navegació horitzontal.
Si voleu afegir un enllaç a una altra pàgina web a continuació, utilitzeu l'enllaç "Afegeix URL" per a proporcionar l'adreça web i l'enllaç de text que voleu mostrar.
Si voleu fer un dels enllaços apareixen en el ratolí sobre els menús desplegables llavors necessites per fer aquest enllaç una sagnia utilitzant la fletxa de sangria,la fletxa gris que assenyala cap a la dreta (es pot utilitzar la fletxa Partners sagnia si comets un error, la fletxa gris que assenyala a l'esquerra).
Seleccioneu per mostrar el resultat de l'activitat del lloc mapa del lloc i recent si ho desitja.
Seleccioneu per mostrar la seva navegació horitzontal, ja sigui com Caixes, Pestanyes o Enllaços.
Utilitzeu el botó Acceptar per guardar els canvis i després utilitzar el botó Desa els canvis per fer la navegació horitzontal en viu.
Utilitzeu l'enllaç del lloc Tornar a veure a la seva nova navegació horitzontal.

Gràcies a Steegle i Google Traductor (com base del text desprès arrodonit i corregit). (www.Steegle.com)

Navegació horitzontal - Imatges

Ampliar la paleta de colors

6 de febr. 2011, 6:52 publicada per Albert Profe [ actualitzat el 14 d’abr. 2011, 1:40 ]

La paleta de colors RGB (inicials de red, green, blue en anglès) consta, bàsicament, de tres colors primaris additius: Vermell-Verd-Blau. Aquests colors primaris additius, en HTML, estan representats per tres parells hexadecimals del tipus 0xHH-HH-HH segons el següent format:

#RR GG BB (= #RR VV AA)

Els valors que pot adoptar cada un dels tres parells hexadecimals van del 0x00 (0 decimal) al 0xFF (255 decimal).

Com més gran sigui el valor del parell, més gran serà també la intensitat matís,lluminositat o claredat) del color corresponent a aquest parell (i viceversa). Això implica que l'extrem inferior de l'escala cromàtica parteix d'una intensitat (grau) de color mínima (nul = parell 0x00), passa per una intensitat de color mitjana (mitjà = parell 0x80 [128 decimal]) fins arribar a una intensitat de color màxima (saturat = par 0xFF).

El grau de més alta puresa (absolut) d'un color primari additiu estarà determinat per la presència total d'aquest (saturació = 0xFF) juntament amb l'absència total (nul·litat = 0x00) dels altres dos colors primaris additius.

Canviar el color codi HTML:

Aneu a Gestiona el Lloc > Aparença del Lloc > Colors i tipus de lletra.
Tria la zona del site que vulguis personalitzar, des de el fons de la plana fins la plana completa o l'àrea de contingut (títol, lletra, fons). També la capçalera i barra de navegació.
Opteu per l'opció Personalitzat, el marqueu i deixeu de banda les opcions de 'Valor Predeterminat del Tema' i 'Cap'.
Escriu el número hexadecimal codi HTML de colors que comença per # de sis xifres.

Llistat sencer de colors i codis, here i al blog, here.

Exemple canvi color fons de plana

hem triat el color personalitzat #ee6ee4

Posar un link a una imatge

6 de febr. 2011, 2:27 publicada per Albert Profe [ actualitzat el 26 de nov. 2011, 14:32 ]

Exemple de Link a una imatge

que el fem apuntar a google.cat

Ho podem fer de dos maneres:

una amb el quadre-botó propietats de la imatge només inserida
o modificant el codi HTML.

Amb botó propietats:

Utilitzeu el menú Inserir i trieu la imatge a afegir a la seva pàgina.
Seleccioneu (o feu clic) a la imatge -Propietats- i podràs veure l'opció Enllaça en el quadre de diàleg que apareix: utilitzar l'enllaç Modificar.
S'obra Crea un enllaç. Pots triar la pàgina que vols vincular o ves a la pestanya d'adreces web i afegir l'URL que voleu establir com a vincle -link-.
Utilitzeu el botó D'acord -OK- i la seva imatge ara s'enllaça amb la pàgina o adreça web que has triat.

Codi d'instruccions HTML:

Només aquestes instruccions si voleu introduir manualment l'enllaç en codi HTML.

Utilitzeu el menú Inserir i la imatge per afegir la seva imatge a la pàgina.
Un cop afegida la imatge a la pàgina de Llocs Web, Google fa que la imatge tingui de forma automàtica un enllaç en si mateixa, per la qual cosa necessitem alterar aquest enllaç per que apunti a la pàgina web que volem: per a això cal utilitzar el botó HTML per editar el codi HTML al voltant de la imatge.
Una vegada en el codi HTML trobar el codi de Link

<a href="web que volem linkar"> </ a>
Al voltant de la imatge i canviar el contingut de la

href ="web que volem linkar"

a l'adreça web que vulgueu apuntar.
Si voleu afegir una etiqueta de text alternatiu a la imatge, així que la imatge no es descarrega o una persona amb discapacitat visual mitjançant un lector de pantalla pot llindar d'obtenir la informació de les imatges que transmet afegir

alt = "text alternatiu"

a l'interior de la <img> etiquetes.
Si vols donar més informació de la imatge de l'enllaç on el portarà a continuació,afegiu un atribut de títol a la relació: per fer aquesta extensió

title = "text descriptiu" a la <a href="...">
Si voleu que l'enllaç s'obri en una nova finestra a continuació, afegiu un atribut de destinació per a l'enllaç:

target = "_blank" a la <a href="...">

Amb botó propietats:

Codi d'instruccions HTML:

Codi HTML a modificar

Codi HTML modificat

Si no trobeu l'etiqueta <a> </a> s'ha d'afegir

</a>

Imatges seguides (horitzonal)

6 de febr. 2011, 1:56 publicada per Albert Profe [ actualitzat el 27 de nov. 2011, 1:44 ]

Instruccions

Per obtenir imatges d'una fila -es a dir, seguides- s'haurà de modificar el codi HTML per treure l'etiqueta </div> inserida per Google Sites per

alinear les imatges - segueix aquestes instruccions:

Inseriu la primera imatge, aneu a Insereix i a continuació, la imatge.
Inserir segona imatge i subsegüents de la mateixa manera.
Modificar el codi HTML utilitzant el botó HTML
En el codi HTML treure el <div style="display: block; style="text-align: left;"> i </ div> que envolta a cada imatge (pots desfer-te dels enllaços a la imatge si vols també)