Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Developing with HTML5

No description
by

kodmunki

on 4 March 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Developing with HTML5

Developing with HTML 5
Modern Distributed Web
from Design through Development
Getting to know our Tools
Integrated Development Environment (IDE)
WebStorm

Version Control System (VCS)
Git (SCM)

Collaboration Tools
Skype
Hangouts
JoinMe
Jing
Integrated Development Environments
Integrated Development Environments a.k.a IDE pronounced "eye-dee-ee," are the the location where a developer will implement their development in the relevant code.

There are numerous IDEs all with their own positives and negatives and many that have features geared toward a specific language, languages, or development paradigm.

With all of these choices, in the course of your development career you are certain to encounter numerous different IDEs. It is recommended that you expose yourself to many of these. You are certain to find favorites as well as some you despise, but as with all things in programming, the more you know, the more valuable you will be.
Version Control Systems
Version Control System a.k.a VCS pronounced "vee-see-ess" and Source Code Managment (SCM), offer many benefits including:

Preventing a developer in a team environment from overwriting the changes of another team member
Development History Tracking
Documentation and Release note management
Source code change notifications

As with most other things in development, there are countless version control systems, they all do things just a bit differently, and in the course of your development career you are certain to encounter numerous.
Collaboration Tools
Depending upon what you career path you decide to take, you may find that during the course of your career you will spend a surprisingly small portion of it actually coding. That said even those projects that demand a large portion of your time to be invested in coding, it is certain that you will have to collaborate with other developers and managers, onshore and offshore, over varying work hours and even across time-zones.

There are a veritably endless collection of collaboration tools, far
too many to list here. A few things are certain though: you will collaborate with others, you will use a varied set of collaboration tools, you will love some, you will hate others.
Visual Studio is a Microsoft product that is primarily used for Microsoft development, e.g. ASP.NET MVC. There are free versions of the software available, though full versions require a license that can cost $2,000.00+
Visual Studio
Xcode is owned by Apple. The IDE is popular for developing C, C++, and Objective-C applications. It is most well known for its use in developing iOS applications. It requires a commercial license costing $99.00. It is free with a $99.00 subscription to their developer program.
Xcode
Android Studio is a free IDE owned and distributed by Google, specifically for developing Android applications. Though there are other IDEs to develop Android applications. This IDE has been gaining popularity.
Android Studio
Web Storm is an IDE owned and distributed by JetBrains. Though it is a fairly diverse IDE, it is very popular with Node and JavaScript developers. It is also loaded with great features for HTML, CSS, SASS and LESS.
Web Storm
Subversion is an open-source version control system. It it is a very successful project and used by numerous companies large and small. Not only does it have a shell, there are some nice GUI extentions, e.g. Tortoise.
Subversion
Git is an open source fast and efficient, distributed version control system
Git claims that "...it outclasses SCM tools like Subversion, CVS, Perforce, and ClearCase with...cheap local branching, convenient staging areas, and multiple workflows."
Git
Data
At the end of the day this is what IT is all about, data. Collecting data, retrieving data, storing data, serving data, structuring data, serializing data, securing data, sharing data, analyzing data, D-A-T-A, DATA!

Before you learn any language you
must
understand data, what it is, how it works, where it goes, what you can do with it, and oh, so, much more.
Entities
Entities are constructs that have an identity. Irregardless of their properties they are what they are because they
are
. Contrast this with value objects*.

An example of an entity would be a person. A person is the same person no matter if they change their name, their social security number, email -- hell, they could have a sex change and facial reconstructive surgery but they are sill the same person. They are an entity.
Collecting, Serving, Marshaling, Serialization and Persistence
Most of these items exceed the scope of this course. They are mentioned here merely for posterity. Know that these words pertain to data, developers might use them, and in the future you will both know what they mean and how to do them. Some, by the end of this course.
Semantics
Semantics is a branch of logic and linguistics that is concerned with meaning. This concept is one of the, if not, the
most
important part of any markup language, including HTML5.

