布萊恩的創業小窩的部落格

 
整理好的前端工程師學習路線超級珍貴!來不趕快進來作筆記!記得還要一步步跟照著做,前端工程師一點都遙不可及!

 
要學程式語言卻還是隻無頭蒼蠅嗎?今天向您介紹現今正熱門的語言程式,讓你方向更明確!
另外，有很多同學想轉行程式設計師，也遇到同樣的問題：那麼多的程式語言到底該怎麼選呢？如果你是一名具有前瞻性的開發者，或你想成為一名具有前瞻能力的開發者，那麼，你應該至少在最好的程式語言中選擇一個，像是：Python, JavaScript , C#, C, PHP, Java, C++或者go。
廢話不多說！現在不妨讓我們介紹2019年熱門的十大程式語言給你吧！
 
一、Java最流行
與一年前一樣，不意外地，Java目前仍然是最流行的程式語言！據TIOBE的數據顯示，在這幾十年來，Java更是比其他語言更常名列榜首呢！許多知名公司使用Java來開發軟件和應用程序，所以如果你碰巧使用Java，絕對不必為找工作而苦惱。Java受歡迎的主要原因是它擁有可移植性、可擴展性和龐大的用戶社區。
二、經典的C語言
作為最古老的程式語言之一，C語言依然高居榜首，這歸功於其可移植性以及微軟、Oracle和蘋果等科技巨頭採用它。它與幾乎所有系統兼容，很適合操作系統和嵌入式系統。 由於運行時環境相對小巧，因此C是保持這種系統精簡的完美選擇。強烈建議初學者學C，它實際上是程式語言的通用語言，已催生出了同樣很受歡迎的衍生語言，比如C++和C#。
三、C++繼續占主導地位
這種面向對象程式語言，在20世紀80年代開發而成，現在仍應用於從桌面Web應用程序到服務器基礎設施的眾多系統。由於靈活性、高性能以及可用於多種環境，C ++依然很吃香。以C++為業的工作通常需要開發麵向性能密集型任務的桌面應用程序。掌握C++可以更深入地了解程式語言，幫助獲得低級內存處理方面的技能。
四、Python：不斷上升
過去15年來，Python的受歡迎程度穩步上升。過去這幾年，它一直能夠躋身TIOBE指數前5名的位置。作為如今人工智能、機器學習、大數據和機器人等一些最有前途的技術背後的主要語言，Python近年來積累了龐大的粉絲群。你會驚訝地發現學習Python很容易，這就是為什麼許多經驗豐富的開發人員選擇Python作為第二或第三語言的原因。
五、C#：遊戲開發人員的寵兒
C#是一種現代的面向對象程式語言，由微軟開發，與當時商業軟件開發人員廣泛使用的Java相抗衡。它專為在微軟平台上開發應用程序而設計，需要Windows上的.NET框架才能工作。與前一年一樣，C#保持穩定的位置，名次沒有重大變化。可以使用C#開發幾乎所有應用程序，但它尤其擅長於Windows桌面應用程序和遊戲開發。
六，Visual Basic.NET
Visual Basic.NET與去年一樣，在指數中繼續保持第六位。它是微軟的OOP語言之一，結合了基於.NET框架的類和運行時環境的強大功能。它自VB6衍生而來，擅長開發GUI應用程序，為程序員簡化了任務，並提高生產力。對於程序員來說，除了Web服務和Web開發外，VB.NET還為針對Windows平台開發桌面應用程序提供了一種快速簡單的方法。
七、用於Web開發的PHP
據TIOBE顯示，PHP在TIOBE最受歡迎的程式語言排行榜中位居第七，取代JavaScript成為更受歡迎的腳本語言。PHP主要用在服務器端上用於Web開發，約佔網站總數的80%。 Facebook最初使用的就是PHP，PHP在WordPress內容管理系統中扮演的角色讓它很受歡迎。PHP提供了幾個框架，比如Laravel和Drupal，幫助開發人員更快地構建應用程序，擁有更高的可擴展性和可靠性。因此，如果你在找Web開發方面的職位，PHP是不錯的選擇。
八、JavaScript必不可少
今年JavaScript的使用量有所下降，名次比去年有所下滑。但是現在所有軟件開發人員都以某種方式使用JavaScript。與HTML5和CSS一起使用，JavaScript對於前端Web開發來說必不可少，以便創建交互式網頁，並向用戶動態顯示內容。 超過90%的網站使用這種語言，它也是初學者開始上手的最友好的程式語言之一。所以，如果你掌握JavaScript，根本不缺機會。然而，你需要學習其他支持性的語言和框架，才能成為主攻桌面和移動應用程序或遊戲開發的專業的前端開發人員。
九、SQL
SQL奪得第九名，實現了顯著的增長，畢竟去年它未能躋身於TIOBE指數20大程式語言。盡管存在其他數據庫技術，但用於管理數據庫的這種標準查詢語言在過去四十年一直處於主導地位。
原因在於它具有簡單性、可靠性、無處不在，以及對保持這種開源語言活力大有幫助的活躍社區。與其他語言相比，初學者通常更容易學習SQL;就職業發展而言，像數據分析員這類高薪職位要求SQL非懂不可。
十、GO程式語言
 
