mercredi 3 mai 2017

Un MINI-GMAIL, ça existe...

Marre de Gmail, lourd et plein de pubs?



Oui-oui! Il y a un moyen très simple, c'est d'utiliser l'ancien Gmail pour téléphones mobiles. Y'a pas plus léger, minimaliste et rapide! Sans pubs, mais aussi sans images, malheureusement. Mais pas besoin de chercher longtemps pour trouver ses rares possibilités... Mais quel calme!



Il est ensuite possible d'en faire une Chrome App en allant dans Paramètres -> Plus d'outils -> Ajouter au Bureau puis de mettre un lanceurs dans votre "dock", "panel" ou sur votre Bureau.

Pour info, dans XFCE (un environnement Linux), les ChromeApps se retrouvent dans le Menu principal -> Applications Chrome.

Pour d'autres OS, il faudra peut-être chercher un peu...



Le lien est ici:

http://m.gmail.com/



Et voici même un aperçu en "ChromeApp"





mardi 21 mars 2017

Comment intéger une Google Map sur son site ou Blog ?


  • Ensuite, en haut à gauche, cliquez sur "Partager"
  • Une fenêtre pop-up s'ouvre, choisissez l'onglet "intégrer la carte". 
  • La dimension est "moyenne" par défaut (450 x 600 px) mais vous pouvez choisir "petite, grande ou personnalisée". Remarque: Quelque soit votre choix, il sera toujours possible de changer les dimensions de l'iframe ultérieurement.





Voici le code obtenu.
C'est donc bien un iframe. 
Il suffira de l'intégrer dans le body de votre page à l'endroit que vous voulez. 
Truc: En mode WYSIWYG, vous pouvez taper "ICI" (ou "Rédiger" dans Blogger), le centrer ou ce que vous voulez, passer en mode HTML, rechercher (Ctrl+f) et repérer le "ICI" et coller le code de l'iframe à la place...

Retour au mode WYSIWYG, et normalement votre iframe est visible.


<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d2703.2995152679!2d-3.1549771225145995!3d47.347550071567504!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sfr!2sus!4v1490111725203" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

Et voilà votre "map" est prête!




Et pour un trajet:



Notes

  • Elle peut ne pas être bien centrée comme vous le voulez. Il faudra donc -peut-être...- faire plusieurs essais ou bidouiller le code de l'iframe
  • Les informations touristiques peuvent vites devenir obsolètes

lundi 30 janvier 2017

Styles de fonts dans BlueGriffon


Icône de BlueGriffon
BlueGriffon est un logiciel libre d'édition de pages web WYSIWYG, successeur de Mozilla Composer et Nvu. C'est un logiciel libre multiplateforme sous triple licence MPL/GPL/LGPL développé par le Français Daniel Glazman et fondé sur la plateforme Mozilla (Firefox). C'est le seul logiciel de ce genre pas trop bogué, très complet et gratuit sous Linux. On n'y trouve cependant pas les iframes.

Pour avoir la version complète, il faut payer le prix: version license basique: 70 € HT et version complète: 195 € mais la version gratuite est généralement suffisante.

Pour les éléments qui me manquent, j'utilise en parallèle CKEditor (celui-ci est sur mon serveur) et aussi BlueFish (non-Wysiwyg) notamment pour les Iframes. Ce dernier, comme BlueGriffon est multiplateforme (existent sur Mac, Linux et Windows). CKEditor n'est pas un logiciel mais une application en ligne (c-à-dire un site Web)


Les styles ne sont très pas intuitifs dans BlueGriffon et bien des utilisateurs se demandent comment appliquer une couleur ou un surlignage à un texte (ou autres styles).

En fait, il suffit d'aller dans le Menu en haut » Panneaux (panels) » cocher "Styles CSS" et le panneau des styles va s'afficher dans toute sa splendeur... à droite.

À partir de là, c'est très intuitif, je m'abstiendrai donc de rentrer dans les détails. Sachez seulement que vous trouverez beaucoup de choses pour les Fonts dans "Général" ainsi que dans "Couleur". Attention, n'oubliez pas de repérer vos éléments "stylés" avec des "class". BlueGriffon vous le demandera d'ailleurs.

Pour installer BlueGriffon voir cette page: http://www.bluegriffon.org/#download

Attention, pour obtenir les DEB pour Ubuntu ou Debian, cliquez plutôt sur ces liens:

http://bluegriffon.org/freshmeat/2.2/bluegriffon_2.2-1ubuntu1_amd64.deb  (pour 64 bits)
ou
http://bluegriffon.org/freshmeat/2.2/bluegriffon_2.2-1ubuntu1_i386.deb (pour 32 bits)


LIENS:




mardi 27 décembre 2016

Texte défilant

Bonne Année 2017 !                                                                                                       Happy New Year 2017!



