Intro to Front-End Web Devlopment

•Télécharger en tant que PPTX, PDF•

0 j'aime•1,644 vues

damonras

Design Technologie

Overview
• Web Fonts
• HTML5
• CSS3
• Mobile

Web Fonts: History
• Traditional, common web fonts
– Arial
– Helvetica
– Georgia
– Times New Roman
– Verdana
– Lucida Grande

Web Fonts: History
• What about other, nicer, fancier fonts?
– Font foundries and legal issues
– Workarounds
• Text/image replacement
• sIFR
• @font-face
• Web font services

HTML5: What is it?
• The next step in the evolution of HTML
• Not a new language
• WHATWG and W3C
– Apple, Mozilla, Firefox…

HTML5: What’s new?
OLD:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

NEW:
<!DOCTYPE html>

HTML5: What’s new?
OLD:
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">

NEW:
<meta charset=UTF-8">

HTML5: What’s new?
OLD:
<script language="JavaScript" src="file.js"
type="text/javascript"></script>

NEW:
<script src="file.js"></script>

HTML5: What’s new?
OLD:
<link rel="stylesheet" href="styles.css" type="text/css"
media="screen">

NEW:
<link rel="stylesheet" href="styles.css">

HTML5: What’s new?
• APIs
– Build offline web apps (offline storage)
• https://www.minutes.io/
– Drag and drop
– Page visibility
– Many more that are over my head…
• http://www.html5rocks.com/en/features/nuts_and_
bolts

HTML5: What’s new?
• Semantics and Structure

<header> IE 8 and below do not like these new tags.
<footer>
Use ‘shim’ to force support:
<section> <!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/
<article> trunk/html5.js"></script>
<![endif]-->
<aside>
<nav>
<audio>
<video>

HTML5: Resources
• caniuse.com
• html5please.com
• html5rocks.com
• html5boilerplate.com
• coding.smashingmagazine.com/tag/html5/
• Dissect your favorite sites to see how
they’re using these techniques
– Firebug extension for Firefox

CSS3: What’s new?
• A lot!
– css3please.com
– leaverou.github.com/animatable/
– movethewebforward.org

CSS3 (and HTML5) : Support
• Varies wildly between browsers html5please.com
• Can use ‘polyfills’ and ‘shims’ to force
HTML5 and CSS3 support or
fallbacks, but understand the drawbacks
– modernizr.com
– yepnopejs.com
– css3pie.com
– selectivizr.com
– github.com/scottjehl/Respond

Mobile
• Responsive Web Design
– Media Queries
• http://mediaqueri.es/
• jQuery Mobile
– http://jquerymobile.com/
• Recommended reading:
– Mobile First by Luke Wroblewski
– Responsive Web Design by Ethan Marcotte

Follow the Leaders
• Google these Web Design Superstars.
Follow their blogs, Twitter feeds, etc.
– Luke Wroblewski
– Ethan Marcotte
– Dan Cedarholm
– Jeremy Keith
– Jeffrey Zeldman
– Elliot Jay Stocks
– Cameron Moll
– Jonathan Snook

Contenu connexe

Tendances

Web Development PresentationTurnToTech

Ppt of web developmentbethanygfair

Training report on web developingJawhar Ali

Project report | Major Project | Engineering | Devansh KoolwalDevansh Koolwal

Report on web developmentAJEETKUMAR932614

ppt of web development for diploma student Abhishekchauhan863165

Web 3.0 Zainab Muneer

Introduction to MERN StackSurya937648

Web application frameworkPankaj Chand

Node js Introductionsanskriti agarwal

Internship reportSabana Maharjan

Web DevelopmentAditya Raman

Internship presentationWasim Shemna

Minor Project Presentation 1Pratishtha Ram

FRONT-END WEB DEVELOPMENT WITH REACTJSTran Phong Phu

Joomla and cmswaseem ahmad

Web Development with HTML5, CSS3 & JavaScriptEdureka!

VTU final year project reportathiathi3

