Le Blog

Le blog laboratoire de F.L.D. Studio
0

ProcessWire Vidéo Adaptative

Nouvelle fonctionnalité JavaScript

C'est le début de l'année, une bonne résolution pour ce blog était de rendre les vidéos embarquées "responsives". C'est chose faite !!! En intégrant dans le fichier main.js, la librairie JavaScript FLUIDVID.JS et la fonction qui l'utilise  (http://toddmotto.com/fluid-and-responsive-youtube-and-vimeo-videos-with-fluidvids-js/ ) et en recodant le HTML des posts contenant des vidéos Youtube, cela fonctionne parfaitement, les vidéos conservent une proportions 16:9 dans toutes les résolutions d'écran. Merci à Todd Motto pour sa solution pure JS (Jquery Free !)

Cette fonction permet d'analyser les balises <iframe> de la page, de tester qu'il s'agit des plateformes Youtube ou Viméo et de les enfermer dans  une <div class="fluid-vids"></div> avec un  style inline placée à la volée dessus.

Le style

        element.style { padding-top: 56.25%; position: relative; width: 100%; }
    

La librairie à aussi été modifiée pour accepter les vidéos sur Dailymotion.

Pour que cela fonctionne avec le module blog de ProcessWire il faut s'assurer que l'éditeur WYSING accepte la balise <iframe> en mode HTML et placer simplement le code fournit par les plateformes pour le partage embarquée des vidéos.

1.Editeur WYSING TinyMCE

Le champ Body doit être configuré ( voir : ici ) pour accepter le mot : iframe et toutes les options.

2.Exemples de code à placer dans l'éditeur HTML (fournit par les plateformes vidéos)

Code à recopier

En noir gras l'adresse URL de la vidéo

Youtube
    <iframe src="http://www.youtube.com/embed/
    
        JMl8cQjBfqk
    
    " frameborder="0" width="560" height="315"></iframe>
Viméo
    <iframe src="http://player.vimeo.com/video/
    
        23919731
    
    " width="500" height="281" frameborder="0"></iframe>

Solution en CSS

Une autre solution basée sur du CSS peut-être trouvée ici ( http://www.lije-creative.com/creer-video-responsive/ ) mais il faut avoir la main sur les balises vidéo pour ajouter une <div> avant la balise <iframe>, ce qui n'est pas le cas avec 'un champ crée par un utilisateur et son éditeur WISING ou non, à moins de transformer le code HTML à la volée. L'avantage c'est qu'il est possible aussi de gérer les vidéo embarquées avec Flash.

Tutoriel de Grafikart sur les vidéos Responsive en CSS

Catégories: Développement WEB, Processwire, Vidéo

Commentaires: Pas de commentaires

0

Serveur Privé Virtuel Introduction

VPS

 Afin de disposer d’un véritable laboratoire de tests et d’une vitrine technologique sans bridage j’ai décidé de tenter l’aventure du serveur privé virtuel  ( V irtual P rivate S erver).

 Outre le fait que cela me permettra de parfaire mes connaissance d’administration d’un serveur LINUX orienté serveur WEB il devra me permettre à terme de disposer d’une plateforme d’hébergement qui me délivrera des contraintes des solutions mutualisées comme par exemple, le temps d’exécution des scripts, la taille des fichiers que l’on souhaite uploader ou d’une unique base de données.

 Pour ce faire je me suis tourné vers OVH pour des raisons de coûts, de serieux aussi parce que je n’ais jamais eu de soucis avec leurs offres mutualisés par le passé. http://www.ovh.com/fr/vps/vps-classic.xml

Ressources Vidéos

Ressources Tutoriels

Catégories: Développement WEB

Tags: VPS

Commentaires: Pas de commentaires

0

Email Responsive

Un email en HTML responsive

Responsive email

Après les sites responsives, l'email responsive se devait de suivre rapidement. La, les choses sont moins simples. Concevoir un email de type responsive est un savant mélange de codage de la mise en page à l'ancienne, avec des tableaux et l'utilisation des Media Queries. Seulement, attention, si le monde des navigateurs et des compatibilités est une jungle, celui des lecteurs d'email est un enfer.

Comme le signal Stéphanie Walter : Certains moteurs sont très exotiques, par exemple Outlook 2013 utilise toujours le moteur d'interprétation HTML de... Word ! Ce qui signifie virtuellement que la prise en charge de CSS dans Outlook n'a pas changé entre les versions 2007, 2010 et 2013, là où les navigateurs ont fait des bonds de géants.

Avant de se lancer, il faut bien comprendre comment utiliser les technologies et ne pas hésiter à faire des tests.

C'est pourquoi j'invite à lire cette série d'article avant de commencer à coder sa newsletter.

Ressources

Français

Anglais

https://litmus.com/blog/the-how-to-guide-to-responsive-email-design-infographic  (Infographie)

Ouvrir l'image dans un nouvel onglet  (.png 341Ko)

Ressources en ligne

Catégories: Développement WEB

Commentaires: Pas de commentaires