Nov
16
What you need to know about CSS
08:32 pm
Style sheet is a progressive breakthrough for the advancement of web. Today, more and more browsers are implementing style sheets, opening authors’ eyes to unique features that allow influence over presentation while preserving platform independence. The advantages of style sheets have become – apparent — and the disadvantage of continually creating more HTML tags — galore — for presentation effects with the gradual development of CSS.
Let’s understand CSS in the right perspective.
Style sheets in retrospect
Style sheets have been around in one form or another since the beginnings of HTML in the early 1990s .
As the HTML language grew, however, it came to encompass a wider variety of stylistic capabilities to meet the demands of web developers . With such capabilities, style sheets became less important, and an external language for the purposes of defining style attributes was not widely accepted until the development of CSS. Read more
Filed Under CSS | Add comment
Aug
21
Stylesheets Advantages
08:22 am
Because you are able to create a separate Stylesheet and link it to all your webdocuments, you have great control over how your website looks. So if you want to change a certain aspect of your page, you only need to alter one file: your Stylesheet!
This Of course, generates some great flexibility. This flexibility is not available when your website is using tables for layout, inline font tags or inline defined colors.
A single CSS file can contain positioning, layout, font, colors and style information for an entire web site.
2. You site uses less bandwidth and loads faster
Because stylesheets are so lightweight, your website will load much faster. The main reason is because you do not need table layouts anymore for the positioning of elements. Since text loads really really fast your website will be visible in a flash.
This means that visitors will be happier when surfing your website. They only have to download the Stylesheet once, and it’s automatically reused for every page. So the only thing that needs to be loaded is the actual content.
On average a website will load five to ten times faster if it makes use of cascading style sheets.
3. Your website will automatically gain better search engine results
With CSS, you can position any element, anywhere you want. So if your menu is at the bottom of your HTML document, you can bring it up using absolute positioning. The reason this is useful is to make sure the search engine spiders pick up the main content first.
Another advantage you automatically gain is that your HTML code is much cleaner. So the search engine spider will not have to separate the junk code from the real content.
So make sure you put your logo text and your menu at the bottom of your HTML document at put it at the top using CSS!
4. CSS is compatible with newer browsers
Because more and more browsers are used other than Internet Explorer on a Windows machine, you need to be sure that your website is accessible by all major and newer browsers.
By using webstandards, defined by the w3c, you are making sure your content is viewable in the future.
Because there are so many browsers these days, it is impossible to test your website in all these browsers on different configurations. Coding to standards is then the only practical solution.
5. CSS can be used to display the same content on different media.
Because you are able to define different stylesheets for different media you have great flexibility in presenting your content.
The printer for example, is a medium on itself. If someone prints out your website, you will be able to modify the look of it. Add an extra black and white logo, remove the advertisements and change the colors to black and white values. It’s all done easily by using cascading stylesheets. And the best thing is, visitors do not even have to know you created a new Stylesheet especially for the printer.
Stylesheets can also be created specifically for PDA’s and such. As you will understand, this adds some great flexibility to the presentation of your web document.
Conclusion
Cascading Style Sheets are created to make things easier. It gives you great control of your website and makes your visitors happy when they are surfing your website.
You are prepared for the future and will gain better search engine results automatically. Start using CSS to its full potential today! It will suit you well.
Filed Under CSS, SEO Tips and Tricks and Web Layout Design | Add comment
Aug
02
Make stylish web 2.0 horizontal menu
01:37 pm
After we finished the tutorial we need to create 2 simple images to style our CSS navigation bar: A background image (the light blue bar) and a transparent button that indicate the active state, all other elements are created with CSS.
Like in most CSS horizontal navigation bars an unordered list is used to hold the menu items:
With the next CSS code it’s possible to style the horizontal navigation bar:
#container {
width:800px;
height:600px;
padding:20px;
}
ul#navbar {
background:url(/tutorials/web20_css_bar/backgr.jpg) repeat-x left top;
margin:0;
border-bottom:3px solid #98CB00;
border-top:1px solid #00CCFF;
list-style-type:none;
height:31px;
}
ul#navbar li {
float:left;
}
ul#navbar li a {
display:block;
padding:5px 15px 4px;
font:bold 16px "Trebuchet MS";
text-decoration:none;
color:#00CCFF;
letter-spacing: -0.1em;
}
ul#navbar li a:hover {
color:#98CB00;
}
ul#navbar li a#current {
background:url(/tutorials/web20_css_bar/current.gif) no-repeat center bottom;
color:#98CB00;
}
We placed the background image behind ul element and added the two borders to the top and bottom. The li element is defined as a floated block element and got some padding to create a bigger button. The last definition is for the current state, which will show up the tri-angle. You need some server-side code (php) to get a dynamic position every time a different page is loaded.
The source files can be downloaded here.
Filed Under CSS, HTML Tips and Tricks and Tutorials | Add comment
Mar
01
CSS Layouts Vs. Table Layouts
11:24 pm
CSS Layouts Vs. Table Layouts - Alternate Browsers and Accessibility IssuesWhen developing a web site one can choose between creating a CSS-based or TABLE-based web site. Both types of layouts have advantages and disadvantages and perform quite differently. They also raise (or address) accessibility issues.
This article will try to focus alternatively on each layout and point out the course of action for web developers employing either of them so as to improve the accessibility of their website.
TABLE-based layouts
Tables have been used in designing web sites for a very long time. Yet, even today, with the multitude of browsers available, many compatibility and accessibility issues rise to the surface. All these issues must be addressed in order to ensure a web site is completely functional to all users including those using alternate browsers.
Facts about web sites using tables
- They’re easy to use and implement (compared to css-layouts).
- WYSIWYG (What You See Is What You Get) editors like Frontpage and Dreamweaver make it very easy for developers to include them.
- Tables “break” on various browsers (newer and older versions) thus producing layout dysfunctions.
- Increase almost unnecessarily the HTML/text ratio. This means that other options could be used to create layouts that produce smaller page files by employing less HTML tags.
We see tables being used on over 95% of the websites on the net today. We see them being used on web sites with heavy content like news sites as well as on simpler sites like corporate sites or educational sites.
Among the many issues related to tables, the most disturbing one (for users as well as web developers) is browser compatibility. Among the most common browsers today, we see Internet Explorer, Netscape, Opera and Mozilla. However, there are several versions of each on the market. This means that web sites should be tested on as many versions as possible in order to obtain an accurate compatibility analysis.
During the compatibility analysis we see that on other browsers than Internet Explorer the table layout “breaks”. We see gaps that should not be there, or weird positioning of cells or even thicker rows or columns than intended. Such issues require a lot of extra effort and time on the developers’ part to fix. Strangely enough, a table layout can even look broken on Netscape 6.x due to the DOCTYPE declaration at the beginning of the source file.
Admittedly, the developer can not always be accountable for layout dysfunctions. There are numerous bugs all browsers have that can cause that.
When using WYSIWYG for designing a web site the risk of “bloating” the source code with unnecessary tags (or invalid tags for that matter) rises significantly. The less experienced web designers are faced with having to fix what a software broke.
Text browsers, screen readers and speech output browsers read the source code line by line and then render it to the user. If cells aren’t linearized, meaning that when reading Cell1, Cell2, Cell3 and Cell4 the content does not read in a logical flow, then the information becomes difficult to retrieve for disabled users. The above mentioned situation can occur when you have navigation in Cell1 and Cell3 and content in Cell2 and Cell4.
Alternative browsers will also have difficulties rendering content properly if the layout uses tables within tables or table cells. This would break up the logical structure of the page.
———————
CSS-based layouts
CSS or Cascading Style Sheets have been used until now for text formatting but recently, developers have started using it for positioning and layouts. CSS layouts are still difficult and time-consuming to implement but their advantages are certainly worth the trouble.
Facts about CSS layouts
- Widely supported by modern browsers but not by older browsers
- Allows extreme flexibility in positioning
- Increases usability by encouraging liquid design
- Keeps the HTMl/text ratio at a low level thus decreasing load time
- Allows the display of main content first while the graphics load afterwards
Although almost all modern browsers have good CSS support, older browsers are at a disadvantage. However, on older browsers a CSS-based layout still proves to be usable by displaying navigation and content at the beginning of the page.
By making use of its flexibility, developers can easily create layouts that expand as much as the screen allows it. Another advantage is that by changing a single .css file one can completely change the aspect of the site, making it perfectly suitable for screen or printing.
Because of increased positioning options, the main content can be placed at the top of the source code. This causes the information to display first and leave the bandwidth consuming elements to load at the end. This proves to be much more usable for users because they do not have to wait for an entire table with content and graphics to load as it happened with TABLE-based layouts. Users have now to wait much less before the relevant information is displayed..
Increasing accessibility through CSS
Graphic intense sites or those that employ elements that prove inaccessible to disabled users can put CSS to good work by placing all these elements at the bottom of the source code. This way, normal browsers will render the layout properly for normal users, letting them enjoy the visuals while alternate browsers will easily render the simplified, informational content to disabled users.
Using CSS can also avoid accessibility issues raised by table cells. When creating CSS-based web sites the content flows logically without disruption.
Filed Under CSS, HTML Tips and Tricks and Tutorials | 1 comment
Mar
01
12 Steps to become a better Web programmer/designer
02:13 am
Whether writing server-side, client-side, or regular-old-markup, you need to develop some debug muscles. Errors are an incurable side effect of human programming, and when they pop on your screen, you can probably hear your bank account draining. Become an adept debugger and you’ll write cleaner apps, in shorter time.
Bigger Debuggers in 12 Easy StepsConsidering how much time we all spend debugging, it is ironic how rare a topic it is in books and conversation. So how does one become a better debugger? Hopefully, the twelve guidelines I’ve compiled here will help you squash bugs faster, smarter, and with more authority.
1. Organize your code.
Let’s face it, building websites isn’t rocket science. If you’ve been at it for 6 months, you’ve probably developed some sort of methodology. All sites share common elements, pay attention to what they are and re-use code as much as possible. Organize your code and includes so you know where everything is.
The W3C is pushing standards that separate content from structure; you’ll find adopting this philosophy helps when debugging as well. Some general guidelines:
- Code once, include often. I’ll say it again, organize your code so you know where everything is. Strive to have no duplicated code on your site.
- Externalize client-side scripts.
Put all CSS and JavaScript into external includes. Your pages will load faster, as the scripts will go into the browser’s cache. Also, you’ll be able to disable all your JavaScript or all your CSS more easily. Resist the temptation from the darkside, never code CSS inline or write javascripts willy-nilly through your pages. You’ll be happy later when you want to either turn it all off, or export it to another project.
- Refine it.
Every website gains features through the development cycle. When a complex project reaches the 75% complete zone, it is usually begging, pleading, and bleeding for a rewrite. Try to take the 2, 3, maybe 4 days it will take to go back through your code and refine it when it feels out of hand. Don’t be the type of a developer that has an FUNW folder for an inbox. Try to build in as much scalability as you can from the start.
2. Isolate and identify the problem.
This is the key to all debugging, and a close cousin of code organization. The problem code block must be identified, and identified quickly. If you’re debugging-while-developing (DWD), you know the first place to look is the code you were just working on. If you’re debugging-while-updating, or wading through someone else’s work, isolation becomes more difficult.
- Trust no-one.
Your first suspect should be the machine you’re testing on. Is the error totally bizarre? Does another, known to be working page serve OK? Computers crash all the time, and test boxes that kick more errors than successes all day will tend to crash more. If you test on a *nix box, you probably find this paragraph funny. If you’re on Windows, reboot your test machine at least once a day.
- Believe the error message.
If you’re reasonably sure your machine is stable, look for clues in the error message. It’s funny how those messages make sense afterwards, isn’t it? Line numbers in error messages are almost always wrong, but are invariably the best place to start looking. Head backwards from the line number reported, and check the nesting of that segment. When you can’t find the error, comment out sections of your code until the error stops popping. Then cut and paste the problem block into a separate template for surgery.
3. Validate your code.
Make the validator your home page. Writing valid HTML of some flavor is an excellent first step in error prevention. If you’re new to validation, start with 4.01 Transitional. There are also many standalone tools available, the W3C maintains a list here.
4.View the source code.
When you’re working server-side, many times you can find problems faster by viewing what came out, rather than looking at what went in. Check the output, test variables using HTML comment blocks, or use a simple JavaScript alert to dump server-side variables. If you’re dealing with a variable that changes throughout the page, output it several times.
5.Be the layout master, not the master layouter.
When dealing with a layout problem, first determine if it is an HTML or CSS problem.
- View it naked.
Try disabling CSS, that is, if you have it in external files.
- Preview in many browsers.
Test in whatever browsers and resolutions are appropriate throughout the entire project. Don’t wait until the very end to discover your client’s V.P. uses AOL 2.0 on an Amiga with a 13″ monitor. HTML with syntax errors usually renders inconsistently across browsers, so if you see this behavior, inspect your HTML. Repeat step 3, and make sure your HTML validates.
6.Man-handle forms
Everyone hates forms. If you don’t, you haven’t done enough multi-page checkouts yet. Bulletin boards everywhere are crawling with people having form trouble, and it’s almost always related to bad-HTML or a misnamed field.
- Dissect the form elements.
Break down the form into small chunks until you find the problem. If you’re using the POST method, does the page even submit? How about with one variable? Same for the GET method, can you pass at least one variable and have it show in the URL of the target page?
- Name fields sensibly.
If the form fields correspond to table columns in a database, use the same names for both, or adhere to some naming convention. Always build and debug server-side validation before introducing any JavaScript validation.
7. Write clean queries.
An extremely typical data-driven website scenario: You write a query in whatever, and then try to output the results. Sounds fine, but how often do you actually test the query output in its entirety? A good cabinetmaker measures twice, and cuts once. Most programmers measure a little, and hack it with an axe until it fits.
- Isolate the SQL.
Cut and paste your SQL into its own template and run it there. Can you output anything? Write a function in your favorite server-side scripting language that auto-dumps complete result sets for you, so you can test them before you try to output them on your pages.
- Declare all columns.
Never write SELECT all FROM table, name your fields explicitly. Even if you need every column in the table, naming them will help your templates become self-documenting.
- Run it at the source.
Websites usually connect to databases through ODBC or some other method. At the first sign of trouble, run the query in its native program if possible.
8. Organize your variables.
Keep your local variables in a structure or array. If you store all your local variables in one object, it is much easier to dump their values onto the screen as a whole, which is an invaluable tool when debugging.
- Keep your ducks in a row.
Every server-side language has a method for outputting complex datatypes. Store your local variables in an array or structure so you can dump them onto the screen. You might create a special footer, triggered by a URL variable, which dumps your local variables. Never put this sort of code on your live server.
- Avoid reserved words.
RTFM and find out what the reserved words for your favorite languages are. Errors caused by reserved word misuse are difficult to diagnose, prevention is the best medicine.
9. Proceed slowly, preview often.
When you first started coding, you probably previewed every H1, and scrutinized every images Typically, the more experienced programmers become the more code they’ll write before previewing.
- Go slow.
Try to find a comfortable amount of coding before previewing, so that you have a manageable chunk to work through when there’s a problem. In my checkered past, I have painted houses for money. I once worked with a guy that seemed to move in slow motion, but at day’s end he had always done the most work.
- Work methodically.
Whether you like to bring all elements of a site to the same point simultaneously, or like to finish each section as you go, decide what you’re going to do and stick to it. Do the hard parts first, and save the easy stuff for when you’re sick of the project.
10. Mirror your test and production setups.
If you’ve ever uploaded files to the server with a local path unchanged, take off your left shoe and eat it. The feeling is right up there with sitting in the Principal’s office, or locking your keys in your car.
- Mirror the server setup.
Though not always possible, the advantages of having the same physical drive and folder setup as your production box are huge, and can save you hours of heartache and sweat drenched ftp sessions.
- Use absolute paths.
Consider using absolute paths as much as possible. Avoid using the base tag, as it will inevitably lead to disaster. A long long long time ago, I uploaded a site with a base tag set to 127.0.0.1. Can you guess what happened? Everything seemed fine when I tested the uploads, because the live site was referencing my local machine. Whatever you do, don’t mix absolute and relative paths choose one and avoid the other.
11. Work like a debugger.
Make your work environment work for you. I like to hog as many machines at once as possible, coding on one and previewing on the others.
- Keep your reference books handy.
- Make sure you have video games and sugar water within reach.
- Tell noisy people to shut their pie-holes.
Nothing clears a room like great music. If Sun Ra doesn’t drive them out, I highly recommend Charles Ives’ Fourth Symphony.
- Become an alt-tab, or alt-arrow ninja.
Windows does a nice job of keeping track of your recent selections, so tabbing between your editor and browser(s) is a quickly learned skill. Soon you’ll be tapping: alt-tab, ctrl-r, alt-tab, rinse and repeat. And if you’re GUI-ridden, use your keyboard to navigate drop-downs in your programs, it’s faster than playing with your mouse.
12. Don’t waste time, take a break, ask for help!
Don’t spend more than 5 minutes trying to fix something (unless you’ve really done it this time).
- Take a break.
Work on something else for a while, work on nothing for a while, beat your head in with a hammer, and come back to the problem later.
- Don’t go it alone.
Sometimes a fresh set of eyes can pick up a missing semi-colon faster, so don’t be afraid to ask for help when you get jammed. If you work alone, find a mailing list or bulletin board you like.
Flex Those Debuggers
Hopefully, this article has gotten you to think about how you debug, which may in turn get you thinking about how you construct your web applications. As programmers, we feed our bottomless curiosities with small victories, and fuel our fires with the burning cinders of lift-off catastrophes. So get out there, write a whole heap of errors, and be proud when you bomb the whole server.
Filed Under CSS, HTML Tips and Tricks, Tutorials and Web Layout Design | Add comment
really fresh and nic poem …..