Labs XooFoo :: Index

Practical Prototype and script.aculo.us

2010-03-12T14:43:35+02:00

(cross-posted from the official Prototype blog)

I'm very happy to announce a new addition to the Prototype bookshelf: core committer Andrew Dupont's Practical Prototype and script.aculo.us published by Apress.

Obviously, Practical Prototype and script.aculo.us covers all you need to know about the latest versions of Prototype and script.aculo.us. But it goes well beyond that. Andrew does an awesome job at setting the context and giving appropriate background information, so much so that you'll end up knowing not only the how but also the why. In the ruthless world of client-side development, that's serious asset!

Practical Prototype and script.aculo.us is a pleasure to read - the style is both straightforward and witty - and should appeal to beginners and confirmed developers alike.

If you want to try before you buy, you can always download a sample chapter or the table of content from the Apress website. Else, you can directly grab a hard copy and/or a pdf from the Apress website or from Amazon.

As always, happy Prototyping!

Source:

MooTools Roundup February 2010

davidwalsh — 2010-03-12T03:11:30+02:00

The foundation of every great open source project is its community. The MooTools Team creates the base framework code but it's all of you that take the framework and build outstanding plugins. These are just some of the new developments floating around the MooTools community.

12 Steps to MooTools Mastery

Jacob Thornton’s NetTuts article, 12 Steps to MooTools Master, is a high-level introduction to the MooTools JavaScript framework. The informative article touches on such MooTools topics as Mutators, Prototypal Inheritance, custom events, binding, and more. This tutorial probably isn’t for the complete beginner, but is a good place to start for people still relatively new to MooTools and those considering it for the first time.

http://net.tutsplus.com/tutorials/jav ... teps-to-mootools-mastery/

Meio.Autocomplete

Meio.Autocomplete is the latest plugin from MooTools Contributor Fábio M. Costa. Fábio’s class is packed full of options and events, making it one of the most flexible MooTools Autocomplete plugin available. Great work Fábio!

http://mootools.net/forge/p/meio_autocomplete

DynamicTextarea

DynamicTextarea is a MooTools class that resizes TEXTAREA elements as the user types. DynamicTextarea boasts numerous options and events for maximum control over chosen TEXTAREAs.

http://mootools.net/forge/p/dynamictextarea

Array.Math

Array.Math is an outstanding set of Math methods you can add to JavaScript’s native Array object. Need to find the sum of numbers in an array? Need to normalize elements in an array? Need to get the vector length of an array of numbers? Be sure to download Array.Math! Kudos to Arian Stolwijk for his excellent work!

http://mootools.net/forge/p/array_math

LazyLoader

LazyLoader is a unique MooTools plugin created by David Chan which allows you to defer loading of MooTools classes until they are needed. This is especially helpful when building large web applications. LazyLoader is very easy to use and implement.

http://mootools.net/forge/p/lazyloader

Locate

Locate is a Geolocation plugin authored by Christopher Beloch. Christopher’s plugin taps into the power of HTML5 and offers a few useful options and events to control the Locate instance.

http://mootools.net/forge/p/locate

Keep Up the Good Work!

These are just a few of the great MooTools plugins floating around the MooTools community recently. Keep up the good work and we look forward to featuring your plugins in future posts!

Source: http://feedproxy.google.com/~r/mootools-blog/~3/runro0b2VD4/ davidwalsh

10 astuces SQL

2010-03-12T00:51:49+02:00

Pour améliorer vos requêtes MySQL ou SQL en général, Jean Batiste Jung propose 10 astuces pour améliorer vos requêtes SQL.

Les astuces proposés sont :

Conception de la base de données

Optimisation

Requete plus rapide

Sélection

Utilisation de la fonction LIMIT

Eviter les requêtes en boucle

Jointure

Union

Caractères génériques

Index

10 sql tips to speed up your database (0 visite)

Source: http://www.nexen.net/content/view/19541/165/

Geek Meet Gothenburg March 2010

Roger Johansson — 2010-03-12T14:25:21+02:00

