Web05

•

0 likes•157 views

Samantha Lin

git, plugin, tools, reference

Technology

林聿儒 Samantha
2010 - 2014
2015 - now
2016
2014 - 2015 RD
2015 - 2016
2014 - 2017

色選取器
https://couleursapp.com/ http://annystudio.com/software/colorpicker/
Couleurs Just Color Picker

假字生成器
https://www.lipsum.com/ http://www.richyli.com/tool/loremipsum/
Lorem Ipsum

免費圖庫
https://pixabay.com/ https://unsplash.com/
Pixabay Unsplash

線上程式編輯器
https://codepen.io/ https://jsﬁddle.net/

animate.css + wow.js
https://daneden.github.io/animate.css/ http://mynameismatthieu.com/WOW/index.html

滾動視差
http://markdalgleish.com/projects/stellar.js/
• jquery

.grad {
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, yellow); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, yellow); /* Standard syntax */
}
CSS prefixes 前綴
-webkit- -webkit- -moz- -o- -ms-

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> </title>
<link rel="stylesheet" href=“style.css”>
<link rel="shortcut icon" href="img/favicon.png">
</head>
在瀏覽器裡顯示的樣貌

在搜尋引擎裡顯示的樣貌
<title> Samantha</title>
<meta name="description" content=" The CV of Samantha">
• 160
•
• description

在社群軟體上的分享縮圖
<meta property="og:image" content="http://iju.sytes.net/img/proﬁle_pic.jpg">
<meta property="og:title" content=" I JU HSIEH">
<meta property="og:description" content=" The CV of I Ju
Hsieh">
• 200px
• Facebook —FB Debugger
https://developers.facebook.com/tools/debug/og/object/

1. github https://github.com/
2. sourcetree https://www.sourcetreeapp.com/
工具準備

https://www.pinterest.com/
風格與設計參考
https://www.awwwards.com/

色參考
http://colorhunt.co/
Colorhunt
https://webgradients.com/
WebGradients

Similar to Web05

Software assessment by example (lecture at the University of Bern)Tudor Girba

2014 Марк Мартемьянов, продуктовый мобильный дизайнер Aviasales: Стартап без ...SpbStartupDay

Design in a Web 2.0 World: Beyond Glossy And GradientsPatrick Haney

STARTUPDAY, Spb 14 Dec, FRII Mark Martemianov

15 metaphor typographyDr. V Vorvoreanu

Pitch deck powerpointRobinson Hernandez

High-Fidelity PrototypingHans Põldoja

