Undolog.com

Pour produire vraiment captivant TabStrip il ya une technique qui permet particulièrement adapté pour servir de médiateur entre les problèmes graphiques et le code Javascript. Laissez-nous tout d'abord comment construire un modèle dans Photoshop pour nos TabStrip:

Construit une bande onglet similaire à celui montré dans la figure ci-dessus, nous utilisons l'outil de sélection de la zone de coupe pour générer la forme que va avoir notre table HTML. L'utilisation de la table, dans ce cas, est particulièrement souligné - comme nous allons le voir, car elle simplifie la conception et du code JavaScript. Nous avons réduit nos TabStrip donc comme suit:

Dans notre fichier Photoshop nous devons considérer toutes les combinaisons des onglets (tab). Nous avons ensuite sélectionné la carte initiale (coupé 3), les points intermédiaires (coupe et découpe 5 7) et la dernière carte n'est pas sélectionné (coupe 9) avec - le cas échéant - la finition des bords (coupe 10 - en option selon le modèle). Ensuite seulement 3 combinaisons pour résoudre tous les cas visuelle. Comme indiqué ci-dessous:

Graphiquement parlant, vous pouvez arranger les cartes dans le chevauchement et décalés, comme indiqué ci-dessous:

Une affaire de goût et les besoins ... retour à l'image complète avec les trois bandes d'TabStrip combinaisons, les deux derniers sont utilisés pour résoudre les cas limites, les couper comme indiqué ci-dessous:

La coupe 17 et 23 résoudre les deux cas de pointe: le premier onglet n'est pas sélectionné, sélectionné en dernier. La coupe 19 est à l'opposé de coupe 5 et 7 de la coupe, vous avez vu précédemment. L'image complète que nous obtenons et nous pouvons sauver des modifications de conception à venir est la suivante:

Afin de ne pas nous confondre, lorsque nous arrivons à la partie du Javascript, le nom de la coupe est comme suit:

• coupé 3 = tabLeftFirstOn
• 4 = coupé tabStripeOn
• Couper 5 = tabMiddleOnOff
• Couper 6 = tabStripeOff
• 7 = cisaillement tabMiddleOffOff
• Couper 9 = tabRightLastOff
• 10 topBg = coupe
• 17 tabLeftFirstOff = coupe
• 19 tabMiddleOffOn = coupe
• 23 = coupe tabRightLastOn

Pour ce faire nous avons besoin maintenant d'un code HTML, le code CSS et le code Javascript comme un gestionnaire clics sur l'onglet cartes. Le code HTML est trivial, mais articulés. Je propose donc une classe PHP qui peut générer à chaque fois que nous avons besoin. En substance, il s'agit de créer un tableau HTML enfermé dans une DIV avec ID certains détails que nous avons besoin, puis pour l'exécution de code Javascript et joindre la conception en utilisant le CSS. Le code HTML généré - juste pour avoir une idée - une TabStrip avec quatre cartes est comme suit:

Le code PHP qui génère le code HTML est comme suit:

Pour utiliser la classe simplement cet extrait:

Laissez-nous définir les styles:

Le code JavaScript est très fade, écrite à un moment où loin prototype.js n'existe pas. Toujours dans l'exemple ci-dessous je utiliser une bibliothèque d'effets (même pas Scriptaculous ) toujours valable, alors la ligne qui utilise la transition, vous pouvez changer l'opacité à ce que vous voulez:

Dans la pratique, les lignes 36 à 46 peuvent être remplacés par tout ce que vous voulez, même un affichage = "none". Le code est obsolète, du moins par rapport aux nouvelles techniques du JavaScript non intrusif (on dirait aujourd'hui l'écrire différemment). Mais la partie qui reste intéressant et pertinent et la configuration de la table HTML qui gère la bande. Elle permet un haut niveau de performances graphiques, contrairement à certaines autres méthodes qui - essentiellement - Onglet face les cartes comme un DIV simples côte à côte.
Une façon encore meilleure serait d'utiliser le z-index (ordre d'empilement) présents dans les styles CSS, afin de gérer la superposition de graphiques. Malheureusement, à ce jour, est une technique très difficile à appliquer en raison des différences entre les navigateurs qui le rendent instable, en fait, sauf dans de rares circonstances.
Bientôt je vais faire une version plus moderne ... si vous avez des doutes ou des questions ici!

