Initializr: With Great Templates Comes Great Responsivity! | @verekia's blog Today I'm proud to announce that a "Responsive template" is now available on Initializr! It will help you dealing with all the various devices used to display your site. Mobiles, tablets, netbooks, laptops, desktop monitors, HUGE desktop monitors... About responsive web design For those who have been living in a cave for the last few months (understand: for those who have a life and don’t spend days reading tweets and blogs) you probably need a short update about what a "responsive" design is. To design a responsive layout, we have to forget about the usual static 960px width layouts and go fluid with percentage widths and media queries. A fluid layout with percentage widths The first thing our page needs is a "fluid" layout. Mobile-first approach media queries Media queries are a cool way to specify different styles depending on the device used (by aiming particular screen resolutions or orientations for example). The mobile view The intermediate view The wide view The maximum-width view
[Chat Vidéo] Les fondateurs de Napster lancent Airtime sur Facebook Sean Parker et Shawn Fanning, les fondateurs de Napster, viennent de lancer une nouvelle start-up. Baptisé AirTime, il s’agit d’un service en ligne de chat vidéo, basé sur la communauté Facebook. Sorte de Chatroulette, AirTime permet aux membres du réseau de discuter entre amis mais également de discuter avec des inconnus. En effet, Airtime propose de rencontrer les amis de vos amis, les internautes qui se trouvent près du lieu où vous vous trouvez ou encore les adeptes du réseau qui présentent les mêmes centres d »intérêts que vous. Une fois lancés dans la discussions vidéo, les utilisateurs peuvent révéler leur identité ou rester anonymes. L’atout de cette nouvelle application réside néanmoins dans le fait qu’elle ne requiert aucun téléchargement de programme. Peu avant l’ouverture du service, les fondateurs ont annoncé avoir levé près de 25M $, lors d’un tour de table animé par Kleiner Perkins Caufield & Byers, Andreessen Horowitz, Accel Partners, Google Ventures et Social + Capital.
Menu déroulant en CSS Si vous voulez avoir tout de suite un aperçu du type de menu décrit dans cette page, vous pouvez visiter notre page de démonstration. Et pour garder le script proposé au chaud sur votre PC, vous pouvez aussi le télécharger. Avec ou sans javascript ? Lorsqu'on peut se passer de javascript, il est prudent de le faire. Les principes utilisés pour créer les menus hiérarchiques sont malheureusement incompatibles avec Internet Explorer versions 6 et antérieures. Notre choix a consisté à mettre au point un menu à 2 vitesses qui fonctionne : Sans javascript pour Firefox, Opera, Mozilla et IE7Avec javascript pour IE 5.5 et 6 Ce choix permet à notre menu de rester pleinement opérationnel pour la quasi-totalité des visiteurs. Une partie de cache-cache En réfléchissant au principe de base d'un menu déroulant, vous constaterez qu'il s'agit essentiellement d'une partie de cache-cache : certaines parties en sont masquées et n'apparaissent que lorsque l'utilisateur survole le menu principal. La ligne :
Rundown of Handling Flexible Media When you take the responsive web design route, part of the deal is fluid grids. That is, container elements set in percentage widths. Just one example: an <article> that holds a blog post might be 320px wide on a small screen device and 690px wide on some large screen. Text can be resized and will flow nicely to fill a container. That's not too hard. But media - images, video players, and audio players - demand a bit more attention (e.g. a video that sticks off the edge of the screen == bad). Flexible Images If you're comfortable with IE 7 and up support. If you are caring about IE 7 support (I hope not, but I understand there are scenarios in which you must), use this to make sure the images survive the scale-down: See here for more on that. If you need to care about IE 6 (again...) this Ethan Marcotte article has a JavaScript solution. A shift in thinking There was a time in which resizing images was quite the taboo. However the bandwidth thing is still a (big) issue. Flexible Video
HTML5, où en sommes-nous ? HTML5 est né en 2004 et sa standardisation est annoncée pour 2014… 10 ans pour mettre en place la norme qui doit remplacer les nombreux plug-ins, afin d’utiliser au maximum les technologies Web natives et standardisées. Alors aujourd’hui, à 2 ans de son aboutissement, où en sommes-nous ? Est-il déjà entré dans le monde du web ? Heureusement on n’a pas attendu 2014 pour se faire plaisir. Alors si nos outils nous permettent de l’utiliser, pourquoi s’en priver ? À vrai dire, beaucoup de développeurs n’ont pas attendu bien longtemps avant de se lancer. Janel Garvin, PDG d’Evans Data, avait déclaré dans un communiqué « Il n’y a aucune question à propos de l’adoption d’HTML5 c’est déjà le standard de facto ». Les vendeurs aussi essaient de franchir le cap en soutenant ce langage dans leurs produits de base. Vous l’aurez compris, tout le monde se rue sur cette nouvelle norme, avant même qu’elle ne soit finalisée. ).
5 Useful CSS Tricks for Responsive Design Making the design to be responsive is very easy as shown in my Responsive Design in 3 Steps tutorial, but maintaining the elements to look aesthetically balanced on all breakpoint layouts is an art. Today I’m going to share 5 of my commonly used CSS tricks along with sample cases for coding responsive designs. They are simple CSS properties such as min-width, max-width, overflow, and relative value — but these properties play an important part in responsive design. View Demos 1. This responsive video CSS trick was discovered by tjkdesign.com. 2. Max-width property allows you to set the max width of the element. Max-Width Container In the example below, I specify the container to display at 800px if possible, but it should not exceed 90% of the boundary width. Responsive Image You can make the image auto resize to the max width of the boundary by using max-width:100% and height:auto. The above responsive image CSS works on IE7 and IE9, but doesn’t work on IE8. Min-Width 3. Relative Margin 4.
Using CSS flexible boxes | CSS The CSS3 Flexible Box, or flexbox, is a layout mode intended to accommodate different screen sizes and different display devices. For many applications, the flexible box model is easier than the block model since it does not use floats, nor do the flex container's margins collapse with the margins of its contents. Many designers find the flexboxes easier to use than boxes. Popular layouts can thus be achieved more simply and with cleaner code. Flexible Boxes Concept The defining aspect of the flex layout is the ability to alter its items' width and/or height to best fit in the available space on any display device. Block layout is vertically-biased; inline layout is horizontally-biased. Flexible Boxes Vocabulary Instead of talking about horizontal (inline) and vertical (block), flexible boxes use the terms main axis and cross axis. Flex container The parent element in which flex items are contained. Flex item Each child of a flex container becomes a flex item. Axes Directions Lines Dimensions
Comment Sauvegarder Les Informations De Votre Profil Facebook La sauvegarde des informations de votre profil Facebook doit constituer une de vos priorités. Pourquoi ? Parce qu’il existe de nombreuses façons de voir son compte banni par Facebook et que vous ne voulez pas prendre le risque de perdre vos données qui sont souvent le résultat de longues heures de travail. Facebook a publié une vidéo dans laquelle David, un des membres de l’équipe Open Source, nous montre comment sauvegarder les informations de votre profil. Le résultat final abouti a une page html sur laquelle figurent votre profil, votre mur, vos photos, vos amis et vos évènements. J’ai testé cette méthode et il y a toutefois une légère différence avec la démonstration présentée ci-dessus. Voici les captures d’écran correspondant à la procédure que j’ai effectuée.
Stitches - An HTML5 sprite sheet generator Drag & drop image files onto the space below, or use the “Open” link to load images using the file browser. Then, click “Generate” to create a sprite sheet and stylesheet. This demo uses a couple of HTML5 APIs, and it is only compatible with modern browsers. Drag & drop image files onto the space below, or use the “Open” link to load images using the file browser. Then, click “Generate” to create a sprite sheet and stylesheet. Stitches is developed by Matthew Cobbs in concert with the lovely open-source community at Github. Copyright © 2013 Matthew Cobbs Licensed under the MIT license. Implementation After dependencies, Stitches requires a stylesheet, a script, and an HTML element to get the job done: The sprite sheet generator is automatically created in elements that have the stitches class: If you choose, any images that are a part of the initial markup will be loaded onto the canvas: Documentation Documentation is available here. Dependencies Contributing License Download
Really Responsive Design and the Frameless Grid | Pete Wailes Many years ago, the web was a simpler place, in terms of design. After all, it’s quite hard to bring anything of visual beauty to your users, when your canvas is monospaced syntax-highlighted text, and nothing else. Thankfully, we’ve come quite a way since then, and now we can do all sorts of incredible things thanks mainly to advances in CSS & javascript. However, whilst we’re now capable of doing far more, our methods of design are often still stuck in ways of thinking that evolved a few years ago. I’ll be deconstructing some of those in this post, and wondering whether it’s not time for a new way of doing things. the controlled grid The first thing that needs tackling is our relationship with grids and grid layouts. The problem that we’ve come to confused the cause with the symptom, or rather, our method of implementation with our intended results. <div class="col col6">Column 1</div> <div class="col col6">Column 2</div> the fault, dear Brutus, is not in our stars, but in ourselves Back?
Génération Y et égalité professionnelle | Richesses Humaines | Scoop.it Publié le 12/12/2011 Attention, cet article a été publié le 12/12/2011. Ce dispositif d'archives vous donne accès à l'ensemble des publications du site FocusRH. Assurez-vous de lire les dernières dépèches et dossiers publiés en utilisant notre moteur de recherche Et si la génération Y était la solution aux problèmes d’égalité professionnelle ? « La génération Y va révolutionner les modes de travail et de vie. Compétences, envie et projet Un pari déjà engagé par les jeunes entrepreneurs de la génération Y. « La moyenne d’âge dans mon entreprise est de 25 ans, témoigne Céline Lazorthe, jeune fondatrice de Letchi.com. Des stéréotypes bien ancrés Le jeune entrepreneur reconnaît néanmoins qu’il reste des différences, « surtout à des âges où l’on commence à penser à la maternité ». Brice Ancelin Plus d’informations sur l’association Women’Up Crédits photo : Fotolia.com
On/Off Flipswitch HTML5/CSS3 Generator - Proto.io Generate pure CSS3 On/Off flipswitches with animated transitions. More freebies A bug in Opera overflows content outside of the container's curved corners. IE9+ fully supported.As IE6-8 do not support the CSS :checked selector, the switch will not reflect the "ON" state of the checkbox. Get the CSS Get the HTML Try Proto.io Free for 15 days Please contact us with your ideas, thoughts, questions or for anything else on how we can improve this tool.
[LeWeb'12] Immersion dans la maison connectée A quoi ressemblera une maison connectée à l’horizon 2020 ? C’est une question à laquelle les équipes de France Télévisions ont souhaité répondre de manière très concrète en mettant sur pied un appartement témoin futuriste. Technologie lifi, table basse tactile, jouets connectés, papier peint social, cadre intelligent, décoration interactive…. Des jouets qui parlent aux TV Le petit robot en carton, situé à droite de la télévision, permet aux parents d’établir un programme pour leurs enfants. A première vue anodine, cette peluche Emilie permet, lorsqu’elle est posée sur un coin de la table, de déclencher le programme auquel elle est liée. Une table basse tactile Développée par la start-up Sensorit en partenariat avec le CEA, cette table basse Ikea vise à remplacer la télécommande. Une batterie de capteurs disposés en-dessous du plateau permet, en effet, aux utilisateurs de contrôler leur télévision par de simples mouvements et pressions de doigts. Un papier peint social Un cadre intelligent
Astuce pour les développeurs : HTML, CSS, PHP, Mod Rewrite & SEO Se souvenir des balises Web quand on développe est souvent difficile surtout quand on ne pratique pas tout le temps certains langages de programmation. Ouf ! il existe des fiches pour se simplifier la vie … et aussi pour découvrir des balises & expressions souvent méconnues. Voici quelques fiches sur l’HTML, CSS, PHP, Mod rewrite et SEO que vous pouvez enregistrer (image jpeg – clic droit sur l’image puis « enregistrer sous »), vous verrez c’est très pratique. Voir aussi le PDF : SEO_Web_Developer_Cheat_Sheet Share and Enjoy Publié par : npcmediaClassé sous :web developer3 réactions