CodeStock 2012: Adaptive and Responsive Web Design

imageBelow are my notes taken during CodeStock 2012’s “Adaptive and Responsive Web Design” hosted by:

Steve Bodnar ( @SteveBodnar )
www.geeksandgurus.com

 

 

Click here to follow me on Google+.

Follow me on Twitter @CSharpner.

In this session we learned how HTML5 lets us design our web apps to automatically adjust to all sorts of different sized browsers.  See links in notes below for sites with examples.  Resize your browser to large and small and watch the sites automatically adapt.

Raw notes, as I typed them in class below:


  • How to make your sites work on any HTML/Javascript device regardless of browser or device.
  • RELEVANT CONCEPTS
    • App vs. site
    • Graceful degradation
    • Progressive enhancement
    • Others…
  • GRACEFUL DEGRADATION
    • Downgrade gracefully when features aren’t available in browser. User should not notice.
    • Design on most advanced browser then adapt to lower browsers
  • PROGRESSIVE ENHANCEMENT
    • Focused on content, not browsers
    • Builds for least capable devices
  • STRAGEGIES
    • Start with lowest
    • Design for semantics and structure
    • Add features appropriate for baseline devices
    • Add features appropriate for accessibility
    • Add layout markup and style sheets for structural layout
    • Add baseline presentational style sheets using link
    • Add behavior (scripts, css hover, etc.)
    • Add workarounds/hacks for recalcitrant browsers
    • Define styles for modern graphical browsers.
  • ADAPTIVE WEB DESIGN
    • Not clear divide between this and response web design. Responsive is more specific
    • Creating interfaces that adapt
        • (use firefox user agent switcher to render as other devices)
        • Using progressive enhancement
        • Examples of adapting
          • If device can access location, enable location-based behavior
          • If device supports touch, enable touch-friendly ui
          • If device supports html5, use it
        • Mobile First
  • RESPONSIVE WEB DESIGN
    • Fluid Grids
    • Fluid Images and Media
    • Media Queries
    • (site takes shape of browser).
    • MediaQueries.es for examples of adaptive web design.
    • ASP.NET MVC 4 provides adaptive in default project.
    • @media keyword in CSS.
    • Resolution independence
  • MOBILE FIRST
    • Embrace constraints, don’t fight them.
    • Ony eyeball, one thumb
      • Forces you to focus
        • What content must be delivered?
        • Is chrome necessary?
        • Rich context aware applications.
  • ACCESSIBILITY
    • Design for all visitors
      • Screen readers
      • Color blindness
      • Hearing impaired
      • Navigation, images, forms
    • Not just about design for people with disabilities
  • BROWSER GRADES
    • C-Grade
      • Based level of support
      • Identified, incapable, antiquated and rare
    • A-Grade
      • Highest level of support
      • Identified, capable, modern and common
    • X-Grade
      • Unknown, fringe or rare browsers as well as browsers on which development has ceased.
  • TOOLS
    • CSS
      • Embrace CSS
        • CSS Zen Garden csszengarden.com
          • Links on right switch CSS to completely change the site with zero HTML change.
        • CSS1k.com
          • Examples of what 1KB of CSS can do to how a website looks.
  • HTML5
    • Clark Sell and Brandon Satrom
    • Microsofties
    • At CodeMash
    • HTML
    • CSS3
    • JavaScript
    • Semantic HTML
      • <div>
      • <div id = “header”>
      • <header>
      • <article>
      • <time>
    • Data attributes
      • Any attribute that starts with “data-” will be treated as a storage area for private data
      • <data-role>
      • <data-role = “header”>
      • <data-role=”footer”>
    • Viewport (browsers tell you what resolution they can handle – phones will lie)
      • Visual Viewport
        • The part of the page that’s currently on-screen
      • Layout Viewport
        • Doesn’t change in size or shape
        • Varies per browser
  • MEDIA QUERIES (w3 site has it all)
    • Width
    • Height
    • Device-width
    • Devbice-height
    • Orientation
    • Aspect-ratio
    • Device-aspect-ratio
    • Color
    • Color-index
    • Others.
  • FRAMEWORKS
    • MVC 4
    • Twitter bootstrap twitter.github.com/bootstrap
  • EVERYONE AGREES
  • Emulators
    • Shrinking your browser isn’t a perfect example.
    • Use real emulators if you have them.
    • Android-emulator.org
      • Has emulators for multiple mobiles including Ios
  • RESOURCES
    • Alistapart.com
    • Css3pie.com – to get IE 6-9 capable of rendering several of the most useful css3 decoration features.

