Arhiva "Development"
Extensii Google Chrome pentru designeri şi developeri
Google Chrome este un browser din ce în ce mai folosit, dovadă fiind cota de piaţă în continuă creştere. Mai jos se găsesc câteva extensii interesante ce pot fi adăugate acestui browser, orientate în special pentru developeri şi designeri.
Eye Dropper
Cu ajutorul acestei extensii putem să vedem codul oricărei culori folosite într-o pagină web. Vom avea posibilitatea printr-un color-picker de a selecta o culoare.
Firebug Lite
Debug şi monitorizare Javascript, HTML, CSS. Extensia se găseşte şi în Firefox.
Resolution Test
Testarea unei pagini pe mai multe rezoluţii. Browserul se redimensionează în funcţie de rezoluţia aleasă.
IE Tab
Afişarea unei pagini într-un tab din Chrome folosind motorul de randare al Internet Explorer.
Validity
Validare HTML.
BuildWith Tehnology Profiler
Afişează tehnologiile web folosite în pagina curentă.
MeasureIt
Un liniar care măsoară dimensiunile unui anumit element.
Mai multe extensii aici.
Tabele HTML colorate folosind COLORIZE (plugin jQuery)
În cele ce urmează voi prezenta câteva tehnici de modificare a unui tabel HTML pentru a avea un design mai plăcut.
Vom avea nevoie de un plugin jQuery numit COLORIZE ce se poate descărca de aici. Nu uitati să includeţi întâi şi librăria jQuery.
COLORIZE este un plugin care (după cum îi spune şi numele) dă o culoare tabelului şi evidenţiază rândurile atunci când se trece cu mouse-ul deasupra sau se face un click pe un rând. Se pot face modificări ale culorilor şi altor opţiuni. Vizitaţi pagina oficială din link-ul de mai sus pentru mai multe detalii.
Să luăm ca exemplu următorul tabel simplu:
 |
ce are codul HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Tabel</title>
</head>
<body>
<table>
<th>Nume</th>
<th>Oras</th>
<th>Adresa</th>
<tr><td>Popescu Ion</td><td>Bucuresti</td><td>Str Facliei nr 2</td></tr>
<tr><td>Georgescu Margareta</td><td>Iasi</td><td>Str Florilor</td></tr>
<tr><td>Gica Contra</td><td>Cluj</td><td>Str Gropilor</td></tr>
<tr><td>Ungureanu Mircea</td><td>Oradea</td><td>Str Asfaltata</td></tr>
</table>
</body>
</html>
La acest tabel îi aplicăm pluginul colorize
 |
În partea de HEAD am adăugat codul de mai jos
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="colorize.js"></script>
<script>
$(document).ready(function(){
$("#tabelul_meu").colorize(); // tabelul_meu este ID-ul tabelului
});
</script>
iar tabelul a primit id-ul tabelul_meu
<table id="tabelul_meu">
În continuare, folosim puţin CSS pentru a modifica fontul, culoarea headerului, să punem spaţiu între celule şi să aliniem la stânga.
 |
