Ja sabeu quin llibre regalareu o us comprareu, per què no, el dia de Sant Jordi? Entre la múltiple i variadíssima oferta d’obres literàries que es presenten cada Diada, una que té l’èxit assegurat és, sens dubte,  “El juego del ángel” del mediàtic i arxiconegut arreu del món, Carlos Ruiz Zafón. L’escriptor barceloní és l’autor de “L’ombra del vent” la novel·la ambientada a Barcelona dels anys 40, distribuïda a més de 50 països i amb més de 10 milions d’exemplars venuts. Dic que serà un bestseller perquè surt amb una tirada d’1 milió d’exemplars i més de 50.000 llibres reservats! Alguns diuen que el fenomen Zafón és el “Harry Potter” de la indústria editorial espanyola. Ahh! Si us en queden ganes de més, sapigueu que aquestes dues novel·les són la primera i la segona respectivament d’una tetralogia de l’autor…  Demà 17 d’abril surt a la venda, que no se us escapi!

M@rt@

Fa uns pocs dies ens vam aixecar amb la sorpresa de la conformació del nou Govern espanyol. Després de la jornada electoral del passat 9 de març on els ciutadans vam escollir els nostres representants al Congrés i aquests van elegir, a segona votació, el nou president del govern, José Luis Rodríguez Zapatero.

El govern del PSOE ha volgut donar les primeres passes cap a la modernitat i la igualtat. La bona notícia és que per primer cop a la història d’Espanya, hi ha més dones que homes en càrrecs ministerials. Ni més ni menys que, 9 dones front als 7 càrrecs masculins. De debò, ja és hora que arribi la paritat a la nostra societat, que les dones aconsegueixin plenament les mateixes oportunitats, condicions i salaris que els homes. I que millor que encetar aquest reclam per un lloc on l’accés femení sembla singular i estrany: la política i el Govern. Només Finlàndia, democràcia consolidada i d’elit, té a més dones al Govern (representen un 64%, mentre que a Espanya representa un 52%), encara ens queda camí per recórrer. Tot i això, aplaudim aquesta mesura, i la de la creació del nou Ministeri d’Igualtat, això sí, els ciutadans també esperen una millora real i factible a les seves vides, per la democràcia i per la igualtat de drets.

Aquest vídeo és història: es tracta de la primera dona en posar “ferms” al cos de l’exèrcit, no és una altra que Carme Chacón, la primera dona al front del Ministeri de Defensa al nostre país.

M@rt@

A la darrera classe del Taller web vam aprendre a fer finestres emergents o “pop up’s” de dos tipus diferents amb les imatges.

