cs 131 web design ii
Download
Skip this Video
Download Presentation
CS 131 - Web Design II

Loading in 2 Seconds...

play fullscreen
1 / 94

CS 131 - Web Design II - PowerPoint PPT Presentation


  • 88 Views
  • Uploaded on

CS 131 - Web Design II. Spring 2012 at JCU Stefano Gazziano - [email protected] Our Program this year: . 1. Layouts (frozen, liquid, jello), Templates how to choose and use  2. Elements of Javascript, interactivity

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'CS 131 - Web Design II' - favian


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
cs 131 web design ii

CS 131 - Web Design II

Spring 2012 at JCU

Stefano Gazziano - [email protected]

cs 131 web design ii fall 2011 at jcu 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 - [email protected]

cs 131 web design ii fall 2011 at jcu sgazziano@johncabot edu1
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 - [email protected]

cs 131 web design ii fall 2011 at jcu sgazziano@johncabot edu5
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 - [email protected]

cs 131 web design ii fall 2011 at jcu sgazziano@johncabot edu11
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 - [email protected]

cs 131 web design ii fall 2011 at jcu sgazziano@johncabot edu15
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 - [email protected]

cs 131 web design ii fall 2011 at jcu sgazziano@johncabot edu17
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 - [email protected]

cs 131 web design ii fall 2011 at jcu sgazziano@johncabot edu22
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 - [email protected]

cs 131 web design ii fall 2011 at jcu sgazziano@johncabot edu23
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 - [email protected]

cs 131 web design ii fall 2011 at jcu sgazziano@johncabot edu25
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 - [email protected]

cs 131 web design ii fall 2011 at jcu sgazziano@johncabot edu26
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 - [email protected]

cs 131 web design ii fall 2011 at jcu sgazziano@johncabot edu27
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 - [email protected]

cs 131 web design ii fall 2011 at jcu sgazziano@johncabot edu28
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 - [email protected]

cs 131 web design ii fall 2011 at jcu sgazziano@johncabot edu29
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 - [email protected]

html 5 and javascript
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 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.

html5 needs javascript
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 css1
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