duminică, 14 decembrie 2008

Div şi span

Considerate tag-uri generaliste (fără un specific bine-delimitat, fiind folosite pentru a grupa laolaltă părţi neomogene de HTML), cele două elemente sunt despărţite prin faptul că, în vreme ce <div> marchează o divizie de HTML, conturând un element block-level, <span> uneşte părţi inline de HTML, precum cuvinte sau fraze scurte, pe care le reuneşte sub aceeaşi clasă / id.


<div>
<h1> Lykke Li </h1>
<p> I will do it, Push button, Pull trigger, Climb mountain, Jump off a cliff. </p>
</div>

vs

<p> I will do it, Push button, Pull trigger, Climb mountain, <span class="action">Jump</span> off a cliff. </p>



O altă vrăjitorie în care e implicat tag-ul <span> şi care poate fi observată de către utilizatorii platformei Wordpress dacă se uită sub fusta articolelor, unde domneşte umbra şi răcoarea HTML, este aceea de a adăuga cod CSS asupra unor porţiuni din text. Iată cum arată, de exemplu, unul dintre paragrafele de mai sus, transpuse în cod HTML de către motoraşul Wordpress:


<span style=”color: #ff9900;”> I will do it, Push button, Pull trigger, Climb mountain, Jump off a cliff. </span>

Web Developer pentru Firefox

Parte din ceea ce face Firefox un browser extrem de util şi prietenos cu utilizatorul este reprezentată de suita de add-on-uri pe care le poţi grefa în bara de unelte, la îndemână oricând ai nevoie de ele. Eric Meyer, în tutorialul de CSS Web Design de pe Lynda.com, face o scurtă însă relevantă demonstraţie despre utilitatea Web Developer pentru cineva care încearcă să atingă acest domeniu. Astfel poţi face modificări importante doar printr-un singur click, precum dezactivarea stilurilor sau a JavaScript, editarea CSS sau HTML, redimensionarea paginii, validarea CSS sau HTML şi multe, multe altele.

web_dev

duminică, 16 noiembrie 2008

Cum am ajuns aici: Despre cărţi bune la toate dar mai ales la front-end development

2967890083_344c121ec2

Ca student la Calculatoare, să simţi fiecare curs ori laborator ca o dezamăgire a propriului eu poate fi considerat semn că poate, e posibil zic, ca locul tău să nu fie acolo. De ce am continuat până acum, în anul V? Dincolo de bunastarea interioară pe care mi-o insuflă proximitatea oamenilor inteligenţi ori de implicarea într-o organizaţie studenţească extrem de activă, a fost întotdeauna dorinţa -- camuflată sub forma unei intuiţii -- că trebuie să fie mai mult decât atât, că e nevoie doar de o fărâmă de răbdare pentru a descoperi felia de tehnologie care mi se potriveşte şi care mă poate entuziasma. Aşa am ajuns la Web Development.

E o ocupaţie nesolicitantă, de fetiţe şi băieţei, veţi spune. Oricine poate să facă site-uri, oricine cu acces la un Microsoft FrontPage sau care a descoperit opţiunea de Export din Photoshop. Ei bine, aici stă partea interesantă a demersului meu. Pentru că nu am vrut să gândesc că totul e uşor încât poate fi mânuit cu multă îngăduinţă. Nu am vrut să cred că oricine poate face un site bun şi am refuzat să accept faptul că nu există secrete, lucruri ascunse, de fineţe, menite doar cunoscătorilor. Am vrut să iau lucrurile temenic, să citesc mult şi de la oameni real-cunoscători în domeniu. În mod asumat, am vrut să cred că e rocket-science.

Cu mult ajutor deopotrivă bibliografic şi de încurajare din partea prietenilor, mi-am început periplul livresc cu o carte pe care o citeşti ca pe o lectură de plăcere. Don't make me think a lui Steve Krug e o delicioasă manieră de a înţelege cum trebuie să fie un site ca să ridice cât mai puţine probleme utilizatorului, acesta trebuind în mod ideal să-şi exerseze gândirea doar asupra conţinutului unui site, nu şi în ceea ce priveşte interfaţa (se spune că un UI ideal e cel pe care nici nu-l observi).

