Google Font API

Just discovered the Google Font API - can't believe I've been wasting all that time (and bandwidth) creating images for non-standard browser fonts:

<html>
 <head>
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans">
   <style>
       body {
         font-family: 'Tangerine', serif;
         font-size: 48px;
         text-shadow: 4px 4px 4px #aaa;
       }
   </style>
 </head>
 <body>
   <h1>Making the Web Beautiful!</h1>
 </body>
</html>

See: http://code.google.com/apis/webfonts/docs/getting_started.html#Quick_Start

Hide Email Address on Websites from Spam

Nice compilation of methods to help protect your email addresses from spam spiders:

• Replace the AT (@) and DOT (.) symbols
• Mask your email with tags, append meaningful words e.g. me@gmail.com.nospam
• Replace text with an image
• Email Obfuscators
• Encode with special HTML characters: http://getyourwebsitehere.com/jswb/text_to_ascii.html
• Hide email using CSS trick (direction property)
• Hide your email address with JavaScript
• Enkoder Javscript Form

Source: http://labnol.blogspot.com/2006/03/hide-your-email-address-on-websites.html

Image Colour Matching - ColorCop

When designing a template for a new web application today, I began in a common predicament where I had the branded images I was hoping to use before I had the CSS for my colour scheme. Thankfully I discovered ColorCop which is a handy little tool for image colour matching (and much more). This proved a handy alternative to Photoshop (expensive) and GIMP (long-winded to colour match without scripting).

CSS Slider

A nice JavaScript plugin example: 

http://css-tricks.com/moving-boxes/

Top 10 FireFox Developer Plugins

A handy list of FireFox tools for the web developer:

10 Most Useful Firefox Plugins For Web Developers

XML and it's related X...'s

XML 1.0/1.1 (*.xml)

• Syntax rules for well-formed XML e.g. must have a single root element, closing tags required, proper tag nesting, case-sensitive, values in single or double quotes, all-in-one opening & closing tag allowed for empty elements with attributes, processing instructions and comments do not need closing tags, entity references must be declared (except for those built-in)
• CDATA can be used to display tags as text

<![CDATA[<person>Gareth</person>]]>

• Valid XML documents conform to semantic rules defined in a DTD or XML Schema

DTD vs. XML Schema

• DTD is non-XML like syntax, all declarations are global, unable to control kind of information elements can contain
• XML Schema was designed to overcome these weaknesses

DTD (*.dtd or internal to *.xml document)

    <!DOCTYPE people [



        <!ELEMENT person (name,age,weight/?,address)>



    <!ATTLIST name language(EnglishLatin)>



    ]>

XML Schema (*.xsd)

• Two types of content:
• Simple Content - elements that contain only text of built-in (type="xsd:string") or custom type
• Complex Content - elements that contain other elements or attributes
• Anotations can be used to describe parts of the schema
• Built-in types includes string, decimal, boolean, date, time, uri-reference, ISO language etc.
• Custom types allow Perl regex, inclusive/exclusive ranges, length, precision, lists, fixed and default values, choices, sequences etc.

XSLT (*.xslt)

• Used to analyse and transform XML documents into another format
• An XSLT processor converts XML into a node tree and uses the XSLT style sheet instructions to transform it
• Makes use of XPath to refer to individual parts of an XML document

XPath 1.0/2.0

• Used by XSLT, XSL-FO, XQuery, XInclude etc to refer to all or part of the text, data and values in XML documents

XInclude

• Allows XML files to include all or part of an external file

XQuery (XML Query)

• Equivalent of SQL to access, manipulate and return XML

XML Signature

• Defines syntax and processing rules for creating digital signatures in XML

XML Encryption

• Defines syntax and processing rules for encrypting XML

XPointer

• Can be used to address components of XML-based internet media

XSL-FO (XSL Formatting Objects)

• An XML-based page layout language, an XSL-FO processor can convert an XSL-FO document into another format e.g. a PDF

XLink (XML Linking Language)

• Used for creating HTML-like hyperlinks in XML
  

Introduction to Atom

A simple example of Atom...

<feed xmlns="http://www.w3.org/2005/Atom"
      xml:lang="en"
      xml:base="http://www.example.org">
  <id>http://www.example.org/myfeed</id>
  <title>My Simple Feed</title>
  <updated>2005-07-15T12:00:00Z</updated>
  <link href="/blog" />
  <link rel="self" href="/myfeed" />
  <entry>
    <id>http://www.example.org/entries/1</id>
    <title>A simple blog entry</title>
    <link href="/blog/2005/07/1" />
    <updated>2005-07-15T12:00:00Z</updated>
    <summary>This is a simple blog entry</summary>
  </entry>
  <entry>
    <id>http://www.example.org/entries/2</id>
    <title />
    <link href="/blog/2005/07/2" />
    <updated>2005-07-15T12:00:00Z</updated>
    <summary>This is simple blog entry without a title</summary>
  </entry>
