Arhiva pentru categoria “WebDevelopment”

node-webkit: Un Notepad scris în JavaScript

Continuând articolele despre node-webkit vă propun acum să vedem o aplicaţie ceva mai serioasă. Evident tot copilăroasă dar bună ca demonstraţie. După cum ştiţi, o pagină web nu poate salva local un fişier (nu mă refer o pagină pe un server, salvând pe acel server, ci la salvarea pe calculator). Cu node-webkit această limitare este depăşită. De fapt cu node.js, care include funcţiile pe fişiere, în schimb node-webkit permiţând afişarea ferestrelor de dialog pentru deschidere/salvare (Open/Save).

imagine

Am să încep cu fişierul JSON unde nu sunt modificări majore faţă de ce am mai văzut. Apare însă de exemplu iconiţa care, atenţie, este doar pentru fereastră. Executabilul va avea iconiţa node-webkit, dar cu alte programe poate fi modificată. În rest avem un JSON… normal (relativ la …


node-webkit: Să facem un executabil

În articolul anterior am făcut primii paşi cu node-webkit. Repet pe scurt „filosofia”: într-un folder trebuie să avem fişierele web (HTML, JavaScript, CSS, imagini, tot ce ne mai trebuie) şi neapărat un fişier package.json (am văzut un exemplu în articolul trecut). Toate acestea trebuie să le arhivăm. Atenţie: nu folderul unde se află toate ci conţinutul, adică fişierele web + acela JSON. Arhiva o redenumim cu extensia nw, fişierul rezultat urmând să îl tragem cu mouse-ul, în Explorer, peste nw.exe. Destul de lung şi plictisitor procesul. Dar nu am ajuns la executabil! Mai avem un singur pas.

imagine

Comanda magică pentru a obţine fişierul executabil este copy /b nw.exe+arhivanoastraspeciala.nw numeleexecutabilului.exe (dacă vreţi, vedeţi acest clip).

Bun. Clar procesul este plictisitor. Când …


node-webkit: Primii paşi

Aceeaşi căutare vizibilă în ultimele articole (a unei soluţii de a transforma nişte pagini HTML într-o aplicaţie Windows executabilă) m-a condus acum câteva zile spre node-webkit, care, spune pagina tocmai indicată „permite un mod nou de scriere a aplicaţiilor cu toate tehnologiile web”. Desigur, ce vedeţi mai jos este altceva: este pagina de la node.js, care este cerut de node-webkit. Ce face node.js (scrie mai jos în captură) este irelevant pe moment. Instalaţi cum aţi instala orice aplicaţie în Windows şi gata primul pas.

imagine

Al doilea este să reveniţi la node-webkit, la momentul actual fiind disponibile de descărcat două versiuni (0.8.5 şi 0.9.2) datorită unor aspecte tehnice pe care le sărim nefiind relevante în acest moment. Am descărcat …


Ratchet: pentru aplicaţii mobile

Aplicaţiile pe care le-am făcut pentru Android, până acum, au fost toate realizate cu jQuery Mobile. Cu care, admit, am o relaţie de love & hate, care nu mă panichează pentru că aşa era într-o vreme şi cu jQuery UI. Dacă nu acum, poate peste câteva luni voi încerca ceva: să fac o aplicaţie pentru mobile cu Ratchet. De ce? Pentru că Bootstrap şi pentru că place ;). Pe româneşte: Ratchet a fost adoptat oficial de Bootstrap, ceea ce mie îmi sporeşte încrederea în acest proiect. El există de vreo doi ani, dar în primele luni ale acestui ani a prins aripi.

imagine

Pagina Getting started ne explică pas cu pas cum să începem şi chiar nu pare greu. Ni se …


Yamm 3 pentru meniuri mega

Mega-meniurile sunt folosite de unele situri permiţând o structurare mai flexibilă a opţiunilor… f. utilă când sunt muuulte. Desigur, totul e să nu abuzezi de aşa ceva. Din păcate constat că multe soluţii pentru mega-meniuri nu mai sunt întreţinute de 2-3-4 ani, aşa că la acest capitol singurul care mi s-a părut credibil pe moment este Yamm 3, adică Yet Another Mega Menu. Atenţie: componenta este pentru Bootstrap 3, ceea ce poate fi o limitare serioasă dacă nu aveaţi de gând să folosiţi Bootstrap 3.

imagine

Submeniurile se pot extinde pe toată suprafaţa (lăţimea) meniului, putându-se folosi structura de grid – binecunoscută celor ce utilizează Bootstrap 3 – pentru a grupa opţiunile. Pentru aceasta folosiţi .yamm-fw (de la full width) la clasa dropdown …