At the end of the day, markup is put in place to give meaning to otherwise ambiguous data.
Structure
Not only does markup add semantics to a set of data, it also structures the data. The structure can be important for various reasons depending upon the project being developed. For example, one structural concern may be human readability, another may be screen-reader readability. Yet another may be DOM traversal optimization. All of these, and many more, may be important individually or even simultaneously. What is important to remember is that as a professional, you should understand what the project objectives and recognize and be able to implement those structure(s) that will add value to the project help to achieve the objectives.
Text*
HTML5 serves many purposes, a few of which are: it contains the data that we want to share with our users, offers hooks to other technologies: CSS and JavaScript, it defines and specifies sections of data that are important on their own, and those data that belong together.
Forms*
User Experience (UX)
Drag and Drop
Canvas
Multimedia
Communication
Offline Web & Persistence
User Interface (UI)
*
*Value Objects
Value Objects are constructs that are defined by their properties. They don't have a real and steadfast identity. An example of a Value Object might be money. Let's say that you are paid $1500.00 your first week as a professional developer. You could be paid in $1.00 bills or $100.00 bills, it doesn't matter, so long as the value is $1500.00. Furthermore, if I had $1500.00 in $1.00 bills and you had the same amount in $100.00 bills we could trade because the value of our amounts are
equal
.

This is important to remember. Value Objects can be tested for equivalence based upon their values. $1500.00 == $1500.00, no matter the denomination. Also, Value Objects have no real and steadfast identity.
Let's take the following data
1.00
What does it mean? What can we infer from this data? Probably not much. What we can likely say is that we do have one. We can probably also say that a certain level of specificity is important. Why else would we show the .00.

At this point though we can't say much more, we don't know if this data is describing a unit of weight, or velocity, or, maybe, time. Maybe, it is not describing anything. Maybe, it is simply one-point-zero-zero. With no further semantics we cannot say much for sure.
...If we add some semantic markup, though...
<div class="product">
<span class="product-name">Candy Bar</span>
<span class="product-price">
$1.00
</span>
</div>
Now, with all of this mark up, we have all kinds of information about our once "1.00". Now, we know that we have a product. That product has a name. The name of this product is "Candy Bar." This product named "Candy Bar" has a price of $1.00.

One thing about programming that you will learn very quickly is that you should not make assumptions ever!

That said what would we still need to better define? Well, we don't know what denomination of money this is. Sure it has a dollar sign, but the US is not the only place that uses this symbol. Because we see the use of the decimal point in the way that we do, we could rule out many European currencies but we cannot declare that we know which one for sure. Also, the product may have a name Candy Bar, but that does not mean that we can deduce it's type. It could be an actual candy bar, but it could be a color of lipstick or a women's perfume, or a paint option on a hotrod. We simply don't know.
...If we add a little semantic data...
$
1.00
By simply adding the dollar sign, we get all kinds of context! Now we know that we have one dollar and zero cents. Granted the zero cents is shyly redundant in this example, but as a convention, this is a common way to express an amount of US Dollars.
Copyright © kodmunki™ All rights reserved.
Developing with HTML5
Modern Distributed Web
from Design through Development

