background preloader

Voluer vers une architecture MVC en PHP

Voluer vers une architecture MVC en PHP
Ce paragraphe constitue la partie la plus complexe de l'article. Il fait appel à des concepts avancés du développement Web et de la POO. Toutefois, il n'est pas nécessaire de comprendre tout son détail pour pouvoir utiliser le framework ainsi construit. V-B-1. Commençons la construction du framework par la partie Modèle. Avant cela, il nous reste un problème à résoudre. Pour que cette classe soit totalement générique et donc intégrable à un framework, il faudrait pouvoir définir les paramètres de connexion à la BD sans modifier son code source. Configuration.php Sélectionnez Cette classe encapsule un tableau associatif clés/valeurs (attribut $parametres) stockant les valeurs des paramètres de configuration. La classe dispose d'une méthode statique publique nommée get() qui permet de rechercher la valeur d'un paramètre à partir de son nom. Enfin, la méthode statique privée getParametres() effectue le chargement tardif du fichier contenant les paramètres de configuration. V-B-2. <? <? <? <? <! <?

Introduction à Canvas Depuis l’arrivée de HTML5 et de ses nouveaux éléments, les sites et applications web peuvent profiter de grandes avancées pour rendre ce média attractif : audio, vidéo et Canvas pour disposer de fonctionnalités de dessin en 2D et 3D dans le navigateur. L'élément qui nous intéresse ici est <canvas>. Il s'agit d'un espace de pixels initialement transparents, armés de JavaScript pour réaliser un bon nombre de fonctions graphiques, partant du simple tracé de courbe pour aller jusqu'aux animations et jeux vidéo. Le nombre de démonstrations existant aujourd'hui sur le web est impressionnant, il serait difficile de toutes les lister ici pour en donner un avant-goût complet des possibilités. Flash est-il mort ? De nombreux parallèles avec la technologie Flash ont été réalisés et diffusés. Voici quelques avantages de Canvas : De quels outils dispose-t-on ? Qu'en est-il de SVG ? Support navigateur Création du canvas et principes généraux Celles-ci vont toutes exploiter le même système de coordonnées :

10 outils pour le Web mobile Les contraintes d'ergonomie, d'adaptation et de performance dans le monde du Web mobile impliquent parfois certaines techniques rendues complexes par le peu de spécifications et d'outils existants à l'heure actuelle. En attendant des modules de positionnements CSS flexibles tels que "Flexbox", ou des spécifications stables concernant les informations de type "retina" ou de bande passante d'un terminal, nous sommes contraints à créer nous-même nos outils et stratégies. Pour nous faciliter la tâche, voici une sélection de 10 ressources bien pratiques. La majorité des dispositifs présentés dans cet article consistent en des bibliohèques JavaScript et répondent à des missions bien précises. Inutile de vous préciser qu'il n'est pas recommandé d'employer l'ensemble de ces outils sur un seul et même projet, pour des raisons évidentes de performances. Mobile Boilerplate Voir Mobile Boilerplate 320 and up Souple et évolutif, il peut être couplé à Modernizr, Bootstrap, LESS et SASS selon vos besoins.

8 conseils pour un design moderne et ergonomique en 2013 En ce début de printemps (pas franchement printanier, vu le temps qu’il fait partout en France), on a envie de changement: renouvellement de garde-robe pour les plus chanceux, ménage de printemps, reprise du sport et bien sûr, rafraichissement du design de votre site web! Un design de site web a une durée de vie de 2 ans environ, avant de commencer à être passé de mode. Pour donner un effet « WOUAAOUHHH », le changement de votre design doit donc passer par une phase de recherche des tendances actuelles, et c’est ce que je vous propose de découvrir. N°1 : Responsive Web Design Sans nul doute le phénomène qui a le plus marqué le web en 2012…et qui se poursuit en 2013. Il permet donc de s’affranchir d’une application iphone ou android (Entre nous, les applications pour smartphone ne sont utiles que pour les applications web (ex: ebay.fr, dropbox.com, coursesenligne.fr..) et non pour les sites de contenus comme les blogs ou les sites vitrines _dans ce cas, elles sont même contre productives).

Les fondamentaux du Responsive Web Design Prenons deux exemples simples. Le premier pourrait être ces vitres qui s'opacifient en fonction de la luminosité extérieure. Ou encore ces murs-miroirs où plus nous nous approchons, plus ils nous semblent se déformer. Bref, ce que cherchent les architectes dans ce mouvement, c'est de dépasser/s'abstraire des contraintes inhérentes liées aux différents supports. Le « Responsive Web Design » est né, car nous sommes de plus en plus confrontés aux mêmes problèmes que les architectes : s'adapter aux supports. Voyez plutôt : autrefois, nous n'avions qu'un ou deux navigateurs et les tailles d'écrans variaient peu. Et tout cela, c'est ce que nous avons maintenant. Pour faire une application Web qui soit Responsive Web Design, nous devons établir les trois points suivants : Si nous faisons une analogie avec l'architecture, les trois derniers points représentent nos outils. Il est heureusement possible de s'adapter pour y parvenir. En fait, nous devons appliquer à chaque fois la formule suivante :

