philly.NET Hands-On MVC Razor, HTML5, CSS3 Rob Keiser, Bill Wolff

Hands-on Labs Web Development Series March 13  Razor, HTML5, CSS3, MVC Controllers April 10  jQuery, plug-ins May 8?  Templating, jsRender, Knockout June 12  Page fragments, User controls, Scaffolding July 10  REST (consuming data), webAPI (providing data) August 14  Single Page Applications September 11  SignalR

MVC  Model  Contains the data to display  Represent as classes  Connect to database as needed  View  Display logic to render content  Render only, no data storage or logic  Controller  Associated with URL structure  Logic determines which view to display using a model

MVC Project  Application  Properties  References  Project Folders  App_Data  Content  Controllers  Models  Scripts  Views  Configuration  Global.asax  Packages.config  Web.config

Razor  Shared Layouts  Stores pages across all  _layout.cshtml is like a master page  _ViewStart.cshtml code added to each page  HTML Helpers  Render links and other tricky markup  Pass information from master to content  Content Placeholder  Partial Pages

Razor  Syntax  Code blocks enclosed … }  Inline expressions start  End statements with semi-colon;  Declare variables with var or type  Enclose strings in quotes  C# is case sensitive  Views  One folder per controller, multiple views  Typically cshtml files  Home folder stores home (Index.cshtml) and about pages

HTML5  100+ specifications in W3C provides device independence  IE9+, Chrome 6+, Firefox 3.6+, Safari 5+, most mobile devices  Simplified declaration   Less need for plug-ins  for 2d drawing and inline SVG for vector graphics  and audio playback  and media playback  Drag and drop support  HTML5 applications  Local data storage without cookies, file access, SQL  Cache provides offline browsing, faster load times  XHTMLHttpRequest2  Javascript workers run in background  Server-side events  Geolocation can determine latitude and longitude

HTML5  Semantic layout   Forms  color, date, datetime, datetime-local, , month, number, range, search, tel, time, url, week  for values with autocomplete  for authentication and certificates  for calculations  and autocomplete  autofocus, formaction, list, min, max, multiple, pattern, placeholder, required, step

CSS3  Selectors are most important to learn  Many new styles are not supported yet  animation  border-radius  box-shadow  Overflow  Rotation  Opacity  Bookmark

CSS3  Hyphens  Grid  Target  Columns  voice  Text-shadow  Transform  Perspective  Transition  nav