Arhiva pentru categoria “WebDevelopment”

Typehead: pentru Bootstrap 3 şi nu numai

Una dintre deciziile asupra cărora sper să se revină a fost eliminarea din Bootstrap 3 a componentei pentru precompletare de text. Era o treabă simplă, frumos încadrată în Bootstrap… de ce au scos-o? Acum soluţia este un plugin extern, formidabil, nimic de spus, dar oricum ai nevoie de nişte paşi în plus. Mai exact ai nevoie de typehead.js, care ne oferă o demonstraţie din chiar prima pagină şi mai multe demonstraţii aici. Da, puternic! Totuşi, pentru proiecte simple webmasterii mai începători riscă mai mult să îşi cam prindă urechile.

imagine

Şi unde mai pui că după ce ai făcut partea JavaScript să meargă… zero la capitolul CSS. Da, typehead.js nu include nimic pentru partea de aspect. În timp ce exemplele arată …


Google ne învaţă fundamentele webului

Google trăieşte din internet şi vrea fără îndoială un internet de calitate, iar pentru aceasta a oferit şi oferă tot felul de instrumente care să vină, să ajute în această direcţie. Web Fundamentals este un proiect recent, demarat prin martie, publicat într-o primă versiune pe 30 aprilie, dar care va fi cică „finisat” prin iunie. Oricum, puteţi intra de pe acum şi citi. Este un fel de documentaţie online care se adresează celor ce au trecut de ciclu primar. Adică nu vă aşteptaţi să învăţaţi de aici bazele HTML :).

imagine

În fapt „cartea” online ne propune la început un proiect concret, un sit care să poată fi frunzărit şi de sub telefoane mobile. Este doar un pretext pentru a fi învăţaţi pas …


Midway.js: pentru a centra elementele într-o pagină

Webmasterii ştiu că uneori te alegi cu dureri de cap atunci când încerci se centrezi, în special vertical anumite elemente dintr-o pagină. Dacă vrei să meargă şi responsive, adică pe orice rezoluţie şi/sau la schimbarea dimensiunii ferestrei, atunci o soluţie simplă este Midway.js. Nu am folosit-o încă în proiecte (voi pune la final ce cod folosesc eu) şi recomandarea mea e de aceea cu mici rezerve. În primul rând nu scrie că depinde de jQuery… dar depinde. Apoi nici dacă merge pentru a centra un element în cadrul unui alt element (în testele mele a mers şi nu a mers, după caz).

imagine

Folosirea e în teorie simplă: la div-ul (sau elementul dorit) pui clasele midway-horizontal şi midway-vertical după nevoie.  Dacă vrei să …


Pluginurile jQuery ale lui Ion

De fapt Ion nu e un român. E un rus pe numele lui Denis Ineshin, chiar din Moscova. De ce îşi prefixează munca cu Ion mă depăşeşte (chiar nu am stat să aflu). Important este că are nişte pluginuri jQuery remarcabile şi m-am gândit că poate vreţi să ştiţi de ele. Chiar dacă jQuery UI include unele dintre ofertele lui Denis, vorbim de alt design şi uneori de un control mai bun. Le găsiţi catalogate aici. Eu doar le voi enumera pe scurt. Ion.RangeSlider ne oferă evident un slider cu „skin” configurabil (3 la pachet). Poate fi folosit pentru indicarea unei valori sau a unui interval.

imagine

Ion.Tabs e pentru taburi şi are două skin-uri, arătând – depinde de …


Vex: pentru dialoguri (cică de secol XXI)

„Dialogs for the 21st century” ar duce cu gândul la ceva iniţiativă scriitoricească, dar este vorba de o bibliotecă pentru jQuery ce permite un sistem flexibil de ferestre (pentru dialoguri). Desigur, secolul XXI nu înseamnă alb şi negru, chiar şi cu simplitatea de design a la Windows 8. În fapt aspectul rudimentar cu care eşti întâmpinat în pagina demonstrativă a lui Vex este o invitaţie la a ne imagina noi ce putem face, dat fiind că suntem în control la capitolul design.

