Créer un bouton de partage animé

aller sur le site

I. Traduction

Ce tutoriel est la traduction la plus fidèle possible du tutoriel original de Paul UnderwoodHow To Create A CSS Animated Share Button.

II. Introduction

Tous les sites ont aujourd’hui des boutons de partage de contenu vers les réseaux sociaux. Si ce n’est pas votre cas, vous devriez en incorporer. Ces boutons sont le meilleur moyen de donner la possibilité à vos visiteurs de partager les contenus de votre site avec leurs amis et leurs « followers ».

L’inconvénient de ces boutons de partage c’est qu’ils se ressemblent tous, quel que soit le site Web visité. Mais c’est également un avantage, cette ressemblance permet aux visiteurs de facilement les repérer.

Dans cet article nous allons donc apprendre à créer un bouton de partage de contenu original pour les principaux réseaux sociaux.

Tout d’abord , nous allons écrire le HTML qui va afficher le texte Partager cette page . Puis quand le curseur de la souris passera sur ce texte nous allons utiliser les animations CSS pour afficher les boutons de partage .

III. Le code HTML

Le code HTML que nous allons écrire contiendra plusieurs sections que nous allons séparer en utilisant différents éléments HTML, le tout étant contenu dans une div sur laquelle on appliquera la classe CSS share_button .

Sélectionnez
<div class="share_button">
</div>

Ce bouton s’animera par le centre pour afficher les boutons de partage, nous allons donc ajouter deux sections que nous utiliserons pour séparer le texte.

Sélectionnez
<div class="share_button">
<section>
<article>
<h1>Share th</h1>
</article>
</section>
<section>
<article>
<h1>is Page</h1>
</article>
</section></div>

À l’intérieur de ces deux sections nous allons afficher ou cacher les éléments <article> pour faire apparaître les boutons de partage. Dans cet exemple il y aura deux boutons par article, soit un total de quatre boutons de partage.

IV. Le code HTML complet

Le code suivant est à utiliser sur une page PHP WordPress car nous utilisons la fonction the_permalink() . Si vous n’utilisez pas WordPress, remplacez la fonction par l’ URL de la page que vous souhaitez partager.

Sélectionnez
<div class="share_button">
<section>
<article>
<h1>Share th</h1>
</article>
<article>
<h2><a href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>" title="Share On Facebook">F</a></h2>
<h2><a href="http://twitter.com/home?status=Share On Twitter <?php the_permalink(); ?>" title="Share On Twitter">T</a></h2>
</article>
</section>
<section>
<article>
<h1>is Page</h1>
</article>
<article>
<h2><a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" title="Share On Google Plus">G</a></h2>
<h2><a href="http://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>" title="Share On Pinterest">P</a></h2>
</article>
</section></div>

V. Le code CSS

Le CSS est divisé en deux parties. Dans la première, nous allons créer le bouton ; puis nous nous occuperons de l’animation qui changera l’apparence des sections pour afficher les boutons de partage en lieu et place du texte.

Utilisez le code CSS suivant pour l’apparence du bouton :