It's been over three years since Geek Meet Gothenburg February 2007, so it's about time for another one. Like last time, this event will take place at the NetRelations office in Gothenburg, Sweden. The date is March 24, 2010.

We'll be talking about the usual web geek stuff, likely with a bit of emphasis on HTML 5 and other up-and-coming web things. Check out Geek Meet Göteborg - the sequel! on the NetRelations blog for the details and to sign up.

Read full post

Posted in Web General.

Source: http://feedproxy.google.com/~r/456bereastreet/~3/K3FhIwdMsfA/ Roger Johansson

BETA SocialNet 2010 IT READY FOR TESTS

2010-03-12T12:30:00+02:00

300) this.width=300" />

NOTE: FRIDAY March 12, 2010
I recommend for you to register in the socialnet portal to test this module. Why? it because the module have different section that appear only for registers members here now! http://www.ipwgc.com/socialnet/

1. This is a BETA release, it is not recommended in a real production.
See SocialNet Module working in Xoops 2.4.4 version in English and Spanish go here
http://www.ipwgc.com/espanol/
http://www.ipwgc.com/english/

IMPORTANT NOTE:
SocialNet 2010 is a module that provides a Social Network, It is based on 16 modules at this moment, and others modules sections, they had to be translated to English, and joined to one modulate.
Example: it not possible to upgrade the original yogurt module, because the code is totally different,
in other word, in SocialNet don't exist any word relate to the code and word yogurt, and the same thing happens with the other invited modules to the SocialNet 2010 project.

2. Please reports all bugs that you find. click here
http://www.ipwgc.com/socialnet/modules/socialnet/forumstart.php

3. To download the socialnet module and the language files go herehttp://www.ipwgc.com/socialnet/modules/wfdownloads/

4. These are the files languages that are available
/solcialnet_upgrade_english/
/solcialnet_upgrade_french/
/solcialnet_upgrade_german/
/solcialnet_upgrade_italian/
/solcialnet_upgrade_portuguesebr/
/solcialnet_upgrade_spanish/

5. The following folders and files don't require translation,
they are ready. Thursday March 11, 2010
/solcialnet_upgrade_english/
/solcialnet_upgrade_spanish/

::INSTRUCTIONS TO TRANSLATE IN OTHER LANGUAGES::
You have two options to translate the SocialNet Module
A) Translation or manual correction, working together with the Excel program.
B) Translation or manual correction, working together with the incorporate translation tool in the socialnet modulate.
See the tutorial go here
http://www.ipwgc.com/socialnet/module ... alnet/treemenu.php/?tac=5

3. The following folders were translated by a translation program, but they need to be corrected.
/solcialnet_upgrade_french/
/solcialnet_upgrade_german/
/solcialnet_upgrade_italian/
/solcialnet_upgrade_portuguesebr/

::IMPORTANT::
Once you have accomplished the corrections,
please send me the files or post in the forum support
in order to update the language folders in different languages.
Forum support go here
http://www.ipwgc.com/socialnet/modules/socialnet/forumstart.php

Regards,
David Yanez Osses
Portal administrator

Source: http://www.xoops.org/modules/news/article.php?storyid=5272

Float : le grand bluff ?

Raphael — 2010-03-12T10:45:12+02:00

Les feuilles de style CSS version 1 sont nées en 1996. Adaptées à des documents principalement de type textuel, où les éléments sont disposés de façon linéaire, empilés les uns sur les autres (titres, paragraphes, listes), les feuilles de style ne furent pas plébiscitées par les graphistes en quête du design le plus vendeur ou le plus innovant.

Le positionnement des éléments sur la page est un sujet de préoccupation pour les concepteurs web : blocs contigus, positionnements originaux, empilements, grilles et architectures complexes. Au fur et à mesure, ils se sont rabattus sur des mécanismes qui apportaient des réponses concrètes à leurs fantaisies graphiques, que ces éléments soient prévus pour cela ou non : les tableaux de mise en page (balise HTML <table>), les cadres (balise HTML <frame>), le positionnement absolu (introduit dans CSS2) et le flottement (CSS1).

Float, un positionnement ?

