Arhiva "Development"

Resurse pentru programatori şi web designeri #3

Autor: margeo. Data: 15 Jul 2010
0

Continui seria resurselor pentru programatorii şi designerii ce urmează să implementeze un site. În link-urile de mai jos veţi găsi câteva lucruri utile ce vă vor ajuta la dezvoltarea site-ului.

Catch404 – plugin jQuery
Un plugin jQuery care afişează o eroare 404 (pagină inexistentă) într-o fereastră modală, fără a părăsi pagina curentă.

30 site-uri ce au ca temă “apa”

Tutoriale şi exemple de meniuri drop-down
25 exemple şi tutoriale de meniuri drop-down diverse.

100 iconiţe pentru designeri şi developeri

20 exemple de site-uri ale unor supermarket-uri

Câteva exemple de site-uri ale unor restaurante

Raty – plugin jQuery
Un plugin cu ajutorul căruia putem vota folosind steluţe (star rating).

9 cărţi gratuite de webdesign

Meniu fly-out folosind jQuery şi CSS3

jQuery FormLabels Plugin

Alte link-uri utile

Fonturi cu lăţime fixă

Autor: margeo. Data: 29 Jun 2010
0

Un font cu lăţime fixă este acel font unde lăţimea fiecărui caracter este aceeaşi. Pentru programul de emitere bonuri am încercat să folosesc un font care arată mai bine, cum ar fi Segoe UI, ce este prezent în Windows Vista şi 7. Acest font nu este cu lăţime fixă astfel încât nu am reuşit să aliniez textul cum trebuie.

De exemplu, caracterul , (virgulă) are o lăţime mai mică decât o literă mare din alfabet iar literele mici şi literele mari nu sunt egale. Astfel, la listare, textul nu era aliniat bine deoarece lăţimea literelor nu era la fel.

În final am decis să folosesc un font cu lăţime fixă, cum este Courier New.

Aşadar, pentru alinierea corespunzătoare a textului la listare, trebuie folosit un font cu lăţime fixă.

Program pentru restaurante. Emitere bon consumaţie.

Autor: margeo. Data: 23 Jun 2010
1

Recent am terminat un program ce va fi folosit în restaurantul unei pensiuni pentru a elibera bonul pentru client şi comanda pentru bucătărie & bar. Programul rulează pe un netbook cu windows XP şi scoate un bon pe o imprimantă POS (vezi imaginea de mai jos).

Facilităţi

  • Fiecare ospatar are un user şi o parolă.
  • Număr dinamic al meselor, schimbarea culorii la ocupare / eliberare masă.
  • 4 modalităţi de plată: cash, cameră, demipensiune şi protocol.
  • Creare şi anulare comandă. După emiterea comenzii pentru bucătărie / bar nu se mai pot face modificări la comanda în curs.
  • Parte de administrare unde se pot defini şi modifica: ospatari, număr şi descriere mese, categorii departament, descriere şi preţ la produse.
  • Rapoarte zilnice pentru fiecare ospătar şi situaţia zilei pentru administrator.

Un exemplu de bon listat din program se află în imaginea de mai jos.

Cerinţe sistem
Pentru ca programul să ruleze corespunzător este nevoie de un calculator ce rulează windows XP / Vista / 7 având instalat .NET Framework 3.5. Programul este făcut în C# şi foloseşte baze de date SQL SERVER 2008 care trebuie să fie instalat în sistem. Listarea se face la imprimanta instalată ca default.

Capturi ecran din program


Best Kept Secrets of Peer Code Review

Autor: margeo. Data: 27 May 2010
0

Am comandat această carte de pe net acum vreo 2 săptămâni şi am găsit-o azi în poştă. Cartea este orientată spre programatori şi este despre revizuirea codului cu exemple din lumea reală.

Se poate comanda gratuit de aici unde găsiţi şi mai multe informaţii.

Mai multe lucruri gratuite se pot găsi aici.

Resurse pentru programatori web şi designeri #2

Autor: margeo. Data: 12 May 2010
0

Un site trebuie dezvoltat astfel încât utilizatorul să aibe o experienţă cât mai plăcută în timpul navigării. Pe net există mai multe script-uri şi soluţii care micşorează timpul dezvoltării şi ajută la îmbunătăţirea experienţei utilizatorului fără a fi necesară reinventarea roţii.

În cele ce urmează voi da câteva link-uri către diverse site-uri folositoare din domeniul dezvoltării web, care vor ajuta programatorul sau designerul la dezvoltarea site-ului.

Font-face generator
@font-face este soluţia prin care fontul unei pagini poate fi schimbat cu unul mai deosebit. Link-ul de mai sus generează codul CSS şi transformă fontul pentru a funcţiona şi pe IE.

Nivo Slider
Un script care schimbă periodic imaginile folosind diferite efecte

jStorage – Stochează date local
Un plugin care ne oferă posibilitatea de a stoca date pe calculatorul utilizatorului (client side).

.htaccess online generator
Generator de fişiere .htaccess.

CSS3 glow tabs
Meniu sub formă de tab-uri cărora se pot adăuga efecte.

Prezentare HTML5
Cele mai importante facilităţi a HTML5.

