17/05/09

11.6. Configuració connexió FTP amb Filezilla

Un cop ens hem registrat a tripod, dins el seu servei de host (allotjament, hostatge de planes web) gratuït, el pas següent serà configurar un programa de FTP per a poder transferir el resultat del disseny del nostre lloc web al servidor. Per a fer-ho farem servir el programa Filezilla, de programari lliure, fàcilment configurable.

caixa_filezilla

Font de la imatge: arxiu propi

Continuant amb la tònica de fer servir aplicacions portables, l'inclourem dins la nostra clau USB. A la web de Portable Applications trobarem un enllaç que ens permetrà baixar-nos l'aplicació portable; concretament la versió 3.2.3.1.

Filezilla01 Filezilla02 Filezilla03

Un cop desada al lloc de la nostra elecció, clicarem a Options de la Suite Portable Appplications i a Install New Applications. Informarem on està la versió portable i aquesta es començarà a instal·lar dins la Suite; normalment, trigarà una estona ja que ho està fent en la clau USB, més lenta que una unitat de dis dur.

Filezilla04

En acabar la instal·lació trobarem ja la referència al nou programa instal·lat dins la interfície de presentació de la Suite.

Filezilla05

Obrim Filezilla Portable. Ens demana en quina llengua volem que s'obri. Seleccionem català i ja tenim obert el Filezilla. Observem que hi ha com tres parts de les quals ens interesen les dues centrals: lloc local i lloc remot.

Filezilla06 Filezilla07

Per a començar a fer servir Filezilla cal anar al Gestor de Llocs i començar la configuració del lloc que hem aconseguit de manera gratuïta a Tripod.

Cliquem en Afegeix un lloc. Posem, per exemple, Web NVU Info 4t Lycos. Amb les dades de connexió al ftp de tripod que hem rebut a la nostra bústia de correu electrònic, després de registrar-nos, configurem la connexió.

Filezilla08 Filezilla09

Filezilla10 Filezilla11

Filezilla12

Un cop acabada la configuració cliquem a Connecta i ara sí que ja tenim connexió amb el nostre servidor remot. Només cal començar a tametre tots els fitxers i carpetes de la plana web que hem dissenyat.

Filezilla13

11.5. Estructura exercicis web

web_nvu_11

Font de la imatge: arxiu propi

12/05/09

11.4. Canviar l'idioma de les aplicacions portables

En els primers temes d’aquets curs havíem muntat una clau USB amb tot un seguit de programes portables dins la Suite Portable Applications.

En alguns moments del curs, hem fet servir aquestes aplicacions, però una de les dificultats que ens hem trobat ha estat l’idioma ja que la llengua de la suite és l’anglès.

Doncs bé ara explicarem com canviar l’idioma de les aplicacions portables contingudes a la Suite Portable Applications.

Un cop hem inserit la nostra clau a un dels ports USB del nostre ordinador i aquest l’ha reconeguda, procedirem a executat el fitxer d’inici de Portable Applications. Un cop l’aplicatiu s’ha engegat, triem com a exemple per a canviar l’idioma l’aplicació per a dissenyar i crear planes web KOMPOZER. Observem que l’aplicació s’inicialitza en anglès. Minimitzem l’aplicació.

Ara cercarem el paquet d’idioma que farem servir per a la traducció del KOMPOZER. Si volem el paquet d’idioma espanyol ens anirem a la plana web del projecte NAVE que conté tot un seguit de paquets en espanyol per a la traducció de complements i del mateix Firefox. Si el que volem és el paquet en català anirem a la plana web oficial del Kompozer. Tant en un cas com en l’altre, el paquet d’idioma és un fitxer d’extensió xpi.

projecte_nave projecte_nave01 kompozer01

Restaurem el Kompozer i anem a Tools Extensions.

kompozer02

A la finestra que s’acaba d’obrir cliquem a Install.

kompozer03

Ara indicarem al programa on està el paquet d’instal·lació de Kompozer en català, per exemple.

kompozer04

Cliquem a Abrir.

kompozer05

Ara cliquem a Install Now.

kompozer06

Haurem tornat a la finestra inicial que ens informa que cal reinicar Kompozer per a que agafi el canvi d'idioma. Ho fem i en fecte apareix traduït al català.

kompozer07

Aquest procediment és aplicable a qualsevol dels programes portables de la Suite Portable Applications sempre i quan es disposi del fitxer de traducció (extensió xpi). En cas de voler canviar l'idioma de NVU, podem anar a buscar el fitxer d'idioma xpi a la plana de descàrregues del projecte NAVE -per poder baixar el fitxer d'idioma cal clicar el botó dret del ratolí a sobre de l'enllaç XPI de idioma, dins el paràgraf NVU 1.0, i seleccionar en el menú contextual Anomena i desa el contingut de l'enllaç ..., per a poder desar el fitxer-.

07/05/09

11.3. Editors web: NVU i Kompozer

Dins les aplicacions que ofereix el programari lliure, els dos editors web més coneguts són el NVU i el Kompozer.

Nvu

És un editor de pàgines web multiplataforma basat en el Mozilla Composer, però d'execució independent, i afegeix característiques noves com a editor integrat de CSS i millor gestió del protocol FTP per a actualització dels fitxers.

