Valentin

eCommerce UI Part 3: Navigation

Over the past couple of weeks we have looked at a small handful of 2009s top 100 e-commerce sites. We looked at product detail pages and examined the good and the bad, we looked at footers and how best to organize some of its content and now we will look at navigation.

The size of the product catalog of your online store will decide how to lay out your site’s nav. Generally speaking, there isn’t much difference from one site to another. Looking at a handful of the sites from the top 100 list has shown that most sites with similar competitors will use the same style of navigation. Furthermore, we discover a good percentage of the top sites use a horizontal nav bar with drop down menus broken down by store front and then broken down further into various departments, brands, and so on.

This is neither a comparison nor a showcase, but rather a case study, or the philosophy behind how e-tailers use user interface design to (hopefully) get you where you need to go in as few clicks as possible.

1. The Home Page

Navigation starts at ground zero, the home page. Sites like QVC, Overstock or Amazon start their top nav differently than specialized retailers like BestBuy. Where the aforementioned sites may have an Electronics section, BestBuy’s subject is electronics so they break their top nav into “Departments” from the beginning. Sites like QVC and Amazon will take one step back and start their navigation presenting you with “Store Fronts”.

This is a basic hierarchy that tries to emulate how brick and mortar stores are physically presented. Next time your in a store like Target or Wal-Mart, look at how the store is layed out and then compare it to their online presence. See how they are similar and also how they differ.

Trends

• Horizontal navigation across the top of the page with drop down menus letting the user “jump ahead” to specific areas of the site related to that specific category. Moving from the home page directly to a specific brand is a big time saver. Less clicks equals happier customer. This is the primary means of navigation and because of this, it is persistent across the entire site. Nothing surprising here, sites have employed this type of navigation for a long time and this isn’t limited to e-commerce sites. Nevertheless, for the purposes of this study it is still a noticeable “trend”
• Large promotional advertisements, usually using “lifestyle” imagery. Often times there are multiple promotions that cycle through, one after the other. We also notice that some of these promotions aren’t static, but allow the customer to interact with them without clicking through to it. Using this type of progressive disclosure gives the user more information and helps them decide whether this is the correct path to take. It Cleans up the design by not forcing context without it being asked for.

2. The Storefront

Like we mentioned before, this is how sites like BestBuy will start their navigation. You’ll find departments like TVs, Cameras, and Computers presented to you up front, where a site like QVC will store all these under an Electronics storefront. The reason for this is real estate. Amazon.com may have more laptops than BestBuy, but because they sell so many other products, to make the UI more usable they break it down one step further.

The Storefront will also be one of your higher traffic areas and where you’ll find more targeted promotion. Next to the Home Page, Storefronts are where retailers target customers with offers and deals to persuade them to buy a specific item, or browse deeper into a department.

By this point we find the navigation will normally switch from the horizontal top nav to a vertical navigation on the left. Since now we aren’t limited by real estate, we start to realize this is where things can get confusing. We want to help the consumer narrow down their choice, so we see keeping relevant information at the top and reserving secondary options below. This secondary information varies from site to site, and range anywhere from “Buying Guides” and “Community Links” like blogs and forums to “Clearance”, “Best Sellers” and other promotional messaging.

Trends

• Again we see large promotional space, obviously now targeted depending on which storefront you’ve entered. We also noticed that products being promoted typically have a seasonal influence behind the messaging. Taking the Electronics storefront as an example, you may see cameras being promoted to capture your child’s graduation moments in the Fall and perhaps a Father taking pictures of his son at his first baseball game in the Spring. All used to evoke an emotional response to persuade the consumer to make a purchase.
• We also see secondary promotions that might promote high-rated products, or even target a specific brand if it has a promotion that entices the user to dive deeper into the site. An example would be Free Shipping on select Asus laptops, taking the user directly to the Asus Brand Page.

3. The Department Page

Depending on we’re lead through the experience, a Department Page is where the consumer really starts to make tougher decisions. They’ve made it from the Home page on through the Electronics Storefront and into the Computer Department, but do they want a Desktop or a Laptop? Perhaps a Netbook or a Tablet PC? Decisions, decisions… OH THE HUMANITY!

The Grid

Generally speaking the Department Page is also where we see grids of product show up. These product grids show us product top-line description (headline), prices, ratings, and the ability to add the product to our cart or bag. In most cases the grid page will also give us the ability to sort the grid by specific relevance. Price low to high, rating, new products, or featured items are some of the more common sorting options as well as letting the user choose how many products to display per page.

Trends

• We see some interesting trends on a few sites that offer an overview of an individual product without going to that particular product detail page, keeping the visitor from yet another click off the path. This “quick look” is like a mini product detail page giving the customer color swatches, alternate images, size choice and even sometimes sharing options posting items to Facebook and Twitter. Sites like QVC even offer video at the grid level which is “easy” for them to do since they are also a 24 hour television shopping network, giving them mountains of video to work with, and video is already playing a huge part in online commerce.
• The grid itself is getting some attention, sometimes allowing the user to switch between types of views. From the standard grid to a larger version and even list view. Whenever possible allowing the consumer to tailor or personalize their experience, even if there isn’t a lift in conversion it shows the customer you care enough about them by giving them the choice, which reinforces their loyalty to your sites brand.

4. The Brand Page

Drilling down to a sites Brand Page the customer is ultimately at a decision-making stage. Sites like Dell.com will consume you with their brand because thats who they are and that’s what they sell. When you take a site like BestBuy who has their own brand, brand pages take on a duality which can sometimes be difficult to convey. BestBuy sells Dell computers yet still needs to represent themselves to the user for a consistent experience. They also need to embrace the consumer will the Dell brand. This is acomplished with either subtly or with obvious in-your-face promotion depending on how each brands needs are met. It is as simple as brand-familiar top-line descriptions, logo usage and product images to, in some cases, creating a brand specific experience.