[Azure Council Experts (ACE) 第18回定例会] Microsoft Azureアップデート情報 (2016/06/17-201...Naoki (Neo) SATO

Smart Design Sara Cannon

High Fidelity PrototypingHans Põldoja

Design Elements AnalysisBlancoScience

High-Fidelity PrototypingHans Põldoja

Module 07: WireframesDaniel Drew Turner

WebMatrix jQuery Mobile WebChris Love

"Wordpress And Your Brand" 2010 - By Sara CannonSara Cannon

Fonts used.docxSalA56

Making the Mobile Web WorkTerry Ryan

The Definitive Guide for When to Use What In Office 365SharePoint Saturday New Jersey

Technical Introduction to YDNChristian Heilmann

Visualizing data spring2012Lisa Kurt

Similar to Web05 (20)

Software assessment by example (lecture at the University of Bern)

2014 Марк Мартемьянов, продуктовый мобильный дизайнер Aviasales: Стартап без ...

Design in a Web 2.0 World: Beyond Glossy And Gradients

STARTUPDAY, Spb 14 Dec, FRII

15 metaphor typography

Pitch deck powerpoint

High-Fidelity Prototyping

[Azure Council Experts (ACE) 第18回定例会] Microsoft Azureアップデート情報 (2016/06/17-201...

Smart Design

High Fidelity Prototyping

Design Elements Analysis

High-Fidelity Prototyping

Module 07: Wireframes

WebMatrix jQuery Mobile Web

"Wordpress And Your Brand" 2010 - By Sara Cannon

Fonts used.docx

Making the Mobile Web Work

The Definitive Guide for When to Use What In Office 365

Technical Introduction to YDN

Visualizing data spring2012

Recently uploaded

08448380779 Call Girls In Civil Lines Women Seeking MenDelhi Call girls

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo

Histor y of HAM Radio presentation slidevu2urc

Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Igalia

Driving Behavioral Change for Information Management through Data-Driven Gree...Enterprise Knowledge

A Domino Admins Adventures (Engage 2024)Gabriella Davis

How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes

Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...Neo4j

The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfEnterprise Knowledge

Scaling API-first – The story of a global engineering organizationRadu Cotescu

ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProduct Anonymous

08448380779 Call Girls In Friends Colony Women Seeking MenDelhi Call girls

Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoffsammart93

The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los

Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2

Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Drew Madelung

Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko

Powerful Google developer tools for immediate impact! (2023-24 C)wesley chun

04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG

GenAI Risks & Security Meetup 01052024.pdflior mazor

Recently uploaded (20)

08448380779 Call Girls In Civil Lines Women Seeking Men

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...

Histor y of HAM Radio presentation slide

Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...

Driving Behavioral Change for Information Management through Data-Driven Gree...

A Domino Admins Adventures (Engage 2024)

How to Troubleshoot Apps for the Modern Connected Worker

Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...

The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf

Scaling API-first – The story of a global engineering organization

ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke

08448380779 Call Girls In Friends Colony Women Seeking Men

Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff

The 7 Things I Know About Cyber Security After 25 Years | April 2024

Exploring the Future Potential of AI-Enabled Smartphone Processors

Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...

Handwritten Text Recognition for manuscripts and early printed texts

Powerful Google developer tools for immediate impact! (2023-24 C)

04-2024-HHUG-Sales-and-Marketing-Alignment.pptx

GenAI Risks & Security Meetup 01052024.pdf

Web05

1. 0 101 Samantha W5

2. 林聿儒 Samantha 2010 - 2014 2015 - now 2016 2014 - 2015 RD 2015 - 2016 2014 - 2017

3. 網頁切版輔助 05

4. 工具類

5. https://www.w3schools.com/ 程式標準文件

6. 色選取器 https://couleursapp.com/ http://annystudio.com/software/colorpicker/ Couleurs Just Color Picker

7. 假字生成器 https://www.lipsum.com/ http://www.richyli.com/tool/loremipsum/ Lorem Ipsum

8. 免費圖庫 https://pixabay.com/ https://unsplash.com/ Pixabay Unsplash

9. 線上程式編輯器 https://codepen.io/ https://jsﬁddle.net/

10. 件類

11. FontAwesome http://fontawesome.io/

12. animate.css + wow.js https://daneden.github.io/animate.css/ http://mynameismatthieu.com/WOW/index.html

13. 滾動視差 http://markdalgleish.com/projects/stellar.js/ • jquery

14. 網站上線之前 06

15. 網頁相容性

16. .grad { background: red; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(red, yellow); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(red, yellow); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(red, yellow); /* For Firefox 3.6 to 15 */ background: linear-gradient(red, yellow); /* Standard syntax */ } CSS prefixes 前綴 -webkit- -webkit- -moz- -o- -ms-

17. SEO優化

18. <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> </title> <link rel="stylesheet" href=“style.css”> <link rel="shortcut icon" href="img/favicon.png"> </head> 在瀏覽器裡顯示的樣貌

19. 在搜尋引擎裡顯示的樣貌 <title> Samantha</title> <meta name="description" content=" The CV of Samantha"> • 160 • • description

20. 在社群軟體上的分享縮圖 <meta property="og:image" content="http://iju.sytes.net/img/proﬁle_pic.jpg"> <meta property="og:title" content=" I JU HSIEH"> <meta property="og:description" content=" The CV of I Ju Hsieh"> • 200px • Facebook —FB Debugger https://developers.facebook.com/tools/debug/og/object/

21. 發佈 Github Page 07

22. 什是Git / GitHub ? • • • •

23. 1. github https://github.com/ 2. sourcetree https://www.sourcetreeapp.com/ 工具準備

24. Git 三步驟 add commit push

25. 設定GitHub Pages

26. 網頁設計參考 08

27. https://www.pinterest.com/ 風格與設計參考 https://www.awwwards.com/

28. 色參考 http://colorhunt.co/ Colorhunt https://webgradients.com/ WebGradients