La version CSS1 ne prévoit pas de propriétés dédiées au "positionnement" tel que nous l'entendons aujourd'hui (par exemple : deux blocs dimensionnés l'un à côté de l'autre) : la propriété position n'existe pas encore, et la propriété en flux display n'accepte alors que les valeurs block, inline, list-item ou none.

La propriété float apparaît dès CSS1, classée dans les "modèles de mise en forme", tels que inline, block et list-item (un peu comme si l'idée avait été de créer une règle de type display: float).

Définition dans CSS1 (source de la traduction) :

Avec une propriété 'float', un élément sort du flux normal des autres éléments et acquiert un format de type bloc. Par exemple, en donnant la valeur 'left' à la propriété 'float' d'une image, celle-ci est repoussée vers la gauche jusqu'à buter sur les marges, espacements ou bordures d'un autre élément de type bloc. Le flux normal se déroule sur le côté droit de l'image. Ses marges, bordures et espacements sont respectés, cependant les marges ne fusionnent jamais avec celles des éléments adjacents.

Les spécifications initiales ne semblent pas avoir prévu l'usage de cette propriété pour positionner les éléments tel que nous le faisons actuellement (même si rien n'indique que cela soit interdit non plus) : tous les exemples illustrant le flottement désignent des images ou des portions de texte à pousser à droite ou gauche dans un élément.

D'ailleurs, dans la partie dédiée à la propriété float, l'explication suivante illustre son emploi : On utilise le plus souvent 'float' avec des images en ligne, mais on l'applique aussi aux éléments avec du texte.

En voici un exemple proposé par le W3C :



<STYLE TYPE="text/css">
  IMG { float: left }
  BODY, P, IMG { margin: 2em }
</STYLE>

<BODY>
  <P>
    <IMG SRC=img.gif>
    Some sample text that has no other...
</BODY>

De plus, La liste de contraintes imposées par le W3C ne facilite pas la chose aux navigateurs.

Détournement de l'usage initial

Le flottement est très vite adopté pour positionner des blocs conteneurs au même titre que le font à cette époque les tableaux de mise en page.

D'ailleurs Håkon Wium Lie (co-inventeur de CSS) ne s'en prive pas dans ses pages HTML de tests : By using floating DIV elements, many of the HTML pages now using tables can be simplified and accessibility improved.

A cette même époque, le W3C propose une page illustrant une large batterie de tests autour du "positionnement" flottant : rien qu'en observant ce genre de pages de tests, on est en droit de se dire que "c'est pas gagné" !

La grande illusion ?

Employant float comme un schéma de positionnement hors-flux hybride, les webdesigners détournent finalement cette propriété de son usage premier en vue de disposer des éléments les uns par rapport aux autres, voire de les imbriquer.

Cet usage étendu de float a rendu son implémentation complexe dans les navigateurs : ce type de positionnement est celui qui rencontre le plus de bugs d'affichage connus et recensés (dont les célèbres Float model, Double margin, Escaping floats, Peek-a-boo, Guillotine, Three pixel jog, Multiple opposing floats (bug opera) et quelques bugs sur IE5 Mac) et nécessite de jouer avec des contextes de formatage obscurs pour des débutants (clear - lui-même buggué sur certains navigateurs - , overflow, hasLayout...).

Le modèle global de float est interprété différemment selon chaque navigateur, c'est le moins qu'on puisse dire. Bref, un joli mélange indigeste pour les webdesigners néophytes à qui l'on a rabâché que la mise en page via tableaux était à proscrire.

Où float devient schéma de positionnement

Avec CSS2, les notions sont quelque peu remaniées : la propriété float acquiert un statut de "schema de positionnement", classé au même titre que le positionnement dans le flux et le positionnement absolu.

La propriété display prend elle aussi de l'ampleur et se voit attribuer 17 valeurs possibles, dont inline-block et table-cell, permettant de "positionner" plus finement chaque élément tout en demeurant dans un schéma de flux.

CSS2 propose donc officiellement 3 schémas de positionnement :

le flux (propriété display)

le flottement (propriété float)

le positionnement absolu (position:absolute)

