Cum să-ţi pregăteşti PC-ul pentru webdesign

Pentru toţi cei care vor să se apuce serios de webdesign sau pentru cei care au început deja şi au nevoie de ajutor, am pregătit un mic ghid pentru configurarea calculatorului pentru webdesign.

Înainte de toate se presupune că sistemul de operare e deja instalat, şi că face parte din familia Micro$oft. Pentru Linux o să scriu pe viitor.

Acum, să începem lista cu programe necesare:

1. Browsere

Sunt de nelipsit din viaţa unui webdesigner. Îţi trebuie instalate toate, chiar dacă tu foloseşti mai mult Firefox-ul. Şi pe lângă asta, o să mai ai nevoie şi de multe plugin-uri care o să-ţi facă viaţa mai uşoară în lupta cu bug-urile.

Lista de browsere trebuie să conţină neapărat:

  • Firefox, aka „The God Father of browsers”, cu  următoarele extensii:
    • Firebug – o mulţime de tool-uri foarte utile (debug css,html / dom inspector, javascript, http request headers, etc)
    • Html Validator – validează codul html (mai multe alte opţiuni disponibile)
    • Colorzilla – pentru că, din când în când mai ai nevoie să copiezi coduri de culoare hexa (color picker)
    • MeasureIt – folositor atunci cand îţi baţi capul cu dimensiuni
    • Web Developer – o mulţime de butoane folositoare (re-dimensionare fereastră pentru diferite rezoluţii, disable js, etc)
  • IE Tester, pentru că trebuie şi pentru că merită. O singură fereastră şi testezi pagina in Internet Explorer 5.5, 6, 7 şi 8 fără bătai de cap. Câte un tab pentru fiecare motor de randare.
    • DebugBar – este un tool compatibil cu IE Tester, este asemănător cu Firebug-ul din Firefox
  • Chrome, pentru că e un browser care promite multe pe viitor, şi care e destul de popular
  • Safari, deşi rulează ca şi Chrome-ul, folosind WebKit, nu e rău să-l ai instalat. Teoretic, o pagină care merge bine în Chrome merge bine şi în Safari în 99.9% din cazuri.
  • Opera, pentru că e unul dintre cele mai vechi browsere şi pentru că nu ridică probleme prea mari de obicei. Are bug-uri specifice la anumite interpretări de CSS, dar sunt rare şi se rezolvă rapid.

Nu am menţionat pe listă Multiple IE, care face acelaşi lucru pe care îl face şi IETester, pentru că e mai greu de folosit (fiecare browser are fereastra proprie şi se încarcă destul de greu), nu poţi avea IE7 si IE8 simultan decât dacă te complici, etc.

2. Editoare pentru cod

Aici lucrurile sunt discutabile. Fiecare are un editor preferat. Eu personal folosesc Programmers Notepad 2. E simplu şi ştie cam tot ce am eu nevoie. Recomand de asemenea Komodo Edit, care e ceva mai avansat decat Programmers Notepad, dar care porneşte ceva mai greu (doar e bazat pe core-ul de la Firefox).

Mai puteţi încerca Notepad++, Dreamweaver, PSPad şi multe altele. Cu excepţia Dreamweaverului toate editoarele menţionate sunt free.

3. Editare imagini

De bază la acest capitol ar fi Photoshop-ul, însă având în vedere că nu e free, ne orientăm atenţia către alternative free:

  • Paint.NET – un mini Photoshop gratuit. Are cam toate toolurile şi efectele de bază din Photoshop, ştie layere şi dacă te obişnuieşti cu el, nu o să mai simţi lipsa Photoshopului.
  • Irfan Viewer – exact cum spune şi numele e photo viewer la bază, dar mai ştie de asemenea şi convertiri între mai toate formatele de imagine, batch convert tool foarte util.
  • GIMP – rivalul Photoshop din tabăra Linux / OpenSource. Din păcate lupta de orgolii a făcut ca acesta să fie structurat foarte diferit faţă de Photoshop. Oferă aproape tot ce oferă şi Photoshopul, numai să şti să-l foloseşti.

4. FTP Clients