Rezoluţii diferite, CSS-uri diferite
Cum procedăm când vrem ca site-ul să arate altfel în funcţie de rezoluţia ecranului.

Grafice şi chart-uri
O colecţie de grafice şi chart-uri.

Alte resurse puteţi găsi aici.

Flash pe cale de dispariţie?

Autor: margeo. Data: 02 May 2010
1

HTML este limbajul cu ajutorul căruia sunt afişate paginile web într-un browser. Cea mai nouă versiune de HTML a ajuns la numărul 5 dar specificaţiile nu sunt încă definitivate. Totuşi, majoritatea browserelor încep să ofere suport pentru HTML5 (link), în afară de Internet Explorer care va oferi suport începând de la versiunea 9.

HTML5 introduce un număr de elemente noi, printre care şi câteva tag-uri pentru conţinut multimedia. Aceste tag-uri au ca scop eliminarea dependenţei de plug-in-uri pentru conţinut multimedia, cum ar fi Adobe Flash sau Microsoft Silverlight. Ce înseamnă asta: când deschizi o pagină web unde ar trebui să vezi un videoclip, acesta va rula fără să fie nevoie de a descărca vre-un plug-in (plug-in-ul adobe flash de exemplu).

Noile elemente multimedia introduse în HTML5 reprezintă un concurent serios a celui mai folosit suport pentru animaţii sau videoclipuri: Flash. Recent, şeful Apple, Steve Jobs a criticat tehnologia Flash iar produsele iPad şi iPhone nu suportă această tehnologie. Reprezentanţii Microsoft au declarat recent că HTML5 este viitorul paginilor web chiar dacă produsul lor Silverlight ar fi în concurenţă directă cu HTML5.

3 dintre cele mai mari site-uri de hosting al videoclipurilor YouTube, DailyMotion şi Vimeo au experimentat HTML5 ceea ce sugerează un interes crescut faţă de această tehnologie. Pe lângă videoclipuri şi muzică, şi efectele de animaţie din paginile web se pot realiza fără Flash, folosind jQuery. Exemplu aici.

Acestea fiind spuse, s-ar putea ca în viitor cota de piaţă a tehnologiei Flash să scadă foarte mult dacă tot mai multe pagini vor folosi HTML5 pentru afişarea conţinutului multimedia sau a animaţiilor.

Access versus SQL Server

Autor: margeo. Data: 29 Apr 2010
1

Se dă un program făcut în VB6 cu baze de date Access. Deoarece baza de date creştea de la o zi la alta, s-a ajuns la limita de 2 GB / fişier suportată de Access. Aşadar s-a hotărât convertirea acestui program în VB .NET iar bazele de date să fie trecute pe SQL SERVER pentru a elimina aceste limitări. Toate bune şi frumoase, însă există o mare diferenţă de performanţă între instrucţiunile executate în Access şi cele executate în SQL.

Programul făcut în VB6 nu este optimizat. De exemplu, la deschiderea unui form, se execută 2 instrucţiuni Select * from tabel unde primul tabel are aproape 2 milioane de înregistrări iar al 2-lea cam 1,5 milioane. Aceste înregistrări sunt încărcate în nişte obiecte pentru a fi folosite mai departe în cod la nişte calcule, dar de cele mai multe ori nici nu sunt necesare toate datele.

Ce se întâmplă în programul făcut în VB6 şi Access? Se deschide form-ul în secunda 2. Dar în programul convertit în .NET şi SQL? Încearcă să se execute cele 2 selecturi ce durează mult şi bine, memoria RAM ocupată o ia în sus şi într-un final se ajunge la o valoare foarte mare a memoriei ocupate, după care programul ajunge să se mişte tot mai greu şi la final să crape.

Like wtf? Cum poate executa aşa rapid access-ul? Peste tot în codul programului sunt tot felul de instrucţiuni neoptimizate care lasă într-un nor de praf SQL-ul, timpul de execuţie a instrucţiunilor fiind clar în favoarea Access-ului. Ca un Ferrari versus Dacie.

Resurse pentru programatori web şi designeri

Autor: margeo. Data: 16 Mar 2010
2

Mai jos veţi găsi câteva link-uri utile care vă vor ajuta la dezvoltarea unui site web.

Generator CSS3
Generează codul pentru diferite elemente CSS3 care se pot customiza.

Generator de imagini pentru background-uri
Generează imagini de diferite culori şi cu diferite pattern-uri.

Generator de imagini animate
Se pot descărca diverse gif-uri animate de diferite culori.

jQuery Mega Menu
Un script jquery ce generează un meniu complex.

PHP hide_email()
Ascunderea adresei de email de boţii de spam folosind acest script PHP.

9 captcha solutions
Câteva scripturi de asigurare împotriva spamului la un formular de înregistrare.

16 Useful .htaccess Tricks and Hacks For Web Developers
Cele mai folosite instrucţiuni .htaccess într-un site web.

.htpasswd Encryption Tool
Generarea unei parole criptate pentru fişierul .htpasswd

Extensii Google Chrome pentru designeri şi developeri

Autor: margeo. Data: 12 Mar 2010
0

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)

Autor: margeo. Data: 10 Feb 2010
0

Î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>