Cu încrederea plutind la nivelul tavanului, simţind că sunt pregătită pentru următoarea categorie de greutate, am pornit vitejeşte printre filele Designing Web Navigation, semnată James Kalbach, o carte muult mai consistentă la nivel de informaţie decât precedenta, cât parcă a mă face să înţeleg că a fost joacă până atunci, însă lucrurile pot deveni extrem de complicate. Kalbach face o simfonie a posibilităţilor de navigare într-un site, de la poziţionarea barei de meniu până la site-map-uri şi modalităţi de manevrare şi relevare a rezultatelor unei căutări, sugerând de fiecare dată un alai de soluţii alternative la aceeaşi problemă. La final, simţi că nu mai aparţii categoriei de grădiniţă, deja ai fost iniţiat în lumea serioasă a gravităţii web design-ului.

Zeldman, iar cine activează în domeniu şi nu ştie cine e Jeffrey Zeldman e invitat să facă un dublu tulup cu tsukahara întins, e un extraterestru care s-a gândit să ne înveţe standardele într-ale design-ului, fapt pentru care s-a apucat de făcut W3C-ul şi de persuadat companiile proprietare a marilor browsere să adere la un set de directive comune, care să uşureze considerabil munca dezvoltatorilor web. Şi a reuşit, în mare parte. Designing with Web Standards e o biblie a dezvoltatorului de site-uri, o iluminare într-ale folosirii corecte a codului CSS şi XHTML, o convertire la Kabbalah bunului simţ şi a bunelor practici web.

În curând, după un detur facultativ, însă, ştiţi voi, obligatoriu, voi sfârşi cartea de High Performance Web Sites a lui Steve Sounders, o carte esenţială pentru a crea un site funcţional şi uşor utilizabil. Cele 14 reguli, de la poziţionarea CSS-ului şi a JavaScript-ului în cod până la a folosi un Content Delivery System, se reunesc într-un decalog modificat, al cărui nume rămâne astfel întrucât nu am curajul să creez cuvinte precum patrusprezecalog, pentru care orice front-end credincios ar arde pe rugul performanţei, fapt care, oricum, îi uşurează digestia destul de mult.

Ce urmează? Asta, asta şi în mod sigur asta. Să ne fie de bine!

luni, 10 noiembrie 2008

Ce să NU faci în Web Design

Zebradog

Când porneşti la drum, te ajută să ai un bagaj de lucruri pe care ştii că e bine să le faci. De fapt, întregul rucsac pe care-l porţi în spate e încărcat de reguli albe, de fapte pozitive la care vei apela în mare partea a călătoriei. Însă, dincolo de suma de unelte constructive, mereu e nevoie să ştii de ce anume trebuie să te fereşti, ce ravenă este periculoasă sau ce râu e mai adânc decât pare. O grămăjoară de lucruri negre, cât să le aduni într-o batistă, însă pe care trebuie să le ai permanent în vedere.

În web design, dacă vrei să joci după regulile băieţilor buni (şi nu după directivele învechite, îngălate, păguboase ale aproximativ-ştiutorilor), atunci trebuie să îţi însuşeşti mantra inversă de mai jos:

  • ocoleşte elementele font (orice ţine de felul în care arată informaţia va fi reglat prin CSS, iar nu prin taguri de HTML. Take that, 9th grader know-it-all!!1)
  • nu apela la tag-uri <br> pentru inserarea de linii albe (spaţierea, care ţine de aspect, nu de structura conţinutului, va fi reglată de CSS şi nu de HTML, prin elemente de padding sau margin)
  • nu insera atribute pe tag-ul <body>, precum culoarea textului, a link, etc (orice fapt prezentaţional este în jurisdicţia CSS)
  • nu apela la entităţi &nbsp; (non-breaking space, spaţiu folosit uneori pentru indentare; din nou, grădinarul Geoffrey n-are ce căuta amestecând cu foarfeca în supa lui Chauncey)
  • evită tabelele pe cât posibil (am întâlnit un individ care credea cu pasiune că orice site este dependent de structura tabelară de HTML; aceasta e mistificarea în care sunt în pericol să cadă cei care nu au fost atinşi de ideea magică a web-ului semantic. Acestora trebuie să le reamintim că în casa unui web developer inteligent sunt majoritar scaune, eventual o masă, două)

Pe scurt: foloseşte HTML pentru structurarea conţinutului şi CSS pentru a modela aspectul informaţiei. Good job, eşti aproape web developer. ^_^

marți, 4 noiembrie 2008

CSS: Box Model Hack