imagine

După ce aţi trecut de demo-ul poate nu foarte sugestiv, vă recomand să studiaţi Vex de aici. Veţi vedea că cu Vex se pot implementa cele trei tipuri comune de dialog: tip alertă (un mesaj cu un buton), …


Textarea pe tot ecranul

La un proiect la care am lucrat recent am avut o frustrare legată de un câmp/control textarea pe care l-aş fi vrut şi mare… dar şi mic. Adică cumva imposibil: să nu ocupe prea mult spaţiu, că mai erau şi alte informaţii de cerut, dar totuşi cine lucrează să poată să scrie rezonabil în acel textarea. Desigur, ştiu soluţiile care lungesc textarea pe măsură ce este nevoie, dar nu era ce îmi doream eu. Atunci mi-am amintit că există nişte soluţii de mărit textarea pe tot ecranul. Cât de cool! Ceva cam ca la WordPress (dar eu nu folosesc, că scriu articolele din Windows Live Writer).

imagine

Ei bine, am găsit două soluţii. Una simplă: WideArea. Poate după gustul unora prea simplă, neexistând …


nanoGallery: wow, wow, wow

Voi începe admiţând că nu a folosit nanoGallery în vreun proiect, dar negreşit o voi face. Este vorba de un plugin jQuery absolut extraordinar. Că lucrează pe un set de imagini e una; că poate lucra pe albume deja existente, fie că sunt cazate pe Flickr, Picasa sau altele, este absolut năucitor. Cu câteva linii de cod poţi insera galerii existente: toată galeria sau un album anume. Unde mai pui şi că merge sub smartphone-uri, adaptându-se ca rezoluţie (bonus: va descărca de pe Picasa/Flickr acea rezoluţie potrivită rezoluţiei disponibile – deci nu o poză de 2MB când are un spaţiu mic de afişare).

imagine

Pe pagina proiectului găsiţi demonstraţii grăitoare, dar eu, ca Toma necredinciosul, am vrut să văd cu ochii mei, pe …


Dropbox: cum să îi lăsăm pe alţii să "depună" fişiere

În diverse scenarii poate fi util să permiţi unor persoane, chiar şi anonime, să încarce fişiere în contul tău Dropbox. Poate lucrezi în echipă cu ceva persoane la un proiect, iar colaboratorii pot contribui cu ceva fişiere. Poate strângi fotografiile după o excursie. Poate strângi dosare pentru cine ştie ce concurs. Scenarii sunt. Dar soluţii? Una simplă ar fi să folosim JotForm, mai exact de aici. În câteva secunde, evident făcând autorizarea necesară, veţi ajunge la ceva ca mai jos. Un click pe Next şi avem deja linkul de distribuit sau codul de inserat într-o pagină web.

imagine

Doar că mie nu mi-a mers acel link. Poate pentru că nu am terminat procesul. Am trecut deci la configurarea formularului. Poţi să adaugi ce …


Bootbox.js pentru Bootstrap

Nu ştiu cât de mult vă place vouă Bootstrap, dar mie îmi place mult de tot. Şi de la sine oferă mult, o bază solidă de pornire, dar evident nu poate acoperi toate gusturile şi mai ales nevoile. La un proiect la care am lucrat recent trebuia să ofer posibilitatea ştergerii unor informaţii. Evident că nu afişez mesajul de mai jos :). Ideea e că ferestrele modale oferite de Bootstrap cer un cod luuuung, şi dacă tu ce vrei sunt scurte confirmări te cam plictiseşti cu acele coduri. Şi uite aşa cineva s-a gândit să scrie Bootbox.js, care uşurează enorm munca.

imagine

Avem trei tipuri de dialog, după nevoi:

  • tip alertă: bootbox.alert(mesaj,callback);
  • tip întrebare cu da şi nu: bootbox.prompt(mesaj,callback);
  • tip complex: bootbox.confirm(mesaj,callback);


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

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 …