初學程式，學哪種語言比較好?
現在，隨著技術不斷擴展，單純的會一種程式言已經不能滿足企業的需要，很多IT人都是身懷多種絕技，但是好在，程式語言是相通的，比如你學會了C，再學C++或Python就相對容易很多，所以，初學程式，還是要選擇一種注重基礎的語言，比如說C，這樣對以後其它程式語言的學習幫助很大。
 
相關連結來啦~






懂時事就是要上Python課程:谷哥心裡到底打什麼算盤?(上)





懂時事就是要上Python課程:谷哥心裡到底打什麼算盤?(下)


快要畢業卻不知道未來該怎麼辦嗎?來達內教育,讓你與職場無縫接軌




  

神通廣大的網路行銷課程讓你立馬取代AI


網路行銷課程還能教什麼?當然要教主關鍵字的相關詞呀!
NOWnews 今日新聞


  
  
 
 

前端工程師對於目前令人眼花撩亂的行動設備,其實也是很有一套的!今天的重點整理,讓你理解:他們為何有這麼有一套!
 
行動載具特性
 
圖上方為傳統以桌機為主設計模式；下方為「行動裝置優先 (Mobile First)」模式
 
手機、平板等行動設備在操作上與電腦差異很大，電腦以滑鼠操作為主、行動設備則是以觸控螢幕為主。因此，兩者的網頁開發在互動設計上也有所不同。
行動載具的基本特徵有：可單指或多指操控的多點觸控、多種手勢（如搖一搖、滑動等）以及文字虛擬鍵盤。
除了上述與電腦差異很大的特徵外，在視覺呈現上也與電腦差很大，前端工程師與網頁設計師需注意的事項如下：
按鈕大小：
電腦因為是用滑鼠操控，所以無論按鈕多小，滑鼠一樣點的到。但是行動裝置是以觸控為主，按鈕太小會增加點擊難度。因此蘋果電腦公司建議 iOS 開發者，任何需要被觸控的 UI (使用者介面) 元件，都不能小於 44*44px。
超連結大小：
除了上述的按鈕之外，也會有文字的超連結內容。同理，也不能讓帶有超連結的文字太小，以利於手指點擊。
UI 設計：
UI 設計必須考量到行動載具的畫面尺寸，因此像按鈕等需要被觸控的 UI (使用者介面) 元件，都需要在畫面中容易被點擊的地方。
點擊效果：
在按鈕效果的開發上，有時滑鼠除了點擊與放開的指令外，還會有滑來滑去的特效。但是行動版裝置是使用手指直接觸控的，所以就不需要此種特效強調。
互動效果：
電腦與行動裝置的運算效能畢竟不一樣。所以有一些在電腦版網頁運行的很順暢的特效 (如 Slide 幻燈片、Carousel 等) 在行動裝置上未必能流暢顯示。所以在設計　RWD 網頁時，要考量到不同設備的效能。
 
