CISC 474: Advanced Web Technologies HTML5 & CSS3, & Responsive Design.
-
Upload
alexandrina-fitzgerald -
Category
Documents
-
view
219 -
download
0
Transcript of CISC 474: Advanced Web Technologies HTML5 & CSS3, & Responsive Design.
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
– Alternative media depending on browser
• SVG (vectorial image)• Math (formulas)• Canvas
– Graphs, game graphics, visual images on the fly
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)
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.
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
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/
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
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.
CSS3 Media Queries
• 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)
• 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.
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.
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
Bootstrap Responsive Break Points
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.
Skeleton Responsive Break Points
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 2014Pete Sena, 2/14/14 CreativeBloq.com