70-480: Programming in HTML5 with JavaScript and CSS3

About this course

hello hello hello welcome to Windows 8 development Windows 8 app development with the web platform we are really excited we’ve got tons of content today my name is Jeremy Foster and this is my

buddy Michael hi we are going to be covering some really cool topics over the next couple of days and I hope that you guys just stay in your seats and I hope you have a good time yeah I’m very

excited about all the content that we’re doing today in fact so much so I know we both want to just dive in but I think a good idea is to least let you know who we are a little bit I’d love to

introduce you Jeremy and and I’m going to let everyone know Jeremy’s been with Microsoft now almost a year he’s a member of our evangelism team and the thing that I really enjoy about Jeremy

in fact I think the reason why we connected and worked so well is because we have a passion for this topic but I love how much he he is so fussy about the details on his blog and when he does

any writing so if you’re really interested in understanding something how it really works and you want to see code written the right way I think of Jeremy’s and I’ve learned a lot from you

so far so I’m excited that I’m doing this with you well just because it compiles and passes the unit tests doesn’t necessarily mean that it’s written right right right absolutely

well I’m equally excited to be working with Michael Michael is the author of multiple books and online videos that I have personally benefited from so thank you for that Michael’s got lots of

industry experience in web he is in my opinion rocking the web stack so it’s going to be it’s going to be good working with you here on screen Thanks so let me tell you what we’ve got in

store for you we’ve got a course that’s going to last two days and it is accelerated certification prep jumpstart why don’t you break that down for him what does that mean well you know we do

have the certification thing in there but I think what is really exciting about what we’re doing is that all the content that’s going to be covered which goes into this 74 80 which is developing

an html5 a Java Script and also the tomorrow’s stuff which is the 70 – 481 which is really creating the apps with it all this content is really derived from real world experience from us being

out in the trenches doing all these events I absolutely love the fact that we’re bringing this to the table and that it aligns so nicely with these certs yeah

absolutely it is an accelerated course so we’re not going to have hands-on labs where you’ve got the code show project that you’re welcome to follow along on but for the most part we’re going to be

really moving through a lot of content so so we’re going to kind of white-knuckle a little bit the code show project is going to be pretty integral to what we’re doing today I’m going to

jump out and show you this if you go to code show CodePlex comm and then go to the source code tab not the downloads tab because that’s going to get you releases which there are none right now

but just go to source code and you’re free to browse the source code online or go over here to download and download that source code that’s available to you at any point

these are 1-day versions of five day courses what’s normally done in five days we’re going to try to pack into one day each yeah so I mean we’re saying accelerated we really truly mean it and

but it you know if you are the type that really really enjoys having that slower experience and you should reach out to a Microsoft Partner and look for these courses that they might be available the

70 or no the 24 I’m sorry tooth out two zero four eight zero a but I couldn’t even that was a tongue twister and two zero four eight one a both of these are courses that map to those

exams absolutely so here’s what we’re going to be doing over the next couple of days on the left you see day one on the right day two so today we’re going to be sticking to the topics of the web

platform pretty generic web platform we’re going to talk about HTML CSS and JavaScript there will be some Windows eight topics that sneak into today because it’s definitely relevant but

then tomorrow is where we’re going to dive into the Windows 8 platform itself yeah so when you think about today I like how you said it think about that we’re emphasizing all the good features

of the web platform development you know all those features yet at the same time what we’re really interested in doing is showing you how that’s going to lead up into app development for tomorrow

absolutely really excited about that well Michael is going to go ahead and get us started and the topic that we’re going to start with is HTML semantic structure yes so

what do we mean when we say html5 semantics structure well at the end of the day there are so many people that are interested in web development and

specifically right now the html5 content and there’s sometimes some mystery as to what does it mean to have semantic elements so let’s go ahead and dive in and take a look at our agenda we’re

