Prototype plugin: Showcase

Am dezvoltat acest plugin ca pe o jucarie personala, asa ca il prezint aici in speranta ca ii va fi de folos cuiva.

Ca de obicei, inainte de detaliile tehnice, vizitati paginile cu exemple:

• Orizontal
• Vertical
• Diagonal

1. Cerinte

Pentru functionarea acestui plugin veti avea nevoie de:

• Prototype 1.6
• Libraria Effects din cadrul Script.aculo.us 1.8

Acestea vor trebui incarcate in pagina inaintea Showcase.js:

1
2
3

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="effects.js"></script>
<script type="text/javascript" src="showcase.js"></script>

2. Markup

Minimul de markup si stilizare necesare pentru functionare este urmatorul:

1
2
3
4
5
6
7
8
9

<a href="#next" class="controls" rel="next">Next</a>
<a href="#previous" class="controls" rel="previous">Previous</a>	
<ul id="showcase">
	<li><img src="images/1.jpg" alt="1" /></li>
	<li><img src="images/2.jpg" alt="2" /></li>
	<li><img src="images/3.jpg" alt="3" /></li>		
	...
	<li><img src="images/n.jpg" alt="n" /></li>
</ul>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

#showcase {
	position: relative;
	width: 700px;
	height: 170px;
}
#showcase li {
	width: 170px;
	height: 170px;
	float: left;	
	list-style-type: none;	
}
#showcase li img {
	width: 100%;
	height: 100%;
}

Codul de mai sus corespunde unui Showcase orizontal de 700×170px. Orientarea (orizontala / verticala / diagonala) este selectata la initializare:

3. Initializare

Initializarea plugin-ului se face printr-o singura linie de cod:

1

new Showcase.Horizontal($$('#showcase li'), $$('a.controls'), {optiune: valoare, optiune: valoare, etc});

Orientarea este aleasa prin initializarea clasei respective din cele 3 disponibile:

1

new Showcase.Horizontal(slides, controls[, options]);

1

new Showcase.Vertical(slides, controls[, options]);

1

new Showcase.Diagonal(slides, controls[, options]);

4. Parametri optionali

Parametrii sunt selectati la initializare, in format JSON: {parametru: valoare, parametru: valoare}:

• ratio: Reprezinta raportul dintre slide-ul din centru si cele din lateral, si controleaza pasul incrementarii graduale a dimensiunii slide-urilor. Spre exemplu, un ratio de 0.3 inseamna ca slide-urile din lateral vor avea dimensiunea unei treimi a aceluia din centru (care nu este redimensionat), iar slide-urile cuprinse intre centru si lateral vor scadea treptat si proportional cu acest raport. Default: 0.5 (50%).
• size: Numarul total de slide-uri vizibile la un moment dat. Sa presupunem ca avem 20 de slide-uri, dar vrem sa afisam doar 7 simultan. Setam valoarea acestui parametru egala cu 7, iar plugin-ul va “rula” pe ecran doar cate 7 slide-uri simultan. Default: numarul total de slide-uri. Atentie: trebuie sa fie un numar impar.
• duration: Durata unei miscari (viteza). Default: 0.5 secunde.
• initialDelay: Timpul care trece din momentul initializarii pana la expansiunea initiala a Showcase-ului, creand acel efect la pornire. Default: 1 secunda.

5. Download

Puteti descarca atat Showcase.js, cat si exemplele de mai sus:

Download Showcase.js (9.4 KB)
Download Showcase.js – Packed (3.5 KB)
Download Exemple

Lansez Showcase.js sub licenta MIT, care in principiu spune ca oricine poate face ce vrea cu codul :)

Geek tools – Partea 2

Revin cu partea a doua a acestui post.

MindMeister

Ce este?

Aplicatie web de mind mapping si brainstorming.

Ce imi place?

• Usurinta in utilizare folosind doar tastatura pentru navigare / adaugare / modificare / stergere.
• Suportul pentru editarea simultana (cu feedback live) de catre mai multi utilizatori a aceluiasi mind map (brainstorming).
• Posibilitatea asignarii de prioritate / data limita / % completed / etc fiecarui nod.
• Optiunile de sharing (privat, public, vizualizare doar cu parola, etc. In mod default un mind map nu este public.)
• Ca exemplu, mind map-ul ce contine facilitatile site-ului Farmaciile Dona.

Evernote

Ce este?

Aplicatie web + desktop + mobile (inclusiv iPhone) de capturare date / luat notite.

Ce poate face?

