50 Time-Saving Web Design – Developer Tools. In our field it is important to know how to do specific tasks and use creativity to achieve our goals, however it is necessary to have the right tools in order to get our aims in a more efficient way. Here you have several tools for different steps on our daily work, from scratch to production: Mock Up Tools MockFlow MockFlow is an application based on Flash which allow you to create a wireframe with simple elements to develop a prototype so you can show your concepts to colleagues and clients. The points in favor to this service are a fast wireframing tool and its collaborative purpose. FrameBox FrameBox is a drag and drop application which aloud you making fast wireframes using ui elements, resize them and even you can set layout width for making low quality prototypes for responsive web design.
Icons Iconizer This site has a collection of icons, you type on the search bar and then it retrieves you the result. Iconmonstr This is the right place for someone who is looking minimalistic icons. Code School - Try Git.
Rich interactive wireframes to define web and mobile applications. Bcosca/fatfree. Dsfc - Denis Szalkowski Formateur Consultant - Conseil et formation informatique. 5 More HTML5 APIs You Didn’t Know Existed. The HTML5 revolution has provided us some awesome JavaScript and HTML APIs. Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers. Regardless of API strength or purpose, anything to help us better do our job is a step in the right direction. I recently shared with you 5 HTML5 APIs You Didn’t Know Existed in the hope that some of them would inspire you to improve your own web apps. I'd like to share with you 5 more lessor known HTML5 APIs -- hopefully you find some of them useful! Fullscreen API The awesome Fullscreen API allows developers to programmatically launch the browser into fullscreen mode, pending user approval: Any element can be pushed to fullscreen, and there's even a CSS pseudo-class to allow some control over the screen while in fullscreen mode.
Page Visibility API var hidden, state, visibilityChange; if (typeof document.hidden ! GetUserMedia API Battery API Link Prefetching There's five more HTML5 APIs to research and tinker with. Cours d'Algorithmique - Christophe Darmangeat. PARTIE 9 Corrigés des Exercices Exercice 9.1 A ← Sin(B) Aucun problème A ← Sin(A + B * C) Aucun problème B ← Sin(A) – Sin(D) Erreur ! D est en caractère C ← Sin(A / B) Aucun problème… si B est différent de zéro C ← Cos(Sin(A) Erreur ! Il manque une parenthèse fermante Vous étiez prévenus, c'est bête comme chou ! Variable Mot en Caractère Variable Nb en Entier Debut Ecrire "Entrez un mot : " Lire Mot Nb ← Len(Mot) Ecrire "Ce mot compte ", Nb, " lettres" Fin Là, on est obligé de compter par une boucle le nombre d'espaces de la phrase, et on en déduit le nombre de mots.
Variable Bla en Caractère Variables Nb, i en Entier Debut Ecrire "Entrez une phrase : " Lire Bla Nb ← 0 Pour i ← 1 à Len(Bla) Si Mid(Bla, i , 1) = " " Alors Nb ← Nb + 1 FinSi i suivant Ecrire "Cette phrase compte ", Nb + 1, " mots" Fin Solution 1 : pour chaque caractère du mot, on pose une très douloureuse condition composée. Solution 2 : on stocke toutes les voyelles dans une chaîne. Là, c'est assez direct. Can I use... Support tables for HTML5, CSS3, etc. WebPlatform.org — Your Web, documented.
HTML. Banner. Floating a banner or content definitely increases the visibility of them. But have some limitations (which we’ll remove). In general, floating banners are used when there is no other content at their column as they are always at the "float" (position:fixed) state. This is a better & smarter solution that will float the banners when needed, re-position them and can be used in any type of banner – content combinations. And, best of all, you don’t need to set any fixed heights in the code. We’ll be using jQuery but these simple functions can easily be ported to other JavaScript frameworks.
Before reading further, here are the examples. Logic of this smart floating banners: The HTML: A standard 2 column webpage. <div class="mainWrap"> <div class="leftWrap">contents</div> <div class="rightWrap"> <div class="banner">banner</div> <div class="smartBannerIdentifier"></div> </div> </div> The CSS: The important part is, we are not setting CSS "fixed" position to the banner. JavaScript: Dependencies: P.S. 03. Body { background:none; @font-face { font-family: 'BebasRegular'; src: url('fonts/BEBAS___-webfont.eot'); src: local('âº'), url('.. font-weight: normal; font-style: normal; #logo a { background-color:#ffbdbd; article { height:100%; min-height:100%; font-size:1.2em; background:#ffbdbd; .textzone { text-align:center; margin:0 auto; display:block; width:100%; overflow: hidden; h1 { font-family:'BebasRegular'; font-size:14em; text-transform: uppercase; color:#fff; position:relative; font-weight:100; letter-spacing: 0.38em; .love { top:192px; z-index:10; .hate { -webkit-transform:skew(-50deg); color:#ff6060; font-size:9.4em; left:90px; font-weight:700; letter-spacing: 0.8em; .textzone:hover >.love { -webkit-transition: all 1s linear; text-shadow:none; top:246px; left:110px; color:#000; .textzone:hover > .hate { -webkit-transform:skew(0deg); letter-spacing:0; left:0px; z-index:20; .bg { .bg:hover { background:#1e1e1e;
Css. A Fancy AJAX Contact Form. Introduction Providing a simple and reliable means of feedback from site visitors is a crucial part of any web presence. The most simple and common feedback channel are contact forms. In this tutorial we are going to make an AJAX contact form which leverages modern web development techniques. We are using PHP, CSS and jQuery with the help of the formValidator plugin for form validation and the JQTransform plugin, which will style all the input fields and buttons of the form. For the page background we are using a fantastic dark wood texture by Matt Hamm. The form degrades gracefully, which means it is perfectly usable even with JavaScript turned off. *Edit: Also make sure you are running PHP 5. So lets start with the tutorial. Step 1 - XHTML First, we are going to take a look at the XHTML markup behind the form. demo.php As you can see from line 8, we are submitting our form to submit.php. Later you can see that we use the $_SESSION array to populate the values of the input fields.
Script.js. Like Box. Chained AJAX Selects. Martin Angelov In today’s tutorial, we will build a set of chained select elements. Selecting an option in one of them will trigger an update on the page, showing you more choices to refine your selection. We will describe the options server side with PHP, so it is easy for you to hook today’s example to a database. The idea for this tutorial was suggested by Casper Hansen from Denmark. The HTML As you can see from the screenshot below, the select box is accompanied by a title that explains what the selection is about.
The title and the selectbox are enclosed in a LI item. Chained AJAX Selects with jQuery and PHP When adding more questions, additional LIs are created by jQuery. Index.html – generated code <ul id="questions"><li><p>What would you like to purchase? You might notice in the demo page that we aren’t using the default browser select controls. The jQuery code In the code, this is achieved using two JavaScript functions: You can see them below. assets/js/script.js Great! The PHP Done.
How to use Geolocation and Yahoo’s APIs to build a simple weather webapp. Martin Angelov Today we will be using the HTML5 geolocation API to present the user with a personalized weather forecast. Using jQuery, we will issue AJAX request to two of Yahoo’s popular APIs to obtain additional geographical information and a weather forecast. This example also makes use of the wonderful climacons icon set.
Update: Yahoo have discontinued their free geolocation api, which means that this tutorial will no longer work. Obtaining an Application Key Yahoo provides a large collection of useful APIs that are free for developers to use. The Idea Here is what we need to do in order to display our weather forecast: First we’ll use the Geolocation API supported by modern browsers. Great! Weather Forecast Web App The HTML We will start with a blank HTML5 document, and we will add a reference to our stylesheet to the head section, along with two fonts from Google’s Webfonts library.
Index.html <! The JavaScript var APPID = ''; var DEG = 'c'; The full version of locationSuccess follows: