Mobile App Development Services By A Leading Mobile App Development Company
Diploma in Mobile App Development Part I · 2016-08-30 · Mobile App Development Educator Bsc...
Transcript of Diploma in Mobile App Development Part I · 2016-08-30 · Mobile App Development Educator Bsc...
![Page 1: Diploma in Mobile App Development Part I · 2016-08-30 · Mobile App Development Educator Bsc (Hons) in Computing in Game Development Diploma in Mobile App Development –Part I.](https://reader033.fdocuments.us/reader033/viewer/2022042917/5f59fd7edf2ba068e4239624/html5/thumbnails/1.jpg)
Lesson 3
User Interfaces with HTML
Presented by:
Tadhg Deeney Mobile App Development Educator
Bsc (Hons) in Computing in Game Development
Diploma in Mobile App Development – Part I
![Page 2: Diploma in Mobile App Development Part I · 2016-08-30 · Mobile App Development Educator Bsc (Hons) in Computing in Game Development Diploma in Mobile App Development –Part I.](https://reader033.fdocuments.us/reader033/viewer/2022042917/5f59fd7edf2ba068e4239624/html5/thumbnails/2.jpg)
Lesson 2 Recap
Designing our App
What are the Most Popular Apps?
What is the best idea?
Creating a Paper-Prototype
Software Layout
Course Interaction
Q & A
![Page 3: Diploma in Mobile App Development Part I · 2016-08-30 · Mobile App Development Educator Bsc (Hons) in Computing in Game Development Diploma in Mobile App Development –Part I.](https://reader033.fdocuments.us/reader033/viewer/2022042917/5f59fd7edf2ba068e4239624/html5/thumbnails/3.jpg)
Today’s Lesson
Introduction to HTML
Introduction to CSS
Exploring a Framework
Creating our First App
Summary
Q & A
![Page 4: Diploma in Mobile App Development Part I · 2016-08-30 · Mobile App Development Educator Bsc (Hons) in Computing in Game Development Diploma in Mobile App Development –Part I.](https://reader033.fdocuments.us/reader033/viewer/2022042917/5f59fd7edf2ba068e4239624/html5/thumbnails/4.jpg)
Let’s Begin
![Page 5: Diploma in Mobile App Development Part I · 2016-08-30 · Mobile App Development Educator Bsc (Hons) in Computing in Game Development Diploma in Mobile App Development –Part I.](https://reader033.fdocuments.us/reader033/viewer/2022042917/5f59fd7edf2ba068e4239624/html5/thumbnails/5.jpg)
What is HTML?
What is HTML?
![Page 6: Diploma in Mobile App Development Part I · 2016-08-30 · Mobile App Development Educator Bsc (Hons) in Computing in Game Development Diploma in Mobile App Development –Part I.](https://reader033.fdocuments.us/reader033/viewer/2022042917/5f59fd7edf2ba068e4239624/html5/thumbnails/6.jpg)
What is HTML?HTML5 – The language of the Web
![Page 7: Diploma in Mobile App Development Part I · 2016-08-30 · Mobile App Development Educator Bsc (Hons) in Computing in Game Development Diploma in Mobile App Development –Part I.](https://reader033.fdocuments.us/reader033/viewer/2022042917/5f59fd7edf2ba068e4239624/html5/thumbnails/7.jpg)
What is HTML?HTML5 – The language of the Web
“Hypertext” – content you navigate through“Mark Up” – labelling the content
<h1> Do you want to learn Mobile App Development?</h1><p>Tags usually come in pairs. The start tag & the end tag</p>
![Page 8: Diploma in Mobile App Development Part I · 2016-08-30 · Mobile App Development Educator Bsc (Hons) in Computing in Game Development Diploma in Mobile App Development –Part I.](https://reader033.fdocuments.us/reader033/viewer/2022042917/5f59fd7edf2ba068e4239624/html5/thumbnails/8.jpg)
What is HTML?
Advantages Supported on all browsers Free – No additional software needed Easy to learn & code for beginners
![Page 9: Diploma in Mobile App Development Part I · 2016-08-30 · Mobile App Development Educator Bsc (Hons) in Computing in Game Development Diploma in Mobile App Development –Part I.](https://reader033.fdocuments.us/reader033/viewer/2022042917/5f59fd7edf2ba068e4239624/html5/thumbnails/9.jpg)
What is HTML?
Disadvantages It cannot produce dynamic content alone Limited security features Structure can be difficult to grasp
![Page 10: Diploma in Mobile App Development Part I · 2016-08-30 · Mobile App Development Educator Bsc (Hons) in Computing in Game Development Diploma in Mobile App Development –Part I.](https://reader033.fdocuments.us/reader033/viewer/2022042917/5f59fd7edf2ba068e4239624/html5/thumbnails/10.jpg)
What is HTML?
Tags Description
<!DOCTYPE> Defines document type & HTML version
<html> This tag encloses the complete html document
<head> Keeps the documents tags that are NOT displayed on the screen
<title> Displays the Documents Title in the Browser
<body> Displays all of the content on the screen
<!-- --> Defines a Comment
![Page 11: Diploma in Mobile App Development Part I · 2016-08-30 · Mobile App Development Educator Bsc (Hons) in Computing in Game Development Diploma in Mobile App Development –Part I.](https://reader033.fdocuments.us/reader033/viewer/2022042917/5f59fd7edf2ba068e4239624/html5/thumbnails/11.jpg)
What is HTML?
What tag is used to create a comment in HTML?
#ShawMAD
![Page 12: Diploma in Mobile App Development Part I · 2016-08-30 · Mobile App Development Educator Bsc (Hons) in Computing in Game Development Diploma in Mobile App Development –Part I.](https://reader033.fdocuments.us/reader033/viewer/2022042917/5f59fd7edf2ba068e4239624/html5/thumbnails/12.jpg)
What is CSS?
What is CSS?
![Page 13: Diploma in Mobile App Development Part I · 2016-08-30 · Mobile App Development Educator Bsc (Hons) in Computing in Game Development Diploma in Mobile App Development –Part I.](https://reader033.fdocuments.us/reader033/viewer/2022042917/5f59fd7edf2ba068e4239624/html5/thumbnails/13.jpg)
What is CSS?Cascading Style Sheets
![Page 14: Diploma in Mobile App Development Part I · 2016-08-30 · Mobile App Development Educator Bsc (Hons) in Computing in Game Development Diploma in Mobile App Development –Part I.](https://reader033.fdocuments.us/reader033/viewer/2022042917/5f59fd7edf2ba068e4239624/html5/thumbnails/14.jpg)
What is CSS?
CSS is an extension to basic HTML that allows us to style our Web PagesCSS can control multiple pages all at once.
Selector {property : value }p{color : red}
![Page 15: Diploma in Mobile App Development Part I · 2016-08-30 · Mobile App Development Educator Bsc (Hons) in Computing in Game Development Diploma in Mobile App Development –Part I.](https://reader033.fdocuments.us/reader033/viewer/2022042917/5f59fd7edf2ba068e4239624/html5/thumbnails/15.jpg)
What is CSS?
AdvantagesPages load fasterSuperior StylesMultiple Device Compatibility
![Page 16: Diploma in Mobile App Development Part I · 2016-08-30 · Mobile App Development Educator Bsc (Hons) in Computing in Game Development Diploma in Mobile App Development –Part I.](https://reader033.fdocuments.us/reader033/viewer/2022042917/5f59fd7edf2ba068e4239624/html5/thumbnails/16.jpg)
What is CSS?
DisadvantageFragmentation – CSS renders different
dimensions with each browser
![Page 17: Diploma in Mobile App Development Part I · 2016-08-30 · Mobile App Development Educator Bsc (Hons) in Computing in Game Development Diploma in Mobile App Development –Part I.](https://reader033.fdocuments.us/reader033/viewer/2022042917/5f59fd7edf2ba068e4239624/html5/thumbnails/17.jpg)
What is CSS?
External CSS Linked to your HTML:<link rel=“stylesheet” href=“style.css”>
Selector, Selector {
property: value;property: value;
}
h1, h2 {
color: red;border-bottom: 1px solid red;
}
![Page 18: Diploma in Mobile App Development Part I · 2016-08-30 · Mobile App Development Educator Bsc (Hons) in Computing in Game Development Diploma in Mobile App Development –Part I.](https://reader033.fdocuments.us/reader033/viewer/2022042917/5f59fd7edf2ba068e4239624/html5/thumbnails/18.jpg)
What are we Making?
![Page 19: Diploma in Mobile App Development Part I · 2016-08-30 · Mobile App Development Educator Bsc (Hons) in Computing in Game Development Diploma in Mobile App Development –Part I.](https://reader033.fdocuments.us/reader033/viewer/2022042917/5f59fd7edf2ba068e4239624/html5/thumbnails/19.jpg)
HTML Layout
Header Here
Content
Footer Here
<div class=“header">
<div class=“content">
<div class=“footer">
Index.html
![Page 20: Diploma in Mobile App Development Part I · 2016-08-30 · Mobile App Development Educator Bsc (Hons) in Computing in Game Development Diploma in Mobile App Development –Part I.](https://reader033.fdocuments.us/reader033/viewer/2022042917/5f59fd7edf2ba068e4239624/html5/thumbnails/20.jpg)
What is Bootstrap?
What is Bootstrap?
![Page 21: Diploma in Mobile App Development Part I · 2016-08-30 · Mobile App Development Educator Bsc (Hons) in Computing in Game Development Diploma in Mobile App Development –Part I.](https://reader033.fdocuments.us/reader033/viewer/2022042917/5f59fd7edf2ba068e4239624/html5/thumbnails/21.jpg)
What is Bootstrap?
A Free front-end Framework for faster and easier web development
![Page 22: Diploma in Mobile App Development Part I · 2016-08-30 · Mobile App Development Educator Bsc (Hons) in Computing in Game Development Diploma in Mobile App Development –Part I.](https://reader033.fdocuments.us/reader033/viewer/2022042917/5f59fd7edf2ba068e4239624/html5/thumbnails/22.jpg)
Summary
Introduction to HTML
Introduction to CSS Bootstrap
Exploring a Framework
Creating our First App
o Now we can start building onwards …..
o Attend all of the lessons live to Ask Questions
We’re here to help, so contact us anytime!
![Page 23: Diploma in Mobile App Development Part I · 2016-08-30 · Mobile App Development Educator Bsc (Hons) in Computing in Game Development Diploma in Mobile App Development –Part I.](https://reader033.fdocuments.us/reader033/viewer/2022042917/5f59fd7edf2ba068e4239624/html5/thumbnails/23.jpg)
Next Lesson
• The next session is “Coding Functions”
• Introduction to Javascript
• Creating a variable
• Creating a function
• Adding User Interaction
• Attend all of the lessons LIVE and your knowledge will grow
• Shaw Academy Lifetime Membership Prize during Lesson 6
• Recordings are available within 24 hours
Go to www.shawacademy.com and then the Top Right Corner – Members Area
![Page 24: Diploma in Mobile App Development Part I · 2016-08-30 · Mobile App Development Educator Bsc (Hons) in Computing in Game Development Diploma in Mobile App Development –Part I.](https://reader033.fdocuments.us/reader033/viewer/2022042917/5f59fd7edf2ba068e4239624/html5/thumbnails/24.jpg)
Q&A
• We begin again……..
• You will learn to create a User Interactive App
• We will discuss variables & functions
• Create a Sample App
Next Lesson is
www.facebook.com/shawacademy
www.twitter.com/shawacademy
www.shawacademy.com
Coding Functions
See local numbers on website