Programe indispensabile atunci când vrei să uploadezi site-ul pe server. Aici alegerea e mai simplă. Avem Filezilla Client care este cel mai popular, şi cred că cel mai bun client ftp free (concurează cu cele mai bune aplicaţii plătite din punctul meu de vedere).  Apoi, pentru cei mai puţin pretenţioşi, Total Commanderul are un client ftp integrat.

5. Server local pentru dezvoltare şi testare

Necesar doar în cazul în care aveţi de gând să lucraţi cu limbaje de programare gen PHP, PERL, etc. Pentru a creea pagini simple HTML nu aveţi nevoie de aşa ceva.

Variante disponibile:

  • WAMP – recomandare personală datorită utilitarelor cu care vine. Setările de bază se fac cu un singur click, şi la fel de uşor poţi schimba diferite variante de PHP, Apache şi MySQL.
  • XAMPP – la fel de uşor de instalat şi de folosit. Vine cu modul https instalat default (spre deosebire de WAMP), dar pentru a modifica configurările  trebuie să editaţi manual fişierele config.
  • Instalare separată Apache,PHP, MySQL. Nu recomand nimănui pentru că se pierde o grămadă de timp cu configurarea fiecărei componente în parte, şi dacă ceva nu merge s-ar putea să pierzi ore făcând debugging.

6. SVN Clients

Dacă lucrezi în echipă folosirea SVN-ului sau a orcărui revision control system e obligatorie. Eu folosesc şi la proiectele personale din mai multe motive:

  • poţi urmări uşor toate modificările asupra unui fişier
  • poţi lucra de pe mai multe calculatoare fără să îţi baţi capul cu sincronizarea fişierelor
  • e integrat în issue tracking systems cum ar fi Trac, Redmine şi chiar în The Bug Genie.

Pentru platforma Windows nu cred că există alternativă mai bună la Tortoise SVN, de aceea e singurul care îl recomand. Dacă aveţi nevoie de apelarea svn din linie de comandă puteţi folosi SlikSVN (eu îl folosesc pentru a face update-uri automate din linia de comandă folosind scripturi PHP).

Pentru hosting gratuit de SVN puteţi încerca Assembla.  Este gratuit, cu ceva limitări care nu deranjează. Oferă pe lângă SVN şi Trac hosting gratuit. Testat personal şi recomand cu încredere.

Pentru sugestii / completări / întrebări puteţi lăsa un comentariu.

Web – usability

Post scris pentru concursul organizat de www.cipy.ro.

La începuturile „carieri” mele ca webdeveloper îmi făceam veacul pe phorum.ro. Acolo am auzit prima oara de usability şi de seo. Între timp m-am documentat mai intens cu tot felul de articole ce veneau ca recomandări din partea Google-ului când îl întrebam despre aşa ceva.

