Arhiva pentru tagul “JavaScript”

Chartist.js: Grafice din două mişcări

Autor: radu.capan. Data: 04.02.2015.
Clasat la: WebDevelopment
Taguri: ,
0 comentarii. 2.298 afişări.

Graficele au puterea de a comunica informaţiile mai bine decât cifrele brute şi de aceea sunt folosite nu doar în rapoarte tipărite ci şi online. Chartist.js este o soluţie modernă ce merită atenţia. După cum vedeţi mai jos… de fapt trebuie să vă uitaţi în sursa paginii… este uşor să trasezi un grafic simplu din câteva mişcări. Poate că nu sunt două, dar oricum rapid: de includ un fişier CSS, unul JS, iar apoi datele se definesc intuitiv şi graficul e gata!

Pe moment sunt suportate patru tipuri de grafice: linie, bară, pie-chart şi… tip inel (poate are altă denumire consacrată). Ce sigur o să vă placă este că la pagina de exemple puteţi interacţiona cu codul ca să vedeţi cum funcţionează, cum se modifică graficul după datele diferite ce le daţi. Desigur, nu lipseşte documentaţia care deschide noi orizonturi (inclusiv pentru grafice mai complexe, …

node-webkit: Notepad-ul acum cu meniu şi scurtături din taste

Autor: radu.capan. Data: 20.04.2014.
Clasat la: WebDevelopment
Taguri: , ,
0 comentarii. 3.881 afişări.

Captura de mai jos ar putea uşor să deruteze: pare un program. Da, eu am un fişier EXE (vă amintesc că e cam mare, vreo 40MB, dat fiind că include WebKit-ul de care se foloseşte şi Chrome-ul) pe care îl lansez şi funcţionează ca un program pentru Windows. Are meniu tradiţional, are scurtături din taste… Dar în spate ne amintim că se află o pagină HTML ce prinde aripi cu JavaScript, în special cu node.js şi node-webkit. Proiectele web pot devenii aplicaţii pentru Windows sau Mac sau Linux!

imagine

Partea CSS e neschimbată. În partea HTML am scăpat de butoane acum că avem meniu. Ce contează este partea JavaScript pe care o şi pun mai jos. Funcţia construireMeniu() face ce spune numele :). M-am limitat …

node-webkit: Un Notepad scris în JavaScript

Autor: radu.capan. Data: 19.04.2014.
Clasat la: WebDevelopment
Taguri: , ,
0 comentarii. 2.805 afişări.

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

Autor: radu.capan. Data: 19.04.2014.
Clasat la: WebDevelopment
Taguri: , ,
0 comentarii. 2.120 afişări.

Î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

Autor: radu.capan. Data: 18.04.2014.
Clasat la: WebDevelopment
Taguri: , ,
0 comentarii. 2.078 afişări.

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 …

Retrospective pentru 2013 pentru webmasteri

Autor: radu.capan. Data: 19.01.2014.
Clasat la: WebDevelopment
Taguri: , ,
0 comentarii. 2.140 afişări.

Ştiu că articolele sunt din 2013, dar reunirea de resurse e prea importantă ca să nu le las aici semnalate. Într-o zi cu soare îmi imaginez că o voi lua la puricat, instrument cu instrument, ca să văd ce minunăţii sunt. Evident, ca orice retrospective, se intersectează cu alte recomandări şi semnalări de-a lungul anului. Am regăsit deci şi lucruri de care ştiam şi lucruri noi. Articolele cu pricina, ambele de pe SpeckyBoy, sunt 50 Javascript Tools & Resources from 2013, respectiv 50 CSS Tools & Resources from 2013.

imagine

Dintre instrumentele pe care am ajuns să le văd puţin şi mi-au atras atenţia aş semnala:

  • WideArea – cu 6KB un câmp textarea se poate extinde pe …

UIkit 1.1 şi Bootstrap 3

Autor: radu.capan. Data: 12.09.2013.
Clasat la: WebDevelopment
Taguri: , , ,
0 comentarii. 2.817 afişări.

