CS 131 - Web Design II

CS 131 - Web Design II Spring 2012 at JCU Stefano Gazziano - sgazziano@johncabot.edu

Our Program this year: 1. Layouts (frozen, liquid, jello), Templates how to choose and use 2. Elements of Javascript, interactivity 3. Content Management Systems: Joomla, Plone, Wordpress. Professional tools for web design (dreamweaver) 4. Pre-production, Organizing a web site information, Information ARchitecture (IA), IA Diagrams 5. Colors and emotional impact 6. Smart navigation, accessibilty and usability 7. Search Engine Optimization, site analytics 8. Web 2.0 tools: user created content, communities, blog in business. 9. Future trends: 3d Internet, “future Internet”, convergence, mobile Internet.Students will set up a web site using professional tools and available CMS as a course project. LEARNING OUTCOMES: On completion of the course a student should be able to 1. Apply the technology behind modern professional web design and development 2. Utilize the standard tools for web design: CMS, Web editors 3. Develop and validate web sites conform to usability and accessibility W3C rules; 4. Apply Design Principles to Website design CS 131 - Web Design II Fall 2011 at JCU - sgazziano@johncabot.edu

Layouts (frozen, liquid, jello), Templates how to choose and use The "BOX" model - 1 Control every aspect of the box with CSS: the size of the padding around the content, whether or not the element has a border (as well as what kind and how large), and how much margin there is between your element and other elements. CS 131 - Web Design II Fall 2011 at JCU - sgazziano@johncabot.edu

Layouts (frozen, liquid, jello), Templates how to choose and use The "BOX" model - 2 CS 131 - Web Design II Fall 2011 at JCU - sgazziano@johncabot.edu

Layouts (frozen, liquid, jello), Templates how to choose and use The "BOX" model - 5 The box model may look simple with just the content, some padding, a border, and margins. But when you combine these all together there are endless ways you can determine the layout of an element with its internal spacing (padding) and the spacing around it (margins). Take a look at just a few examples of how you can vary your elements. CS 131 - Web Design II Fall 2011 at JCU - sgazziano@johncabot.edu

Layouts (frozen, liquid, jello), Templates how to choose and use CS 131 - Web Design II Fall 2011 at JCU - sgazziano@johncabot.edu

Layouts (frozen, liquid, jello), Templates how to choose and use The "BOX" model - a look at the code CS 131 - Web Design II Fall 2011 at JCU - sgazziano@johncabot.edu

Layouts (frozen, liquid, jello), Templates how to choose and use FLOW & FLOAT Flow is what the browser uses to lay out a page of XHTML elements. The browser starts at the top of any XHTML file and follows the flow of elements from top to bottom, displaying each element it encounters. And, just considering the block elements for a moment, it puts a linebreak between each one. So the first element in a file is displayed first, then a linebreak, followed by the second element, then a linebreak, and so on, from the top of your file to the bottom. That’s flow. CS 131 - Web Design II Fall 2011 at JCU - sgazziano@johncabot.edu

Layouts (frozen, liquid, jello), Templates how to choose and use FLOW & FLOAT CS 131 - Web Design II Fall 2011 at JCU - sgazziano@johncabot.edu

Layouts (frozen, liquid, jello), Templates how to choose and use FLOW & FLOAT - combined together makes a "LAYOUT" CS 131 - Web Design II Fall 2011 at JCU - sgazziano@johncabot.edu

Layouts (frozen, liquid, jello), Templates how to choose and use Liquid and Frozen Designs Designs are called liquid layouts because they expand to fill whatever width we resize the browser to. These layouts are useful because, by expanding, they fill the space available and allow users to make good use of their screen space. Sometimes, however, it is more important to have your layout locked down so that when a user resizes the screen, your design still looks as it should. There are a couple of layouts that work like this, but let’s start with frozen layouts. Frozen layouts lock the elements down, frozen to the page, so they can’t move at all, and so we avoid a lot of issues that are caused by the window expanding. CS 131 - Web Design II Fall 2011 at JCU - sgazziano@johncabot.edu

Layouts (frozen, liquid, jello), Templates how to choose and use Frozen layout code changes CS 131 - Web Design II Fall 2011 at JCU - sgazziano@johncabot.edu

Layouts (frozen, liquid, jello), Templates how to choose and use Jello layout code changes The frozen layout has some benefits, but it also just plain looks bad when you widen the browser. But we’ve got a fix, and it’s a common design you’ll see on the Web. This design is between frozen and liquid, and it has a name to match: Jello. Jello layouts lock down the width of the content area in the page, but center it in the browser. CS 131 - Web Design II Fall 2011 at JCU - sgazziano@johncabot.edu

Templates how to choose and use CS 131 - Web Design II Fall 2011 at JCU - sgazziano@johncabot.edu

Templates how to choose and use A website template is a design used for the physical appearance or facade of your website. It is a layout that can be used to display content and information for a simple website, or used as a neat package in which to program additional features, such as scripts and databases. However a website template in itself does not contain any scripts or databases, and thus it will not “operate” the services of a “functioning” website without additional work. To restate the above, a website template will not run your dating service, nor will it include search features, membership databases, or have a back end administration for updating your website by default. These are all the functions of website scripts that are often found in “turnkey websites” and other “content management systems”, which are referred to as CMS's for short. If you require a ready to go solution that includes features such as the above, then a better solution for you may be a turnkey website from Built2Go.com(http://www.built2go.com/) or a CMS Template from ThemeStock.com (http://www.themestock.com/). However, a website template is helpful for the design and look of your content based website, or as a foundation in which to add your own scripts. This means if you would like to set up or redesign an informational website that simply displays content and consists of any number of linked pages, then it is very easy to add your content to a professional looking design that perfectly matches the theme of your website. Alternatively, if you are a programmer, developer, or if you have hired a programmer or developer that can provide your website with functionality, then a web template will be helpful in providing a clean and professional design that can easily integrate with any type of programming and on any type of platform. Therefore, website templates will benefit any number of individuals from first time webmasters to advanced developers that require an attractive appearance in which to apply their own website content or website programming. CS 131 - Web Design II Fall 2011 at JCU - sgazziano@johncabot.edu

Templates how to choose and use Templates: • "pre-designed" or "pre-programmes" websites availables to be customized. • fast way to set up a web site. • available as HTML or most common CMS • use and customization depend on programming environment Exercise : select a Coffeecup Template and modify it. (later in the course we will use CMS templates, too) CS 131 - Web Design II Fall 2011 at JCU - sgazziano@johncabot.edu

Javascript - w3school tutorial we will follow the tutorial for Javascript now CS 131 - Web Design II Fall 2011 at JCU - sgazziano@johncabot.edu

Javascript - new developments: AJAX (for a complete description see WIKIPEDIA) The term Ajax has come to represent a broad group of web technologies that can be used to implement a web application that communicates with a server in the background, without interfering with the current state of the page. In the article that coined the term Ajax,[1]Jesse James Garrett explained that the following technologies are incorporated: • HTML or XHTML and CSS for presentation • the Document Object Model (DOM) for dynamic display of and interaction with data • XML for the interchange of data, and XSLT for its manipulation • the XMLHttpRequest object for asynchronous communication • JavaScript to bring these technologies together Since then, however, there have been a number of developments in the technologies used in an Ajax application, and the definition of the term Ajax. In particular, it has been noted that JavaScript is not the only client-side scripting language that can be used for implementing an Ajax application; other languages such as VBScript are also capable of the required functionality.[2][9] (However, JavaScript is the most popular language for Ajax programming due to its inclusion in and compatibility with the majority of modern web browsers.) Also, XML is not required for data interchange and therefore XSLT is not required for the manipulation of data. JavaScript Object Notation (JSON) is often used as an alternative format for data interchange,[10] although other formats such as preformatted HTML or plain text can also be used.[11] CS 131 - Web Design II Fall 2011 at JCU - sgazziano@johncabot.edu

Javascript - new developments: DOM Document Object Model The Document Object Model (DOM) is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML and XML documents.[1] Aspects of the DOM (such as its "Elements") may be addressed and manipulated within the syntax of the programming language in use. The public interface of a DOM is specified in its application programming interface (API). The XML DOM defines a standard for accessing and manipulating XML. The DOM is a W3C (World Wide Web Consortium) standard. The DOM defines a standard for accessing documents like XML and HTML: "The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document." The DOM is separated into 3 different parts / levels: Core DOM - standard model for any structured document XML DOM - standard model for XML documents HTML DOM - standard model for HTML documents The DOM defines the objects and properties of all document elements, and the methods (interface) to access them. A web browser is not obliged to use DOM in order to render an HTML document. However, the DOM is required by JavaScript scripts that wish to inspect or modify a web page dynamically. In other words, the Document Object Model is the way JavaScript sees its containing HTML page and browser state. See DOM on W3SCHOOL or DOM in WIKIPEDIA CS 131 - Web Design II Fall 2011 at JCU - sgazziano@johncabot.edu

Javascript exercises - 1 Write a script asking name and last name to user before the page is loaded. Call a dialog window (type prompt) that shows "Welcome" + name + lastname and date and time. The bottom of the page (footer) must always show "Welcome" + name + lastname and date and time Make a decent HTML !! CS 131 - Web Design II Fall 2011 at JCU - sgazziano@johncabot.edu

Javascript exercises - 2 Ask the user font size and color for tags p, body, h1 ask the user bkgcolor for tag body Automatically derive font sizes for tags h2 and h3 from tag h1 as defined by user Generate an internal style sheet using these specifications CS 131 - Web Design II Fall 2011 at JCU - sgazziano@johncabot.edu

Javascript - Further readings Javascript A Beginners's Guide, III ed, John Pollack, McGraw Hill 2010. USD 26. Head First JavaScript A Learner's Companion to JavaScript By Michael Morrison Publisher:O'Reilly Media CS 131 - Web Design II Fall 2011 at JCU - sgazziano@johncabot.edu

HTML 5 and Javascript HTML5 is a superset of HTML 4.01 (meaning practically everything in it is still supported in HTML5) and all you need to do is know how to specify your doctype and the rest of the tags in the <head> element to get started with HTML5. XHTML 2 was a dead-end. Everyone who wrote real web pages hated it. XHTML reinvented the way we write markup for a web page, and would have made all the pages already out there obsolete.

Transition to HTML5 and Javascript - 1

HTML5 needs Javascript With HTML5 things are changing: web pages are becoming rich experiences (and full blown applications) that have behavior, are updated on the fly, and interact with the user. Building these kinds of pages requires a fair bit of programming and if you’re going to write code for the browser, there’s only one game in town: JavaScript.

HTML5 is markup + JavaScript APIs + CSS,

HTML5 is markup + JavaScript APIs + CSS, HTML5 is the newest version of HTML. It introduces simplified tags, new semantic and media elements, and relies on a set of JavaScript libraries that enable web applications. XHTML is no longer the standard for web pages. Developers and the W3C decided to keep extending and improving HTML instead. The new, simpler HTML5 doctype is supported by older browsers—they use standards mode when they see this doctype. The type attribute is no longer needed in the <script> tag or in a stylesheet link to CSS. JavaScript and CSS are now the defaults. The <meta> tag used for specifying thecharacter set has been simplified to include only the character encoding.

HTML5 is markup + JavaScript APIs + CSS, UTF-8 is now the standard charset in use on the Web. ƒƒ Making changes to the doctype and <meta> tag won’t break your pages in older browsers. HTML5’s new elements are a superset of HTML 4 elements, which means older pages will continue to work in modern browsers. The HTML5 standard won’t be officially complete until 2014, but most modern browsers will support it long before then (many support it now!). HTML5 introduces elements that add new semantics to your pages, giving you more options for creating web page structure than we had with HTML 4.01.

HTML5 is markup + JavaScript APIs + CSS, Many of the new features in HTML5 require JavaScript to make the most of them. Using JavaScript, you can interact with the DOM—the Document Object Model. The DOM is the browser’s internal representation of a web page. Using JavaScript, you can access elements, change elements, and add new elements to the DOM. A JavaScript API is an “Application Programming Interface.” APIs make it possible to control all aspects of HTML5, like 2D drawing, video playback, and more. JavaScript is one of the most popular languages in the world. JavaScript implementations have improved dramatically in recent years. You’ll be able to detect whether a new feature is supported in a browser and gracefully degrade the experience if not. CSS is the style standard for HTML5; many people include CSS when they use the term “HTML5” to describe the family of technologies used to create web applications.

The way Javascript works

What can you do with JavaScript? Once you’ve got a page with a <script> element (or a reference to a separate JavaScript file), you’re ready to start coding. JavaScript is a full-fledged programming language and you can do pretty much anything with it you can with other languages, and even more because we’re programming inside a web page!

What can you do with JavaScript?

How to bake your own DOM

CS 131 - Web Design II