SlideShare a Scribd company logo
#Webdesign
#Lukas Oppermann
UI / UX Designer
#veare
-veare is my agency
-work with agencies & companies like
Telekom, Bosch and Congstar on:
-websites
-mobile & desktop apps
-embedded software
#Lukas Oppermann
-Code since high school
-Languages: HTML, CSS, JS, PHP,
MySQL
-Current Project: Form&System –
an api based cms
#Contact
lukas@vea.re
@lukasoppermann
https://github.com/
lukasoppermann/creative-web
#Your objectives
What do you want to learn?
#Objectives
-understanding & working with
html, css, js
-intro to tools like wordpress &
google analytics
-learning about UX on the web
#Rules
#Rules
1.Stop me immediately when I am
to fast or you have a question.
2.Always ask questions immediately
#Passing
What do you have to do?
#Attendance
As required by BTK
#Do your work
-always hand in homework
-do your presentation
Short historyof computers & the internet
Zuse
first programmable computer 1938
1980s
home computers hit the market
Short history
of computers & the internet
EaNSF
Sir Tim Berners-Lee
Invents the Internet of today 1989
The first website
HTML only
HTML (23y)
HyperText Markup Language
CSS (18y)
Cascading Style Sheets
JS (18y)
JavaScript / ECMA Script
#What is the internet?
A simplified explanation.
#The internet is…
a network of connected servers.
#A server is…
a computer which is always online
(connected to the network).
Server Rack
19-inch Rack / Standardised System
#Surfing the web means…
connecting to one of the servers.
#To open a website we use a domain
But how does the browser know
which server to connect to? 

And which website to open?
e.g. http://google.com
#Root Name Server
Specific name server for a root
zone of the internet (e.g. EU)
#Nameservers
Specific servers know which IP
belongs to which domain
#IP address
unique address every device on the
internet has e.g. 172.16.254.1
#Terms
5 minutes to think of terms
you want to know about.
#Technologies.
The adaptive web.
#Backend
PHP, Ruby, .NET, SQL, etc.
#Frontend
HTML, DOM, CSS, JavaScript
#Homework: UX Research
-What is UX?
-What does a UX designer do?
-example of UX problem &
solution.
#Presentations HTML & CSS
-explain what the language is &
what it is used for
-give a short history of the
invention and development of it
-provide code examples with an
an image or a live demo
#Lukas Oppermann
lukas@vea.re

More Related Content

Similar to BTK Designing for the web 2016

computer fundamentals.pptx
computer fundamentals.pptxcomputer fundamentals.pptx
computer fundamentals.pptx
ZaidKhan530164
 
Javascript - Getting started | DevCom ISITCom
Javascript - Getting started | DevCom ISITComJavascript - Getting started | DevCom ISITCom
Javascript - Getting started | DevCom ISITCom
Hamdi Hmidi
 
WORKSHOP ON OWN WEBSITE LAUNCHING On March, 11th Sunday 2018 Morning 10 A.M ...
WORKSHOP ON OWN WEBSITE LAUNCHING  On March, 11th Sunday 2018 Morning 10 A.M ...WORKSHOP ON OWN WEBSITE LAUNCHING  On March, 11th Sunday 2018 Morning 10 A.M ...
WORKSHOP ON OWN WEBSITE LAUNCHING On March, 11th Sunday 2018 Morning 10 A.M ...
venkata ravi kanth pokala
 
Pronounced S-pro-ut-Co-re (Introduction to SproutCore)
Pronounced S-pro-ut-Co-re (Introduction to SproutCore)Pronounced S-pro-ut-Co-re (Introduction to SproutCore)
Pronounced S-pro-ut-Co-re (Introduction to SproutCore)
Julio Javier Cicchelli
 
Net as an awesome startup platform
Net as an awesome startup platformNet as an awesome startup platform
Net as an awesome startup platform
SquareHire
 
Sencha touch
Sencha touchSencha touch
Sencha touch
Madusha Perera
 
Become a webdeveloper - AKAICamp Beginner #1
Become a webdeveloper - AKAICamp Beginner #1Become a webdeveloper - AKAICamp Beginner #1
Become a webdeveloper - AKAICamp Beginner #1
Jacek Tomaszewski
 