行動裝置優先 (Mobile First) 概念
行動裝置優先 (Mobile First) 是由知名的設計師與 UI規劃師 Luke Wroblewski 提出的，他曾當過美國 yahoo 架構設計負責人，他在2010年的時候進行了一次簡報，標題就是 Mobile First（原始簡報與影片)，是指設計網站時，應該以行動裝置的介面、互動、顯示等為主要考量，其他的裝置次之，有別於過去設計網站時「以桌上型電腦為主，再將電腦網站上的內容移植到行動裝置上」的模式。
現在越來越多的人使用行動裝置上網，根據美國最大電信業者 AT&T 的數據，手機流量在 3 年內成長了 50 倍，目前行動裝置上網的使用率仍在激增當中，而且還有更多的功能持續被開發出來。
相較於傳統的電腦，行動裝置的使用較不受到時間空間限制，無論是在捷運、廁所等都可使用，人們也花了不少零碎時間使用手機上網，因此瀏覽網頁的頻率跟電腦比起來有過之無不及，所以 Google、Facebook、Adobe 等大公司都開始以「行動優先」的概念來設計自己的產品。
那「行動優先」要如何套用到網頁設計上？一開始先針對行動裝置的小畫面來設計版面、填入最重要的內容，然後再以這些基本內容都存在的狀況下，針對較大的螢幕裝置 (如平板、進而電腦、電視螢幕等) 漸進式的擴展其佈局。這樣一來，網頁在行動裝置呈現的介面會非常好瀏覽且美觀，該有的功能、內容都有，並且由小畫面擴大至大畫面，內容更大、可擺放的元素就越多、限制也越少 (參見「漸進增強（Progressive Enhancement）」)。但是如果是從大畫面開始設計，當要轉換成小畫面時，其內容的擺放就會越來越困難，常常需要透過刪減內容，才能「塞」入較小的版面當中。這樣一來，有可能行動裝置上出現的是精簡過「簡陋卻可用 (poor but passable)」的內容，而無法給使用者完整的內容 (參見「優雅降級（Graceful Degradation）」)。
若要建立良好的行動裝置使用者體驗 (UX)，應考慮以下幾點：

使用者使用行動載具的習慣、方式及思考模式

提供明確精要的內容，比完整的導覽功能更重要

提供清楚且好觸控的導覽選單

簡潔明確的頁面內容

符合行動載具操作特性

現在大多數的 RWD 響應式網站，都是採用行動裝置優先 (Mobile First) 概念來設計，範例如下：
Youtube網站
 

 

就算是在手機上，也可以很方便的點閱影片、撥放、暫停，甚至對影片作評論、按讚！

 
Airbnb網站
 

 

選單的按鈕設計的大小適中，使用者用手機就可以輕易地透過選找到目標住處，並且藉由滑動的行為瀏覽屋況，並按下預訂按鍵！

 
本篇為「前端工程師必懂RWD概念」三部曲第三篇，全系列目錄如下:


(目錄)

1. RWD網頁與傳統網頁設計的差異


2. 網頁設計的「優雅降級」與「漸進增強」


3. 行動設備的設計考量

 
HERE！延伸閱讀看過來：

前端工程師和網頁設計師必學-了解整體網站的規劃流程

前端工程師必備RWD基本概念(上)-RWD網頁與傳統網頁設計


前端工程師必備RWD基本概念(中)網頁設計的優雅降級和漸進增強





上Python課程的你,不能錯過2019春節強檔AI電影!



還不想讓自己的網站公諸於世?SEO優化員的煩惱我們都聽到了!


上完 Java課程,高薪,專業,工程師,三個願望一次滿足
達內教育開幕　培養台灣IT人才進入全球企業


 
 
 
 