Tout cela, géré selon des règles assez complexes si l'on cumule les différents schémas.

En résumé

La définition initiale de la propriété float a engendré une période de flottement (hé hé) : de modeste mécanisme d'affichage d'éléments simples, elle passe à schéma de positionnement au même titre que le flux ou le positionnement absolu. float a pris du galon tout en conservant les mesures et contraintes de gestion de flux initialement prévues.

L'idée de cet article n'est pas de proclamer qu'il n'est plus souhaitable (ou qu'il n'a jamais été souhaitable) d'utiliser le positionnement flottant mais de comprendre que ses nombreuses lacunes et sa relative complexité est simplement due à un mécanisme initial qui n'est pas forcément adapté à l'usage qui en est fait actuellement.

Mais je ne peux pas m'empêcher de lancer un petit clin d'oeil aux ayatollah anti-tableau de mise en page "parce que c'est pas fait pour ça au départ", même si la comparaison demeure bien trop hâtive avec float.

D'autres solutions ?

Il serait bien malvenu de ma part de discréditer le sympathique positionnement flottant et de conclure en déclarant qu'il n'existe pas d'autres alternatives.

En théorie, la réponse est donc "oui". En tout cas, les standards prévoient des solutions propres et adaptées depuis CSS2.

Le positionnement dans le flux doit toujours être privilégié puisqu'il demeure le schéma le plus fluide et le plus robuste dans toutes les configurations (agrandissement du texte, modification du contenu, etc.).

Les nouvelles valeurs CSS2 de la propriété display permettent d'afficher et de placer chaque élément exactement tel qu'on le voudrait en modifiant simplement son rendu : inline, block, mais aussi inline-block et table / table-cell (entre autre).

Forcément, ça se corse à partir du moment où un navigateur important, Internet Explorer, ne reconnaît pas ces différentes valeurs dans ses versions inférieures à IE8. Si le positionnement flottant, malgré toutes ces contraintes et lacunes, a gagné peu à peu le coeur des intégrateurs web, il y a donc bien une raison empirique.

Tout ce bel article pour être finalement frustré et devoir employer float quand-même ?

J'avoue tout : oui, le positionnement flottant a encore de beaux jours devant lui... et les consultants et formateurs en CSS également : grâce aux retards des navigateurs, ils auront longtemps de quoi étayer leurs supports de cours !

En 2010, à l'heure où CSS3 gagne du terrain, force est de constater que le mode de positionnement le plus employé actuellement date de CSS1 (1996). Pire, il n'a pas été conçu pour cela au départ.

Mais alors, je fais quoi maintenant ?

Cet article ne va pas révolutionner vos habitudes, désolé, mais selon votre niveau de pratique, il est susceptible de vous ouvrir des horizons dans un avenir proche :

Si vous débutez dans le monde du positionnement CSS, retenez simplement qu'il n'existe pas de solution meilleure qu'une autre. Le positionnement flottant répond à des besoins concrets et il est de mieux en mieux supporté par les navigateurs récents. Il demeure toutefois un schéma plus complexe qu'il n'y paraît au premier abord.

Si vous êtes plus aguerri voire expert, n'hésitez pas à vous tourner vers d'autres types de positionnements avancés avec la propriété Display (excellent article de Benjamin De Cock), qui méritent le détour à condition de prévoir des alternatives pour les anciens navigateurs.

Si vous pensez encore que les tableaux HTML c'est mal, et les float c'est bien, c'est votre choix et je le respecte.

Source: http://www.alsacreations.com/article/lire/972-float-le-grand-bluff.html Raphael

Practical Prototype and script.aculo.us

2010-03-11T23:15:14+02:00

(cross-posted from the official Prototype blog)

I'm very happy to announce a new addition to the Prototype bookshelf: core committer Andrew Dupont's Practical Prototype and script.aculo.us published by Apress.

Practical Prototype and script.aculo.us is a pleasure to read - the style is both straightforward and witty - and should appeal to beginners and confirmed developers alike.

As always, happy Prototyping!

Source:

Reverse chronological order comments

Roger Johansson — 2010-03-11T20:43:59+02:00

