Shawn Wildermuth

Author, Teacher, and Filmmaker
.NET Foundation Board Member

Stories

Tagged with HTML5


New Course: Front-end Web Dev Quick Start

It’s that time again. I’ve recently released a new course on Pluralsight. This time I tackle Web Development for complete beginners.

If you are a developer who wants to move from either back-end development or from desktop development to client-side web development, this course may be for you. The concept around the course is to get you up to speed with the very basics of web development in a short amount of time. In fact, in just over three hours, you should be able to get a basic understanding of web development.

After viewing my course, there are other courses that will take you through deeper knowledge of modern web development, but the basics is where you should probably start. In the course we cover the bare bones that you need including:

Read...


Zen Coding (Emmit) with Visual Studio

As many of you know, I have a new course with Pluralsight called "Building a Site with Bootstrap, AngularJS, ASP.NET, EF and Azure". I had the opportunity to use Zen Coding (renamed Emmet for some reason) in the course. We've released a snippet of the course on YouTube that shows off this cool productivity enhancement that Web Essentials powers. Caveat: Web Essentials doesn't work with free versions of Visual Studio.

NOTE: The title of the video is incorrect and we're trying to change it...it is about Zen coding.

UPDATE: It was noted that I misspelled it. It's Emmet not Emmit. I fixed it in the article, but I can't fix it in the title as that's my URL too.

Read...


Building Atlanta Code Camp Website

I recently helped the Atlanta Code Camp effort by building them a new website. You can see it here: Atlanta Code Camp.  I am pretty proud of what I was able to accomplish in the scant number of hours I had to build it. It's not done as we need to improve it when we have the speakers chosen and set up the schedule, but so far I am pretty happy with it.

I had a number of goals for the project:

My first thought was to start with a Mobile-First template and just build the site but as #4 was going to stymie that as PluralSight would really like me to finish my courses ;) So I started with a Bootstrap template (that I got from https://wrapbootstrap.com). This provided a good basis for the shell of the website. Before I did real color skinning of the site, I needed to wait for our logo. Dennis Estanislao did an amazing job on the logo. With that I was able to use the color scheme to change the template to match the logo and overall theme. But that was just the HTML part of the story.

Read...


The New Design

TeachingOnGlassAfter my recent talk on Mobile-First Design, one of the attendees tweeted that he thought it was ironic that my talk was on responsive design but my blog wasn't mobile-friendly. I told him that my company site was…but that was a cop-out. I hadn't had time to get the blog setup with a good template. So voila! I haven't confirmed that everything works the way I want but we should be close!

As some of you might not know, I don't use a blog engine (it's just a custom ASP.NET MVC site). What I love about ASP.NET MVC, is that since the markup so fairly separated from the code (I try and use as little actual Razor markup as possible), skinning it with a new Bootstrap template was pretty simple. It took me about 8 hours to convert it all.

Let me know what you think…

Read...


My Practical PhoneGap Course is now Live!

If you're interested in cross-platform mobile apps, I like the solution that PhoneGap has. It uses HTML5/CSS/JS as the UI stack and I find it compelling to build apps for iOS, Android, Kindle, Windows Phone and Windows 8 Store. I've just released a new course on PhoneGap that attempts to fill in some of the holes in building apps.  The course includes:

Hope you enjoy the course. You can view it here:

http://pluralsight.com/Courses/practical-phonegap

Read...


PhoneGap and Windows 8

Traffic accident and to drivers fightingI've created a new example of a PhoneGap app for my talk at the Atlanta Windows Apps meeting. The talk I did tonight didn't go all that well, but I got it working and the result is something you can download and see how to use a minimum of WinJS to build your Windows 8 apps.

The example PhoneGap app sourcecode can be found on GitHub:

Additionally, you can see the Win8 version by downloading the project I built during the talk:

Read...


Building Cross-Platform Apps with HTML: Part 1 of 4

mobiledevices_clipOne of the things that I’ve been spending a lot of time working with lately is the ability to be able to build cross-platform apps. While I spend a lot of time in the Microsoft space (especially Windows 8 and Windows Phone 8), I need to be able to create and deploy apps to iOS and Android platforms. I've decided to do a series on building one of these using Single Page Application for the web, then deploying it to devices via PhoneGap:

There are a number of solutions for cross platform apps (e.g. MonoTouch/Droid, et al.)  The types of apps I am building are just consuming or displaying information from a standard web back-end (e.g. REST services).  Because I typically need to build a responsive website for the solution as well, using a solution that could share some or all of it’s code with the website is a good match.

Using HTML5/JS/CSS to build apps isn’t perfect. Not all apps are a good candidate for this type of cross-device development, but I like to think that for many v1 apps, this is a laudable solution. In many cases, these apps are plenty functional for the life of the app, and in other cases it provides a fast-to-market solution so that a full native experience can be built after the app is initially launched and validates that it fills a market need (classic Minimum Viable Product strategy).

Read...


Clarifying Windows Phone 8 HTML5 Apps

If you made it to build or spent much time watching the videos one of the stories many heard from Microsoft revolved about creating HTML5/JS applications for the Windows Phone 8. Unfortunately the story confused a lot of people (at least by the questions I've been getting lately.

Let me be clear...you *can* create HTML5/JS/CSS applications for Windows Phone 8. Yup. In fact, you could do it with Windows Phone 7 and 7.5. This is how PhoneGap works. The XAML page simply hosts a WebBrowser control and loads all of the assets locally in the XAP. What you can't do is create WinJS application. Let's step back a little and explain that better.

Windows 8 and Windows Phone 8 were both highly publicized releases this last week. One of the things that is not all that obvious to the casual observer is that the biggest change to Windows Phone 8 is that the underlying operating system now uses the same core as Windows RT (e.g. Windows 8 for ARM). In fact, the new phone SDK supports DirectX, C++ and creating WinRT components.  All very cool.

Read...


Great Time at Gwinnett .NET Users Group

mobiledevices_clipI headed up to the Gwinnett .NET Users Group last night had we talked all about mobile web development using ASP.NET! If you were there, thanks for attending and here are the slides and code as promised!

If you had any questions that you didn’t get to ask at the talk, just comment below.

Read...


aspConf was fun!

I had a good time doing a couple of talks today. If you joined me online, thanks for coming. For those who missed my talks, they will be posting the videos on Channel 9. As promised you can get the slides and examples here for my talks:

I hope you enjoyed the talks!

Read...


New Pluralsight Course on Debugging Web Sites

After a long gestation, I finally completed my Web Debugging course for Pluralsight. This new course covers the details of using the tools in the browsers to debug layout, JavaScript, CSS and networking. While the course shows you how to find the tools in all the major browsers, the focus is using Firefox and Firebug. Though the techniques shown in Firebug apply pretty seamlessly to all the browser tools. This course is not .NET specific, but should be useful to any web developers.

The course is broken up into four sections:

You can see the course here:

Read...


Atlanta Code Camp Wrap-up

I had the pleasure of joining many of the Atlanta .NET community for the annual Atlanta Code Camp. If you didn't get a chance to join us, you missed a great time. The attendees were enthusiastic and friendly. Thanks to everyone who attended!

I promised the people who attended my sessions I'd post the slides and example code so here you are:

Mobile Web Development

Read...


JavaScript for the C# Guy: The Global Object

codeThis is another in my series about (hopefully) interesting JavaScript constructs that might surprise most C# developers. You can see others here: JavaScript for the C# Guy.

Back in the day I was doing some scripting in classic ASP sites (no, not classic ASP.NET) and we screamed and yelled about putting too much in the global scope. We wanted encapsulation and such and that is true today. In my C# work pretty much everything is in a class (static or otherwise) so I don't have to concern myself with it much.  But in JavaScript I know there is an easily accessible global object...but it occurred to me that I don't see the "Global" object accessed much; even though it is used a bit (to hold other containers that have encapsulated code). "Why not?" I wondered.

In JavaScript you can certainly create things in the global space. In fact, in my Architecting JavaScript post from my Modern Web Development series, I show that using an 'app' object for your site can simplify a lot of things. But the app object needs to be in the global space (e.g. in the "Global" object) so everyone can get to it:

Read...


I've been Deep Fried...Again!

So I've done it again.  I survived another 30 minutes with Woody and Keith. Whew. We had a good conversation about the current state of Web Development and the future of XAML development.

I also got to discuss fried foods and make fun of Keith. Couldn't have been a better time. Go listen now:

Read...


From my Web Dev for XAML Devs Talk

SpaghettiBabyI had the opportunity tonight to do a talk for the Atlanta XAML Meetup on Web Development for XAML Developers. I had fun explaining how XAML developers can use their existing skills with markup, design, data binding and data access on web page development. You can see the slides from the talk here:

If you’re interested in the code from the talk, you can get it here:

Read...


Modern Web Development - Part 6

mortarpestleThis is the sixth of ten parts of this blog post. The topics will be:

The Problem

As you develop HTML apps, one of the issues you’ll face is that your application doesn’t come to the browser in one fell-swoop. A typical web page receives content from a number of sources. Below you can see the first bun of requests from a site (in this case MSNBC.com) as shown in Firebug:

Read...


Modern Web Development - Part 4

This is the fourth of ten parts of this blog post. The topics will be:

Debugging

I’ve had Visual Studio open constantly on a laptop for the better part of ten years (and fifteen if you count Visual C++). I am used to setting breakpoints inside of the Visual Studio editor and pressing F5 to see what is happening.

Read...


Modern Web Development - Part 3

This is the third of ten parts of this blog post. The topics will be:

What’s Wrong with CSS?

If you’re going to do web development, you’ll need to learn how cascading style sheets (CSS) work. It’s a fine system for defining the look and feel of your designs but as a developer I find them more painful than necessary. Let’s discuss some of those pains.

Read...


The Web Workshop: Client-Side Dev Training

I am excited to announce that I’ve refactored (and renamed) my web-centric training course. The old “ASP.NET MVC/HTML/CSS Workshop” was just too long. It’s now called “The Web Workshop”.

This course is concentrating on client-development for the browser. The course will cover client-side development for HTML/JavaScript/CSS development including browser-based sites and mobile browser development. While the course will cover using ASP.NET MVC 3 for doing the server-side code, the focus of the course will be in the client development. This means most of the course will cover the new skills that web developers need including:

Read...


Modern Web Development - Part 2

SpaghettiThis is the second of ten parts. The topics will be:

Working with JavaScript can be daunting. In the past, I’ve seen some projects with just a handful of huge files that become difficult to manage. So in architecting what I needed to build, I wanted to adhere to the idea that there was common code and there was view-specific code. There are two different classes of JavaScript that I care about: libraries (i.e. not my code) and site code (i.e. my code).

For now, let’s segregate these two types of code into separate directories as shown below:

Read...


Modern Web Development - Part 1

This is the first of ten parts of this blog post. The topics will be:

In the past year I’ve had a side project. FirstInked’s Beta recently shipped and I wanted to share with you what I’ve learned. To start out, I want to specifically thank two people who were really great in helping me formulate the strategies I’ll talk about. They are:

Where I Came From

Read...


I am Coming to Washington DC for 2 Classes

If you are in the Washington, DC area (or are close enough to fly), I am coming to teach two courses just after Thanksgiving.

The Silverlight Tour

Read...


What about Metro JS Projects and jQuery?

I spent this week at Build and was interested in both the XAML and HTML/JS part of the Metro story. I am in the middle of converting GooNews into both HTML and XAML Metro apps to test out the new APIs.

I have to admit, I was nervous at first because this in the keynote:

9-16-2011 10-28-27 PM

Read...


In a Perfect World? Build Conference Wishes

BuildConferenceI am headed to Build Windows next week and I have a lot of hopes for the conference. I haven’t been to a conference as an attendee alone in quite a long time. I am anxious to see what the v.Next is out of Redmond.

I didn’t get to go to the 2000 PDC that changed everything…so I really wanted to be here for this conference. Is this going to change everything again?  I have no earthly idea but I hope for a mix of new and old. 

Here is what will happen at Build if this were a perfect world:

Read...


Atlanta MS Pros HTML5 Presentation

Silverlight Logo

I recently presented on HTML5 (with a sidebar on Silverlight's role in HTML5's world) at the Atlanta Microsoft Professionals' User Group (AMP). I promised them i'd share my slide deck from the talk. So here it is:

http://wildermuth.com/presentations/html5.pptx

Read...