Recommended
Recommended
More Related Content
Similar to Html5 model site
Similar to Html5 model site (20)
Recently uploaded
Recently uploaded (20)
Html5 model site
- 1. Dr. William BuchholzProfessor and Chair EmeritusInformation Design and Corporate CommunicationBentley UniversityWaltham, MA 02452-4705 HTML5 Model Site
- 2. YouTube HTML5 and CSS3
- 3. IDCC 370 Model IDCC 370 Model
- 5. Page Model
- 7. Template.dwt
- 10. 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
- 15. iphone/ipod tapped portrait iphone/ipod portrait iPhone and iPod Touch
- 16. iPod with Content Enlarged
- 17. iPadPortrait
Editor's Notes
- 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.