Karl Swedberg on jQuery

Next up in our series of short interviews is Karl Swedberg. Karl is the principal author at Learning jQuery and regularly presents and blogs about JavaScript and jQuery.

Editor’s Note: Karl will be hosting a workshop on “jQuery for Designers” at The Future of Web Design New York on November 16-17 2009. You can buy your ticket online now.

For designers that might not of heard of it, what is JQuery?

jQuery is a tool to help designers and developers add interactive elements to their web pages. At the risk of oversimplifying, jQuery’s core feature is a set of commands that enable you to (a) find, or create, elements on a page and (b) do something with them. It’s JavaScript that lets designers and developers avoid the hassles of JavaScript. And since it’s JavaScript, it can do all sorts of stuff without forcing a page refresh.

In your opinion why is JQuery relevant to designers?

JavaScript in general adds another dimension to design, and jQuery makes that other dimension easier to achieve. For designers who are familiar with CSS, writing simple jQuery scripts will feel quite familiar. For designers with Flash experience, jQuery provides a standards-based, non-proprietary, open-source alternative for creating some of the same kinds of effects and interactions as is often done with Flash.

For those considering your workshop at The Future of Web Deisgn New York, what kind of things will you be covering?

I’ll give a quick overview of the jQuery library, and then we’ll look at some practical ways to progressively enhance web sites for better user experiences. I’ll show some techniques for using jQuery to fill in the gaps where CSS, or at least some browsers’ handling of CSS, falls short. We’ll discuss how to put animations to good use and how to avoid their abuse. And we’ll examine a few cool plugins and see how to take advantage of their power and flexibility.

There are a number of really useful plugins available for JQuery. What are the must haves for every designer?

It depends on the needs of the site and often the demands of the client as well. One that I find myself using quite a bit is the Cycle Plugin by Mike Alsup. At its most basic, it’s a slideshow widget that shows images one at a time with a nice transition effect between them. But the plugin is incredibly powerful and gives you the ability to do all sorts of things not just with images but with written content too. It’s particularly nice where a lot of information needs to fit in a small space.

I’ve also begun using the jQuery UI plugin suite quite a bit lately. It makes creating rich user interaction such as drag and drop really easy. Its components are great, too; I’ve used the dialog, tabs, and datepicker in a number of projects.

What do you think is the Future of Web Design?

You mean other than a really cool conference, right? I’m afraid I’d end up looking like an idiot if I tried to predict the future of any technology. In some ways I suppose the future is going to look all too familiar until we can get rid of the albatross of certain legacy browsers. Still, it’s exciting to see what’s going on right now with the newer, better browsers, and I’m hopeful that some of the cutting edge stuff will take root and see more widespread adoption.

The Webkit team is doing amazing things with CSS animations and tapping into hardware graphics to make stunning visual effects. Firefox, Safari, and Chrome have been leapfrogging each other with better and better JavaScript engines — and JavaScript libraries have been tapping into the increased power and performance. We’re seeing more and more use of HTML5 elements such as canvas, audio, and video. Typography on the web is poised to get a whole lot better as progress is being made with font embedding, both on the technical side and the legal side. One thing I can be sure of is that the future of web design is going to surprise me.

XHTML 1.0 Strict - Form Input

I'm trying to make a form using XHTML 1.0 Strict but when I use the tag, while validating it says "element input not allowed here; possible cause is an inline element containing a block-level element".
It isn't allowed :) You need to put the input tag (which is an inline element)
inside a block-level element. The form element doesn't count. It was disallowed for semantic reasons.

Try a paragraph element

. Or perhaps a table (if you have a table of fields to fill in, and not just a table-based layout to beat CSS limitations...)

Validate forms XHTML 1.0 Strict

I ran into some trouble with the forms validation because I was using a javascript:document.formname.submit() which would require a name for the form. As it turns out, form name is deprecated in XHTML 1.0 Strict and XHTML 1.1.
In other words

is not valid in XHTML 1.0 Strict and XHTML 1.1.

To get around this issue, I used and in my link I used javascript:document.forms['blah'].submit(); which validates correctly.

Also, to get around the carriage return problem in input tags of forms (for input tags to validate correctly in XHTML 1.0 Strict and XHTML 1.1, they have to surrounded by

or h1 etc. ) I surrounded my inputs by (gasp) fieldsets and then hid it by styling the fieldset so I could get them all in one line. Im sure a lot of people know about these already, but this is for my future reference.

reference:http://weblogtoolscollection.com/archives/2004/08/16/validate-forms-xhtml-10-strict/

Valid Flash description

When u embed a flash to ur website, the code may be not able to pass the W3C Validation.There is the solusion:
Valid Flash example for XHTML 1.0 Strict (XHTML 1.1)

http://www.ambience.sk/flash-valid.htm

This code for Flash (SWF) validates in compliance with web standards set by W3C. This code can be used in XHTML 1.0 Strict and is 100% valid. It degrades to GIF image if Flash plugin is not available and HTML + CSS stays valid.