CodeStock 2012: What’s New in .Net 4.5?

imageBelow are my raw notes during the “What’s New in .Net 4.5?” session at CodeStock 2012 on Friday, June 15th at 1:50 PM / 70 min.  This session was hosted by Layla Driscoll from Microsoft.  She’s on the Silverlight CLR team.

Click here to follow me on Google+.

Follow me on Twitter @CSharpner.

And below are my crude, raw notes taken during the session, only minimally cleaned up.


This sample will use:

  • Async & await
  • Asplnet web api
  • Entity framework

Creating a Metro app

  • Multiple tiles
  • Drill down into them for more stuff.
  • Using some sort of MVC type of development.  (Really?  For a DESKTOP app??!?!  I’d heard of this, but that’s the LAST way I want to develop a DESKTOP app… you get the worst of both worlds… no advantages of a native app and no advantages of web deployment and all of the frustrations of both.  Though, it’s cool you CAN do it… I’d just never do it that way.)
    • Looks like it’s a web app, but it’s a Metro app.
    • Controllers are deriving from ApiController
    • Type called Feature.
    • (Note, code snippet below is incomplete.  Remember, I typed this in “class” as fast as I could…)
    public class FeaturesController: ApiController
    {
        private Feature[] features - {{new Feature{Id=1,Name="LINQ"}, new Feature{Id-2,Name="OptionalParam"}};
        public Ienumerable<Feature> Get()
        {
            return features;
        }
    
        //Feature is her own plain old class with several fields in it.
        public Feaure Get(int id)
        {
            var feature = features.SingleOrDefault(f=>f.Id=id);
            If (feature == null)
            {
                var resp = new HttpResponseMessage(HttpStatusCode.NotFound);
                Response.Content = new StringContent("Feature not found");
                throw new HttpResponseException(resp);
            }
        return feature;
        }

Async keyword can be placed on methods like

 

private async void blah()
{
    using (var httpClient = new HttpClient()
    {
        httpClient.MaxResponseContentBufferSize = 1024*1024;
        var response = await httpClient.GetStringAsync("http://localhost blah blah");
        var list = JsonConvert.DeserializeObject<List<int>>(response);
        foreach(var I int in list)
        {
            response = await httpClient.GetStringAsync("http://localhost blah blah" + i);
            var f = JsonConvert.DeserializeObject<FeatureDataItem>
        }
  • Use nonvolatile for locking code. (or did she say non-locking?)
  • Win32 API (or whatever it’s called now) looks like managed code… no DLL import crap.
  • New large object heap. Anything 85,000 bytes.
  • Multi-core JIT
  • Prefetcher
  • ReadOnlyDictionary

New to Android? Here’s what you need!

Starting in a new computing environment can be confusing and stressful for many reasons.  I’ll provide you the knowledge base, the apps, and the community resources you’ll need to have a good experience on your new Android device.

Click here to follow me on Google+.

Follow me on Twitter @CSharpner.

(Image Credits: https://www.aimagin.com/products/training/android-beginner-workshop-reviews.html)

Android is more than just an OS (Operating System) or “a phone”.  It’s an ecosystem made up of the OS, the phones, as well as tablets, TVs, computers on a stick, notebooks, wrist watches, health monitors, appliances, a platform, a community, a mindset, and the whole is greater than the sum of the parts.  So, with your new Android device, you’ve moved into a whole lot more than just your new phone (and I’m making a wild assumption that your new device happens to be a phone as it could have been any of the items listed above, or even something else).

There’s a LOT I could talk about here, but since this is focused on just what you need to get started, I’ll try to hold myself back.  I’ll also restrict this discussion to just phones and tablets.

What’s Not unique about Android?

Let’s begin with what you’re familiar with.  You’ve probably used a smartphone or a tablet by now.  If not, you’ve certainly used a Windows, Linux, or Mac based PC before.  Android is somewhat similar to those in that it provides you with a GUI (graphic user interface), usually on a mobile device.  That user interface is optimized for touch input.  You have the familiar things you’d expect in any GUI such as buttons, lists, check boxes, etc…  Being optimized for mobile devices, it also has video keyboard support, and of course, support for touch screens.

Since it is an OS, you also get app stores and apps which can take advantage of the capabilities of your mobile device.  Most mobile devices have many (if not all) of the following hardware capabilities:

  • Touch screens
  • Speakers
  • Microphones
  • Cameras (both snapshot and video recording)
  • Wireless network capability
  • Mobile service radios (cellular network capable)
  • GPS
  • Compass
  • Physical keyboards (with real buttons)
  • Expansion slots for more memory
  • data/power ports
  • NFC (Near Field Communication) chips
  • Thermometers
  • Barometers
  • Bluetooth communication

among other features.

What’s Unique about Android?

There are many things unique to Android, but seeing as this is a beginner’s guide, of sorts, I’m just pointing out some of the highlights.

Android separates itself from the others in that it is an open system.  This word “open” has multiple meanings.  In one sense, it means that the source code to the OS is available for any programmer that wants it to make changes to the underlying capabilities.  It also means that anyone is free to make modifications to it and sell their own hardware running the Android OS.  But, what does that mean for YOU?  After all, most people are NOT programmers nor hardware manufacturers and have no desire to be.  So how does that help YOU?

Since Android is free for anyone to use, there is a plethora of Android devices on the market.  You’re not limited to just ONE or a small handful of models to choose from.  What ever form factor you want, there’s one (or probably many) available that fits your needs running Android.  If you must have a physical keyboard, then there are many many Android phones and tablets with physical keyboards, as one of many examples.  There are devices with large screens, with small screens, with hi-res screens, with low res screens, with sturdy, expensive hardware, with cheap hardware, with hi end devices, with low end devices, and everything in-between, expensive devices, and budget devices.  Whatever your cost budget or your hardware needs, there’s a device for that.

It also means you’re not limited to getting your hardware from just ONE company.  You’re not limited to just one or a small handful of cellular providers.  Android devices are available everywhere.

Another notable feature is that you’re not locked into a single app store.  You can install apps from where ever you like.  Apps also register their capabilities with the OS.  In other words, Facebook, Google+, and Twitter, when installed, announce to the OS that they are capable of sharing content.  So, whenever you use an app that’s capable of sharing content, like a browser sharing a link, or a photo app sharing a photo, when you tap the “share” icon in whatever app you’re using, ALL the apps you have installed that are capable of sharing content will appear to let you choose which app or service you want to use to share that content.  The great part about that, aside from the obvious, is that apps don’t have to be written specifically to “know” about all these services.  They only have to be written to tell Android they have content to share and to hand it over to Android.  Android then passes it along to the app or service that the user chose from the list and that chosen app or service takes it from there.  Neither the original app that created the content, nor the app that received and published it need to know anything about each other.  That’s all handled by the Android OS.  This makes capabilities of apps sharable between apps without any app needing to know anything about any other app.  Say, for example, you install some obscure photo editing app, then 3 years later, some new social network shows up and provides an Android app.  Your 3 year old photo editing app, that you may not have even updated, can easily share to the new social network that didn’t even exist 3 years ago when you installed the photo editing app.

What can I do with an Android device?

You can do pretty much the same things you can do with most other, modern, mobile devices.  You can make and receive calls (if your device is a _phone_ of course, or is internet enabled and has a microphone and speakers), browse the web, download apps, calendar, contacts, games, finances, social networking, GPS, etc… etc…

What do I need RIGHT NOW?

Security:

As with any computer system, the first thing you need to do is to secure it.  In spite of popular belief, Android is NOT less secure than iOS. In fact, if you use it right, it’s MORE SECURE THAN iOS!  These are the security issues you’ll encounter on a mobile device (ANY mobile device, regardless of who makes it or what OS it’s running):

  • Hardware loss or theft.
  • Exposing your private data like contacts, phone log, browsing history, social networking posts and friends, E-Mail, credit cards, bank accounts, web site logins, home address, work place, children’s names and ages and schools, etc…  Anything you access on the internet via your phone and any data you enter into your phone, including where you are now (GPS) and exactly where you were at any given point in time.
  • Malware.

Install Lookout Mobile Security right now.

Lookout Security & Antivirus

It will help with all of these issues.  Another good one (but doesn’t check for viruses) is Cerberus anti theft.

Cerberus anti theft

Cerberus is also great for keeping track of your kids’ where-abouts.  One of my children recently when on their first out of town, over night, field trip.  I was able to check in to see where they were at an given time.  I could even see them driving down the road on a map.  It’s a great peace of mind.

Communication:

There are multiple ways to communicate with people with a mobile device:

  • Phone call
  • Text/SMS
  • IM
  • Social Networks like Google+, Twitter, Facebook, etc…

I highly recommend installing Google Voice (NO! NO! NO! NO! NO! NO! NO! Despite it’s name, it’s NOT to reduce your cell phone minutes!!!! It’s for everything BUT THAT!)

It never fails!  Every time I mention Google Voice to someone, they always respond with, “Well, I’ve got unlimited minutes, so it’s pointless.”   Jeesh!  It’s NOT FOR THAT!  It’s a poorly named service because “voice” is NOT what it provides.

Google Voice provides the following features:

    • Instant Messaging (Google Chat)
    • Instant Messaging with voice.
    • Instant Messaging with video.
    • FREE TEXTING!!!!  (Again):  I must constantly battle the next response I always get, “But I have unlimited texting”.  Most likely you’re paying extra for that service.  I recommend dropping that and asking your cell provider to block all texting (so you don’t get charged for spam messages).  Then, you can continue using texting COMPLETELY FOR FREE!!!!!!  See this article:

Google Voice: Free, unlimited texting on your cell/mobile phone!

DON’T install the Facebook app!

Facebook is notorious for continuously, without end, violating your privacy on multiple levels.  I personally recommend staying away from Facebook altogether, but if you just can’t pull yourself away, at least access it from your mobile via your web browser ONLY… NOT via the mobile app.  Just do NOT install it.  The app itself has been found to violate your privacy.  You DON’T want it on your phone!

Also, when you access the Facebook website, be sure to put “s” after the “http” in the browser’s address bar.  In other words, your browser should be at https://www.facebook.com with an “s” in there after the “http”.  Otherwise, you’re on an UNENCRYPTED PAGE where you’ll be entering your login name and password in clear text, broadcast over the internet, and possibly in the clear over the wireless network at Starbucks or the library or your school or anywhere else (one of the many problems with Facebook security and privacy).  This is NOT an Android issue, it’s a Facebook issue! 

Now, back to Google Voice.  I did say that the purpose of the Google Voice app has NOTHING to do with making free phone calls from your mobile phone.  And I stand by that.  But, there ARE other apps available that WILL give you free phone calls (and they do it using your Google Voice account).  They do this by using VOIP (Voice Over Internet Protocol).  In other words, they communicate over your cell provider’s DATA network as opposed to its VOICE network.  You get charged from your allowed minutes if you use their VOICE network, but NOT if you use their DATA network.  Be careful though, because it DOES use bytes on your data plan, so if you have a LIMITED data plan, you’ll want to keep track of your data usage… but digitized voice over data is a pretty low bandwidth usage. 

Again, if you tell me you get unlimited minutes again, I’m going to slap you silly!  You might be one of the few that doesn’t have to pay extra for unlimited voice.  But, if you’re in the majority, you’re paying EXTRA for unlimited voice.  With the right apps installed, you can drop the cost of your monthly bill down considerably by getting their lowest minutes plan and blocking text messaging.  I’ve already covered free texting above.  Now, here’s how you get free minutes for phone calls too:  Free Cell Minutes.  As an example, I have 5 phones on my plan and 4 of them have unlimited data.  We have the lowest possible plan we can get as far as minutes go (750/mo. shared with 5 people).  My Total bill each month?  $144.  And because of how we’re using Google Voice appropriately, we end up having unlimited voice, text, and data on 4 of the 5 lines.  (The 5th line is for my aunt who simply wants a plain old phone).  Most people I know can barely keep ONE phone below $144/mo.  As you can see, using this right saves you TONS of money.  If you’re wondering… I use T-Mobile.

That’s about all you Need right now, but there’s plenty more you’ll likely want and I’ll cover some of those on an ongoing basis, so keep checking back and follow me on Google+.

Click here to follow me on Google+.

Follow me on Twitter @CSharpner.

See these images?

imageimage

You’ll find an actual working versions of them at the top and bottom of this article. Please click the appropriate buttons in it to let your friends know about this article.

Check back later for updates too!