WEB

 

• SAMMY: A JQuery plug-able app framework: Sammy is a tiny javascript framework built on top of jQuery. It’s RESTful Evented JavaScript.

 

•  Code Style: Code Style answers key questions for Web developers. Which Web fonts are most common? How to use media dependent style sheets? Make more robust, accessible Websites with open standards technology.

 

• Twilio: BUILD POWERFUL VOICE & SMS APPS. Twilio provides a web-service API for businesses to build scalable, reliable communication apps.

 

• TypeTester: Compare screen type to see readability of various settings.\

 

• EZ-CSS : Putting the “less” in table-less layouts. A very easy, nestable css framework. VERY EASY.

  • (also look at http://elasticss.com/ A simple css framework to layout web-based interfaces, based on the printed layout techniques of 4 columns but with capabilities to unlimited column combinations. and capacity to make elastic, fixed and liquid layout easily.)

• Launchlist - Your one stop website checklist!

 

• Hicks Design Icon Referencehttp://hicksdesign.co.uk/iconreference/

 

• Progressive Enhancement: http://www.filamentgroup.com/dwpe (view it on multiple devices to be wow-ed (also http://www.modernizr.com/)

 

MOBILE

 

• Sencha Touch: (Haven’t used this but…) The First HTML5 Mobile App Framework Sencha Touch allows you to develop web apps that look and feel native on Apple iOS and Google Android touchscreen devices. These are the EXTJS guys. (I’m definitely going to take a crack at these guys) 

 

• Book on Building Android Apps (HTML + CSS + JSCRIPT) Building Android Apps with HTML, CSS, and JavaScript

 

• JQTouch — A jQuery plugin for mobile web development on the iPhone,
  iPod Touch, and other forward-thinking devices.

.. Sundry ..

ipad detritus: http://mir.aculo.us/2010/06/04/making-an-ipad-html5-app-making-it-really-fast/

web checker: http://launchlist.net/ (checks for issues / problems / etc…)

jquery online primer: http://www.rebeccamurphey.com/jqfundamentals/

Very cool slider (JQUERY) http://papermashup.com/build-a-jquery-content-feature-like-mailchimp/

jquery UI tools: http://flowplayer.org/tools/index.html

Aside : (cool EF blog post on write first modeling)  HERE

Icons (Gcons): http://www.greepit.com/open-source-icons-gcons/

alan.huffman HTML, JavaScript, Web Development CSS, JavaScript, mobile apps, Web Development

Though dojo is an amazing javascript framework, it’s complexity is mirrored by its various documentation sources. Erick Fleming and I have been working with dojo and some of the more recent additions. This is what we’re using:

 

1. docs.dojocampus.org : Main documentation

This is where the main documentation for dojo can be found, search is good but must be dead on – use google :site docs.dojocampus.org if you don’t know exactly what you are looking for.

1. There is also a doc-staging.dojocampus.org that has some more recent information – use cautiously.

2. redesign.dojotoolkit.org/ : redesign of the api.dojotoolkit.org

We don’t use the existing api.dojotoolkit.org site very much. The redesign site is better.

> But you may need to switch to OLDER versions (drop down)

 

3. Check for bugs at http://trac.dojotoolkit.org/

You can find up to date & tracked bugs, status, etc.. on this site. Very helpful when you are having *strange* issues.

> Also be careful if you are using a CDN, sometimes the patches have not made their way to the CDN’s and you need to use the latest build (e.g. a local copy)

 

4. Check out tests at http://archive.dojotoolkit.org/

Here are were you can find tests of the various widgets in action – helpful for seeing what works, how it works etc…

This is an amazing site / amazing test suite… check it out just for fun (if nothing else).

Directory:

• http://archive.dojotoolkit.org/dojo-2010-01-27/dojotoolkit/dijit/tests/

Eye popping, cool D.O.H. = Dojo Objective Harness (WOW these guys are bad asses)

• http://archive.dojotoolkit.org/dojo-2010-01-27/dojotoolkit/util/doh/runner.html?testModule=dijit.tests.module

alan.huffman Dojo, HTML, JavaScript, Web Development Dojo, JavaScript

All of this (and prev blogs posts) information comes from 1 awesome source that I recommend you buy. CSS Mastery (Advanced Web Standards Solutions)

Get the cheet sheet! http://www.milkaddict.com/wp-content/uploads/2009/11/css-cheat-sheet-v2.png

 

Box Model: [LINK WC3 ]

All elements are rectangles with characteristics ( offset, margin, border, padding, width, height ) See firebug for an example:

• Margins are transparent (not seen), used to control spacing
• Border adds a line around the item
• Padding creates a gap around the item.

IE Boxing Model (ugh)

IE uses a non-standard boxing model. (IE < version 7) (quirks mode). Width property is considered equal to the SUM of the widths of: content, padding & borders. Standard boxing model indicates width is the width of the element. So for IE v6 & earlier, if you specify a width and then padding & border – the item’s width is reduced to accommodate the added widths of the padding / border.

Solution: Don’t specify padding/border width along with content width. Want to know more? Go here:

http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

 

Margin Collapsing:

This blog gives a nice summary. http://www.milkaddict.com/css-margin-collapsing/ The idea is that the box model will have items above collapse the margins of items below. Elements contained within other elements will have their margins collapse before the outer margins do.

Whose margins collapse:

1. Inner elements collapse first (empty elements collapse in on themselves) – their margins fold.
2. Elements lower down on the page
3. Elements higher on the page

Block Level elements (block boxes) versus inline elements (inline boxes)

 

Block Level Elements are elements that are displayed as blockes or boxes of content:

• p
• h1
• h2
• div

Inline Elements are items that are displayed on one line (inline) such as:

• a
• strong
• span

The differences between these types is the DISPLAY property.

• display=block
• display=inline-block
• display=none /*no box at all*/
  

  Positioning

  3 different types of positioning in HTML:

1. normal flow (default) – based on position in HTML, left to right
2. floats
3. and absolute positioning
   

   Normal Positioning

   Inline Boxes = normal flow dictates left to right horizontal stacking

Block Boxes = normal flow dictates top down vertical stacking

 

from: http://www.mattryall.net/image/css-normal-flow.png

 

Relative Positioning

Allows the element to be positioned relative to its normal position. The element will continue to occupy the the original space (with or without the offset) – the implication can be overlap.

 

Absolute Positioning

Positioning is in relation to the nearest positioned ancestor (the tag in which it is nested).

Stacking (who is on top) can be controlled based on a z-index value. Higher the z-index, high up the box appears (more in front).

There is a bug in IE 5.5 & 6 when absolute position is set in relation to a relatively positioned element that DID NOT have dimensions set (IE just sets absolute in relation to canvas) – so set the dimensions.

Absolute positioned items are not considered part of the normal flow. They will not affect the layout of relative or normal flow positioned elements.

Fixed Positioning ( A subcategory of absolute )

The fixed element block is set relative to the viewport (window) and thus the element will always stay in the viewable window. (not supported by IE6 and below, IE7 partially supports it… There are workarounds [ugh])

 

Float Positioning

This is a complex and very important topic that you need to understand. That said, after reading it, I’ll refer you to some other sources as I don’t want to recreate what they have.

This site covers FLOAT & CLEAR: http://www.positioniseverything.net/easyclearing.html

I also recommend a framework that Erick Flemming and I are using on our project. The guy who wrote it is German, so you know it’s good ;-), YAML – Yet Another Multicolumn Layout.

 

