SlideShare a Scribd company logo
Sthlm WebMonk3ys
      2010-04-20
Frågor?
Lite snabbt om mig
Isac Lagerblad
Webmonkey
Webmonkey
Gränssnitt
Standarder
Tillgänglighet
icaaq
@icaaq
blog.icaaq.com
icaaaq@gmail.com
DoD
HTML
Webmonkey
• Tillgänglighet
• Tillgänglighet
• Standard
• Tillgänglighet
• Standard
• Minimal
An extra HTTP request
adds 200+ milliseconds
to a page
(worldwide average).
          ”Steve Souders”
Exempel!
Semantik
Document outline
www.h1debate.com/
Landmarks
<ul id=”navigation” role=”navigation”>
•   application

•   banner

•   complementary

•   contentinfo

•   form

•   main

•   navigation

•   search
Skipto?
CSS = <head>
JS = </body>
Smush it
CSS
Minimal
Specificitet
!important hell
#main #nav{}
Sprites
base64-encoded Data URIs
Jag kommer inte att
  BASHA Internet
      Explorer
Photoshop
Den ultimata rendreraren
JavaScript
Unobtrusive javascript
Tillgänglighet, igen!
WAI-ARIA
CDN
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
jsLint
• YUI Compressor
• dean.edwards.name/packer/
• Closure (google)
Google analytics
Asynchronous Tracking
Lazy loading
Konkatinera
Verktyg
Webmonkey
• Fangs
• Fangs
• Firevox
• Fangs
• Firevox
• NVDA
• Yslow
• PageSpeed
• http://www.webpagetest.org/
API
YQL & Pipes
GreaseMonk3y
robots.txt

More Related Content

KEY
Make your website 2 times faster
PDF
新 · 交互
PDF
디자인 패턴과 YUI를 이용해 Rich UI 빠르게 구현하기
PPTX
Front End Web Development Basics
PDF
網頁程式設計
PPTX
تئوری وب
PDF
Frontend django, Django Web 前端探索
PPTX
Basics of Front End Web Dev PowerPoint
Make your website 2 times faster
新 · 交互
디자인 패턴과 YUI를 이용해 Rich UI 빠르게 구현하기
Front End Web Development Basics
網頁程式設計
تئوری وب
Frontend django, Django Web 前端探索
Basics of Front End Web Dev PowerPoint

What's hot (20)

PPTX
Web design v roku 2013
PDF
The way to be a developer "What I Need"
PPTX
Hammersmith fundamentals html fundamentals
PPT
PPTX
Html and CSS 101 - hipages Group Friday talk
PDF
7 web design
PDF
Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3
PPTX
HTML / CSS / JS Web basics
PDF
ゆるく学ぼう!現在のフロントエンドまとめ
PDF
Just Your Type: Web Typography & You
PPTX
HTML/CSS Workshop @ Searchcamp
PDF
Bootstrap Workout 2015
PPTX
EdTechJoker Spring 2020 - Lecture 4 - HTML
PPT
An Introduction to CSS Frameworks
KEY
Rapid CMS enabled site development with Wordpress
PPTX
Client responsive design
PDF
Front end-performance
PDF
The web context
PDF
CSS Best practice
Web design v roku 2013
The way to be a developer "What I Need"
Hammersmith fundamentals html fundamentals
Html and CSS 101 - hipages Group Friday talk
7 web design
Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3
HTML / CSS / JS Web basics
ゆるく学ぼう!現在のフロントエンドまとめ
Just Your Type: Web Typography & You
HTML/CSS Workshop @ Searchcamp
Bootstrap Workout 2015
EdTechJoker Spring 2020 - Lecture 4 - HTML
An Introduction to CSS Frameworks
Rapid CMS enabled site development with Wordpress
Client responsive design
Front end-performance
The web context
CSS Best practice
Ad

Viewers also liked (9)

XLSX
Contrataciones BANXICO
PDF
Mexicanapeticioneua
PDF
028 097e
PPT
郑一帆 107082024 玩具拆卸报告
RTF
Discussion paper 16.11.2015
PPS
Parachute
PDF
Incorporating Library Provision In School Self Evaluation Educational Review 1
PPT
Propuesta TGGROUP para Mexicana
PDF
An Open Mind - A coffee table book to celebrate the sanitation champions
Contrataciones BANXICO
Mexicanapeticioneua
028 097e
郑一帆 107082024 玩具拆卸报告
Discussion paper 16.11.2015
Parachute
Incorporating Library Provision In School Self Evaluation Educational Review 1
Propuesta TGGROUP para Mexicana
An Open Mind - A coffee table book to celebrate the sanitation champions
Ad

Similar to Webmonkey (20)

