background preloader

CSS3 + Progressive Enhancement = Smart Design

CSS3 + Progressive Enhancement = Smart Design
Progressive enhancement is a good thing, and CSS3 is even better. Combined, they enable designers to create lighter, cleaner websites faster and easier than ever before.. CSS3 can do some pretty amazing stuff: text shadows, rgba transparency, multiple background images, embedded fonts, and tons more. It’s awesome, but not all browsers are up to snuff. As designers, it’s up to us to decide which browsers to support for our projects. Among these generalized strategies, the second approach comes closest to the concept of progressive enhancement. A Quick Example Consider a basic layout done with good ‘ol CSS 2.1 and HTML 4.01. basic layout and compositionbackground, border, and font colorsfont families, styles, and transformationsbasic styles for HTML elementsdecorative graphics, link styles and so on The idea here is to begin with a nice, well-styled presentation that looks good in even archaic browsers like IE6. CSS 3 and Progressive Enhancement Do More with Less Code Sound good? Box Sizing ↑

An Analysis of Typography on the Web Typography is one of the most—if not the most—important aspects of web design. Some would argue that it takes up to 95% of web design, so why do we often neglect its importance? The readers who come to your site will often decide whether or not to stay according to your typographic choices. After all, they came here to read in the first place. In fact, even some font names suggest that classification; Futura, Optima, Times New Roman (OK, that's probably a dude), Verdana, Lucida, Georgia, Helvetica… There's no question about it, Typography is the queen. Not sure what I'm talking about? Knowing Your (sans) Serifs Before proceeding with this article, and especially if you don't have much contact with typography, I suggest you fill the gaps of your Typographic knowledge from Typedia, taking special note of Typeface classifications and the anatomy of a typeface, which will serve you well when making your own font-stacks and pairing fonts. Tightening Wisdom #1: Typefaces Relate (P.S.

40+ Useful HTML5 Examples and Tutorials HTML5 examples can be really good inspiration for anyone starting a new web project, after all it is the future of web page markup and we all need to prepare for it. HTML5 is being developed as the next major revision of HTML (HyperText Markup Language). The major market and Internet leaders are already switching to the HTML 5 platform. With Apple and Google both pushing the standards in order to facilitate more advanced web development, we now see HTML 5 implementations popping up all over the place as more companies get on board with the advanced features. With the constant drop of Flash usage in web and Internet applications, HTML5 is opening new doors to web designers and developers. Keep in mind that besides coding your own web site from ground up you can also kick start your project using a WordPress theme. Advertisement Let check out some HTML5 Examples HTML 5 Demos and Examples This site have HTML5 examples all over the place and good ones too. HTML5 Web Applications

20 HTML Best Practices You Should Follow Most of the web pages you encounter is presented to you via HTML, the world wide web’s markup language. In this article, I will share with you 20 best practices that will lead to clean and correct markup. 1. Always Declare a Doctype The doctype declaration should be the first thing in your HTML documents. I would recommend using the XHTML 1.0 strict doctype. 2. The <title> tag helps make a web page more meaningful and search-engine friendly. Take for instance, the following example: <title>Six Revisions - Web Development and Design Information</title> The example above appears like the following image in Google’s search engine results page: 3. Meta tags make your web page more meaningful for user agents like search engine spiders. Description Meta Attribute The description meta attribute describes the basic purpose of your web page (a summary of what the web page contains). For example, this description: Shows up in Google’s search engine results page as follows: Keywords Meta Attribute 4. 5. <!

20 Things I Learned About Browsers and the Web Let’s Call It a Draw(ing Surface) You are here: Home Dive Into HTML5 Diving In HTML 5 defines the <canvas> element as “a resolution-dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly.” A canvas is a rectangle in your page where you can use JavaScript to draw anything you want. So what does a canvas look like? Invisible canvas The markup looks like this: Let’s add a dotted border so we can see what we’re dealing with. Canvas with border You can have more than one <canvas> element on the same page. Let’s expand that markup to include an id attribute: Now you can easily find that <canvas> element in the DOM. var a_canvas = document.getElementById("a"); Simple Shapes Every canvas starts out blank. Click to draw on this canvas The onclick handler called this function: function draw_b() { var b_canvas = document.getElementById("b"); var b_context = b_canvas.getContext("2d"); b_context.fillRect(50, 25, 150, 100); } And then there’s this Every canvas has a drawing context Paths path .

Protection par htaccess Sauf indication contraire les pages d'un serveur Web sont accessibles depuis tout l'Internet. Il est cependant tout à fait possible de restreindre l'accès à une page ou à un ensemble de pages, d'un serveur. Ces restrictions peuvent être gérées selon différents critères : l'accès peut être réservé à des utilisateurs appartenant au même domaine ou au même sous-domaine. (la notion de domaine doit être prise au sens TCP/IP). il peut être réservé à des utilisateurs référencés en possession d'un mot de passe. Il est important de noter que la notion de username/password est complètement indépendante des comptes Unix ouverts au niveau de la machine serveur (/etc/passwd). La description des méthodes que nous allons faire s'applique à un démon HTTPD de type NCSA installé sur une machine Unix. Avant toute chose, il est indispensable que le serveur que vous utilisez permette ce type de mécanisme. que vous pouvez bien sûr modifier si vous administrez votre propre serveur. ou mieux : Un exemple

Drupal development begins with basic ingredients that follow a common recipe | Drupal Development - Flexibility To Web Design Drupal customization, Drupal application development, Drupal development and Drupal integration are a lot more like cooking. Mostly, it all starts with the basic same ingredients and usually follows common recipes. However, where one ends up as a final product matters a great deal on the techniques, tools and the secret recipe you work with. Below is a list of some of the Drupal development, Drupal customization, Drupal integration and Drupal application development tools that help develop, manage and maintain a Drupal site. 1. 2. 3. 4. 5. 6. Drupal customization, Drupal development, Drupal integration and Drupal application development being an open sourced means the code utilized to run the platform could be modified, copied and shared with others. The open source of Drupal gives users a great degree of flexibility for sharing, modifying and distributing content. Like this: Like Loading...