標準的RWD網站範例
前端工程師在開發網站十在用的RWD網頁,其實它網頁設計的各種概念,在整理出來後,一點也不難理解!
當代的前端工程師與網頁設計師在開發網站時都選擇 RWD 網站，在規劃其 Media Query 的尺寸斷點時，有兩種布局斷點的依據：「根據設備」以及「以內容為主」，介紹如下：
1.根據時下的主流設備來佈局斷點 (設備優先)
透過時下主流的設備 (如當代最熱門的手機、平板或電腦螢幕等) 來確定布局的斷點，而設計多套樣式，再分別對應到各種設備上，如此就可準確定位斷點。這種套用現成的設備尺寸隨然方便，又能精準對應到時下最普及的設備，但是隨著設備不斷汰舊換新，未來總會有無法合適對應到的設備。
「設備優先」示意圖（圖片來源：http://static.codeceo.com）
2.根據網頁內容作為佈局斷點的標準 (內容優先)
這種方式不是以設備為主；而是依據網頁內容的布局、段落等來下斷點，是真正符合 RWD 響應式網站 設計的初衷的方式。此種方式可讓網頁涵蓋所有設備、且閱讀容易，但是斷點會依據設備的不同而落在不同的地方，這樣就沒有標準、精準的設計模式。
「內容優先」示意圖（圖片來源：http://static.codeceo.com）
儘管如此，現今大多前端工程師與網頁設計師會更偏向「內容優先」的方式。因為電腦、行動裝置等設備不斷推陳出新，若採用此種方式，雖然無法精準對應到特定的設備，但是卻可廣泛涵蓋現在、未來全部的設備。且無論瀏覽媒介如何改變，網頁內容的本身依然會是重點。
在內容優先的策略中，前段工程師與設計師要讓網站盡可能兼容所有設備：因為我們不知道用戶會用什麼樣的設備來訪問網站，因此，我們必須盡可能地把所有狀況都考慮進來；所有的佈局、元件、區塊等都能兼容不同類型的設備和平台。有「優雅降級（Graceful Degradation）」以及「漸進增強（Progressive Enhancement）」兩種思維模式，可以套在「內容優先」為主的 RWD 響應式網站 設計的過程：
 
「優雅降級」還是「漸進增強」?
 
圖上方為「優雅降級（Graceful Degradation）」的網頁設計模式；下方為「漸進增強（Progressive Enhancement）」模式
 
1. 優雅降級（Graceful Degradation）
一開始就針對「功能最完整」的平台來設計、開發網站，完成所有的功能和體驗後，再針對無法支援所有功能的平台或環境本來修改、刪減功能或是其他的解決方案，以確保網站能在最新、最完整的平台上完美呈現，擁有「最好的使用者體驗」；而在較舊的或是功能限制較多的的平台上，仍然可使用最重要的功能，整體介面「簡陋卻可用 (poor but passable)」，而不是無法使用。
2. 漸進增強（Progressive Enhancement）
這個方式與「優雅降級（Graceful Degradation）」的方式相反，是先針對最不完整或是限制最多的平台上創建最重要的基本內容，用最精簡的方式呈現；然後以這些基本內容都存在的狀況下，開始慢慢擴展其佈局，隨著平台的限制越來越少，內容的完整度也越來越高。這也是「行動裝置優先 (Mobile First) 」的設計方式。我們在下一篇會提到什麼是「行動裝置優先 (Mobile First) 」。
 
 
本篇為「前端工程師必懂RWD概念」三部曲第二篇，全系列目錄如下:


(目錄)

1. RWD網頁與傳統網頁設計的差異


2. 網頁設計的「優雅降級」與「漸進增強」


3. 行動設備的設計考量

 
 HERE！延伸閱讀看過來：
關於RWD,前端工程師必備的三點(上)基礎概念
前端工程師必備RWD基本概念(上)-RWD網頁與傳統網頁設計
前端工程師必備RWD基本概念(下)行動設備優先的設計考量


Python課程學習者不可不知Dragonfly計畫停止內幕(上)


Python課程學習者不可不知Dragonfly計畫停止內幕(下)

擁有”大數據課程”勢力 – 飛漲的藥妝商機

NOWnews 今日新



 
 

