Catégorie «Tutoriels»


Discret TabStrip Simple

USimpleTabStrip discret JavaScript est d'améliorer les liens d'ancrage classique (encore) dans une page HTML. Cette source est une amélioration de la fonction présentée dans TabStrip discret . Dans cette version, ainsi que d'aligner le Code de la version 1.6 de prototype.js a créé une véritable classe pour gérer les TabStrip. Le communiqué présenté ici est très simple et directe. Son travail principal réside dans l'ajout d'un événement de clic de l'ancre du lien normal. Les styles CSS sont également pas présenté, juste pour laisser le maximum de liberté d'action, mais vous pouvez obtenir une TabStrip efficaces avec quelques lignes supplémentaires de code CSS, voir Ajout de styles CSS ci-dessous.

HTML

La classe USimpleTabStrip travaille sur un code HTML simple, le sftuttando ancre ( <a name></a> ):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<! - Simple liste de liens sur la page ->
< ul >
= "#tbs1" > Link 1 < / a >< / li > < sera > < une href = "# tbs1"> Lien 1 </ une > </ eux >
= "#tbs2" > Link 2 < / a >< / li > < sera > < une href = "# TBS2"> Lien 2 </ une > </ eux >
= "#tbs3" > Link 3 < / a >< / li > < sera > < une href = "# tbs3"> Lien 3 </ une > </ eux >
</ ul >

<! - Blocs / onglets ->

"tbs1" >< / a > < une name = "tbs1"> </ une >
< div >
h1 > < h1 > Liste n ° 1 </ h1 >
p > < p > Blah blah blah .... </ p >
</ div >

"tbs2" >< / a > < une name = "TBS2"> </ une >
< div >
h1 > < h1 > Liste n ° 2 </ h1 >
p > < p > Blah blah blah .... </ p >
</ div >

"tbs3" >< / a > < une name = "tbs3"> </ une >
< div >
h1 > < h1 > Data # 3 </ h1 >
p > < p > Blah blah blah .... </ p >
</ div >

funziona da contenitore. La balise div juste en dessous du point d'ancrage a travailler comme un conteneur.

Suite ...

ActionScript 3.0 pour les débutants: leçon n ° 1

Prémisse

ActionScript 3.0 peut être un bon point de départ pour se familiariser, ceux peu familiers avec la programmation en C et / ou C + +, programmation orioentata (POO). En outre, cette série de leçons seront utiles à ceux qui viennent de d'autres pièces ou à partir de versions antérieures de Flash.

Régler un projet

Dans cette première leçon, nous verrons comment mettre en place un projet Flash CS3 génériques. Il est bon d'utiliser lorsque les projets sont censés avoir à traiter avec au moins plus d'un fichier. L'utilisation de ce projet a été présenté - par Macromedia - déjà dans les versions antérieures à CS3, il devrait donc être un sujet connu pour les développeurs ActionScript 2.0.
Cependant, avec Actionscript 3.0 - comme nous le verrons - il est possible de créer un Actionscript (PSL.) Pour le film document-root nôtre Fla pour ainsi dire.. Cette fonctionnalité est très utile et permet également un minimum de projet d'au moins deux fichiers:. Fla Comme l'associé. Pour cette raison, vous serez «toujours» à partir d'un projet, donc dès maintenant organiser les différents fichiers (. Fla,. Comme, ...) qui feront partie de notre «package» de développement.
Aussi, une fois que vous apprenez l'dimesticazza avec la philosophie d'objets, instrinseca dans ce type de langage, se retrouvent avec de nombreux fichiers sera normal, même pour des projets simples considérablement.

Suite ...

Utilisation de modèles pour créer un site WordPress

Il existe une fonction dans WordPress, parfois négligé, ce qui le rend très polyvalent, surtout pour ceux qui créent des thèmes suivants: l'utilisation de modèles! Un modèle n'est pas simplement un fichier inclus dans le dossier du thème. Pour l'identifier comme un modèle il suffit d'insérer un commentaire spécial au début du fichier en PHP:

1
2
3
/ *
Nom du modèle: Plan du site
* /