YAML: Bulletproof & Flexible Layouts Made Simple

http://www.yaml.de/en/home.html 

"Yet Another Multicolumn Layout" (YAML) is an (X)HTML/CSS framework for creating modern and flexible floated layouts. The structure is extremely versatile in its programming and absolutely accessible for end users.

He even has a solid YAML BUILDER. http://builder.yaml.de/

alan.huffman CSS, HTML, Web Development CSS, HTML, Web Development

Depending on your preference, you either love or hate CSS. Either way you better know it. Let’s cover some basics.

Cascading refers to the nature of the selection. Styles are applied using the following prioritization:

• User styles flagged as !important
• Author styles flagged as !important
• Author styles
• User styles
• Styles applied by the browser/user agent

Calculating Specificity

Given that elements are often select by more than one selector, the applied style is the more specific of the two. Specificity is calculated based on the following rules (note calculation is NOT base 10).

There are 4 levels of constituent levels: a, b, c and d.

 

• If the style is an inline style, a = 1
• b = total # of ID selectors
• c = the number of class, pseudo-class & attribute selectors
• d = the number of type selectors & pseudo-element selectors

Few quick examples:

Style	Specificity Value	Specificity
Style="color:red;”	1,0,0,0	Highest
#foo #bar {}	0,2,0,0
#foo .bar {}	0,1,1,0
a#foo{}	0,1,0,1
p.foo .bar{}	0,0,2,1
p.bar{}	0,0,1,1
div a{}	0,0,0,2
a {}	0,0,0,1	Lowest

 

