HTML

HTML Fadein Fadeout: Basic Javascript/AJAX Tutorial using jQuery’s fadeTo

Tuesday, April 13th, 2010 | Business, Tutorials | 4 Comments

In this tutorial we will review:

  • Basic document jQuery preparation
  • Binding  jQuery actions to an anchor (A) tag
  • Fading In and Fading Out html elements with Javascript/AJAX

› Continue reading

Tags: , , , , , , , , ,

Apple’s iPad / iPhone HTML5 Bet: HTML5 Drawing App Proves Capabilities

Sunday, February 7th, 2010 | Business | 3 Comments

Recently I’ve been posting on HTML5 versus Flash.  Many people who are not familiar with HTML5 may not know exactly the amount of power that has been provided with the new spec.  HTML 4 was nice, and a big upgrade, but I believe HTML 5 will be an even larger upgrade over HTML4.

The reason we are talking about HTML5, is Apple seems to be placing their bets on it.  Apple continues to refuse to have Flash running on their controlled devices (iPhone, iPad, etc) and seems to be pushing for HTML5 to take over.

We are slowly having to rethink the capabilities of the “HTML” platform that we have grown to know over the past 15 years. › Continue reading

Tags: , , , , , , , ,

IE6 and IE7 limit CSS links to 30

Saturday, August 15th, 2009 | Business | 1 Comment

Help!  Working in Drupal and having trouble getting stylesheets to work?  Did they break all of a sudden in Internet Explorer only?

I can’t see my stylesheets anymore in IE6 or IE7!

Internet Explorer limits the number of stylesheets included with a LINK tag

That’s right.  If you include an additional CSS file beyond 30, it will break other CSS files.

This problem is only in IE6 and IE7.  Officially I’m sure Microsoft says the fix is to upgrade to IE8.

What code causes the problem? Perfectly valid code below:

[sourcecode language=’html’] [/sourcecode]

Just repeat that 31 times, and you will see an error.

The Solution

While <link> tags may have issues beyond 30 stylesheets being included, you can cheat with using @import.

For example, include CSS using the following instead:

[sourcecode language=’html’]

[/sourcecode]

If you’re working in Drupal, there’s a module that implements this fix for you, IE Unlimited CSS Loader.

Tags: , , , , , , , , ,

How do I use transparent PNGs in IE6: Using AlphaImageLoader

Tuesday, March 10th, 2009 | Tutorials | No Comments

Internet Explorer is a tough beast.  It was very popular years ago.  Unfortunately, it’s still in use in out there.

This site, www.seangw.com, has a fairly technical crowd.  We still see approximately 3% of our visits from IE6 (Firefox is the most popular at 64%, then IE7 at 14%, Safari at 10%, then Chrome at 5%).  

I don’t believe IE6 should be supported anymore.  In many jobs, that isn’t our decision to make.  We can recommend ignoring IE6 specific issues, but should do so intelligently:

  • Identify the current IE6 audience (knowing it will probably decrease over time)
  • Approximate the cost of supporting IE6 (depends on what you are trying to do)
  • Present the pertinent information to the client, and let them make an informed decision
  • You should tell the client what you feel, but make sure they understand the difference between emotion and facts

Note: If your client makes $1,000,000 online every year, ignoring that minor 3% audience means possibly ignoring about $30,000 in revenue.  Math is enlightening sometimes.

At that, you are here, and STILL want to do transparent PNGs in IE6.  

How to implement transparent PNGs in IE6
It’s pretty standard the method for implementing transparent PNGs in IE6 by now.  

This method is for implementations in CSS (you are using CSS, aren’t you?).  

Frequently I find myself making a quick browser detect for IE6 (since there are oh so many issues that only affect IE6).  I use basic IE conditional comments:

<body>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />

<!-- [if lte IE 6]>
<link rel="stylesheet" href="styleIE6.css" type="text/css" />
< ![endif] -->
</head>
<body>
</body>
</html>

There you go, now when you setup your styles in style.css and realize they don’t work in ie6, edit them in styleIE6.css to get them working again.

Assuming you defined a logo in style.css as follows:

#logo {
  width: 300px; 
  height: 150px;
  background: url(images/logo.png) no-repeat left top;
}

You will find that the PNG does NOT work in IE6.

The fix is easy, we tell IE6 to use the Microsoft DXImageTransform AlphaImageLoader to render the PNG. So we add an IE6 specific change ot the styleIE6.css file:

#logo {
  background: transparent;
  filter: progid:DXImageTransform:Microsoft.AlphaImageLoader(src='images/logo.png', sizingMethod='scale');
}

There you go. It should work now.

The background: transparent thing tells the browser to ignore the originally defined background used in the original CSS document.

Tags: , , , , , , , , , , ,

Adobe and Apple working together for Flash on the iPhone

Sunday, February 1st, 2009 | Business | No Comments

I know, can you believe it?  All this drama, and we find out they’re both amicably working towards a solution.  

Saw it on Apple Insider, Adobe, Apple working together on Flash for iPhone.  

Seems like it was announced recently.

Apple Insider mentions that Apple has been trying to tout HTML 5 as a replacement to flash on the iPhone.  I know HTML 5 has some cool toys in it, but not nearly enough to meet why people demand Flash on the iPhone — because everyone is already USING flash on the web.  Saying you provide a desktop like browsing environment and not including Flash is a big deal to me.

This made me happy to read (except the HTML 5 part).  Hope you enjoy the news too!

Tags: , , , , , ,

jQuery 1.3 Released – How to use jQuery

Thursday, January 15th, 2009 | Business | 10 Comments

jQuery is a “fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.  jQuery is designed to change the way that you write JavaScript.”

jQuery version 1.3 was released yesterday.

Some new features in 1.3 are:

  • Sizzle – a brand new CSS selector engine
  • Live Events – event delegation with a jQuery twist
  • jQuery Event Overhaul – simplified event handling
  • HTML Injection Rewrite – Lightning-fast HTML appending
  • Offset Rewrite – Super-quick position calculation
  • No more browser sniffing!!
  • New API Browser – http://api.jquery.com/

I have yet to play with jQuery 1.3, but will post my impressions after I get some hands on time with it.

Are you new to jQuery?
jQuery is a library that you can include on your web projects.  jQuery enables HTML and JavaScript developers to rapidly deploy functionality that traditionally is more complex.  Through browser independent APIs, developers and designers can implement event handling, CSS changes, animations, popular web 2.0 effects, or other common function of web 2.0+ sites. 

Downloading jQuery
You can get jQuery by going to jQuery.com and downloading the version of jQuery you want:

  • Production version – 18kb – Minified for production environments (don’t try to debug this, its a nightmare)
  • Development version – 114kb – Developers can go in and see how things work with this version, but the footprint is huge

Getting Started with jQuery
jQuery provides a series of useful tutorials.   

Some favorites are:

There are so many more tutorials out there.

Tags: , , , , , , , , , , , , , , ,

Favorite Software for Web Development

Wednesday, December 3rd, 2008 | Business | 1 Comment

Sometimes when you start out doing something on computers, it seems so hard until you get the tools that everyone else uses.

In this post I’m asking everyone else for feedback, what do you like to use?  Go ahead and comment it in there, I’ll add it to the article as I see em.

Below are some of my favorite pieces of software for web development, some will be very obvious (Flash, Photoshop, etc.) … some maybe not so much:

TextPad
I love textpad for basic text changes from everything PHP, to HTML, to writing notes.   It’s great to have multiple documents, line numbers, quick global / file / local search and replaces etc.  I use this when I’m working with source files, XML definition files, CSS files, to CFM or other formats.  I love it.  

HomeSite
Those of you who know homesite, will know it’s pretty much gone nowadays.   The heyday was many years ago.  The direct FTP editing was amazingly useful.  It has some features that I still go back to now and then.  Mostly search and replace functionality, FTP based editing (right on ther server … mostly), document formatting (code sweeper), and other utilitarian functions.  

CuteFTP Pro
Working on the web, we all are in constant use of FTP (more so than we should be).  Cute FTP has always been a staple of my software toolbox.  It’s so easy to launch connections to all the FTP servers you use throughout the day, keep them open for jumping between projects.  The number of protocols it supports is flexible (FTP, FTP w/ SSL, SFTP, HTTP, HTTPS, etc.), and it always seem to be able to connect.  The speeds and setting are highly configurable.  It’s nice having 50 simultaneous downloads going at a time.

Tortoise SVN
Whoever isn’t using SVN, should be using SVN (or CVS or whatever other version control system you can think of).  Tortoise SVN is an essential windows interface enhancement to integrate SVN into the file browser.  For those of you who use CVS, there’s a Tortoise CVS as well.  It is easy to look at version histories, compare files based on modification dates, and to pull down new updates.  

Subversion
Source control is underutilized in my experience.   So many sites aren’t run with source control.  Think of the advantages: automatic source control, automatic offsite backup (if you use an external host — which I would love to recommend svnrepository.com, a very cheap hosted SVN repository).  Read about it, get used to it, it will save a project.

Eclipse
You were waiting for me to say it weren’t you?   An open source IDE.  Technically it started as a Java IDE (most Java developers should be intimately familiar with this).  Thanks to add-ons developed by the community, it supports, quite adeptly, PHP and other web development technologies.  It has built in SVN support, supports deployment scripts… its amazing.  Try it, explore the community around it.  Check out the Subclipse add-on, as well as the Web Developer Tools, and Eclipse XML Editors and Tools.

Adobe Flash (Adobe Creative Suite 4 Design Premium)
Pretty much a no brainer, you need Adobe Flash to develop flash.  It’s a great tool, worth every penny.

Adobe Photoshop (Adobe Creative Suite 4 Design Premium)
Another obvious one.  Photoshop is a requirements for all web development.  No, you shouldn’t be doing web design work as a developer.  However, there is always the need to look at colors, size things, cut up images, process original artwork, the list goes on forever.  I really recommend the Adobe Creative Suite, we use almost all of the software anyway.  

Microsoft Word (Microsoft Office)
You will always need this (or another decent word processor).  Yes, you can get by without it.  However the sheer amount of things Word can handle: Estimates, Proposals, Letterheads, Envelopes, Labels, the list goes on and on.. you will wish you had it someday.

Microsoft Excel (Microsoft Office)
Another one that you don’t always think about, but excel makes writing estimates so much easier.  You can update your entire estimate based upon a new discount, manage hours, track changes.  I’ve used Google’s online spreadsheets before – they are great.  But they aren’t fully able to replace excel yet. 

Microsoft PowerPoint (Microsoft Office)
Those proposals are much better with an accompanying presentation. Tell your clients what you do, what they need, in a way that can impact people in a conference room.  Everyone yawns when it comes to yet ANOTHER powerpoint presentation, but you look unprofessional without one in most cases. 

MySQL
Normally this is on a hosted platform, but you need a database to do the cooler web development projects.  MySQL is cheap, but if you want you can substitute in Microsoft SQL Server, or even Oracle.  In my experience if you know why you want MS or Oracle, you can pay for them.  If you don’t know why you want either of those, just go with MySQL.  

PHP MY Admin
Administration software is just as important as the backend engine, at least for development.  It lets you manage a database online, easily, and export simply.  If you haven’t used it, try it. 

SQL Server Management Studio
Another tool for development on SQL servers.  Same as PHP My Admin, arguably much more helpful, but it is a client app.  If you’re working with Oracle, or prefer these desktop applications to the PHPMyAdmin web interface — check out Aqua Data Studio

There are really dozens more tools I consider very useful.  Not exluding:

– Versions of all browsers
– VPN Connectivity software
– Remote Desktop
– VNC Client
– pcAnywhere (not so much anymore)
– Outlook / Email Client

Last but not least, is Google.  It is the best tool you will have when working in web development.

Tags: , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

CSS3 Layout Structure

Monday, November 10th, 2008 | Business | No Comments

Looking over a few articles, I ended up on CSS Advanced Layout Module, a Working Draft for CSS3 on w3.org.

We’ve covered some changes to HTML/CSS parsing in IE8 that will make some standard web layouts much simpler to represent in CSS, CSS in IE8 will support “tables”, fixes problems in CSS.

The new document addresses, in a different method, the problem of laying out tables as most websites are built.

Again, standard CSS makes it difficult to allow text to push the template in the proper directions.  Pushing itself is fine, however the way the rest of the template adjusts to the content — normally doesn’t react as a end user would expect.

The new document details a way to dictate display in a template.

The first interesting point is the document proposes a way to define the rows in a display.  The example provided defines a container, DL, which has a display of “ab” “cd” (in that order).  This means that cell A is top left, B is top right, C is bottom left, and D is bottom right.  This makes life so much easier.  To follow, the elements inside DL are defined as, for example, “#sym1 { position: a}” and “#lab1 { position: b}”.  Suddenly tables are much easier to work with.

Secondly, this opens up functionality the draft has addressed.  The ability to change the display to move the document from 3 columns, to 1 column / 3 rows.  By defining “@media all and {max-width: 500px}” the draft identifies the ability to change the “ab” “cd” to “a” “b” “c” “d”.  Adjusting for a mobile browser, or other alternative browsers (maybe iframes friendly?).

Additional concepts addressed in the draft:

  1. Overlapping divs with the earlier display methodology
  2. Table like declarations of width, wrapping, etc
Lets hope this gets passed and incorporated (or just incorporated into a browser, as browsers seem to be slightly ahead of w3.org in terms of accepting drafts).

Tags: , , , , , , , ,

CSS in IE8 will support “Tables”, fixes problems in CSS

Wednesday, October 22nd, 2008 | Business | 1 Comment

There’s a great article at Digital Web Magazine, Everything You Know About CSS Is Wrong.

One of the problems that has always plagued CSS is absolute positioning, relative positioning, and the need to set things up like a “table”.  By that I mean setting up three divs to look like the following:

 

