A Couple jQuery Do-Dad's I've found :)

Hello web folks!

As I've been building my faux site I have so far implemented two jQuery based javascript diddies into my page. I will post my faux site when I've implemented the stuff to a little more refined spot, but for now I will give you the links to what I used to put them into my site. Who knows, maybe one will come in handy for your site builds :).

The first one was a vertical news ticker. ESPN.com uses a jQuery plug-in called vTicker to show the headlines running just to the right of the branding at the top of the page. I fiddled with vTicker for several hours but couldn't get it to work, so I found an alternative root. This link goes step by step on implementation and gives you all the code you need to make it happen!

The second add-on I have is a tabs function in-page. I found the tutorial for that here. It's a nifty little piece of Javascript, as it allows you to have a large amount of content on one page, but be able to present it in digestable chunks. Happy coding!

Examing the Design Process: Cliche and Idea Generation

This article is good stuff. I mean good stuff. It goes into detail of how to find the happy medium between being too cliche and too vague and misunderstood. Also, at the end of the article, it applies this concept to web design, and how to break from the cliches, as it takes a look at the Steinway & Sons site build. It's a long but very informative read. I mean, who doesn't want to hear Craig Frazier and Art Spiegelman talk about their work?

glitchy jQuery cross fade

Check it out Samantha.

It is still super buggy. It sometimes crashes my browser:)

iPhone CSS fix

Haha! I found it. Waddayaknow, the info came from a BOOK;)

Insert the following code in the head of your pages and the media queries will work on iPhone and iPod touch. I don't know why the iphone pays attention to this or why the syntax is as it is, but it works (Michael your page is fixed).


<meta name="viewport"
content="width=device-width;
initial-scale=1.0;
maximum-scale=1.0,
user-scalable=0;">

Neat Article About Using Social Media as a Marketing Device

Hello web folks!

I found this article while I was on my Twitter account. I found it in a tweet from a design firm out in Knoxville that I follow.  I don't know how much it has to do with web design itself, but it at least highlights the many resources available on the web to act as marketing devices.

HTML5 Visual Cheat Sheet

"HTML 5 Visual Cheat Sheet is an useful cheat sheet for web designers and developers by me [Antonio Lupetti]. This cheat sheet is essentially a simple visual grid with a list of all HTML tags and of their related attributes supported by HTML versions 4.01 and/or 5. The simple visual style I used to design this sheet allows you to find at a glance everything you are looking for."

http://woork.blogspot.com/2009/09/html-5-visual-cheat-sheet-by-woork.html

Browser Prefixes for CSS properties

PREFIX    RENDERING ENGINE   BROWSERS
-khtml-   KHTML              Konqueror
-ms-      Trident            Internet Explorer
-moz-     Mozilla            Firefox, Camino, Flock
-o-       Presto             Opera, Opera Mobile, Opera Mini, Nintendo wii browser
-webkit-  Webkit             Safari, Safari on iOS, Chrome, Android browser

CSS5 Attribute Selectors

Attribute selectors : Substring matching attribute selector.

Selectors allow the representation of an element's attributes. When a selector is used as an expression to match against an element, attribute selectors must be considered to match an element if that element has an attribute that matches the attribute represented by the attribute selector. EXAMPLE

A little more CMS Research

I just started diving into my WordPress site this past week and have just begun to dissect it with the help of Firebug. In the meantime, I found this site that pretty much goes over what extra functionalities (calendars, shopping carts, etc.) you can put into a WordPress site.

A Working Accordion Scroll and Stylesheet Switcher!

I have both of these little do-dads listed below working on my event webpage. Both work out of jQuery. And yes, I got uber-excited and fist-pumped the air when I made each work. I will try and post my working versions up on CyberDuck just so you guys can see a little more finished example than the simple ones these guys give. As for now:

A Stylesheet Switcher (this one doesn't break your CSS like the first one I posted)

An Accordion Scroll

Enjoy!

How to get HTML5 working in IE

answer

All the fun stuff we learned today!

Since classes were cancelled after noon, I thought I'd take a moment to recap what we found in our research.

In the posts below there are links to a Stylesheet Switcher and the comment needed to make IE work with HTML5. The Switcher does break some CSS when it switches(me and Chiao tried it on our event pages), so we'll have to look into what it is trying to pull when it does the switch. Also, Angee has posted all the HTML5 tags that now exist as well as which ones could be relevant to our event pages.

The one thing that we had trouble finding was a jQuery Accordion script. I found one that seemed to have a pretty simple setup but didn't work once I took all the steps it told me to. We'll keep searchin'!

All Html5 tags....You are welcome


New tags in HTML5



<article>

Defines an article

Example

<article>

<a href="http://blog.netscape.com/2007/12/28/

end-of-support-for-netscape-web-browsers">

Netscape is dead</a><br />

AOL has a long history on the internet, being one of

the first companies to really get people online.....

</article>



Definition and Usage

The <article> tag specifies independent, self-contained content.

An article should make sense on its own and it should be possible to distribute it independently from the rest of the site.

Examples of possible articles:

• forum post

• newspaper article

• blog entry

• user comment









<aside>

Defines content aside from the page content



Example

<p>My family and I visited The Epcot center this summer.</p>

<aside>

<h4>Epcot Center</h4>

The Epcot Center is a theme park in Disney World, Florida.

</aside>

Definition and Usage

The <aside> tag defines some content aside from the content it is placed in.

The aside content should be related to the surrounding content.



<audio>

Defines sound content



Example

<audio src="horse.ogg" controls="controls">

Your browser does not support the audio element.

</audio>



Definition and Usage

The <audio> tag defines sound, such as music or other audio streams.



<canvas>

Defines graphics



Example

How to display a red square, with the canvas element:

<canvas id="myCanvas"></canvas>

<script type="text/javascript">

var canvas=document.getElementById('myCanvas');

var ctx=canvas.getContext('2d');

ctx.fillStyle='#FF0000';

ctx.fillRect(0,0,80,100);

</script>



Definition and Usage

The <canvas> tag is used to display graphics.

The <canvas> tag is only a container for graphics, you must use a script to actually paint graphics.

You can specify height and width of the canvas by using height and width attributes





<command>

Example

A button is marked up as follows:

<menu>

<command onclick="alert('Hello World')">

Click Me!</command>

</menu>



Definition and Usage

The <command> tag defines a command button, like a radiobutton, a checkbox, or a button.

The command element is only visible if it is inside a menu element. If not, it will not be displayed, but can be used to specify a keyboard shortcut.

Attributes

New

: New in HTML5.

Attribute

Value

Description

checkedNew

checked

Defines if the command is checked or not. Use only if type is radio or checkbox

disabledNew

disabled

Defines if the command is available or not

iconNew

url

Defines the url of an image to display as the command

labelNew

name

Defines a name for the command. The label is visible

radiogroupNew

radiogroup

Defines the name of the radiogroup this command belongs to. Use only if type is radio

typeNew

checkbox

command

radio

Defines the type of command. Default value is command



<datalist>



Example

An input element with possible values described in a datalist:

<input list="cars" />

<datalist id="cars">

<option value="BMW">

<option value="Ford">

<option value="Volvo">

</datalist>



Definition and Usage

The <datalist> tag defines a list of options. Use this element together with the input element, to define which values the input element can have.

Use the input element's list attribute to bind it together with a datalist.

<details>

Example

Details about the document:

<details>

<summary>Copyright 1999-2011.</summary>

<p>All pages and graphics on this web site are the property of the company Refsnes Data.</p>

</details>

Definition and Usage

The <details> tag specifies additional details or controls which can be hidden or shown on demand.

The content of the <details> tag should not be visible unless the open attribute is set.

Attributes

New

: New in HTML5.

Attribute

Value

Description

openNew

open

Specifies that the details should be visible



<datalist>

Example

An input element with possible values described in a datalist:

<input list="cars" />

<datalist id="cars">

<option value="BMW">

<option value="Ford">

<option value="Volvo">

</datalist>

Definition and Usage

The <datalist> tag defines a list of options. Use this element together with the input element, to define which values the input element can have.

Use the input element's list attribute to bind it together with a datalist.



<embed>

Example

<embed src="helloworld.swf" />

Definition and Usage

The <embed> tag defines embedded content, such as a plug-in.

Attributes

New

: New in HTML5.

Attribute

Value

Description

heightNew

pixels

Specifies the height of the embedded content

srcNew

url

Specifies the URL of the embedded content

typeNew

type

Specifies the MIME type of the embedded content

widthNew

pixels

Specifies the width of the embedded content



<figcaption>

Example

An image used as a figure in a document, with a caption:

<figure>

<figcaption>A view of the pulpit rock in Norway</figcaption>

<img src="img_pulpit.jpg" width="304" height="228" />

</figure>

Definition and Usage

The <figcaption> tag contains a caption for the <figure> tag.

The "figcaption" element should be placed as the first or the last child of the "figure" element.



<figure>



Example

An image used as a figure in a document:

<figure>

<p>A view of the pulpit rock in Norway</p>

<img src="img_pulpit.jpg" width="304" height="228" />

</figure>



Definition and Usage

The <figure> tag specifies self-contained flow content (like images, diagrams, photos, code, etc).

The content of the figure element should be relevant to the main content, but if removed it should not affect the flow of the document.



<footer>

Example

A section in a document that will be displayed in green:

<footer>This document was written in 2009</footer>

Definition and Usage

The <footer> tag defines the footer of a section or document. Typically contains the name of the author, the date the document was written and/or contact information.





<header>

Example

Introduction to my homepage:

<header>

<h1>Welcome to my homepage</h1>

<p>My name is Donald Duck</p>

</header>



<p>The rest of my home page...</p>



Definition and Usage

The <header> tag specifies an introduction, or a group of navigation elements for the document.



<hgroup>

Example

Use <hgroup> to group the heading of a section or a web page:

<hgroup>

<h1>Welcome to my WWF</h1>

<h2>For a living planet</h2>

</hgroup>



<p>The rest of the content...</p>

Definition and Usage

The <hgroup> tag specifies the heading of a section or a document.

The hgroup element is used to group headers, <h1> to <h6>, where the largest is the main heading of the section, and the others are sub-headings.





<keygen>

Example

A form with a keygen field:

<form action="demo_keygen.asp" method="get">

Username: <input type="text" name="usr_name" />

Encryption: <keygen name="security" />

<input type="submit" />

</form>

Definition and Usage

The <keygen> tag specifies a key pair generator field used for forms.

When the form is submitted, the private key is stored locally, and the public key is sent to the server.

Attributes

New

: New in HTML5.

Attribute

Value

Description

autofocusNew

disabled

Makes the input field focused on page load

challengeNew

challenge

Specifies that the value of the keygen is set to be challenged when submitted.

disabledNew

disabled

Disables the keytag field

formNew

formname

Defines one ore more forms the input field belongs to.

keytypeNew

rsa

other

Specifies the security algorithm of the key.

rsa generates a RSA key.

nameNew

fieldname

Defines a unique name for the input element. The name attribute is used to collect the fields value when submitted.





<mark>

Example

Highlight parts of a text:

<p>Do not forget to buy <mark>milk</mark> today.</p>

Definition and Usage

The <mark> tag defines marked text.

Use the <mark> tag if you want to highlight parts of your text

<meter>

Example

Use the meter element to measure data within a given range:

<meter value="2" min="0" max="10">2 out of 10</meter><br />

<meter value="0.6">60%</meter>

Definition and Usage

The <meter> tag defines a measurement. Used only for measurements with a known minimum and maximum value. This is also known as a gauge.

The <meter> tag should not be used as a progress bar. For progress bars, use the <progress> tag.



Differences Between HTML 4.01 and HTML5

Attributes

New

: New in HTML5.

Attribute

Value

Description

formNew

number

Specifies which form this meter belongs to

highNew

number

Specifies at which point the measurement's value is consider a high value

lowNew

number

Specifies at which point the measurement's value is consider a low value

maxNew

number

Specifies the maximum value. Default value is 1.0

minNew

number

Specifies the minimum value. Default value is 0

optimumNew

number

Specifies what measurement's value is the best value

valueNew

number

Required. Specifies the measurement's current or "measured" value



<nav>

The nav element defines a section intended for navigation:

<nav>

<a href="default.asp">Home</a>

<a href="tag_meter.asp">Previous</a>

<a href="tag_noscript.asp">Next</a>

</nav>

Definition and Usage

The <nav> tag defines a section of navigation.



<output>

Example

How to use the output element in a form:

<input name="numa" type="number"> +

<input name="numb" type="number"> =

<output name="result"

onforminput="value=numa.valueAsNumber + numb.valueAsNumber"></output>



Definition and Usage

The <output> tag represents the result of a calculation (like one performed by a script).

Attributes

New

: New in HTML5.

Attribute

Value

Description

forNew

id

Specifies one or more elements the output field relates to

formNew

formid

Specifies one or more forms the output field belongs to

nameNew

name

Specifies a name for the object (to use when a form is submitted)





<progress>

Example

Mark up "Downloading in progress":

The object's downloading progress:

<progress>

<span id="objprogress">76</span>%

</progress>

Definition and Usage

The <progress> tag defines work-in-progress.

Use the progress element to display the progress of a time consuming function in JavaScript.

Attributes

New

: New in HTML5.

Attribute

Value

Description

maxNew

number

Defines the value of completion

valueNew

number

Defines the current value of the progress



<rp>

Example

A ruby annotation:

<ruby>

漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>

</ruby>

Definition and Usage

The <rp> tag is used in ruby annotations, to define what to show browsers that do not support the ruby element.

Ruby annotations are used in East Asia, to show the pronunciation of East Asian characters.

Use together with the <ruby> and the <rt> tags:

The ruby element consists of one or more characters (that needs an explanation/pronunciation), and a rt element that gives that information, and optionally a rp element that defines what to show browsers that do not support the "ruby" tag.



<rt>

Example

A ruby annotation:

<ruby>

漢 <rt> ㄏㄢˋ </rt>

</ruby>

Definition and Usage

The <rt> tag defines an explanation or pronunciation of characters (for East Asian typography).

Ruby annotations are used in East Asia, to show the pronunciation of East Asian characters.

Use together with the <ruby> and the <rp> tags:

The ruby element consists of one or more characters (that needs an explanation/pronunciation), and a rt element that gives that information, and optionally a rp element that defines what to show browsers that do not support the "ruby" tag.





<ruby>

Example

A ruby annotation:

<ruby>

漢 <rt> ㄏㄢˋ </rt>

</ruby>

Definition and Usage

The <ruby> tag specifies a ruby annotation (for East Asian typography).

Ruby annotations are used in East Asia, to show the pronunciation of East Asian characters.

Use together with the <rt> and/or the <rp> tags:

The ruby element consists of one or more characters (that needs an explanation/pronunciation), and a rt element that gives that information, and optionally a rp element that defines what to show browsers that do not support the "ruby" tag.



<section>

Example

A section in a document, explaining what WWF is:

<section>

<h1>WWF</h1>

<p>The World Wildlife Foundation was born in 1961...</p>

</section>



Definition and Usage

The <section> tag defines sections in a document. Such as chapters, headers, footers, or any other sections of the document.



<source>

Example

An audio player with 2 different source files:

<audio controls="controls">

<source src="song.ogg" type="audio/ogg" />

<source src="song.mp3" type="audio/mpeg" />

Your browser does not support the audio element.

</audio>

Definition and Usage

The <source> tag defines media resources for media elements, such as <video> and <audio>.

Attributes

New

: New in HTML5.

Attribute

Value

Description

mediaNew

media query

Specifies what media/device the media resource is optimized for. Default value: all.

srcNew

url

The URL of the media

typeNew

MIME_type

Specifies the MIME type of the media resource



<summary>

Example

Details about the document:

<details>

<summary>Copyright 1999-2011.</summary>

<p>All pages and graphics on this web site are the property of the company Refsnes Data.</p>

</details>

Definition and Usage

The <summary> tag contains a header for the details element, which is used to describe details about a document, or parts of a document.





<time>



Example

How to define a time and a date:

<p>We open at <time>10:00</time> every morning.</p>



<p>I have a date on <time datetime="2008-02-14">Valentines day</time></p>

Definition and Usage

The <time> tag defines a time or a date, or both.

Attributes

New

: New in HTML5.

Attribute

Value

Description

datetimeNew

datetime

Specifies the date or time for the time element. This attribute is used if no date or time is specified in the element's content.

pubdateNew

pubdate

Specifies that date and time in the time element is the publication date and time of of the document, or the nearest ancestor article element







<video>

Example

A simple HTML5 video:

<video src="movie.ogg" controls="controls">

your browser does not support the video tag

</video>

Definition and Usage

The <video> tag specifies video, such as a movie clip or other video streams.



Optional Attributes

New

: New in HTML5.

Attribute

Value

Description

audioNew

muted

Specifies the default state of the the audio. Currently, only "muted" is allowed

autoplayNew

autoplay

If present, then the video will start playing as soon as it is ready

controlsNew

controls

If present, controls will be displayed, such as a play button

heightNew

pixels

Sets the height of the video player

loopNew

loop

If present, the video will start over again, every time it is finished

posterNew

url

Specifies the URL of an image representing the video

preloadNew

preload

If present, the video will be loaded at page load, and ready to run. Ignored if "autoplay" is present

srcNew

url

The URL of the video to play

widthNew

pixels

Sets the width of the video player







<wbr>

Example

A text with a line-break opportunity:

<p>

To learn AJAX, you must be familiar with the XML<wbr>Http<wbr>Request Object.

</p>

Definition and Usage

The <wbr> tag defines where in a word it would be ok to add a line-break.

When a word is to long, or you are afraid that the browser will break your lines at the wrong place, use the <wbr> element as a line-break opportunity.





These tags are not supported in html5

<acronym>

<applet>

<basefont>

<big>

<center>

<dir>

<font>

<frame>

<frameset>

<noframes>

<strike>

<tt>

<u>

<xmp>












A JavaScript Stylesheet switcher

Hey Web folks and folkettes!

Here is a really simple stylesheet switcher. This site takes you step by step of implementing the form to let you change between stylesheets. I have a semiworking example right now of it switching between two stylesheets I made. Once it's super spiffy I'll upload it to Cyberduck.

CSS For IE

<link href=styles.css rel=stylesheet />

<!--[if lt IE 9]><link href=ie.css rel=stylesheet /><![endif]-->

If the user browser is IE and also less than IE 9 then call ie.css

Adding IE-wersion classes on the html tag

<!--[if lt IE 9]><html class="ie8" lang="en" /><![endif]-->

div {

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

}

.ie8 div {

background: url(corners.gif)

}

Angee's Amazing Blog

Check out my research and tutorials on JavaScript at adventuresinjavascript.blogspot.com

HTML5 Research Summary

As we all have realized by now, HTML5 is the newest version of "Hypertext Markup Language" used to build all of the websites and pages on the internet. The features added to HTML5 are generating quite a bit of excitement about the possibilities of the new age of web design.

Two of the most talked about new additions are the markup tags for < * audio * > and < * video * >. These tags allow for media to be played within a browser window without the use of plug-ins such as Flash and Silverlight. Terrence O'Brien's "What is HTML5, and Why Should You Care? " and Jay Yarow's "Everything You Need to Know about HTML5 and Why You Should care About It's War With Flash" are both very good articles which explain how and why HTML5 is being promoted as the thing that will eliminate, or at least greatly decrease the use of, Flash in web design.

Apparently, what the non-tech savvy web user doesn't know is that all of those plug-ins that are required to play Flash coded content are slowing down browsers and devouring the battery life of laptops everywhere.

________________________________________

There is an ENORMOUS amount of information on the web regarding HTML5 but here is a list of some of the things that I've read and have found useful and informative. I will post more links as I continue researching. :

• "What is HTML5?" — http://www.practicalecommerce.com/articles/1873-What-Is-HTML-5-
• "What is HTML5 and Will It Kill Flash?" — http://www.taranfx.com/what-is-html-5-and-faq-will-it-kill-flash
• "What is HTML5?" — http://minutebio.com/blog/2010/01/25/what-is-html-5/
• "What is HTML5?" — http://whatishtml5.net/
• "How HTML5 Will Shake Up the Web" — http://www.technologyreview.com/web/25838/?a=f
• "Guide to HTML5 Hiccups" — http://www.zeldman.com/superfriends/guide/
• "HTML5 - Next Generation of Hypertext"
  http://www.cruzine.com/2011/02/01/html5-generation-hypertext/ Discusses the new features and capabilities of HTML5. There's also a graphic showing the difference in markup structure from HTML4 to HTML5
• "HTML5 differences from HTML4" - http://dev.w3.org/html5/html4-differences/
• "30+ HTML5 Tutorials for Web Designers" - http://ntt.cc/2010/06/03/30-useful-html5-tutorials-for-web-designers.html Includes "how-to's" for creating a backward compatible one-page portfolio with HTML5 and CSS3, coding an HTML5 layout from scratch, a video tutorial on HTML5, among other things that may prove useful for us as a class.

Great Video on Semantic Markup (in HTML5 no less)

Hello my fellow coders,

Here was another video I found while researching for my CMS stuff last week that does a really nice job of breaking down how to layout the HTML for a Photoshop design. It also gives us a sneak peak at how HTML5 works, which is pretty cool. Be prepared  to be blown away by the simplicity of <header>, <content>, <aside>, and <footer>!

Class 03 Research Presentation Summaries

Michael:

This week I dove more into the CMS WordPress. It is built of a series of lots and lots of php files that in the end created the usual Blogger style post-and publish format we are all used to. Here is a REALLY helpful video I found that goes into greater detail breaking down how a simple page theme works, explaining the WORDPRESS MODULAR SYSTEM.

A theme in WordPress is kind of like the templates we've built in class. As of this post there are 1,314 themes available at WordPress.org and they each come with their own set of CSS defaults that one can go in to manipulate to design a page how they would like it to be viewed. They range all the way from bare-bones pages with almost no CSS attached to highly designed themes as well. From my knowledge so far, I would think it easier to build up from a more bare theme and add your styles to it.

I also found a couple of videos on how to make a WordPress site and go live from finding a webhost and domain name to posting the site live. Those to videos are below. The tutorial dude is kind of, well, I'd say pompous with an almost "I can't believe I have to explain this but whatevs" sort of attitude, but he is very good at breaking down the process step by step:

Video 1
Video 2

And then I found this site that showcases the range of uses for WordPress in terms of building sites for a variety of functions (corporations, personal sites, non-profits, portfolios, etc.)

I will next be diving into the plug-ins associated with WordPress and seeing what their limits are, as well as clarifying what the "serialized content" is for a WordPress site, and (hopefully) begin to setup a custom themed page for my own test site.

Chiao:

Structural pseudo-classes (Thinking from right to left)

Examples:

tr:nth-child(2n+1) /* represents every odd row of an HTML table */

tr:nth-child(odd) /* same */

tr:nth-child(2n+0) /* represents every even row of an HTML table */

tr:nth-child(even) /* same */

/* Alternate paragraph colours in CSS */

p:nth-child(4n+1) { color: navy; }

p:nth-child(4n+2) { color: green; }

p:nth-child(4n+3) { color: maroon; }

p:nth-child(4n+4) { color: purple; }

Tutorial Vedio

CSS3 Media Queries

Useful link:

Hardboiled CSS3 Media Queries

BlackBerry Browser web standards support

Screen Resolutions:

Blackberry: 480 x 360px

iPhone 3G: 320 x 480px

iPhone 4: 960 x 640px