• Colectare de date. Fie ca este vorba de text, imagini, url-uri (chiar si intregi pagini web), acestea sunt foarte simplu de capturat folosind Evernote. Spre exemplu, gasesc un text / o imagine pe care vreau sa le notez: selectez, apas Win+A, si gata, selectia mea a fost adaugata in Evernote si urmeaza sa fie sincronizata online, laolalta cu adresa web daca informatia provine de pe un site.
• Indexeaza date. Asta este cea mai importanta diferenta intre aplicatiile de genul Evernote si un sistem de bookmark management. Toate informatiile colectate de mine sunt indexate si pot efectua cautari in ele. Nu mai e nevoie sa ma bazez acum doar pe sistemul de bookmark-uri pentru a retine ceva, acum am informatia direct la indemana. Evernote indexeaza chiar si textul din imagini!
• Organizarea pe notebook-uri si tag-uri a informatiilor colectate.
• Pentru o descriere mai detaliata, moduri de utilizare si exemple de recunoastere a textului din imagini, va recomand acest articol.

Ce imi place?

• Facilitatile suplimentare unei aplicatii de bookmark management. In lista mea inlocuieste incet incet Delicious (include chiar si un tool de import automat a bookmark-urilor din acesta).
• Indexarea foarte buna a informatiilor, asa incat imi este mult mai facila cautarea.

Launchy

Ce este?

Launcher de aplicatii. Utilizatorii de Mac sunt probabil familiari cu Quicksilver.

Ce poate face?

• Lansare aplicatii. In screenshot-ul de mai sus se vede cum lansez Total Commander doar apasand hotkey-ul pentru Launchy, tasta T, si ENTER.
• Launchy “invata”. In exemplul cu Total Commander, deoarece l-am lansat de atatea ori, Launchy a invatat ca acesta este important, prin urmare va fi prima aplicatie sugerata la inceperea tastarii numelui.

• Cautari folosind orice motor de cautare. Launchy vine de-a gata configurat pentru cele mai uzuale, si pot fi adaugate oricate. Inclusiv site-ul tau! De exemplu, scriu Google (doar Go e suficient), apas TAB, scriu textul pe care vreau sa il caut, si apas ENTER. Imi va lansa automat in browser fereastra cu rezultatele cautarii.

• Navigare prin filesystem. E de ajuns sa scriu d:/ pentru ca launchy sa imi listeze continutul respectivului drive. Navigarea se face folosind sagetile / TAB / ENTER.

• Efectuarea de calcule matematice. Renuntati la calculatorul din Windows! Este de ajuns sa scriu orice expresie aritmetica direct in Launchy, si acesta imi va afisa rezultatul live (nici nu mai este nevoie de ENTER).
• Adaugat task-uri in Rememeber The Milk, postat pe Twitter, adaugat evenimente in Google Calendar. Acestea sunt ceva mai complicate si necesita instalarea librariei cURL. Instructiunile complete sunt aici.

Ce imi place?

• Inlaturarea necesitatii folosiri mouse-ului pentru o gama cat mai larga de operatiuni. Desigur aceasta functionalitate este subiectiva, si nu am intalnit pana acum designer care sa imi dea dreptate. Ei probabil ca vor prefera o unealta care sa faca exact invers, si anume preluare unor functii de pe tastatura si mutarea lor pe mouse. Dar cand 75 % din timp lucrezi numai cu tastatura, intinderea mainii pana la mouse pur si simplu nu e suficient de comoda :).
• Consumul neobservabil de resurse.

Geek tools – Partea 1

Promiteam intr-un comentariu anterior ca voi face o scurta trecere in revista a aplicatiilor (web + desktop + mobile) pe care le folosesc zi de zi pentru organizare si GTD. Toate aplicatiile prezentate sunt gratuite:

RescueTime

Ce este?

Aplicatie web + desktop ce monitorizeaza activitatea PC-ului pe care este instalata si generaza online rapoarte privind respectiva activitate. Inregistreaza fiecare aplicatie deschisa si fiecare site vizitat, precum si durata fiecarei sesiuni / vizite.

Ce imi place?

• Categorizarea (automata sau manuala) a aplicatiilor / site-urilor. Spre exemplu, editorul de cod va intra automat la Dev Tools, Yahoo Messenger la Chat, etc.
• Cumularea aplicatiilor pe categoriile sus mentionate. In acest fel, editorul de cod + clientul FTP + adresa serverului pe care sunt proiectele de la munca vor fi grupate si raportate la “Work”. Google Reader si Digg la “Reading”. Messenger si GTalk la “Chat”, etc.
• Posibilitatea adaugarii de “goal-uri” si raportarea indeplinirii lor sau nu. Spre exemplu “Spend less than 30 minutes on Chat every workday”, “Spend more that 6 hours on Work every workday”.
• Selectarea perioadelor de vizualizare a rapoartelor (day / week / month / year / forever / custom).
• Consumul imperceptibil de resurse hardware.

Remember The Milk

Ce este?

Aplicatie web + mobile foarte avansata si flexibila pentru organizarea listelor de To-Do.