En utilisant cette fonctionnalité, vous pouvez créer une page blanche, avec la procédure standard de WordPress, et le connecter à notre modèle. Si vous créez un fichier, par exemple sitemap.php (en ajoutant le commentaire ci-dessus) et chargé dans le dossier de votre thème, vous remarquerez que l'éditeur lors de la création d'une page WordPress (pas un poste) du menu Modèle (ci-dessous) contient le nom du fichier de modèle est chargé. Comme indiqué dans la section modèle:

Certains thèmes ont des modèles personnalisés que vous pouvez utiliser pour certaines pages qui pourraient contenir des fonctionnalités supplémentaires ou des graphiques personnalisés. [...]

Moi, par exemple, j'ai utilisé cette fonction pour créer une page dynamique (qui exécute alors le code PHP) peut montrer un vrai plan de site pour votre blog.

Création d'une page Sitemap

D'abord créer un fichier sitemap.php et télécharger le dossier de votre thème. WordPress en créant une nouvelle page, donnez lui un nom et sélectionnez le modèle dans le menu qui se trouve en dessous de l'éditeur! Terminé!

Le modèle, dans le cadre du thème, il contient aussi toute la structure du thème lui-même est donc important de connaître et d'écrire correctement. Mais voici un squelette d'un site que vous pouvez modifier pour refléter le thème que vous avez installé:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<Php
/ *
Nom du modèle: Plan du site
* /
?>
<? Get_header Php ();?>
"content" > < div id = "contenu">
have_posts ( ) ) : the_post ( ) ; ?> ? <Php if (have_posts ()): while (have_posts ()): the_post ();?>
"post" id = "post-<?php the_ID(); ?> "> < div class = "post" id = "post-<? php the_ID ();?>">
h2 > < h2 > <? php the_title ();?> </ h2 >
"date-time" ><?php the_time ( 'lj F, Y' ) ?>< / small > < petite class = "date-heure"> <? php the_time ('LJ F, Y')?> </ petites >
"entry" > < div class = "entry">
href = "<?php bloginfo('url'); ?> " alt=" <?php bloginfo ( 'name' ) ; ?> ">Home < / a >< / strong >< / p > < p > < forte > < une href = "<? php bloginfo ('url');?>" alt =" <? php bloginfo (' nom');?>"> Accueil </ une > </ p > </ p >
h3 > < h3 > Page </ h3 >
< ul >
; ?> <? Wp_list_pages Php ('title_li =');?>
</ ul >
h3 > < h3 > Post </ h3 >
< ul >
) ; <Php $ archive_query = new WP_Query ('showposts = 1000');
while ($ archive_query-> have_posts ()): $ archive_query-> the_post ();?>
= "<?php the_permalink() ?> " rel="bookmark" title="Permanent Link to <?php the_title ( ) ; ?> "> <?php the_title ( ) ; ?>< / a >< / li > < sera > < une href = "<? php the_permalink ()?>" rel =" bookmark "title =" Lien permanent vers <? php the_title ();?>"> <? php the_title ();?> </ une > </ eux >
<? Php endwhile;?>
</ ul >
h3 > < h3 > Archives mensuelles </ h3 >
< ul >
; ?> <? Php wp_get_archives ('type =');?> mensuelle
</ ul >
h3 > < h3 > Catégorie </ h3 >
< ul >
; ?> <? Php wp_list_categories ('title_li = 0');?>
</ ul >
h3 > < h3 > Flux RSS / FeedBurner </ h3 >
< ul >
= "<?php bloginfo('rdf_url'); ?> " alt="RDF/RSS 1.0 feed"> < acronym title = "Resource Description Framework" > RDF < / acronym > / < acronym title = "Really Simple Syndication" > RSS < / acronym > 1.0 feed < / a >< / li > < sera > < une href = "<? php bloginfo ('rdf_url');?>" alt =" RDF / RSS 1.0 feed "> < acronym title = "Resource Description Framework"> RDF </ acronym > / < acronym title = "Really Simple Syndication"> RSS </ acronym > 1,0 nourrit </ une > </ eux >
= "<?php bloginfo('rss_url'); ?> " alt="RSS 0.92 feed"> < acronym title = "Really Simple Syndication" > RSS < / acronym > 0.92 feed < / a >< / li > < sera > < une href = "<? php bloginfo ('rss_url');?>" alt =" RSS 0.92 nourrir "> < acronym title = "Really Simple Syndication"> RSS </ acronym > 0,92 RSS </ une > </ eux >
= "<?php bloginfo('rss2_url'); ?> " alt="RSS 2.0 feed"> < acronym title = "Really Simple Syndication" > RSS < / acronym > 2.0 feed < / a >< / li > < sera > < une href = "<? php bloginfo ('rss2_url');?>" alt =" flux RSS 2.0 "> < acronym title = "Really Simple Syndication"> RSS </ acronym > 2,0 nourrit </ une > </ eux >
= "<?php bloginfo('atom_url'); ?> " alt="Atom feed">Atom feed < / a >< / li > < sera > < une href = "<? php bloginfo ('atom_url');?>" alt =" Atom "> Atom </ une > </ eux >
</ ul >
</ div >
</ div >
<? Php endwhile, endif;?>
</ div >
? <Php get_sidebar (); get_footer ();?>