Ce am înţeles eu în legătură cu usability în anii care au trecut de atunci, şi în care am lucrat ca webdesigner:

  1. Încearcă să faci site-urile cât mai simple. Nu încărca site-ul cu lucruri inutile pentru vizitator. Mulţi au tendinţa de a pune tot felul de countere si alte lucruri inutile pe site. Timpul de încărcare a paginii creşte, la fel şi timpul de randare a browserului, imi faci trafic degeaba dacă intru de pe mobil (şi plătesc la kb tranferaţi), plus că imi poţi bloca compul cu banere flash. Timpul pe care e dispus să-l aştepte un internaut să se încarce un site e undeva în jurul a 7-8 secunde, dacă site-ul tău depăşeşte acest timp, utilizatorul îi va acorda din start o bilă neagră înainte să mai vadă conţinutul.
  2. Testează-ţi site-ul în toate browserele. Ţine mai mult de accesibilitate, dar dacă browserul meu nu afişează cum trebuie pagina, cred că se alege praful şi de usability. Ştiu că a face un site compatibil cu majoritatea browserelor e dificil la început, dar când ai ceva experienţă nu o să ţi se pară un impediment. Pentru a face un site compatibil cu toate browserele trebuie doar să testezi site-ul pas cu pas în timpul creaţiei lui (în caz că îl faci de la zero). Eu personal lucrez în Firefox, şi dupa fiecare bucată de cod scris verific şi în celelate browsere: IE7 şi IE6. Chrome, Opera, Safari de obicei nu au probleme de randare, şi, dacă îţi merge în Firefox şi Internet Explorer sunt 99% şanse să nu ai probleme cu restul browserelor. Sfaturi găseşti aici.
  3. Oferă alternative de navigaţie. Asta se aplica în cazul meniurilor flash sau javascript. Deşi e puţin probabil ca cineva să nu aibă javascriptul activat, e bine să fi pregătit. La meniurile în flash probabilitatea ca cineva să nu aibă flash sau să aibă flash-ul dezactivat e mare (chiar eu foloseam în trecut FlashBlock – extensie de Firefox). De asemenea linkurile din footer-ul paginii pot fi foarte folositoare atunci când ai mult conţinut şi accesând linkurile din footer poţi scăpa de plăcerea de a da scroll la toata pagina.
  4. Structurează-ţi bine informaţia. Nu deruta utilizatorul cu titluri care nu au legătură cu conţinutul. Situaţii în care mai multe pagini au titluri asemănătoare trebuie de asemnea evitate. Utilizatorul va fi derutat şi nu va ştii ce să aleagă, mai bine ai grupa toate informaţiile pe o singură pagină. Informaţia ar trebui să fie concisă, evită pe cat posibil clişeele lungi şi plictisitoare.
  5. Ţine cont de regula literei F. După studii de usability, s-a ajuns la concluzia ca utilizatorul scanează pagina ca şi cum ar desena litera F: se uita la partea de sus (header), apoi în stânga (unde de obicei e meniul), scanează apoi conţinutul de la mijlocul paginii, iar la final îşi aruncă ochii în partea de sub meniu. Studiu ăsta a fost facut prin 2000 – 2003, în prezent nu cred că mai este foarte relevant în forma originală. Blogurile,de exemplu, au meniul pe partea dreaptă de obicei, eu prefer să cred ca această regulă se aplică acum şi pentru litera F în oglindă.
  6. Acces rapid la informaţii. Toate informaţiile importante de pe site-ul tău trebuie să fie tot timpul la un click distanţă, oriunde ai fi în site.
  7. Sitemap. Dacă structura site-ul este foarte complexă (site-ul conţine multă informaţie) şi punctul 4 nu e respectat, atunci o să scuteşti ceva timp vizitatorilor care pierd timp navigând printre secţiunile site-ului în speranţa că vor găsii ce vor.
  8. Search. Nu concep să existe site fără aşa ceva (exceptând site-urile cu 2-3 pagini). Google oferă aşa ceva gratuit, scuza cu „nu ştiu / nu am timp să implementez” nu mai ţine.
  9. Testează-ţi site-ul cu un prieten. Cea mai simplă metodă de vedea cum stai la capitolul usability, este să rogi pe cineva să navigheze pe site, sau să folosească aplicaţia web pe care ai facut-o. Ai fi suprins să vezi cum oamenii care văd site-ul / aplicaţia pentru prima oară să nu înţeleagă mare lucru din ea. Un astfel de test te ajută să îţi restructurezi meniurile şi linkurile mult mai intuitiv, şi chiar să redenumeşti anumite secţiuni al căror nume nu e foarte sugestiv.
  10. Foloseşte intens site-ul / aplicaţia creată. Pe lângă testul explicat la punctul 9, aceasta este iar o metodă bună de a face o aplicaţie sau un site mai uşor de folosit. Plecând de la Amdahl’s Law (trăiască dl. Vlăduţiu), în felul ăsta vei găsii lucrurile care lipsesc pentru a face utilizarea cât mai uşoară. De exemplu o să constaţi ca după fiecare pagină ai vrea să mergi înapoi, şi butonul de back e tocmai sus în meniu, lucru care nu ridică semne de întrebare la început, dar după ce ai lucrat cu site-ul/aplicaţia o să îi simţi lipsa şi o să-l adaugi şi în partea de jos.

Şi cred că să ma opresc din plictisit lumea aici. Aş mai putea găsi încă pe atâtea lucruri de care m-am lovit lucrând ca webdesigner, dar o să continui cu altă ocazie.