Responsive Webdesign – présent et futur de l’adaptation mobile Après plusieurs mois de recherche sur le sujet, j'ai enfin publié mon article sur Smashing Magazine qui s'intitule "The State Of Responsive Web Design". Ce qui suit en est la traduction. Avertissement avant la lecture : Je n'ai pas la prétention de changer le monde, d'avoir la vérité absolue. Dans cet article – qui est long, je le sais – je souhaitais juste rendre attentif le lecteur au reste de ce gigantesque iceberg dont les Media Queries n'en sont que la surface. Le responsive webdesign reste une technique et une infime partie de ce qui est aujourd'hui appelé "Adaptive Webdesign". On entend parler de "Responsive Webdesign" depuis plusieurs années maintenant, et le sujet s'est vraiment démocratisé et popularisé en 2012. Dans cet article, nous allons nous intéresser à ce qui est aujourd'hui déjà possible en terme d'optimisation de sites pour mobiles, mais également à ce qui sera possible dans le futur. L'état des images dans le responsive webdesign La solution flexbox Conclusion

Responsive Webdesign – présent et futur de l’adaptation mobile Nous reproduisons avec l'aimable l'autorisation de l'auteure la traduction de cet article, conjointement sur Alsacréations et OpenWeb. Après plusieurs mois de recherche sur le sujet, j'ai enfin publié mon article sur Smashing Magazine qui s'intitule "The State Of Responsive Web Design". Ce qui suit en est la traduction. Avertissement avant la lecture : Je n'ai pas la prétention de changer le monde, d'avoir la vérité absolue. Dans cet article – qui est long, je le sais – je souhaitais juste rendre attentif le lecteur au reste de ce gigantesque iceberg dont les Media Queries n'en sont que la surface. Le responsive webdesign reste une technique et une infime partie de ce qui est aujourd'hui appelé "Adaptive Webdesign". On entend parler de "Responsive Webdesign" depuis plusieurs années maintenant, et le sujet s'est vraiment démocratisé et popularisé en 2012. L'état des images dans le responsive webdesign Deux solutions du côté du code : l'élément <picture> et l'attribut srcset Conclusion

Le plan d’action en 7 étapes pour OPTIMISER votre site web Article invité rédigé par Marie-Eve Mouillard, du blog Les Doigts dans le Net dans le cadre de l’événement La Valse des Invités 2013. Saviez-vous que 47% des consommateurs attendent qu’une page web se charge en 2 sec maximum ? Les acheteurs deviennent distraits lorsqu’ils doivent attendre : 23% iront faire autre chose. Optimiser un site web n’est pourtant pas insurmontable ! Si votre site web a un but professionnel, améliorer son temps de chargement doit devenir une priorité pour vous. J’ai donc cherché et compilé les bonnes pratiques en la matière pour me constituer une feuille de route, en plusieurs escales. Le chemin est long et requiert de multiples compétences: j’ai donc décidé de regrouper les tâches selon leur complexité et leur temps de réalisation (comme vous, je n’ai pas une semaine à temps plein à consacrer à ce projet). Analyser objectivement la vitesse de votre site Inutile de partir dans l’optimisation avant d’avoir testé votre site avec des outils objectifs. GTMetrix Google+

Le webdesign selon les grilles Une grille est par définition un « quadrillage » composé de repères : les colonnes, véritable armature, servent à positionner les éléments à l'horizontale ; les gouttières représentent les espaces entre chaque colonne ; les marges sont aussi appelées « blanc tournant ». Surtout utilisées en PAO dans le domaine du prépresse, les marges servent à aérer le texte, il en est de même pour les marges d'une grille ; les lignes (axes horizontaux), moins récurrentes mais tout aussi importantes, servent à positionner les éléments à la verticale. Une grille a pour fonction de structurer un site Internet. Les éléments qui la composent sont parfaitement alignés et ce de façon proportionnelle. Pour finir, la grille se veut également utile dans l'adaptation de la structure d'un site Internet sur smartphone et tablette via les points de rupture qui améliorent sa lisibilité. Notez également que le nombre de colonnes impacte directement leur largeur respective. V-A. PNG ; motif ; masque. V-B.

Related: