Front-end Developer

CSSFLY does live editing right in your browser

Vidal — Wed, 21 May 2008 12:13:15 +0000

CSSFly is a web 2.0 tool for easy editing websites direct and in real-time in your browser. Simply edit the (X)HTML-code and the external Style-Sheet files : what you code is what you get! This tool is designed for developers. Use it for developing, testing or checking your web-project or take a look behind the scenerys of your favourite websites.

Visit site

Pure CSS XHTML Banner

Vidal — Thu, 24 Apr 2008 08:28:14 +0000

Front-endDeveloper

“Pure CSS XHTML Banner” …

Grab the code below
<div style="width:100%;color:cornflowerblue;background:black;padding-top:3px; text-align:center;font-family:Georgia,Times;font-size:54px;font-weight:bold;line-height:1em;padding-bottom:5px;" onClick="top.location.href='http://www.front-end-developer.com/';"> <span title="Link naar Texturizer Filter site" onmouseover="this.style.color='white';" onmouseout="this.style.color='cornflowerblue';">Front-end</span><span style="font-family:geneva,arial;color:cornflowerblue;font-size:12px;font-weight:bold;padding-left:5px;">Developer</span></div> <div style="width:100%;background:cornflowerblue;text-align:center;font-size:small;font-family:system,geneva;font-weight:bold; "> “Pure CSS XHTML Banner” …</div> <p>

53 CSS tutorials anyone can do

Vidal — Thu, 24 Apr 2008 08:03:54 +0000

There are many advantages to designing with Cascading Style Sheets. CSS is extremely easy to learn and rework once a basic site framework has been established. Websites, or website components can easily be changed into something totally different just by swapping a single CSS file, or a line within a CSS file.

CSS designers always seem to have a few different elements that they commonly use over and over in all designs, these can include navigation elements and form fields, among other items. Smashing Magazine has compiled a list of 53 CSS Techniques that you couldn’t live without, linking out to tutorials on CSS navigation, tabbed navigation, bar graphs, rounded corners, hover effects, image map, submit buttons, custom bullets, and sidenotes. Whether you are new to CSS, or have been in it for a while, these are some great tutorials to have archived as reference materials.

How will you use the power of Web 2.0

Vidal — Wed, 23 Apr 2008 13:57:12 +0000

The 2008 edition of Web 2.0 Expo is now underway in San Francisco. Check out all the highlights from the show:

Web 2.0 Expo SF Brochure

Download the Web 2.0 Expo San Francisco Brochure (PDF)

Attending Web 2.0 Expo? Use some of the networking tools to connect with other attendees while you are here.

Please note: Online registration for Web 2.0 Expo San Francisco is now closed. Please come down to Moscone West and register on-site.

Web 2.0 technologies are empowering us in ways we could only have imagined even just a few years ago. We’re able to build more, connect more, have more fun, sell more stuff, share more than ever before—and do it all faster. But as the pace of change and innovation accelerates, separating signal from noise, useful from annoying, genuine from fluff becomes increasingly challenging.

What tools and applications are right for a given project? How can we provide a more meaningful experience for users and customers? How can we have a positive impact on the world we live in? What are the ways we can create more value for our businesses? How do we gather and focus datapoints to deliver relevant information? How can we increase conversation and collaboration?

The second Web 2.0 Expo San Francisco takes the pulse of the Web ecosystem and looks to its future, training a spotlight across the Web 2.0 universe to illuminate how the Internet Revolution is being created and delivered. Web 2.0 Expo is for the builders of the next generation web: designers, developers, entrepreneurs, marketers, business strategists, and venture capitalists, people who have experiences to share and a passion for learning–the hot new thing, lessons from failures, innovations and inspirations, and the practical applications of all of the above. What will you do with the power of Web 2.0?

Experience Web 2.0 Expo

A companion event to the Web 2.0 Summit, Web 2.0 Expo is an expanded, inclusive gathering for the technology and business communities through a combined conference and tradeshow. Read more about Web 2.0 Expo San Francisco

Web 2.0 Expo San Francisco happens April 22-25, 2008 at Moscone West. Whether you’re new to the Web 2.0 world or an expert or in Ajax, Ruby, tagging, the social graph, user experience, meta-programming, search engine marketing, community building, web operations, user-generated content, building startups from scratch, or “Web2.0-ifying” the enterprise, come to Web 2.0 Expo San Francisco and immerse yourself in the Web 2.0 experience.

Tracks at Web 2.0 Expo San Francisco 2008:

In addition to on-stage sessions, keynote presentations, workshops, panel discussions, and demos, Web 2.0 Expo San Francisco will provide ample opportunity for all participants to engage face-to-face:

A vibrant Expo Hall bustling with essential products, tools, services, and projects at the cutting edge of technology
Launch Pad, an opportunity to publicly unveil new companies and products
Web2Open, a space where any participant can lead a conversation with other attendees
Expo Booth Crawl, parties, and other fun networking events

