InContext Editing – the making of
Posted by fcarlig on octombrie 16, 2008
Filed Under Distracție, Echipa, Evenimente, Muncă | 7 Comments
Dupa aproape un an jumate de munca, echipa Dreamweaver Romania a reusit sa lanseze un produs facut 100% de catre noi – Adobe InContext Editing. Desi am avut ceva ajutor din partea echipelor din State ( in special pe partea de marketing, legal si documentatie), in rest totul a fost facut aici in Romania, incepand cu product managementul si viziunea asupra produsului si feature-urilor din el, engineering (adica dezvoltare si testare), program management, crearea si intretinerea infrastructurii necesare unui serviciu… Pentru ca am uitat sa va spun, InContext Editing este unul din primele produse de tip “Software as a Service” (SaaS) din Adobe (in locul traditionalului produs software product, care se livreaza pe cd, ambalat in cutie – pentru cei care chiar cumpara software din magazin
).
Ce e de fapt InContext Editing?
Asa cum zicea si Marius intr-un post anterior, Adobe InContext Editing te ajuta sa editezi continutul paginilor tale HTML direct in browser. Mai exact, sunt 3 componente :
- Pasul 1 (where it all starts):
- In primul rand, sunt 3 comenzi in Dreamweaver CS 4 care te ajuta sa definesti care zone din pagina ta vor putea fi editate in browser, din InContext Editing. Property inspector-ul te ajuta sa definesti ce capabilitati vor fi active pentru respectiva regiune editabila:
- Apoi, poti sa creezi si regiuni repetabile – la fel, marchezi niste zone de text care pot fi duplicate, mutate, sterse direct din browser
- Modificarile din pagina ta sunt minimale – se adauga niste atribute pe tagurile HTML din pagina, si ti se copiaza 2 fisiere js si un html in site.
- Uploadezi pagina modificata si cele 3 fisiere la tine pe FTP si o deschizi in browser.
2. Pasul 2 (where the magic happens) :
- La un semn (apasand CTRL+E pe Windows, sau CMD+E pe Mac), iti apare o interfata de login, te loghezi cu contul de InContext Editing (serviciul e gratuit, deci poti sa-ti faci unul chiar acum) si poti sa editezi textul din regiunile editabile pe care le-ai definit in Dreamweaver:
- Ce mai poti sa mai faci :
- Formatare – schimbat font, dimensiune, culoare, background color, facut text bold, italic sau underlined
- Aliniere si indentare
- Crearea de liste ordonate sau neordonate
- Aplicarea de stiluri CSS, sau de heading-uri
- Inserarea de imagini si linkuri
- Totul intr-un stil asemanator workflow-urilor din majoritatea editoarelor de text (gen FCKEditor, tinyMCE, sau – de ce nu? – Microsoft Word), pe care le poate face oricine – end-userul reprezentativ la care ne-am gandit prima data cand ne-a venit ideea produsului a fost “soccer mom” – o persoana care nu are cunostinte despre HTML, CSS sau alte asemenea
- In final, poti sa salvezi noua versiune a paginii, si sa o publici pe site-ul tau. Pentru a face asta, trebuie sa-ti inregistrezi site-ul (o singura data) la serviciul InContext Editing – adica sa introduci datele de conectare prin FTP sau SFTP catre site-ul tau. Toata editarea se face in browserul tau, folosind functionalitati cerute de pe serverele InContext Editing, iar apoi continutul modificat (doar acesta) se pune prin FTP inapoi pe serverul tau.
3. Pasul 3 (where you invite people over)
- Workflow-ul pe care l-am descris in pasul 1 (si partial in 2 – partea cu inregistrarea) va fi facut initial de catre dezvoltatorii web care vor dori sa le ofere clientilor lor posibilitatea de a face modificari minore de continut, dupa ce site-ul va fi fost terminat si lansat. Astfel, clientii nu ii vor mai suna de fiecare data cand au ceva de actualizat, ci vor putea sa-si editeze singuri textul de pe site
- Ei, pentru asta, developerii (si nu numai ei) vor folosi portalul de administrare de la http://incontextediting.adobe.com, care iti permite sa gestionezi site-urile inregistrate la InContext Editing, sa inviti useri noi cu diverse roluri pentru un site (editor, publisher sau admin), si sa ai access la tutoriale, how-to-uri sau documentatie.
Cam asta e povestea foarte pe scurt despre InContext Editing. In spate stau niste Javascript, Flex, cod server side, o arhitectura bine gandita, si o echipa dedicata care a tras multe zile (si seri) ca sa ajungem aici.
Mai multe detalii despre InContext Editing gasiti aici.
The team behind
Si acum cel mai important lucru care a stat in spatele acestui proiect de succes:
Cristinel este Product Managerul InContext Editing si cel care a lucrat extrem de mult la inceputurile proiectului pentru a crea o viziune asupra produsului, impreuna cu o parte din echipa din State. Tot el este cel la care toata echipa apela atunci cand era nevoie sa valideze/schimbe un workflow, sau sa mai introduca un nou feature care ni se parea interesant.
Lucian (aka Ciuffy) si Marius sunt Engineering Managerii echipei, si cei care au avut misiunea ca versiunea finala a produsului sa fie cat mai aproape de viziunea Product Managementului. Chiar daca asta a insemnat o re-arhitecturare la un moment dat, si o schimbare a toolbar-ului in Flash putin mai tarziu!
Adi este managerul echipei de QA, si desi ni s-a alaturat de putin timp, a reusit sa coordoneze poate cea mai dificila parte – sa se asigure ca InContext Editing se ridica la standardele de calitate ale Adobe, ceea ce nu e deloc putin lucru. Daca este cineva care poate sa puna putina ordine in haosul pe care il creem in jurul nostru, si putin calm in cadrul sedintelor, atunci el e.
Dianina este Program Managerul nostru, ceea ce inseamna ca mereu s-a straduit sa ne tina “on track” si “focused”, coordonand in acelasi timp toata comunicarea cu celelalte echipe de care am avut nevoie – si n-au fost deloc putine. In plus, a avut onoarea de a face primul demo de InContext Editing catre upper-upper management – primind in schimb multe aplauze
Calin este UX (user experience) designerul nostru. In momentul in care l-am gasit (cu greu), am inteles ca era muult mai bine daca activa in cadrul echipei noastre de la inceput. Ne-ar fi scutit de multe sedinte si contradictii incercand sa aflam ce-ar fi mai eficient, util, atragator pentru un utilizator.
Dan este “the father of all browser code”. Asa ca daca ai vreo problema cu vreun cod care nu merge pe vreun browser, el e persoana cu care trebuie sa vorbesti. Numai el stie saracul cate ore a petrecut facand debugging pe Firefox, Internet Explorer, Safari. Ce zici Dane, cand suportam Chrome?
Silviu a venit mai tarziu in echipa noastra, dar a avut o contributie importanta la partea de “client” (adica partea de editare in browser – pasul 2 in insiruirea de mai sus). Focus-ul lui a fost partea de arhitectura de pe client, unde a lucrat impreuna cu Dan si Razvan, aducandu-i mai multe imbunatatiri, printre care reducerea semnificativa a timpului de incarcare in browser.
Razvan R si Irina au fost maestrii pe partea de “servicii” – adica au creat codul care ruleaza pe serverele Adobe, si face toata treaba din spate. Tot ei s-au ocupat si de functionlitatile scrise in Flex, din portal. Flex a fost o technologie noua pentru amandoi, dar s-au descurcat excelent si au reusit sa ajunga la un nivel avansat intr-un timp record. Razvan a fost responsabil si pe partea (partile de fapt) de deployment, escalation si monitoring – un alt “challenge” pentru el. Irina este pasionata de alergare, si a fost “reprezentatul” echipei noastre la maratonul desfasurat in Bucuresti (glumesc, evident). Ne-a luat cu ameteala cand ne-a povestit prima oara cum se antreneaza alergand 5, 6, 7, chiar 12 sau 15 kilometri; sigur n-am putea tine pasul cu ea!
Cristian (toata lumea il stie drept Cristic) este “omul bun la toate”. In primul rand a lucrat impreuna cu Razvan si Irina pe partea de servicii si de monitorizare si deployment. In plus, Cristic s-a ocupat si de partea de security, investind multe ore verificand fiecare bucatica de cod si de spec, asigurandu-se ca nu suntem vulnerabili. Imi aduc aminte si acum cum ma intalneam cu el dimineata si avea un ditamai zambetul pe fata in timp ce-mi povestea ce noua vulnerabilitate a gasit
Cami este cel mai nou membru al echipei de dezvoltare, dar ea are experiente mai vechi cu echipa noastra. A facut un internship la noi, iar anul asta si-a facut si proiectul de diploma. Apoi a devenit “membru cu drepturi depline” al echipei, iar Easter Egg-ul mentionat mai jos este creatia ei.
Razvan si Marius sunt cei doi “Dreamweaver gurus” pe care ii avem in echipa – impreuna au creat toata functionalitatea din Dreamweaver pentru InContext Editing. La fel, tot impreuna s-au ocupat si de trecerea toolbar-ului din client din JavaScript si HTML cum era initial, in Flex, schimband complet infatisarea produsului.
Florin este expertul in “build system” si cel care a avut mereu grija sa avem intotdeauna daily builds pe care sa putem sa stricam ceea ce dezvoltatorii au implementat in ziua precedenta. Probabil ca denumirea cea mai potrivita ar fi de “build engineer”, dar Florin a contribuit si la cateva feature-uri importante din client. Daca se pot insera imagini sau linkuri in pagina, e in mare parte si “vina” lui
Asa, gata dezvoltatorii, sa trecem la QA:
Diana a fost carcotasul nostru sef, si prima care se asigura ca respectam “Quality-first criteria” (detalii, poate intr-un episod viitor). Asta a rezultat in multe ore petrecute la serviciu, multe sedinte si multe mailuri cu taskuri pentru fiecare din echipa de QA. A, si multe buguri logate in bug-tracker!
Bogdan ar putea fi considerat “programatorul” echipei de QA, tot timpul il vezi mesterind vreun script care sa-l ajute sa testeze mai usor sau mai eficient. Linux-ul si consola de terminal sunt cei mai buni prieteni ai lui, iar scripturile pe care le-a facut pentru testarea de performanta si automatizare ne-au facut invidiosi pe toti.
Andrei a fost si el un om bun la toate. O data poarta cealalta parte din vina pentru inserarea de imagini si linkuri, dar ne-a ajutat si cu performance, automation, failure testing si alte scripturi. In plus, se straduieste din greu sa ne invete ping-pong, dar mai avem mult pana sa ajungem la nivelul lui
Costin, desi este cel mai nou membru al echipei de QA, si-a propus un obiectiv foarte ambitios inca de la inceput. Si a reusit, dezvoltand o solutie custom impreuna cu Bodgan, solutie care a inceput sa se propage si catre alte echipe din Adobe Romania. Ca urmare, smoke-urile zilnice pe build ruleaza singure singurele pe monitorul din fata lui, in timp ce el isi bea linistit cafeaua
Sa mai zic de meciurile de fussball, la care nu reusim sa-l invingem?
Ionut este probabil cel mai carcotas si cel mai atent la detalii dintre noi. E vai de tine daca ai scapat vreun typo sau vreo exprimare ambigua prin mailuri, documentatie, mesaje de eroare si alte chestii care ar putea ajunge la client.
Whew! abia acum imi dau seama ca suntem o echipa asa mare, si ca managerii nostri nu au avut deloc o treaba usoara cu noi.
Una peste alta, a fost o experienta de neuitat pentru noi, cu bucurii si provocari, cu seri mai lungi in care stateam sa raspundem la mailuri sau sa vorbim cu cei din State in sedinte. Au fost multe certuri (constructive, bineinteles) si multe momente in care ne-am bucurat uitandu-ne la ce am putut realiza. Si multe meciuri de fussball, si vreo cateva petreceri Adobe.
Deja incantarea de la release incepe sa se estompeze, si incepem sa ne gandim la versiunea urmatoare, la ce mai avem de facut, la cum folosesc utilizatorii produsul pentru care am muncit atata timp.
In final, un bonus : o mare inghetata celui care gaseste Easter Egg-ul – un feature ascuns care va dezvalui adevaratele fete ale echipei
Florin
P.S – scuze pentru toata rom-glezismele astea, am incercat sa le tin la minim, dar e cam greu sa spui altceva in loc de a “ice-fica” pagina. Speram sa devina un verb la fel de cunoscut ca a photoshopa
Comments
7 Responses to “InContext Editing – the making of”
Leave a Reply








Cam 150 – 160 de ani de experienta (a)cumulata in echipa.
Chapeau!
Daca stau bine sa ma uit… desi nu vezi nimic deosebit pana si myadobe are “haine noi”
E bine daca platiti salariu cuiva doar pentru perfectionarea stilului de ping-pong. Eu m-am intrebat de la inceput de ce l-ati angajat pe Aprozeanu, sa stea botos in coltul pozelor si sa faca glume proaste…. insa cine sunt eu pana la urma sa va judec planul de afaceri.
Si daca vreti sa cunoasteti echipa in carne si oase, va invitam azi in Piranha la o bere. Suntem grupul acela galagios
Bogdan
P.S. Suntem deja aici, si nu stiu cat o sa stam
Felicitari si ne vedem indata la o Timisoreana
FYI ficker ‘oiu nu merge cu flash 10
[...] think that in the next versions, the service will be improved and we will really use InContext Editing. The way I see it is that InContext Editing will become a good content management system and maybe [...]
felicitari baieti! si fete!