1 / 16

CISC 474: Advanced Web Technologies

CISC 474: Advanced Web Technologies. HTML5 & CSS3, & Responsive Design. HTML Head Elements. Title & Meta Important for SEO Link & Style Call Style sheets CSS in head Scripts Template Load template via JavaScript. NEW HTML5 Embed Elements. Video Audio Source

zinnia
Download Presentation

CISC 474: Advanced Web Technologies

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. CISC 474: Advanced Web Technologies HTML5 & CSS3, & Responsive Design

  2. HTML Head Elements • Title & Meta • Important for SEO • Link & Style • Call Style sheets • CSS in head • Scripts • Template • Load template via JavaScript

  3. NEW HTML5 Embed Elements • Video • Audio • Source • Alternative media depending on browser • SVG (vectorial image) • Math (formulas) • Canvas • Graphs, game graphics, visual images on the fly

  4. NEW HTML5 Section Elements • Replaces generic “div” • Allows for cleaner layout and “labeled” sections • Nav, Header, Section, Footer • Label Page Content • Article • Address • Most Important Content • Main (only one per doc)

  5. Basics of CSS Box-Model • Width = width + padding-left + padding-right + border-left + border-right • Height = height + padding-top + padding-bottom + border-top + border-bottom Undeclared values (padding and border) are set to zero (css reset) or a browser default (which probably won’t be zero). Undeclared width of block-level elements will be 100%. Floated & Absolute element widths will be only as wide as the content inside them.

  6. Basics of CSS Layout • CSS Reset • Resets all browser-specific defaults • http://meyerweb.com/eric/tools/css/reset/ • Fluid v. Fixed • Percentages vs. Fixed Pixel • All Floating Elements • Floating + Block Elements • All Block Elements

  7. Popular CSS3 Styles & Tricks • Randy Jensen’s CSS3 Generator • Shows Example & Creates Code • Rounded Corners • Drop Shadow • Text Shadow • Gradients • Transform • Scale, Rotate, Translate, Skew • Transition • Background, • Color, Height, Width, Outline • http://css3generator.com/

  8. Popular CSS3 Pseudo-classes • Gives control over dynamically created content without adding class or id • :hover, :active, :visited ex.links • :first-child, :last-child ex.Add a top or bottom border • :nth-child(odd), :nth-child(even) ex. Table striping • :enabled, :disabled, :checked

  9. Responsive Design • Responsive design is an approach to web page creation that makes use of flexible layouts, flexible images and cascading style sheet media queries. • The goal of responsive design is to build web pages that detect the visitor's screen size and orientation and change the layout accordingly.

  10. CSS3 Media Queries • Allows content rendering to adapt to conditions such as screen resolution. It became a W3C recommended standard in June 2012 and is a cornerstone technology of Responsive Web Design. • Extra small devices (phones, up to 480px) • Small devices (tablets, 768px and up) • Medium devices (big landscape tablets, laptops, and desktops, 992px and up) • Large devices (large desktops, 1200px and up)

  11. 2 Popular Responsive Design Frameworks • Twitter Bootstrap • Utilizes LESSS CSS & compiled via Node • behave great in the latest desktop browsers (as well as IE7!), tablet and smartphone browsers. • Skeleton • A small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone.

  12. Bootstrap Responsive Frameworks • 12-column responsive grid • As this is a 12-column grid, each .span* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent). • EX: .span4 + .span8 = 12 total columns. Includes Base CSS, JavaScript Plugins & Form Controls

  13. Bootstrap Responsive Break Points

  14. Skeleton Responsive Frameworks • Skeleton has a familiar, lightweight 960 grid as its base, but elegantly scales down to downsized browser windows, tablets, mobile phone. • <!-- Give column value in word form (one, two..., twelve) --> • <div class=”twelve columns"> • <h1>Full Width Column</h1> • </div> Skeleton is not a UI framework. It's a development kit that provides the most basic styles as a foundation, but is ready to adopt whatever your design or style is.

  15. Skeleton Responsive Break Points

  16. 2014 Web Design Trends • “The frontend curious continue to push the bounds of the modern interface this year, combining HTML5/CSS and JavaScript.” • “Parallax scrolling websites - The mouse, tablet, touch, and pinch will be the future for how we experience things.” • “With Flash going extinct, JavaScript is bleeding into both front and back-end now. Frameworks will continue to pop out of the woodworks - If something can be built in JavaScript, it will be.” 11 web design trends I'd like to see in 2014 Pete Sena, 2/14/14 CreativeBloq.com

More Related