- Finestra “pop up” amb unes mesures determinades: Obrim una nova pàgina .htm al Dreamweaver i col·loquem una imatge gran (320×480) amb marges 0 (modificar>propietats de la pàgina).  Llavors en una altra pàgina  posem una imatge més petita i a la part inferior, al vincle posem un marcador (#). Anem a la barra superior Finestra> comportaments> seleccionar imatge> signe “+”> obrir finestra del navegador> examinar> seleccionar pàgina amb la fotografia gran (en aquest cas “popup.htm”) i indicar les mesures corresponents (ample i alt de la finestra) i posem el nom genèric de la pàgina (ex: caricatura).  També ens indica si volem seleccionar alguna característica de la finestra (canvi de tamany, barra de menú, d’ubicació o de navegació). A “comportaments” surt “OnLoad” i despleguem la llista i marquem “<A>on click”, això serà el que dispari el pop up.

- Finestra “pop up” que es tanca si la cliques: Seguim els passos anteriors, però al vincle, en comptes de posar el marcador, hem d’escriure javascript:window.close(); Guardem i fem F12 a la pàgina.

També ens van ensenyar a fer mapes d’imatge que és quan una mateixa imatge té diferents enllaços que van a diversos llocs:

- Primer, posar una imatge a la pàgina del Dreamweaver, seleccionar-la i prémer un dels botons de la part inferior del disseny, depenent el que vulguem (seleccionar un quadrat, un cercle o una forma irregular). Llavors quedarà marcada en color blau la zona de link escollida dins de la imatge.

I a més a més, sabem tots els secrets de les plantilles. Generalment a tots els sites hi ha parts que són comunes a totes les pàgines del lloc (logotip, menú, banner, copyright…), sent només una part la que canvia.

- A l’hora de definir plantilles, només podrem canviar el contingut a les pàgines, mentre que la plantilla es mantindrà a totes elles (cal seleccionar l’opció d’actualitzar i així els canvis fets a la plantilla s’aplicaran a totes les pàgines quie utilitzin aquesta plantilla).

- Les plantilles les hem de guardar com a arxius de plantilla (.dwt – dreamweaver template). A les zones que volguem editar posteriorment (és a dir que siguin contingut) seleccionem amb el botó dret> plantilla> regió editable> nom (titular o contingut)> guardar.

- Per obrir una pàgina de la plantilla, fer arxiu nou> pestanya de plantilla> seleccionar la plantilla correscsponent. A partir d’aquí anar creant pàgines (guardar com a .htm) amb el contingut divers. Si volem linkar, s’ha de fer a la plantilla (està al directori “templates”) i enllaçar amb la pàgina corresponent, després actualitzar, i comprovar que funcioni bé amb l’F12.

I ara, les properes dues classes seran per fer la pràctica final: fer el web de l’hotel Miramar de Badalona, ens donaran la plantilla i haurem d’anar creant els continguts i posar en pràctica tot el que hem après! Molta sort!!

M@rt@

A la darrera classe del taller web vam aprendre la importància del posicionament que tenen les pàgines web, cal esmentar el paper que tenen els títols i la importància de posar-ne un encertat i adequat, ja que aconseguirem que els usuaris ens trobin fàcilment quan ens busquin a la xarxa a través dels “buscadors”. Vam consultar diverses eines, disponibles a la mateixa xarxa, que ens poden donar un cop de mà.

- Recerques de Google: Habitualment fem servir el servei de recerca de Google i ens ofereix resultats “naturals” i de “pagament”. També hi ha paraules clau, la competència de l’anunciant i el volum de recerques (sempre és millor ordenar per aquest concepte, ja que ens indica quins són els termes que la gent busca més -apareixen a dalt, i els que es troben més ràpidament -surten a la part inferior).

Per tal de posicionar el nostre web hem d’utilitzar al títol paraules que es relacionin fàcilment amb la temàtica del site. Al Google, els resultats que apareixen a la columna dreta són “anuncis patrocinats”, és a dir, les empreses paguen per cada “clic” que fan els usuaris sobre el seu enllaç (no paguen per aparèixer), com més a dalt està un anunci, més gent entrarà i per tant és més car per l’empresa que decideix col·locar la publicitat (té un límit diari, si s’exhaireix, l’anunci desapareix). Evidentment, Google posa a dalt la publicitat que més benefici li donarà. Com a curiositat, sapigueu que el “totpoderós” Google és l’espai que més beneficis té per publicitat , és el suport més rentable i efectiu!

Tota aquesta ordenació té a veure amb la indexació de documents que utilitzen, entre altres, les biblioteques. DOnant molta importància a la densitat de paraules clau (títol i descripció), quantes més en té, aconsegueix més rellevància.

- Google Trends: Mostra el nivell de notícies que s’han buscat sobre un tema en un temps determinat (nivell d’entrades, les notícies més buscades) i ens facilita fer comparatives entre dues matèries i veure quins són els temes més buscats al Google.

- Google Adwords Keyword Tools: Indiques una paraula i et dóna quines són les expressions i mots que més es busquen.

- Page Rank (barra d’eines de Google): Mesura la importància i la popularitat del web, simplement col·locant el cursor sobre el botó “Page rank” de la part superior del navegador i apareixen els números (6/10, 10/10). Funciona amb un sistema logarítmic que determina la rellevància del site amb un sistema anomenat “democràtic web”: quants links apunten cap a la teva pàgina?

- Google Analytics: Dóna informació sobre el tràfic cap al nostre site: per quines paraules et troben, la informació que més interessa del web, les que no atrauen als usuaris, d’on provenen els internautes (país i ciutat), el navegador que utilitzen (per usar un codi compatible), el tipus de connexió…

- Google Sitemaps: Hi ha informació sobre posicionament, ja que mostra les URL que hi ha al teu web. Prèviament has de fer una llista (.txt) on s’inclouen tots els enllaços de que disposa la pàgina i així el sistema les indexa més ràpidament.

La passada classe vam treballar i molt!! 3 posts de teoria, un rècord!!

Ara li toca el torn als estils de les pàgines que creem amb Dreamweaver. Els estils vénen definits pels CSS (que podem trobar amb el cursor a la pantalla clicant el botó dret del ratolí> estils> CSS) que marquen l’aparença del nostre web.

- Si creem un nou estil CSS> etiqueta> body> nou arxiu pàgina ens servirà per canviar el color de fons de la pàgina, la tipografia i el color de la mateixa.

- Si en canvi volem aplicar un estil predeterminat anteriorment, hem de clicar el botó dret> estils CSS> administrar estils> adjuntar.

- Per modificar un estil, prémer el botó dret> estils CSS> administrar estils> seleccionar estil> editar> body> editar.

- A les etiquetes disponibles per editar CSS, de moment, només hem vist les “a” que es refereixen als enllaços de la pàgina web. Botó dret> estils CSS> administrar estils> seleccionar estil> editar> body> afegir “a”. Aquí podrem modificar l’aparença dels enllaços (subratllat, color, tipografia…).

- I la pregunta del milió? Com podem fer perquè quan passem el ratolí per sobre d’un enllaç aparegui subratllat? I aquí està la resposta! Hem d’anar a la pestanya del codi de l’estil en concret> copiar de “a ….{ ….. a }” i enganxar-ho a sota i afegir “a:hover” al principi de la segona còpia que hem enganxat. Després anem a editar CSS> sortirà el a:hover que acabem de crear i aquí escollir subratllat.

- També podem crear estils “.cabecera” per les capçalesres de les taules, per exemple, l’estil es crea a la pestanya desplegable d’estils i es pot aplicar a les parts superiors de les taules…

Fins la propera i bona Setmana Santa a tots!

M@rt@

Els marcadors (#) en una pàgina web llarga, en la que ens hem de desplaçar amb la barra de la part dreta, ens ajuden a no perdre un punt concret de la mateixa que estavem visitant. Aquests es marquen al Dreamweaver amb el botó de l’ancora. Els passos a seguir són el següents.

- Col·locar una “àncora” a la línia concreta on volem que que després ens redreci (exemple: Capítol 1).

- Seleccionar la part de l’índex o de l’inici de la pàgina on al clicar anirà a la part que hi ha més avall de la pàgina (que abans hem marcat amb l’àncora). I donar-li un nom al vincle (exemple: #cap1).

- Per enllaçar una pàgina amb una part concreta d’una altra pàgina, el procés és similar. Només haurem de clicar el botó “assenyalar arxiu” i unir la fletxa amb la pagina amb la que volem linkar. A més d’afegir a l’apartat de vincle el marcador on prèviament haurem fixat i situat l’àncora (#cap 2).

Sembla difícil i liat però no ho és tant. Continuarà…

M@rt@

Avui us proposo que visiteu una exposició, si més no curiosa, sobretot pel seu emplaçament. “Refugi: quan el refugi és el subsòl” no està a cap museu ni galeria, sinó al metro de Barcelona, concretament al vestíbul de l’estació d’Universitat (L1 i L2). I evidentment, aquesta localització no és casual, és el lloc idoni per sentir i aprendre el que va passar ara fa tot just 70 anys quan l’aviació italiana i alemanya, sota les ordres de Franco, va bombardejar la ciutat de Barcelona. Els supervivents recorden 3 dies que foren especialment durs, el 16, 17 i 18 de març de 1938. Només aquests 3 dies es van llançar més de 300 bombes durant 41 hores, van morir 979 persones i 1.500 van quedar ferides. La capital catalana es va convertir en banc de proves de les potències feixistes. Cap altra ciutat de món havia sigut abans bombardejada des de l’aire de forma tant sistemàtica i durant tant de temps. Els atacs, que no tenien objectius militars, pretenien desmoralitzar i crear el pànic i desconcert en la població. L’única opció era la defensa passiva: es van crear a Barcelona més de 200 refugis per ordre de la Generalitat i construïts per iniciativa popular, això juntament a les andanes del metro van protegir la població civil i van salvar nombroses vides.

Centrant-nos en l’exposició, s’ha recreat l’estació d’Universitat de 1938 dissenyada com una reproducció a escala del que va ser en aquell temps emprada com a refugi antiaeri. A l’altra banda s’hi recrea una estació prototípica del present, setanta anys després dels bombardeigs. Plantejada com una reflexió, allà es poden veure projeccions dels bombardeigs de la ciutat i arreu del món, imatges històriques de Barcelona, obres artístiques inspirades en els bombardeigs o bé cites de personatges il·lustres que recreen i defineixen tota una època.

Si us interessa aquest tema, s’ha creat un web especial per conmemorar el 70è aniversari: http://www.barcelonabombardejada.cat

Teniu temps fins el 6 d’abril, no us ho perdeu! És una manera de conéixer i conmemorar uns fets tràgics però reals emmarcats en una guerra civil i en la posterior dictadura caracteritzada per la imposada manca de llibertats. No oblidem la cèlebre cita, que ens recorda el destí dels que s’oposen a recordar el nostre passat: “els pobles que obliden la seva història estan condemnats a repetir-la”.

M@rt@

Hola a tots!

A la darrera classe del taller web vam estar “experimentant” amb els formularis que es poden crear amb el Dreamweaver. Breument us descriuré en què va consistir el “tutorial”:

- Per crear formularis hem de buscar aquesta opció a l’apartat de comú, a la part superior del programa.

- Primer de tot hem de seleccionar la casella de “formulari” (un quadrat amb les vores discontínues i de color vermell) i fer uns “enters” dins del quadre. entre les opcions que hi podem col·locar hi ha:

• Camp de text: Serà l’espai que l’usuari emplenarà amb les dades que se li demanen. Si el tenim marcat, a la part inferior de les propietats SEMPRE hem de posar un nom (sense accents, ni espais…). Allà també podem modificar l’amplada del rectangle, introduir valors en forma de contrasenya (que no es vegin els caràcters sinó que apareguin els puntets, els caràcters màxims (per exemple 5 dígits pel codi postal).
• Àrea de text: És el mateix que el camp de text però es fa servir si les dades a introduir són textos més llargs (comentaris, currículum…). Podem seleccionar les línies màximes que volem que tingui i igualment l’hi haurem de posar un nom a les propietats. També podem mantenir el format del quadre amb les opcions “virtual” i “predeterminat” o si seleccionem “desactivat” s’escriurà tot en una mateixa línia.
• Botó d’opció: Als que posem, anomenar-los d’igual manera, així quan es seleccioni un l’altre quedarà deseleccionat (per exemple en cas home-dona).
• Casella de verificació: DOnar-li un nom i a l’etiqueta posar “si”.
• Llista d’opcions/Menú: Serveix per posar en una llista desplegable les opcions que pot triar l’usuari, en referència a productes o al país de procedència, per exemple. Seleccionant afegir (+) podrem introduir en nom i després un codi, que ens servirà a nosaltres com a referència (en el cas dles països és aconsellable que el codi sigui el codi telefònic del país – Espanya 34). Amb les fletxes podem ordenar-los. També fora bo que la primera opció que aparegui a la llista fos la de “Seleccionar” corresponent amb el codi 00.
• Camp ocult: No apareixerà a la pàgina peròes pot posar. Igualment li hem donar un nom a la taula de propietats.
• Botó: Serveix per posar “Enviar” (perquè ens arribi) o “Restablir el formulari” (s’esborren totes les dades introduïdes). El nom de l’etiqueta serà el mateix que aparegui al botó.

- Si volem centrar els camps millor col·locar-los en una taula i centrar-la.

- Seleccionant tota la taula, a la part de propietats posar el vincle amb la url on volem que s’enviïn aquelles dades.

Uff, i aquesta només és la primera part!

M@rt@

I ara una mica de teoria, que ja tocava! El passat dissabte 8 de març a classe del Taller web vam començar a manejar el programa Dreamweaver, aquí us poso el que vam aprendre a fer:

- El primer cop que es fa servir l’eina Dreamweaver s’ha de seleccionar Administrar llocs> Seleccionar i crear una nova carpeta, en aquest cas li direm “taller web”, dins del folder DTD.

- S’obre un nou arxiu, avui una pàgina d’HTML (index.htm).

- Dreamweaver és un programa que genera codis, i aquests es poden copiar i enganxar a d’altres aplicacions que utilitzin aquest codi font, com pel nostre blog de WordPress.

- Per fer enllaços interns a Dreamveawer: cal subratllar el nom, buscar la carpeta dins de la columna dreta del programa, prémer el botó “assenyalar arxiu” i arrossegar la fletxa cap a la carpeta o pàgina.

- Per fer enllaços externs: escrivim l’enllaç de la pàgina externa a la casella de “vincle” (part inferior de la finestra) i perquè els usuaris no ens perdin com a pàgina referent seleccionarem destí>blank (així la nova pàgina s’obrirà en una nova finestra del navegador).

- Si volem veure la visualització o aspecte de la pàgina hem de prémer F12 (amb Internet Explorer) o Control+F12 (Mozilla Firefox).

- Propietats de la pàgina (Finestra>Propietats): També podem modificar el color del fons o de la lletra. Curiosament es pot canviar el color dels vincles (i així diferenciar els nous, dels ja visitats o fins i tot que canviïn de color quan cliquem a sobre de l’enllaç). Els marges també es poden modificar i posar amb més espais o a 0.

- Títol/codificació: És important definir el títol del document (per tal de facilitar la seva cerca), s’ha d’escollir la codificació Europeu occidental (per defecte).

- Inserció de vídeos i imatges: Després d’escollir un vídeo del Youtube o altres formats, copiem el codi corresponent a la pestanya de “codi” (no a la de disseny). També podem insertar un flash o imatge amb moviment i interactivitat. Les imatges s’enganxen directament. És important saber que tot el que insertem al nostre web ha d’estar guardat a l’arxiu on tenim localitzada la nostra carpeta.

- Creació de taules: Funciona com un processador de textos, hem de prémer la icona de taula de la part superior i li indiquem el número de columnes i files que volem que tingui, a més de la vora. Per seleccionar tota la taula hem de col·locar el cursor a la mateixa, clicar amb el botó dret del ratolí, escollir “taula” i “seleccionar taula”. l’aplicació ens permet modificar el tipus de lletra i el color s’aquesta o del fons. Per treballar millor és preferible que ocupi el 100% de l’espai, quan la tinguem enllestida ja la reduirem. Per fer espais a l’interior de les caselles hem de prémer Control+Shift+Barra espaiadora i per fer un salt de línia més estret cal prémer Intro+Shift.

El dissabte seguirem… Fins la propera!

M@rt@

Aquestes assignatures em recorden als vells temps …

En realitat són proves del Dreamweaver, ja que a classe hem aprés a fer taules i aquest és un exemple!

M@rt@