What am I?

  • art director
  • usability specialist
  • interaction designer
  • front-end developer
  • techical writer
  • content specialist
  • project manager
  • analyst
  • user interface designer
  • information arhitect
  • graphic designer
  • software developer
  • instructional designer
  • content developer
  • teacher
  • programmer
poate putin din toate...


vezi si:

"Will the Real Information Architect Please Stand Up?"

http://www.slideshare.net/gleija/will-the-real-information-architect-please-stand-up-presentation?type=powerpoint

Interesante css/js

  • sa schimbi z-indexul elementelor la hover [pe parinte/unul din parinti]
  • validarea campurilor unui forumular prin patternuri scrise ca atribut html patern ="..."
  • sa te folosesti de propagarea evenimentelor

Reteta culinara video - cartofi prajiti (frantuzesti) ca la carte



http://rouxbe.com/ - The recipe to Better Cooking

Wii Remote Hacks - hackuri cu telecomanda wii (wiimote)

"Since the Wiimote can track sources of infrared (IR) light, you can track pens that have an IR led in the tip. By pointing a wiimote at a projection screen or LCD display, you can create very low-cost interactive whiteboards or tablet displays. Since the Wiimote can track upto 4 points, up to 4 pens can be used."
Johnny Chung Lee


Photosynth si VideoEnhancement


1. Photosynth



http://www.ted.com/index.php/talks/blaise_aguera_y_arcas_demos_photosynth.html
http://photosynth.net

Colosseumul cu photosynth:



si in interior:




2.Videoenhancement


Using Photographs to Enhance Videos of a Static Scene from pro on Vimeo.

http://grail.cs.washington.edu/projects/videoenhancement/videoEnhancement.htm

TED e cel mai tare!



One of my favorites!

Modele de interfete - ui patterns

1.Abonare twitter feed:
http://www.builtbybuffalo.com/


Interesant : poti alege RSS sau mai nou, Twitter

2. Casete compacte, afisare tabulara:

  • Meniu si caseta de login 2in1




http://www.adfed.org

Totodata, un exemplu de taburi bine create.

  • 4 casete in 1 - taburi si frunze



http://www.komodomedia.com/

Home page - principii de uzabilitate

Don't Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition
http://www.sensible.com/

Elemente pe care pagina principala trebuie sa le contina si intrebari la care trebuie sa raspunda:

  1. Identitatea siteului si scopul acestuia - Ce site este acesta? Care este scopul siteului? De ce sa aleg acest site si nu altul?
  2. Ierarhia siteului - Ce pot gasi in acest site? Ce pot face aici? Cum este organizat? - navigatia siteului
  3. Caseta de cautare (search box)
  4. Teasere - Sectiuni/produse/articole/functionalitati promovate
  5. Continut de actualitate, ce se updateaza frecvent
  6. Publicitate, cross-promotion, co-branding
  7. Scurtaturi - cele mai accesate pagini din site
  8. Inregistrare/logare pe site
  9. Cum pot ajunge la pagina x?
  10. Ce alceva pot gasi in acest site?
  11. De unde sa incep?
  12. Este acest site de incredere?

Elemente cheie:
  1. Tagline - text explicativ (dar nu motto-ul siteului) pozitional in imediata vecinatate a logo-ului






  2. Fraza de intampinare - O prezentare scurta a siteului, afisata intr-un bloc proeminent vizibil fara a scrolla
  3. Navigatie extinsa - o variatie navigatiei globale

Noul meu wallpaper