Suite ...

Après la fixation du Undolog graphiques et ont fait la touche finale à quelques titres (voir encadré), j'ai apprécié le couple à utiliser prototype.js et Scriptaculous , dans un non-intrusive (discret)! Voici une vidéo (mais vous pouvez l'essayer pour vous-même ici ) Avec la fonctionnalité intéressante que j'ai ajouté à la barre latérale Undolog, qui non seulement le rendre plus agréable J'espère rend encore plus fonctionnelle!

Le code que j'ai utilisé est très simple:

A noter également que la première fois que vous chargez la page d'accueil du panneau est automatiquement fermée Catégories Undolog - identifié par l'ID tit_category :

Les titres sur la barre latérale sont définies, puis, de cette manière:

da rendere dinamici, grazie alla funzione doppio-dollaro ($$) di Prototype.js – di cui abbiamo già parlato… Grâce à la classe dropdown titres sont identifiés H2 pour rendre dynamique, grâce au dollar double ($ $) de prototype.js - nous avons déjà parlé ...

Suite ...

Pourquoi passer à Apollo pour afficher le contenu HTML et dynamique quand un navigateur permet déjà? Pourquoi utiliser Joost Net TV pour voir si un navigateur permet déjà?

Pourquoi pas le producteur des deux fonctions simple navigateur en leur sein:

• Fenêtres sans fenêtre
• Objet P2P

Fenêtres sans fenêtre

Cette fonctionnalité simple serait tirer le maximum de la connexion HTTP et le rendre vraiment utile navigateurs. Pour ouvrir les fenêtres (pop-up dans la pratique) avec seulement le titre et pas de frontière, juste au cas où dans la transparence, accroître la production des widgets à être exploitées avec le navigateur normal, comme ce qu'il fait maintenant Apollo . Avec une étude minutieuse sur la sécurité (comme je crois qu'il est maintenant la seule raison de cette limite) ouvrirait des scénarios très intéressants.

Objet P2P

