I can see what you see not » Web Development

Animated Top Link that works on every browser

Radu — Sat, 20 Feb 2010 19:55:49 +0000

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 tag:

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) .

Now the CSS code to style our Top button should look like this:

#back-top{
 background:transparent url(arrow-up.gif) no-repeat scroll 0 0px;
 display:none;
 text-decoration:none;
 position:fixed;
border:none;
}

So we’ve set a background image that will be seen by the user, in order to get the desired effect and the position of our DIV is FIXED so that will stick in the bottom right corner when scrolling the page. DISPLAY = NONE to hide it until we scroll down inside the page and afterwards show it to the user.

All good now we can say, but after some testing in Internet Explorer we will see that in some versions POSITION:FIXED is not working at all (ex: IE6) or buggy on other versions (ex: IE7). In order to fix this we will have to insert some hacks in our CSS code (I won’t get more into this matter because it will be a really long article but you can search all about it). What we need to do is to add overflow:hidden to the code and this will be the easiest way to solve position problems that we may encounter, now the CSS code should look like this:

#back-top{
 background:transparent url(arrow-up.gif) no-repeat scroll 0 0px;
 display:none;
 text-decoration:none;
 position:fixed;
 bottom:10px;
 right:10px;
 overflow:hidden;
 border:none;
 text-indent:-999px;
 height:32px;
 width:42px;
}

Now that our button is inserted to the page and styled to appear on the right side we can go further with some mouse over css code and the java-script that will animate the button.

The mouse over css code could be like the one bellow. I just practically used a sprite image to show the default and hover effect of our button.

#back-top:hover{
 background-position:0 -32px;
 display:block;
 overflow:hidden;
}

Code used for the Top Link show / hide effect

The main idea is to bind the scroll event of the page and when a certain percent is scrolled down we just show the button to the user. If the user scrolls back to the top we need to hide the button once again. I used jQuery to do this and turned out in the process to be a plugin so we can use it wherever we want.

The plugin function will take 3 parameters:

tag object of the button – the DIV used to show or hide the top link button (passed as the selector)
min – Amount of pixels from the top needed to show the button
fadeSpeed – The speed of the fade in / fade out effect set in milliseconds

We first declare the settings and the default values for each of them:

jQuery.fn.topLink = function(settings) {
 settings = jQuery.extend({
 min: 1,
 fadeSpeed: 200,
 ieOffset: 50 //used to properly calculate the height in IE
 }, settings);

Then we listen for the scroll event and we check the height from the top until it gets bigger then our min value, in witch point we show our button using the fade in effect. If the height from the top is smaller then our min value we will hide our button in the same manner.

 return this.each(function() {
 //Listen for scroll
 var el = $(this);
 el.css('display','none'); //in case the user forgot
 $(window).scroll(function() {
 if(!jQuery.support.hrefNormalized) {
 el.css({
 'position': 'absolute',
 'top': $(window).scrollTop() + $(window).height() - settings.ieOffset
 });
 }
 if($(window).scrollTop() >= settings.min)
 { el.fadeIn(settings.fadeSpeed); }
 else
 { el.fadeOut(settings.fadeSpeed); }
 });
 });
};

The jQuery.support.hrefNormalized means that using the jQuery features we are trying to detect browser features. The support object contains boolean flags and was added just for this purpose to write code using browser feature detection. Because IE has a different mode to handle the href attribute (it returns the full URL instead of the exact href attribute) I used .hrefNormalized to see if the code is executing in IE or not and if it does using css we are setting the top property every time the users scrolls the page, assuring us in this way that the position of our button remains constant without flickering or any other bugs we may encounter with different browsers.

Final code used to show / hide our button

The full code of our jQuery plugin should look like this:

jQuery.fn.topLink = function(settings) {
 settings = jQuery.extend({
 min: 1,
 fadeSpeed: 200,
 ieOffset: 50
 }, settings);
 return this.each(function() {
 //Listen for scroll
 var el = $(this);
 el.css('display','none'); //in case the user forgot
 $(window).scroll(function() {
 if(!jQuery.support.hrefNormalized) {
 el.css({
 'position': 'absolute',
 'top': $(window).scrollTop() + $(window).height() - settings.ieOffset
 });
 }
 if($(window).scrollTop() >= settings.min)
 { el.fadeIn(settings.fadeSpeed); }
 else
 { el.fadeOut(settings.fadeSpeed); }
 });
 });
};