Suite ...

Tutorial Photoshop: les techniques de réflexion

A partir des images du Web 2.0 d'Apple «réfléchi» Intrenet inondées. Souvent maltraités, cependant, sont toujours impressionnants. Savoir comment faire de bonnes affaires n'est pas compliqué et, avec un Pizzoc d'imagination, vous pouvez la rendre moins "évidente" et "discount" ... si vous ne pouvez pas faire sans.

Les bases de la SLR

Tout d'abord nous allons voir comment mettre en place une réflexion de base. La base technique pour fixer une réflexion, au moins mon préféré et je l'utilise tout le temps, est mise en œuvre simple et rapide. Cette méthode permet le maximum de liberté de faire des changements plus tard, et préserve la transparence dans le cas où vous souhaitez enregistrer l'image en PNG 24 avec transparence.

Chargement Flash ...

1. Phosotoshop Comme toujours, ouvrir et de charger l'image que nous voulons réfléchir sur une couche spécifique
2. Dupliquer notre couche (faites glisser l'icône couche à dupliquer l'image ) Et nominiamolo «ombre» ou «réflexe»
3. Depuis le menu "Edition" sélectionnez "Transform" / "Flip Vertical"
4. Faites glisser le nouveau calque "réflexe" en dessous du calque d'origine et la base de la couche d'origine spostiamolo
5. Nous sélectionnons le calque "reflex" et en maintenant enfoncée la touche ALT, ajoutez un masque en cliquant sur ​​l'icône l'image «Masques» dans la couche fenêtre de l'outil, la couche de "réflexe" devrait disparaître
6. Nous sélectionnons le masque dans la couche "réflexe" et cliquez sur l'image Remplissage
7. Nous avons créé un dégradé de noir ou blanc au transparent: l'image
8. Dessinez le gradient du centre de la couche d'origine dans la couche moyenne de la "réflexe"

Suite ...

Techniques flash Remplacement de texte

La technique de remplacement de texte que je présente aujourd'hui est, à certains égards, très intéressant. Contrairement à l' image classique en utilisant le CSS pour remplacer l'exploitation , cette technique utilise une animation Flash d'écraser les titres de notre site. En dépit d'être un peu plus complexe, nécessitant la création d'une animation Flash et l'utilisation de JavaScript, produit un certain nombre d'avantages considérables:

  • Maintient de l'accessibilité »pour le site en utilisant un vrai-Discret Javascript afin que les robots et araignées continuer à voir la page au format HTML simple et correcte
  • Il ne nécessite pas la création de titres n par l'image n. Un seul film pour remplacer tous les titres de notre site, avec une économie considérable en termes de téléchargement
  • Vous permet également de créer des titres simples mais pas les polices normalement utilisés sur le Web
  • Le texte peut être rendu au format HTML, grâce aux fonctionnalités de Flash
  • Le texte est sélectionnable
  • Comme vous pouvez insérer une animation Flash et animations interactives de toutes sortes