The awakening III-Rebirth by `CygX1 on deviantART

Counter CSS2.1 - Numara elemente cu ajutorul proprietatilor de stil

Urmatorul cod CSS va numara randurile unui tabel:

table{
counter-reset:item
}

td:first-child:before{
background:#00FF00;
content: counter(item) ". ";
}

tbody tr{
counter-increment: item;
}


Rezultatul:

Name Empty Description
A
anchor
ABBR
abbreviated form (e.g., WWW, HTTP, etc.)
ACRONYM

ADDRESS
information on author
AREA E client-side image map area
B
bold text style
BASE E document base URI
BDO
I18N BiDi over-ride
BIG
large text style
BLOCKQUOTE
long quotation
BODY
document body
BR E forced line break
BUTTON
push button
CAPTION
table caption
CITE
citation
CODE
computer code fragment
COL E table column
COLGROUP
table column group
DD
definition description
DEL
deleted text
DFN
instance definition
DIV
generic language/style container
DL
definition list
DT
definition term
EM
emphasis
FIELDSET
form control group
FORM
interactive form
H1
heading
H2
heading
H3
heading
H4
heading
H5
heading
H6
heading
HEAD
document head
HR E horizontal rule
HTML
document root element
I
italic text style
IMG E Embedded image
INPUT E form control
INS
inserted text
KBD
text to be entered by the user
LABEL
form field label text
LEGEND
fieldset legend
LI
list item
LINK E a media-independent link
MAP
client-side image map
META E generic metainformation
NOSCRIPT
alternate content container for non script-based rendering
OBJECT
generic embedded object
OL
ordered list
OPTGROUP
option group
OPTION
selectable choice
P
paragraph
PARAM E named property value
PRE
preformatted text
Q
short inline quotation
SAMP
sample program output, scripts, etc.
SCRIPT
script statements
SELECT
option selector
SMALL
small text style
SPAN
generic language/style container
STRONG
strong emphasis
STYLE
style info
SUB
subscript
SUP
superscript
TABLE

TBODY
table body
TD
table data cell
TEXTAREA
multi-line text field
TFOOT
table footer
TH
table header cell
THEAD
table header
TITLE
document title
TR
table row
TT
teletype or monospaced text style
UL
unordered list
VAR
instance of a variable or program argument


Scopul:
Tabelul de mai sus reprezinta lista completa a tagurilor HTML. Au fost excluse elementele depreciate sau cu dtd loose. Necunoscuta este 77 [taguri HTML].

Unitati de masura in html / css

Unitati absolute:
  • in: inches — 1 inch = 2.54 centimetri
  • cm: centimetri
  • mm: milimetri
  • pt: points — 1pt= 1/72 inch
  • pc: picas — 1 pica = 12 points

Unitati relative
  • em: dimensiunea unei litere a fontului curent
  • ex: inaltimea literei 'x' a fontului curent
  • px: pixeli, relativi la rezolutia device-ului folosit


W3.org recomanda folosirea em-urilor, iar altii recomanda folosirea ex-urilor pentru mai multa precizie.


Wikipedia - liste cu typeface-uri:

Culorile in HTML si XHTML - denumiri si valori hexazecimale

Denumire
Valoare hexazecimala
Exemplificare
Black #000000
Silver #C0C0C0
Gray #808080
White #FFFFFF
Maroon #800000
Red #FF0000
Purple #800080
Fuchsia #FF00FF
Green #008000
Lime #00FF00
Olive #808000
Yellow #FFFF00
Navy #000080
Blue #0000FF
Teal #008080
Aqua #00FFFF

Gapminder - Fertilitatea, venitul pe cap locuitor, numar de telefoane si populatia urbana in Romania




Fertilitatea in Romania
->Scaderea fertilitatii in Romania de la 2.9 copii (in 1965) la 1.3 copii(in 2008) pt fiecare femeie



Venitul pe cap de locuitor
->Evolutia Venitului pe cap de locuitor - de observat sunt limitele atinse in 1913 inaintea Primului Război Mondial, in 1948 dupa Cel de-al doilea Război Mondial si intorsatura datorata Revolutiei de la 1989



Numar de telefoane mobile la 100 de locuitori
->din 1996 numarul de telefoane mobile la suta de locuitori al Romaniei este intr-o continua crestere (atingand in in 2005 acelasi nivel cu cel al Turciei = 60 de telefoane /100 loc)



Procentul populatiei urbane din numarul total de locuitori
->Dupa o crestere liniara, din 1990 procentul populatiei urbane din Romania a stagnat la 54%.




Grupuri de venit pe cap locuitor - world
->Romania se situeaza in grupul tarilor cu venit pe cap de locuitor sub medie


Grafic facute cu ajutorul aplicatiei gapminder - http://graphs.gapminder.org , produs Google.


Css3 browser support - octombrie 2008

Iata rezultatele testului pentru selectori css3:
  • Firefox 3.0.3 From the 43 selectors 36 have passed, 0 are buggy and 7 are unsupported (Passed 373 out of 578 tests)
  • Safari 3.1.2/525.21 From the 43 selectors 43 have passed, 0 are buggy and 0 are unsupported (Passed 578 out of 578 tests)
  • Chrome 0.2.149.30 - Safari/525.13 From the 43 selectors 43 have passed, 0 are buggy and 0 are unsupported (Passed 578 out of 578 tests)
  • IE 6.0.2900.5512 From the 43 selectors 10 have passed, 1 are buggy and 32 are unsupported (Passed 276 out of 578 tests)
  • IE7 From the 43 selectors 13 have passed, 4 are buggy and 26 are unsupported (Passed 330 out of 578 tests)
  • Opera 9.52 From the 43 selectors 43 have passed, 0 are buggy and 0 are unsupported (Passed 578 out of 578 tests)
  • IE8 beta2 From the 43 selectors 22 have passed, 1 are buggy and 20 are unsupported (Passed 349 out of 578 tests)




Prin urmare selectorii css3 pot fi folositi fara probleme in Opera, Safari si Chrome. (suport 100%).

Iata si definitiile acestora la http://www.w3.org/TR/css3-selectors/#selectors

Se zvoneste ca ie6 se va retrage

Mai devreme sau mau tarziu ie6 se va retrage din competitie.



Iata ce propun altii:
http://iedeathmarch.org/

Acum sa ne uitam si pe statistici:



Sursa www.w3schools.com/browsers/browsers_stats.asp

Scaderea procentului de la 55.7% la 0.1% al ie5-ului din 2002 in 2008 (5ani si jumate) ne duce la concluzia ca si ie6 va avea aceeasi evolutie sau poate una ceva mai rapida, ca urmare a numarului mare de noi browsere; cum procentul de 55.6% a fost atins de ie6 in septembrie 2006, ne putem astepta la o scadere a procentului de utilizare sub 1% in anul 2011 (si sub 3% in 2010).

Daca vreti sa vedeti si cateva statistici de la noi din tara, www.trafic.ro va ofera procentaje asemanatoare:



statistici furnizate de trafic.ro pentru siteul romanesc gsp.ro (Gazeta Sporturilor)

Lectia 1 HTML - formulare - tagurile <fieldset>, <legend>, <label>

Iata modalitatea de scriere corecta a unui formular:

.........................................................................................................................................

<form action="inregistrare.php" method="post">
<fieldset>
<legend>Formular inscriere</legend>

<label for="numeu">Nume</label>
<input type="text" value="Popescu" name="nume" id="numeu" />

<label for="pren">Prenume</label>
<input type="text" value="Mihai" name="prenume" id="pren" />

<span>Sex</span>
<label for="sex_m"><input type="radio" name="sex" value="m" id="sex_m" /> masculin</label>
<label for="sex_f"><input type="radio" name="sex" value="f" id="sex_f" checked="checked" /> feminin</label>

<label>Data nasterii</label>
<select>
<option>1</option>
<option>2</option>
<option selected="selected">3</option>
<option>4</option>
</select>
<select>
<option selected="selected">Alege data</option>
<optgroup label="Lung">
<option>Ianuarie</option>
<option>Februarie</option>
<option>Martie</option>
</optgroup>
<optgroup label="Scurt">
<option>Ianuarie</option>
<option>Februarie</option>
<option>Martie</option>
</optgroup>

</select>

<label for="poza">Poza</label>
<input type="file" name="poza" id="poza" />

<label for="mesaj">Mesaj:</label>
<textarea name="mesaj" id="mesaj" cols="30" rows="10">Completeaza cu mesajul tau...</textarea>

<label for="nl"><input type="checkbox" value="nl" name="nl" id="nl" /> Doresc sa ma abonez la NL dvs.</label>
<label for="acord"><input type="checkbox" value="ac" name="acord" id="acord" /> Sunt de acord cu <a href="#">termenii si conditiile</a></label>


<input type="submit" value="Trimite!" />
</fieldset>

</form>


.........................................................................................................................................


Taguri des omise in formulare, insa foarte importante sunt:

<fieldset> = element ce permite gruparea elementelor (campuri, butoane, etichete) aflate in legatura

<legend> = titlul fieldsetului

<label> = eticheta corespunzatoare campului urmator; atributul for permite asocierea etichetei cu elementul corespunzator. Observati cele 2 modalitati de scriere: separat - in cazul unui camp de tip text si inclus in cazul inputurilor de tip checkbox sau radio.

Folosirea acestor taguri imbunatateste gradul de accesibilitate al (x)html-ului.


Obs. Nu uitati in cazul xhtml-ului sa folositi numai atribute insotite de valoare: disabled="disabled".

Linkuri utile - Siteuri interesante

Pentru a micsora numarul de postari si de etichete, am centralizat aici cateva postari cu rol de bookmark.
Unele dintre siteurile de mai jos se mentin in pozitie de top:

Portabilitatea informatiilor

DataPortability - Connect, Control, Share, Remix from Smashcut Media on Vimeo.

DataPortability gathers existing open standards into a blueprint for a social, open, remixable web where your online identity, media, contacts and content can follow you wherever you go.

http://www.dataportability.org/

Oficiale si neoficiale - google



Lista va continua...

PS. ce parere aveti despre noul mod de introducere a comentariilor (formularul inline ce inlocuieste popupul sau pagina adresata comentariilor) ?
detalii

Tendinte noi in grafica websiteurilor (2008)

  • Stilurile Vintage / Retro



  • Notite scrise de mana si agrafe
  • Stil dezordonat



  • Stropi de cerneala 



  • Tempera
  • Tehnica colajului
  • Scrisul de mana si schite



  • Litere mari



  • Fonturi Script
  • Texturi de lemn 



  • Delimitari in Zig Zag

Iata si exemple: http://bestwebgallery.com

Editare de imagini online


Bran, originally uploaded by minea_eliza.

Aceasta poza este editata cu Picnik ( www.picnik.com ) din interiorul siteului Filckr ( www.flickr.com ) si este postata pe blogul meu direct, de pe Flickr. Incercati si voi!

lista mea opml incompleta

Iata una din listele mele de feeduri: