1 / 94

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

rhowe
Download Presentation

CS 131 - Web Design II

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


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

  2. 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

  3. 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

  4. 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

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

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

  7. 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

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

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

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

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

  12. 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

  13. 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

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

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

  16. 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

  17. 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

  18. 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

  19. 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

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

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

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

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

  24. 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

  25. 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

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

  27. 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

  28. 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

  29. 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

  30. 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

  31. 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

  32. 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.

  33. w

  34. Transition to HTML5 and Javascript - 1

  35. Transition to HTML5 and Javascript - 2

  36. Transition to HTML5 and Javascript - 3

  37. 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.

  38. HTML5 is markup + JavaScript APIs + CSS,

  39. 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.

  40. 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.

  41. 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.

  42. The way Javascript works

  43. 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!

  44. What can you do with JavaScript? 

  45. How to bake your own DOM

More Related