Now in order to use the plugin using a separate js file (or in what way you may like) we add the code to our page and then we just call it when the dom is ready or at the end of the page right before the tag:

// Go to Top Link
$('#back-top').topLink({
 min: 800,
 fadeSpeed: 500
});

According to our settings above the go to top button will appear after at least 800 pixels will be scrolled down from the page and the effect will be completed in half of a second. After the page scrolls back to top the code is executed again and the button will hide again because our min value is not reached.

Smooth scrolling all anchor links inside your page

For the smooth scroll effect I used another plugin made by Karl Swedberg that you can get from Github here. In order to use it just load the js file to your page and add the following code.

// All anchor tags will be bind to smooth scroll in page
$('a').smoothScroll();

Now all anchor tags inside your page will be smoothly scrolled when clicked. For example the Go to Comments link inside your blog, or any other anchor that points somewhere inside your current page will have this nice effect.

Final considerations

I’ve checked the code in FF 2.0 +, IE 7+, Opera 10, Safari 4 and Chrome 5 and works well on all of them. If anyone finds a version that breaks or is buggy just let me know and perhaps we could fix it. This article is not meant to be a tutorial for all users and some or more programming skills are required in order to integrate the code in your HTML pages but you don’t have to alter anything to it it works as it is. Hope you will find it useful and give feedback if you have some.

Diferenta dintre User Experience si Usability

Radu — Sun, 07 Feb 2010 19:53:16 +0000

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.

User Experience in contrast cu Usability se refera la modul in care utilizatorul percepe interactiunea lui cu sistemul. Design-ul experientei inglobeaza in acelasi timp Design-ul Interactiunii cat si Design-ul Vizual si cauta sa promoveze o interfata care este placuta pentru utilizator.

Studiul de user experience se focuseaza in general pe impactul psihologic in interactiunea cu sistemul, astfel ca expertii in user experience isi petrec marea majoritatea a timpului facand cercetari etnografice si psiho-grafice pentru a putea construii interfata. User Experience este mai mult calitativa decat Usability, desi nu sunt in mod necesar exclusive intre ele.

Pentru o mai buna exemplificare putem sa luam exemplu site-ul Youtube. Vom incerca sa analizam putin player-ul pe care ei il folosesc in randarea streamurilor.

Nu de mult timp au lansat un update la UI-ul playerului cu pricina, au adaugat cateva optiuni – cea de a selecta calitatea streamului video intre controlul de volum de sunet si cel de extras.

Asa cum putem sa vedem in imaginea alaturata din punct de vedere al Usability pe o scala de la 1 la 5 putem sa ii dam player-ului nota 4, pentru ca avem toate cerintele necesare unui player: informatia legata de cat timp a parcurs streamul si cat are in total, butonul de volum, meniul de unde putem selecat calitatea streamului, butonul de expand in cazul in care vrem sa il facem mai lat si butonul de full screen in cazul in care vrem sa ne bucuram de imaginea full. Practic toate taskurile care vrem sa le facem cu un player sunt la indemana si nu parcurgem 100 de pasi pentru a putea ajusta un volum sau a selecta calitatea unui stream. Astfel ca avem USABILITY foarte bun.

Daca privim acum din perspectiva User Experience a playerului nostru interactiunea utiliztorului este “placuta” daca pot spune asa, iconitele folosite sunt sugestive (la volum am o iconita de difuzor nu un difuzor stilizat din care sa nu inteleg nimic), culorile sunt alese pe masura, dar…

Problema apare cand vrei sa schimbi volumul sunetului. Iconita este suficient de mare cat sa dai peste ea cu mouseu, dar este asezata langa una mult mai mare si foarte usor poti face hover peste cele doua, iar rezultatul cum se vede si in imagine este ca volumul este acoperit de cel de calitate a streamului si nu mai poti sa il folosesti. Astfel ca incepe sa devina frustrant pentru utilizator din cand in cand si atunci scorul nostru pentru User Experience scade la acest capitol.

Este foarte adevarat ca am cam tras de par acest exemplu (mai ales ca au si corectat acest bug in timp ce scriu eu articolul), dar importat este sa intelegm diferenta intre cei doi termeni de Usability si User Experience.

Pentru cei dornici de mai multa informatie am decat doua sugestii: una din ele este Internetul, doar un simplu search pe Google dupa Usability sau User Experience si o sa gasiti resurse mai multe decat va puteti imagina.

