smartphone

Création d’une application Android / Webapp : Utiliser Phonegap Cordova avec Android Studio

Par WolwX dans la catégorie Développement, Informatique

Mots clef : android, android studio, apache, APK, application, AVD, coding, compilation, cordova, css, développeur, émulateur, google, gradle, html, IOS, JAVA, javascript, jdk, node.js, phonegap, play store, smartphone, store, web-app, webapp

Développeur, ou plutôt créateur dans l’âme, j’ai bien tenté de créer une application Android par le passé, mais j’étais confronté à un problème classique, le standard de programmation qui est en JAVA pur, et ce n’est clairement pas un langage que je maîtrise …

J’ai tout de même tenté en installation Eclipse, l’outil de développement JAVA, et j’ai fait quelques pas avec, jusqu’à réussir en partie mon application, mais c’était très laborieux, et ma marge de manœuvre pour améliorer cette application était très restreinte …

J’ai donc laissé ce projet de coté quelques temps, avant de retomber dans l’envie de refaire cette application, et surtout en trouvant le moyen de coder l’ensemble dans des langages que je maîtrise bien plus, à savoir le HTML, le CSS, et le Javascript !

Et oui, pendant longtemps j’ai compris qu’il était impossible de créer une application Android, ou IOS, sans passer par des languages natifs, ou simplement du JAVA pur … les recherches google ne me donnait que peu de possibilité … jusqu’au jour où j’ai compris que l’on peut tout à fait le faire avec des langages web 😀

Le concept est alors un peu différent, et pas aussi optimisé que le JAVA lui même, mais il suffit largement pour bien des cas d’applications !
Il s’agit en fait de développer une “Webapp”, une application nativement pensée pour le web, mais qui sera encapsulé dans une “Webview” JAVA.

Enfin pour faire simple c’est comme si on développé un site web orienté mobile (en particulier pour les interactions et les formats d’écrans) mais que ce site web final est encapsulé dans une application JAVA ultra-basique, tout ceci grâce au projet OpenSource Phonegap Cordova !

Voilà maintenant que la possibilité est ouverte, voyons comment débuter dans la mise en place des outils nécessaire à la création d’une première application !

10 paliers .css pour conception site web webresponsive

Par WolwX dans la catégorie Informatique, Webmastering

Mots clef : cms, css, internet, pc, Prestashop, résolution, responsive, smartphone, tablet, tablette, visite, webmaster, wordpress

Voilà donc un article utile dans la conception de site webresponsive, et qui me sert aussi de pense bête, pour la conception de mes prochains sites.

Le coté “webresponsive” est très important sur les sites internet actuels d’autant plus quand on sait que sur les 55.4 millions d’utilisateurs internet en France (pour une population totale de 66.1 millions), 1 visite internet sur 3 ce fait depuis un smartphone et 1 visite internet sur 10 depuis une tablette.

Pour ma part, je conçois 90% des sites web en webresponsive, et je vous propose de partager un petit fichier que j’ai compilé et que j’utilise régulièrement dans ce but.

A savoir que ce fichier est le résultat de mon expérience, il n’est donc pas parfait, mais je l’ai conçu sur la base de 10 paliers (du très vieux smartphone, au pc / écran très haute résolution, en passant par les tablettes entre autre), qui jusqu’à présent m’ont donnés satisfaction dans la conception de mes différents site internet, perso et clients.

Il s’agit d’un fichier css, à inclure dans le header d’un site web, ou alors en récupérant son contenu et en le copiant collant dans le css principal du site internet.

/* Responsive adaptation by WolwX.net -- DEBUT */
/* http://www.mydevice.io/devices/ -1- tres vieux smartphones (=&gt;2010) */
@media (min-width: 0px) and (max-width: 319px) {

}

/* http://www.mydevice.io/devices/ -2- vieux smartphones (=&gt;2012) */
@media (min-width: 320px) and (max-width: 320px) {

}

/* http://www.mydevice.io/devices/ -3- vieux smartphones (=&gt;2013) */
@media (min-width: 321px) and (max-width: 360px) {

}

/* http://www.mydevice.io/devices/ -4- common smartphones (&gt;=2014) */
@media (min-width: 361px) and (max-width: 479px) {

}

/* http://www.mydevice.io/devices/ -5- common phablets et tablets */
@media (min-width: 480px) and (max-width: 767px) {

}

/* http://www.mydevice.io/devices/ -6- tablets et vieux PC */
@media only screen 
and (min-width : 768px) and (max-width: 1023px){

}

/* http://www.mydevice.io/devices/ -7- tablets et vieux PC */
@media only screen 
and (min-width : 1024px) and (max-width: 1279px){

}

/* http://www.mydevice.io/devices/ -8- vieux PC */
@media only screen 
and (min-width : 1280px) and (max-width: 1599px){

}

/* http://www.mydevice.io/devices/ -9- PC actuels */
@media only screen 
and (min-width : 1600px) and (max-width: 1679px) {

}

/* http://www.mydevice.io/devices/ -10- pc high tech et plus */
@media only screen 
and (min-width : 1680px) {

}

/* Responsive adaptation by WolwX.net -- FIN */

/* Responsive adaptation by WolwX.net -- DEBUT */

/* http://www.mydevice.io/devices/ -1- tres vieux smartphones (=>2010) */

@media (min-width: 0px) and (max-width: 319px) {

}

/* http://www.mydevice.io/devices/ -2- vieux smartphones (=>2012) */

@media (min-width: 320px) and (max-width: 320px) {

}

/* http://www.mydevice.io/devices/ -3- vieux smartphones (=>2013) */

@media (min-width: 321px) and (max-width: 360px) {

}

/* http://www.mydevice.io/devices/ -4- common smartphones (>=2014) */

@media (min-width: 361px) and (max-width: 479px) {

}

/* http://www.mydevice.io/devices/ -5- common phablets et tablets */

@media (min-width: 480px) and (max-width: 767px) {

}

/* http://www.mydevice.io/devices/ -6- tablets et vieux PC */

@media only screen

and (min-width : 768px) and (max-width: 1023px){

}

/* http://www.mydevice.io/devices/ -7- tablets et vieux PC */

@media only screen

and (min-width : 1024px) and (max-width: 1279px){

}

/* http://www.mydevice.io/devices/ -8- vieux PC */

@media only screen

and (min-width : 1280px) and (max-width: 1599px){

}

/* http://www.mydevice.io/devices/ -9- PC actuels */

@media only screen

and (min-width : 1600px) and (max-width: 1679px) {

}

/* http://www.mydevice.io/devices/ -10- pc high tech et plus */

@media only screen

and (min-width : 1680px) {

}

/* Responsive adaptation by WolwX.net -- FIN */

Petit point important pour l’utilisation de ce fichier CSS, il vous suffit bien entendu de simplement rajouter votre code CSS classique dans l’intervalle de chaque palier, mais surtout, si vous ne souhaitez pas modifier le contenu de vos CSS WordPress / Prestashop ou autre thème CMS, tout en forçant le votre comme prioritaire, il vous faudra inclure “!important” en fin de ligne.

Exemple :

/* http://www.mydevice.io/devices/ -4- common smartphones (>=2014) */
@media (min-width: 361px) and (max-width: 479px) {
#header.logo {
max-width:"350px"!important;
}
}

/* http://www.mydevice.io/devices/ -4- common smartphones (>=2014) */