Interfete 4 Web - Carcoteala zilnica despre interfete web: 2008-12-21

Interfete web de sarbatori

In zilele noastre firmele au inceput sa-si vanda din ce in ce mai mult produsele online, sau cel putin sa-si vanda imaginea. De aceea in afara de reclame la TV, radio etc trebuie sa aiba si un site care sa atraga "audienta" aflata in target. Cum iarna ne bucuram de reclame cu zapada, mosi craciun, oameni de zapda si cam tot ce e specific acestei perioade eu cred ca si site-urile ar trebui sa fie un pic personalizate in aceasta perioada.

Motivele pentru care site-urile ar trebui un pic "impodobite" de sarbatori ar fi ca asa s-ar adapta spiritului de consum al sezonului (in ce alt sezon esti atat de darnic...), ceva nou nu strica niciodata, reducerile de Craciun sunt binevenite:) si e bine sa arati utilizatorului ca te preocupa starea lui de spirit (deci site-urile pentru musulmani shoudn't have any santas:P)

Mascota Java

Stiati ca limbajul de programare java are o mascota?
Eu nu, pana azi. O cheama Duke si mie imi pare ca este amoeba. :)

Banc cu programatori

Se intalnesc odata un medic, un inginer si un programator si incep sa se certe despre care a fost cea mai veche profesie din lume:
- Dumnezeu a creat femeia din coasta lui Adam, asa ca cea mai veche profesie e medicina, spune medicul.
- Dumnezeu a separat ordinea de haos, asta fiind o treaba pur inginereasca, spune inginerul.
La final, spune programatorul:
- Da' cine credeti ca a creat haosul?

La cate buguri aiuristice am vazut pana acuma, chiar si aici pe blogger, tind sa fiu de acord.

De ce nu ar trebui sa folositi tabele in designul web

Cele 5 motive pentru care nu ar trebui sa folositi layout bazat pe tabele HTML sunt:

  1. paginile se incarca mai greu
  2. redesignurile devin mai laborioase si scumpe
  3. rezultatele de la motoarele de cautare devin mai proaste
  4. accesibilitatea scade
  5. flexibilitatea scade
Alternativa este:
CSS

NU amesteca designul cu continutul
NU creste nejustificat dimensiunea paginilor
USUREAZA updateurile interfetei
PASTREAZA utilizabilitatea

Detalii aici.

Ce addonuri de Firefox folositi?

Lista de add-onuri care imi sunt indispensabile sunt instalate in Firefoxul meu acum, este:

Foxmarks - pentru sincronizarea bookmarkurilor intre mai multe computere si vizualizarea lor pe net
Adblock - ca sa omoare reclamele alea cu mult pr0n :)
Realplayer - ca sa pot downloada videoclipuri
Skype si Yahoo - pentru ca se instaleaza singure :D

Am auzit oameni care sunt dependenti de add-onuri precum MouseGestures....
Voi ce add-onuri folositi si de ce le considerati utile? Cum modifica/ imbunatatesc acestea experienta pe care o ofera siteurile web pe care le vizitati?

Cum cream cel mai simplu o interfata web?

Ma gandeam ca multi studenti, obligati fiind odata cu proiectul de IE sa vorbeasca despre interfete web, se avanta si descriu tehnologii cu care nu au lucrat suficient. Este neplacut, pentru ca din punct de vedere calitativ, descriereile respective nu sunt pe cat de valoroase ar putea fi.

De aceea, eu o sa scriu despre o tehnologie pe care ai vrea sa o transmiti bunicii tale cand ar dori ea sa isi faca site (atat de simpla este): HTML.

Desigur, bunicii tale i-ai recomanda un editor WYSIWYG, dar voi prezenta in acest post o scurta descriere a standardului HTML.

HyperText Markup Language, un subset al SGML, defineste niste noduri care folosesc pentru a modifica aspectul unui text ce este desenat intr-un brower web. Adica, scriem textul normal ce vrem sa para pe pagina si adaugam taguri care ii modifica formatarea. De exemplu un text aflat intre <i> si </i> devine italic.