Factors that come into play when deciding between a heavy brand representation are many. Customer demographics, promotional appeal and strength of brand are but a few. The one thing to never lose sight of is the user experience. Never assume you know what the customer wants. Good user experience offers the customer options but doesn’t trap them into an experience they may not want. We see it offered as an alternative, but always see a clear path to where they want to go.

Trends

• We mostly see simple grids with not a lot of whiz-bang promotional elements unless that particular brand is promoting something like free shipping, buy-one-get-one, or spend $X save $Y.
• Bigger promotional space will vary based on stickiness or popularity of the brand. Brands that offer interactivity or promotions that take the focus away are usually reserved for the specific demographic. It’s the, “Just because you can, doesn’t mean you should.” mentality. For example, a Levis department page may offer a simple grid, where the Electronic Arts department page may offer some animation or video game trailer for the latest EA Game. This is ok since the video game consumer could be persuaded to “commit” with a flashy promotion or some other interactive element.

Wrap Up

This concludes our series on eCommerce UI design. From PD pages, to Footers and a Navigation study we hope you enjoyed reading them as much as we did writing them.

It’s no coincidence that we see many similarities between sites. But it’s nice to see some of them exploring new alternatives to the way it’s been done. With new technologies and the number of tech-savvy of consumers increasing, I’m sure we will start to see this happen more and more.

What do you think the future of e-commerce holds? Will it be virtual like Microsoft’s Project Natal? or will it be a marriage between the internet and television where we buy products right from our remotes based on the show were watching? Imagine watching the season premiere of House, and just as you would a DVD or Blu-Ray, pause the show, scroll through what Hugh Laurie is wearing, and buy the entire outfit he has on. There’s no telling what the future holds. But Fuel Your Interface will be sure to let you know when it does!

eCommerce UI Part 2: Footers

In the first in the series last week we talked about the Product Detail page. We looked at two of the top 100 ecommerce sites and picking out the good parts and making suggestions to improve. In today’s post we’re going to take a trip downstairs and have a look at the footers of two more sites from the same list, Bluefly, and GAP but we won’t focus on the good and the bad but more of how the footer can be used in an overall UI design strategy. In the past footers were where you stuck information like copyright info and privacy policies but nowadays footers have become an integral piece of the ecommerce puzzle.

Often times the forgotten child in the overall scheme of a sites design. Organizationally speaking, they are the last item on the page but are not any less important than any other element of a sites structure, and should be treated strategically equal.

Bluefly.com

bluefly.com

Email Solicitation

Bluefly.com has a very basic footer. The first thing we see is an email signup form that’s titled, “be the first to know!”. But first to know what? There’s no context behind what I’m signing up for. Daily, weekly, monthly emails? Am I getting emails about the brands I’m interested in or when new items are added to their catalog? Being the first to know could be a good thing or bad thing depending of Bluefly’s email campaign strategy.

A better approach to soliciting email sign-ups in the footer would be to first give the customer some explanation of what they’re signing up for. Provide a link to more info or just come out and say it. something on the lines of…

Now we know at least how frequent, and how many emails we’re actually signing up for. There is a fine line between too vague and over explanation. In this particular case, one short sentence would have sufficed.

Link Relevance and Order

Bluefly doesn’t have many links in their footer so my next point may be moot, but the grouping of links seem out of order. It could very well be for symmetrical appearance and to keep the four column of three links, this was the most logical order, but in general people (in most countries) read left to right and top to bottom, so we want to make sure that customers can find the most frequently used information first. My best guess would be, “ORDER STATUS” and “RETURNS” even before email sign up.

I don’t have any metrics from bluefly to base my assumptions on, but items we would look at changing would be moving the email sign-up to the far right and placing order status and returns in the first column, with security and privacy next to it one column over.

I also noticed Bluefly is looking for a UI designer on their careers page, so to any of you New York UI Designers, here’s an opportunity for you to make an impact. I won’t even ask for a kick back. :)

Gap.com

Gaps

Not as far as I can see. At least not in the footer. It’s a little odd to admire a footer, but Gap really did a good job. If we have to say something negative about it, we could look at how tall it is. Or if we REALLY wanted to split hairs, the orange color is a little on the heavy side, but over all a great example of good design.

Email Solicitation

I still have a small issue with the email solicitation. We still don’t know if we’re going to get one email or several. In fact they even say “email(s)” which leads me to believe that I will in fact get more than one, or at least have the option to select which emails I will get. The reason we’re not picking apart Gap on their email solicitation is because that’s exactly what they do.

After enter your email address you’re taken to a page where you can select which emails you will receive and Bluefly does not. This is truly a User Experience faux pas for Bluefly and leave it to Gap to pull it together nicely.

Wrap Up

Next time you’re shopping online, take a look at the footer. See if you can spot things that don’t seem to fit. Think about what you would do to improve the design. We don’t only learn from our own mistakes, but we can also improve our skills by analyzing good ui design and thinking about the user experience.

eCommerce UI Part 1: The Product Detail Page

When it comes to eCommerce design there are plenty of Do’s & Don’ts, a ton of “best practices” and even more people claiming they have the keys to successful eCommerce design.

Is there a magical recipe that will convert that browsing customer to a paying one? Perhaps the key is a magical button, so magnificent that the user has no choice but to click. Or maybe it is the number of licks it takes to get to the center of a tootsie roll tootsie pop?

In this series of posts over the next several weeks we’ll look at some of the top internet retailers, and see what they’re doing to achieve their success. I think you will be surprised at what we find.

The Product Detail page or PD page is where most online shoppers will spend their time. Whether it’s reading reviews, product information, or looking at alternative (alt) images, the PD page is the heart an soul of the online eCommerce experience.