Sélectionnez
.share_button { width: 300px;height: 70px; margin:0 auto; }
.share_button section { width: 50%; height: inherit; float: left; }
.share_button section h1 { margin-top: 13%; overflow: hidden; width: 100%;color: #fff;}
.share_button section article { position: absolute; height: inherit; width: 150px; background: #d4d5d9;
        -webkit-transition: all 600ms;
        -moz-transition: all 600ms;
        -o-transition: all 600ms;
        -ms-transition: all 600ms;
        transition: all 600ms;
        text-align: center;
}
.share_button section article h2 { display: inline-block; width: 40%;   height: 40px; overflow: hidden; margin-top: 10%; cursor: pointer; }
.share_button section article h2:hover { text-shadow:2px 2px 2px #555; }
.share_button section article h2 a { color:#FFF; text-decoration: none; }
.share_button section:first-child article:first-child{ text-align: right; }
.share_button section:last-child article:first-child{ text-align: left; }
Sélectionnez
.share_button section:first-child article:last-child,
.share_button:hover section:first-child article:first-child {
        -webkit-transform: rotateY(90deg);
        -moz-transform: rotateY(90deg);
        -o-transform: rotateY(90deg);
        -ms-transform: rotateY(90deg);
        transform: rotateY(90deg);
}
.share_button section:last-child article:last-child,
.share_button:hover section:last-child article:first-child {
        -webkit-transform: rotateY(-90deg);
        -moz-transform: rotateY(-90deg);
        -o-transform: rotateY(-90deg);
        -ms-transform: rotateY(-90deg);
        transform: rotateY(-90deg);
}
.share_button:hover section:first-child article:last-child,
.share_button:hover section:last-child article:last-child {
        -webkit-transform: rotateY(0deg);
        -moz-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        transform: rotateY(0deg);
}

VI. Conclusion

Nous avons vu dans ce tutoriel comment créer des boutons de partage de contenus vers les réseaux sociaux attractifs visuellement pour vos visiteurs. N’hésitez pas à jouer avec le code CSS pour les personnaliser !

VII. Liens

Vous pouvez consulter la démonstration pour avoir un aperçu du rendu dans un navigateur.

VIII. Remerciements

Je tiens à remercier Paul Underwood de m’avoir autorisé à traduire son tutoriel.
Je remercie également zoom61 pour sa relecture orthographique.

Publicités

Microsoft Surface versus iPad 4 : comparaison au niveau du HTML5 par l’équipe Sencha

aller sur le site
Le 20/11/2012, par vermine, Responsable JavaScript & AJAX

Sencha fournit des outils de développement pour bureau et mobile. Son équipe a mis l’iPad 4 et la tablette Surface de Microsoft à l’épreuve pour voir comment ils se débrouillent en tant que plates-formes HTML5. Le HTML5 est la prochaine génération de technologies Web qui est adoptée de plus en plus pour développer des applications qui peuvent être rédigées en une seule fois et exécutées sur plusieurs systèmes d’exploitation, les navigateurs et les périphériques.

Les tests révèlent que les deux tablettes sont performantes à ce niveau-là. Microsoft Surface est livrée avec Internet Explorer 10 et Windows 8 tandis que l’iPad est livré avec Safari Mobile et iOS 6. Internet Explorer 10 a un ensemble de fonctionnalités HTML5 large et bien implémenté. Il répond et dépasse parfois Safari Mobile. Sur le plan de la performance, l’iPad 4 connait des performances JavaScript, d’interaction et de Canvas. De son côté, Surface a une implémentation graphique vectorielle (SVG) plus rapide.

Les vérifications de présence des fonctionnalités HTML5 ont été effectuées à l’aide de Modernizr, une bibliothèque JavaScript qui détecte les fonctionnalités HTML5 et CSS3. IE10 sur Surface a une longue liste de fonctionnalités HTML5 (indexedDB, animations CSS, transformations 2D et 3D, transitions, websockets, lecture audio et vidéo, etc.). Il a même une implémentation des régions et exclusions CSS.

Il y a cependant quelques omissions notables et des lacunes par rapport à l’iPad 4. Il n’y a pas de support pour la balise d’entrée de l’appareil photo, l’implémetation de Flexbox est plus ancienne et obsolète. Il n’y a également pas de prise en charge de border-image.

Aucune des deux plate-formes ne prend en charge le WebGL et Microsoft a déjà annoncé qu’ils ne le soutiendront pas. Les fonctionnalités les plus ésotériques ne sont pas gérées (par exemple la couleur des input). Il en est de même pour la gestion des notifications et des événements du serveur.

Ce graphique reprend les performances JavaScript

Les premières plates-formes mobiles avaient des problèmes avec les performances CSS. Mais ici, l’équipe a vu de bonnes performances CSS avec des effets de transition et d’animation. Citons le lissage des coins, les dégradés et la lecture vidéo.

Pour finir, les tests ont portés sur l’interaction avec le DOM. L’iPad 4 écrase purement et simplement Surface. Webkit a un avantage de vitesse sur le moteur d’Internet Explorer dans la manipulation du DOM. Voici un tableau récapitulatif. Les résultats les plus hauts sont les meilleurs.

Code :
1
2
3
4
5
6
7
8
                      iPad 4    Surface   iPad Advantage
------------------------------------------------------
DOM Attributes    |   161.84     37.5       4.3 x
DOM Modification  |   136.50     13.9       9.8 x
DOM Query         |  4560.00    356.6      12.8 x
DOM Traversal     |   138.30      4.9      28.2 x
CSS Selector (Avg)|  1654.70    458.7       3.5 x

Media Queries for Standard Devices

Last updated on: OCTOBER 8, 2010

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Reference URL

Debugger appli web sur ios6 et mac…

=>SOURCE<=

Debugging

 

Enabling Web Inspector on iOS

Web Inspector provides valuable insight on what might be going wrong with your web content. Even though Web Inspector is accessed through Safari on OS X, you can use it to inspect content that has loaded in Safari or in any UIWebView on iOS.

bullet

To enable Web Inspector on iOS
  1. Open the Settings app.

  2. Tap Safari.

  3. Scroll down and select Advanced.

    image: ../Art/developersettings.png
  4. Switch Web Inspector to ON.

    image: ../Art/debugconsoleon.png

With Safari on iOS 6 and later, you can debug your mobile web content from your Mac. You can view errors, warnings, and logs for HTML, JavaScript, and CSS, just as you would when developing for Safari on OS X. This chapter describes how to use Web Inspector to debug web content on iOS.

You should test your web content on both the desktop and various iOS devices. If you do not have iOS devices for testing, you can use Simulator in the iOS SDK. Because there is a difference between web browsing on iOS and OS X, you should specifically test your content on iPhone and iPad or emulate the hardware device in Simulator. When testing in Safari on any platform, you can use Web Inspector to debug your web content.

For more tips on debugging web content in Safari, read Safari Developer Tools Guide. Read the section “Changing the User Agent String” in Safari User Guide for Web Developers to learn how to simulate iPhone- and iPad-like behavior in Safari on OS X.

Enabling Web Inspector on iOS

Web Inspector provides valuable insight on what might be going wrong with your web content. Even though Web Inspector is accessed through Safari on OS X, you can use it to inspect content that has loaded in Safari or in any UIWebView on iOS.

bullet

To enable Web Inspector on iOS
  1. Open the Settings app.

  2. Tap Safari.

  3. Scroll down and select Advanced.

    image: ../Art/developersettings.png
  4. Switch Web Inspector to ON.

    image: ../Art/debugconsoleon.png

Inspecting From Your Mac

When Web Inspector on iOS is enabled, connect your device to your Mac with a USB cable. A menu item in the Develop menu of Safari on OS X appears, as shown in Figure 12-1.

Figure 12-1  The Develop menu
Console displays banner on webpage

The name of the menu item will be either the name of each device connected and/or the name of the Simulator. A submenu containing each available page for each inspectable app appears. Select the page that you are interested in, and Web Inspector opens in a new window.

The same interface and workflow to debug web content on OS X is used to debug web content on iOS, as shown in Figure 12-2.

Figure 12-2  Web Inspector
Console displays banner on webpage

All of the Web Inspector’s features on OS X—such as timing HTTP requests, profiling JavaScript, or manipulating the DOM Tree—are available on iOS as well. The sole difference is that by selecting your web page through the Develop menu, you actively inspect web content on your device instead of on your Mac. If you browse to another URL on your device with the Inspector window still open, you’ll notice that the inspected data reloads to reflect the page to which you navigated.

Inspecting Content in a Web View

If you have a development provisioning profile installed on your device, you can debug any web view (UIWebView object) in your app. This is particularly useful if your app manipulates the DOM on the fly and you want to observe the generated code.

To inspect a UIWebView, make sure that your app is open to the desired view so it appears under the Develop menu. The name of your app will appear under the name of your device. When debugging web content in a web view, Web Inspector behaves in the same manner as debugging web content in Safari.

Using JavaScript to Interact with Your Device

You can communicate to your device from your Mac by sending JavaScript commands with the interactive Web Inspector debug console. Through the debug console you have access to variables, functions, and the DOM tree of the page being inspected. As you start typing, notice that acceptable values autopopulate. Press Return to send your command, and you receive a response, as shown inFigure 12-3.

Figure 12-3  Observing the value of document.title in the debug console
Developer console messages

Conversely, you can create messages on your device and send their values to your Mac for observation. Throughout your JavaScript code, you can call the log()warn(), and error() methods of theconsole object. Pass an object containing any runtime variables you are curious about. In this way, you can determine the value of an object at any stage of the loading process, instead of just at the end via the debug console. For example, the following code prints the value of a variable to the console using the log() method:

console.log("The current value of myVariable is " + myVariable);

Observe the output of console logs, warnings, and erros in the Log navigator (control-8).

Not only can you pass messages back and forth between iOS and OS X but you can also trigger functions on your device from your Mac. The example shown in Figure 12-4 calls window.alert(), but you can call any top-level function available to the webpage, including functions of your own. This behavior is useful if you want to closely examine the implementation of your code programmatically instead of through a user interface.

Figure 12-4  Alert dialog triggered from the debug console
Developer console messages