作為前端工程師,你該不會還不知道RWD網頁和傳統網頁設計的差別吧!!?
在智慧型手機等行動上網的裝置普及之前，早期的前端工程師與網頁設計師在做網站時較輕鬆。因為網站只需適應一種規格，在製作程序上對比今日的 RWD 網站顯得比較單純。製作程序差異如下：
從上圖可以看出，在開發 RWD 網站時，若要符合不同裝置 (就是電腦、手機與平板等) 的網頁需求，就要開發出 4-5 種版面，無論是在設計、或是撰寫程式上都比較費時且難以銜接。因此在流程的前半段，必須要規劃 Media Query 的尺寸斷點再去進行網頁設計、程式撰寫，再根據不同的尺寸斷點進行反覆測試、調整與修正。
(相關文章：Media Query使用方法、Media Query中的視窗與頁面尺寸媒體特性一覽表)。
在著手各種載具版面的設計前，應先根據與客戶討論後的結果，粗略進行各種載具的網頁框架規劃 (Wireframe)。Wireframe 是低保真度的設計原型，是在除去所有視覺設計細節 (如色彩、字型等) 之下，進行頁面架構、功能與內容的規劃，藉此更能集中地檢視整個介面流程和架構，方便與客戶溝通想法。
(相關文章：與前端溝通更順利！從了解整體網站的規劃流程開始)。
網頁框架規劃 (Wireframe) 是運用方塊、文字線條，把每個區塊要呈現的內容表現出來。盡可能地減少設計元素，這樣才能突顯網頁所呈現的介面、動線流程與階層，確認使用者體驗如何。有時為了在視覺上清除區分不同的區域，可以使用灰階色塊作補助。下圖為個人網站的 Wireframe 網頁框架範例。
 
本篇為「前端工程師必懂RWD概念」三部曲第一篇，全系列目錄如下:


(目錄)

1. RWD網頁與傳統網頁設計的差異


2. 內容優先的「優雅降級」與「漸進增強」


3. 行動載具的設計考量

 
相關連結來啦~





前端工程師和網頁設計師必學-你該選擇RWD還是AWD?



前端工程師必備RWD基本概念(中)網頁設計的優雅降級和漸進增強
  前端工程師必備RWD基本概念(下)行動設備優先的設計考量


在家也喝的到冠軍級手沖咖啡?原來是靠Python課程辦到的!
達內教育攜手惠普,打造引領數位化職業教育解決方案
從七個不同的方向來解釋Python和Java的不同之處!!
達內教育開幕　培養台灣IT人才進入全球企業


 

 

面對人工智慧在未來的種種潛力,郭台銘首度打造全台灣第一本人工智慧高中教科書,一起來瞧瞧!

鴻海集團董事長郭台銘，於今年 2 月 1 日在土城鴻海集團總部，進行「與青年對話」上宣布：中國有針對 AI人工智慧出高中生教科書，同時，鴻海也號召台灣學者，共同打造台灣版的AI人工智慧基礎教科書，並為要讓 人工智慧 教育在台灣扎根，先印3萬本免費送學校。
郭台銘表示，現在所有媒體都在談AI人工智慧，鴻海自己也有在做 (人工智慧)。去年郭台銘看了在中國的高一學生針對人工智慧的必修課本，自己研究了一兩天，發現該書用深入淺出的方法以及故事來教育下一代，於是公司在中國買了 2 萬本送給鴻海內部員工研究，同時也決定在鴻海「富士康工業互聯網學院」開班授課。
郭台銘指出：「這對台灣年輕人不公平」。所以本來想將此教科書引進國內，但經過跟專業人士的討論後，發現台灣也有能力設計自己的AI人工智慧的教科書，也幸好有多位教授願意共同研究教材。
而在 4 月 30 日，郭台銘在馬英九文教基金會的專題演講上，他提到5G時代的來臨關鍵在於 AI 與各行各業做跨領域的整合，並在會場發放最新出爐的「人工智慧導論」一書。
郭台銘發行的「人工智慧導論」一書，由台大教授陳信希、郭大維，與美國工業人工智能中心創始人李傑等三位專家主編，其中出版緣起的部分，郭台銘提到：AI人工智慧是現今科技發展的必爭之地，人才培育是當務之急，而為了讓下一代不要輸在起跑點，因此自掏腰包出版「人工智慧導論」，不僅初版三萬本先給老師閱讀，後續也將開課培訓，為台灣高中生的人工智慧教育鋪路，為台灣人工智慧教育扎根。
 