Comme nous le savons tous, aujourd'hui, tous navigateurs prennent en charge l'objet XMLHttpRequest , qui a donné naissance à une quantité infinie d'applications Ajax dits. Cet objet peut être consulté via JavaScript, est capable de fournir un canal HTTP - parallèle - client scriptable pour les deux IINV et réception de données.
Tôt ou tard, comme prévu dans le blog de divers autres, Adobe va insérer un P2P en Flash. Pourquoi ne pas faire la même chose dans le navigateur? Un objet de ce type avec des caractéristiques Windowless vous permettent de créer des applications comme Joost, sans rien installer sur votre machine, assurant une compatibilité croisée digne de l'Internet, augmentant ainsi l'efficacité de la production (aujourd'hui Joost est développé pour chaque système opérationnel, ce qui est assez lourde - à la fois temps et argent - en fait, la bêta suivra ...).

RSS FEED fenêtres courtes avec texte, audio et vidéo à partir de l'endroit où nous voulons sur nos bureaux, dans les normes du W3C vrai. Ouvrez canaux TCP sont directement à partir de JavaScript, avec des possibilités infinies d'échange de données. De toute évidence, la volonté est petit et le «crime» est élevé, les pirates, le spam et le phishing se cachent et se déplace de ce type de terroriser tout un peu »...

Suite ...

Je déclare que nous parlons de WordPress 2.0.6. Si vous essayez de définir les catégories de «combo» - déroulant - oeil sur le site du projet des indications WordPress . Lorsque vous effectuez un formulaire HTML avec un bouton submit faut faire attention de ne pas mettre le nom de la balise d'entrée simplement «soumettre», vaut tout gâcher juste essayer de submittare le formulaire via Javascript.

Sur le site de WordPress est proposé le code suivant:

Notez que le bouton submit a le nom d'attribut défini sur «soumettre». Si vous essayez d'exécuter du code Javascript à un comme ceci:

L'interprète devient confus parce qu'il ne distingue pas la méthode submit () l'élément «soumettre», qui est un bouton! La solution est simple: appelez cela comme vous, mais pas sur le bouton «soumettre»!

Le code que j'ai utilisé pour afficher les catégories en mode déroulant j'ai est la suivante:

J'ai également eu à modifier le noyau de WordPress (qui ne doit pas être fait ...). Dans le fichier "template-fonctions-category.php" J'ai modifié le dropdown_cats function () lors de la préparation de la balise select, j'ai ajouté:

Voici le morceau de code pour suivre:

Une chose que fait la fonction est de définir la liste déroulante de la catégorie choisie recharger la page quand j'ai le temps ... juste le regarder mieux.

Comme on le sait tous, pour le souci d'exhaustivité, je note que l'action était nécessaire avec un code non-intrusive (discrète) au lieu d'entrer directement dans la construction de la onchange du combo. En outre, les catégories affichées dans le combo ne sont pas accessibles pour les navigateurs avec Javascript désactivé. Cependant cela peut être résolu en utilisant la balise noscript dans la barre latérale et voir les catégories comme une liste de liens - mode par défaut de Wordpress - des ajustements qui seront bientôt .

Suite ...

L'insertion d'objets (en particulier les objets Flash) dans des pages web est devenu récemment une souvent stressant. En d'autres postes que nous avons déjà abordé le sujet de la façon de détecter Flash et insérer des pages de manière appropriée. Comme nous avons parlé des techniques discrètes, nous marquons deux bien connus script peut détecter (et éventuellement installer) et d'insérer des objets Flash sur une page, dans un très discret et afficiente: SWFObject et UFO .
Les deux scripts sont essentiellement les mêmes caractéristiques et la même opération. L'approche consiste à le remplacer par un tag particulier en utilisant Javascript sur votre navigateur. Comme nous le savons, cette procédure élimine le problème d'activation de l'objet Flash imposé par Internet Explorer, cependant, implique que Javascript est activé sur le navigateur cible.
Les deux scripts ne pas utiliser des bibliothèques externes telles que prototype.js par exemple. La plus importante différence entre les deux est que SWFObject est appelée lorsque la balise d'être remplacé est déjà chargée sur la page, pas exactement combien discret. Voici un extrait de code qui montre la séquence d'appel:

OVNI , cependant, permet un'approccio beaucoup plus en accord avec le script classique discret. Le remplacement de la balise est en mode transparent sans charger des séquences abbligare, comme le montre l'exemple ci-dessous:

Dans le code source du script d' ovnis , en fait, vous pouvez utiliser immédiatement - plus approprié - un événement qui prudents chargement de la page avant de remplir l'opération de remplacement, approche donc extrêmement bien adapté à la plupart des scripts ne sont pas intrusifs.

Suite ...

Parmi les diverses bibliothèques - ou un ensemble de bibliothèques (cadre réel), dédié à l'Ajax, HTML et d'extension Interface Web 2.0 que j'ai vu, Ext est certainement digne de mention. Le site et la documentation sont bien fait et organisé, aussi la démo est à ne pas manquer. L'interface utilisateur graphique, compatibilité avec Prototype et Scriptaculous , et impletazione Utils Yahoo, au moins en font un système intéressant! Méfiez-vous si la licence! Malgré se présentant comme l'open source et gratuit pour usage personnel, nécessite une redevance pour améliorer l'utilisation et de soins. Ce dernier, en fait, ne doit jamais être sous-estimée dans le cadre d'une certaine complexité.

Pour la documentation et de démonstration , cliquez ici .

En particulier je mentionne ce système, je suis en train d'analyser en détail, comme il a été utilisé pour créer lecteur de flux frais , l'un des exemples d'applications fournis avec la sortie d'Adobe Apollo Alpha (voir Adobe Apollo Alpha Release ). frais, par conséquent, est Par exemple d'un double d'Apollon, ce qui démontre sa capacité à exploiter HTML et JavaScript au plus. Frais, en fait, n'est pas un pur Apollon, mais utilise le framework Ext - et alors vous avez besoin de JavaScript et HTML - Apollo dans le moteur! Super!

Suite ...

Voici un outil nouveau et intéressant pour la compression et l'obscurcissement du code Javascript (voir aussi Reverse Engineering: les compresseurs de code ).
Sur le site Web de Dean Edwards , vous pouvez télécharger le code source de cette JavaScript compresseur. Par ailleurs, l'auteur a mis à disposition les versions serveur de Microsoft. NET Framework version 1.1, Perl, WHS et PHP5.

Online est une version de travail disponible pour essayer immédiatement , moins complexe - pour être honnête - que je n'avais fait depuis longtemps . Fact permet de compresser le code avec seulement deux choix: le Base62 codé, qui obscurcissent le code et Shrink variables, les variables de l'optimiseur.
Comparé à la version précédente ont été corrigés quelques bugs qui, dans des situations extrêmes de hacks (et vraiment intéressant) que:

n'étaient pas conformes à la sortie générée. Maintenant, les deux sont correctement soutenus commentaires conditionnels de Microsoft, est de + / - dans des conditions telles que:

Comme indiqué dans la page Aide , cependant:

Emballé avec succès scripts déballage sur tous les navigateurs si cela support JavaScript. Seuls les fonctionnalités de base JavaScript est utilisé pour décoder le script emballés.

Certains navigateurs ne peuvent soutenir le packer lui-même. L'Interface Web requiert DOM pris en charge. Navigateurs Legacy affichage de l'interface désactivée.

Alors attention aux utilisateurs finaux et le type de support du navigateur comme toujours ... le reste!

Suite ...

Dans ce post, je tiens à analyser l'utilisation de script discret du point de vue du concepteur Web. Normalement, en fait, un script qui n'est pas intrusive vers la fin du navigateur!
Mais il peut aussi être utilisé pour le Web Designer?

JavaScript non intrusif du point de vue du concepteur Web

Nous mettre dans la peau d'un web designer peut identifier deux catégories de discret JavaScript: JavaScript JavaScript discret vraie et la pseudo discret.

Les deux catégories, cependant, ne sont pas totalement non-intrusive (toujours du point de vue du concepteur Web). Un JavaScript réelle et complète discret ne devrait prendre aucune action sur la page Web, mais ce n'est - pour le moment - fondamentalement impossible. L'opération minimale requise lors de l'installation d'un script est, toutefois, l'inclusion de l'inclusion du script lui-même! Il est, par conséquent, que cette opération permise - en fait - n'a même pas besoin du web designer pour faire des ajustements réguliers de la structure de la page. Le placement simple de l'inclusion de la balise de script à l'intérieur du head peut être donc considéré comme non intrusif.

La vraie JavaScript discret

Les scripts de ce type sont les seuls qui exigent l'inclusion du script et pas discret; prétendre à aucune opération! Scripts de ce type sont, par exemple (l'habituel et souvent cité), snap . Une fois que vous avez entré le code incluent les concepteurs Web ne doit pas s'engager dans toute autre opération, comme le script pression fonctionne sur des étiquettes standard.