[The coding examples in this article may be considered obsolete. I've yet to update my 2003-ish knowledge.]



Consorţiul W3C încearcă să uniformizeze practicile în web design sub umbrela gândirii de tip "creează o dată, publică oriunde". Cu alte cuvinte, produsul muncii unui web developer, creat sub auspiciile standardelor web propuse de organismul sus-menţionat, poate fi utilizat cu (aproape) orice agent utilizator, trecut ori preconizat. Dacă în trecut opţiunea de a face mai multe variante ale aceluiaşi site era considerată practică firească, astăzi această manieră de gândire e considerată o blasfemie a bunelor practici web, păguboasă pentru timpul şi resursele implicate într-un proiect.


Şi, cum caracteristicile browserelor existente sunt de multe ori contradictorii şi reciproc eliminatorii, developerii au scornit o serie de ocolişuri menite să le uşureze munca. Unul dintre aceste hack-uri este cel propus de către Tantek Celik, nume important pentru industria de software, prin implicarea sa în dezvoltarea Internet Explorer pentru Mac şi prin multe alte contribuţii referitoare la XHTML şi CSS. Al său Box Model Hack vine în întâmpinarea bug-ului box model întâlnit în Internet Explorer pentru Windows, până la versiunea 5 inclusiv.



În ce constă acesta, pe scurt? Întâi trebuie să înţelegem ce este de fapt box model -- anume, o manieră de reprezentare grafică, ce permite elementelor block-level, precum p sau blockquote, să conţină padding, margini sau borduri. Problema apare în momentul în care browserele interpreteaza în mod diferit dimensiunile menţionate în codul CSS. De o parte sunt cele care implementează modelul propus de W3C, care consideră că atributul width se referă la lăţimea conținutului celulei, iar padding la spaţiul dintre conţinut şi bordură, de cealaltă parte sunt browserele (mă rog, browser-ul..) care au rămas fidele modelului tradiţional, care consideră că dimensiunile de lăţime şi înălţime se aplică dintr-o bordură în cealaltă. Astfel că, acolo unde marea parte a browserelor stabilesc dimensiunile conţinutului - care ulterior sunt fixe, aplicând apoi padding şi borduri, IE aplică padding şi borduri în spaţiul definit de width, ceea ce conduce la diminuarea spaţiului menit conţinutului.



Tantek Celik a venit cu o soluţie elegantă care șuntează această problemă: în definirea unui element box-level, se menţionează dimensiunea celulei dorit a fi preluată şi folosită de către IE, urmând să se aplice 2 reguli pe care IE nu le recunoaşte, însă care sunt familiare celorlaltor browsere, şi să se rescrie regula referitoare la width, de data aceasta cu dimensiunea pe care o dorim a fi aplicată în browserele ce funcţionează după modelul W3C.

div.content {

width: 400px; // dimensiune pentru versiunile problematice IE

voice-family: "\"}""; // IE5 se opreşte aici

voice-family: inherit;

width: 300px; // regula pentru browserele supuse standardelor

}

Totodată, se menţionează şi o regulă pentru browserul Opera, "Be kind to Opera rule", întrucât acest browser, deşi aplică modelul box model W3C, nu înţelege cele două reguli voice-family:

html>body .content {

width: 300px;

}

There you have it. Box Model Hack. Pentru un Internet curat şi developeri fericiţi.

luni, 3 noiembrie 2008

Scurtă introducere în Javascript şi Ajax

You got stuck in a moment.

JavaScript este una dintre componentele de bază pentru Web 2.0. Acesta este un limbaj de scripting ce permite generarea de conţinut dinamic şi interacţiunea cu utilizatorul pe partea de client, pe partea de server deja existând tehnologii în acest sens (cgi, asp.net, jsp etc.).

Au existat şi alternative la JavaScript, dar odată cu trecerea timpului acesta s-a bucurat de o tot mai mare popularitate. Sintaxa este destul de asemănătoare cu cea Java, la fel şi structura programelor, tratarea excepţiilor şi altele, cu precizarea că acesta este un limbaj doar interpretat. Mediul de lucru este oferit de către browserul web de obicei, prin adăugarea în pagina web a elementului "script". Există tool-uri pentru debugging, sub forma de add-on-uri pentru browsere, cel mai utilizat fiind Firebug, pentru Mozilla Firefox.

JavaScript este un limbaj orientat obiect, în care obiectele sunt colecţii de proprietăţi, cu mai multe atribute. De fapt, totul este considerat un obiect, inclusiv funcţiile.

Ex: var culoare = "verde", unde culoare este un obiect de tip String. function suma(a, b) { return (a + b); }

Obiectele pot avea metode predefinite sau metode care să fie definite de către utilizator. Obiectelor li se poate modifica structura în mod dinamic, chiar şi celor predefinite. Cuvântul cheie "this" face referire la contextul execuţiei, şi nu la cel al declarării, spre deosebire de Java.

JavaScript este folosit pentru procesarea elementelor DOM, acesta fiind un document XML. Există numeroase metode pentru manevrarea DOM, iar odată cu aceasta se modifică bineînţeles şi pagina web. A fost dezvoltată şi partea de lucru cu evenimentele, pentru a executa instrucţiuni atunci când se produc diverse evenimente, de exemplu: onclick(), onmouseover(), onload(), onclick() etc.

În acest context, s-a pus problema implementării unei tehnologii pe bază de evenimente, prin care să se faca comunicaţia între partea de client şi cea de server. Astfel a apărut AJAX (Asynchronus JavaScript And XML).
Aşadar s-a creat un obiect cu responsabilitatea de a asigura comunicarea asincronă între client şi server. Astfel, clientul trimite către server o cerere HTTP (prin GET sau POST), iar apoi specifică în ce fel informaţia primită va fi procesată în momentul în care ea ajunge la client de la server (pe baza unor evenimente care declanşează apelarea unor metode).
De asemenea, prin AJAX se pot invoca diverse servicii web, în pas cu noile tendinţe.

Pentru utilizarea mai uşoară a JavaScript şi AJAX au apărut diverse API-uri ca de exemplu Prototype, Dojo, Yahoo User Interface, Microsoft Ajax Library etc.

duminică, 2 noiembrie 2008

Introducere în XML – RPC

*

Partea cea mai dificilă în folosirea Remote Procedure Call este encodarea (privită ca transformare dintr-un proces în altul). Dar, XML a venit cu reprezentare simplă, textuală a datelor şi cu un standard de structurare. Grijile despre soluţiile proprietare RPC au devenit discutabile dupa ce comunitatea W3C a lansat specificatiile XML 1.0. În plus, SAX oferă o modalitate standard de accesare a XML-ului, făcând mult mai uşoară munca celor ce vor să implementeze biblioteci RPC. XML-RPC este acum o soluţie viabilă şi stabilă pentru apelul la distanţă a procedurilor.
Ca şi în folosirea SAX, DOM sau JDOM, nu e nevoie să reinventăm roata. O sumedenie de pachete sunt puse la dispoziţia programatorului. Centru de informare pentru XML – RPC se află la http://www.xmlrpc.com/. Aici putem gasi informaţii despre tipurile de date suportate, tutoriale, descrieri de clase şi pachete Java, precum şi alte informaţii utile.
Distribuţia core este formată din 13 clase, toate aflate în pachetul helma.xmlmrpc. Aceste pot fi folosite prin intermediul jar-ului lib/xmrpc.jar.


Scurtă descriere
  • XmlRpc Clasă core care permite apeluri de metode ale handler-ilor de către server-ul XML-RPC
  • XmlRpcClient Clasă client pentru comunicaţia RPC peste HTTP, incluzând proxy şi suport pentru cookies.
  • XmlRpcClientLite Clasă client pentru comunicaţia RPC peste HTTP nu include proxy şi cookie.
  • XmlRpcServer Clasă pentru server care primeşte apeluri RPC.
  • XmlRpcServlet Furnizează aceleaşi funcţionalităţi ca si XmlRpcServer într-un format servlet.
  • XmlRpcProxyServlet Se comportă ca un server XML RPC proxy
  • XmlRpcHandler Interfaţa de bază pentru controlul interacţiunilor XML RPC pentru
  • AuthenticatedXmlRpcHandler La fel ca XmlRpcHandler, dar permite autentificare.
  • Base64 Encodează şi decodează date din Bytes şi baza 64.
  • Benchmark Contorizează timpul pentru interacţiunile RPC pentru un driver specific SAX.
  • WebServer Server HTTP pentru XML –RPC.

Vom scrie o clasă cu o metodă pe care o vom invoca de la distantă. De obicei este numită handler. Atenţie la denumiri ce pot crea confuzii: un XML – RPC handler este o metodă (sau un set de metode) care primeşte o cerere XML – RPC, îi decodează conţinutul şi trimit acea cerere către o metodă sau o clasă (de obicei cea potrivită :). Un handler de răspuns sau, mai simplu spus, un handler este orice metodă sau clasă care poate fi invocată de un XML – RPC handler.

package javaxml2;

public class HelloHandler {

public String saySaTraiesti(String pseudonim) {

    return "Sa traiesti " + pseudonim;

}

}

Odată ce avem handler-ul, trebuie să creăm un program care să ne pornească sever-ul XML – RPC, să asculte cererile şi să le trimită către handler-ul corect (ca să ne mearga RPC-ul, nu?). Înainte ca server-ul să fie pornit, trebuie specificat driver-ul SAX pentru parsare şi encodare XML. Driver-ul default este James Clark’s XP parser (http://www.jclark.com/).
În acest expemplu, folosim Apache Xerxes specificând clasa ce implementează parser-ul Sax (metoda setDriver()). Creăm listener-ul HTTP care va servi cererile XML-RPC şi înregistrăm clasele handler care sunt disponibile pentru apelul la distanţă.

package javaxml2;

import java.io.IOException;

import helma.xmlrpc.WebServer;

import helma.xmlrpc.XmlRpc;

public class HelloServer {

public static void main(String[] args) {

    if (args.length <>

      System.out.println("Mod de folosire : java javaxml2.HelloServer [port]");

      System.exit(-1);

    }

try {

    // Use the Apache Xerces SAX Driver

    XmlRpc.setDriver("org.apache.xerces.parsers.SAXParser");

    // Pornim server-ul

    System.out.println("Pornim XML-RPC Server...");

    // Specificam port-ul

    WebServer server = new WebServer(Integer.parseInt(args[0]));

    } catch (ClassNotFoundException e) {

      System.out.println("N-avem driver SAX");

    } catch (IOException e) {

      System.out.println("Server bushit!!! " +

    e.getMessage( ));

    }

}

}

Acum va trebui să creăm clientul care să apeleze metoda saySaTraiesti() de la distanţă. Folosim clasa helma.xmlrpc.XmlRpcClient. Encodarea cererii se face (surpriză?!?) cu ajutorului driver-ului SAX.

package javaxml2;

import java.io.IOException;

import java.net.MalformedURLException;

import java.util.Vector;

import helma.xmlrpc.XmlRpc;

import helma.xmlrpc.XmlRpcClient;

import helma.xmlrpc.XmlRpcException;

public class HelloClient {

public static void main(String args[]) {

    if (args.length <>

      System.out.println(

      "Mod de folosire: java HelloClient [pseudonim]");

    System.exit(-1);

    }

    try {

      // Folosim driver-ul Appache

      XmlRpc.setDriver("org.apache.xerces.parsers.SAXParser");

      // Specificam clientul

      XmlRpcClient client =

      // creaza cererea

      Vector params = new Vector( );

      params. addElement(args[0]);

      // cererea si printam raspunsul

      String result = (String)client.execute("Hello.saySaTraiesti", params);

      System.out.println("Raspuns de la server : " + result);

      } catch (ClassNotFoundException e) {

      System.out.println("N-avem driver SAX");

      } catch (MalformedURLException e) {

      System.out.println(

      "URL nu e corect: " +

      e.getMessage( ));

      } catch (XmlRpcException e) {

      System.out.println("XML-RPC Exception: " + e.getMessage( ));

      } catch (IOException e) {

      System.out.println("IO Exception: " + e.getMessage( ));

      }

    }

}

marți, 28 octombrie 2008

Why, hello there!

*

Echipa 3.0 vă urează bun venit la bordul unei călătorii cu nave spaţiale, gollumi şi consilii galactice. Însă nu va fi o poveste obişnuită, ci una transpusă în limbaj de API-uri, JavaScript şi DOM, lucruri pe care părinţii se feresc să le spuna copiilor.

Cine sunt povestitorii care vă promit o experienţă memorabilă? Cătălin vă va unge la suflet cu basme despre Java şi prietenii săi, în vreme ce Costin vă va fermeca prin aventura cavalerilor JavaScript ţi AJAX. Iulian va veghea scrutător la bunul mers al caleţtii trasă de şoricei, în timp ce Mădălina vă va şopti povestea ascunsă a perechii de eterni îndrăgostiţi, HTML şi CSS. Smile and wave, boys.

Iar acum să-i dăm drumul. Pentru orice lucru, ne găsiţi şi pe site-ul companiei 3.0, http://interfeteweb.org/. Let's Web 3.0, baby!