Ce n'est pas nouveau mais une "piqure de rappel" ne fera pas de mal...





Attention! La "code-box" ci-dessus remplace temporairement mes anciennes code-box qui sont altérées ou ne sont plus acceptées par Blogger. En fait, c'est une "Textarea". Vous pouvez donc modifier le code à l'intérieur si ça vous chante... Mais il ne sera pas sauvegardé.


Beaucoup d'éléments dans le code du texte défilant peuvent être modifiés: les arrondis, les ombres, la couleur du texte, du fond, la vitesse de défilement, les dimensions, etc...
Si vous désirez insérer de longs espaces dans votre texte, il faut utiliser &nbsp;
Par exemple: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

La balise (Tag) qui permet de faire défiler le texte est "marquee". En savoir plus sur cette balise: http://www.bernardquevillier.fr/toposnew/marquee.htm

samedi 24 décembre 2016

HTML / CSS: Rogner (crop) une image facilement...

C'est plutôt du CSS (embarqué)...

On aimerait parfois rogner une image distante sur laquelle on ne peut malheureusement par agir directement puisqu'on n'en est pas propriétaire...


C'est le cas ci-dessous. Cette image représente la situation météorologique en Atlantique Tropical Nord (NOAA). Elle est dotée de larges marges en haut et en bas (on se demande bien pourquoi...). Cette image est dynamique, c'est à dire qu'elle change périodiquement.
Je lui ai mis une bordure pour qu'on visualise bien la marge. La taille de l'image originale est de 1720x1260 pixels. Ici, elle est redimensionnée à 640 px de largeur pour s'adapter à ce blog.


Jusqu'à présent, je bidouillais l'image via un iframe et des décalages (positionnements) pour cacher ces marges gênantes tant bien que mal. On peut aussi mettre l'image en background d'un tableau et là aussi jouer sur le positionnement. Inconvénients notables de ces solutions, l'image devient invisible dans un email (mon site météo propose en effet des abonnements par email) mais aussi, les décalages peuvent avoir parfois des effets inattendus sur le reste de la mise en page...





Mais j'ai trouvé bien plus simple!

Un container DIV avec la propriété overflow:hidden; (qui cache tout ce qui dépasse du container) et des marges du bas et du haut négatives pour l'image. En gras: les éléments les plus importants.

 <div style="text-align:center; width:640px; overflow:hidden; margin-left: auto; margin-right: auto; "><img src="http://www.opc.ncep.noaa.gov/UA/Atl_Tropics.gif" style="margin-bottom:-120px; margin-top:-110px; width:640px; height: 469px;" /></div>

margin-left: auto; margin-right: auto; sert à centrer le container DIV et donc l'image. style="text-align:center; est donc peut-être superflu ici. Les largeurs du container et de l'image sont identiques. La hauteur de l'image n'a pas vraiment besoin d'être spécifiée (c'est automatique) mais c'est mieux de la déterminer (ici 469 px). Pour connaître la hauteur proportionnellement à la largeur, il suffit de télécharger puis d'éditer l'image dans une application graphique comme Gimp ou PhotoFiltre. Mais il y a d'autres solutions...


Et voilà! l'image rognée (cropped en Anglais), sans ses marges...




Ci-dessous, un arrangement un peu différent. L'image est recoupée aussi à gauche et à droite ce qui permet d'optimiser l'espace disponible et de zoomer (l'image de base est ici plus grande).

Seule grosse différence: margin-left: -120px (pas de margin-right) qui est aussi négative.

 <div style="text-align:center; width:640px; overflow:hidden; margin-left: auto; margin-right: auto; "><img src="http://www.opc.ncep.noaa.gov/UA/Atl_Tropics.gif" style="margin-bottom:-250px; margin-left:-120px; margin-top:-230px; width:1000px" /></div>





Dans les exemples précédents, il n'y a pas de possibilité d'insérer l'image dans un texte (image à gauche par exemple). Ci-dessous, un exemple avec un tableau pour contourner le problème. Mais il y a certainement d'autres solutions à base de DIV. À cogiter!



Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempor sed ipsum id feugiat. Fusce blandit sem in suscipit lacinia. Quisque porttitor ac eros ut congue. Nulla quis eros posuere, sollicitudin mauris quis, imperdiet enim. Nunc sodales, orci nec ornare bibendum, ipsum diam fermentum turpis, eget finibus tellus justo sed nisi. Nunc consequat congue nulla. Etiam dapibus mauris at eleifend ultrices. Cras tempor iaculis enim id tempus. 
Nam ultrices mauris mollis dolor rutrum congue. Nunc eu iaculis sapien.Vestibulum hendrerit elit justo, sit amet sodales velit mattis quis. Nulla ex est, viverra et arcu interdum, tincidunt finibus odio. 

Ci-dessous, le code:

<table align="center" border="0" cellpadding="0" cellspacing="10" style="width: 640px;"><tbody>
<tr>    <td style="width: 300px;">
<div style="overflow: hidden; text-align: left; width: 300px;">
<a href="http://www.ssd.noaa.gov/goes/east/pr/h5-mloop-avn.html" target="_blank"><img src="http://www.ssd.noaa.gov/goes/east/pr/avn.jpg" style="height: 480px; margin-bottom: -125px; margin-left: -305px; margin-right: -150px; margin-top: -110px; width: 720px;" title="Clic pour l'animation! Click to loop!" /></a></div>
</td>    <td style="text-align: left; vertical-align: middle;">
<span style="color: #666666;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempor sed ipsum id feugiat. Fusce blandit sem in suscipit lacinia. Quisque porttitor ac eros ut congue. Nulla quis eros posuere, sollicitudin mauris quis, imperdiet enim. Nunc sodales, orci nec ornare bibendum, ipsum diam fermentum turpis, eget finibus tellus justo sed nisi. Nunc consequat congue nulla. Etiam dapibus mauris at eleifend ultrices. Cras tempor iaculis enim id tempus.&nbsp;</span>
<span style="color: #666666;">Nam ultrices mauris mollis dolor rutrum congue. Nunc eu iaculis sapien.Vestibulum hendrerit elit justo, sit amet sodales velit mattis quis. Nulla ex est, viverra et arcu interdum, tincidunt finibus odio.&nbsp;</span></td>   </tr>
</tbody> </table>




Sources:

Openclassrooms.com/forum/sujet/rogner-une-image-sans-la-redimensionner (merci à Alban Cornuau)
NOAA (National Oceanic & Atmospheric Administration)
Mon site Météo: NBBCmeteo (Île de St Martin, Antilles Fr.)
Propriété CSS "overflow"


vendredi 16 décembre 2016

Dropbox, la fin du Dossier Public

Bonjour,

Nous cherchons en permanence de nouveaux moyens d'améliorer l'expérience de partage dans Dropbox. Le dossier Public a été la première méthode de partage que nous avons mise en place. Depuis, nous avons créé des outils encore plus efficaces pour sécuriser le partage et optimiser la collaboration en équipe.

Par conséquent, nous allons bientôt arrêter la prise en charge du dossier Public. Les utilisateurs de Dropbox Basic pourront continuer à l'utiliser jusqu'au 15 mars 2017. À compter de cette date, les fichiers qu'il contient deviendront privés et les liens vers ces fichiers seront désactivés. Vos fichiers seront toujours en lieu sûr dans Dropbox.

Si vous souhaitez continuer à partager des fichiers de votre dossier Public, vous pouvez créer des liens partagés. Pensez simplement à envoyer les nouvelles URL à vos collaborateurs.

En plus des liens partagés, nous proposons plusieurs options de partage conçues pour faciliter la collaboration et vous offrir plus de contrôle. Pour en savoir plus, consultez notre centre d'assistance.

L'équipe Dropbox

mardi 9 août 2016

BLUEFISH: MAIS OÙ EST "LE RETOUR À LA LIGNE AUTOMATIQUE" ?

Bluefish est un excellent éditeur de text très complet qui convient bien à la programmation. Personnellement, je l'utilise pour le HTML, CSS, et autres...


"Bluefish est un éditeur de texte open-source pour les concepteurs de sites web expérimentés et les programmeurs,il supporte de nombreux langages de balisage et de programmation, mais se concentre sur la réalisation de sites web dynamiques et interactifs." (Les auteurs)




Il existe pour les principaux OS.


Mais il est parfois difficile de trouver les bons paramètres surtout quand la traduction en Français est un peu curieuse... C'est le cas pour le "Retour à la ligne automatique" qui est traduit dans la version actuelle 2.2.9 (Ubuntu) par "Replier les lignes"


Pas de difficultés à le trouver, c'est dans Éditer > Préférences > première page de paramètres ("paramètre initiaux de l'éditeur")


samedi 6 août 2016

Contours ou ombres au texte (caractère par caractère)

TEXTE

 <div align="center">
<b><span style="font-family: &quot;arial&quot; , &quot;helvetica&quot; , sans-serif; font-size: x-large; text-shadow: 0px 0px 5px orange;">TEXTE</span></b></div> 


Pour une simple ombre

TEXTE

 <div align="center"> <b><span style="font-family: &quot;arial&quot; , &quot;helvetica&quot; , sans-serif; font-size: x-large; text-shadow: 3px 3px #d3d3d3;">TEXTE</span></b></div>  


Le CSS classique

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    text-shadow: 2px 2px 2px blue;
}
</style>
</head>
<body>

<h1>Text-shadow effect</h1>

<p><b>Note:</b> Internet Explorer 9 and earlier do not support the text-shadow property.</p>

</body>
</html>