For the purposes of this part of the series we will take a look at two of the Top 100 eCommerce websites of 2009, straight from the Internet Retailers Top 100 list. Well look at 1 well designed page and 1 not so well designed, and talk about the good and the bad of both.

Anthropologie

Creatively speaking this entire site is gorgeous. Anthropologie certainly has their brand down, and it’s reflected from page to page. The PD page is no exception.

WHAT THEY DID RIGHT

Simple, concise information. The customer can get all the information about the product within a glance. This works well for sites like Anthropologie who’s clientele may be more concerned with what the label says, than what it’s actually made of. But that’s ok. Some of us do the same thing with Apple products. :)

From the on mouseover zoom to the tooltip message on the “Add To Bag” button when you don’t select a color or size. It’s those little touches that improve user experience and make the sites usability effortless.

Nice use of whitespace, and typography as well as the consistent product photography, and great use of a left nav, especially the strong call out to where you are as well as breadcrumbs, this site makes my top list for the design alone.

WHAT THEY COULD DO BETTER

Just as I mentioned typography as a strong point I’d also like to point out the inconsistencies. I’m not going to make a big deal about it because it is more than likely part of the quirkiness of the brand and if this is true then who am I to tell them differently.

Next I have to point out that the placement of some features seem odd to me. Grouping “add to wish list” with “send to a friend” and social network sharing feels a little off.

On to the “Add To Bag” button itself. It is the same color as the left nav and even though the page is clean and uncluttered it could benefit from standing out a bit more. I’m not saying they need a BOB (Big Orange Button) but perhaps just a simple color change would make a stronger call to action.

Overall, Anthropologie is definitely one of the better designed eCommerce sites. Easy to navigate, consistent user interface and branding. They have carved their niche, and provide their customers with a great shopping experience. They are able to achieve this great experience because they don’t try to be all things to all people. which is a perfect transition to our next site.

Amazon

Amazon.com is the #1 eCommerce website. It’s the first place I go when I want to compare pricing. They will typically be the best price on the net and often have free shipping. Their product catalog is larger than Han Solo’s ego, and they outperform most, if not all of the competition by billions (with a “B”) in annual revenue year after year.

WHAT THEY DID RIGHT

As cluttered and confusing as Amazon may look there is actually some method to the madness so to speak. Scrolling down a PD page on Amazon is like long checkout lines at the world’s largest flea market on Christmas Eve. If you want it, it’s there and probably cheaper than anyone else. But we’re here to talk about the UI and overall design.

Amazon has clearly defined each section as you move down the page, and even though there are a million things that could distract you, Amazon does a nice job at grouping it’s content so that each section is easily distinguished.

Another thing they did right was putting the “Add To Cart” button in the same place on each PD page. With all the variable content, can you image what it would be like if the button was under, oh lets say the “Product Description”? On some products you would have to scroll 4 screens down to get to it. So, as much of a no-brainer this was, they did it right.

They also put the basic info right at the top and left a plethora of statistical info for further reading if you so choose. I think Amazon knows they are not a browsing site per se. I don’t know anyone who goes there to see what’s new, or to watch videos about a product specifically. You go there when you already have something in mind.

WHAT THEY COULD DO BETTER

Well, firstly you might be thinking who am I to tell the #1 online retailer they could do better. Well, I buy stuff from Amazon all the time. I’m a customer. The customer is always right! :)

I have a lot of issues with Amazon.com. As a designer, I wouldn’t know where to begin with attempting a redesign but lets start with the PD page. Amazon could really benefit from a tabbed structure to clean up some of the clutter. I realize this would put some things an extra click away, but from a user experience standpoint, choice suppresses conversion. I’ve said this before in a different context, but the principle is the same.

…people, confronted with a large pool of options will be less satisfied with a decision. The more options there are, the higher their expectation. So even if they have made the best possible choice, their satisfaction level has by default, dropped.

Amazon could also stand to drop so many of the up-sells or at the least moving some of the less relevant ones to a click away. Things like “Customers Who Bought Also Bought” is fine, but “What Do Customers Ultimately Buy After Viewing This Item”? Seriously? I’m sure these are extremely valuable metrics for their business, but I could care less if 2% of the people viewing this product bought some other product. The only thing this does is make me second guess my decision, potentially abandoning my cart for fear of making the wrong choice.

These aren’t just business decisions. As interaction designers, we need to take on some accountability. We’re supposed to be improving the customers experience through well thought out UI and persuading them to convert. Amazon somehow manages the conversion part very well, but leaves user experience at the door quicker than Luke left Dagobah to save Leia.

I could write pages on how we could improve Amazon’s Product Detail page, but the truth of the matter is, they’re #1 and probably will be for the foreseeable future so the point really is moot.

Cat de bine isi protejeaza magazinele online clientii?

Cum arata cateva dovezi din ultimele luni, nu prea bine. In februarie a cazut PCfun, acum eMAG.

Nu pierdeti vanzari din cauza acestor 5 greseli stupide!

Unele dintre aceste greseli comune, in mod sigur va vor afecta vanzarile de pe website-ul dvs. Ceea ce este mai regretabil in privinta acestor greseli, este faptul ca, probabil aveati o vanzare garantata pana cand a-ti iritat sau speriat clientul destul cat sa gaseasca alt magazin online la care sa faca cumparaturi.
Greseala 1 (Date si informatii vechi):

Internetul este o masinarie foarte dinamica. Cand un potential client viziteaza website-ul dvs. si vede data copyright-ului “Copyright © Orice” instant isi va pune intrebari. Sunt aceste preturi inca corecte? Exista inca aceasta companie?
Daca website-ul dvs. nu are o cantitate enorma de incredere perceputa si nu aveti un brand foarte puternic(in acest caz data copyright-ului o sa fie in mod definitiv curenta) o sa pierdeti in mod sigur vanzari doar din cauza acestei dati.

