|
Web Design  This website demonstrates using wikis as teaching and learning tool. The course instructor is happy to share the teaching materials here with those who find it readable. |
Lecture /
Some New Developments in Web DesignA Web Design Lecture by Steven Choy Overview: HTML5 - CSS3 - AJAX - Social Networking
HTML5Introduction
New semantic elements
(Figure: Some New Semantic Elements in HTML5)
A showcase of sites using HTML5 markup: http://html5gallery.com/
New input types
Example code:
<form action="#" method="post">
<h3>Post a comment</h3>
<p>
<label for="name">Name</label>
<input name="name" id="name" type="text" required />
</p>
<p>
<label for="email">E-mail</label>
<input name="email" id="email" type="email" required />
</p>
<p>
<label for="website">Website</label>
<input name="website" id="website" type="url" />
</p>
<p>
<label for="comment">Comment</label>
<textarea name="comment" id="comment" required></textarea>
</p>
<p><input type="submit" value="Post comment" /></p>
</form>
Drawing and media
<canvas> is a new HTML element which can be used to draw graphics using scripting (usually JavaScript).
Example: <canvas id="a" width="300" height="225"></canvas>
You can then find that <canvas> element in the DOM: var a_canvas = document.getElementById("a");
Example websites: https://developer.mozilla.org/en/Canvas_tutorial
The audio and video will now be built in supported via <audio> and <video> elements.
Example websites: http://camendesign.com/code/video_for_everybody
New Development APIs
CSS3
It lets you display your content in multiple columns with less code.
allow you to create grid layouts easily
AJAX
1. The user generates an event, such as by clicking a button. This results in a JavaScript call.
2. An XMLHttpRequest object is created and configured with a request parameter that includes the ID of the component that generated the event and any value that the user might have entered.
3. The XMLHttpRequest object makes an asynchronous request to the web server. An object (such as a servlet or listener) receives the request, processes it, and stores any data in the request to the data store. In the case of Ajax-aware JavaServer Faces components, the object that processes the request is a PhaseListener object. We'll cover that more later in the document.
4. The object that processed the request returns an XML document containing any updates that need to go to the client.
5. The XMLHttpRequest object receives the XML data, processes it, and updates the HTML DOM representing the page with the new data.
Social Networking
Comments Box is a social plugin that enables user commenting on your site. Features include moderation tools and distribution.
You just need to add the following code in your web page:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=YOUR_APP_ID
&xfbml=1"></script>
<fb:comments xid="POST_ID" numposts="10" width="425" publish_feed="true"></fb:comments>
Reference: http://www.google.com/friendconnect/
Reference: http://www.addthis.com/
References and Resources
Thanks for ReadingIf you would rather like to have this lecture note in printed format, please click the print action link in the top right corner. If you find any problem in this lecture note, please feel free to tell Steven via steven [at] findaway.hk. |