Maybe I'm old-fashioned, but I don't get why some sites display reader comments in reverse chronological order. It seems especially popular on newspaper sites, which also for some reason tend to use paging for comments. I think the combination of reverse order and paging makes trying to follow discussions very frustrating.

Still, since more and more sites seem to display comments this way I guess there are some people who actually prefer comments displayed backwards, so it is probably here to stay.

Read full post

Posted in Usability.

Source: http://feedproxy.google.com/~r/456bereastreet/~3/KRf-5hZGbEQ/ Roger Johansson

Practical Prototype and script.aculo.us

2010-03-11T16:18:50+02:00

(cross-posted from the official Prototype blog)

I'm very happy to announce a new addition to the Prototype bookshelf: core committer Andrew Dupont's Practical Prototype and script.aculo.us published by Apress.

Practical Prototype and script.aculo.us is a pleasure to read - the style is both straightforward and witty - and should appeal to beginners and confirmed developers alike.

As always, happy Prototyping!

Source:

Forms On Mobile Devices: Modern Solutions

2010-03-11T12:58:00+02:00

width="650">width="650">style="width:650px;"> src="http://creatives.commindo-media.de/static/smashing-magazine-advertisement.gif" alt="Smashing-magazine-advertisement in Forms On Mobile Devices: Modern Solutions" border="0" />/> href="http://creatives.commindo-media.de/www/delivery/ck.php?zoneid=56" target="_blank">src="http://creatives.commindo-media.de/www/delivery/avw.php?zoneid=56" border="0" alt=" in Forms On Mobile Devices: Modern Solutions" /> href="http://creatives.commindo-media.de/www/delivery/ck.php?zoneid=63" target="_blank">src="http://creatives.commindo-media.de/www/delivery/avw.php?zoneid=63" border="0" alt=" in Forms On Mobile Devices: Modern Solutions" /> href="http://creatives.commindo-media.de/www/delivery/ck.php?zoneid=64" target="_blank">src="http://creatives.commindo-media.de/www/delivery/avw.php?zoneid=64" border="0" alt=" in Forms On Mobile Devices: Modern Solutions" />

Mobile forms tend to have significantly more constraints than their desktop cousins: screens are smaller; connections are slower; text entry is trickier; the list goes on. So, limiting the number of forms in your mobile applications and websites is generally a good idea. When you do want input from users on mobile devices, radio buttons, checkboxes, select menus and lists tend to work much better than open text fields.

But constraints breed innovation, and mobile forms are no different. The limitations of mobile devices have forced developers and designers to find new ways to allow users to input data faster and more easily. Thanks to the modern solutions covered in this article, the mobile space may not be a place to avoid forms much longer. Instead, it may become the place to encourage them.

[By the way, did you know there is a brand new href="http://creatives.commindo-media.de/www/delivery/ck.php?oaparams=2__bannerid=1339__zoneid=0__cb=a279a7c66d__oadest=http%3A%2F%2Fshop.smashingmagazine.com%2Fsmashingbook-dispatcher.php%3Fd%3Dsmashing-wordpress%26utm_source%3DSmashing%252BMagazine%26utm_medium%3Deditorialbox2%26utm_campaign%3DSmashing%252BWordPress%2520-%2520BTW%2520Editorial%2520Box">Smashing Wordpress Book? Push WordPress past its limits!]

Field Zoom

In many mobile Web browsers, when a user selects a form's input field, the “field zoom” feature expands it to fill the screen’s viewable area. This makes an otherwise tiny field large enough for people to actually see the data they are entering. Given that many form errors are caused by people not seeing their inputs well enough href="http://www.lukew.com/ff/entry.asp?941">to correct misspellings, the usability of this feature is clear.

The Safari browser on Apple’s iPhone makes use of field zoom together with a “form assistant.” The form assistant displays “Previous,” “Next,” “AutoFill” and “Done” buttons below the magnified input field, giving people an easy way to move through and complete a form. No need to worry if an input field is off screen: the user just hits “Next” and won’t miss it!

width="600" height="423" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/mobileinputs1.jpg" alt="Mobileinputs1 in Forms On Mobile Devices: Modern Solutions" />

