1 / 46

Advanced Web 2012 Lecture 1

Advanced Web 2012 Lecture 1. Course Details. Times: Lecture : Thursday 8:00 - 9:50 G01_1.01B Lab 1 : Thursday 11:00am - 1:00pm Liveworm. After hours lab access via swipe cards. Lecturer: Sean Costain. Email: seancostain@student-partners.com.au. Objectives.

eytan
Download Presentation

Advanced Web 2012 Lecture 1

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. Advanced Web2012Lecture 1 Sean Costain 2012

  2. Course Details • Times:Lecture: Thursday 8:00 - 9:50 G01_1.01B • Lab 1: Thursday 11:00am - 1:00pm Liveworm • After hours lab access via swipe cards • Lecturer:Sean Costain Email: seancostain@student-partners.com.au Sean Costain 2012

  3. Objectives • To gain an understanding of the evolving web based digital environment • To develop skills in web design and authoring • Html 5 / CSS 3 / PHP / MySQL • To effectively use the available digital technologies to present information • Build websites using advanced technology Sean Costain 2012

  4. Course Outline • Week 1: Introduction, Html 5 & CSS 3, Social Media • Week 2: Working with Web Servers • Week 3: Database Design • Week 4: PHP Basics • Week 5: PHP Cont. • Week 6: PHP Cont. • Week 7: Javascript • Week 8: Presentations • Week 9: jQuery • Mid Semester Break (September 24-28) • Week 10: Wordpress • Week 11: Wordpress Cont. • Week 12: Wordpress Cont. • Week 13: Presentations • Week 14: Presentations Sean Costain 2012

  5. Assessment Items Assessment Item 1: Project Outline & Planning Due: Week 3 Required: 3000 word document submitted, 2-4 minute presentation Weighting: 20% Assessment Item 2: Due: Week 8 Required: Website & Database; 5-8 minute Powerpoint Presentation Weighting: 40% Assessment Item 3: Due: Week 12 Required: Wordpress Theme; Powerpoint Presentation Weighting: 40% Sean Costain 2012

  6. Assessment 1 • Brief: Design a mini Facebook or social media construct • This is the planning documentation • Aim for screen layouts • Data stores mapped out • Data flow • From an admin’s perspective • From an end users perspective • Time plan This is the design document for assessment item 2 Due week 3 Sean Costain 2012

  7. Assessment 2 • Brief: Build a mini Facebook or social media construct • Using your previous assessment item build the website and database system. • Allow for multiple users to logon and communicate • Allow for admin to control users • Document everything • Continue to document all aspects of your assessment • Creation method • Issues discovered and resolved Due week 8 – Submission and Presentation Sean Costain 2012

  8. Assessment 3 • Brief: Design and implement a Wordpress theme • Install a local copy of Wordpress • Design & Create a new theme • Document all aspects of your assessment • Creation method • Issues discovered and resolved Due week 12 – Submission and Presentation Sean Costain 2012

  9. How to Pass the Subject • Do the Work  • Read the Assessment details properly • Original Work, new content • Submit your Work • How to Fail the Subject • Forget to submit an assessment item • Forget to present at presentation times • Copy someone else’s work Sean Costain 2012

  10. How to Get A Higher Mark • Go Above and beyond the basics • Be descriptive when describing your work • Comment your work • Ensure adequate comments • Document fully • Think outside the box – Be Creative Sean Costain 2012

  11. HTML 5 vs HTML 4 • HTML 5 is not yet a Web Standard • First Working Draft January 2008 • HTML 5 is designed to replace HTML 4, XHTML 1 and DOM Level 2 • Why HTML 5? • It’s an evolution of HTML • Backwards Compatible with previous HTML pages • A better Error Handling • New Elements for Page structure • Better APIs (Application Programing Interface) • I.E. Audio & Video • Reduce the need for Plugins Sean Costain 2012

  12. HTML 5 vs HTML 4 New Doctype HTML 4.01 Strict: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> HTML 4.01 Transitional: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> HTML 4.01 Frameset: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> XHTML 1.0 Strict: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> XHTML 1.0 Transitional: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> XHTML 1.0 Frameset: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> XHTML 1.1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> HTML 5 <!DOCTYPE html> Sean Costain 2012

  13. HTML 5 vs HTML 4 Character Encoding HTML 4 <meta http-equiv="content-type" content="text/html”; charset=“UTF-8" /> HTML 5 <meta charset=“UTF-8” /> Sean Costain 2012

  14. HTML 5 Language Additions New Semantic Elements Sean Costain 2012

  15. HTML 5 Language Additions New Media Elements New Canvas Elements New Form Elements Sean Costain 2012

  16. Design Differences HTML 4 Designed with div boxes, positioned via CSS2.1 <div id=“dPage”> <div id-”dHeader”></div> <div id=“dNav”></div> <div id=“dBody”> <div id=“leftContent”></div> <div id=“rightContent”></div> </div> <div id =“dFooter”></div> </div> Sean Costain 2012

  17. Design Cont. In HTML 4, the id names linked back to CSS styles but the ids were not consistent, one coders “dBody” could be another’s “bodyFrame”, “dContent”, “Stuff” or….. Div was the catch all tag, and matched with Span, this is how HTML 4 and CSS2.1 web pages became the standard in web design. HTML 5 adds new Elements to streamline design between coders. Such as Header, Nav , Footer and Section. Sean Costain 2012

  18. Design Differences HTML 5 Designed with tag specific boxes, positioned via CSS 3 <div id=“dPage”> <header></header> <nav></nav> <section> <article></article> <article></article> </section> <footer></footer> </div> Sean Costain 2012

  19. Design Cont. As can be seen, the use of constant tags such as Header, Nav and Footer will allow for design of pages to be understood quickly. Sections can consist of Articles, each with pre-defined headers and footers, for example think of forums and blog posts. The new tags can be affected by classes and id styles being applied to them, so the major change is the removal of confusion between pages. Sean Costain 2012

  20. Removed Tags • Basefont • Big • Center • Font • S • Strike • Tt • u • Frame • Frameset • Noframes • Acronym • Applet • Isindex • Dir Some elements have had the attributes removed Ie: body no longer allows background, table, tr, th and td are not allowed bgcolor… Sean Costain 2012

  21. CSS History CSS is an Acronym for Cascading Stylesheets CSS 1.0 – 1996, designed to help authors control presentation of HTML - Originally titled CHSS –Cascading HTML Style Sheets CSS 2.0 – 1998, never fully implemented in browsers The time frame was very volatile for browser creation, hence why CSS 2.0 was never fully implemented. CSS 2.1 – 2004, revised to reflect the desired implementation of CSS 2.0. This the current version that is implemented in current browsers. In 2005, the specification was pulled back to Working Draft and then re-released in 2007 as the Candidate Recommendation where it remains. Sean Costain 2012

  22. CSS 3 There is no CSS 3 specification The history of CSS has shown that creating a singular large document for specification takes too long and is unwieldy. CSS3 is divided into separate specifications known as modules. This allows for the specifications to evolve to match the way the web has evolved. As such, differing modules are implemented at different rates by differing browser manufactures. Sean Costain 2012

  23. CSS 3 Compatibility Out of 500 http://html5test.com/compare/browser/index.html Due to the modular nature of CSS 3, not a single browser is fully compatible with CSS 3. Chrome 20 has the most features implemented, so the browser for this subject is Chrome. This doesn’t mean you shouldn’t build HTML 5 & CSS 3 websites, it means you have to make them backwards compatible. To find out when a feature is ready, check here: http://caniuse.com/#index Sean Costain 2012

  24. CSS 3 & IE Conditional Comments are a way of getting around the lack of implementation. - Give IE differing styles, a fallback to CSS 2.1 <!– [if IE 6 ]><link href=“css/ie6.css” rel=“stylesheet” type=“text/css”><![endif]> <!– [if IE 7 ]><link href=“css/ie7.css” rel=“stylesheet” type=“text/css”><![endif]> <!– [if IE 8 ]><link href=“css/ie8.css” rel=“stylesheet” type=“text/css”><![endif]> <!– [if IE 9 ]><link href=“css/ie9.css” rel=“stylesheet” type=“text/css”><![endif]> OR Use PIE: http://css3pie.com/ Or Modenizer: http://modernizr.com/ Javascript code to allow for CSS 3 Sean Costain 2012

  25. CSS 3 Modules • Some of the most important CSS3 modules are: • Selectors • Box Model • Backgrounds and Borders • Text Effects • 2D/3D Transformations • Animations • Multiple Column Layout • User Interface Sean Costain 2012

  26. Implementing CSS 3 Vendor Prefix allows for Browser Vendors to test new “unfinished” features, which can change Sean Costain 2012

  27. Vendor Prefix in Action Border Radius on a div tag, using the standard: div.roundBox { border-radius: 15px; } <div class=“roundBox”></div> Remember the standard isn’t complete, so vendors support the code using the pre-fix div.roundBox { -webkit-border-radius:15px; -moz-border-radius:15px; border-radius: 15px; } <div class=“roundBox”></div> This covers, firefox, chrome and safari browsers. The standard is listed for supporting devices. Sean Costain 2012

  28. CSS 3 Colour • Defining colour is similar to CSS 2.1 • Can use Hex code (#003456) or keywords (blue) • Can use RGB code rgb(239,239,239) • About 160 new keywords • New colour formats • RGBA (Red, Green, Blue, Alpha) • HSL (Hue, Saturation, Lightness) • HSLA (Hue, Saturation, Lightness, Alpha) • CMYK (Cyan, Magenta, Yellow, Black) Alpha is used for transparency Values can be numbers between 0-255, percentage 0%-100%, or Hex code Sean Costain 2012

  29. CSS 3 & Web Fonts • Use the tag of @font-face • Allows for specific fonts, the browser will download the font if it isn’t present • EOT : Embedded Open Type (Only IE, been available since IE 4) • WOFF: Web Open Font Format (Accepted as a working draft) • WOFF can be up to 40% smaller than standard font • Syntax • @font-face { font-family: “myFont”; src:url(“fonts/myFont.eot”); } • Making fonts Cross Browser • @font-face{ font-family: ‘myFont’;src:url(‘fonts/myFont.eot’);src:local(‘’), url(‘fonts/myFont.woff’) format(‘woff’), url(‘fonts/myFont.ttf’)format(‘truetype’), src:url(‘fonts/myFont.svg#webfontdeSVIj0D’)format (‘svg’);} Sean Costain 2012

  30. CSS 3 Text Effects Text Shadow h1{ text-shadow: 5px 5px5px #FF0000;} Removes the need for headings to be images, if you wanted a drop shadow. p { word-wrap:break-word; } Word Wrap Enables CSS3 to break words and wrap them within the confines of the predetermined box. Sean Costain 2012

  31. CSS 3 Borders With CSS3, you can create rounded borders, add shadow to boxes, and use an image as a border - without using a design program. • Border Properties • border-radius • box-shadow • border-image div{ border:4px solid; -moz-border-radius:15px; border-radius:15px;} Border-radius Box-shadow div{ box-shadow: 10px 10px 5px #000000;} Border-image div{ -moz-border-image:url(border.png) 30 30 round; -webkit-border-image:url(border.png) 30 30 round; -o-border-image:url(border.png) 30 30 round; border-image:url(border.png) 30 30 round;} Sean Costain 2012

  32. CSS 3 Background Images Before CSS3, the background image size was determined by the actual size of the image. In CSS3 it is possible to specify the size of the background image, which allows us to re-use background images in different contexts. You can specify the size in pixels or in percentages div{background:url(ship.gif); -moz-background-size:80px 60px; background-size:80px 60px;background-repeat:no-repeat;} div{background:url(ship.gif); -moz-background-size:100% 100%; background-size:100% 100%;background-repeat:no-repeat;} Or body{ background-image:url(stars.gif),url(ship.gif);} Multiple Background Images Sean Costain 2012

  33. CSS 3 2D Transforms A transform is an effect that lets an element change shape, size and position. • 2D transform methods: • translate() • rotate() • scale() • skew() • matrix() • transform: translate(50px,100px); • transform: rotate(30deg); • transform: scale(2,4); • transform: skew(30deg,20deg); • transform:matrix(0.866,0.5,-0.5,0.866,0,0); The matrix() method combines all of the 2D transform methods into one. The matrix method take six parameters, containing mathematic functions, which allows you to: rotate, scale, move (translate), and skew elements. Sean Costain 2012

  34. CSS 3 3D Transforms Allows for items to be rotated on the X and Y axis • 3D transform methods: • rotateX() • rotateY() • transform: rotateX(120deg); • transform: rotateY(130deg); Sean Costain 2012

  35. CSS 3 Transitions and Animation Transitions: add an effect when changing from one style to another, without using Flash animations or JavaScripts. Transitions are effects that let an element gradually change from one style to another. div{ -moz-transition: width 2s; -webkit-transition: width 2s; -o-transition: width 2s; transition: width 2s;} Transitions Animations: create animations, which can replace animated images, Flash animations, and JavaScripts in many web pages. The @keyframes rule is where the animation is created. Specify a CSS style inside the @keyframes rule and the animation will gradually change from the current style to the new style. Sean Costain 2012

  36. CSS 3 Transitions and Animation • When the animation is created in the @keyframe, bind it to a selector, otherwise the animation will have no effect. • Bind the animation to a selector by specifying at least these two CSS3 animation properties: • Specify the name of the animation • Specify the duration of the animation @keyframesmyfirst{from {background: red;}to {background: yellow;}}@-moz-keyframesmyfirst {from {background: red;}to {background: yellow;}}@-webkit-keyframesmyfirst{from {background: red;}to {background: yellow;}}@-o-keyframesmyfirst {from {background: red;}to {background: yellow;}} CSS Keyframes div{ -moz-animation: myfirst 5s; -webkit-animation: myfirst 5s; -o-animation: myfirst 5s; animation: myfirst 5s;} Binding Animation Sean Costain 2012

  37. CSS 3 Multiple Columns CSS 3 can create multiple columns for laying out text - like in newspapers! • multiple column properties: • column-count • column-gap • column-rule div{ -moz-column-count:3; -webkit-column-count:3; column-count:3; -moz-column-gap:40px; -webkit-column-gap:40px; column-gap:40px; -moz-column-rule:4px outset #ff00ff; -webkit-column-rule:4px outset #ff00ff; column-rule:4px outset #ff00ff; } Count, Gap and Rule Together Sean Costain 2012

  38. Social Media • Facebook • Twitter • Youtube • Google + • MySpace • Flicker • LinkedIn • Pintrest Sean Costain 2012

  39. Facebook Mission Facebook's mission is to give people the power to share and make the world more open and connected. Facebook is a popular social networking site. Users connect with people of their choosing, who they can then communicate with through the platform and who can then see various aspects of what they post. Users can also play games, watch videos, decorate their page, post and tag photos, share favourite product information, "like" their favourite celebrities and social causes, and more. There are options to set privacy settings, but they are difficult to find and tricky to set. Sean Costain 2012

  40. Twitter An information network Twitter is a real-time information network that connects you to the latest stories, ideas, opinions and news about what you find interesting. Simply find the accounts you find most compelling and follow the conversations. At the heart of Twitter are small bursts of information called Tweets. Each Tweet is 140 characters long, but don’t let the small size fool you—you can discover a lot in a little space. You can see photos, videos and conversations directly in Tweets to get the whole story at a glance, and all in one place. Sean Costain 2012

  41. YouTube Founded in February 2005, YouTube allows billions of people to discover, watch and share originally-created videos. YouTube provides a forum for people to connect, inform, and inspire others across the globe and acts as a distribution platform for original content creators and advertisers large and small. Sean Costain 2012

  42. Google + Tagline: Real-life sharing, rethought for the web Google Plus seems aimed at people who are more interested in sharing things with people or groups with similar interests rather than simply amassing the biggest number of online "friends." Its seamless integration with other Google services you may use, from search to online documents, makes it easier to share things online Sean Costain 2012

  43. MySpace MySpace LLC is a social entertainment destination powered by the passions of fans. Aimed at a Gen Y audience, Myspace drives social interaction by providing a highly personalized experience around entertainment and connecting people to the music, celebrities, TV, movies, and games that they love. These entertainment experiences are available through multiple platforms, including online, mobile devices, and offline events. Myspace is also the home of Myspace Music, which offers an ever-growing catalog of freely streamable audio and video content to users and provides major, independent, and unsigned artists alike with the tools to reach new audiences. Sean Costain 2012

  44. Flicker More ways to get your photos online. Multiple ways to upload your photos to Flickr—through the web, your mobile device, email or your favourite photo applications. Your photos are everywhere you are. Upload your photos once to Flickr, then easily and safely share them through Facebook, Twitter, email, blogs and more. Sean Costain 2012

  45. LinkedIn Sean Costain 2012

  46. Pintrest Pinterest is a Virtual Pinboard. Pinterest lets you organize and share all the beautiful things you find on the web. People use pinboards to plan their weddings, decorate their homes, and organize their favorite recipes. Best of all, you can browse pinboards created by other people. Browsing pinboards is a fun way to discover new things and get inspiration from people who share your interests Sean Costain 2012

More Related