Lec 01 Introduction.pptx
Lec  01 Introduction.pptxLec  01 Introduction.pptx
Lec 01 Introduction.pptx
AhmadMahmood62
 
BBS Selenium & Docker
BBS Selenium & Docker BBS Selenium & Docker
BBS Selenium & Docker
Mustafa Topçuoğulları
 
Untangling spring week1
Untangling spring week1Untangling spring week1
Untangling spring week1
Derek Jacoby
 
ChrisSchilling_SideProjects
ChrisSchilling_SideProjectsChrisSchilling_SideProjects
ChrisSchilling_SideProjects
Chris Schilling
 
Extending Office with Salesforce Apps and Data
Extending Office with Salesforce Apps and DataExtending Office with Salesforce Apps and Data
Extending Office with Salesforce Apps and Data
Salesforce Developers
 
Week 5
Week 5Week 5
Week 5
A VD
 
Week 5
Week 5Week 5
Week 5
A VD
 
PHP is the king, nodejs is the prince and Python is the fool - Alessandro Cin...
PHP is the king, nodejs is the prince and Python is the fool - Alessandro Cin...PHP is the king, nodejs is the prince and Python is the fool - Alessandro Cin...
PHP is the king, nodejs is the prince and Python is the fool - Alessandro Cin...
Codemotion
 
PHP is the King, nodejs the prince and python the fool
PHP is the King, nodejs the prince and python the foolPHP is the King, nodejs the prince and python the fool
PHP is the King, nodejs the prince and python the fool
Alessandro Cinelli (cirpo)
 
Maksym Chernenko «Building Standalone Desktop Applications»
Maksym Chernenko «Building Standalone Desktop Applications» Maksym Chernenko «Building Standalone Desktop Applications»
Maksym Chernenko «Building Standalone Desktop Applications»
LogeekNightUkraine
 
Javauserguide
JavauserguideJavauserguide
Javauserguide
muniinb4u
 
Internetandjava
InternetandjavaInternetandjava
Internetandjava
muniinb4u
 
ppttips
ppttipsppttips
ppttips
muniinb4u
 

Similar to BTK Designing for the web 2016 (20)

computer fundamentals.pptx
computer fundamentals.pptxcomputer fundamentals.pptx
computer fundamentals.pptx
 
Javascript - Getting started | DevCom ISITCom
Javascript - Getting started | DevCom ISITComJavascript - Getting started | DevCom ISITCom
Javascript - Getting started | DevCom ISITCom
 
WORKSHOP ON OWN WEBSITE LAUNCHING On March, 11th Sunday 2018 Morning 10 A.M ...
WORKSHOP ON OWN WEBSITE LAUNCHING  On March, 11th Sunday 2018 Morning 10 A.M ...WORKSHOP ON OWN WEBSITE LAUNCHING  On March, 11th Sunday 2018 Morning 10 A.M ...
WORKSHOP ON OWN WEBSITE LAUNCHING On March, 11th Sunday 2018 Morning 10 A.M ...
 
Pronounced S-pro-ut-Co-re (Introduction to SproutCore)
Pronounced S-pro-ut-Co-re (Introduction to SproutCore)Pronounced S-pro-ut-Co-re (Introduction to SproutCore)
Pronounced S-pro-ut-Co-re (Introduction to SproutCore)
 
Net as an awesome startup platform
Net as an awesome startup platformNet as an awesome startup platform
Net as an awesome startup platform
 
Sencha touch
Sencha touchSencha touch
Sencha touch
 
Become a webdeveloper - AKAICamp Beginner #1
Become a webdeveloper - AKAICamp Beginner #1Become a webdeveloper - AKAICamp Beginner #1
Become a webdeveloper - AKAICamp Beginner #1
 
Lec 01 Introduction.pptx
Lec  01 Introduction.pptxLec  01 Introduction.pptx
Lec 01 Introduction.pptx
 
BBS Selenium & Docker
BBS Selenium & Docker BBS Selenium & Docker
BBS Selenium & Docker
 
Untangling spring week1
Untangling spring week1Untangling spring week1
Untangling spring week1
 
ChrisSchilling_SideProjects
ChrisSchilling_SideProjectsChrisSchilling_SideProjects
ChrisSchilling_SideProjects
 