Acelasi lucru se intampla pentru paginile"Despre Noi",si alte pagini de informatii care pot fi cu data specifica.Daca pagina Dvs "Despre noi" arata ca va specializati in calculatoare cu Windows 98,si Windows 2000 in timp ce Windows Vista este eliberearea curenta,acest lucru ridica semne de intrebare la care nu este nici un raspuns bun.

Greseala 2 (Mesaj de eroare legat de SSL):

Intalnesc zi de zi site-uri care te redirectioneaza la pagini securizate cu unele probleme in configuratia SSL-ului lor.Cand trimite-ti un vizitator la o pagina protejata de SSL,este un motiv bun pentru aceasta.Si,cand un mesaj de eroare precede acea conexiune securizata,toata increderea in securitatea Dvs. este pierduta.Daca nu puteti da de cap cum sa encriptati un website/pagina/sub-domeniu in mod corect fara erori,trebuie sa angajati pe cineva care poate.
Va face aceasta sa vreti sa continuati cumpararea:

De asemenea,pentru a va asigura ca nu se va intampla niciodata acest lucru,asigurati-va ca nu instalati in mod constant certificate SSl configurate gresit.Daca nu primiti o eroare SSL,asigurati-va sa nu dati click pe optiunea Permite-ti mereu aceasta conexiune mereu.

Greseala 3(Lipsa afisarrii modalitatilor de plata si de livrare in mod imediat):

Ar trebuii sa aratati modalitatile Dvs. de plata acceptate pe fiecare pagina din website.Nu va faceti clientul sa dea click pe despre noi,faq,sau pe orice alt link sa pentru a avea acces la aceasta informatie.Am Logo-uri de carduri de credit hostate securizat la indemana,daca aveti nevoie de ele..
Ar trebuii sa afisati optiunile de livrare si preturile cat de rapid posibil din punt de vedere tehnic,pe pagina cu cosul de cumparaturi este cel mai bine!De asemenea,nu va faceti utilizatorul sa isi introduca toate informatile de livrare si de plata(sau si mai rau ,sa il faceti sa se inregistreze) inainte sa le aratati preturile de livrare.De foarte multe ori,clientul Dvs. nici nu o sa considere macar sa completeze atatea informatii doar ca sa isi faca o idee despre cat o sa coste livrarea.
Folositi un singur camp cod postal pentru a calcula livrarea si cereti restul informatilor mai tarziu in procesul de cumparare.
Greseala 4 (functii adauga la cos necorespunzatoare):
Cu noua manie web 2.0,este comun sa vezi Ajax indraznetz si functii adauga la cos dinamice unde o parte minora a website-ului a fost updatata cand un obiect este adaugat la cosul de cumparaturi.Aceasta nu este doar o idee rea,dar si una care poate sa fie sinucidere din punct de vedere al functionabilitati.

In timp ce acestre actiuni pot parea evidente pentru Dvs. , multi utilizatori nu observa o cutie mica fiind updatata,si este rar la ce se asteapta un cumparator sa se intample.Este mereu cel mai bine sa va redirectionati utilizatorul la cosul de cumparaturi de fiecare data cand aceasta adauga ceva la el.Puteti atunci furniza o intoarcere la ultimu obiect/categorie/brand sau orice alt link de la cosul de cumparaturi dupa cerinte.

Greseala 5(Cautare interna nesatisfacatoare):
Google a devenit popular deoarece rezultate cautarilor erau rapide si relevante.Functia de cautare pe website-ul dvs. este extrem de imporanta ,si ar trebuii sa fie rapida si relevanta.Trebuie sa fiti capabili sa faceti fata la lucruri precum scriere gresita si cuvinte incomplete.Daca nu aveti capacitatea sa implementati o functie de cautare buna de unul singur,ar trebuii in mod sigur sa cautati o aplicatie de a tertei persoane pe care sa o folositi.Daca website-ul dvs. este bine indexat,Google ofera un motor de cautate particularizat pe care in puteti integra in website-ul dvs.

Singurul lucru mai rau decat a afisa rezultate ale cautarii gresite este sa nu se arate nici unul.

Framework for a Good Product Page

I was inspired by the Anatomy of a Usable Website, and decided to make a similar guide for a product page.

Download »

This is meant to be a framework for creating an ecommerce product page. There are of course many additional things that could be put on a product page, but these are the essentials that every page should have. The more features that a product page has, the more likely a user won’t notice them.

In the end, websites benefit from clean and well organized content.

Paginare perfecta in php

Paginarea este un subiect care a fost discutat si ras-discutat - pot fi gasite zeci de articole si referinte catre cu si catre clase care se ocupa de prelucrarea seturilor de rezultate.

Unele clase pentru paginare necesita parametri, ca de exemplu resurse din baze de date si una sau mai multe instructiuni SQL ce urmeaza a fi transmise constructorului. Claselor care folosesc aceasta metoda le lipseste flexibilitatea - ce te faci daca ai nevoie de formatare diferita pentru numerel paginilor in antet-ul si in subsolul paginii ? Te apuci si modifici functia care face output, sau sublcasa sau intreaga clasa doar pentru a modifica respectiva metoda ?

Aceste "solutii" sunt restrictive si nu incurajeaza reutilizarea codului.Acest tutorial isi propune sa abstractizeze o clasa care sa se ocupe de managementul rezultatelor, implicit renuntarea la dependinta de conexiuni la baza de date sau cereri SQL. Metoda discutata in acest tutorial ii permite dezvoltatorului / programatorului sa isi creeze propriile sale layout-uri si sa le inregistreze pur si simplu folosind un pattern orientat pe obiecte, cunoscut sub numele de Strategy Design Pattern

Ce este Strategy Design Pattern ?