Pseudo JavaScript non intrusif

Elles sont différentes des précédentes marquage comme nécessitant davantage afin de fonctionner correctement. Des exemples de ce type sont Control.Tabs du Ryan Johnson à glisser ou à la bibliothèque de Lightbox JS . per identificare i link che devono essere modificati. Lightbox JS , in particolare, richiede addirittura la presenza esplicita sia di Prototype che di Scriptaculous . La dernière solution, par exemple, exige l'inclusion dans le Tag A l'attribut rel pour identifier les liens qui doivent être modifiés. Lightbox JS , en particulier, exige explicitement et même la présence d' un prototype que Scriptaculous . Comme indiqué sur le site Lightbox JS , l'inclusion du script devrait ressembler à ceci:

Les liens qui pointent vers un'immmagine vous souhaitez afficher le système avec Lightbox JS devrait être écrit comme ceci:

En plus d'identifier un groupe d'images, d'ajouter la possibilité de faire défiler les images vers l'avant et en arrière, les balises A être réglée comme suit:

Le besoin de telles contraintes est évident, il n'existe aucun moyen facile de distinguer un élément de liaison (Tag A ) d'un autre. En particulier, il n'est pas possible de comprendre quel élément le concepteur veut afficher une façon ou d'une autre. Concepteur de sites Web doivent nécessairement peu tags et leurs comportements. Sont donc nécessaires - intrusive - totalement compréhensible, pas du tout diminuer l'utilité et le potentiel de ces scripts. Que conduire à plus de détails et quelques lignes de code au cours des Web Designer.