Extending Office with Salesforce Apps and Data
Extending Office with Salesforce Apps and DataExtending Office with Salesforce Apps and Data
Extending Office with Salesforce Apps and Data
 
Week 5
Week 5Week 5
Week 5
 
Week 5
Week 5Week 5
Week 5
 
PHP is the king, nodejs is the prince and Python is the fool - Alessandro Cin...
PHP is the king, nodejs is the prince and Python is the fool - Alessandro Cin...PHP is the king, nodejs is the prince and Python is the fool - Alessandro Cin...
PHP is the king, nodejs is the prince and Python is the fool - Alessandro Cin...
 
PHP is the King, nodejs the prince and python the fool
PHP is the King, nodejs the prince and python the foolPHP is the King, nodejs the prince and python the fool
PHP is the King, nodejs the prince and python the fool
 
Maksym Chernenko «Building Standalone Desktop Applications»
Maksym Chernenko «Building Standalone Desktop Applications» Maksym Chernenko «Building Standalone Desktop Applications»
Maksym Chernenko «Building Standalone Desktop Applications»
 
Javauserguide
JavauserguideJavauserguide
Javauserguide
 
Internetandjava
InternetandjavaInternetandjava
Internetandjava
 
ppttips
ppttipsppttips
ppttips
 

More from Lukas Oppermann

Btk creative-web-03
Btk creative-web-03Btk creative-web-03
Btk creative-web-03
Lukas Oppermann
 
Creative Web 02 - HTML & CSS Basics
Creative Web 02 - HTML & CSS BasicsCreative Web 02 - HTML & CSS Basics
Creative Web 02 - HTML & CSS Basics
Lukas Oppermann
 
Creative Web 01 - Introduction to the web & web development
Creative Web 01 - Introduction to the web & web developmentCreative Web 01 - Introduction to the web & web development
Creative Web 01 - Introduction to the web & web development
Lukas Oppermann
 
Creative Web 2 - JavaScript
Creative Web 2 - JavaScript Creative Web 2 - JavaScript
Creative Web 2 - JavaScript
Lukas Oppermann
 
Creative Web 2 - CSS
Creative Web 2 - CSS Creative Web 2 - CSS
Creative Web 2 - CSS
Lukas Oppermann
 
Creative Web 2 - Introduction
Creative Web 2 - IntroductionCreative Web 2 - Introduction
Creative Web 2 - Introduction
Lukas Oppermann
 
Contemporary webdesign day 2
Contemporary webdesign day 2Contemporary webdesign day 2
Contemporary webdesign day 2
Lukas Oppermann
 
Search Engine Optimization Introduction
Search Engine Optimization IntroductionSearch Engine Optimization Introduction
Search Engine Optimization Introduction
Lukas Oppermann
 

More from Lukas Oppermann (8)

Btk creative-web-03
Btk creative-web-03Btk creative-web-03
Btk creative-web-03
 
Creative Web 02 - HTML & CSS Basics
Creative Web 02 - HTML & CSS BasicsCreative Web 02 - HTML & CSS Basics
Creative Web 02 - HTML & CSS Basics
 
Creative Web 01 - Introduction to the web & web development
Creative Web 01 - Introduction to the web & web developmentCreative Web 01 - Introduction to the web & web development
Creative Web 01 - Introduction to the web & web development
 
Creative Web 2 - JavaScript
Creative Web 2 - JavaScript Creative Web 2 - JavaScript
Creative Web 2 - JavaScript
 
Creative Web 2 - CSS
Creative Web 2 - CSS Creative Web 2 - CSS
Creative Web 2 - CSS
 
Creative Web 2 - Introduction
Creative Web 2 - IntroductionCreative Web 2 - Introduction
Creative Web 2 - Introduction
 
Contemporary webdesign day 2
Contemporary webdesign day 2Contemporary webdesign day 2
Contemporary webdesign day 2
 
Search Engine Optimization Introduction
Search Engine Optimization IntroductionSearch Engine Optimization Introduction
Search Engine Optimization Introduction
 

Recently uploaded

AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdfAHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
talaatahm
 
Branding de la empresa de Bolt- 2024.pdf
Branding de la empresa de Bolt- 2024.pdfBranding de la empresa de Bolt- 2024.pdf
Branding de la empresa de Bolt- 2024.pdf
PabloMartelLpez
 