Web 3.0Rajashree Rao

e-commerce web development project report (Bookz report)Mudasir Ahmad Bhat

Tendances (20)

Web Development Presentation

Ppt of web development

Training report on web developing

Project report | Major Project | Engineering | Devansh Koolwal

Report on web development

ppt of web development for diploma student

Web 3.0

Introduction to MERN Stack

Web application framework

Node js Introduction

Internship report

Web Development

Internship presentation

Minor Project Presentation 1

FRONT-END WEB DEVELOPMENT WITH REACTJS

Joomla and cms

Web Development with HTML5, CSS3 & JavaScript

VTU final year project report

Web 3.0

e-commerce web development project report (Bookz report)

Similaire à Intro to Front-End Web Devlopment

html5 css3 the future of web technologyhazzaz

Html5 publicdoodlemoonch

HTML 5Prof. Erwin Globio

HTML5 and Joomla! 2.5 TemplateMarvelic Engine Co., Ltd.

Demystifying HTML5Sergejus Barinovas

HTML5, CSS3 and the Future of the WebBerg Brandt

Curtin University Frontend Web DevelopmentDaryll Chu

HTML5 – the good, the bad, and the funSarah Dutkiewicz

Introduction to HTML5 and CSS3 (revised)Joseph Lewis

09. html5 & css3 furture of webQuang Anh Le

HTML5 CSS3 The Future of Web Technologieshoctudau

09 html5 css3-the_future_of_web_technologyNguyen Duc Phu

Html5, css3 and the future of web technologiesVõ Duy Tuấn

HTML5 development in 30 minutesNazrul Kamaruddin

Take Your Markup to ElevenEmily Lewis

HTML5 History & FeaturesDave Ross

HTML5 and CSS3 Techniques You Can Use TodayTodd Anglin

Building rich interface components with SharePointLouis-Philippe Lavoie

Put the 5 in HTMLFrédéric Harper

Build Accessibly - Community Day 2012Karen Mardahl

Similaire à Intro to Front-End Web Devlopment (20)

html5 css3 the future of web technology

Html5 public

HTML 5

HTML5 and Joomla! 2.5 Template

Demystifying HTML5

HTML5, CSS3 and the Future of the Web

Curtin University Frontend Web Development

HTML5 – the good, the bad, and the fun

Introduction to HTML5 and CSS3 (revised)

09. html5 & css3 furture of web

HTML5 CSS3 The Future of Web Technologies

09 html5 css3-the_future_of_web_technology

Html5, css3 and the future of web technologies

HTML5 development in 30 minutes

Take Your Markup to Eleven

HTML5 History & Features

HTML5 and CSS3 Techniques You Can Use Today

Building rich interface components with SharePoint

Put the 5 in HTML

Build Accessibly - Community Day 2012

Dernier

AMBER GRAIN EMBROIDERY | Growing folklore elements | Root-based materials, w...BarusRa

Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...amitlee9823

VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...Call Girls in Nagpur High Profile

B. Smith. (Architectural Portfolio.).pdfUniversity of Wisconsin-Milwaukee

Editorial design Magazine design project.pdftbatkhuu1

call girls in Vasundhra (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...Delhi Call girls

Booking open Available Pune Call Girls Kirkatwadi 6297143586 Call Hot Indian...Call Girls in Nagpur High Profile

RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...amitlee9823

Best VIP Call Girls Noida Sector 44 Call Me: 8448380779Delhi Call girls

CALL ON ➥8923113531 🔝Call Girls Aminabad Lucknow best Night Fun serviceanilsa9823

SD_The MATATAG Curriculum Training Design.pptxjanettecruzeiro1

Design Inspiration for College by Slidesgo.pptxTusharBahuguna2

VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...SUHANI PANDEY

Government polytechnic college-1.pptxabcdshivubhavv

Top Rated Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...Call Girls in Nagpur High Profile

The history of music videos a level presentationamedia6

Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)amitlee9823

Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...Call Girls in Nagpur High Profile

