Eines de creació Web
Abans de poder analitzar i presentar les possibilitats de les eines de creació Web, convé repassar alguns dels conceptes tècnics sobre la Web i les tecnologies relacionades. Existeixen moltes eines que permeten desenvolupar portals amb un aspecte i prestacions professionals, encara que la majoria requereixen una fase inicial d’aprenentatge amb una duració variable segons els casos.
Editors visuals WYSIWYG
WYSIWYG, en anglès allò que veus és el que obtens, és un terme que s’aplica als processadors de text i altres editors de text amb format, com els editors de HTML, que permeten escriure un document veient el resultat final. En el cas dels editors d’HTML, aquest concepte s’aplica a aquells programes que permeten escriure la pàgina sobre una vista preliminar semblant a la d’un processador de textos, ocupant-se el programa, en aquest cas, de generar el codi font en HTML.
Exemples d’editors d’HTML del tipus WYSIWYG són:
- Adobe Dreamweaver
- Adobe GoLive
- NVU/Kompozer
- FrontPage
- Amaya
Front Page
El FrontPage és un programa de MS Windows per a l’edició de pàgines web, del que s’han fet un gran nombre de versions que han anat millorant el seu funcionament, tot i que des del 2006 ha deixat de comercialitzar-se.
En un principi, el FrontPage era un programa per al disseny de pàgines simples, encara que les noves versions han augmentat les seves prestacions. Malgrat tot, al ser un producte elaborat per una empresa, Microsoft, està orientat a construir pàgines optimitzades per al navegador Internet Explorer. Aconseguir pàgines amb el FrontPage que es vegin bé en altres navegadors: el Firefox, l’Opera, el Mozilla, etc. pot ser complicat.
Algunes de les crítiques al FrontPage fetes amb més freqüència pels usuaris són:
- Molt sovint inclou imatges a les que no li assigna una ruta relativa, necessària després per a què es vegin les imatges a Internet, sense avisar a l’usuari. En el seu lloc posa la ruta absoluta de la imatge en local, de tal manera que el creador de la pàgina serà l’únic que la veurà a Internet.
- Crea directoris on guarda la informació que només el mateix programa entén i que poden crear confusió i fins i tot provocar errors.
- Crea barres de navegació que després no funcionen.
- Inclou formularis mal escrits en HTML, que fan impossible la seva transmissió per correu electrònic.
Adobe Dreamweaver
L’Adobe Dreamweaver, originalment creat per Macromedia, és una eina professional de desenvolupament de projectes web. Les versions inicials de l’aplicació servien d’editors d’HTML WYSIWYG simples, però versions més recents han incorporat un notable suport per a moltes altres tecnologies com CSS, JavaScript, entre d’altres. El programari està disponible per a les plataformes de Mac i Windows, però també pot ser utilitzat en sistemes operatius basats en Unix, sempre que funcionin mitjançant una emulació virtual de la plataforma de l’MS Windows. Des del 2005 el Macromedia Dreamweaver és propietat de l’Adobe Systems.
Com a qualsevol editor de WYSIWYG, l’Adobe Dreamweaver permet amagar els detalls del codi d’HTML de les pàgines de l’usuari, fent possible que els dissenyadors web desconeixedors del llenguatge HTML puguin crear pàgines web, amb la tècnica d’arrossegar i deixar anar (drag and drop).
Una crítica important dels dissenyadors web professionals a aquest tipus d’enfocament és que l’Adobe Dreamweaver produeix pàgines HTML amb més quantitat de codi HTML del que és necessari, la qual cosa pot fer que els navegadors web funcionin més lentament. Això es justifica perquè l’aplicació fa molt fàcil la creació de disposicions basades en taules.
Altres retrets que els desenvolupadors de llocs web fan al programa és que el codi que produeix, sovint no compleix les recomanacions del W3C, encara que això ha millorat d’alguna manera en versions més recents. Tanmateix, en versions posteriors de l’aplicació, s’ha augmentat el suport per a CSS i proposa altres maneres de plantejar una pàgina sense taules, amb la possibilitat de transformar-les en capes i viceversa.
L’Adobe Dreamweaver permet als usuaris visionar els llocs web utilitzant altres navegadors, amb l’única condició que s’instal·lin a l’ordinador. També incorpora eines de gestió de llocs, així com com la possibilitat per trobar i reemplaçar línies de text, entre d’altres opcions. També permet l’ús de JavaScript bàsic sense cap coneixement de codificació.
Per saber més sobre el funcionament del programa, podeu consultar la guia del curs D72 Disseny i creació de pàgines web que trobareu al DVD-Web.
Amaya
L’Amaya és una eina combinada del W3C composta per un navegador web i una eina d’autor. Qualsevol pàgina web que s’obri pot ser editada immediatament. Permet veure i generar pàgines HTML i XHTML amb fulls d’estil CSS, etc.
Captura de l’editor Amaya
És programari lliure i es troba disponible per a sistemes tipus Unix, GNU/Linux, Mac OS X, Microsoft Windows i altres plataformes.
NVU/Kompozer
L’NVU (pronunciat, en anglès, com a N-view) és un complet sistema per editar pàgines web que combina la gestió de tots els fitxers del lloc web i la facilitat d’ús del WYSIWYG. L’NVU és un editor basat en Mozilla Composer, però d’execució independent.
L’NVU està dissenyat per a ser extremadament senzill d’utilitzar, convertint-se en una bona eina per aquells usuaris sense massa coneixements tècnics que volen crear una web atractiva i d’aspecte professional sense necessitat de conèixer els marcadors HTML o els detalls de la programació web. El programa afegeix característiques com suport integrat de CSS i millor gestió d’FTP per l’actualització de fitxers.
Captura de l’editor NVU/Kompozer
El programa NVU està disponible per a GNU/Linux, Mac OSX, Microsoft Windows, i fins i tot hi ha una versió portable que pot ser utilitzada des d’una memòria USB sense necessitat d’instal·lar a l’ordinador.
Editors de text/codi font
Un editor de text/codi font és una aplicació especialitzada en facilitar la tasca d’escriure codi de diferents llenguatges de programació.
Els editors de codi font poden tenir trets específicament dissenyats per simplificar i accelerar l’entrada del codi tals com:
- Realçament de la sintaxi mitjançant colors personalitzables d’un nombre elevat de llenguatges de programació.
- Funció d’autocompletat.
- Eines de cerca i reemplaçament de text mitjançant expressions regulars
- Integració amb eines de compilació i depuració del codi font
- Autocompletat d’expressions i funcions reservades de les sintaxis dels llenguatges de programació
- Creació i edició de macros
Notepad++
El Notepad++ és un editor de text avançat sota llicència GNU/GPL que suporta diversos llenguatges de programació. Està disponible en català i, encara que nativament s’executi sota Microsoft Windows, és possible fer-ho servir sota GNU/Linux gràcies a WINE
Captura de l’editor Notepad++
Característiques generals de l’editor Notepad++:
- Sintaxis amb colors i embolcallament de sintaxis. Permet imprimir el codi font en color.
- Autocompletat d’etiquetes dels diferents llenguatges de programació
- Multi-Document i Multi-Vista. El programa permet editar diversos documents al mateix temps, així com visualitzar-los alhora. La modificació del document en una vista quedarà reflectida també a l’altra, és a dir, es modifica el mateix document malgrat que en realitat es veu una còpia. L’usuari pot definir la posició de les vistes dinàmicament, el separador pot ser tant horitzontal com vertical.
- Suport de cerca i substitució amb expressions regulars.
- Suport complet d’arrossegar i deixar anar: permet obrir i moure des d’una posició, o fins i tot d’una vista, a una altra, un document arrossegant-lo i deixant-lo anar.
- Autodetecció de l’estat del fitxer. Si modifiqueu o suprimiu un fitxer obert amb el Notepad++, el mateix programa ho notifica, i dóna l’opció de tornar-lo a carregar o bé suprimir-lo.
- Apropar i allunyar el text, és una altra funció del component Scintilla. Simplement vegeu la captura.
Bluefish
El Bluefish és un editor de text avançat sota llicència GNU/GPL i compatible amb la majoria de sistemes operatius del tipus POSIX (GNU/Linux, FreeBSD, MacOSX, OpenBSD, Solaris i Tru64). El Bluefish està dirigit a dissenyadors web i programadors en general.
Captura de l’editor Bluefish
Característiques generals de l’editor Bluefish:
- Lleuger i ràpid. El Bluefish pot carregar simultàniament i amb rapidesa més de 500 documents, utilitzant una interfície de document múltiple. També obre automàticament fitxers de forma recursiva basant-se en patrons dels noms de fitxers i/o contingut.
- Permet treballar eficaçment amb múltiples projectes.
- La funció "Cerca i substitueix", permet la cerca i substitució d’expressions regulars i patrons.
- Funció "Desfer i fer", sense límit.
- Sintaxi realçada: el programa permet personalitzar els colors del realçat del codi basat en patrons o subrutines predefinides, per a HTML, PHP, Javascript i CSS entre d’altres.
- Numeració de línies tot al llarg del document, que també permet deixar marques en les línies desitjades.
- Barra d’eines configurable amb menús desplegables de diàlegs per a etiquetes de HTML, amb tots els seus atributs.
- Barra d’eines personalitzable per a l’accés ràpid a les funcions més utilitzades.
- Tancament automàtic d’etiquetes per a documents de HTML i XML.
- Múltiple codificació. El Bluefish treballa internament amb UTF8, però pot desar els documents en diversos tipus de codificació o diferents jocs de caràcters.
gedit
El gedit és un editor avançat de text que es distribueix juntament amb l’entorn d’escriptori GNOME per a sistemes tipus Unix. Aquest editor es caracteritza principalment per la seva facilitat d’ús, aconseguida principalment gràcies a una interfície clara i neta, mostrant únicament les funcionalitats principals que acostumen a necessitar la majoria d’usuaris. El programari es distribueix sota les condicions de la llicència GNU/GPL
Característiques generals de l’editor gedit:
- Suport de textos internacionalitzats, usant la codificació UTF-8.
- Col·lorejat del text, personalitzable, segons la sintaxi de diversos llenguatges de programació: C, C++ Java, Python,...
- Corrector ortogràfic multiidioma.
- Incorporació de connectors per ampliar les funcionalitats bàsiques del programa.
- Numeració de línies.
- Cerca i reemplaçament de text.
- Edició d’arxius remots.
- Còpia de seguretat dels fitxers sobre els quals es treballa.