The inaugural Web 2.0 Expo San Francisco attracted 8,500 attendees from companies and organizations like:
Adobe Systems, America Online, American Greetings Interactive, Apple, BA Venture Partners, BP, Centers for Disease Control, Discovery Health Media, Dow Jones, EMC, Experian Interactive, First Round Capital, Hitachi, Ltd., Hummer Winblad Venture Partners, IEEE, Intel, Intuit, Jet Propultion Laboratory, Labrador Ventures, MTV Networks, Magazine Publishers of America, McGill University,, Merrill Lynch, Monster, Motion Picture Association of America, Nokia, North Bridge Venture Partners, Northrop Grumman, RealNetworks, Simon & Schuster, Standard & Poor’s, Sun Microsystems, The Heritage Foundation, The Wall Street Journal Online, Turner Broadcastings Systems Inc., University of Richmond, University of Southern California, Walt Disney, WhitePages.com, and many, many more.

Top-10 design mistakes in web applications

Vidal — Wed, 16 Apr 2008 10:31:49 +0000

According to Jakob Nielsen, these are the 10 most common usability violations found in web applications:

Non-standard interface controls, such as home-grown scrollbars
Inconsistency in the way things work, appear and are labelled across the app
No providing proper affordances that give people visual clues about what they can do with an object (e.g. that they can drag-and-drop an object)
Not giving proper feedback about what is happening
Bad error messages that don’t tell what went wrong and how to fix it
Asking for the same information twice
Not providing defaults (e.g. in a list of radio buttons)
Dumping users into the app without giving them an idea of how it works
Not indicating how collected information will be used
Offering system-centric features that reflect the system’s internal view rather than the users

And generous as Jakob is, he also has a bonus mistake: Reset buttons on web forms.

Links:
Top-10 Application-Design Mistakes

Top 10 accessibility mistakes

Vidal — Wed, 16 Apr 2008 10:21:51 +0000

Here’s a nice top ten of things not to do when building accessible sites:

Don’t use verbose ALT text. ALT text for information-based images
should be short and succinct. Decorative images should never have ALT
text.
Don’t use random characters, such as vertical bars, to separate links
Don’t insert text into form fields
Don’t use access keys as they can override keyboard shortcuts for screen readers
Don’t use table summaries (unless there isn’t sufficient information provided about the table on the page)
Don’t forget content organisation. Structure text properly with short
paragraphs, headings, lists and plain and simple language.
Don’t worry too much about writing accessibility help pages since they won’t really be read
Don’t agonise over acronyms and abbreviations
Don’t change the tab order (unless you have a very good reason)
Don’t forget to listen with a screen reader

Links: 10 common errors when implementing accessibility

Submit Your Blog to 100 Directories With Good Google Page Rank For Free With No Reciprocal Link Needed

Vidal — Wed, 16 Apr 2008 09:16:50 +0000

If you are building links for your blog to improve your Google Page Rank and Search Engine Position, submit your blog to these 100 Directories for free. The list is sorted according to their Google page rank. And the best part of it is that there is NO NEED FOR A RECIPROCAL LINK.

When you submit your blog, use keywords and key phrases relevant to your blog that you wish to rank high on search engines result page.

Top 9 CSS and HTML validation services

Vidal — Fri, 11 Apr 2008 07:09:39 +0000

Tools and services to validate css / html / code.

Walidator.com : front end to most common official validators
Markup Validation Service : Markup Validation Service by W3.org
CSS Validator : CSS Validation Service by W3.org
CSSCheck : CSS validator at HTMLHelp
Feed Atom and RSS Feed Validator : Atom and RSS Feed Validator at FeedValidator.org
HTML Validator : online validator by CSE
HTML Validator : HTML validator at HTMLHelp
Page Valet : SGML/HTML validation
LIFT Online 5 Pages Free Trial : html and accessability validation at UsableNet

Top 17 CSS Lightbox Variations

Vidal — Fri, 11 Apr 2008 07:04:01 +0000

CSS techniques to overlay images on a webpage.

Lightbox JS : Original; a simple, unobtrusive script used to overlay images on the current page.
Greased Lightbox : Greasemonkey/Creammonkey/Opera user script designed to enhance browsing on websites that link to images such as Google Image Search, Flickr, Wikipedia, Facebook, MySpace, and deviantART.
GreyBox : A pop-up window that doesn’t suck.
Greybox Redux : Completely unobtrusive - no need to embed Javascript into your site.
Leightbox : uses inline div’s instead of AJAX calls.
Lightbox Plus : by Takuya Otani
Lightbox Gone Wild : at ParticleTree
The Lightbox Effect without Lightbox : by PJ Hyett
LITBox 2.0 : modified Thickbox made into a Prototype class based off of the Scriptaculous.
Multifaceted Lightbox : at GregPhoto
Prototype Window Class : at Xilinus
Suckerfish HoverLightbox : hover + gallery + lightbox at MondayByNoon
Thickbox - One box to rule them all. : by Cody Lindley
Slightly ThickerBox : Thickbox with Prev and Next links at Jasons Toolbox
WP lightbox JS WordPress plugin : Wordpress Plugin by Safirul Alredha
Lightbox2 : Wordpress Plugin at m3nt0r - beyond the net
GreyBox Plugin : Wordpress Plugin at aNieto2K