Timeless Principles of Good Design
Timeless Principles of Good DesignTimeless Principles of Good Design
Timeless Principles of Good Design
Carolina de Bartolo
 
定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样
qo1as76n
 
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
7sd8fier
 
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With DesignsGame Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
184804
 
Revolutionizing the Digital Landscape: Web Development Companies in India
Revolutionizing the Digital Landscape: Web Development Companies in IndiaRevolutionizing the Digital Landscape: Web Development Companies in India
Revolutionizing the Digital Landscape: Web Development Companies in India
amrsoftec1
 
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
kecekev
 
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptxUNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
GOWSIKRAJA PALANISAMY
 
ARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdfARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdf
Knight Moves
 
Heuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdfHeuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdf
Jaime Brown
 
一比一原版(毕业证)早稻田大学毕业证成绩单如何办理
一比一原版(毕业证)早稻田大学毕业证成绩单如何办理一比一原版(毕业证)早稻田大学毕业证成绩单如何办理
一比一原版(毕业证)早稻田大学毕业证成绩单如何办理
taqyed
 
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
9a93xvy
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
cy0krjxt
 
Impact of Fonts: in Web and Apps Design
Impact of Fonts:  in Web and Apps DesignImpact of Fonts:  in Web and Apps Design
Impact of Fonts: in Web and Apps Design
contactproperweb2014
 
一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理
一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理
一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理
n0tivyq
 
一比一原版(毕业证)长崎大学毕业证成绩单如何办理
一比一原版(毕业证)长崎大学毕业证成绩单如何办理一比一原版(毕业证)长崎大学毕业证成绩单如何办理
一比一原版(毕业证)长崎大学毕业证成绩单如何办理
taqyed
 
一比一原版(BU毕业证)波士顿大学毕业证如何办理
一比一原版(BU毕业证)波士顿大学毕业证如何办理一比一原版(BU毕业证)波士顿大学毕业证如何办理
一比一原版(BU毕业证)波士顿大学毕业证如何办理
peuce
 
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
jyz59f4j
 
Portfolio.pdf
Portfolio.pdfPortfolio.pdf
Portfolio.pdf
garcese
 

Recently uploaded (20)

AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdfAHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
 
Branding de la empresa de Bolt- 2024.pdf
Branding de la empresa de Bolt- 2024.pdfBranding de la empresa de Bolt- 2024.pdf
Branding de la empresa de Bolt- 2024.pdf
 
Timeless Principles of Good Design
Timeless Principles of Good DesignTimeless Principles of Good Design
Timeless Principles of Good Design
 
定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样
 
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
 
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With DesignsGame Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
 
Revolutionizing the Digital Landscape: Web Development Companies in India
Revolutionizing the Digital Landscape: Web Development Companies in IndiaRevolutionizing the Digital Landscape: Web Development Companies in India
Revolutionizing the Digital Landscape: Web Development Companies in India
 
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
 
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptxUNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
 
ARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdfARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdf
 
Heuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdfHeuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdf
 
一比一原版(毕业证)早稻田大学毕业证成绩单如何办理
一比一原版(毕业证)早稻田大学毕业证成绩单如何办理一比一原版(毕业证)早稻田大学毕业证成绩单如何办理
一比一原版(毕业证)早稻田大学毕业证成绩单如何办理
 
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
 
Impact of Fonts: in Web and Apps Design
Impact of Fonts:  in Web and Apps DesignImpact of Fonts:  in Web and Apps Design
Impact of Fonts: in Web and Apps Design
 
一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理
一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理
一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理
 
一比一原版(毕业证)长崎大学毕业证成绩单如何办理
一比一原版(毕业证)长崎大学毕业证成绩单如何办理一比一原版(毕业证)长崎大学毕业证成绩单如何办理
一比一原版(毕业证)长崎大学毕业证成绩单如何办理
 
一比一原版(BU毕业证)波士顿大学毕业证如何办理
一比一原版(BU毕业证)波士顿大学毕业证如何办理一比一原版(BU毕业证)波士顿大学毕业证如何办理
一比一原版(BU毕业证)波士顿大学毕业证如何办理
 
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
 
Portfolio.pdf
Portfolio.pdfPortfolio.pdf
Portfolio.pdf
 

BTK Designing for the web 2016