In the image above you will see the classic problem, code for a talbe structure like this would look something like:

<div class="outerContainer">
<div class="textContainer">... longer text ...</div>
<div class="textContainer">... shorter text ...</div>
<div class="textContainer">... shorter text ...</div>
</div>

The problem here, being that if the first text container grows, we want the other 2 containers to grow with it.

Obviously, we could specificy a specific height for the textContainer class, and they would all match.  But what if the first container copy grows, or maybe the copy in the 2nd or 3rd container grows longer than the first container.

This becomes even more complex when specificying multiple rows of textContainers, where there are vertically spanning cells as well.

In traditional “non-css” HTML this was done simply through tables, very simply actually.  Now that everyone has turned to CSS to make page sizes smaller, make styling effective, and increase flexibility of layouts — we try to avoid tables unless we are presenting a .. Table.

Normally I would have created a clever background image that has a top, bottom (both divs above and below the textContainers), and a tiling vertical background to appear like all columns have the correct sizing (when in fact they don’t).  Effectively removing control over each textContainer’s background, and the main container’s background from the CSS and putting it into a series of images.  

It worked but we sacrificed flexibility.

Take a look at the article, again, Everything You Know About CSS Is Wrong, as they detail how IE8 aims to fix this behavior through a series of CSS display properties.

Tags: , , , ,

Protect Client Search Engine Placement with 301 Redirects

Wednesday, October 15th, 2008 | Business | 2 Comments

This is a big win for us web developers.  It helps maintain all the SEO work that has gone into a site, and lets us move site architecture around with minimal impact.

Many times I run across companies whose website just went from ASP/CFM/JSP/PHP/CGI/HTML/HTM to ASP/CFM/JSP/PHP/CGI/HTML/HTM.  Fill in the blank, migrating from one platform to another is a big deal.  To make matters worse, how is a search engine supposed to know NOT to link to an old file, and to redirect the same relevancy to the new file?

The magic of 301 Redirects

301 is an HTTP Status code (just like 404 and others, 403, 500, etc).

301 tells browsers and search engines that a page has been “Moved Permanently”

 

How can you do a 301 redirect?

First off, do NOT attempt redirecting unless you know specifically what to do.  Trying to implement a meta-refresh tag will hurt you more than it will help.  Search engines have become wise to the meta-refresh game that spammers have been involved with.  Do not do it.

There are 2 routes to take, server side, and code side.

 

Server Side 301 Redirects

If you’re lucky enough to be working on a server supporting .htaccess files, your life is easy.  

  1. Create a file called “.htaccess” in the root of your website
  2. Open the file in a text editor
  3. Set the contents to the following (replacing original, and new):

Redirect 301 /original/original.html http://www.yoursite.com/new/new.html

OR if you want to wildcard it:

RedirectMatch 301 (.*)\.htm$ http://yoursite.com$1.html

If your server is IIS, you can do a redirect with the following:
  1. In IIS (internet services manager), right click on the old file
  2. Select “a redirection to a URL”
  3. Enter the URL for the new page
  4. Select “The exact URL entered above” and “A permanent redirection for this resource.”
  5. Click “Apply”
Code Implementation of 301 Redirects (PHP, ASP, JSP)
Of course a 301 redirect can be implemented in the front end code for a specific file.  That can be done fairly effectively with very basic code.
Following are some examples of redirects in some popular languages:
PHP header( "HTTP/1.1 301 Moved Permanently" );
header( "Status: 301 Moved Permanently" );
header( "Location: http://www.newsite.com/" );
exit(0);
 
ASP response.setStatus(301);
response.setHeader( "Location", "http://www.newsite.com/" );
response.setHeader( "Connection", "close" );
 
JSP response.setContentType("text/html");
response.setDateHeader("Expires", 0);
response.setHeader("Location", "http://www.newsite.com/new.php");
response.setStatus(301);
Of course if you want to get fancier, you could create a script that automatically detects the page name and derives the new page name from that string (example done in JSP):
HttpServletRequest req1=(HttpServletRequest) request;
StringBuffer ReqUrl= req1.getRequestURL();
String RequestUrl=ReqUrl.toString();String source;
String str; 

source = RequestUrl;

str = source.substring(0, source.indexOf(".jsp"));

response.setContentType("text/html");
response.setDateHeader("Expires", 0);
response.setHeader("Location", str+".php");
response.setStatus(301);

Conclusion
That’s it.  It should be easy to move pages around from one platform to another, to a new domain, or a new directory structure.
Your clients will thank you, and it will save you the work of redoing all of your SEO work down the road.

Tags: , , , , , , ,


Please share, it makes me happy:

Subscribe to Email Alerts

Follow Me

Follow seangw on twitter

Archives

Categories

prestashop theme

virtuemart template