Al doilea este siteul celui mai cunoscut si influent om din domeniu Jakob Nielsen – useit.com pe care il recomand cu mare caldura celor care vor sa aprofundeze in domeniu.

How to crash IE6 with some “kill” snippets

Radu — Sun, 07 Feb 2010 11:17:04 +0000

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:

function getX( oElement ) {
 var iReturnValue = 0;
 while( oElement != null ) {
 iReturnValue += oElement.offsetLeft;
 oElement = oElement.offsetParent;
 }
 return iReturnValue;
}



 



 CRASH-IE

Have fun pranking your friends with this one.

Text Escaping Unescaping with AIR

Radu — Sun, 17 Jan 2010 11:56:41 +0000

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…

So here is the app I have made; click to install. For any kind of feedback just leave me a comment here or send me an email using the Contact page.

After reading the detailed information about how to update an AIR application I realized that this was easy as saying Scotty UPDATE ME

If need to check for a new update to my application all I need to do is to add this code in my page (HTML/Ajax version).

// instantiate an updater object
var appUpdater = new runtime.air.update.ApplicationUpdaterUI();
function checkUpdate()
{
	// we set the URL for the update.xml file
	appUpdater.updateURL = "http://localhost/update.xml";
	//we set the event handlers for INITIALIZED nad ERROR
	appUpdater.addEventListener(runtime.air.update.events.UpdateEvent.INITIALIZED, onUpdate);
	appUpdater.addEventListener(runtime.flash.events.ErrorEvent.ERROR, onError);
	//we can hide the dialog asking for permission for checking for a new update;
	//if you want to see it just leave the default value (or set true).
	appUpdater.isCheckForUpdateVisible = false;
	//if isFileUpdateVisible is set to true, File Update, File No Update,
	//and File Error dialog boxes will be displayed
	appUpdater.isFileUpdateVisible = false;
	//if isInstallUpdateVisible is set to true, the dialog box for installing the update is visible
	appUpdater.isInstallUpdateVisible = false;
	//we initialize the updater
	appUpdater.initialize();
}
function onUpdate(event)
{
	//starts the update process
	appUpdater.checkNow();
}
function onError(event)
{
    alert(event);
}

And on the tag we just call the function:

Behind the scenes the flow is quite easy the checkUpdate() function reads the update.xml file and compares the information from there with the current application version (located in application.xml), if a new version is available will prompt the updater Ui asking for permission to install the new version.

The update.xml file looks like this:



	0.2
	http://localhost/app.air

You can use this code to make an auto-updater for your Air applications every time, so great job Adobe for this nice feature.

Using text-shadow to create a glow effect

Radu — Sat, 16 Jan 2010 11:12:14 +0000

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):