However, not everyone will know about the form assistant or know how to hide the keyboard. So, make sure the controls on the Web page still allow them to complete the form. Excessive spacing around the “Submit” button can tuck it behind the keyboard.

Field zoom is another great reason to href="http://www.lukew.com/ff/entry.asp?504">top-align input field labels in forms. As you can see on Google’s registration form (screenshot below), left-aligned labels disappear when input fields are expanded to fill the screen. With no visible label, the user can easily forget what question they have to answer. Long input fields also suffer a bit with field zoom.

width="600" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/mobileinputs2.jpg" alt="Mobileinputs2 in Forms On Mobile Devices: Modern Solutions" />

Mobile browsers that don’t have field zoom also run into issues with left- and right-aligned input field labels. Anyone using such a form on Google’s Android OS (below) faces the problem of disappearing labels. The screen simply does not have enough room for both the input field and its corresponding label. Top-aligned labels avoid this issue.

width="600" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/mobileinputs3.jpg" alt="Mobileinputs3 in Forms On Mobile Devices: Modern Solutions" />

Input Formats

Some mobile Web browsers recognize href="http://diveintohtml5.org/forms.html">specific input types (part of the developing HTML5 standard) and adjust their input modes accordingly. For example, specifying an input of the type url brings up a virtual alphanumeric keyboard with “.”, “/”, and “.com” keys. Specifying an input of the type email brings up a virtual alphanumeric keyboard with “.” and “@” keys. Specifying an input of the type number brings up a virtual numeric keyboard.

These input-specific keyboards make entering the particular type of data required by each input field much easier. Even browsers without virtual keyboards benefit from the use of number, because users would not have to switch to number mode to enter numeric data.

width="600" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/mobileinputs4.jpg" alt="Mobileinputs4 in Forms On Mobile Devices: Modern Solutions" />

Password-Masking

Most password input fields in forms instantly obscure all characters that a user enters to keep sensitive information hidden from prying eyes. Automatic masking of passwords may provide href="http://www.zurb.com/article/279/how-to-mask-passwords-like-the-iphone">the appearance of security, but it can also create usability issues when people are left staring at a row of bullets that they hope (but can’t verify) is their password.

Many mobile devices address this issue by displaying the most recent character the user has entered, and then obscuring that character as a bullet only after a brief delay. This technique has made its way onto the desktop, as illustrated in this href="http://www.zurb.com/article/279/how-to-mask-passwords-like-the-iphone">password-masking solution from ZURB.

width="480" height="385">name="movie" value="http://www.youtube.com/v/ZKgpfkuXGRQ&hl=de_DE&fs=1&">name="allowFullScreen" value="true">name="allowscriptaccess" value="always">src="http://www.youtube.com/v/ZKgpfkuXGRQ&hl=de_DE&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385">

Pop-Up Menu Controls

Drop-down select menus are one of the hardest input types to use. First, you have to click on the menu to open it. Then, you have to maneuver through a potentially long list of small targets. Once you find the value you want, you need position your cursor on the right target and select it. To top it off, many implementations of drop-down menus on the Web require you to keep your cursor on the menu while navigating the list, or else the menu closes!

Even dexterous users often miss them and need to start over. Couple this interactive challenge with the small screens of mobile devices and the need for a different solution for select menus becomes quite obvious.

For drop-down select menus on Web forms, Apple’s iPhone presents users with a pop-up menu control. This control displays the options in the menu in a contained list that can be scrolled at various speeds though drag, nudge and flick gestures. The large touch targets also make it easy to select the right value once you’ve found it.

width="600" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/mobileinputs5.jpg" alt="Mobileinputs5 in Forms On Mobile Devices: Modern Solutions" />

Similarly, Google’s Android provides a larger touch target for select menu options. When the user taps a drop-down select menu on an Android device, a scrollable list of menu options appears in a dialog window over the Web page.

width="600" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/mobileinputs6.jpg" alt="Mobileinputs6 in Forms On Mobile Devices: Modern Solutions" />

Compound Menu Controls