CSS Inherited Styles:

Styles are inherited by more general rules when not specified for an element by a more specific selector. Remember that the browser applied styles to specific elements – so they (h1,h2,…) will often not inherit values if a style did not specifically target them.

**Note: Any style applied to a specific element will override any inherited style.

Common Selectors

Classes versus ID’s

html:

<a id=”Name” …

<a class=”Name” …

css:

.Name = class “Name”

#Name = id “Name”

 

Pseudo-classes

css:

/* make all unvisited links blue */

a:link{color:blue;}

/* visited links green */

a:visited{color:green;}

/* makes links  red when hovered or activated, focus for keyboards */

a:hover, a:focus, a:active, {color:red;}

/* makes table rows red when hovered over */

tr:hover{background-color: red;}

/* makes input elements yellow when focus is applied */

input: focus {background-color:yellow;}

** Note: :link and :visited are LINK psuedo-classes and can only be applied to “<a “.

** Note: :hover, :active, and :focus are DYNAMIC psudo-classes and can be applied almost everywhere (though IE6 & IE7 are quirky).

 

 

Universal Selector

Apply styling to everything on a page.

/* remove all padding & margins */

*{

padding: 0;

margin: 0;

}

 

Advanced Selectors

Supported by most modern browsers (not IE6). If a browser doesn’t support a rule/feature, the whole rule is ignored. Child selector is supported in IE7 (unless there are comments between the parent & child)

1. child: #nav>li
2. sibling: h2 + p
3. attribute: acronym[title]

CHILD: #nav>li

css

/* list items that are nested in the #nav ID will have this rule applied */

#nav>li{

background: url(folder.png no-repeat left top;

padding-left: 20px;

}

html

<ul id=”nav”>

<li> A <!—will be applied –> </li>

<li> B <!—will be applied –>

      <ul>

          <li> C <!—will not be applied –> </li>

          <li> D <!—will not be applied –> </li>

      </ul>

</li>

</ul>

 

SIBLING: h2 + p

h2 + p would look for a paragraph that follows an h2.

<h2> Hey! </h2>

<p> This is what that selector would apply to </p>

 

ATTRIBUTE: acronym[title]

When you hover over an element with a title attribute most browsers will display a tooltip.

acronym[title]: hover, acronym[title]:focus{ cursor: help; }

<p> A < acronym title=”DataBase Admin”>DBA</acronym> is not a fun job </p>

alan.huffman CSS, HTML, Web Development CSS, Web Development

Due to the lack of HTML elements, several HTML / CSS Microformats have been adopted w/ many draft formats in play. They have an official ORG HOME: http://microformats.org/  :: about (http://microformats.org/about)

1. hCalendar for dates, calendars & events
2. hCard for people and organizations
3. XFN for relationships between people
4. hProduct for product descriptions (draft)
5. hReview for product and event reviews (draft)
6. … (many more)

Check out the wikipedia article on them: http://en.wikipedia.org/wiki/Microformat

alan.huffman CSS, HTML, Web Development CSS, HTML, Microformat, Web Development