Posts from ‘Web Development’
Inspired by others ideas and code and also by the need to insert a Top Link like button on my own website I managed to write a script that not only works on all major browsers but it’s also neat and animated 
The expected outcome
The general idea was to try and add a link on the right side of the page that will appear and stick there after a certain percentage of the page is scrolled down and when clicked will smoothly scroll the page back to the top. Also it’s mandatory that this should work on all major browsers (including IE).
Here is an example how this should look like (example working already on this page, just scroll down to see it)
The button and the placement problems
In order to add the button to the page we just need to add this code to our page just after the <body> tag:
<a href="#header-top"> <div id="back-top" style="display: block;"></div> </a>
The DIV tag will be used to show our top link using a background-image (but you can use a text just as well) and the anchor will be used to link us to the top of the page (in this case by the most outer div tag with the #header-top id) .
UI Honeycombbig
Am observat in ultima vreme o greseala (amestecare, confuzie) pe care o fac multi oameni cand se refera la doua concepte cu asemanari semantice, dar total diferite in ceea ce priveste conceptul si aplicarea.
User Experience vs Usability
Aceste doua “industrii” au inceput sa creasca si sa fie din ce in ce mai cunoscute odata cu dezvoltarea rapida a RIA (Rich Internet Applications). Astfel ca odata cu popularitatea aplicatiilor web acesti doi termeni au atins cote inalte in agenda fiecarui dezvoltator, dar in acelasi timp sunt percepute sau intelese gresit.
Usability se refera la usurinta cu care un utilizator poate duce la bun sfarsit un task folosind orice tool. In general acest termen are la baza analizele factorilor umani si include ideei din multe domenii cum ar fi psihologia umana si statistica. In fundament termenul de Usability este calitativ, dar se bazeaza pe datele cantitative pentru analiza si identificarea slabiciunilor si generarea solutiilor de imbunatatire.
Studiul de usability se face in general prin teste foarte detaliate si amanuntite cu esantioane/grupuri mari de oameni pentru a determina cum interactioneaza utilizatorul cu interfata si zonele specifice unde el se pierde (cateodata se aplica metode care analizeaza miscarile ochilor pentru a determina zonele de interes majore).
“Highly usable interfaces” sunt intotdeauna acelea foarte intuitive, simple si extrem de usor de invatat.
IE6-Wanted
The War against IE 6 has a very log story behind it, but from my point of view is just boring and very unproductive to sit around and talk about it all day. In the same time I agree with the fact that you should develop your web-applications without worrying about compatibility inside a specific browser, so I personally just IGNORE this one and try to convince the user to switch to a more appropriate browser. You can find more about this issue all over the net and also here, here, here and here.
Now Google joins the armada announcing that they will drop support for IE 6, so I remembered some code snippets that will actually crash your browser if the page is opened in IE 6. In no particular order here are the crashers:
<style>*{position:relative}</style><table><input></table>
<script>for(x in document.write){document.write(x);}</script>
<html> <form> <input type crash> </form> </html>
Text Escaping Unescaping
For a project I worked a few months ago I needed to escape special characters used to pass some information from one point to another. Of course I used at that point the great application built by Marc called Unicode2HTML but I needed more than that. I wanted to convert also to other formats like \uXXXX or Punycode so after searching the net for a tool like that I found a very nice library built by Satorux called strutil.js.
The library actually does exactly what I wanted, it converts a character to a bunch of formats that I can use. The service Satorux has build, using this library, can be found at Text Escaping and Unescaping in JavaScript.
I decided to port this online version to an application so we can use it in offline also. This was a good project because it concluded to be my first Adobe AIR project (hope more will come).
I won’t make a tutorial on how to build an AIR app in this article because there is no point you can search the net for this kind of things and you will find dozens of great tutorials. But what I want to share with you is the application itself and the simplicity of the AUTO UPDATER Framework Adobe AIR has…
The text-shadow declaration allows you to create a text shadow; i.e. a slightly moved, slightly blurred copy of a text. Just like drop-shadow from Photoshop styles. Using this css property we can create a glow effect for our texts.
Some examples
This text should have a text-shadow.
This text, too, should have a text-shadow.
Syntax for text-shadow
p.test{
text-shadow: #6374AB 20px -12px 2px;
}
So text-shadow accepts 4 values (3 for position and 1 for color):
For all typography fans
aici.
Iconitele “specialistilor” te jeneaza la ochi foarte mult cand le vezi asa turtite, parca ma uit la Plasma lui Dorel care nu prinde decat semnal 4:3 in Romania si toti au fetele turtite si fundurile latite. Toate acestea se datoreaza unei linii in scriptul CSS care defineste o inaltime fixa pentru zona respectiva.
Astfel o simpla imagine poate fi distorsionta si poate strica aspectul site-ului. Este adevarat ca nu multi observa aceste detalii, dar de ce nu se pot rezolva aceste bug-uri mici? Din experienta mica pe care o mai am tot ce pot sa va spun este ca in general la genul acesta de site-uri cu “roti mari” este ceva normal sa fie asa. De ce spun asta, pentru ca la un astfel de site sunt probabil cateva zeci de oameni care lucreaza. Mai mult ca sigur acestia sunt impartiti in 3 categorii: cei care deseneaza site-ul, cei care incearca sa il programeze cum l-au desenat altii si acele persoane care insereaza continutul site-ului (fie el text, imagine sau video). Ei bine aceste 3 categorii de oameni rareori se inteleg intre ei si cum rotile sunt mari se invart mai greu rezultand astfel genul acesta de neconcordante daca pot sa le zic asa la nivel visual asupra site-ului.
Ca sa vedem cata ignoranta si cata “desteptaciune” exista pe lumea asta. Nu ma consider nici macar un Web-Rookie dar un Webmaster, dar cand vad ce perle scot unii nu pot sa nu comentez
Chris a scris pe css-tricks.com un articol interesant despre What Beautiful HTML Code Looks Like si pentru ca a facut foarte multa valva a prins prima pagina pe Digg. Din momentul ala the angry webmobsters s-au dezlantuit, va citez doar cateva comentarii amuzante ca sa va faceti o idee despre … :
The author of the article probably jerks off to O’REILLY books.
Este cel mai bun comentariu dintre toate am ras cu lacrimi
beautiful-code.html
<?php include(“this/wont/workhere.php”); ?>PHP in an html file?
The Webmobster crede ca este foo(“Buna Printesa mea”) si a uitat ca PHP intoarce si cod HTML 
Let’s see some realistic HTML now. Who cares what beautiful HTML looks like, it’s not going to be seen that way on the browser end once you insert a ton of PHP/Perl and Javascript mess that ruins the nice little line breaks and indentation.
The irony of this article is that it’s one giant PNG image. Further proof that the most beautiful HTML is the nonexistent kind.
noisestats.radumicu.info este lucrarea de licenta pe care am sustinut-o (acum ceva timp) in cadrul facultatii de Matematica Informatica Brasov. Este o mini chiar nano clona de last.fm (Audioscrobbler), un serviciu web care iti permite generarea de statistici pe baza preferintelor tale auditive.
Datale sunt colectate prin descarcarea unui plugin care il folosesti impreuna cu player-ul tau preferat (pentru lucrare am folost doar Songbird). In spatele scenei plugin-ul trimite informatiile referitoare la melodiile ascultate catre server, acesta le proceseaza si genereaza statistica.
Ce am facut eu este partea de server care salveaza “statistica” venita de la player si genereaza cateva rapoarte pe baza acestora. Totodata am folosit si alte servicii web pentru a afisa si o poza cu albumul sau formatia/artistul preferat. Pentru ca nu am o baza de date cu toti artistii din lume am apelat la musicbrainz.org pentru a valida datele venite de la client. Exemplu statistica pe un user: Stats for TEST
Hehe I got 1$ from http://css-tricks.com/beta-new-snippets-area/ for submitting a tip on how to Absolute Center (Vertical & Horizontal) an Image.
The tip is the one I have told you about in a older post of mine: Center image really quick and easy using CSS.
Anyway great idea from Chris with this one, but I think he should organize and move the page somewhere else.
Subscribe
