Technologies
HTML
HyperText Markup Language is the main markup language for displaying web pages and other information that can be displayed in a web browser.
- Initial purpose for CERN researchers to use and share documents
- The first website still *works* in modern browsers.
- And we are building rich applications on that same "old" platform
HTML
<!doctype html>
<html>
<head>
<title>A modern webmaker</title>
...
</head>
<body>
<h1>This is the heading</h1>
<p>And this is the first paragraph.</p>
...
</body>
</html>
Document structure in HTML.
CSS
CSS encodes the style of how the formatted content should be graphically displayed.
- Now also able to do 3D animations
- Transitions and transformations
- All kinds of shapes and drawings
- Can make the same document appear as completely different - see CSS Zen Garden
DIY CSS
I'm the title, feel free to STYLE me!
The relaunch of Smashing Magazine has sparked quite a discussion in the community. Some of you feel that the design is "too responsive", others feel that the ads are too prominent, but most of you liked the lean, clean new layout. We hope that the new design makes reading more enjoyable — which is what any online magazine should aspire to, right? We are still working on fixing minor bugs, and we’re continually testing minor layout changes. We encourage you to send us feedback or comments — we'd sincerely appreciate that!
JavaScript
- Is used to create rich effects or rich web applications
- Interact with the Document Object Model (DOM) of the page
- Dynamics: animation of page elements, fading them in and out, resizing them, moving them, etc.
- Validates user inputs (forms)
- Asynchronously load new content without reloading the page
JavaScript examples
/* Dates */
var date = new Date(); // Sun Dec 09 2012 22:17:09 GMT+0100 (CET)
var minute = date.getMinutes(); // 17
/* Event handling */
document.addEventListener("keyup", keyUpHandler);
function keyUpHandler(ev) {
if (ev.keyCode == 13) {
alert('You pressed enter');
}
}
(Learning) Resources
- https://thimble.webmaker.org/en-US/
- https://developer.mozilla.org/en-US/
- http://teamtreehouse.com/
- http://www.html5rocks.com/en/
- http://www.webplatform.org/
- http://www.codecademy.com/
- http://movethewebforward.org/