PDF
HTML5: Introduction
PPTX
HTML5: An Overview
KEY
about HTML5
PDF
Progressive Downloads and Rendering
PPTX
About Best friends - HTML, CSS and JS
PPTX
Progressive downloads and rendering (Stoyan Stefanov)
PPTX
Understanding CSS and the Debugging Console
PPT
The things we found in your website
KEY
HTML5 Hacking - Yahoo! Open Hack Day
PDF
WordPress Theme Structure
PDF
Introduction to Browser DOM
PPTX
Ui dev@naukri-2011
PPTX
Curtin University Frontend Web Development
KEY
OPTIMERA STHLM! Isac Lagerblad
PDF
Data normalization weaknesses
PPTX
Touch the web
KEY
Slow kinda sucks
PPT
Html5 Whats around the bend
PPTX
Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5
PPT
Web design-workflow
HTML5: Introduction
HTML5: An Overview
about HTML5
Progressive Downloads and Rendering
About Best friends - HTML, CSS and JS
Progressive downloads and rendering (Stoyan Stefanov)
Understanding CSS and the Debugging Console
The things we found in your website
HTML5 Hacking - Yahoo! Open Hack Day
WordPress Theme Structure
Introduction to Browser DOM
Ui dev@naukri-2011
Curtin University Frontend Web Development
OPTIMERA STHLM! Isac Lagerblad
Data normalization weaknesses
Touch the web
Slow kinda sucks
Html5 Whats around the bend
Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5
Web design-workflow

Recently uploaded (20)

PDF
Approach and Philosophy of On baking technology
PPTX
cloud_computing_Infrastucture_as_cloud_p
PPTX
Programs and apps: productivity, graphics, security and other tools
PPTX
Group 1 Presentation -Planning and Decision Making .pptx
PPTX
A Presentation on Artificial Intelligence
PDF
Getting Started with Data Integration: FME Form 101
PPTX
1. Introduction to Computer Programming.pptx
PDF
Univ-Connecticut-ChatGPT-Presentaion.pdf
PDF
Per capita expenditure prediction using model stacking based on satellite ima...
PDF
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
PDF
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
PDF
Spectral efficient network and resource selection model in 5G networks
PPTX
Tartificialntelligence_presentation.pptx
PDF
Machine learning based COVID-19 study performance prediction
PDF
Mobile App Security Testing_ A Comprehensive Guide.pdf
PDF
Network Security Unit 5.pdf for BCA BBA.
PDF
Video forgery: An extensive analysis of inter-and intra-frame manipulation al...
PDF
A comparative analysis of optical character recognition models for extracting...
PDF
Unlocking AI with Model Context Protocol (MCP)
PDF
August Patch Tuesday
Approach and Philosophy of On baking technology
cloud_computing_Infrastucture_as_cloud_p
Programs and apps: productivity, graphics, security and other tools
Group 1 Presentation -Planning and Decision Making .pptx
A Presentation on Artificial Intelligence
Getting Started with Data Integration: FME Form 101
1. Introduction to Computer Programming.pptx
Univ-Connecticut-ChatGPT-Presentaion.pdf
Per capita expenditure prediction using model stacking based on satellite ima...
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
Spectral efficient network and resource selection model in 5G networks
Tartificialntelligence_presentation.pptx
Machine learning based COVID-19 study performance prediction
Mobile App Security Testing_ A Comprehensive Guide.pdf
Network Security Unit 5.pdf for BCA BBA.
Video forgery: An extensive analysis of inter-and intra-frame manipulation al...
A comparative analysis of optical character recognition models for extracting...
Unlocking AI with Model Context Protocol (MCP)
August Patch Tuesday

Webmonkey

Editor's Notes

  • #2: Kul att vara h&amp;#xE4;r, kul att vara f&amp;#xF6;rst! Anders, David, markus
  • #4: Definitionen av Dod &amp;#xE4;r s&amp;#xE4;kert olika p&amp;#xE5; olika arbetsplatser och kanske &amp;#xE4;ven olika p&amp;#xE5; olika projekt inom dessa arbetsplatser
  • #9: Full-service Digital Agency
  • #27: Martin Kliehm startsida h1 runt logotypen
  • #30: complementary - aside, contentinfo - footer
  • #31: arbetsf&amp;#xF6;rmedlingen, felhantering! sk&amp;#xE4;rml&amp;#xE4;sare, flera labels!
  • #32: webbl&amp;#xE4;sare b&amp;#xF6;rjar inte rendrerar n&amp;#xE5;got f&amp;#xF6;rens all css &amp;#xE4;r inl&amp;#xE4;st. bara f&amp;#xF6;r att de inte ska beh&amp;#xF6;va rita om ett element efter&amp;#xE5;t. d&amp;#xE5;lig anv&amp;#xE4;ndarupplevelse.
  • #33: javascript parsern blockerar rendreringsmotorn
  • #36: Andy Clark
  • #45: S&amp;#xF6;kmotorv&amp;#xE4;nligt, mobil v&amp;#xE4;nligt, WCAG 2.0
  • #47: Accessible Rich Internet Applications