Am creat un fisier stil.css unde am pus următorul cod
#tabelul_meu
{font-family:Verdana;font-size:12px;}
#tabelul_meu th
{background-color:Navy;color:white;padding:5px;text-align:left;}
#tabelul_meu td
{padding:5px;text-align:left;}
iar in html am adaugat in partea de HEAD.
<link href="stil.css" rel="stylesheet" type="text/css" />
Toate fişiere sunt în acelaşi director. Codul HTML complet se află mai jos.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Tabel colorat</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="colorize.js"></script>
<script>
$(document).ready(function(){
$("#tabelul_meu").colorize();
});
</script>
<link href="stil.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table id="tabelul_meu">
<th>Nume</th>
<th>Oras</th>
<th>Adresa</th>
<tr><td>Popescu Ion</td><td>Bucuresti</td><td>Str Facliei nr 2</td></tr>
<tr><td>Georgescu Margareta</td><td>Iasi</td><td>Str Florilor</td></tr>
<tr><td>Gica Contra</td><td>Cluj</td><td>Str Gropilor</td></tr>
<tr><td>Ungureanu Mircea</td><td>Oradea</td><td>Str Asfaltata</td></tr>
</table>
</body>
</html>
Validare form folosind jQuery
În cele ce urmează voi prezenta o validare simplă a unui formular folosind framework-ul jQuery.
Fişierele necesare pentru validare sunt
- jQuery ce se poate descărca de aici – Current Release minified sau uncompressed.
- Scriptul de validare ce se poate descărca de aici. Dacă face figuri descărcaţi versiunea 1.3.2 de jQuery cu care merge bine.
se includ cele 2 fişiere în partea de head
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
Atenţie la calea către fişier şi la numele acestuia. Eu am folosit versiunile minified.
Codul de validare:
$(document).ready(function() {
$("#form1").validate({ // form1 este ID-ul formului care se validează
rules: { //reguli de validare
nume_camp1: "required", // regulă simplă, echivalent cu {required:true}
camp_email: { // regulă compusă
required: true,
email: true},
alt_camp1: "required",
alt_camp2: "required" // atentie la ultimul câmp, nu mai trebuie virgulă
}, // aici se termină regulile, se pune virgulă, urmează mesajele
messages: { // mesajele ce se vor afişa pentru fiecare câmp invalid
nume_camp1: "Câmp obligatoriu.",
camp_email: "Email obligatoriu.",
alt_camp1: "Alt mesaj 1",
alt_camp2: "Alt mesaj 1"
}
});
Pentru formatarea mesajelor de eroare se introduce în css
label.error {color:Red;} //exemplu pentru culoarea roşie a mesajelor
save -> open browser -> run page -> tadaaaa.
Adresă email anti spam folosind hide_email()
hide_email() este o funcţie PHP care ascunde adresa email pentru a nu fi detectată de boţii de spam. Funcţia criptează adresa de mail folosind PHP şi o decriptează folosind JavaScript. Adresa de email va fi vizibilă utilizatorului (va trebui să aibă javascript activat) ca un text normal, în timp ce un bot va vedea doar nişte caractere ciudate.
Funcţia are doar 9 linii de cod şi se execută foarte simplu prin instrucţiunea
<?php echo hide_email('test@test.com'); ?>
Mai multe informaţii despre această funcţie găsiţi aici.
Lucrul cu bazele de date în ASP .NET
 |
Multe din aplicaţiile web necesită accesul la o bază de date. Indiferent că programaţi într-un limbaj server side precum PHP, ASP .NET sau Java veţi avea nevoie la un moment dat de o conexiune la baza de date şi interogarea acesteia. În cazul ASP .NET puteţi afla cum se realizează conectarea la o bază de date sau cum se execută o instrucţiune SQL accesând adresa punctnet.blogspot.com
Pentru a descărca şi instala gratuit Visual Web Developer Express precum şi Microsoft SQL Server 2008 Express vizitaţi adresa http://www.microsoft.com/express/Downloads.
MySql, hosting linux şi case sensitivity
Recent am avut nevoie să creez nişte tabele într-o bază de date deja existentă, pe un host linux, fără să am acces la o interfaţă gen PHPMYADMIN. Tabelele le-am creat folosind un script PHP, dar după executarea scriptului, query-urile care mergeau pe calculatorul personal nu funcţionau şi pe host. Am început să interoghez baza de date pe nevăzute până când am observat problema.
Pe calculatorul meu cu Windows XP, selecturile mergeau bine indiferent dacă tabelele erau scrise cu litere mari sau mici, dar pe hostul cu linux, toate interogările tabelelor trebuiau făcute cu literă mică. Astfel, dacă următorul cod rula pe local
SELECT FROM NUME_TABEL
pe hosting, codul era
SELECT FROM nume_tabel
În link-ul de mai sus se află mai multe explicaţii.
Eroare mysql_close() în php 5.3.0
Descrierea erorii
Ieri am instalat o versiune mai nouă a pachetului EasyPHP ce conţine PHP, serverul Apache şi MySQL pentru dezvoltarea site-urilor web. Până acum foloseam o versiune mai veche de EasyPHP ce folosea versiunea PHP 5.2.8 şi nu am avut nicio problemă, dar odată cu instalarea versiunii 5.3.0 a EasyPHP (ce foloseşte versiunea PHP 5.3.0) am început să primesc erori la executarea aceluiaşi cod care mergea perfect pe versiunea mai veche. Am încercat şi WAMP, ce foloseşte acelaşi PHP 5.3.0 dar şi aici primeam o eroare.
Pur şi simplu la încărcarea paginii cu versiunea 5.3.0 de PHP, serverul Apache crăpa.
După multe căutari pe internet, am aflat că versiunea 5.3.0 a PHP are un bug care se manifestă atunci când se închide o conexiune la baza de date. S-ar putea ca acest bug să nu se manifeste decât în anumite împrejurări.
Totuşi, dacă întâmpinaţi erori de crash al serverului Apache (“An unhandled win32 exception occurred in httpd.exe“) şi folosiţi versiunea 5.3.0 a PHP cu o conexiune la baza de date, atunci verificaţi dacă în cod conectarea la baze de date se face astfel:
mysql_connect('server', 'user', 'parolă');
mysql_close();
şi înlocuiţi acest cod cu
$conn = mysql_connect('server', 'user', 'parolă');
mysql_close($conn);
Sexy Buttons
Sexy Buttons este un framework HTML / CSS ce ajută la modificarea design-ului butoanelor clasice dintr-o pagină web. Design-ul standard a unui buton este destul de sec şi simplu, dar folosind acest framework putem avea butoane arătoase precum în imaginea de mai jos într-un mod extrem de simplu şi rapid.
 |
Pentru a modifica design-ul unui buton trebuie doar să includem css-ul sexybuttons şi să scriem o linie de cod respectând indicaţiile din această pagină.
Pentru a descărca Sexy Buttons, accesaţi acest link. Diverse icoane sunt incluse în pachet.
Link-uri utile pentru web developeri
În majoritatea cazurilor, la dezvoltarea unui site, se întâmplă să avem nevoie de o imagine, ceva iconiţe, nişte font-uri, script-uri, etc pentru a face site-ul mai plăcut la vedere şi uşor de folosit. Mai jos sunt câteva link-uri pe care le puteţi vizita pentru a descărca gratuit elementele ce vă sunt necesare la realizarea site-ului.
Font-uri
Majoritatea site-urilor folosesc font-uri general valabile pe web. Aceste font-uri pot fi numărate pe degetele de la mâini. Dacă doriţi să folosiţi un font mai special pentru realizarea unui banner de exemplu, încercaţi unul din lista de aici. Sunt gratuite.
Script-uri pentru galerii foto, navigare, calendare şi alte efecte
jQuery este o librărie javascript foarte populară datorită uşurinţei scrierii codului. Cu ajutorul acestei librării se pot crea diferite efecte pentru a face cât mai uşoară şi plăcută utilizarea unui site. Printr-un click pe acest link, puteţi descărca şi folosi gratuit câteva script-uri jQuery folositoare. Un alt link cu script-uri jQuery este acesta.
Teme wordpress
Wordpress este o platforma de blogging gratuită şi foarte populară. Multe teme sunt create pentru această platformă. Dacă aveţi un blog wordpress şi vreţi să folosiţi / modificaţi o temă, încercaţi una sau mai multe din cele 40 de teme gratuite pentru wordpress. Un alt link cu teme gratuite pentru wordpress este acesta.
Seturi de iconiţe.
Folosirea iconiţelor în cadrul aplicaţiei aduce un plus de imagine paginii şi o face mai vioaie. Sunt o grămadă de seturi de iconiţe pe net, dar puţine sunt gratuite. Recent am dat de un link cu nişte seturi de iconiţe GRATUITE şi foarte reuşite. Le găsiţi aici.
Imagini şi pattern-uri
Pentru un banner sau background, o imagine de calitate este bnevenită. În cazul background-ului, se poate realiza o imagine folosind un pattern.
Imagini pentru background:
- Diverse imagini de calitate
- Imagini cu răsărit de soare
- Diverse imagini
- 100 poze din natură
- 78 imagini de calitate cu peisaje
Pattern-uri: 80 pattern-uri cu link-uri către altele. Aici avem încă câteva texturi de calitate.
Alte link-uri
Alte link-uri interesante cu diferite efecte se află mai jos
- Design custom pentru checkbox-uri şi butoane radio
- Dacă vrem să alcătuim un meniu stufos cu multe elemente îl putem face uşor navigabil folosind script-ul de aici.
- Plugin pentru rating cu steluţe (doar front-end)
- Form de login într-o fereastră modală
Temă nouă
Zilele trecute am observat o temă simpatică şi gratuită pe smashingmagazine, numită Glassical. Am schimbat tema avută cu aceasta, modificând câteva lucruri.
Glassical foloseşte framework-ul javascript jQuery pentru câteva efecte, printre care şi înlocuirea fontului la titlul postului. La realizarea unui site, web developer-ul trebuie să fie atent la fontul folosit, deoarece s-ar putea ca fontul unui site să nu fie disponibil pe calculatorul unor vizitatori ai site-ului. În plus, nu toate fonturile ştiu diacritice, în cazul folosirii limbii române. Aşa că am scos fontul folosit de Glassical (Nevis) pentru că nu suporta diacritice şi am lăsat un font mai comun: Arial. O listă cu fonturile disponibile pe majoritatea sistemelor de calcul se află aici.
Am mai modificat culorile, am customizat sidebar-ul şi imaginea din header. În pachetul ZIP cu tema erau câteva taguri php greşit formate, aşa că le-am corectat. Imaginea de background a fost formată dintr-un pattern descărcat de aici.
Puteţi descărca şi modifica gratuit tema Glassical de aici.
- Temă modificată după originalul Glassical