Sa consideram urmatoarele: ai in site-ul tau o sumedenie de pagini pentru care rezultatele dintr-un query sunt paginate. Site-ul tau foloseste o functie sau o clasa care se ocupa de obtinerea rezultatelor si afisarea lor in pagina.Toate bune si frumoase, pana in momentul in care te decizi sa schimbi layout-ul link-urilor de paginare, pe una sau mai multe pagini. Pentru a obtine rezultatul dorit va trebui sa modifica metoda careia i-a fost incredintata aceasta responsabilitate.

O solutie mai buna ar fi sa oricate layout-uri doresti si sa folosesti, dinamic, unul in momentul afisarii paginii. Strategy Design Pattern iti permite sa faci exact acest lucru. Pe scurt, Strategy Design Pattern este un design pattern orientat pe obiecte, utilizat de o clasa care vrea/poate sa-si schimbe comportamentul la rulare.

Folosind capabilitatile polimorfice ale PHP-ului, o clasa generala (asa cum este cea pe care o vom construi in acest articol) foloseste un obiect care implementeaza o interfata, si defineste implementari concrete pentru metodele definite in acea interfata.In timp ce o interfata nu poate fi instantiata, ea poate referentia clase care o implementeaza. Deci, cand cream un layout nou, putem lasa strategia sau interfata din clasa ce paginare sa referentieze layout-urile, dinamic, la rulare. Apelarile care produc link-urile paginarii vor produce deci pagina care este randata cu layout-ul referentiat in momentul respectiv.

Fisiere necesare

Dupa cum am mentionat, acest tutorial nu se ocupa de modul in care rezultatele sunt paginate ci de cum sa folosim o interfata pentru a implementa aceasta logica pastrand flexibilitatea. Ca punct de pornire, este dispobilia o clasa ce contine functionalitaea pentru a inregistra array-uri primitive sau obiecte - clasa Paginated - si de asemenea o interfata pe care o vor layout-urile trebuie sa o implementeze (PageLayout) si o implementare pentru un layout de pagina (DoubleBarLayout). Tot codul utilizat in acest tutorial este disponibil pentru download.

Un simplu exemplu

Urmatoarele exemple utilizeaza un array de string-uri. Iata setul de date:

* Andrew
* Bernard
* Castello
* Dennis
* Ernie
* Frank
* Greg
* Henry
* Isac
* Jax
* Kester
* Leonard
* Matthew
* Nigel
* Oscar

Bineinteles, acest cod poate fi extins cu usurinta, pentru a utiliza un array de integeri, caractere sau alte obiecte care au fost obtinute dintr-o baza de date. Iata cum vom folosi clasa Paginated:

<?php
  require_once "Paginated.php";
  //create an array of names in   alphabetic order
  $names = array("Andrew", "Bernard", "Castello",   "Dennis", "Ernie", Frank", Greg", 
"Henry", "Isac", "Jax", "Kester",   "Leonard", "Matthew", "Nigel", "Oscar");
  $pagedResults = new   Paginated($names, 10, 1);
  echo "<ul>";
  while($row = $pagedResults->fetchPagedRow()) {
  	echo   "<li>{$row}</li>";
  }
  echo "</ul>";
?>

Mai intai includem clasa Paginated si inregistram un array in constructor. Constructorul primeste trei argumente, ultimile doua fiind optionale:

* Primul parametru este array-ul de elemente ce vor fi afisate - acestea pot fi tipuri primitive de date sau obiecte mai complexe
* Al doilea parametru reprezinta numarul de rezultate pe care vrem sa-l afisam in pagina
* Al treilea parametru este numarul paginii curente

In exemplul de mai sus, am folosit constanta 1 pentru a specifica "pagina 1", dar cel mai probabil ca vei dori sa trimiti informatia ca parametru din cererea la baza de date (vom detalia mai tarziu). Daca este furnizat un numar invalid/inexistent de pagina, constructorul va seta 1 ca pagina implicita.