Am dat zilele acestea peste UIkit, o altă bibliotecă ce îţi permite să porneşti rapid un sit cu „ingrediente” ce arată bine, via HTML, CSS şi JavaScript. În fapt îmi aminteşte mult, mult de tot, de Twitter Bootstrap, având poate un 80% suprapunere, în rest fiecare cu câte ceva nou. Drept urmare vom găsi şi aici cele necesare pentru a aranja textul pe coloane, pentru a avea formulare frumoase, meniuri, taburi, dropdown-uri, ferestre modale şi altele.

imagine

Avem şi nişte opţiuni pentru animaţii simple (dacă vrem ca nişte div-uri să apară cu fade sau curgând dintr-o anumită direcţie). Cu Overlay putem uşor suprapune un text descriptiv peste …

Intro.js: pentru a evidenţia părţi din pagină

Autor: radu.capan. Data: 04.07.2013.
Clasat la: WebDevelopment
Taguri: ,
0 comentarii. 2.104 afişări.

Am văzut desigur aşa ceva, fiecare, pe diverse situri. O modalitate de a prezenta vizitatorului părţile mai importante ale paginii, cu scurte explicaţii. Poate situl nostru e o webaplicaţie şi atunci aşa ceva ne-ar ajuta pe post de help. Intro.js constă din două fişiere, unul JS şi altul CSS, pe care evident trebuie să le apelaţi în proiectul Dvs. Apoi tot ce trebuie este să folosiţi data-step (cu numărul dorit) şi data-intro (cu textul explicativ dorit) în tagurile elementelor de evidenţiat. Pot fi div-uri, headline-uri, liste… mai orice element HTML.

imagine

Proiectul îl puteţi vedea în funcţiune din singura lui pagină. Apăsaţi doar pe butonul Show me how şi veţi vedea. De reţinut că navigarea între elementele evidenţiate se poate …

Twitter Bootstrap adaptabil pentru orice rezoluţie

Autor: radu.capan. Data: 10.05.2013.
Clasat la: WebDevelopment
Taguri: , ,
0 comentarii. 2.538 afişări.

Formidabilul framework numit mai pe scurt Bootstrap permite să realizăm webaplicaţii responsive, adică din acelea care îşi adaptează designul automat după rezoluţie. Informaţii mai multe veţi găsi mergând aici. Eu doresc doar să ofer mai jos un cadru simplu de la care se poate porni (de fapt e cadrul standard oferit de Bootstrap, tradus pe ici pe colo şi pregătit pentru a fi responsive). Aşa după cum veţi vedea din cod, magia presupune două rânduri: linia 5, respectiv linia 10 din codul pus mai jos. Cel mai bine e să deschideţi exemplul de aici într-o fereastră nouă şi să vă jucaţi cu ea.

imagine

În ce sens să vă jucaţi? Redimensionaţi fereastra. Veţi observa că meniul …

Twitter Bootstrap cu alte culori

Autor: radu.capan. Data: 03.05.2013.
Clasat la: WebDevelopment
Taguri: , , ,
0 comentarii. 2.572 afişări.

Am scris în ianuarie pentru prima oară despre Twitter Bootstrap şi au urmat apoi câteva articole mai în detaliu… dar m-am oprit. Însă nu m-am oprit din a folosi acest framework deosebit. În fapt am avut două proiecte deja scrise cu el şi sunt foarte mulţumit! Dacă nu mă înşel, un comentariu al unui cititor spunea cândva ceva de genul: “dar cu Bootstrap nu vor arăta toate siturile la fel?” Ei bine, nu. Bootstrap ne permite chiar din pagina oficială să afectăm în primul rând culorile, dar puţin şi unele dimensiuni (de la fonturi, la elemente, precum înălţimea la nabar).

imagine

Ce trebuie să facem este să pornim de la pagina Customize. Desigur, dacă vrem să reducem dimensiunea framework-ului vom …