call girls in Kaushambi (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...Delhi Call girls

Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...amitlee9823

Dernier (20)

AMBER GRAIN EMBROIDERY | Growing folklore elements | Root-based materials, w...

Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...

VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...

B. Smith. (Architectural Portfolio.).pdf

Editorial design Magazine design project.pdf

call girls in Vasundhra (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...

Booking open Available Pune Call Girls Kirkatwadi 6297143586 Call Hot Indian...

RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...

Best VIP Call Girls Noida Sector 44 Call Me: 8448380779

CALL ON ➥8923113531 🔝Call Girls Aminabad Lucknow best Night Fun service

SD_The MATATAG Curriculum Training Design.pptx

Design Inspiration for College by Slidesgo.pptx

VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...

Government polytechnic college-1.pptxabcd

Top Rated Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...

The history of music videos a level presentation

Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)

Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...

call girls in Kaushambi (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...

Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...

Intro to Front-End Web Devlopment

1. Intro to Front-end Web Development

2. Overview • Web Fonts • HTML5 • CSS3 • Mobile

3. Web Fonts: History • Traditional, common web fonts – Arial – Helvetica – Georgia – Times New Roman – Verdana – Lucida Grande

4. Web Fonts: History • What about other, nicer, fancier fonts? – Font foundries and legal issues – Workarounds • Text/image replacement • sIFR • @font-face • Web font services

5. Web Font Services Several others…

6. HTML5: What is it? • The next step in the evolution of HTML • Not a new language • WHATWG and W3C – Apple, Mozilla, Firefox…

7. HTML5: What’s new? • First, the old:

8. HTML5: What’s new? OLD: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> NEW: <!DOCTYPE html>

9. HTML5: What’s new? OLD: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> NEW: <meta charset=UTF-8">

10. HTML5: What’s new? OLD: <script language="JavaScript" src="file.js" type="text/javascript"></script> NEW: <script src="file.js"></script>

11. HTML5: What’s new? OLD: <link rel="stylesheet" href="styles.css" type="text/css" media="screen"> NEW: <link rel="stylesheet" href="styles.css">

12. HTML5: What’s new? • APIs – Build offline web apps (offline storage) • https://www.minutes.io/ – Drag and drop – Page visibility – Many more that are over my head… • http://www.html5rocks.com/en/features/nuts_and_ bolts

13. HTML5: What’s new? • Semantics and Structure <header> IE 8 and below do not like these new tags. <footer> Use ‘shim’ to force support: <section>  <aside> <nav> <audio> <video>

14. HTML5: Resources • caniuse.com • html5please.com • html5rocks.com • html5boilerplate.com • coding.smashingmagazine.com/tag/html5/ • Dissect your favorite sites to see how they’re using these techniques – Firebug extension for Firefox

15. CSS3: What’s new? • A lot! – css3please.com – leaverou.github.com/animatable/ – movethewebforward.org

16. CSS3 (and HTML5) : Support • Varies wildly between browsers html5please.com • Can use ‘polyfills’ and ‘shims’ to force HTML5 and CSS3 support or fallbacks, but understand the drawbacks – modernizr.com – yepnopejs.com – css3pie.com – selectivizr.com – github.com/scottjehl/Respond

17. Mobile • Responsive Web Design – Media Queries • http://mediaqueri.es/ • jQuery Mobile – http://jquerymobile.com/ • Recommended reading: – Mobile First by Luke Wroblewski – Responsive Web Design by Ethan Marcotte

18. Follow the Leaders • Google these Web Design Superstars. Follow their blogs, Twitter feeds, etc. – Luke Wroblewski – Ethan Marcotte – Dan Cedarholm – Jeremy Keith – Jeffrey Zeldman – Elliot Jay Stocks – Cameron Moll – Jonathan Snook

Intro to Front-End Web Devlopment

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Intro to Front-End Web Devlopment

Similaire à Intro to Front-End Web Devlopment (20)

Dernier

Dernier (20)

Intro to Front-End Web Devlopment