De la HTML/PHP la EXE (soluţii… scumpe)

Revin la ce am mai tratat recent: cum să ajungem de la nişte pagini HTML, un mic sit, o webaplicaţie, la un fişier executabil pentru Windows. Astăzi mă opresc la două soluţii care îmi par a fi din aceeaşi sursă, de aceeaşi firmă/dezvoltator. Mai întâi HTML Executable, care face o treabă excelentă fie că doriţi să transformaţi un joc HTML într-un joc executabil, fie că doriţi să aveţi un sit offline, fie că aţi realizat prezentarea unui produs sau eveniment… tot felul de scenarii. De reţinut că aplicaţia compactează şi criptează sursele, deci oferă şi o protecţie în acest sens.

imagine

Problema mare este costul programului, în funcţie de variantă de la 50 la 140 de euro. Şi chiar nu ştiu de ce …


GenerateCSS: Pentru noi… cei leneşi

Ei, glumesc. Doar pentru că vă consideraţi harnic nu ignoraţi acest proiect. GenerateCSS este un proiect care merită reţinut, pus un semn de carte ceva, să fie uşor de regăsit, pentru că ne economiseşte mult timp. Începătorii dar şi avansaţii vor fi bucuroşi de acest loc centralizat unde poţi „găti” codul necesar pentru efecte pe text/imagini, pentru meniuri, butoane, boxe, gradienţi şi tot felul. Parcurgeţi prima pagină pentru o bună privire de ansamblu asupra ofertei bogate a sitului.

imagine

Cât priveşte utilizarea, este uşoară: alegeţi ceva de acolo, parcurgeţi eventual paşii de configurare (culori, linkuri, dimensiuni…) iar la final luaţi codul CSS şi HTML. Desigur, în codul CSS totul e prefixat cu „generatecssdotcome”, dar cu un replace se rezolvă. La fel referinţa …


Fonturi cu iconiţe: crearea lor online (V)

Fonturile cu iconiţe sunt la modă acum şi nu pe nedrept: sunt de mare ajutor pentru webmasteri. Hai că de mult nu am mai spus aceasta :). Am prezentat patru soluţii şi astăzi vă mai propun două. Şi gata. Până când nu dau de altele. O să începem cu Fontello.com, care reciclează ideea şi fonturi din soluţii anterioare. Avem câteva fonturi disponibile (putem adăuga SVG-uri proprii sau fonturi bazate pe SVG-uri), după care putem configura numele (cele implicite sunt oricum utile), eventual mai vezi diversele configurări posibile şi descarci webfontul.

imagine

În fine, ar fi de notat şi FontCustom, dar care nu este tocmai o soluţie online ci offline de creare. În plus eu nu văd decât indicaţii pentru OS X …


S/2: Efecte CSS3, pluginuri jQuery, gradienţi

Sunt proiecte care îmi scot un „uau” gigantic, iar iHover intră fără dubii la această categorie. Desigur, totul este să ai unde să foloseşti astfel de efecte, dar dacă sunteţi webmaster şi preţuiţi factorul estetic, veţi găsi pe la galerii sau undeva să implementaţi aceste minunate efecte care se reduc la CSS3. Aveţi doar grijă sub ce navigatoare merg (la unele se specifică explicit că nu merg sub IE9, de exemplu). Fiind doar CSS3 nu există constrângeri de folosit vreun anume framework JavaScript, dar autorul ne garantează că merg bine de exemplu cu Bootstrap.

imagine

Am reţinut interesanta selecţie 10 fresh JavaScript/jQuery plugins you should definitely check out. Personal sunt interesat în special de SlideBars, ilustrat mai jos (un …


Iconion: iconiţe extrase din fonturi

V-am obsedat zilele acestea cu fonturi cu iconiţe. Acum avem în faţă un program care dacă ar fi putut să lucreze cu orice font cu iconiţe ar fi fost mină de aur. Poate o versiune viitoare? Poate o versiune comercială? Vom vedea. Şi aşa softul este extraordinar. Că lucraţi sub Windows sau sub Mac, Iconion vă aşteaptă să îl descărcaţi. După lansare veţi vedea ceva ca mai jos. În stânga sunt patru opţiuni de fonturi cu iconiţe. Alegeţi una şi o veţi vedea în zona de previzualizare. În dreapta aveţi stilurile de aplicat, iar aici este centrul lui de greutate.

imagine

Numărul e stiluri este variat, cu tot felul de efecte, iar pentru cei ce vor să fie mai în control, sub galeria …