Wednesday, August 8, 2012
Tuesday, August 7, 2012
Video tutorial - Javascript Fundamentals: Development for Absolute Beginners
Over the course of 21 episodes, you will paught the fundamentals of Javascript programming. Tune in to learn concepts applicable to web based videogames, enhanced user interfaces, and dynamic web pages.
Walk you through getting the tools, writing code, and much more! Each concept is broken into its own video so you can search for and focus on the information you need.
01 - Series Introduction
In this introductory video, Bob sets some high-level goals and explains how JavaScript is used in web development as well as how to get the most out of this video series.
02 - Writing your First JavaScript Application
We get started by setting up our development environment and an HTML5 template webpage before building a simple 'Hello World' example. Then we create a more interesting example discussed at length in the next lesson.
03 - Dissecting the First JavaScript Application You Wrote
In the previous video, Bob created an interesting JavaScript example, and in this video he walks through the example line by line, explaining the purpose of the various key words and operators and providing a general overview of topics for the next eight lessons.
04 - Writing JavaScript in Visual Web Developer Express Edition
Before discussing JavaScript proper, Bob demonstrates how to ease JavaScript development by downloading, installing, and utilizing the free Visual Web Developer Express Edition from Microsoft.
05 - JavaScript Variables, Types, Operators, and Expressions
Most programming languages have a notion of variables, data types, and syntax rules including statements, expressions, operators, keywords, and operands. In this video, Bob provides a quick overview of the most important topics related to basic syntax rules. He explains how JavaScript variables and types are different than those in other programming languages, explaining the purpose of "undefined." Finally, he shows how to use escape sequences in string literals.
06 - Conditional Logic in JavaScript
In this lesson, Bob demonstrates the use of the if ... else if statement, the ternary (or conditional) operator, and the case ... select statements. Along the way, we learn about the && and || operators as well as the Date object in JavaScript.
07 - JavaScript Functions
Functions are central to JavaScript, much in the same way classes are central to Object Oriented Programming languages like Visual Basic or C#. In this lesson, Bob demonstrates the basics of creating and calling functions, passing arguments, using the arguments object, and creating function literals as well as anonymous functions.
08 - JavaScript Arrays
You can think of arrays as variables that hold other variables. In this lesson, Bob demonstrates how to create, initialize, and retrieve elements of arrays using indexes. He also demonstrates how to loop through all elements in an array (foreshadowing the topic of the next lesson) and how to create associative arrays.
09 - Looping Statements in JavaScript
Looping (or rather, iteration) statements allow your application to individually access each item in an array or other collection of object properties. In this lesson we demonstrate four different looping statements pointing out the nuanced differences between each: the while, do ... while, for, and for ... in.
10 - Understanding Function versus Global Scope
One often misunderstood topic that leads to errors in programs is how JavaScript treats variables declared inside and outside of functions. This video explains the ramifications of variable scope at both the functional and global levels. For developers coming from other programming languages, it demonstrates how your familiarity with block scope will lead you to erroneous conclusions about JavaScript's functional and global scope. Also briefly discussed is the notion of hoisting in JavaScript.
11 - Working with External JavaScript Files
Up to now, we've been mixing our JavaScript with our HTML5 code. However, to write better organized and more accessible applications, we must learn a new technique -- how (and why) to reference external JavaScript files.
12 - Organizing and Simplifying JavaScript with Object Literals
Developers coming from Object Oriented Programming backgrounds may notice similar constructs (objects, the new keyword, etc.), but in JavaScript these ideas are implemented much differently. This video demonstrates the creation of simple objects called "object literals" to keep related properties and functions (methods) together in one structure. Finally, Bob demonstrates using constructors and the new keyword to show how different these ideas are from other programming languages.
13 - Understanding the Document Object Model
In this video, we discuss the Document Object Model, explaining how the web browser parses and creates the DOM from HTML5 code, the purpose of the window and document objects, the built-in API functions for accessing parts of the DOM, and more.
14 - Getting Started with jQuery
We've said several times how jQuery helps smooth over JavaScript's rough edges. In this lesson, Bob shows how to include and reference the jQuery library in your web page as well as explaining how to get a reference to the jQuery object, demonstrating the use of the .ready method as a means of bootstrapping the onload event, and more.
15 - jQuery Selectors
jQuery utilizes CSS3 style selectors to access DOM objects. This video demonstrates both simple and more advanced uses of jQuery selectors to help you get creative when selecting DOM elements as well as discussing where to go when you want to pack more selectors into your arsenal.
16 - jQuery Events
This lesson shows how to utilize jQuery Events to create a simple game by writing and attaching anonymous functions to events fired on a web page.
17 - Installing and Utilizing jQuery Plugins
jQuery Plugins are like mini-libraries of code that provide some extra functionality. There are thousands of jQuery Plugins available—most of them provide some user interface widget to display information or retrieve input in creative ways. In this lesson, Bob demonstrates the use of the jQueryUI Plugins from the jQuery team as a means of showing how to include and use jQuery Plugins in your web applications.
18 - Unobtrusive JavaScript
Writing unobtrusive JavaScript is considered a best practice by most developers. In this lesson Bob explains some core ideas as well as three techniques that can help you write code to make your JavaScript application more accessible and maintainable while avoiding errors.
19 - Using jQuery to Retrieve JSON via AJAX
AJAX allows web pages and web servers to communicate without requiring a full page refresh. JSON is a data format that closely resembles object literals in JavaScript. Most modern web applications utilize some form of AJAX and in this lesson we demonstrate how easy it is to do so via jQuery.
20 - Fundamentals of JavaScript Closures
Closures are a slightly advanced topic, but are at the core simply a means by which you can marry a function along with its environment variables and input parameters. This video demonstrates the basics of closures as a first step toward mastering this important structure in JavaScript.
21 - Series Wrap-Up
In this last video, Bob provides a road-map of additional topics that you may want to investigate in order to round out your budding expertise in JavaScript. Bob also suggests (since many people ask) a list of books that might prove helpful as you to take your JavaScript knowledge to the next level.
Walk you through getting the tools, writing code, and much more! Each concept is broken into its own video so you can search for and focus on the information you need.
01 - Series Introduction
In this introductory video, Bob sets some high-level goals and explains how JavaScript is used in web development as well as how to get the most out of this video series.
02 - Writing your First JavaScript Application
We get started by setting up our development environment and an HTML5 template webpage before building a simple 'Hello World' example. Then we create a more interesting example discussed at length in the next lesson.
03 - Dissecting the First JavaScript Application You Wrote
In the previous video, Bob created an interesting JavaScript example, and in this video he walks through the example line by line, explaining the purpose of the various key words and operators and providing a general overview of topics for the next eight lessons.
04 - Writing JavaScript in Visual Web Developer Express Edition
Before discussing JavaScript proper, Bob demonstrates how to ease JavaScript development by downloading, installing, and utilizing the free Visual Web Developer Express Edition from Microsoft.
05 - JavaScript Variables, Types, Operators, and Expressions
Most programming languages have a notion of variables, data types, and syntax rules including statements, expressions, operators, keywords, and operands. In this video, Bob provides a quick overview of the most important topics related to basic syntax rules. He explains how JavaScript variables and types are different than those in other programming languages, explaining the purpose of "undefined." Finally, he shows how to use escape sequences in string literals.
06 - Conditional Logic in JavaScript
In this lesson, Bob demonstrates the use of the if ... else if statement, the ternary (or conditional) operator, and the case ... select statements. Along the way, we learn about the && and || operators as well as the Date object in JavaScript.
07 - JavaScript Functions
Functions are central to JavaScript, much in the same way classes are central to Object Oriented Programming languages like Visual Basic or C#. In this lesson, Bob demonstrates the basics of creating and calling functions, passing arguments, using the arguments object, and creating function literals as well as anonymous functions.
08 - JavaScript Arrays
You can think of arrays as variables that hold other variables. In this lesson, Bob demonstrates how to create, initialize, and retrieve elements of arrays using indexes. He also demonstrates how to loop through all elements in an array (foreshadowing the topic of the next lesson) and how to create associative arrays.
09 - Looping Statements in JavaScript
Looping (or rather, iteration) statements allow your application to individually access each item in an array or other collection of object properties. In this lesson we demonstrate four different looping statements pointing out the nuanced differences between each: the while, do ... while, for, and for ... in.
10 - Understanding Function versus Global Scope
One often misunderstood topic that leads to errors in programs is how JavaScript treats variables declared inside and outside of functions. This video explains the ramifications of variable scope at both the functional and global levels. For developers coming from other programming languages, it demonstrates how your familiarity with block scope will lead you to erroneous conclusions about JavaScript's functional and global scope. Also briefly discussed is the notion of hoisting in JavaScript.
11 - Working with External JavaScript Files
Up to now, we've been mixing our JavaScript with our HTML5 code. However, to write better organized and more accessible applications, we must learn a new technique -- how (and why) to reference external JavaScript files.
12 - Organizing and Simplifying JavaScript with Object Literals
Developers coming from Object Oriented Programming backgrounds may notice similar constructs (objects, the new keyword, etc.), but in JavaScript these ideas are implemented much differently. This video demonstrates the creation of simple objects called "object literals" to keep related properties and functions (methods) together in one structure. Finally, Bob demonstrates using constructors and the new keyword to show how different these ideas are from other programming languages.
13 - Understanding the Document Object Model
In this video, we discuss the Document Object Model, explaining how the web browser parses and creates the DOM from HTML5 code, the purpose of the window and document objects, the built-in API functions for accessing parts of the DOM, and more.
14 - Getting Started with jQuery
We've said several times how jQuery helps smooth over JavaScript's rough edges. In this lesson, Bob shows how to include and reference the jQuery library in your web page as well as explaining how to get a reference to the jQuery object, demonstrating the use of the .ready method as a means of bootstrapping the onload event, and more.
15 - jQuery Selectors
jQuery utilizes CSS3 style selectors to access DOM objects. This video demonstrates both simple and more advanced uses of jQuery selectors to help you get creative when selecting DOM elements as well as discussing where to go when you want to pack more selectors into your arsenal.
16 - jQuery Events
This lesson shows how to utilize jQuery Events to create a simple game by writing and attaching anonymous functions to events fired on a web page.
17 - Installing and Utilizing jQuery Plugins
jQuery Plugins are like mini-libraries of code that provide some extra functionality. There are thousands of jQuery Plugins available—most of them provide some user interface widget to display information or retrieve input in creative ways. In this lesson, Bob demonstrates the use of the jQueryUI Plugins from the jQuery team as a means of showing how to include and use jQuery Plugins in your web applications.
18 - Unobtrusive JavaScript
Writing unobtrusive JavaScript is considered a best practice by most developers. In this lesson Bob explains some core ideas as well as three techniques that can help you write code to make your JavaScript application more accessible and maintainable while avoiding errors.
19 - Using jQuery to Retrieve JSON via AJAX
AJAX allows web pages and web servers to communicate without requiring a full page refresh. JSON is a data format that closely resembles object literals in JavaScript. Most modern web applications utilize some form of AJAX and in this lesson we demonstrate how easy it is to do so via jQuery.
20 - Fundamentals of JavaScript Closures
Closures are a slightly advanced topic, but are at the core simply a means by which you can marry a function along with its environment variables and input parameters. This video demonstrates the basics of closures as a first step toward mastering this important structure in JavaScript.
21 - Series Wrap-Up
In this last video, Bob provides a road-map of additional topics that you may want to investigate in order to round out your budding expertise in JavaScript. Bob also suggests (since many people ask) a list of books that might prove helpful as you to take your JavaScript knowledge to the next level.
Sunday, August 5, 2012
Apply border on canvas
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
canvas {border:3px dotted blue;}
</style>
</head>
<body>
<center>
<canvas width="250" height="200">
Sorry! Your browser doesn't support Canvas.
</canvas>
<canvas style="border: 5px solid;" width="250" height="200">
Sorry! Your browser doesn't support Canvas.
</canvas>
</body>
</html>
Thursday, August 2, 2012
jQuery Mobile 1.2.0 Alpha released
The jQuery Mobile 1.2.0 alpha released. This release brings a new popup widget, an autodivider option for listviews, and a host of enhancements and fixes throughout the library to make things smoother, faster, and more polished. Try the demo now!
jQuery Mobile web site: http://jquerymobile.com/
jQuery Mobile web site: http://jquerymobile.com/
Wednesday, August 1, 2012
Programming in Go: Creating Applications for the 21st Century
Your Hands-On Guide to Go, the Revolutionary New Language Designed for Concurrency, Multicore Hardware, and Programmer Convenience
Today’s most exciting new programming language, Go, is designed from the ground up to help you easily leverage all the power of today’s multicore hardware. With this guide, pioneering Go programmer Mark Summerfield shows how to write code that takes full advantage of Go’s breakthrough features and idioms.
Both a tutorial and a language reference, Programming in Go brings together all the knowledge you need to evaluate Go, think in Go, and write high-performance software with Go. Summerfield presents multiple idiom comparisons showing exactly how Go improves upon older languages, calling special attention to Go’s key innovations. Along the way, he explains everything from the absolute basics through Go’s lock-free channel-based concurrency and its flexible and unusual duck-typing type-safe approach to object-orientation.
Throughout, Summerfield’s approach is thoroughly practical. Each chapter offers multiple live code examples designed to encourage experimentation and help you quickly develop mastery. Wherever possible, complete programs and packages are presented to provide realistic use cases, as well as exercises. Coverage includes
- Quickly getting and installing Go, and building and running Go programs
- Exploring Go’s syntax, features, and extensive standard library
- Programming Boolean values, expressions, and numeric types
- Creating, comparing, indexing, slicing, and formatting strings
- Understanding Go’s highly efficient built-in collection types: slices and maps
- Using Go as a procedural programming language
- Discovering Go’s unusual and flexible approach to object orientation
- Mastering Go’s unique, simple, and natural approach to fine-grained concurrency
- Reading and writing binary, text, JSON, and XML files
- Importing and using standard library packages, custom packages, and third-party packages
- Creating, documenting, unit testing, and benchmarking custom packages
Tuesday, July 31, 2012
The Go Programming Language Phrasebook
The Go Programming Language Phrasebook
Essential Go code and idioms for all facets of the development process
This guide gives you the code “phrases” you need to quickly and effectively complete a wide variety of projects with Go, today’s most exciting new programming language.
Tested, easy-to-adapt code examples illuminate every step of Go development, helping you write highly scalable, concurrent software. You’ll master Go-specific idioms for working with strings, collections, arrays, error handling, goroutines, slices, maps, channels, numbers, dates, times, files, networking, web apps, the runtime, and more.
Concise and Accessible
Easy to carry and easy to use: Ditch all those bulky books for one portable pocket guide
Flexible and Functional
Packed with more than 100 customizable code snippets: Quickly create solid Go code to solve just about any problem
Register your book at informit.com/register for convenient access to downloads, updates, and corrections as they become available.
Video tutorial - HTML5 & CSS3 Fundamentals: Development for Absolute Beginners
01 - Series Introduction
In this first lesson, Bob sets expectations and provides a brief overview of the upcoming series.
02 - Creating Your First HTML5 Web Page
Warm up your keyboard and get ready to work. In this lesson—an important foundation for the series as a whole—you'll be fully immersed in what it takes to build an HTML5 web page, including the utilization of HTML5 structural elements in a real scenario.
03 - Styling Your First HTML5 Web Page with CSS3
Now that you've built a semantically well-structured and marked-up HTML5 web page, you'll apply a CSS3 style sheet to give the new page a simple but attractive appearance.
Download the source code for Styling Your First HTML5 Web Page with CSS3
04 - Understanding the HTML5 You Wrote
In Lesson 2, you worked with Bob to create a semantically correct HTML5 page. But Bob didn't spend much time explaining each individual element—its purpose, your options, etc. That process begins in this lesson as he talks about what makes HTML5 special, the purpose for things like DOCTYPE, meta tags, charset, UTF-8, html, why "semantics" is important, the head and body tags, and more.
Download the source code for Understanding the HTML5 You Wrote
05 - Working with Paragraphs and Text
In this lesson, Bob discusses the various semantic meanings of popular HTML5 inline tags useful for marking up text inside of paragraphs, including b, i, small, em, mark, span, and much more.
Download the source code for Working with Paragraphs and Text
06 - Defining the Structure of Your Document
Moving beyond the text, this lesson discusses how to give semantic meaning to the various elements of a web page using header, footer, aside, nave, h1 through h2, article, section, and more.
Download the source code for Defining the Structure of Your Document
07 - Working with Figures and Images
This lesson demonstrates how to include images as well as whole figures with captions in your HTML5 web pages.
08 - Working with Lists
We've already used a few list style tags in our HTML5 pages, but now we'll learn how to create a semantically rich set of lists for creating ordered and unordered lists, definitions of terms, and using lists to create navigation—a popular technique in web development.
Download the source code for Working with Lists
09 - Creating Tables
The oft-maligned table still has a semantic purpose in HTML5: to display tabular information. This lesson demonstrates the many different ways to structure tabular data in HTML5, including headers, rows, columns, footers, column groups, and more.
Download the source code for Creating Tables
10 - Creating Forms
This lesson demonstrates how to add a rudimentary level of interactivity to your web pages by allowing users to input information via forms. We'll look at over a dozen examples of common form elements allowing us to guide the user to input high-quality data.
Download the source code for Creating Forms
11 - Form Validation and Other Future HTML5 Form Enhancements
This video looks toward new HTML5 form features used in Internet Explorer 10 and later. First up is a look at using new input elements and attributes for creating richer forms. Bob then demonstrates how built-in validation works and how it can reduce the amount of JavaScript required by web pages hosting forms.
Download the source code for Form Validation and Other Future HTML5 Form Enhancements
12 - Understanding Cascading Style Sheets
In Lesson 3, you worked with Bob to create an external Cascading Style Sheet that provides a simple but attractive aesthetic improvement to the HTML5 web page. This lesson picks up where that lesson left off by discussing the basics of CSS as well as how you can define styles and target certain elements of your HTML5 web pages using selectors.
Download the source code for Understanding Cascading Style Sheets
13 - CSS3 Font and Text Properties
In this lesson we focus on the CSS properties specific to modifying font and text properties on HTML5 web pages. Tune in for a discussion about font-family stacks, common units used for defining relative and absolute sizes, the various font-related modifiers, and much more.
Download the source code for CSS3 Font and Text Properties
14 - CSS3 Color and Background Properties
You can easily modify the colors and backgrounds of various HTML5 elements using CSS3 and this lesson demonstrates how, starting with the various ways you can define a color in CSS and expanding to how to set background images with alignment, tiling, and more.
Download the source code for CSS3 Color and Background Properties
15 - CSS3 List and Table Properties
In Lessons 7 and 8 you learned about Lists and Tables. In this lesson, you learn various properties exposed by CSS3 that allow you to provide a professional style to your Lists and Tables.
Download the source code for CSS3 List and Table Properties
16 - CSS3 Box Properties
This lesson makes the important distinction between inline-display and block-display in HTML5 elements. For block-style elements, it is vital to understand the box model and this lesson provides that background as well as an overview of the CSS3 properties for properly styling block-style elements.
Download the source code for CSS3 Box Properties
17 - Working with CSS3 Font-Face
Designers rely on typography to communicate and emote along with the message of the text itself. The font-face is just one more tool that designers can use to widen the prospective array of typefaces that are accessible in HTML5 web pages.
Download the source code for Working with CSS3 font-face
18 - Embedding Video in HTML5
In this video we dive back into HTML5 and examine the basics of the video tag to add progressively downloaded / pseudo-streamed video to your web pages. We discuss the various options available, as well as the necessary codecs required to make it all work.
Download the source code for Embedding Video in HTML5
19 - Working with the HTML5 Canvas
The HTML5 Canvas allows JavaScript savvy developers to draw bitmapped images directly into HTML5 web pages. This video provides a simple example in order to show how this works at a high level, reviewing the process of drawing on the canvas via JavaScript.
Download the source code for Working with the HTML5 Canvas
20 - Working with SVG in HTML5
Scalable Vector Graphics, or SVG, has been a web standard for many years but has gained renewed interest after being included in the HTML5 specification. SVG allows you to define vector shapes using XML, and these shapes can even be styled with CSS and scripted with JavaScript. In this video, we demonstrate how to use an exported SVG document from Adobe Illustrator in a web page using the img tag as well as embedding the code directly in an HTML5 page. Finally, we show how to add interactivity to an SVG image using JavaScript.
Download the source code for Working with SVG in HTML5
21 - Where to Go From Here
In this final video, Bob provides a roadmap for topics that will help you take your newfound knowledge much further. Topics include a short history of laying out web pages in HTML and CSS, current directions in web page layout with grid based and liquid—or rather, responsive—web design, mobile first design, and more. He lists a number of open source CSS frameworks and utilities, and finally a few books for more information.
Source: HTML5 & CSS3 Fundamentals: Development for Absolute Beginners | Channel 9
Download the entire series source code here.
In this first lesson, Bob sets expectations and provides a brief overview of the upcoming series.
02 - Creating Your First HTML5 Web Page
Warm up your keyboard and get ready to work. In this lesson—an important foundation for the series as a whole—you'll be fully immersed in what it takes to build an HTML5 web page, including the utilization of HTML5 structural elements in a real scenario.
03 - Styling Your First HTML5 Web Page with CSS3
Now that you've built a semantically well-structured and marked-up HTML5 web page, you'll apply a CSS3 style sheet to give the new page a simple but attractive appearance.
Download the source code for Styling Your First HTML5 Web Page with CSS3
04 - Understanding the HTML5 You Wrote
In Lesson 2, you worked with Bob to create a semantically correct HTML5 page. But Bob didn't spend much time explaining each individual element—its purpose, your options, etc. That process begins in this lesson as he talks about what makes HTML5 special, the purpose for things like DOCTYPE, meta tags, charset, UTF-8, html, why "semantics" is important, the head and body tags, and more.
Download the source code for Understanding the HTML5 You Wrote
05 - Working with Paragraphs and Text
In this lesson, Bob discusses the various semantic meanings of popular HTML5 inline tags useful for marking up text inside of paragraphs, including b, i, small, em, mark, span, and much more.
Download the source code for Working with Paragraphs and Text
06 - Defining the Structure of Your Document
Moving beyond the text, this lesson discusses how to give semantic meaning to the various elements of a web page using header, footer, aside, nave, h1 through h2, article, section, and more.
Download the source code for Defining the Structure of Your Document
07 - Working with Figures and Images
This lesson demonstrates how to include images as well as whole figures with captions in your HTML5 web pages.
08 - Working with Lists
We've already used a few list style tags in our HTML5 pages, but now we'll learn how to create a semantically rich set of lists for creating ordered and unordered lists, definitions of terms, and using lists to create navigation—a popular technique in web development.
Download the source code for Working with Lists
09 - Creating Tables
The oft-maligned table still has a semantic purpose in HTML5: to display tabular information. This lesson demonstrates the many different ways to structure tabular data in HTML5, including headers, rows, columns, footers, column groups, and more.
Download the source code for Creating Tables
10 - Creating Forms
This lesson demonstrates how to add a rudimentary level of interactivity to your web pages by allowing users to input information via forms. We'll look at over a dozen examples of common form elements allowing us to guide the user to input high-quality data.
Download the source code for Creating Forms
11 - Form Validation and Other Future HTML5 Form Enhancements
This video looks toward new HTML5 form features used in Internet Explorer 10 and later. First up is a look at using new input elements and attributes for creating richer forms. Bob then demonstrates how built-in validation works and how it can reduce the amount of JavaScript required by web pages hosting forms.
Download the source code for Form Validation and Other Future HTML5 Form Enhancements
12 - Understanding Cascading Style Sheets
In Lesson 3, you worked with Bob to create an external Cascading Style Sheet that provides a simple but attractive aesthetic improvement to the HTML5 web page. This lesson picks up where that lesson left off by discussing the basics of CSS as well as how you can define styles and target certain elements of your HTML5 web pages using selectors.
Download the source code for Understanding Cascading Style Sheets
13 - CSS3 Font and Text Properties
In this lesson we focus on the CSS properties specific to modifying font and text properties on HTML5 web pages. Tune in for a discussion about font-family stacks, common units used for defining relative and absolute sizes, the various font-related modifiers, and much more.
Download the source code for CSS3 Font and Text Properties
14 - CSS3 Color and Background Properties
You can easily modify the colors and backgrounds of various HTML5 elements using CSS3 and this lesson demonstrates how, starting with the various ways you can define a color in CSS and expanding to how to set background images with alignment, tiling, and more.
Download the source code for CSS3 Color and Background Properties
15 - CSS3 List and Table Properties
In Lessons 7 and 8 you learned about Lists and Tables. In this lesson, you learn various properties exposed by CSS3 that allow you to provide a professional style to your Lists and Tables.
Download the source code for CSS3 List and Table Properties
16 - CSS3 Box Properties
This lesson makes the important distinction between inline-display and block-display in HTML5 elements. For block-style elements, it is vital to understand the box model and this lesson provides that background as well as an overview of the CSS3 properties for properly styling block-style elements.
Download the source code for CSS3 Box Properties
17 - Working with CSS3 Font-Face
Designers rely on typography to communicate and emote along with the message of the text itself. The font-face is just one more tool that designers can use to widen the prospective array of typefaces that are accessible in HTML5 web pages.
Download the source code for Working with CSS3 font-face
18 - Embedding Video in HTML5
In this video we dive back into HTML5 and examine the basics of the video tag to add progressively downloaded / pseudo-streamed video to your web pages. We discuss the various options available, as well as the necessary codecs required to make it all work.
Download the source code for Embedding Video in HTML5
19 - Working with the HTML5 Canvas
The HTML5 Canvas allows JavaScript savvy developers to draw bitmapped images directly into HTML5 web pages. This video provides a simple example in order to show how this works at a high level, reviewing the process of drawing on the canvas via JavaScript.
Download the source code for Working with the HTML5 Canvas
20 - Working with SVG in HTML5
Scalable Vector Graphics, or SVG, has been a web standard for many years but has gained renewed interest after being included in the HTML5 specification. SVG allows you to define vector shapes using XML, and these shapes can even be styled with CSS and scripted with JavaScript. In this video, we demonstrate how to use an exported SVG document from Adobe Illustrator in a web page using the img tag as well as embedding the code directly in an HTML5 page. Finally, we show how to add interactivity to an SVG image using JavaScript.
Download the source code for Working with SVG in HTML5
21 - Where to Go From Here
In this final video, Bob provides a roadmap for topics that will help you take your newfound knowledge much further. Topics include a short history of laying out web pages in HTML and CSS, current directions in web page layout with grid based and liquid—or rather, responsive—web design, mobile first design, and more. He lists a number of open source CSS frameworks and utilities, and finally a few books for more information.
Source: HTML5 & CSS3 Fundamentals: Development for Absolute Beginners | Channel 9
Download the entire series source code here.
Subscribe to:
Posts (Atom)