</feed>

An overview of the Atom 1.0 Syndication Format
My first feed

Animated Gif Stops

Commonly an animated gif will stop after clicking a href on a page. A work-around for this is to reload the image using JavaScript:

            document.images['ball'].src="";
            document.images['ball'].src="images/ball.gif";

Convergence of Desktop, Web and Mobile Clients

Taken from http://www.cio.com/article/160600:

The platform should be the next layer of abstraction. The runtime should do the right thing, whether that's render a desktop or send the information to a smartphone. Applications may run and deploy the same way no matter the target platform, but that doesn't mean the same UI. Applications will be accessed through browsers, but sometimes they'll look like websites, and at other times like desktop apps. Instead of writing software to run on one particular target, such as a Windows PC or a Java-enabled smartphone, developers should be able to write to the business logic and let the server deploy the appropriate platform-specific code. Platform control will be a runtime technology on top of a single development model, not a deployment decision. Windows PC users will see the app as though it's a desktop application, perhaps with Win32 widgets, and a Linux user might have a Flash-based UI.

Web Fonts

Instead of making pictures of fonts, actual font files can be linked to and retrieved from the web. CSS2 described a way to link to fonts from style sheets, however TrueType fonts are not supported:

@font-face {
font-family: "Kimberley";
src: url(http://www.princexml.com/fonts/larabie/ »
kimberle.ttf) format("truetype");
}
h1 { font-family: "Kimberley", sans-serif }

Or to avoid long lists of @font-face declarations:

@import url(http://www.princexml.com/fonts/larabie/index.css) all;
h1 { font-family: Goodfish, serif }

Problems with Fonts on the Web:

• Fonts are intellectual property
• Potential for aesthetics problems

CSS @ Ten: The Next Big Thing
Web-safe fonts

CSS z-index

The CSS z-index property is a mechanism for defining the stacking level of positioned elements within a document. It allows elements to be moved above or below other elements on a page along an imaginary line that extends from inside the monitor towards the viewer. The lower the z-index the further away the element will appear in the stacking context and conversely a higher z-index brings the element closer to the viewer.

Give Me Some Zzzzz’s

Better Writing Through Design

When designing a website or writing content for an existing site, consider the following:

• Who’s visiting this site?
• What does she want to know?
• What does he want to do?
• How do I want to make this user feel?
• How would I carry on a face-to-face conversation with him?

Better Writing Through Design

HTML 5 (Web Applications 1.0)

HTML 5 is set to introduce several new elements including the following:

• section - generic section as part of document structure
• article - independent piece of content
• aside - piece of content slightly related to the rest of the page
• header - the header for a section
• footer - the footer for a section
• nav - a navigation (links) section
• dialog - used to mark up conversations
• figure - associate a caption with some embedded content
• audio and video - for multimedia content
• embed - for plugin content
• m - an area of marked text
• meter - a measurement e.g. disk usage
• time - a date and/or time
• canvas - for rendering dynamic bitmap graphics on the fly
• command - a command the user can invoke
• datagrid - a representation of a tree list or tabular data
• details - additional information which the user can obtain on demand
• datalist - used with the list attribute for comboboxes
• event-source - used to "catch" server sent events
• output - some type of output e.g. from a script
• progress - represents a completion of a task

http://www.whatwg.org/specs/web-apps/current-work/
http://www.ibm.com/developerworks/web/library/x-html5/index.html?ca=drs-
http://www.alistapart.com/articles/previewofhtml5
http://www.w3.org/html/wg/html5/diff/

ROME

An open source set of Atom/RSS Java utilities that make it easy to work in Java with most syndication formats. ROME includes a set of parsers and generators for the various flavors of syndication feeds, as well as converters to convert from one format to another. The parsers can give you back Java objects that are either specific for the format you want to work with, or a generic normalized SyndFeed class that lets you work on with the data without bothering about the incoming or outgoing feed type.

https://rome.dev.java.net/

HTTP Requests & Responses

Requests

• GET: Retrieves the resource identified by the request URL
• HEAD: Returns the headers identified by the request URL
• POST: Sends data of unlimited length to the Web server
• PUT: Stores a resource under the request URL
• DELETE: Removes the resource identified by the request URL
• OPTIONS: Returns the HTTP methods the server supports
• TRACE: Returns the header fields sent with the TRACE request

Responses

• 404: The requested resource is not available
• 401: The request requires HTTP authentication
• 500: An error occurred inside the HTTP server preventing it from fulfilling the request
• 503: The HTTP server is temporarily overloaded and unable to handle the request

http://java.sun.com/j2ee/1.4/docs/tutorial/doc/HTTP.html