going to be focusing on semantic tags first and then we’re going to get into how the forms have changed a little bit with html5 cover some of the eye candy pieces I guess you would call it from

html5 with audio-video canvas and SVG we’ll sprinkle some demos in throughout let’s start right now by considering this perplexing situation now Jeremy and when you look at this and you see you

know these divs with these IDs in these classes but do you think that this three four years ago looked somewhat familiar oh yeah absolutely looks very familiar to me so

you know and so did the powers behind html5 you know that they looked at this and realized there’s so much repetition going on with people creating headers or Navs or articles or whatever the case

was so why not do this and just formalize all those things that are typically done in web apps today so these semantic tags are made available so that we can just say hey you know

what instead of having an ID or class to kind of give that attribution let’s give it make it a first-class citizen within the market so what are some of the new features or new semantic

tags we saw a couple in the in the previous kind of conceptual looking graphic but these are elements that map over they gives an idea of what the block level would be or if it’s text

level and what its purpose is but I find of course and I’m sure you’re the same that it’s usually best to see in a demo so I’m going to do that in just a moment the other factor with html5 is forms and

I think there’s a lot of exciting features that just came out with forms so consider this particular situation where we have you know a classic form asking for aim email site and phone well

some of the new attribution would be allowing that text type for input to be marked as required and you’ll notice right now on the screen that the required attribute is standing alone by

itself and that’s interesting what is it how does that make you feel first makes me feel a little bit non-standard yes it does feel that way uh you know and I want to highlight that because of that a

lot of people like to actually put the required equals and then still put like the word required in quotes what you’re allowed to do but it will work that way which is kind of interesting all right

let’s go back over here and check out email so email is a classic thing that is asked for now we’re marking it as required but we’re also saying hey let’s provide a little placeholder a

placeholder that says let’s give them an example you know kind of like a traditional watermark that you would just have in the background so that’s how easy it is to do now in html5 you

can do the same thing here with site type URL and with phone I thought I’d introduce that you could also in addition all the things we’ve talked about before you know like we can market

required placeholders we can actually provide you recognize what’s in that pattern yeah almost like a phone number hey looks like an odd phone number you know that’s a regex pattern so we can

actually put in customized stuff if we don’t like the way the the default pattern would be for a phone then we can say well we want it to be this way because you know phone numbers all over

the place are are different well I think it’s time for our first demo let’s do it so if this is an important demo it’s our first demo of day one and what we want to focus on right now is the fact that

we are going to be showcasing for you some web stuff but now we’re going to kind of sneak in how it’s going to be done so let’s go ahead and look at visual studio here I just opened Visual

Studio 2012 I am going to create a new project and I’m going to call the prime going to use a blink app and you’ll notice over here on this side it says JavaScript and it says

Windows Store so it but it does say JavaScript which is good and I’m going to create a little project here called Wow bring in a sandbox something so I’ll put

sandbox here whoops sorry let me do sandbox jump start there we go that’s going to create a project here now I want to immediately ignore this

JavaScript because that’s Aven even talked about javascript yet I do want to focus however on the default HTML page and as we look at this markup here now now Michael can I interrupt you first I

don’t ask you a question are you creating a website here well I’m glad you asked that question we’re not creating a website although that looks like a web page it looks like a web site

to me I mean inside of this HTML we have references to CSS we have references to JavaScript it looks like HTML markup and and that’s the good news because anybody who’s going to be doing any kind of web

development is going to immediately feel like hey this is familiar territory you know right so far so good yeah now what I want to do though is show how it’s going to be slightly

different I’m going to collapse the the header section for a moment and and you know if anyone’s watching and think why do you do that well there’s some references in here that we’ll get into

at a later point but I just want to collapse it for now and just say let’s just look at this markup as simple as it is on the screen right now my goodness it’s just a doctype declaration which is

a the standard for html5 you know we don’t have all that crazy metadata stuff at the top anymore a simple HTML opening and closing tag and right inside here in the body we just have you know some