Il est intéressant, cependant, le double aspect de «discret JavaScript, est analysé en termes de point d'extrémité-de vue utilisateur, Web Designer.

Suite ...

Comme nous en avons parlé bien dans le post précédent, il est temps de parler du mal (blague), ou au moins mettre en évidence certaines lacunes de la technique du JavaScript non intrusif.
Si discret code JavaScript est exécuté lorsque la page est complètement chargée, il s'ensuit que plus la quantité de données (HTML) qui composent notre page, et plus de temps à attendre avant que notre code est exécuté.

Cela peut entraîner des retards dans la mise en œuvre et résultant en un effet scintillement désagréable si vous travaillez sur les éléments visuels de la page. Prenez par exemple le code utilisé par Ryan Johnson pour créer des objets TabStrip. Si vous regardez la démo , vous constaterez que pendant environ une seconde, lorsque la page se charge, vous pouvez clairement voir une mise en page standard pour être remplacé immédiatement après que les objets TabStrip. Le rechargement de la page à nouveau, grâce à la cache du navigateur, le problème tend à diminuer (essayez de nettoyer tous de votre navigateur cache pour voir le temps).

Tout cela doit nous faire réfléchir sur les limites de cette technique. La même pression souffre d'exactement les mêmes ralentissement, en particulier dans les pages qui sont souvent extrêmement élevé que celui des undolog.com . Chargement de la page d'accueil de ce blog est clair que Aligner tourne quelques secondes plus tard, c'est à dire lorsque la page est complètement chargée.

Par définition de «discret JavaScript est difficile de résoudre ce problème en général. Toutefois, l'élaboration d'un propriétaire de site peut prendre certaines mesures visant à éliminer ou réduire ces défauts. Une façon assez simple est de créer une sorte de pré-charge, un élément souvent utilisé dans Adobe Flash. Vous pouvez ensuite définir la balise body - qui contient tous les éléments de la page - de sorte qu'il est invisible, laissant la tâche de code JavaScript pour le rendre visible quand il a fini - le cas échéant - des modifications au DOM:

Le code JavaScript discret à la fin de ses opérations:

Solution, cependant, trivial et pas toujours applicable. Par ailleurs, même si nous en quelque sorte résolu le problème de la première caricameno, de naviguer dans une telle manière dans le long terme pourrait être très ennuyeux pour les surfeurs. Ne pas être intrusif, par conséquent, a un prix à payer. Même fonctionnement au niveau des objets, par exemple en fixant uniquement les éléments intéressants dans le mode caché, le fait que le code commence à la fin du chargement de la page entière avec elle conduit inévitablement à des problèmes exactement les mêmes.

Suite ...

Comme promis voici quelques exemple concret de JavaScript non intrusif, un outil polyvalent et puissant s'il est utilisé correctement. Le site / blog Ryan Johnson vous pouvez télécharger deux exemple vraiment beaucoup de JavaScript non intrusif:

• Control.Tabs: Discret onglets CSS pour Prototype
• Control.Modal : Unobtrusive CSS Modal Windows and Lightboxes for Prototype

Ryan Johnson, nei suoi script, fa uso della libreria Prototype , come molti del resto. Ha scritto anche alcune estensioni relativamente alla Prototype , poi introdotte – in forma diversa – nell'ultima versione della libreria.
Usare Prototype per illustrare il funzionamento di codice unobtrusive Javascript è generalmente più comodo – come vedremo più avanti, tuttavia ecco un primo esempio grezzo che non richiede nessuna librerie esterna. Cominciamo ricordando che il concetto che sta alla base del unobtrusive Javascript è quello di partire da una qualsiasi pagina HTML (standard e non necessariamente scritta da noi – altro importantissimo punto di forza) e sfruttare Javascript per apportare alcune modifiche.

