background preloader

TUTORIALS

Facebook Twitter

10 htaccess Hacks Every SEO Should Know | There’s a lot that you can do with an htaccess file, and of course, things can get pretty advanced in a hurry. Here, we’re going to keep things pretty simple. These are the 10 basic htaccess hacks that every webmaster should know. 1. Force Caching with htaccess Use: The following htaccess code won’t help the initial pageload, but it will significantly help subsequent pageloads by sending 304 status when requested elements haven’t been modified. FileETag MTime SizeExpiresActive on ExpiresDefault "access plus x seconds" I generally set the cache for one day (86400 seconds). ExpiresByType image/gif "access plus x seconds"ExpiresByType text/css "access plus x seconds" Simple! 2. Use: I think this one is self explantatory. ErrorDocument 404 /notfound.html 3. Use: If you have permanently changed the URL structure on your site (via either optimization change or CMS migration), you will want to implement 301 redirects from the old URL to the new URL.

The syntax for a basic 301 redirect is: 4. 5. 6. 7. CSS - Conditional comments. Page last changed today Conditional comments only work in IE, and are thus excellently suited to give special instructions meant only for IE. They are supported from IE 5 up until IE9 (inclusive). Older IE versions frequently need some extra CSS in order to show your pages right. Conditional comments are the best way to add this CSS, since the system is explicitly designed for this use case.

If you need special styles for IE10 or up you’ll have to find another method, since conditional comments were disabled in IE10. However, these versions are much less buggy than the earlier ones. Conditional comments work as follows: <! Their basic structure is the same as an HTML comment (<! Below I added a lot of conditional comments that print out messages according to your IE version.

Note that conditional comments were removed from IE10, so IE10 and up will not understand the test. Below are a few conditional comments that reveal the IE version you're using. The syntax I use is: <p class="accent"><! <! Script Junkie | Respond to Different Devices With CSS3 Media Queries. As a hater of horizontal scrollbars, I’ve always been intrigued by layout design that resizes with browser windows.

And as a lover of usability and accessibility, I have a keen interest in layouts that resize with text resizing. So when fluid/liquid and elastic design became the trendy web topics in the mid 2000s, I experimented alongside every other bandwagon jumper. What I discovered was 1) I still suck terribly at math 2) the lazy designer in me much prefers the “known” parameters of fixed design and 3) while both elastic and fluid design were heading in the right direction, they had their limitations: Without setting max-width (which isn’t supported in < IE7) values, line-lengths can become unreadable in fluid layouts.Elastic designs don’t resize unless text is resized. Using both fluid and elastic together was an acceptable compromise, but the design “flexibility” was limited to size … font size, image size and layout size.

A Device Deluge Responsive Design With Media Queries Testing. ASCIIMathML: Math on the web for everyone. Would you or your students like to easily produce good-looking math formulas on webpages using a simple calculator-style syntax and your own ASCII or HTML editor? Here is a free multi-platform solution (and if you prefer it, LaTeX-style formulas also work). Now even easier to use: just add one line to your HTML file to load ASCIIMathML.js ASCIIMathML.js is mentioned on the MathML page of the World Wide Web Consortium , also on The Math Forum. New: MathJax 2.0 has been released and now comes with an ASCIIMath input jax ! ASTEX by Michael Ziegler is loosely based on ASCIIMathML/LaTeXMathML and extends them to work in most browsers as well as with 3d graphs, quiz questions and code-highlighting A german translation of the ASCIIMathML homepages. The STIX fonts have finally been released (download and select STIXGeneral as default font in Firefox).

This page requires Internet Explorer 6 + MathPlayer or Firefox/Mozilla/Netscape. Let's test the ASCIIMathML.js translator on a simple example. Writing math formulas in HTML | molecularsciences.org. Horizontal Centering - CSS Tutorials. Centering Absolutely Positioned Elements With Unknown Width Time to put your seatbelts back on, IE's expanding shrink wrap bug is here to hunt us again. Example 6 LoremIpsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum! Lorem Ipsum! HTML Code <div id="container"><div class="outer"><div class="inner"><p> LoremIpsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum<br><img src="smiley.png" alt="Lorem Ipsum" width="35" height="35"></p></div></div><div class="outer2"><div class="inner"><p> Lorem Ipsum!

CSS code condcom code First of all it's important to understand the difference on how left and right properties affect absolutely and relatively positioned elements. So what problem does it create to us? Normalizing Your CSS to Gain Total Control Over your Styles. NOTE: This is a bit of a mental health warning for web design beginners and could save you some time and some unnecessary wrinkles when you’re starting to code your own web pages. When I first began coding websites using HTML and CSS, I remember running into endless problems with the way my CSS styles would render in web browsers.

Countless hours were wasted while I tried to get to the bottom of why my header was 40 pixels wider than I wanted it to be, or why I always got that annoying dashed line around my links when I clicked on them. Grrrr! Admittedly, I had no idea what I was doing back then and I was going through the extremely painful process of teaching myself web design whilst actually running a web design business. Back in the Day Nowadays, we have the advantage of the excellent Google Chrome browser, along with other good, quick and reliable browsers such as Firefox, Safari and Opera. The Revolution inShare3. MySQL for Absolute Beginners.

Tutorial by Matt Doyle | Level: Beginner | Published on 25 August 2011 Categories: Never used MySQL before? Start here! This tutorial walks you through the very basics of MySQL and SQL databases. Learn how to install MySQL, how to issue commands, and how to create and use databases. A database is an essential part of most websites and blogs, but setting up and using a database can be a daunting task for the beginner web developer. In this tutorial you'll learn — in simple terms — how to install, set up, and use a MySQL database on your computer. You'll explore the following areas in this tutorial: The concept of a database, and why databases are useful The advantages of using MySQL to manage your databases How to install MySQL on your computer Using the MySQL Monitor program to send commands to your MySQL server How to create a database and table SQL (Structured Query Language), and what it's used for Adding records to a table, and retrieving records from a table What is a database?

Database. Touch Examples. Webgl: tutorial, news, esempi e articoli su HTML5 Today. Www.blindog.com eMail Blast HTML Basics. About HTML tags and basic page formatting. This is a short tutorial on the basics of HTML for creating and sending out email blasts. While the ability to save any document as HTML is now native to many applications, it still helps to know the basics in case something goes wrong.

By learning the short list of commands outlined in this tutorial you will be able to add simple text formatting, add an external link, add images from the server, add an email link, and test your email before sending out. You can create your email blast in any text editor application your are most familiar with. Remember that not all email clients support HTML formatted messages. This tutorial will cover the following:

Make Your HTML Email 5&frac12; Times More Mobile Friendly. Let's face it, ask most designers what their dream project would be and I bet none would mention designing and coding HTML Email. Designing email has a special place in my heart and I am excited to communicate with people through this challenging medium. So here's 5½ improvements you might consider making when you revamp or greenfield your next template. Note: This article is a guest post by Josh Rubinstein. Why should you care? From the time we rise until the wee hours of the night our smart phones are never far from our opposable thumbs. Despite the proliferation of "umpteen" social networks, email still tops out as one of the most common tasks we perform while on the go or at our desks.

The Concept of "The One Web" represents a shift in thought towards "democratically" publishing online content to a range of devices. One HTML template for them All I didn't want to depend on CSS3 media queries for content scaling. Tip #1: Design all "clicks" to be touch friendly! "You have mail" Demo. Creating Effective E-Blasts | sallyu. E-blasts are a great way to communicate with your customers about specials or new information about your products or services. If you have shopped online or signed up for emails from a business, chances are you receive e-blasts on a regular basis.

They are eye-catching emails sent out to a group of contacts to inform or create a call to action. But don’t just start emailing everyone in your address book or you may turn away customers. Here’s what I suggest: Find an e-blast service to manage contacts, analyze statistics on the effectiveness of your message, prevent SPAM, conduct surveys or polls, and create interesting e-blasts. Build up your contact base and make sure to categorize them well for optimal targeting. iContact offers a sign-up form you can create with your own custom fields. Keep your e-blasts brief, yet informative and interesting. Make sure you highlight the call to action. Test the e-blast prior to sending. Also test for spam ratings. Respect unsubscribe requests. Related. Assorted GARbage» Blog Archive » Updating jQuery and jQuery Mobile in Dreamweaver CS5.5.

Holy Javascript Libraries, Batman! In case you’re keeping score, Adobe began shipping Dreamweaver CS5.5 less than two weeks ago with support for jQuery and jQuery Mobile. But, the versions included in Dreamweaver, jQuery 1.5 and jQuery Mobile 1.0a3, are already out of date! Because before you could even get your copy installed, the jQuery team released a significant upgrade to the core jQuery library – version 1.6. Along the way, the jQuery Mobile framework has also been updated to version 1.0a4, which includes several important bug fixes. So, if you are a Dreamweaver user and you want to develop jQuery Mobile sites and applications with these updated versions of the libraries, what are you supposed to do?

Update your libraries, of course… here’s how… Before proceeding, you’ll obviously want to go grab the updated libraries themselves. Arguably one of the most powerful features of Dreamweaver is its extensibility. Inside this folder, you’ll find the jquery-mobile folder. Aggiornare PhoneGap in Adobe Dreamweaver CS 5.5 « Andy’s Blog. L’integrazione di PhoneGap all’interno del nuovo Dreamweaver CS5.5 è una gran comodità. Tuttavia PhoneGap è un progetto sempre in movimento: la versione attualmente inclusa in dreamweaver è la 0.9.5.1, ma è già disponibile la 1.0. Su MacOsX è possibile eseguire l’aggiornamento all’ultima versione semplicemente sostituendo alcuni file. Ecco un come fare: Scaricare l’ultima versione di PhoneGap da il file scaricatoInstallare il pacchetto per IOS.

Una cartella PhoneGapLib verrà creata in Documenti.Aprire una finestra del Finder e andare in /Applicazioni/Adobe Dreamweaver CS5.5/Configuration/NativeAppFramework/DWPhoneGap/: sono presenti le 2 cartelle, Android e iPhone Per aggiornare la versione iPhone (e iPad): Entrare nella cartella iphoneCopiare in PhoneGabLib il contenuto di ~ /Documenti/PhoneGapLib L’aggiornamento di Android è leggermente più lungo: Finito! Mi piace: Mi piace Caricamento... Introduzione alla programmazione web per designer. Per un designer la programmazione web dovrebbe essere affrontata con molta serenità. La difficoltà maggiore sta nella differenza esistente tra il design e la programmazione. Il design si basa sulla soggettività, le emozioni e l’interiorità.

La programmazione, al contrario, sull’oggettività, le azioni e gli effetti esteriori di queste ultime. Tale differenza si può capire meglio se si considera il design come espressione di un pensiero complesso, laddove la programmazione è l’espressione di un pensiero binario. Nel design una scelta può essere valutata sotto diversi aspetti, mentre in programmazione ci sono solo due cose da considerare: la scelta funziona o non funziona.

Guardate questo codice: if(resource) { } Questo codice testa se la variabile resource ha un valore booleano uguale a true o meno (quindi false). Ora guardate questa immagine: Questa immagine suscita emozioni, genera sentimenti di piacere, attrazione, interesse, repulsione eccetera.