The Advance of HTML5 In Modern Web Development

1. The Advance of HTML5 In Modern Web Development Abstract Background & Objectives Materials • Apple MacBook Pro laptop (Late 2008, 2.4GHz) • Mac OS X, version 10.6.8 • Adobe Photoshop 12.0.4 • Coda 1.7.2 (Panic Inc.) • Codebasehq.com for versioncontrol, backup Languages • HTML(5) • CSS (Cascading Style Sheet 3) • jQuery / JavaScript • PHP A sample of HTML: Development Process • Develop visual representation with Photoshop • Present client with representation Approval or disapproval • Build the website • Edit code in Coda • Preview in a browser • Commit to codebasehq.com • Repeat (a) – (c) until site is finished • Review all code • Test in variety of browsers • Internet Explorer 7/8/9 • WebKit (Chrome, Safari) • Firefox • Present finished site to client • Publish the site Materials & Methods Better Semantics and Organization The design of the site called for a series of images to be displayed on the homepage, along with a description for each. Possible example of code prior to HTML5 Can be improved semantically using two new tags: <figure> <figcaption> HTML5 actually used, with <figure> and <figcaption> tags: Compatibility Fixes At this time, Internet Explorer 9 and earlier (6,7,8) do not recognize HTML5-specific tags without a workaround JavaScript. Remy Sharp’s “html5shiv” script file was used so IE could recognize the new tags. Results Discussion Overall, new tags led to improved semantics. <div> is gradually being replaced by more specific tags that better describe what they contain. Browsers still need to continue to adopt the new tags, especially Internet Explorer. References Hickson, I. "W3C Working Draft - HTML5 A Vocabulary and Associated APIs for HTML and XHTML." W3.org. World Wide Web Consortium (W3C), 25 May 2011. Web. 21 Sept. 2011. <http://www.w3.org/TR/2011/WD-html5-20110525/> Keith, J. HTML5 for Web Designers. New York, NY: A Book Apart, 2010. Print. Pemberton, S, et al. "XHTML™ 1.0 The Extensible HyperText Markup Language (2nded)."W3.org. World Wide Web Consortium (W3C), 1 Aug. 2002. Web. 22 Sept 2011. <http://www.w3.org/TR/xhtml1/> Digital Image. Codebasehq.com.aTech Media Limited. Web. 12 Mar 2012. <http://www.codebasehq.com/images/codebase/logo.gif>. Digital image. Wikimedia.org. Wikimedia Foundation, Inc, 15 Jan. 2009. Web. 12 Mar. 2012. <https://upload.wikimedia.org/wikipedia/commons/8/8e/OS_X-Logo.svg>. Acknowledgements This research would not have been possible without assistance from Marc Amos, owner of Boston Web Studio (BWS). The research project was conducted entirely at BWS. Mr. Amos provided me with the proposed design of the website, along with much helpful advice about HTML and other web languages. I also received assistance from Dr. Maria Lonnett Burgess, who helped me contact my mentor and helped set up the internship. Both people were instrumental in the research. Contact peteg944@gmail.com for further information. HTML5 is being developed by the WHATWG (Web Hypertext Application Technology Working Group) Main objective - To explore the improvement to HTML that the new HTML5 standard brings to the web development industry; specifically • Simplifications • New tags • Better semantics Peter Goulakos Authentic Science Research Program Manchester-Essex Regional High School, Manchester-by-the-Sea, MA 01944 The Advance of HTML5 in Modern Web Development Peter Goulakos Manchester Essex Regional High School, Manchester-by-the-Sea, MA Teacher, Dr. Maria Lonnett Burgess, Manchester Essex Regional High School Mentor, Marc A, Engineer, Varian Semiconductor Equipment Associates This project explores the improvement to HTML that the new HTML5 standard brings to the web development industry. The last major proposed revision to HTML was in 2010, when the World Wide Web Consortium published XHTML2. Unfortunately, it never saw publication and had only limited use. The purpose of this project was to validate improvements that HTML5 brings to the language, i.e. simplifications, new tags, better semantics. An Apple MacBook Pro laptop running Mac OS X 10.6.8 was used. Adobe Photoshop 12.0.4 was used for making the website design and Coda 1.7.2 for programming. HTML and selected HTML5 features were also used for programming, and the code edited with Coda using Cascading Style Sheet code, jQuery/JavaScript, and PHP Hypertext Preprocessor code; changes were committed to codebasehq.com. Programmers observed thatHTML5 had positive impact on the website, mainly in improved organization and better semantics, and better standards-compliance and future-proofing. New HTML5 tags <header>, <nav>, and <article> were used. These are one of HTML5’s distinguishing traits and results of this project agreed with this trait. Because HTML5 is a new standard, typical web users may not demand such functionality from their browsers until the standard is more matured and its applicability to web design confirmed. At that time, browsers that have the most support for HTML5 will likely enjoy favorability.