Transcript Slides

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
• 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)
2 Popular Responsive Design Frameworks
Twitter Bootstrap
Skeleton
•
•
•
Utilizes LESSS CSS & compiled via Node
behave great in the latest desktop
browsers (as well as IE7!), tablet and
smartphone browsers.
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
Includes Base CSS,
JavaScript Plugins & Form
Controls
•
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.
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 2014
Pete Sena, 2/14/14
CreativeBloq.com