Asemanator se procedeaza pentru text ingrosat ( < b > = bold ). Pentru inserarea de imagini se foloseste un tag cu atribute. Atributul necesar este locatia imaginii. De exemplu: < img src="exemplu.gif"/> . Tagurile care au inainte de > caracterul / nu necesita prezenta tagului de inchidere.

Mai multe informatii puteti obtine de aici.

I'm back

Dupa o scurta absenta in timpul sarbatorilor, m-am intors cu chef de vorbit despre interfete web.
Asteptati-va la multe posturi ( interesante, sper eu ) din partea mea in curand.

Browser users

Daca browserele care va permit sa vizualizati interfetele web preferate ar putea vorbi despre utilizatorii tipici, ce credeti ca ar spune? Raspunsul, aici:

Remarcati pe Mac dude, Obama, Paris Hilton, FPS Doug (tipul cu replica "Boom! Headshot" - epica), Bill Gates si probabil ca si ceilalti sunt cunoscuti, daor ca nu ii stiu eu.

Expresivitate in interfete web: Uimire

Daca doriti intr-un forum, blog, sau alta interfata web sa exprimati uimirea sau nelamurirea, puteti folosi urmatorul clip:
Mai sugestiv ca limbajul corpului din realitate, cred eu. Interfetele web au devenit mai expresive ca orice alt tip de interactiune.

Ce sunt interfețele în programarea orientată obiect?

Ma gândeam acum câteva zile care ar fi definiția interfetelor în Java de exemplu.

Să luăm urmatoarea posibilă definiție:

clase care au numai funcții abstracte (fără variabile membre)

Mai trebuie adăugat ceva? Cine stie ce îi mai trebuie definiției de mai sus pentru a fi corectă?

Javascript - cum sa citest dintr-un fisier

Download exemplu

In unele interfete web este nevoie sa se poata deschide si incarca fisiere locale. Un exemplu bun este Google Docs unde incarci un fisier local si il stochezi/editezi online.

Pentru Internet Explorer deschiderea unui fisier html si afisarea lui s-ar face cam asa:

- In primul rand cream un buton de browse:

< form name=form1>
< input type=file name="browse" onChange="afisare()" onClick="sterge()">
< /form>

- Spatiul din pagina in care se va face afisarea este un container: < div id ="test">

- Deschiderea si citirea din fisier se va face cu ajutorul ActiveXObject de tipul FileSystemObject si functiei OpenTextFile:

var myFileSysObj = new ActiveXObject("Scripting.FileSystemObject");
var myInputTextStream = myFileSysObj.OpenTextFile(document.form1.browse.value, 1, true);
if(myInputTextStream.AtEndOfStream)
{
alert("file is empty");
sterge();
return;
}
var str = new String(myInputTextStream.ReadAll());
var d = document.getElementById('test');
d.innerHTML=str;
myInputTextStream.Close();

- Numele fisierului l-am extras din campul browse document.form1.browse.value si inainte de a citi tot fisierul myInputTextStream.ReadAll() am verificat daca fisierul nu e gol sau s-a ajuns la capatul stream-ului if(myInputTextStream.AtEndOfStream), caz in care ReadAll ar fi generat eroare.

Fisierul fiind deschis intr-un string, acum fisierul poate fi modificat sau se pot face cautari utilizand proprietatile si functiile obiectelor de tip string ca de exemplu: str.length, str.slice(start_index, stop_index), str.lastIndexOf(string, start_index), str.indexOf(string,start_index), str.substr(start_index,nr_of_char)

Un alt obiect foarte util pentru prelucrarea stringurilor in javascript este RegExp pentru utilizarea expresiilor regulate. Crearea unui obiect RegExp se poate face asa:

var myregexp = /regex/;
sau
re = new RegExp("\\w+");
Un exemplu de utilizare combinata a obiectelor String si RegExp ar fi urmatoarul:
myString.replace(myregexp, "replacement")