Presentation is loading. Please wait.

Presentation is loading. Please wait.

Advanced Web 2012 Lecture 1 Sean Costain 2012. Course Details Times: Lecture: Thursday 8:00 - 9:50 G01_1.01B Lab 1: Thursday 11:00am - 1:00pm Liveworm.

Similar presentations

Presentation on theme: "Advanced Web 2012 Lecture 1 Sean Costain 2012. Course Details Times: Lecture: Thursday 8:00 - 9:50 G01_1.01B Lab 1: Thursday 11:00am - 1:00pm Liveworm."— Presentation transcript:

1 Advanced Web 2012 Lecture 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 Lecturer: Sean Costain Email: After hours lab access via swipe cards Sean Costain 2012

3 Objectives To develop skills in web design and authoring  Html 5 / CSS 3 / PHP / MySQL To gain an understanding of the evolving web based digital environment 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 submit an assessment item Forget to present at presentation times Forget to present at presentation times Copy someone else’s work 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 HTML 5 DOM Level 2 XHTML 1.0 HTML 4 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: HTML 4.01 Transitional: HTML 4.01 Frameset: XHTML 1.0 Strict: XHTML 1.0 Transitional : XHTML 1.0 Frameset : XHTML 1.1 : HTML 5 Sean Costain 2012

13 HTML 5 vs HTML 4 Character Encoding HTML 4 HTML 5 Sean Costain 2012

14 HTML 5 Language Additions New Semantic Elements Defines an article Defines content aside from the page content Isolates a part of text that might be formatted in a different direction from other text outside it Defines a command button that a user can invoke Defines additional details that the user can view or hide Defines a visible heading for a element Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. Defines a caption for a element Defines a footer for a document or section Defines a header for a document or section Groups a set of to elements when a heading has multiple levels Defines marked/highlighted text Defines a scalar measurement within a known range (a gauge) Defines navigation links Represents the progress of a task Defines a ruby annotation (for East Asian typography) Defines an explanation/pronunciation of characters (for East Asian typography) Defines what to show in browsers that do not support ruby annotations Defines a section in a document Defines a date/time Defines a possible line-break Sean Costain 2012

15 HTML 5 Language Additions New Media Elements Defines sound content Defines a video or movie Defines multiple media resources for and Defines a container for an external application or interactive content (a plug-in) Defines text tracks for and New Canvas Elements New Form Elements Used to draw graphics, on the fly, via scripting (Usually Javascript) Specifies a list of pre-defined options for input controls Defines a key-pair generator field (for forms) Defines the result of a calculation 18 new types that can be applied to the input field Sean Costain 2012

16 Design Differences HTML 4 Designed with div boxes, positioned via CSS2.1 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 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 1.0 – 1996, designed to help authors control presentation of HTML - Originally titled CHSS –Cascading HTML Style Sheets CSS is an Acronym for Cascading Stylesheets 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 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. Out of 500 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: 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 OR Use PIE: Or Modenizer: 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; } 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; } 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 h1 { text-shadow: 5px 5px 5px #FF0000; } Text Shadow 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 div { box-shadow: 10px 10px 5px #000000; } Box-shadow 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; } Border-image 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 3D transform methods: rotateX() rotateY() transform: rotateX(120deg); transform: rotateY(130deg); Allows for items to be rotated on the X and Y axis 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 @keyframes myfirst { from {background: red;} to {background: yellow;} } @-moz-keyframes myfirst { from {background: red;} to {background: yellow;} } @-webkit-keyframes myfirst { from {background: red;} to {background: yellow;} } @-o-keyframes myfirst { from {background: red;} to {background: yellow;} } CSS Keyframes 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 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

Download ppt "Advanced Web 2012 Lecture 1 Sean Costain 2012. Course Details Times: Lecture: Thursday 8:00 - 9:50 G01_1.01B Lab 1: Thursday 11:00am - 1:00pm Liveworm."

Similar presentations

Ads by Google