When using Flash Satay method, you will have to use container movie to make your XHTML and CSS pages validate with webstandards. In this example no container Flash movie is needed and XHTML 1.0 Strict page stays valid and complies with web standards as set by W3C.

This code has been tested and works in Internet Explorer 5.01, 5.5, 6.0, Mozilla, Mozilla Firefox (former Mozilla Firebird), Opera and Konqueror and is fully XHTML Strict valid. No tags needed.


Reference：http://www.ambience.sk/flash-valid.htm

Google Translate

Google Translate is a beta service provided by Google Inc. to translate a section of text, or a webpage, into another language. Just put a code to the webpage, it will be translated by Google as your wish, automatically.
http://translate.google.com/translate_tools

Count website visitors

TraceMyIP.org is an advanced and truly private web based website visitor counting, geo tracking and traffic analytics / statistics service build on a proprietary technology developed by a private computer laboratory based in Massachusetts, USA. TraceMyIP.org is is a spam free service.
• Count website visitors and track the pages people have viewed with significantly greater detail than any other service
• Track and search returning visitors and privately monitor people's website browsing activity in in real time
• Trace the computer's physical location and system statistics of each individual website visitor based on the visitor's IP address

CSS resoucres

There are so much CSS resources on the Internet. I'm lost....

invalid link

Hi
There is an invalid link at UTS Online in week 3:IML News: Web Standards Group - Sydney.

Send a message to the nearest Earth-like planet, 5 day left.

Thanks to the support of Australia's Department of Innovation, Industry, Science and Research, the CSIRO and NASA, and a bunch of other really helpful people, the text messages collected on this site will be transmitted to the closest Earth-like planet that might harbour life: Gliese 581d.

At the end of Science Week, NASA will transmit the messages to Gliese 581d using the Canberra Deep Space Communication Complex in Tidbinbilla.
Here is the message I wrote:
Hi,bro. Earth is too dangerous to live. When could I be back to my hometown(Gliese 581d) ?
Homepage:http://www.hellofromearth.net

Adopt a star from a non-profit and support scientific research

A non-profit alternative: Many private companies offer to "sell" you a star name for $19.95, but here you can adopt a star that might host a planetary system for just $10! The Pale Blue Dot project is hosted by a non-profit organization (White Dwarf Research Corporation) and 100% of the proceeds are used to support scientific research on the stars that you actually adopt.

A search for habitable planets: In March 2009, NASA launched the Kepler satellite -- a mission designed to discover Earth-like planets around distant Sun-like stars. The satellite will monitor the brightness of more than 100,000 stars in the constellation Cygnus with a high quality digital camera for up to 6 years. Scientists will be looking for tiny dips in the amount of light received by the telescope -- the possible signature of a planet passing in front of the star. The Pale Blue Dot project supports the analysis that will allow astronomers to determine the physical size of the planet, through the research efforts of the Kepler Asteroseismic Science Consortium (KASC), a large international collaboration of scientists.

Homepage：http://whitedwarf.org/palebluedot/index.html

Learning Proposal draft

Learning Proposal

Student Number: 10674644

Student Name: Mengmeng Li

SWOT Analysis

Strengths

I have a basic conception of database and networking helping me to understand website better.

Weaknesses

I don’t have a IT background, knowing nothing about web development.

Opportunities

I could able to communicate with a team about website development with different levels of technical knowledge.

Threats

How to built a website step by step, adding html, javascript, CSS, PHP and XHTML/HTML 5 to the website.

Personal Learning Needs

I’m hoping to build my own website, having the basic understanding about these kinds of program languages. Once before I had a Blog in China, however, the website shut down and I lost all my articles and pictures. I am planning to produce it by myself at the end of the semester.

Learning plan

• Objectives - what do I want to learn?

I would like to have a basic understanding of modern technologies, build a cool website and know how to go to next step.

• Strategies - how will I do it?

Following subject timetable and practice the learning skills.

• Resources - what exactly will I use?

I have no idea at this moment.

• Schedule - what do I plan to do when?

The learning and building schedule which I am going to follow:

Class	Schedule
Week 3	Building website framework
Week 4	Building website framework
Week 5	Adding XHTML and CSS
Week 6	Adding CSS
Week 7	Adding PHP
Week 8	Adding Javascript
Week 9	Adding MySQL
Week 11	Adding Advanced Javascript
Week 12	Testing website

proposed project

• what will you build?

I am going to produce a personal website, hosted on a server. with interesting articles, my blog, resume and pictures.

• who is it for?

It is for my friends and people who concern me.

• what technologies will it use?

It is based on HTML, and I will add javascript, CSS, XHTML, PHP, MYSQL later on.

• how does it satisfy your learning objectives?

Practice learning skills by product this website.

Add gadget

I found there are lots of interesting gadget in Blogger.And then I added twitter & Picasa .

First Post

It is first post, WOW.
I am a Blogger.