simple stuff I could run it at this time would you like to see what that would mean to run it yeah sure so I’ll run on my local machine now really difficult to see but there is

this content goes here now where’s the browser you tell me exactly there is no browser we’re actually running in an app so that’s going to be the same thing all

day we’re not going to over explain that this is the only time today we’re going to say it all our web stuff is going to be tested in the context of a net it’s crazy so I’ll switch back over here and

we’ll be getting more also into visual studio and some of its features tomorrow as well so I’m just going to focus on the text editing features of creating some cool markup so I’ll get rid of this

default I’ll stop the app for money I’m going to get rid of this default paragraph tag that was kind of boring why not add a section and you know what I’m going to add a style an inline style

for right now reason is you know people understand that sometimes what we have on the in our markup is not exactly I didn’t like that content being so far up in that corner I don’t know about you

but it was hard for me to see so I don’t know I’ll just randomly choose what 120 pixels left that sounds like a good number is that good with you yeah that sounds great

okay and the margin top I’ll probably bring it down 45px so that feels good and I’ll close that section out and you know so what is a section a section is it’s the ability to define content on

the page without formally saying that it’s all together complete it which is what makes it different from article right because the article semantics tab would say I could be fully syndicated

just with the content that I have and wouldn’t surprise you if you found like within a section or within an article multiple sections but think of it as a section wouldn’t be standalone now I’ll

introduce another one how about an HG group it’s really hard for me not to talk about these visual studio features with the intellisense that are good that’s going on and h1 tag inside of an

H group will say markup h2 tag say this is a demo and let me check out and see how this looks so you can see up here in the corner h1 tag and the demo this is kind of how we do title

subtitle with the new semantic markup with h0 you know with our groups I’ll close that down one way to close down an app by the way it’s just grabbing it at the top bringing it down and swinging

back over into our desktop mode I usually hit alt f4 that works too so now I’m back into the code and let’s talk a little bit about forms maybe I can add a little form tag right here showcase one

of those features so I will put a paragraph tag that says you know what are your favorites and indicate afterwards that I’d like an input tag maybe the inputs going to be I’ll say

it’s ID is a you know favorite URL and the type and when I hit the intellisense here pulls up a list of all the different types in that input which is again a nice feature of visual studio

and sure enough down in here of all the new types there is a URL of course that’s a standard I am going to use the required and I’m going to say required equals required just so it doesn’t look

wrong to either one of us because you know we’ve been in that world so much and I’m going to say the placeholder I’ll make it equal oh why not I’ll just choose something like dub dub dub

Palermo 4.com shameless it’s just shameful that I just that plug right there but I’ll just use my website there now because I’m using an input tag like this I am going to create a form tag as

well and put inside I’m going to take that input out and just put it right there little copy and paste magic is what made all of that happen and of course I’d

like to submit this so I’ll put in an input type equals submit and you know I’ll say the value is will do some kind of fictitious saving of that favorites all

right so Oh better close that tag let’s see how this one looks when we run it and what the benefit is of all these new structural and semantic things so I you can automatically see that watermark in

the background right you know that Palermo 4.com kind of says hey this is how the site could look I’m going to click Save and it say hey no this is a required field sweet well if it’s

required I’m going to say okay I understand it’s required now I’m going to click Save again it’s like no you must enter a valid URL it’s like all that out of the box I didn’t have to do

any other coding to get that kind of validation done so if I actually put in a valid website something like dub dub dub code foster dot-com another just shameful plug yeah it’s just shameless

so I’ll go ahead and click Save let’s see what happens well what what did it do it actually submitted right and now it just reset itself back to the original value but it did accept in fact

it liked code foster comm FYI so what do you think of those uh new semantic tags I like them I think it makes the HTML you know cleaner to read and you know makes more sense yeah I I agree so and

the benefit here is that you can use all of this within the context of writing an app just like we were doing with the website you know nothing changed you