La pàgina principal del projecte és http://www.nvu.com/.

KompoZer

És el successor no oficial d'Nvu 1.0. Consisteix en Nvu 1.0 amb una sèrie de correccions i pegats no oficials desenvolupats per moderadors i usuaris molt actius dels fòrums en anglès de Nvu.

La pàgina d'KompoZer és http://www.kompozer.net/.

Tant KompoZer com Nvu tenen les mateixes característiques, tot i que KompoZer ha depurat alguns errors i millorat lleugerament l'editor CSS. És recomanable triar KompoZer.

Tant NVU com Kompozer tenen entre les seves funcionalitats més destacades les següents:

  • Editor web WYSYWIG amb la representació del motor Gecko 1.7. WYSIWYG és l'acrònim de la frase anglesa "What You See Is What You Get" (el que veus és el que obtens). En l'àmbit del disseny es refereix a la tecnología informática que permet que el que es veu durant l’edició es correspongui més o menys acuradament amb el resultat final (imprès o en pantalla). Gecko (en català es traduiria per dragó) és un motor de renderitzat o de navegació lliure.
  • Opcions especials per a la inserció d'imatges, taules, formularis ... .
  • Generador automàtic de taules de contingut basat en els nivells de capçalera.
  • Editor CSS avançat, amb capacitat de crear i utilitzar tant arxius CSS externs com fulles incrustades en l'arxiu HTML mitjançant etiquetes <style>.
  • Possibilitat de definir i utilitzar plantilles.
  • S'accepten etiquetes PHP sense alterar el seu contingut. PHP és un llenguatge de programació interpretat utilitzat per a generar pàgines web dinàmiques
  • Netejador de codi HTML.
  • Enllaç directe amb el validador HTML del W3C. El World Wide Web Consortium (W3C) és un consorci internacional que treballa per a desenvolupar i promocionar estàndards per a la web.
  • Completa ajuda incorporada al programa.

Font de la imatge: arxiu propi

11.2. Què es necessita per a fer una pàgina web?

La resposta a aquesta pregunta dependrà bàsicament del nivell de coneixements que l’usuari tingui. La resposta podria ser doble:
  • Si l’usuari té un nivell bàsic. Aleshores la xarxa ofereix tot un seguit de recursos, on-line, integrants de la ja coneguda web 2.0, que posibiliten dissenyar una pàgina web en tres o quatre clics, de manera molt intuitiva i que no vol coneixements de llenguatrge html ni de programació. El resultat serà molt vistós a nivell gràfic i suficient per a una persona que vulgui donar-se a conèixer en l’entorn digital de la xarxa.
  • Si l’usuari té un nivell avançat. Aleshores voldrà entrar a investigar i explotar els recursos que oferix el disseny d’un espai web.

En el cas d'un usuari avançat que vulgui dissenyar un espai web, des de zero, el material que es necessita per a la creació de les pàgines és el següent:

  • Editor de pàgines WEB. Com ha és habitual haurem de triar entre programari lliure i programari propietari. En el nostre cas, ens decantarem pel programari lliure.
  • Espai en un servidor on es guardarà la pàgina creada. Trobarem servidors de molts tipus i de tots els preus i gratuïts.
  • Editor d'arxius gràfics. Donat que ja tenim prou coneixements sobre el programa triarem GIMP.
  • Editor de text. Amb la Llibreta ja n’hi ha prou, però segur que podrem disposar de l’OpenOffice, com a mínim.

Font de la imatge: arxiu propi

11.1. Llenguatge html

Quan parlem d'un lloc web ens estem referint en realitat a un conjunt d'arxius que poden ser de text, àudio, gràfics, etc., que estan lligats mitjançant un llenguatge de marques anomenat HTML(Hyper Text Markup Language).

El llenguatge HTMLpermet crear pàgines web, que no són més que arxius amb l'extensió htm o html. Les pagines web s'allotgen en servidors web, que són ordinadors dedicats a aquesta dfunció que estan connectats de manera permanent a internet.

L'avantatge de l'HTML és que ens deixa presentar diversos arxius en forma simultània (text juntament amb un vídeo, gràfics en forma de botons, etc.). A més a més, compta amb la possibilitat de crear enllaços o hipervincles (hyperlinks), que s'encarreguen de connectar les pàgines web entre si. Això significa que podem "saltar" d'una pàgina web ubicada a USA, a una altra que està a Espanya o Japó en manera immediata, fent que les distàncies geogràfiques desapareguin a la xarxa.

Per poder accedir als llocs web utilitzarem un navegador, que és el programari encarregat de presentar aquesta informació en forma amigable.

  • Lloc Web. Conjunt d'arxius.
  • Pàgina Web. Arxiu en format HTML o HTM.
  • Hipervincle. Objecte que s'utilitza per enllaçar arxius (pàgines web, imatges, àudio, etc.).
  • Servidor web. Ordinador connectat a Internet que allotja llocs web o arxius que poden ser sol·licitats a través de la xarxa.

Font de la imatge: arxiu propi

04/05/09

10.3. Compartir presentacions amb Slideshare