Schematimamente il concetto è quello di eseguire una funzione che analizza il codice HTML, attraversa quindi il DOM e in punti particolare aggiunge o modifica funzionalità. Normalmente si sfruttano due metodi per eseguire codice Javascript al caricamento di una pagina: il primo è quello che non racchiudere il codice in nessuna funzione e quindi lasciare che il browser esegua immediatamente il codice caricato nel punto in cui compare la chiamata:

Stesso risultato lo si ottiene includendo il codice:

Tuttavia quando si deve operare sul DOM di una pagina si presuppone che essa si a completamente caricata, cioè che tutti i TAG della pagina sia presenti e disponibili per essere rintracciati. Così la soluzione migliore diventa quella di essere sicuri che la pagina sia completa. Ciò è possibile agganciandosi all'evento onload del TAG body ad esempio, che viene rilasciato quando il caricamento della pagina è completo.

Da evitare, ovviamente, la soluzione canonica che definirla intrusiva sarebbe un eufemismo:

Altra tecnica, più rozza e ugualmente intrusiva (in quanto costringerebbe l'utente finale a posizionare il codice in un punto particolare), è quella di inserire il nostro script alla fine del documento, prima della chiusura del Tag body; tecnica oramai obsoleta e usata in rari casi (vedi Google Analytics!).

Ancora meglio è usare il metodo qui sotto:

Anche questo frammento di codice non è racchiuso in una funzione. Esso aggiungerà un event listener per l'evento load della finestra, richiamando la nostra funzione miafunzione() . I browser moderni, come FireFox ad esempio, useranno la funzione addEventListener() definita nella specifica DOM Level 2 , mentre Internet Explorer userà la sua funzione proprietaria attachEvent() . Tuttavia non siamo ancora alla perfezione: in questa maniera, infatti, si rimpiazzeranno tutti gli – eventuali – eventi onload creati da altri script, il che non è proprio “non intrusivo”.

Per risolvere rapidamente la questione, che per via dei diversi comportamenti dei browser sarebbe quantomeno complicata da esporre qui, conviene usare libreirie come Prototype che forniscono un'elengantissimo metodo per superare il problema:

La sintassi è davvero ovvia e spettacolare! Il vantaggio, per chi non lo avesse capito, è quello di poter scrivere:

Al caricamento della pagina verrà mostrato prima l'alert “Hello 2″ e poi l'alert “Hello 1″. In pratica si carica in modo FILO (First Input Last Output) un stack , garantendo comunque l'esecuzione di tutti gli eventi agganciati al load del documento, esattamente quello che si voleva ottenere. In questo modo una pagina può caricare – virtualmente – infiniti unobtrusive Javascript che si agganciano alla load del documento.

Ma cosa si può fare con questa tecnica? Molte cose interessanti. Un esempio che possiamo commentare (vedi anche Prototype: l'uso del doppio dollaro ($$) ) ci viene da Tobie Langel . Con poche righe di codice e scaricando le librerie Prototype e Scriptaculous si può dare un simpatico effetto ai classici anchor delle nostre pagine. Prima di tutto create una pagina HTML con il seguente codice:

Includete nella pagina:

Grazie all”uso di Event.observe() e alla funzione doppio-dollaro ($$) è possibile modificare in modo semplice il comportamento del classico anchor . In questo caso viene agganciata una nuova funzione al caricamento della pagina HTML. Quando scatta l'evento load vengono rintracciati nel DOM tutti i link (Tag <A>) con l'href che inizia con cancelletto (#, escludendo quello con solo cancelletto!). A questi elementi viene agganciata una funzione all'evento click, similmente a quanto fatto con la load del documento. A questo punto entra in gioco Scriptaculous che produce un effetto di scroll verso l'elemento punatato dal nostro link – modificato!

Suite ...