Apeland metoda fetchPagedRow in interiorul buclei, codul nostru itereaza [rin array, tiparind primele 10 nume din lista. Restul ar trebui sa fie incluse in pagina urmatoare, dar, momentan nu exista link catre acea pagina. In timp ce clasa Paginated se va ocupa cu accesul la orice obiect inregistrat de programator, responsabilitatea publicarii rezultatelor ii revine clasei care implementeaza interfata PageLayout.

In continuare, vom adauga cod pentru a afisa numarul de pagini, iar apoi vom studia un pic mai in profuzime felxibilitatea acestei clase.

Creaza un fisier PHP nou, ce contine urmatorul cod:

<?php
  require_once "Paginated.php";
  require_once   "DoubleBarLayout.php";  
  //create an array of names in   alphabetic order
  $names = array("Andrew", "Bernard", "Castello",   "Dennis", "Ernie", "Frank", "Greg", 
"Henry", "Isac", "Jax", "Kester",   "Leonard", "Matthew", "Nigel", "Oscar");
  $page =   $_GET['page'];
  $pagedResults = new Paginated($names, 10, 1);
  echo "<ul>";
  while($row =   $pagedResults->fetchPagedRow()) {
  	echo   "<li>{$row}</li>";
  }
  echo "</ul>";
  $pagedResults->setLayout(new DoubleBarLayout());
  echo   $pagedResults->fetchPagedNavigation();
?>

Cand vom rula codul de mai sus, vom vedea o lista a primelor 10 nume, alaturi de informatii aditionale pentru orientare. Scriptul nostru va afisa lista cu nume precum si link-uri pentru navigare intre paginile disponibile (2 in cazul nostru).

In codul de mai sus am folosit o clasa DoubleBarLayout care implementeaza interfata PageLayout si contine implementari ale metodei fetchPagedLinks. Aceasta metoda primeste doi parametri: obiectul Pagination si parametri pe care dorim sa ii atasam, eventual, link-ului.Marele avantaj al acestei metode este ca profita de capabilitatile polimorfismului in PHP, permitand strategiei inregistrate sa fie fie apelata. De aceea este important sa stabilim in primul rand strategia, inainte de a apela metoda. Setarea strategiei este prin intermediul unei apelari a metodei de setare setLayout, care primeste ca parametru un obiect care implementeaza interfata PageLayout.

La o trecere cu mouse-ul peste link vei observa ca parametrul page si valoarea sa, 2, sunt incluse in URL. Totusi, daca faci clik pe acest link, in stadiul actual, pentru a ajunge in pagina a doua, vei observa ca numele care ar trebui sa apara nu apar.

Sa aflam de ce se intampla acest lucru, prin revenirea asupra constructorului Paginated.

Construcotrul primeste trei parametri:

1. array-ul cu variabile primitive sau obiecte, ce urmeaza a fi procesate
2. numarul de rezultate afisate
3. numarul paginii

Pentru ca metoda fetchPagedNavigation scrie o cerere parametru, putem inlocui valoarea 1, scrisa fortat in cod, cu valoarea prezenta in $_GET['page']. In acest fel, daca userul modifica manual valoarea din URL in ceva invalid, Paginated va trece implicit la valoarea 1. Cum alegi sa validezi ce vine in GET depinde numai de tine.

Flexibilitatea in schemele layout-ului paginii

Flexibilitatea acestei clase este realizata prin intermediul interfetei PageLayout, care este parte din obiectul Paginated. Interfata PageLayout poate referentia orice obiect care o implementeaza, si apeleaza metoda fetchPagedNavigation din Paginated, cauzand obiectul curent sa poate fi referentiat. Daca nu ai mai utilizat interfete pana acum, informatiile de aici s-ar putea sa ti se para un pic confuze, dar in principiu, rezultatul final este ca va fi apelat codul corect, iar rezultatele noastre vor fi impartite pe mai multe pagini.

Pentru a implementa aceasta tehnica, tot ce ai nevoie este sa creezi o strategie de layout care sa implementeze interfata PageLayout. Apoi, furnizeaza o implementare pentru metoda fetchPagedLinks.

Aceasta metoda accepta doi parametri:
1. $parent, care este obiectul Paginated
2. $queryVars, care reprezinta lista de parametri ce urmeaza a fi adaugati la numarul paginii (si este optional)

Sunt doua aspecte importante care merita mentionate:
1. Niciodata nu vei apela direct fetchPagedLinks. Toate metodele din Paginated pot fi accesate prin intermediul obiectului parinte.
2. Daca vrei sa folosesti propriile tale layout-uri, trebuie sa schimbi layout-ul resultatului pagina prin apelari ale setLayout.

Cu acestea in minte, sa cream propriul nostru layout de pagina. Il intitulam TrailingLayout. Iata codul:

<?php
  class TrailingLayout   implements PageLayout {
		public function   fetchPagedLinks($parent, $queryVars) {
   	$currentPage =   $parent->getPageNumber();
  		$totalPages =   $parent->fetchNumberPages();
  		$str = "";
  		if($totalPages >= 1) {
  			for($i = 1; $i <=   $totalPages; $i++) {
   	 		$str .= " <a   href="/?page={$i}$queryVars">Page $i</a>";
  				$str .=   $i != $totalPages ? " | " : "";
  		}
  }
  return $str;
	}
  }

  ?>

Clasa de mai sus, TrailingLayout, implementeaza interfata PageLayout, si ofera implementare pentru fetchPagedLinks. Adu-ti aminte ca parametrul $parent este o instanta a obiectului Paginated, de aceea putem determina pagina curenta, si totalul paginilor, apeland getPageNumber si respectiv fetchNumberPages.

In acest layout simplu, imediat ce apar mai multe pagini, scriptul va trece prin array-ul de pagini si va crea un link si un numar de pagina pentru fiecare dintre ele. $queryVars este, de asemenea, scris in href ca parte a iteratiei; parametrul $queryVars este util atunci cand paginam rezultatul unei cautari care ar putea include cativa parametri.

Ai in vedere faptul ca stringul "Page" nu face parte din $queryVars, dar este scris de iteratia care ataseaza numerele paginilor.

Sa incercam sa implementam noul layout:

<?php
  require_once "Paginated.php";
  //include your customized layout
  require_once "TrailingLayout.php";
  /*create an array of   names in alphabetic order. A database call could have 
  retrieved these   items*/
  $names = array("Andrew", "Bernard", "Castello", "Dennis",   "Ernie", "Frank", "Greg", 
	"Henry", "Isac", "Jax", "Kester", "Leonard",   "Matthew", "Nigel", "Oscar");
  $page = $_GET['page'];
  $pagedResults = new Paginated($names, 10, $page);
  echo   "<ul>";
  while($row = $pagedResults->fetchPagedRow())   {
  	echo "<li>{$row}</li>";
  }
  echo   "</ul>";
  //$pagedResults->setLayout(new   TrailingLayout());
  echo   $pagedResults->fetchPagedNavigation("&firstLetter=l");
?> 

Daca rulam scriptul de mai sus ca atare, vom primi urmatorul mesaj de eroare:  "Fatal error: Call to a member function fetchPagedLinks() on a non-object"

Aceasta eroare apare pentru ca nu am inregistrat strategia pe care dorim sa o folosim inainte de a apela fetchPagedNavigation. Pentru a schimba layout-ul linkurilor de paginatie, transmitem catre metoda setLayout un parametru, care poate fi orice obiect ce implementeaza interfata PageLayout. In codul din exemplul de mai sus, de-comenteaza penultima linie si actualizeaza (refresh) pagina.

Ultima linie din codul de mai sus demonstreaza cum metoda fetchPagedNavigation poate primi un parametru string optional pentru a defini restul cererii (fii atent la & de dinainte de parametrul firstLetter din URL, pentru a-l distinge de parametrul page)

Configurare SEO, cum activez linkuri SEF in Joomla

SEO - Search Engine Optimization - se refera la tehnicile de optimizare
SEF - Search Engine Friendly - se refera la linkurile paginilor din site

Odata ce avem un site Joomla! pus pe un server online, putem in cateva minute sa il pregatim pentru a avea linkuri SEF, in acest fel facem primul pas in SEO.
La prima privire linkurile sunt de genul:

www.site.ro/index.php?option=com_content&view=article&id=19&Itemid=27

Ceea ce nu spune foarte mare lucru nici noua nici unui motor de cautare (Google).

Ce trebuie sa faci:

1. intri in partea de administrare
2. sus in meniu Site -> Global Configuration
3. in dreapta  avem un tab: SEO Settings si sub el:

Search Engine Friendly URLs: No
Use Apache mod_rewrite: No

Punem Da (Yes) la ambele si salvam configurarea.

NOTA: aceste informatii sunt continute de fisierul configuration.php care se afla in root-ul site-ului. Din motive de SECURITATE, acest fisier este bine sa nu aiba drepturi de scriere (644), asa ca dupa ce faci modificarea pentru SEO ai grija sa ii modifici drepturile. Daca in momentul cand vrei sa salvezi o sa primesti un mesaj:

An Error has occurred! Unable to open configuration.php file to write!

inseamna ca fisierul este pe 644, din cPanel sau FTP ii schimbam in 666, facem modificarile si apoi back 644.

Acum odata ce am activat cele 2 optiuni, am vazut ca a doua ne spune ca putem folosi mod_rewrite numai pe Apache (adica pe serverul unde avem noi site-ul). Se poate intampla ca unele servere sa nu suporte mod_rewrite, daca e asa sunam pe cei de la hosting si le spunem sa activeze acest modul.

4. si ultimul pas este sa modificam numele fisierului htaccess.txt in .htaccess, fisierul htaccess.txt se gaseste in root, daca il pierdeti este si in pachetul Joomla!.

Daca nu ai cache pe site, cand dai refresh la pagina o sa ai linkuri SEF de genul:

www.site.ro/joomla-overview

e ceva diferenta fata de cel dinainte:

www.site.ro/index.php?option=com_content&view=article&id=19&Itemid=27

Aceasta este cea mai simpla si rapida cale pentru a va face linkuri SEF, de acum incolo ramane la alegere daca vrei sa mai folosesti si o alta componenta, ca sh404SEF, JoomSef sau nu.

Cum sa sterg meta tag "generator" in Joomla 1.5

Pe o pagina generata de Joomla! 1.5.X, in sursa paginii, o sa vezi un meta tag ca acesta:

<meta name="generator" content="Joomla! 1.5 - Open Source Content Management" />

Cum sa stergem acest tag care nu ne ajuta cu nimic? foarte simplu, sunt 2 cai:

Calea cea mai simpla este sa mergi in:

Extensions >> Template Manager deschizi template-le Joomla care este setat default ( default template) si click pe "Edit HTML" .
Adauga urmatoarea linie de cod intre <head> si </head>

<?php   $this->setGenerator('textul tau sau il lasi gol'); ?>

A doua cale este sa stergem de tot acest meta tag din Joomla

Deschide /libraries/joomla/document/html/renderer/head.php cauta dupa "generator" si adauga // la inceputul liniei

$strHtml .=$tab.'<meta name="generator" content="'.$document->getGenerator().'"/>'.$lnEnd;
//devine:
//$strHtml .=$tab.'<meta name="generator" content="'.$document->getGenerator().'"/>'.$lnEnd;

Validare de Formulare cu JavaScript

Pentru ca datele din formularele HTML sa fie trimise catre un fisier PHP este de preferat sa faceti o verificare, sa vedeti daca ele corespund campurilor in care au fost introduse. De exemplu atunci cand un utilizator trimite un comentariu si a lasat goala o casuta sau a scris adresa de email aiurea sa putem opri trimiterea datelor mai departe.

Pentru o astfel de verificare se poate folosi si PHP dar consider ca dureaza mai mult. Javascript face fata cu succes acestei sarcini si codul este si foarte simplu. Va arat in continuare cum poate Javascript sa interactioneze cu tastatura utilizatorului, putand in acest fel sa controleze tipul datelor introduse, fara sa permita introducerea altui tip de caractere. Asta este o actiune care nu poate fi facuta in PHP.

Pentru a afla care tasta a fost apasata si a actiona in functie de acest lucru trebuie sa stim mai intai care sunt comenzile pentru asta:

Pentru a face legatura intre apasarea tastei si un obiect html din pagina se poate folosi atat cod in interiorul obiectului html car si apelare de functii javascript :

<form>
	<input type="text" value="apasa o tasta aici" onkeypress="alert('ai apasat o tasta in 
interiorul campului')" />
</form>

<script type="text/javascript">
	function alertare () {
        alert("ai apasat o tasta in interiorul documentului html")
   }
	document.onkeypress=alertare();
</script>

Bineinteles ca exemplele de mai sus nu pot fi utile la nimic in validarea formularelor, dar ajuta la mai buna intelegere a ceea ce va urma. Pentru a face validarea formularelor trebuie sa determinam ce tasta a fost apasata in interiorul obiectului respectiv.

Pentru asta se foloseste keycode care indica codul tastei apasate. Puteti sa vedeti aceste coduri in exemplul de mai jos.

<script type="text/javascript">
	function aratacod(e){
        var unicode=e.keyCode? e.keyCode :   e.charCode
        alert("codul tastei este:" + unicode)
   }
</script>
<form>
	<input type="text"   size="2" maxlength="1" onkeyup="aratacod(event); this.select()" />
</form>

Aceste informatii sunt suficiente pentru a da acum niste exemple care pot fi folosite in aplicatii reale

Validare comentariu in functie de numarul de caractere

<script type="text/javascript">
 

function limitarelungime(obj, length){
	var lungime=length
   if (obj.value.length>lungime)
   	obj.value=obj.value.substring(0, lungime)
}
</script>
Introduceti textul aici (lungimea maxima e de 20 de caractere):
<form>
	<textarea onkeyup="return limitarelungime(this, 20)" 
style="width:300px;height:40px"></textarea>
</form>

Validare numar de telefon

Vom face aceasta validare folosindu-ne de cea de mai sus. Vom limita numarul maxim de caractere la 10 si nu vom permite decat apasarea tastelor de la 0 la 9. Pentru a impune aceasta restrictie ne vom folosi de codurile caracterelor.

<script type="text/javascript">
	function numere(e){
		var unicode=e.charCode? e.charCode :   e.keyCode
       if (unicode!=8){ //daca tasta apasata nu e backspace
      		if (unicode<48||unicode>57) //si nu e nici numar
       	return   false //nu se poate apasa
       }
   }
   
	function limitarelungime(obj, length){
        var lungime=length
        if (obj.value.length>lungime)
        	obj.value=obj.value.substring(0, lungime)
   }
 

</script>
Introduceti   numarul de telefon (lungimea maxima e de 10 de caractere):
<form>
	<textarea onkeypress="return numere(event)"  onkeyup="return limitarelungime(this, 10)" 
style="width:300px; height:25px"></textarea>
</form>

Validare E-mail

Pentru aceasta validare vom folosi doua functii javascript: evalid() si everif().

Prima functie verifica daca s-a scris ceva in campul pentru email si nu cumva a fost lasat gol.

A doua functie verifica daca textul introdus are formatul tipic unei adrese de email: daca contine @ , daca are cel putin un punct, daca punctul nu este cumva plasat imediat inaintea lui @ sau imediat dupa el si daca nu cumva contine mai mult de doua caractere @ .

<script language = "Javascript">
	function everif(str) {
   	var at="@"
       var punct="."
       var lat=str.indexOf(at)
       var   lstr=str.length
       var lpunct=str.indexOf(punct)
       if (str.indexOf(at)==-1){
          	alert("E-mail invalid. Introduceti o   adresa reala!!!")
          	return false
       }
        
		if (str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)==lstr){
       	alert("E-mail invalid. Introduceti o adresa reala!!!")
           return false
		} 
  
  		if (str.indexOf(punct)==-1 ||   str.indexOf(punct)==0 || str.indexOf(punct)==lstr){
          alert("E-mail invalid. Introduceti o adresa reala!!!")
          return   false
       }
 
 		if (str.indexOf(at,(lat+1))!=-1){
          alert("E-mail invalid. Introduceti o adresa reala!!!")
          return   false
       }
		if (str.substring(lat-1,lat)==punct ||   str.substring(lat+1,lat+2)==punct){
          alert("E-mail invalid.   Introduceti o adresa reala!!!")
          return false
       }

		if   (str.indexOf(punct,(lat+2))==-1){
          alert("E-mail invalid.   Introduceti o adresa reala!!!")
          return false
       }
          
       if (str.indexOf(" ")!=-1){
          alert("E-mail invalid.   Introduceti o adresa reala!!!")
          return false
       }
		return   true 
	}
  
	function evalid(){
       var emailID=document.eFormular.txtEmail
       if ((emailID.value==null)||(emailID.value=="")){
       	alert("Va rog   sa introduceti o adresa de email")
           emailID.focus()
           return false
       }
       if (everif(emailID.value)==false){
         	emailID.value=""
          	emailID.focus()
          	return false
       }
	    return true
    }