Vous noterez aussi que dans cette procédure sont pratiquement pas considéré comme CSS!

Suite ...

Techniques de remplacement de texte pour le HTML / CSS

La façon correcte d'insérer un titre dans les graphiques sur une page Web est de remplacer l'exploitation des feuilles de style (voir amélioration progressive de l'accessibilité et l'utilisabilité: discret JavaScript ). Cette technique vous permet de faire du site un contenu plus accessible quel que soit le graphisme d'affichage fixé par feuilles de style. Aussi, les robots et les araignées, avoir une lecture correcte du code HTML, en ignorant les graphismes de remplacement offrent à l'utilisateur final. Insérer une image directement (TAG img ), en fait, de rendre le texte du titre inaccessible aux lecteurs ordinaires ASCII (chenilles, araignées, les plugins de blog, les lecteurs d'écran, etc ...).

Suite ...

OnAir: Choisissez la vidéo avec la nouvelle à la demande

Sur OnAir des Undolog est maintenant possible en utilisant à la demande faite par le joueur disposizine Mogulus .

Signaler la vidéo

Si vous avez le signal vidéo de contact , je serai heureux - si possible - de les inclure dans le calendrier des Undolog / OnAir

Suite ...

PicLens 2.0 dans Flash avec Papervision3D: Partie II

Cette fois-ci (voir PicLens en Flash avec Papervision3D 2.0 ) code public ( PicLens.as ), j'ai dû revoir certaines parties du code, l'aligner avec la dernière version de Papervision3D 2.0 Great White et j'ai fait quelques ajustements et des ajouts.

Suite ...

Créer un preloader en Actionscript 3.0 Generic

Il peut sembler un prévisible et déjà épuisé, mais avec Flash CS3 et la nouvelle gestion de classes de documents (package) autorisé dans ActionScript 3.0, n'est pas pleinement fonctionnel immédiatement créer un preloader. La dernière version de Flash, en fait, parvient à charger le film d'une manière différente des versions précédentes. Sur le net vous pouvez trouver des propositions et des solutions différentes pour créer un preloader "old school". Cependant, plusieurs exemples que j'ai trouvé ne me satisfaisait pas totalement car ils nécessitent de modifier le film pour qu'il fonctionne comme un preloaders classique. En pratique, lorsque vous développez doit toujours se rappeler "cette chose que j'ai à faire sinon la précharge ne fonctionne pas"! Et pour les films déjà rempli, alors?

Loader

La solution que j'ai adoptée, du moins pour l'instant, était de faire un film à l'extérieur (mon chargeur - voir l'exemple ) capable de charger n'importe quel film en dehors, y compris une photo! Cette solution, bien qu'elle nécessite essentiellement deux films (le chargeur et le vrai FILAME), il devient rentable que si vous pouvez créer un chargeur qui peut être utilisé encore et encore, qui est capable de télécharger n'importe quel film, toute résolution et une fréquence d'images.

Suite ...

Reflex et ReflexMe: de classe de base pour la classe

Dans l'après Flash CS3: Créez un effet réflexe sur tout MovieClip nous avons vu comment vous pouvez écrire une classe qui étend MovieClip, de le connecter à DesignTime à tout MovieClip dans la bibliothèque. J'ai découvert, cependant, que peut être chemin plus utile et économique à l'effet contraire. J'ai créé une classe Reflex ( Reflex.as ), avec l'intention de l'utiliser uniquement par le code. J'ai créé cette pensée de classe de déplacer le pointeur dans le constructeur d'un MovieClip. , ma leggermente modificato in modo da poter funzionare espressamente da codice: La nouvelle classe de Reflex contient essentiellement le même code inséré dans le premier ReflexMe , mais légèrement modifiée de manière à travailler spécifiquement par le code suivant:

1
2
3
4
/ /
sfx .*; les importations undolibrary * SFX..;
/ /
Reflex = new Reflex ( movieClipInstance ) ; var rx: = new Reflex Reflex (movieClipInstance);

Suite ...