Copyright © kodmunki™ All rights reserved.
Logical, Readable, Maintainable
<product type="TV" sku="1234567890">
<image url="http://images.store.com/tv/123567890" />
<price currency="USD">1599.99</price>
<specs>
<spec key="size">46"</spec>
</specs>
</product>
Mark-up Structure
<sku="1234567890" skuType="1" image="1" price="1599.99USD">
<specs size="46\"" />
</sku>
<skuTypes>
<type id="1">TV</type>
<skuTypes>
<images>
<image id="1" url="http://images.store.com/tv/123567890" />
<images>
Illogical, Unreadable
When structuring mark-up it is often wise to do so in a way that maximizes various structural concerns. For example, traverse-ability, human readability, etc. Look at the following examples, and note that they describe
the exact same entity
!
It is not just semantics that are important. Structure is just as important as semantics. One without the other renders mark-up useless!
HTML5
HTML5 is a markup language that adheres to a specific schema. This means that there are a certain set of defined tags and attributes that are available to the developer. This does not negate the necessities of semantics or structure. In fact, it probably makes it more important! What happens all too often is that developers see this specific set of tags and shut their minds down and start thinking about marking up documents. While this is true and important, it is the wrong foundational mindset. Developers should always be thinking about the Entities and Value Objects that their system is concerned with, and representing them with the tools that they have at their disposal. In this case, HTML5.
An HTML5 Product!
Logical, Readable, Maintainable
<product type="TV" sku="1234567890">
<image url="http://images.store.com/tv/123567890" />
<price currency="USD">1599.99</price>
<specs>
<spec key="size">46"</spec>
</specs>
</product>
Let's take a look at what our logical, readable, maintainable product could look in HTML5. Remember,
these are the exact same entity!
Logical, Readable, Maintainable,
HTML5!
<div data-type="TV" data-sku="1234567890">
<img src="http://images.store.com/tv/123567890" alt="TV"/>
<span data-currency="USD">1599.99</span>
<ul class="specs">
<li class="size">
<span class="key">Size</span>
<span class="value">46"</span>
</li>
</ul>
</div>
As with most items "coding" this is not the only way to markup this product. You will have to find the one the is right for your project.
The Basic Template
All HTML5 documents follow the exact same template.
<!doctype html>
<html lang=en>
<head></head>
<body></body>
</html>
What you can do after you have this is limitless (within the confines of HTML5, of course). The point is, that you should start all of your HTML documents with this template. After that, it's up to you.
<head>
The <head> tag is the first of two children of the <html> tag. This tag will contain data about the text that follows in the <body> tag. The <head> tag may contain such items as <meta>, <link>, <script>, <base>, and <style>. The <html> tag
requires
a <title> tag child.
<!doctype html>
<html lang="en">
<head>
<title></title>
<meta name="keyword" content="SEO">
<link href="http://www.URL.com" rel="stylesheet">
</head>
...
<body>
The <body> tag is the second of two children of the <html> tag. This tag will contain the data for your web application. So long as the markup that you put in <body> tag is valid, well structured HTML5, you can do anything that you can put anything in it that you would like.
...
<body>
<img src=URL alt="myAlt" />
<DIV id="1">
<span class="myClass">myText</span>
</div>
</body>
</html>
You will notice that there are few rules about casing and quotes. Although this is the case, you should conform to a style and stick with it. Though, remember: when you are on a project with other colleagues the choice of style may not be solely or at all your choice. Even so, the choice for the project is the choice you must stick to.
Body Structure
Just as with all markup the body of an HTML5 document needs to be structured. Because the structure for such a document is extraordinarily common, HTML5 offers tags to help bring structure and semantic value to the main areas of the document. Namely these are: <header>, <footer>, <section>, <article>, <nav> and <aside>. Not only to these tags give us the sematics and structure, but they are tied to some cool algorithms that give us even more power!
<header>
Didn't we already cover this? -- Nope! That title says "<header>"
not
"<head>". This one can be tough for noobs. Not because its actually
hard
but its tricky. Try a mnemonic device like, maybe,
"Header is better!"

The "
b
" in better means
body
. Therefore <header> goes in <body>. So where does a header go?

"Header is
b
etter!" That's right --
b
ody!
<section>s and <article>s, <article>s and <section>s
Sections and articles markup documents into structural and semantic -- you guessed it, articles and sections.

Articles and sections are similar to what divs are. They partition a part of the body into an area that will contain items that belong together. The big advantage here is that these two tags also offer access to the
outlining
algorithm and
accessibility
in ways that divs never could.

Why are these being discussed together? Because, they go together. Articles often time have logical sections, and sometimes a section of an HTML page may have articles. As you can probably infer, articles and sections are interchangeable as child elements of one another. Just be certain to do what makes semantic sense.
<nav>
Every web application has navigation (save a few that someone will mention simply to, well, you know).

Before HTML5 developers would often wrap their navigation in a div and then give it a class name to identify it as a container of navigation. While this is perfectly fine, and is certainly a good faith effort, anytime we can use a tag to express our intention, we should.

Enter the <nav> tag! The <nav> tag, as I am sure you have figured out by now, is a container for navigation. Any portion of your application that is dedicated to navigation should be associated with one of these tags.
WAI-ARIA
The W3C Web Accessibility Initiative's Accessible Rich Internet Applications suit is an independent spec that specifies semantics that can be interpreted by your OS and, therefore, by, say, a screen reader.

What often happens is that a developer will want to add something to their sight to enrich the user experience that cannot be explicitly semantically expressed. For example, a developer my want to add a slider to act as a range input. This solution will likely use an HTML input along with some JavaScript for behavior and CSS for styles. The issue here will be that in HTML4 there is not a range input, so a developer should add WAI-ARIA attributes to express semantic meaning to the screen reader.

http://www.w3.org/TR/wai-aria/ contains the WAI-ARIA specification.
New HTML5 Tags
There are a myriad of new HTML5 tags! Don't be afraid of using them to enhance your HTML document. Just know that there are still compatibility issues. So, as always, testing is a must.

Also know that there is a hack to get the HTML5 to work in IE8 and its antecedents working. Add the following script to your page if you need to support IE8 and its antecedents:
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('article');
document.createElement('footer');
</script>
Full transcript