<!--
,ad8888ba, ad88888ba 88888888ba
d8"' `"8b d8" "8b 88 "8b
d8' Y8, 88 ,8P
88 `Y8aaaaa, 88aaaaaa8P'
88 88888 `"""""8b, 88""""""'
Y8, 88 `8b 88
Y8a. .a88 Y8a a8P 88
`"Y88888P" "Y88888P" 88
-->
<!--
88888888ba 88888888ba ,ad8888ba, I8, 8 ,8I ad88888ba 88888888888 88888888ba ad88888ba
88 "8b 88 "8b d8"' `"8b `8b d8b d8' d8" "8b 88 88 "8b d8" "8b
88 ,8P 88 ,8P d8' `8b "8, ,8"8, ,8" Y8, 88 88 ,8P Y8,
88aaaaaa8P' 88aaaaaa8P' 88 88 Y8 8P Y8 8P `Y8aaaaa, 88aaaaa 88aaaaaa8P' `Y8aaaaa,
88""""""8b, 88""""88' 88 88 `8b d8' `8b d8' `"""""8b, 88""""" 88""""88' `"""""8b,
88 `8b 88 `8b Y8, ,8P `8a a8' `8a a8' `8b 88 88 `8b `8b
88 a8P 88 `8b Y8a. .a8P `8a8' `8a8' Y8a a8P 88 88 `8b Y8a a8P
88888888P" 88 `8b `"Y8888Y"' `8' `8' "Y88888P" 88888888888 88 `8b "Y88888P"
-->
!(The Browser wars)[http://www.favbrowser.com/images/browser-war.png]
Engines: IE, Webkit, Mozilla
IE 6,7,8,9?
Firefox 2,3.x,4?
Chrome
Safari
Opera 10?
�
- The layered cake (HTML, CSS, Javascript)
- Compatibility
http://www.quirksmode.org/compatibility.html
http://www.findmebyip.com/litmus/
88 88 888888888888 88b d88 88
88 88 88 888b d888 88
88 88 88 88`8b d8'88 88
88aaaaaaaa88 88 88 `8b d8' 88 88
88""""""""88 88 88 `8b d8' 88 88
88 88 88 88 `8b d8' 88 88
88 88 88 88 `888' 88 88
88 88 88 88 `8' 88 88888888888
- HTML -> Data og struktur
<!-->
<!DOCTYPE>
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article>
<aside>
<audio>
<b>
<base>
<basefont>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<canvas> http://mrdoob.com/projects/harmony/#simple
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<command>
<datalist>
<dd>
<del>
<details>
<dfn>
<dir>
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<font>
<footer>
<form>
<frame>
<frameset>
<h1> - <h6>
<head>
<header>
<hgroup>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<keygen>
<kbd>
<label>
<legend>
<li>
<link>
<map>
<mark>
<menu>
<meta>
<meter>
<nav>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strike>
<strong>
<style>
<sub>
<summary>
<sup>
<table>
<tbody>
<td>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<tt>
<u>
<ul>
<var>
<video>
<xmp>
- HTML5 -> Hva er nytt, når kan du bruke det?
- Hva kommer RDFa http://www.alistapart.com/articles/introduction-to-rdfa/
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Example Blog</title>
<link rel="alternate" type="application/rss+xml" title="Dagbladet.no - forsida" href="http://example.com/rss/" >
<link rel="stylesheet" href="master.css" type="text/css" media="screen" title="We got style" charset="utf-8">
</head>
<body>
<header>
<h1>Example.com</h1>
<p>Insert Smart Byline.</p>
</header>
<nav>
<ul>
<li><a href="/">Blog</a></li>
<li><a href="/about">About</a></li>
<li><a href="/sitemap">Sitemap</a></li>
</ul>
</nav>
<section>
<article>
<header>
<h2>Title for my blog Post</h2>
</header>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<footer>
<!-- HTML MICRODATA-->
<p itemprop="author">Author: <span itemprop="name">Example Authorson</span></p>
</footer>
</article>
</section>
</body>
</html>
,ad8888ba, ad88888ba ad88888ba
d8"' `"8b d8" "8b d8" "8b
d8' Y8, Y8,
88 `Y8aaaaa, `Y8aaaaa,
88 `"""""8b, `"""""8b,
Y8, `8b `8b
Y8a. .a8P Y8a a8P Y8a a8P
`"Y8888Y"' "Y88888P" "Y88888P"
<style type="text/css" media="screen">
body, #id, .class, #id > .scope, .scope:hover{
background: #FFF;
background-color: rgb(255,255,255);
background-color: rgba(255,255,255,.7);
background-image: url(image.png);
background-position: top left;
background-repeat: no-repeat;
background-attachment: fixed;
border: 1px solid gray;
border-width: 1px 0 1px 0;
border-color: #DDD #EEE #EEE #DDD;
color: #333;
cursor: pointer;
content: "-";
display: block;
direction: rtl;
float: left;
font-size: 16px;
font-weight: bold;
font-family: arial;
font-style: italic;
height: 30px;
letter-spacing: -1px;
line-height: 1;
list-style: none;
margin: 0 0 0 0;
min-width: 20px;
max-height: 30px;
opacity: .7;
outline: none;
outline-color: #DEF;
outline-style: double;
outline-width: 2px;
padding: 0;
position: static;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: left;
text-shadow: 0 1px 1px #777;
text-indent: 20px;
text-decoration: line-through;
text-transform: uppercase;
vertical-align: middle;
width: 35px;
white-space: nowrap;
word-spacing: -1px;
}
</style>
- CSS -> Utseende, og enkel oppf√∏rsel
- Selectors, syntax og struktur
http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/
http://www.456bereastreet.com/archive/201002/forgotten_css_selectors/
- CSS frameworks (960gs http://960.gs/, blueprint: http://www.blueprintcss.org/)
- CSS 3 -> Quirks, bakoverkompabilitet, browser st√∏tte
http://centricle.com/ref/css/filters/?highlight_columns=true
- @fontface -> the web is more than 8 fonts
http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/
- @media selectors
http://www.alistapart.com/articles/responsive-web-design/
- Screen & print
- device og andre parametre
- LESS http://lesscss.org/, SASS http://sass-lang.com/, Scaffold http://github.com/anthonyshort/Scaffold
http://bjorkoy.com/2010/05/css-grids-with-sass/
http://fadeyev.net/2010/06/19/lessjs-will-obsolete-css
88 db 8b d8 db ad88888ba ,ad8888ba, 88888888ba 88 88888888ba 888888888888
88 d88b `8b d8' d88b d8" "8b d8"' `"8b 88 "8b 88 88 "8b 88
88 d8'`8b `8b d8' d8'`8b Y8, d8' 88 ,8P 88 88 ,8P 88
88 d8' `8b `8b d8' d8' `8b `Y8aaaaa, 88 88aaaaaa8P' 88 88aaaaaa8P' 88
88 d8YaaaaY8b `8b d8' d8YaaaaY8b `"""""8b, 88 88""""88' 88 88""""""' 88
88 d8""""""""8b `8b d8' d8""""""""8b `8b Y8, 88 `8b 88 88 88
88, ,d88 d8' `8b `888' d8' `8b Y8a a8P Y8a. .a8P 88 `8b 88 88 88
"Y8888P" d8' `8b `8' d8' `8b "Y88888P" `"Y8888Y"' 88 `8b 88 88 88
-->
<script type="text/javascript" charset="utf-8">
(function(){
})();
</script>
- Javascript -> Oppførsel
- Java is to Javascript, what car is to carpet.
Java code needs to be compiled, while JavaScript code are all in text.
- JS Frameworks (jQuery: http://jquery.com/, YUI: http://developer.yahoo.com/yui/, Mootools: http://mootools.net/, Sencha (ext): http://www.sencha.com/)
- Ajax: hva er det, og når bruker du det?
- JSON & JSONP
http://json.org/
- Javascript på serveren (node.js)
- Testing av javascript (jsLint, jsTestDriver, YUI testframework)
- Input escaping, cross site scripting
<!--
888888888888 ,ad8888ba, 88 88 ,ad8888ba, 88 88
88 d8"' `"8b 88 88 d8"' `"8b 88 88
88 d8' `8b 88 88 d8' 88 88
88 88 88 88 88 88 88aaaaaaaa88
88 88 88 88 88 88 88""""""""88
88 Y8, ,8P 88 88 Y8, 88 88
88 Y8a. .a8P Y8a. .a8P Y8a. .a8P 88 88
88 `"Y8888Y"' `"Y8888Y"' `"Y8888Y"' 88 88
-->
<!--
- Touch devices
- A whole new world (keyboard & mus vs. Pekefinger eller flere fingre )
- Hvordan håndteres det idag, hvordan tilpasser vi sidene?
- http://trentwalton.com/2010/07/05/non-hover/
- http://www.lukew.com/ff/entry.asp?1137
Touch Events:
- Tap
- Doubletap
- Drag
- Flick
- Pinch
- Spread
- Press
- Press & Tap
- Press & Drag
- Rotate
Single vs. Multi finger
-->
<!--
88888888ba, 88888888888 88888888ba 88 88 ,ad8888ba,
88 `"8b 88 88 "8b 88 88 d8"' `"8b
88 `8b 88 88 ,8P 88 88 d8'
88 88 88aaaaa 88aaaaaa8P' 88 88 88
88 88 88""""" 88""""""8b, 88 88 88 88888
88 8P 88 88 `8b 88 88 Y8, 88
88 .a8P 88 88 a8P Y8a. .a8P Y8a. .a88
88888888Y"' 88888888888 88888888P" `"Y8888Y"' `"Y88888P"
-->
- Optimering og debugging
- Firebug, console -> http://getfirebug.com/
- Testing in browsers ->
- SEO -> http://www.webconfs.com/15-minute-seo.php
- Accessability -> http://www.w3.org/WAI/
- Sideoptimalisering:
- Fart betyr noe: http://drp.ly/1kqT2m
- Minifiering, Css sprites, ySlow og pagespeed.
- Å se på minifierte filer
http://jsbeautifier.org/
<!--
,ad8888ba, 88888888ba 888888888888 88 88b d88 88 888888888888 88888888888
d8"' `"8b 88 "8b 88 88 888b d888 88 ,88 88
d8' `8b 88 ,8P 88 88 88`8b d8'88 88 ,88" 88
88 88 88aaaaaa8P' 88 88 88 `8b d8' 88 88 ,88" 88aaaaa
88 88 88""""""' 88 88 88 `8b d8' 88 88 ,88" 88"""""
Y8, ,8P 88 88 88 88 `8b d8' 88 88 ,88" 88
Y8a. .a8P 88 88 88 88 `888' 88 88 88" 88
`"Y8888Y"' 88 88 88 88 `8' 88 88 888888888888 88888888888
-->
- Flash
Pros:
- Flash animation and effects is easy to create and easy to view
- Flash is independent of browsers and operating systems.
It can be viewed correctly by anyone who has the Flash plug-in.
- Flash banners have higher click-through rates than static gifs.
- Flash can be quick to develop with many existing frameworks/plugins.
- Video works well in Flash applications. You can create a video editing suite in flash.
Cons:
-Search engines crawl text, not Flash intros and bannersIt’s tough to get an all-Flash website
to rank high in search engines. Search engines have problems indexing images, even text
rendered as an image. HTML pages get indexed in search engines like Google while Flash pages do not.
- Plugin - version control and upgrades for the users
- Accessibility
- Touch devices
Steve Jobs on Flash -> http://www.apple.com/hotnews/thoughts-on-flash/
-
Notifications
You must be signed in to change notification settings - Fork 1
eivindingebrigtsen/gsp
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
About
Setup for GSP-kurs
Resources
Stars
Watchers
Forks
Releases
No releases published
Packages 0
No packages published