</script>
<form name="eFormular" method="post" action="#" onSubmit="return   evalid()">
	<p>Enter an Email Address : <input   type="text" name="txtEmail"></p>
   <p><input type="submit" name="Submit" value="Submit"></p>
</form>

Validare Butoane Radio si Checkbox

In caz ca sunt mai multe variante de raspuns la o intrebare si doriti sa se poata alege doar una este suficient treceti nume identice butoanelor radio care sunt cuprinse in acea intrebare. Vom folosi javascript pentru a ne asigura ca formularul nu va fi trimis fara sa fie bifat un raspuns la fiecare intrebare.

Introducem functia check_buttons care va indica spre fisierul care sa preia datele din formular numai in cazul in care s-a raspuns la fiecare rubrica. Vom verifica asta cu IF, parcurgand inainte fiecare buton ca pe un array cu FOR.

<script language="Javascript">
 

	function   check_buttons(){
   	for(i=0; i<4; i++)
       for (j=0; j<4; j++){
          if(document.form1.intr1[i].checked==true) {
          	if(document.form1.intr2[j].checked==true) { 
          document.form1.action="rezultat.php"; }
		   }
		}
		return
	} 
</script>
<form name="form1" method="post"   onSubmit="javascript:check_buttons();" action="">
	1. Cate   limbaje de programare cunosti?
   <p>
		<input type="radio" name="intr1" value="a">a. Nici unul<br>
       <input type="radio" name="intr1" value="b">b. 1<br>
       <input type="radio" name="intr1" value="c">c. 2<br>
       <input type="radio" name="intr1" value="d">d. 3<br>
 	</p>
   2. De cat timp esti   interesat de Web Design?
   <p>
   	<input type="radio" name="intr2" value="a">a. De cand m-am nascut<br>
       <input type="radio" name="intr2" value="b">b. De mai   mult de 10 ani<br>
       <input type="radio" name="intr2" value="c">c. De mai putin de 10 ani<br>
       <input type="radio" name="intr2" value="d">d. De   Ieri<br>
   </p>
          
   <input type="submit"   value="Trimite formularul">
</form>