• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Html5 model site
 

Html5 model site

on

  • 841 views

Presented here is the IDCC 370 model for the Web Design I course at Bentley University, Waltham, MA, taught by William Buchholz.

Presented here is the IDCC 370 model for the Web Design I course at Bentley University, Waltham, MA, taught by William Buchholz.

Statistics

Views

Total Views
841
Views on SlideShare
841
Embed Views
0

Actions

Likes
0
Downloads
7
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • HTML Model SiteCopyright © 2011 William BuchholzAll rights reservedContact: Dr. William BuchholzProfessor and Chair EmeritusInformation Design and Corporate CommunicationBentley UniversityWaltham, MA 02452-4705wbuchholz@bentley.edu
  • “HTML5 and CSS3” is available on YouTube at: http://youtu.be/en9ibmol0MQ
  • Here is the IDCC 370 Model site (live on the Internet at http://idcc.bentley.edu/buchholz_will/370/). This model demonstrates much of the functionality as well as the “look and feel” of the site you will be building this semester. In creating this site, you will be introduced to the latest Web design standards: HTML5, CSS 3, and JavaScript (not too much JS, but enough for some interesting operations).
  • This graphic view of your files and their folders shows you the underpinning of the Web you saw in the previous slide. We will spend about the first 4 weeks building this “backroom” shell for your Web; eventually all these files and folders will be populated with some very interesting content.
  • In HTML5, we pay special attention to the structure of the pages in a site. All are built from the same fundamental grid pattern, depicted in this slide. Note that what you have here is a series of containers, elements that hold other elements. With this model, you will be building your Web pages according to the latest HTML “structural” standards.
  • Here is the page model again, from the HTML5 perspective. While this markup (“code”) can at first look a little intimidating, you will soon become very comfortable in traversing and populating it. Again, notice how all the elements are contained within larger elements. This is known as “nesting.” The “page hierarchy,” as it is called, consists of parent, child, and sibling relationships.
  • You will be using Dreamweaver to create a template file (template.dwt). Note in the slide that the template contains the complete “look and feel” of your site, each page of which is derived from a combination of the underlying HTML5 markup, CSS, and JavaScript. All modern Web pages consist of these three basic building blocks. As more functionality moves to the cloud, you will see increased importance placed on these Web page elements. For example, Microsoft’s next OS, Windows 8, is being built from the ground up to include HTML5, CSS, and JavaScript functionality for Web apps. In fact, HTML5 and JavaScript together are so powerful, they are starting to overtake Flash, Silverlight, and programmed apps.
  • Once you have built a solidly functioning and validated template, you will then generate the various pages of your Web site from that. These “template-derived” pages will all look basically the same, except for their content. The graphics in this slide show the Home, About Me, and Essay pages as they are generated (derived) from the template. Dreamweaver offers some very nice ways of performing this kind of generation from the template. I think you will enjoy this process of “making” pages for your site.
  • Your IDCC 370 model will be constructed in what is known as a “responsive” design. Put simply, that means your site will be built so that it will respond well to appearing on various platforms: hardware, operating systems, and browsers. Because your site will be constructed according to the latest valid standards of HTML5, CSS3, and JavaScript, it will have a tremendous range of possibility, some of which we explore in the next slides.
  • If you design your site correctly and make it responsive, your pages can be viewed effectively on huge stadium-sized screens, medium-sized screens (from HDTV to desktop computer monitors), and tiny hand-held gaming devices. In effect, you design one time for many uses: design one for many.
  • This slide depicts the model’s minimum width in a desktop browser. Notice the comfortable reading length of the lines of text on the page; also note that the graphics are sized proportionately and integrated well with the text. The next slide shows how this page would look without the min-width rule.
  • This slide shows how the page renders in the browser without the min-width rule. Notice how the elements are starting to pile up on each other. You still see some margin because the page has been set to render taking up 70% of the viewport, no matter what the size of the window.
  • Here you can see what happens to the page in a wide monitor (1680 X 1050). The content spreads a little, but then stops at a maximum width of 80em (1280px); the remainder of the space on the monitor is taken up by a gradient fill. The next slide shows how this page would look without the max-width rule.
  • Here is how the page renders without the max-width rule. Notice the extreme spreading; the lines become very difficult to read because of the huge left-to-right movement required to take in the content. The page itself still occupies 70% of the viewport, but becomes thinner vertically as it has more room to expand left and right.
  • The iPhone and iPod Touch handle HTML5 brilliantly, as you can see from the screen shots in this slide. If your visitors want to increase or decrease size, all they need do is pinch in or out, and because the page is built with HTML5 and Vectors, the visual response is crisp and clear.
  • This slide shows how effectively Apple’s iOS 4.3 on the iPod Touch renders both vector and bitmapped graphics mightily enlarged.
  • The iPad tablet is able to render our model site flawlessly. And because the pages are built in HTML5 and CSS3 with proportionally correct text and image sizes, visitors will have no trouble interacting with the navigation devices or the various linked widgets (sharing buttons, interactive Google map, HTML5 shield, and the like).
  • The full-screen portrait view rendered in Safari on the iPad is very easy for visitors to navigate. Enlarging by pinching out results in a beautiful rendering of vector text and bitmapped graphic, as demonstrated in the next slide.
  • In the iPad’s Safari browser, the vector graphics rendering of the text in the navigation buttons, the H1 headline, and the content is smooth and clear. You can see that the bitmapped graphic, lower right, is starting to pixelate, but not dramatically. With retina display, the next generation of iOS 5 for the iPad will have even better graphics and smoother video. Games anyone?
  • So how might our model site look in a small phone’s Web browser? This slide shows that with very little tweaking of the CSS, a page will render very well as a single column. Again the key to this adaptability is creating a model that is “responsive” to whatever medium is handling it using HTML5.

Html5 model site Html5 model site Presentation Transcript

  • Dr. William BuchholzProfessor and Chair EmeritusInformation Design and Corporate CommunicationBentley UniversityWaltham, MA 02452-4705
    HTML5 Model Site
  • YouTube
    HTML5 and CSS3
  • IDCC 370 Model
    IDCC 370 Model
  • Folders/Files View
  • Page Model
  • Page Model Markup
  • Template.dwt
  • Template-derived Pages
  • To Small Phones
    From Stadium Screens
    Responsive Web Design
  • Page responds to viewport size
    Design works on all sizes of screens:
    Giant Stadium TV
    32-72” HDTV
    Wide-screen computer monitor
    Tablet
    Smart phone
    Nintendo 3ds
    Responsive Web Design
  • Desktop Min-width
  • Desktop without Min-width
  • Desktop Max-width
  • Desktop without Max-width
  • iphone/ipod tapped portrait
    iphone/ipod portrait
    iPhone and iPod Touch
  • iPod with Content Enlarged
  • iPadPortrait
  • iPad Full-screen Portrait
  • iPad Enlarged Portrait
  • Small Phone Portrait