HERE！延伸閱讀看過來：

人工智慧先驅Nils Nilsson逝世,享年86歲

人工智慧真帶來了便利!MIT的這個APP,造就多少人的便利啊!

小學生學AI人工智慧,從小培養興趣,讓小孩的童年以AI為玩伴!

全球最受歡迎的程式語言Python課程,你一定要知道!

學習網路行銷課程讓你到世界各地就業,盡情發揮創意!

SEO優化不只揚善,也要利用robots meta隱惡

NOWnews 今日新聞

▲ 人工智慧先驅-史丹佛大學名譽教授 Nils Nilsson

要成為專業又內行的前端工程師,學習Media Query怎能虎頭蛇尾?現在快來畫下完美的句點!
許多前端工程師在面對網頁設計時，都要處理 RWD網頁。這些 RWD網頁中的圖片如下圖所示，能根據網頁的大小而跟著放大或縮小。這就是所謂的「Fluid Image (流動圖片)」。
 
在RWD網頁中圖片的顯示方式有兩種，一種是傳統的「<img>」標籤，另一種就是直接使用 CSS 的背景圖。在網頁中插入一般的圖片，也就是使用「<img>」標籤的場合時，只需將其 width 或是 height 其中一個尺寸設定為百分比 ( % )，另一個則設為 auto 則可以達到 RWD 的效果，範例如下：
#banner {
max-width: 80%; /*最大寬度設為 80% 而不是 100%，是為了避免圖片糊掉*/
height: auto; /*高度設為 auto 好讓圖片可以等比例縮放*/
}
 
上述為一般圖片的 Fluid Image 設定，接下來說明背景圖的部分。
相信大家已經看過夠多美美的滿版圖片的網頁了吧？這是因為在背景圖的設定上，CSS3 的新屬性「background-size」可以指定背景圖片的大小是否可填滿整個容器。未指定「background-size」屬性的話就是 auto 原圖的大小；如果有指定為 cover 的話，那就可以使背景填滿容器。
快來看看以下背景圖片的 Fluid Image 設定為填滿容器的語法：
#banner {
background-size: cover;
}
 
上過網頁設計課程的前端工程師應該可以一目了然：
下圖為 background-size 是否有指定為 cover 的差異。左上為有指定為 cover 的範例，右下為無指定 cover ，若圖尺寸不夠則無法填滿。

本篇為「前端工程師必備的RWD基礎」系列文章最後一篇，全系列目錄如下:



(目錄)

1. 前端工程師必備的RWD基礎(一)RWD基礎概念


2. 前端工程師必備的RWD基礎(二)流動布局Fluid Grid


3. 前端工程師必備的RWD基礎(三)Media Query基礎之Media Query使用方法


4. 前端工程師必備的RWD基礎(四)Media Query基礎之Media Type媒體類型


5. 前端工程師必備的RWD基礎(五)Media Query基礎之and/not/only判斷條件


6. 前端工程師必備的RWD基礎(六)Media Query基礎之Media Features-上


7. 前端工程師必備的RWD基礎(七)Media Query基礎之Media Features-下


8. 前端工程師必備的RWD基礎-(八)流動圖片Fluid Image

 
 
 相關連結來啦~



關於RWD,前端工程師必備的三點(中)-Media Query



前端工程師之路不停歇~Media Query的CSS插入字條件
前端工程師之路不停歇~Media Query的媒體類型 

   Python 課程+醫療=幸福方程式



UI 課程等語言幫你看你的鄰里長什麼樣子呢


AI也可產出文章了!記者要被人工智慧取代了嗎!?
中國IT教育領導品牌　達內教育集團第一家海外授權中心


  
  
  

 
在這篇有關前端工程師的media query知識裡,整理好了有關於它的媒體類型,讓你不再當無頭蒼蠅!

 
前端工程師們別以為Media Query的媒體特性看完上篇就夠了~加碼知識現在就報你知~~