Pop-up menu controls can be applied to compound inputs as well. So, instead of requiring three separate input fields for the month, day and year of a requested date, one date field can bring up a set of pop-up menus that allow people to scroll through three lists at once to find the right date. This approach can be applied to other kinds of compound inputs as well, such as height in feet and inches.

width="600" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/mobileinputs7.jpg" alt="Mobileinputs7 in Forms On Mobile Devices: Modern Solutions" />

Google’s Android has a compound input field solution, though it makes use of visible interface elements to move through a list instead of relying on gesture-based scrolling alone.

width="600" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/mobileinputs8.jpg" alt="Mobileinputs8 in Forms On Mobile Devices: Modern Solutions" />

Native Input Controls

In addition to having compound menu controls, most mobile operating systems have several other custom input controls available to application developers. Sliders, split buttons, rating widgets and scrubbers are just a few of the components worth considering in place of standard form controls to make inputting easier for users.

width="600" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/mobileinputs9.jpg" alt="Mobileinputs9 in Forms On Mobile Devices: Modern Solutions" />

Orientation

Because people like to hold mobile devices both horizontally and vertically in their hands, mobile forms should adjust accordingly to take advantage of the changing screen space. The compose email form on Google’s Android does just that.

width="600" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/mobileinputs10.jpg" alt="Mobileinputs10 in Forms On Mobile Devices: Modern Solutions" />

When held vertically, the screen shows three input fields with several action buttons. In the horizontal position, the email body input takes over the screen, and one action button is shown on the right. This layout maximizes the screen space available for the message content.

Voice Input

Google’s href="http://www.youtube.com/user/GoogleNexusOne">Nexus One phone allows people to use voice input for any text field in an application. Users can swipe the virtual keyboard to switch the phone to audio input mode, or they can use the microphone button. The video below demonstrates both of these options in action. With effective voice input, typing any characters into the mobile device becomes a thing of the past.

width="480" height="295">name="movie" value="http://www.youtube.com/v/laOlkD8LmZw&hl=en_US&fs=1&rel=0">name="allowFullScreen" value="true">name="allowscriptaccess" value="always">src="http://www.youtube.com/v/laOlkD8LmZw&hl=en_US&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="295">

What’s Next?

Mobile is growing href="http://www.lukew.com/ff/entry.asp?993">exceptionally fast, and as more designers and developers focus on the space, we’ll hopefully see even further innovation in mobile forms. After all, anything that makes inputting (both on mobile and desktop devices) faster and easier will do href="http://nform.ca/blog/2008/10/luke-wroblewski-on-forms-visua">a lot of good for both companies and their customers.

About the Author

Luke Wroblewski is an internationally recognized href="http://www.lukew.com/about/index.asp">digital product design leader and the author of href="http://www.lukew.com/ff/">two popular Web design books. You can follow Luke on Twitter href="http://www.twitter.com/lukewdesign">@lukewdesign or by using href="http://feeds.feedburner.com/FunctioningForm">RSS.

Smashing Magazine readers can get a special 20% off discount on Luke’s latest book: href="http://rosenfeldmedia.com/books/webforms/">Web Form Design Filling in the Blanks. Just use discount code MIX to href="http://rosenfeldmedia.com/books/webforms/">order.

(al)

© Luke Wroblewski for href="http://www.smashingmagazine.com">Smashing Magazine, 2010. | href="http://www.smashingmagazine.com/2010/03/11/forms-on-mobile-devices-modern-solutions/">Permalink | href="http://www.smashingmagazine.com/2010/03/11/forms-on-mobile-devices-modern-solutions/#comments">7 comments | title="Bookmark in del.icio.us" href="http://del.icio.us/post?url=http://www.smashingmagazine.com/2010/03/11/forms-on-mobile-devices-modern-solutions/&title=Forms On Mobile Devices: Modern Solutions">Add to del.icio.us | title="Bookmark in Digg" href="http://digg.com/submit?phase=2&url=http://www.smashingmagazine.com/2010/03/11/forms-on-mobile-devices-modern-solutions/">Digg this | title="Stumble on StumbleUpon" href="http://www.stumbleupon.com/submit?url=http://www.smashingmagazine.com/2010/03/11/forms-on-mobile-devices-modern-solutions/">Stumble on StumbleUpon! | title="Tweet us!" href="http://twitter.com/home?status=@tweetmeme%20@smashingmag%20Reading%20'Forms On Mobile Devices: Modern Solutions' http://www.smashingmagazine.com/2010/ ... devices-modern-solutions/">Tweet it! | title="Bookmark in Reddit" href="http://reddit.com/submit?url=http://www.smashingmagazine.com/2010/03/11/forms-on-mobile-devices-modern-solutions/">Submit to Reddit | href="http://forum.smashingmagazine.com/">Forum Smashing Magazine
Post tags: href="http://www.smashingmagazine.com/tag/mobile/" rel="tag">mobile

Source: http://www.smashingmagazine.com/2010/03/11/forms-on-mobile-devices-modern-solutions/

Practical Prototype and script.aculo.us

2010-03-11T11:50:36+02:00

(cross-posted from the official Prototype blog)

I'm very happy to announce a new addition to the Prototype bookshelf: core committer Andrew Dupont's Practical Prototype and script.aculo.us published by Apress.

Practical Prototype and script.aculo.us is a pleasure to read - the style is both straightforward and witty - and should appeal to beginners and confirmed developers alike.

As always, happy Prototyping!

Source:

Pas toujours du code

2010-03-11T08:16:26+02:00

Koen van Urk publie sur le site PHP Architect un petit rappel très intéressant.

Ce rappel est destiné à l'ensemble des développeurs et des développeuses car lorsque vous réalisez un projet web, il n'est pas toujours nécessaire d'attaquer le code de suite surtout pour effectuer des tests ou de validations.

Il propose d'utiliser une feuille de papier et de s'en servir. Il faut écrire les idées, des graphiques, des schémas... Et même la structure des pages.

Lorsque vous avez établi l'ensemble des tests et valider vous pouvez passer à l'étape suivante.

It s not all about the code (0 visite)

Source: http://www.nexen.net/actualites/php/19540-pas_toujours_du_code.php

Informations CPU d'un serveur MySQL

2010-03-10T19:53:43+02:00

De nombreux outils existent pour obtenir des informations sur vos données MySQL.

La plupart des outils proposent une utilisation en ligne de commande ou par interface graphique. Cependant il existe une autre manière d'obtenir ces informations sans utiliser ce mode shell.

Le site Livejournal montre en quelques lignes comment obtenir les informations CPU de votre serveur MySQL.

Get Linux performance information (0 visite)

Source: http://www.nexen.net/actualites/php/19539-informations_cpu_dun_serveur_mysql.php

Multisite 1.40

2010-03-11T08:10:00+02:00

Multisite 1.40

Download Multisite for XOOPS 2.3.x, XOOPS 2.4.x Series, XOOPS 2.5.x Series - it allows for multiple site to be run from the one xoops, many xoops - One Code - Many Domain Bases. Download now

xoops2_multisite_1.40.zip (260 KB).

With this module you are capable of managing multiple domains for your website there are many core hacks with this module but it makes managing your site dynamically and easily for your environment.

It is modeled off the System module, so you can easily expand it and make structural changes. There is a forum for this module should you wish to look at the hacks to get it up and running Forum on Multisite Module

To implement this module requires some core hacks, this is more replacement of or ammendments to include the multisite modules class library using the xoops_getmodulehandler function. Most of the function calls even criterias are the same.

Whats new in this version

* Domain Groups in admin fixed
* Preloader Added to module
* More bug fixes.
Source: http://www.xoops.org/modules/news/article.php?storyid=5271

4 themes converted from templates

2010-03-11T01:30:00+02:00

Hello, i present to you these 3 themes converted from TemplateWorld.com
AGreen
300) this.width=300" />

AConsultant
300) this.width=300" />

ATime
300) this.width=300" />

This one is from ChocoTemplates.com
APortel2
300) this.width=300" />
I hope you like them
Source: http://www.xoops.org/modules/news/article.php?storyid=5269