60 Not To Be Missed Web Development Articles - June 2008 Web Builder Zone
Join the DZone community and get the full member experience.Join For Free
The web is a world of constraints, the materials of HTML and CSS flex and give in ways that encourage particular styles. And being able to understand and bend within that scope is what makes a design feel native. Designers who work directly with the materials rather than through simulated environments like Photoshop are at a distinct advantage for making that happen.
Web sites are the most vulnerable, and therefore the most hacked, bits of technology on the Internet. Enter Snort, a free and open source Network Intrusion Prevention System (NIPS) and Network Intrusion Detection System (NIDS) tool for managing and preventing intrusions to your Web sites, applications, and Internet-enabled programs. Learn how Snort can protect your sites, as well as analyze what's really going on with your networks. By the time you're done, you'll be ready for some of the more advanced intrusion detections that Snort offers, and for optimizing your site and network based on the information that Snort provides.
This standards-based, data-driven Eclipse plug-in generates forms that adhere to the XForms 1.0 standard, using as a starting point either Web Service Description Language (WSDL) documents or XML instance documents having optional XML Schema backing models. The generated forms adhere to the XHTML and XForms 1.0 standards and can be viewed in popular XHTML and XForms renderers.
Last week we looked at how some browsers and plug-ins were adopting storage-related API's that are a part of the new HTML5 draft specification. While Gears, Opera and Webkit have implemented structured storage API's, the remainder of the HTML5 spec currently remains mostly unimplemented and also in a state of flux. HTML5 is a super-sized effort to bring all the browsers under a single, standard markup language and set of API's - but with Microsoft, Adobe and others racing ahead with their own next-gen web technologies, will we ever see a real HTML5 standard?
Take a look at any CSS-based website design gallery, and you'll see it's obvious that beautiful interfaces are being designed and developed in amazing quantities. I frequently look to these sites for inspiration and, beyond a nice design and beautiful code, there's usually something common about these sites: they're new. Unfortunately, it's also common that beautiful interfaces don't stay beautiful. An interface's design disintegration can be frustrating to deal with, especially for the designer and developer of that interface; it can be particularly frustrating for the designer and developer who can no longer access the site to fix the issues.
Ideas. They're at the heart of every creative process. However, almost no really good ideas are flashes of inspiration. They may start that way—a single glimmer of something special—but in order to work, they need to be honed. Like a really good cheese, they need to mature. Indeed, the "flash of inspiration" idea—the Eureka moment—is only part of a longer process that, if ignored, will see most ideas simply fizzle out.
In this article I will explore the DOM, look at some common kinds of errors that are found in the DOM and how different debugging tools can be used to find such DOM errors and make sure that the DOM is interpreted consistently across browsers. Along the way, I'll introduce Opera Dragonfly, the new kid on the web development debugging block, and show how it performs.
When designing a UI we usually go right from a quick paper sketch to HTML/CSS. We skip the static Photoshop mockup. Here are a few reasons why we skip photoshop...
The CSS Friendly Control Adapters 1.0 override the default HTML generated by the ASP.NET Web controls to provide a more standards-based approach to presentation via CSS. I will show you how to use the Menu control in your ASP.NET applications. I begin with an examination of setting up the environment for using the CSS Friendly Control Adapters in your applications.
I haven't sat down in a long time and actually tried to determine a trend in the Java web framework arena. The uncountable number of "easy to use" Java web frameworks that are out now adays is too many to even start to pay attention to. Struts 1 came out at a perfect time in history... where your only choice was either hand-coding everything or Struts... and most people went with Struts.
Everyday the forums see probably hundreds of topics posted where the problem is a fairly simple error. These generally fall in 4 categories:
- Syntactical/parse errors
- Fatal errors, warnings and notices
- Database errors
- Logical errors
As a beginner, it can be difficult to find and solve these errors. By tackling each of these in turn, I hope to teach you some methods of finding and solving them. So we'll get started with syntactical errors on page 2.
Building a web application with Google App Engine is quick and easy, and you have the power of the google distributed content delivery network and the 'BigTable' database at your disposal. So what's it good for?
This is the first in a two part blog series titled 'Taming the Beast: How to test AJAX applications". In this part we discuss some philosophies around web application testing and how it should be done the 'right' way. In part 2, we walk through a real example of designing a test strategy for an AJAX application by going 'beyond the GUI.'
About a year ago, I compiled a huge list of artistic sites. It seems like the trend has carried on in 2008 and is growing stronger (thank God the glossy style is gone). So what's hot now? Pencil sketches, handwritten notes, card stocks, watercolor effects, collage art, script fonts, grungy and splatter ink backgrounds (glossy gradients are not "in" this year). Another trend to be on the lookout for are the vintage and retro styles which I've posted earlier this year. Here is a list of 82 sites picked from Best Web Gallery that show the current design trends.
I have revisited adding Yui compressor into my work's ant build script to minify JS and CSS scripts. The current jar was yuicompressor-2.3.5.jar . It took a lot of playing around but I finally stumbled on how to get it to work. Here is the snippet for the yuicompressor. I had to jump through a couple hoops like overriding the current js/css scripts with the optimized js/css scripts. I'll release a full working copy in a zip, you can run against your webroot. We achieved an average 18% compression rate for all our js/css files.
Looking for free blog icons or website icons? I created 30 free icons for anyone needing small pixel icons: 15 16x16 icons and 15 matching 10x10 icons. Download them all or by each size via the ZIP files within today's post.
Since my previous free blog icons giveaway has been so popular, I decided to create more - this time 30 free icons in a monochrome, silvery metal color scheme that will blend well with a wide range of blog theme colors. Like before, these small pixel icons include: 15 16x16 icons and 15 matching 10x10 icons. Download them all or by each size via the ZIP files within today's post.
My friend Richard recently came to me with a simple CSS question:
"Is there a way to make a background image resizeable? As in, fill the background of a web page edge-to-edge with an image, no matter the size of the browser window. Also, have it resize larger or smaller as the browser window changes. Also, make sure it retains its ratio (doesn't stretch weird). Also, doesn't cause scrollbars, just cuts off vertically if it needs to. Also, comes in on the page as an inline <img> tag."
Wow, that's a tall order. My first thought was... uhm, No. But of course this is just the kind of challenge I enjoy, so I set about to thinkin'. Ultimately, I found a pretty good solution and we turned it into a pretty neat little project. First, check out the finished project, then I'll show you how it was done...
Much like CSS3, widespread adoption for the next-gen web languages is a distant mirage. Still, it is important to stay educated on these things and even participate in these early stages while things are still malleable. Rather than re-hash everything here, here is a roundup of articles talking about the two major new "competing" formats. There is also a new poll in the sidebar where you can cast your vote as to which one you prefer at this point, or if you just don't care.
There are two popular approaches to positioning with CSS: float and absolute positioning. Both approaches have their pros and cons. My teammates and I have developed a new positioning approach that gives us the best of both worlds. After quite a bit of experimenting and testing, it's time to share the technique with the rest of the world and see how we can work together to improve it. I'm calling it "faux absolute positioning" after the faux columns technique that simulates the presence of a column.
Wicket is a lightweight, component-oriented framework that does much to bring the easy, intuitive interfaces found in desktop applications to Java Web development. In this series Nathan Hamblen introduces key aspects of Wicket that differentiate it from other Web application frameworks. If you're new to Wicket, this series will serve as an accessible and engaging introduction; if you're already using the framework you'll have fun with the well-crafted, hands-on exercises. This first article investigates Wicket's virtual state, demonstrating the many ways Wicket accommodates both stateless and stateful Web application development.
Say you need to upload a set of 100 pictures on Flickr everyday. Not so difficult: you login to your Flickr account and start to manually upload the pictures. After a few days though, you start to feel a bit weird about having to spend all this time to manually upload files at an era where computers, after all, are supposed to replace us for repetitive tasks. Say your daily sets of 100 files are prepared in advance: wouldn't it be great if your computer could upload them to Flickr on its own?
Last week we looked at web forms and we observed what was happening under the hood in terms of requests and data transferred; as an example, we tried to emulate a specific web form through a PHP script which sent a request to the web server and parsed the result to extract relevant information. The conclusion was: it's possible, but it's not clean. This week we'll see how transparent automation can be.
Anyone who has spent time developing URL rewriters will know that these do not always play nicely with AJAX components. This is because the HtmlForm element written out by .NET uses the actual URL for post-backs, and not the page's virtual URL that you are trying to preserve. This article discusses how this can be resolved cleanly, and also shows how control adapters may be set programmatically using Reflection. This is useful for creating plug & play components such as URL rewriters in order to minimise the amount of configuration required.
Ivan Bozhanov walked us through his jQuery-based tree component recently. The state of trees out there is interesting. YUI! has a nice, stable tree control but Dojo's once feature-rich tree has been replaced with a fairly basic tree (i.e., doesn't appear to have in-line editing and drag-and-drop still seems flakey; Dojo guys, correct me if I'm wrong) at the moment and jQuery UI lacks an official tree component (though a few tree plug-ins are out there); as you might expect, Ext JS has a nice tree component. Let me highlight a few areas where jsTree stands out. First, it has some basic features that many trees out there lack
Recently, a designer asked us where users expect to find the sign-in box on a web page. Some sites put it on the left and some put it on the right. Has our research shown that one position is better than alternative positions?
A question like this brings up a bigger question of designing for the user's expectations. On the one hand, users, being neither new to the planet nor new to technology, have developed expectations on where certain things should appear. Designing to those expectations can reduce the user's cognitive load and let them focus on their task.
As enablers of online conversations between businesses and customers, Web forms are often responsible for gathering critical information—email addresses for continued communications, mailing addresses for product shipments, and billing information for payment processing to name just a few. So it shouldn't come as much of a surprise that one of the most common questions I get asked about Web form design is: "How do I deal with international addresses?"
This document has been prepared to help HTML developers and others who are familiar with the Web Content Accessibility Guidelines Version 1.0 (WCAG 1.0) to map their current knowledge and practices with the WCAG 2.0 W3C Candidate Recommendation of 30 April 2008.
This is now the 3rd part of my current adventures in looking into CSS performance and how it performs in various states across various browsers.
Well it took me a lot longer than I had originally expected but I was able to track down the original links to more than thirty PDF documents that I have collected over the past couple of years. I have personally archived every one of these files due to the high quality of content. No matter what you call them; ebook, white paper, or resource they all contain information that no designer should go without
The role of the User-Centered Design (UCD) process is vital to the success of site and/or application development yet it remains something of a foreign concept. It is also frequently bundled in with "Usability" and tacked on to the end of a project instead of taking its proper place as the underlying foundation. So, what is User-Centered Design and how should it be applied?
Response times, availability, and stability are vital factors to bear in mind when creating and maintaining a web application. If you're concerned about your web pages' speed or want to make sure you're in tip-top shape before starting or launching a project, here's a few useful, free tools to help you create and sustain high-performance web applications.
One of the most problem when the people starts coding is the needed of another to see what to do. The user guide of CodeIgniter is one of the best, okay the best, I've ever read, but sometimes the newbies needs more. Now it's my time and I'll try to explain how to do a little AJAX Login.
Well, I guess I'm going to work backwords. There are three layers to the frontend; behaviour, presentation and markup. We've done behaviour so we're onto presentational now. CSS Frameworks have been all the buzz lately, we've had ones that use python ways of code then regenerate it as css, ones that are specifically for forms and an awesome one which is just for styling print!
At the Google Developer Day conference 2008 in Sydney, Lars Rasmussen, the head of engineering for Google Australia gave an overview of the Google Web Toolkit (GWT) with his presentation "AJAX with Google Web Toolkit".
A very useful feature of Dojo is the dojox.data.ServiceStore data store. It allows you to layer a dojo.data API on top of any web service, opening up a world of uses from your own client-side components. Kris Zyp briefly mentioned the topic in his recent article on JsonRestStore, and the past couple of weeks have seen a bunch of refinements to the component to get it ready for next month's Dojo 1.2 release. Let's take a quick look at how to make it work with the web service of your choice.
I've been reading a book on Microformats, written by John Allsop. I'm not very far into the book yet, but so far it sounds very interesting. I've read a fair bit about Microformats in many blog posts, and the microformats website itself is very informative. While I understand and appreciate that microformats are important for the greater good of the internet infrastructure, as a business owner and manager of the development team, I've been struggling to find a business proposition as to why we should start using them in our website development.
In a previous tutorial it was shown how to set up the php/java bridge on Windows using the Apache webserever. In this tutorial you learn how to do the same using Windows IIS web server. Though this is a beginners tutorial you are expected to have some familiarity with IIS. Notice that the version of the PHPJava bridge
used is the older version 3.2.1. Though not the latest version this is the most Windows friendly software. It contains a dll file that surpasses the one distributed in PHP 5. There is also documentation to be found and you can ask questions about usage on the mailing list.
Want to run PHP and access Java? Here's how to do it on Windows XP using Apace and Apache Tomcat. Apache Tomcat is a Servlet container developed at the Apache Software Foundation (ASF). Tomcat implements the Java Servlet and the JavaServer Pages (JSP) specifications from Sun Microsystems, and provides a "pure Java" HTTP web server environment for Java code to run. Tomcat should not be confused with the Apache web server, which is a C implementation of a HTTP web server; these two HTTP web servers are not bundled together. Apache Tomcat includes tools for configuration and management, but can also be configured by editing configuration files that are normally XML-formatted.
Ajax enables you to retrieve data for a web page without having to refresh the contents of the entire page. In the basic web architecture, the user clicks a link or submits a form. The form is submitted to the server, which then sends back a response. The response is then displayed for the user on a new page.
"Cross site request forgery" is also known as CSRF, XSRF or just request forgery (more at wikipedia and sans.org). It's a method of attack toward web applications- Rails 2.0 introduced a defence and Rails 2.1 enabled that defence by default. Call form_for...
Our developer documentation already has a list of the new CSS features in Firefox 3. I'd like to talk in some more detail about some of the more interesting or useful ones.
When we first launched the lab, we released a jQuery plugin that automatically preloads all images referenced in CSS files. We've found the script to be incredibly helpful in developing snappy applications where images are always ready when we need them. This post describes a significant update to the script which will make it even easier to integrate in existing projects.
Welcome to the first installment of How To Write Modular CSS. In this round, we're going to cover what's probably the most important piece of this entire discussion: preparation. As with just about everything in life, designing and coding for the web is wrought with multiple methodologies — some good, most bad. This of course is my interpretation of the most useful methods, but while its based on a lot of experience, I am certain there are better ways and potentially even errors and a lot of it will be recycled information. The goal is here though is less to be revolutionary, and more to teach efficiency, productivity, and method. Most of all, I hope you'll tear down everything you find here, rewrite it, talk to me about it if you think it's crap, or ask questions if you don't understand. Better code is bred from collaboration and reinvention.
We continue to review text and source editors for designers and web-developers. After a thorough consideration of WYSIWIG- and source code editors now it's time to take a closer look at applications for advanced CSS-coding. Reason: while numerous HTML-editors offer more or less advanced CSS-support there are also allround-CSS-editors which offer a sophisticated integrated development environment for CSS-coding.
My Perfect multi-column liquid layouts that use percentage widths have been very popular and many people have emailed me asking for versions using pixel and em widths, well they are finally finished. I have also included an additional 'blog style' design.
This series of layouts use pixel and em widths and relative positioning, and they work with all the common web browsers including Safari on the iPhone and iPod touch. They're also 'stackable' so you can use multiple column types on the one page. This makes the number of possible layouts endless! Follow the links below for the demos and more detailed info
"Organization is not everything, but without organization, everything is nothing," one of my teachers used to say, and right he is. Almost everything benefits from organization, and so does work with CSS - especially when working with many people. During the years I took special care of organizational standards mainly for HTML and CSS (German readers might know the coding guidelines I created for GMX and Aperto), and there should be enough "proof of concept".
Rewind a little more than 10 years to December 18, 1997. Internet Explorer 4 had been released 3 months earlier. The Mozilla Foundation had not yet formed, and their Firefox web browser was years away from public release. There was no XMLHttpRequest... there wasn't even XML. On that day, over a decade ago, HTML 4.0 was published as a W3C recommendation.
Lately I have been very interested in how far we can take Typography only using CSS. Sure you can use images or sIFR to produce some very beautiful typography, but there is something unique and special about using only CSS. It is incredibly useful too, if you know the extent you can take CSS you end up with much more flexible websites— especially ones driven by a CMS.
As part of the framework we use at work, we borrow what we feel are the best components out there and logging is a key part of that. Logging should be simple to setup, easy to use and should minimize work on the developer. After all, you are going to do a lot of logging, right? We use Zend_Log exclusively and while I like it when coupled with Zend_Registry you've always got the following two lines of code
Opinions expressed by DZone contributors are their own.