Ce imi place?

• Multiplele moduri adaugare a task-urilor. Acestea se pot adauga din interfata web / mobile, Email, chiar si Twitter (prin mesaj direct la @rtm).
• Optiunile variate de a primi reminders referitoare la task-uri: Email, Twitter (primesti mesaj direct de la @rtm cand se apropie termenul unui task), Instant Messenger – prin adaugarea in lista de contacte a bot-ului lor (Yahoo, Google, AIM, MSN, Jabber, Skype, etc.).
• Simplitatea dusa la extrem a interactiunii cu RTM. Spre exemplu, data limita a unui task poate fi setata atat in mod clasic, cat si intr-un mod foarte natural, folosind simplu limba engleza (introduc “next friday @ 10″).
• Task-uri repetitive.

Remember The Milk Firefox Extension

Ce este

Extensie Firefox ce adauga un sidebar in interfata GMail ce permite efectuarea tuturor operatiilor pe Remember The Milk direct din mail.

Ce imi place

• Avand in vedere ca multi dintre noi folosim mail-ul des, este foarte util atat sa avem task-urile in fata, cat si sa nu trebuiasca sa facem switch intre doua aplicatii.
• Adaugarea unei noi optiuni in GMail, si anume “Create task” la selectarea unui mail, ce adauga automat in RTM un task cu titlul indentic cu subiectul mail-ului selectat, si cu link catre respectivul mail.
• Ca paranteza, va recomand “Google Apps ca server de e-mail“.

Dropbox

Ce este

Solutie de gazduire fisiere ce foloseste serviciul Amazon S3.

Ce imi place?

• Aplicatia desktop mapeaza cei 2GB oferiti pe un folder de pe sistemul pe care este instalat, permitand astfel folosirea spatiului ca si cand ar face parte din HDD-ul utilizatorului.
• Posibilitatea folosirii aceluiasi cont pe mai multe sisteme, avand in felul acesta un folder comun pe toate sistemele (spre exemplu cel de acasa si cel de la birou).
• Compatibilitatea cu cele mai importante platforme si sisteme de operare (Windows XP / Vista, Mac OSX Tiger / Leopard, Ubuntu, Fedora).

Update de toamna – 2008

A trecut concediul, ne-am intors la munca, vine si toamna, totul pare ca intra in ritmul normal.

In ultima perioada am lansat cateva proiecte si lucram la inca multe altele. Imi place sa observ ca proiectele (atat cele pe rol cat si cele lansate deja) devin din ce in ce mai mari, clientii din ce in ce mai cunoscuti si echipa din ce in ce mai solida si unita.

Am lansat de curand site-ul Farmaciile Dona, campania Aventura Koleos 4×4 si site-ul ACMS.

Primele doua au fost lansate in cadrul echipei HyperActive, iar cel de-al treilea in colaborare cu Ovidiu Boc. Rolul meu a fost realizarea backend + frontend pentru toate.

Mi-a facut placere sa lucrez la toate 3, in mare parte datorita caracteristicilor si scopurilor diferite ale fiecaruia. Totusi, dintre toate, site-ul lantului de farmacii Dona mi s-a parut cel mai provocator, atat prin anvergura cat si prin domeniul cu care a trebuit sa ma familiarizez (spre exemplu clasificarea medicamentelor la nivel mondial pe o structura ierarhica cu 5 nivele de adancime, administrabila si editabila evident :) ).

Pe parcursul dezvoltarii am compus si un mind map al facilitatilor, pentru a-mi fi mai usor sa tin minte sectiunile care mai aveau nevoie de lucru (ca paralela, recomand aplicatia MindMeister atat pentru organizare de genul celui mentionat, cat mai ales pentru sesiuni de brainstorming solo).

Update Carousel

Deoarece am primit mai multe mail-uri care solicitau acest lucru, pun online ultima versiune a plugin-ului Carousel, ce include, printre mici optimizari, si functionalitate pause / resume, in cazul in care se foloseste optiunea de auto-start. Acestea se declanseaza la mouseover / mouseout pe slide-uri, dar desigur pot fi atasate oricarui event.

Download Carousel

• Articole recente

  • PHP SoapClient port bug workaround
  • Reset / change Windows 7 / Vista / XP password using a Ubuntu CD
  • Closure: Extend ui.DatePicker to highlight events
  • Google Analytics goal steps recorded as exit pages
  • Synchronizing tasks between Trac and Netbeans
  • Prototype: Hotkeys
  • Detectarea platformelor mobile in PHP
  • FTL jump … now!
  • Prototype: Carousel – Update
  • Prototype: Zoomer

• Categorii

  • Analytics
  • Development
  • JavaScript
  • Lifehacks
  • Linux
  • Personal
  • PFA
  • PHP
  • www

• Tweets