The color of the text-shadow (#6374AB)
The X-coordinate of the text-shadow (20px), relative to the text
The Y-coordinate of the text-shadow (-12px), relative to the text
The blur radius of the text-shadow (2px), which means the amount of space the shadowtext is ‘stretched’, causing a blur effect. 0 means: no blur. Don’t set this value too high, the shadowtext quickly becomes illegible.

Browser compatibility

At this point text-shadow only works within:

Firefox 3 and above
Opera 9.5 and above
Safari 1.3 and above (partial)
Chrome all versions

How to create the glow effect

Knowing all this now we can create a glow effect for our texts to give the some nice eye-catching experience for the user. The best example here is to use this effect on anchor links on hover (A:hover).

SAMPLE TEXT H1 SAMPLE TEXT H1

Sample TEXT H2 Sample TEXT H2

Sample Text H3 Sample Text H3

sample text sample text

Looking at the example above we can see the effect of the text-shadow glow effect on the left side and on the right is the normal setting. This can be pretty neat to use on anchor links. So in order to get this effect we can declare in our CSS code the following properties:

A{
    color: #FFCC66;
    font-weight: bold;
    text-decoration: none;
}

A:hover{
    text-decoration: underline;
    color: #FFF;
    text-shadow: #EEE 0 0 10px;
}

So for all anchors we have a default color and no decoration styles. Now using the a:hover property we can add our glow effect using a lighter color and just the blur radius set to 10 pixels, so the shadow will be “centered” and blurred out from our text creating the glow effect.

Conclusion and resources

Quite simple and easy right? This could be a nice effect in your design process. It’s one of those things the are completing your “wow” effect when designing a new website. Very easy to use with just a few lines of code text-shadow can make the difference for your anchor styles. For more information about text-shadow you can find here:

quirksmode.org/css/textshadow

css3.info/preview/text-shadow

reference.sitepoint.com/css/text-shadow

Comic Sans – The Ugly History

Radu — Wed, 30 Dec 2009 17:09:35 +0000

For all typography fans

Click here to view the embedded video.

realitatea.net Specialisti – WebDesign or User Fail?

Radu — Sun, 13 Dec 2009 20:30:00 +0000

Web Design Fail? sau User usage Fail? Nu stiu care din ele sincer sa fiu, dar problema asta in general este pasata de la web-developer la user. Un exemplu foarte simplu este si pe site-ul celor de la Realitatea la pagina de Specialisti 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.

Practic daca developer-ul ar sterge linia cu pricina din CSS totul ar fi rezolvat:

.importantNewsBox .pictureMargin {
height:56px;// DEL THIS LINE
margin-bottom:6px;
width:100px;
}

Dar daca user-ul ar insera iconitele in formatul agreat (sa presupunem ca s-au inteles asupra acestui fapt) am rezolva problema mai repede!

Mai repede? Aici este problema este mai usor sa faci din programare site-ul astfel incat totul sa fie acoperite si genul acesta de situatii chiar daca un user nu stie sa foloseasca sistemul sau il foloseste gresit? Sau este mai usor, cost-effective sau cum mai vreti sa faci un user sa foloseasca sistemul corect?

In general schimbarea mentalitatilor este mult mai dificila ca programarea unui sistem care sa faca respectiva treaba, dar in acelasi timp sa acoperi toate aceste scapari ale user-ului din programare poate fi mult mai costisitoare si pot impinge un proiect peste deadline. Astfel ca in general la marile companii si la site-urile mari se trage o linie unde deasupra se pun acele Must Have si sub linie acele aspecte de care se pot lipsii.

Eu personal sunt impotriva acestor practici si prefer acea calea de echilibru (nu de mijloc) in care faci din programare totul sa fie cat mai usor de folosit pentru user, iar user-ul face tot posibilul sa inteleaga sistemul inainte sa il foloseasca. Este foarte greu sa ajungi aici recunosc, dar aceste aspect cred ca face diferenta intre un site/o echipa buna si una foarte buna.

I see dumb Webmasters

Radu — Tue, 10 Nov 2009 19:32:51 +0000

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 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.

Acest Webmobster crede ca doar ce se vede in browser source conteaza in rest poate sa fie haos Cat despre PNG, intrebarea de fapt era: Ar fi trebuit sa foloseasca JPG?

No title attributes in the anchor tags. Since when does that make for beautiful HTML?

Inebunesc cand ii aud pe acesti SEO MASTERS cu treaba asta, tocmai de aceea post-ul nu se numeste Beautiful SEO Stuff

… Stop accommodating specific browsers. If the web page loads properly then good but if it doesnt and looks broken then that tells he consumer to upgrade their fucking browser! It should be that simple.

Este atat de simplu cum unii Web masters reusesc in “cariera” lor si este atat de simplu cum cei ca Webmobsteru acesta o sa de-a cu batu in balta de fiecare data. Oridinea din punctul meu de vedere este Vizitator – Client – Nevasta si abia apoi TU webmasterule.

… there seems to be a problem with the first I.E CSS statement and also making the css statements just for I.E is a bit short sighted considering firefox has the largest market share these days.

Also i prefer class to id, works the same and you can use it more than once on the same page if you want to

Da, Firefox are cea mai mare cota de piata oare unde am fost pana acum??? Si da un motiv bun pentru a folosii class in loc de id este faptul ca functioneaza la fel.

Deci este perfect incep sa ma simt mai bine sincer cand vad cate o treaba de genul asta. Oricum DIGG pe viitor o sa fie doar un pic/vid share webservice la fel cum a decazut si Reddit pe partea asta.

Si nu uitati all you webmobsters out there I Can See What You Can Not …

NoiseStats – Preferintele tale auditive

Radu — Thu, 24 Sep 2009 18:56:49 +0000

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

Nu vreau sa intru foarte mult in detalii (ar fi foarte mult de povestit ce este programat la nivel de aplicatie web) dar ce vreau sa va arat este prezentarea pe care am facut-o Am folosit Prezi in acest scop si acum am posibilitatea sa o pun pe blog. Astfel ca mai jos este minunata prezentare… Have fun

I got a buck form css-tricks.com :)

Radu — Sun, 13 Sep 2009 16:13:18 +0000

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.