PIXNET Logo登入

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

跳到主文

歡迎光臨布萊恩的創業小窩在痞客邦的小天地

部落格全站分類:職場甘苦

  • 相簿
  • 部落格
  • 留言
  • 名片
  • 4月 19 週五 201923:00
  • 八個大圖片SEO心法大解析(5)圖片格式&圖片sitemap

八個大圖片SEO心法大解析(5)圖片格式&圖片sitemap

 
這些圖片SEO優化重點進入尾聲了!看看最後兩個必須知道的要點是什麼!


目錄
1. 圖片SEO的重要性
2. 8大圖片SEO心法
  2-1. 使用合適的圖片檔名
  2-2. 優化 alt 文字
  2-3. 能不用圖片就不要用圖片
  2-4. 別只靠 HTML5 的 width 與 height 來設定圖片尺寸
  2-5. 圖片寬度別超過網頁的內容
  2-6. 圖片 Exif 資訊 - 視狀況而刪除
  2-7. 選擇適當格式的圖片檔
  2-8. 創建圖片的 sitemap (進階)



 
7.選擇適當格式的圖片檔
我想不只是前端工程師,一般人都知道,大多數網頁上呈現的圖檔,不外乎就是:jpeg、png、gif這三種。
這三種圖檔都有不同的壓縮方式。而如同前篇所述:越小的尺寸,對網頁載入的速度就越快。而網頁載入的速度對 SEO 品質有關鍵性的影響。
同一張圖片,以何種形式為檔案,才是最小的呢? 我們拿一張圖片分別存成 GIF、JPEG (JPG) 與 PNG 檔來試試:
由以上結果可知,jpg 檔的尺寸是相對較小的。那網頁圖片選擇 jpg 檔是最好的囉?慢著!這可未必呢!
 
一般來說,若圖片的類型是照片,通常存成 jpeg(jpg) 檔是最合適的、線條圖畫與文字則是 PNG 檔、動畫則是 GIF 檔。
GIF、JPEG (JPG) 與 PNG...我到底該存成哪種檔案?下面說明給你聽:
GIF 格式雖然算是一種無失真的圖像壓縮標準 (無失真不等於高清解析度),但是顯示的顏色被限制成只有 256 種,因此適用於不需太高解析度的動態圖。
JPEG (JPG) 格式是具有破壞性的圖片壓縮格式,所以可壓縮的尺寸相對也較小。適用於照片。
PNG 格式也是一種無失真的圖像壓縮標準 (無失真不等於高清解析度),且顯示的顏色也不像 GIF 般被限制,因此 PNG 檔案尺寸比前兩者大。PNG 格式適用於圖片中的線條與文字必須要很清楚地顯現的場合、或是小尺寸的 LOGO、ICON 等。去過背的 PNG 圖可在網頁上以去背的方式呈現,不會遮住後面。因此常被用於 LOGO 圖、ICON 等。
若你想轉換圖片的格式,但是電腦沒有安裝 Photoshop 等影像處理軟體,可以試試線上的免費圖檔轉換工具。
 
8.創建圖片的 sitemap (進階)
相信許多創建網站 sitemap 對許多 SEO 優化師和前端工程師來說是非常基本的,而且現在已經有許多線上工具可以自動幫你生成網站的 sitemap,但是至於圖片的 sitemap 來說,這些工具多只有生成最基本的 <image:image> 與 <image:loc> 標籤。 而根據 Google 官方對於圖片 sitemap 的說明如下:
圖片 Sitemap 資訊有助於 Google 發掘原本可能找不到的圖片 (例如您的網站使用 JavaScript 程式碼連結圖片),並可讓您為 Google 指出要對網站上的哪些圖片進行檢索及建立索引。您可以使用另一個 Sitemap 來列舉圖片,也可以將圖片資訊加入現有的 Sitemap。以下範例說明的是 「http://example.com/sample.html」這個網頁的 Sitemap 項目,該網頁包含兩張圖片。

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
<url>
<loc>http://example.com/sample.html</loc>
<image:image>
<image:loc>http://example.com/image.jpg</image:loc>
</image:image>
<image:image>
<image:loc>http://example.com/photo.jpg</image:loc>
</image:image>
</url>
</urlset>

使用上述範例中的語法架構時,每個網頁最多可以列出 1,000 張圖片!
此外,根據 Google 官方說法,適用於圖片的標記如下所示:


標記
是否必要
說明


<image:image>
是
包含單一圖片的所有資訊。每個 <url> 標記最多可包含 1,000 個 <image:image> 標記。


<image:loc>
是
圖片的網址。

在某些情況下,圖片網址和您的主網站可能不會位於相同的網域中。
Search Console 會同時驗證圖片和網站所在的網域,所以您無需擔心。
舉例來說,如果您使用內容傳遞網路 (例如 Google 協作平台) 代管圖片,請確認代管網站已經過 Search Console 驗證。
此外,請確認 robots.txt 檔案允許 Google 檢索您要建立索引的任何內容。





<image:caption>
選用
圖片的說明文字。


<image:geo_location>
選用
圖片所顯示的地理位置。例如:<image:geo_location>Limerick, Ireland</image:geo_location>。


<image:title>
選用
圖片的標題。


<image:license>
選用
圖片授權的網址。


 
 
 
  延伸閱讀:



八個大圖片SEO心法大解析(2)圖片真的很重要嗎?




八個大圖片SEO心法大解析(3)只要靠HTML設定尺寸就好了?

八個大圖片SEO心法大解析(4)圖片寬度和Exif資訊超重要



 


你想躺著賺嗎?學了網路行銷課程就有可能!



不囉嗦HTML5教學(中)利用表格標籤優化你的網頁!



想知道哪種程式語言最好最受歡迎嗎?達內教育都幫你準備好了!

NOWnews 今日新聞


 
 
 
 
 
 
 
(繼續閱讀...)
文章標籤

布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣(39)

  • 個人分類:網路行銷課程.SEO優化
▲top
  • 4月 18 週四 201921:23
  • 八個大圖片SEO心法大解析(4)圖片寬度和Exif資訊超重要

八個大圖片SEO心法大解析(4)圖片寬度和Exif資訊超重要

想把圖片SEO學得穩紮穩打,今天這篇的重點也不能錯過呀!


目錄
1. 圖片SEO的重要性
2. 8大圖片SEO心法
  2-1. 使用合適的圖片檔名
  2-2. 優化 alt 文字
  2-3. 能不用圖片就不要用圖片
  2-4. 別只靠 HTML5 的 width 與 height 來設定圖片尺寸
  2-5. 圖片寬度別超過網頁的內容
  2-6. 圖片 Exif 資訊 - 視狀況而刪除
  2-7. 選擇適當格式的圖片檔
  2-8. 創建圖片的 sitemap (進階)



 
5.圖片寬度別超過網頁的內容
圖片的寬度應該要和網頁內容的寬度一致。如以下的部落格在 27 吋螢幕上的顯現,看看左右兩邊是否有許多留白?
紅色框起來的部分為左右的留白。那是因為這個部落格為了要與行動裝置相容,他們 RWD 的做法限制內容的寬度最大為 720px。其實現在很多 RWD 網站也是使用類似的法 - 限制內容的寬度。 因此你上傳的圖片,寬度不要大過 720px。雖然你可以透過 CSS 設定,將寬度過大的圖片自動縮小來顯示。但是這樣做的話,網頁圖片的尺寸還是沒有變,而且過大的圖片會拖累網頁載入的速度。對 SEO 來說,網頁載入的時間絕對是分秒必爭的,所以還是不要偷懶,只要花一分鐘,將圖片拉到 Smart Resize 工具,就能將圖片的寬度縮小(注意:高度也要同步以等比例的方式來縮小唷!);另外,別忘記上篇提過的,雖然HTML5很好用,但設定圖片的尺寸時可別單單只靠HTML5呀!
 
6.圖片 Exif 資訊 - 視狀況而刪除
圖片檔案內除了有與圖片相關的資訊外,還可能有許多對 SEO 沒有用處的資訊 (如 Exif、Exchangeable image file format) 等。這些資訊不但會增加圖片檔案的大小,對搜尋引擎判斷圖片資訊沒有幫助,因此要適度地來去除這些額外資料。Google 官方推薦的圖片尺寸最佳化工具Imageoptim 的預設為:在你壓縮圖片的同時,也刪減了 Exif 資訊。
但若你的圖片用途是作為 Local SEO 的話,也許就要保留 Exif 的資訊了。雖然 Google 官方到目前為止並未表明他們的搜尋引擎會抓取 Exif 中的 GPS 經緯度座標,來影響地區性的 Google 搜尋引擎排名,但是大多數的 SEO 專家都認為 Exif 中的地點資訊對於該地區的搜尋引擎排名有一定的影響。
 
 
   延伸閱讀:



八個大圖片SEO心法大解析(2)圖片真的很重要嗎?

八個大圖片SEO心法大解析(3)只要靠HTML設定尺寸就好了?


八個大圖片SEO心法大解析(5)圖片格式&圖片sitemap



 


 




  全球十大AI人工智慧領航人物你一定不能不知道!! 蘋果微軟搶下一二,百度第三緊追在後~



來上 Java課程,大確幸自己給自己




網路行銷菜鳥的日記Day1-HTML5教學,第一次寫不用錢!?



人人都能是工程師!台灣 IT 培訓中心推「找到工作再付學費」專案,要試試嗎?

  
  
 
 
(繼續閱讀...)
文章標籤

布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣(10)

  • 個人分類:網路行銷課程.SEO優化
▲top
  • 4月 17 週三 201923:47
  • 八個大圖片SEO心法大解析(3)只要靠HTML設定尺寸就好了?


做圖片的SEO優化時,圖片太大怎麼辦?光靠HTML縮小它可是不夠的喔!
 


目錄
1. 圖片SEO的重要性
2. 8大圖片SEO心法
  2-1. 使用合適的圖片檔名
  2-2. 優化 alt 文字
  2-3. 能不用圖片就不要用圖片
  2-4. 別只靠 HTML5 的 width 與 height 來設定圖片尺寸
  2-5. 圖片寬度別超過網頁的內容
  2-6. 圖片 Exif 資訊 - 視狀況而刪除
  2-7. 選擇適當格式的圖片檔
  2-8. 創建圖片的 sitemap (進階)



 
4.請確實壓縮圖檔的大小 - 別只靠 HTML5 的 width 與 height 來設定尺寸
許多網頁會把同一圖檔用在多個大小不一的網頁上,再使用 HTML 的 width 與 height 來調整它們在網頁上出現的樣子。但是原圖若尺寸過大的話,傳輸一樣會很慢,因為 width 與 height 只能改變使用者 「看到」 的圖片大小,真正傳輸的圖片尺寸其實蝦是一樣的。
圖片尺寸越大,網路載入速度越慢。HTML5 的 width 與 height 指令只是讓它在網頁上 「偽裝成」 其尺寸所設定的樣式。
所以圖片的尺寸需要 「最佳化」 - 這裡的 「最佳化」 意思不是指圖檔調整至最大,而是指在不降低圖片解析度的狀況下,給予圖片最合適的大小。
看看下面兩張圖的解析度,是否都差不多清晰? 但是左圖的尺寸竟是右圖的 3.78 倍!


original
tiny png converted


Original PNG: 75,628 bytes
pngquant: 19,996 bytes (73% smaller)


針對圖片尺寸的最佳化,以及網頁的關係,GOOGLE 也曾經寫了這份官方說明。其中一句話是:「為了最佳的效果,請把圖片調成各樣的品質來測試。別害怕調低圖片的品質 - 通常這樣,圖片在視覺上效果仍然很好,但是卻大大節省了檔案的儲存空間。」
Google 也提供了三個能將圖檔尺寸最佳化的開放工具:Guetzli、MozJPEG以及pngquant。Google 提供的使用說明在這裡。若你這些工具都用不習慣的話,那就用 ImageOptim 吧!Windows 及 Linux 使用者請到這裡下載。使用方法一點都不難,只要丟入你的圖片即可最佳化尺寸!
至於做SEO優化時,要選哪一個工具最好呢?SEO 工具 Ahrefs 的部落格針對上述所提的大圖片最佳化的工具之外,也測試了其他的工具。
他們將 15 張圖片丟入 7 個不同的工具做測試,全部都選擇預設的模式。
結果如下(百分比的指數,為 15 張圖片壓縮百分比的平均值):
  Imageoptim: 69% (JPEG). 40% (PNG)
  Shortpixel: 42% (JPEG). 59% (PNG)
  Kraken.io: 13% (JPEG). 63% (PNG).
  TinyPNG: 27% (JPEG). 65% (PNG).
  Optimizilla: 27% (JPEG). 60% (PNG)
  Imagify.io: 6% (JPEG). 1% (PNG)
  Compressor.io: 42% (JPEG). 58% (PNG)

參考以上的結果,Google 官方推薦的圖片尺寸最佳化工具Imageoptim:在 .jpg 檔上表現得較佳;而在 .jpg 與 .png 檔上表現得較平均的為 Shortpixel。
 
 延伸閱讀:





八個大圖片SEO心法大解析(2)圖片真的很重要嗎?






八個大圖片SEO心法大解析(4)圖片寬度和Exif資訊超重要


八個大圖片SEO心法大解析(5)圖片格式&圖片sitemap





 




  Python課程讓你免煩惱AI智慧的8億職缺危機 還能輕鬆領高薪


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



醫療產業+UI課程=高薪專業人士,人生雙贏不GG



達內教育開幕 培養台灣IT人才進入全球企業

  
  
(繼續閱讀...)
文章標籤

布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣(14)

  • 個人分類:網路行銷課程.SEO優化
▲top
  • 4月 16 週二 201919:17
  • 八個大圖片SEO心法大解析(2)圖片真的很重要嗎?

八個大圖片SEO心法大解析(2)圖片真的很重要嗎?

 
繼上篇的SEO優化重點,今天繼續告訴你關於"圖片"這檔事!
 


目錄
1. 圖片SEO的重要性
2. 8大圖片SEO心法
  2-1. 使用合適的圖片檔名
  2-2. 優化 alt 文字
  2-3. 能不用圖片就不要用圖片
  2-4. 別只靠 HTML5 的 width 與 height 來設定圖片尺寸
  2-5. 圖片寬度別超過網頁的內容
  2-6. 圖片 Exif 資訊 - 視狀況而刪除
  2-7. 選擇適當格式的圖片檔
  2-8. 創建圖片的 sitemap (進階)



 
3.能不用圖片就不要用圖片
台灣電商網站最犯的錯誤之一,就是將所有的文字訊息通通都丟到圖片內,直接以一張大圖的方式呈現。也許店商主還會滿意地的認為這樣很漂亮,但事實上,這樣的做法對於訪客的體驗恐怕印象扣分,還會不利於 SEO!
消費者逛你的電商網站時,不外乎就是要快速看到產品照片、規格、價格等資訊。而一張大圖的呈現方式,只會讓使用者一直滑手機、拼命滑到底,到最後依然還找不到相關資訊時,就會增加他們不消費就離開你網站的機率。
因為對搜尋引擎的 「爬蟲」 來說,圖片是完全沒有內容的:無論你那張圖裡有多少文字、圖多漂亮,在原始碼中永遠都是 HTML5 的一小行程式碼罷了!所以盡可能的將圖片 「文字化」...讓我們說得更明白些,對搜尋引擎來說,「文字」 才是內容、才是對 SEO 有利的關鍵所在!因為搜尋引擎是讀取HTML5的原始碼的!
而圖片要如何 「文字化」 呢? 例如圖表的部分,就使用HTML+CSS來畫 、陰影可使用 CSS3 的效果達成等,就不要使用圖片檔案。
以下例的表格來說,若一張表格以表格的方式呈現,搜尋引擎讀到的資訊如左側原始碼:
See the Pen table by Tedutw (@Tedutw) on CodePen.
但是若同一張表格以圖片的方式呈現,搜尋引擎讀到的資訊如同左側原始碼,只有一行字:
See the Pen table by Tedutw (@Tedutw) on CodePen.
由以上範例可知,表格使用 HTML 製成的方式正好可以把相關訊息都寫在原始碼內,也有機會被搜尋引擎抓取關鍵字。若使用圖片檔表示,相關訊息就無法呈現在原始碼內。就算是優化圖片的名稱與 alt 文字,被搜尋引擎抓取的關鍵字仍很有限。
 
    延伸閱讀:





八個大圖片SEO心法大解析(1)如何命名圖檔&認識alt文字




八個大圖片SEO心法大解析(3)只要靠HTML設定尺寸就好了?

八個大圖片SEO心法大解析(4)圖片寬度和Exif資訊超重要


先別管韓國魚了,你有聽說過Python嗎?



在苦惱履歷上技能要填什麼嗎? Java,UI課程等等證照幫你解決這個問題!!



AI人工智慧撰寫科技恐被濫用,將因此有大量假新聞出現?!

達內課程先就業再付款- 中時電子報


 
(繼續閱讀...)
文章標籤

布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣(27)

  • 個人分類:網路行銷課程.SEO優化
▲top
  • 4月 15 週一 201918:18
  • 八個大圖片SEO心法大解析(1)如何命名圖檔&認識alt文字



八個大圖片SEO心法大解析(1)如何命名圖檔&認識alt文字


今天帶給你整整八個圖片SEO優化心法!濃縮成短短五篇讓你當成小筆記!


 








目錄
1. 圖片SEO的重要性
2. 8大圖片SEO心法
  2-1. 使用合適的圖片檔名
  2-2. 優化 alt 文字
  2-3. 能不用圖片就不要用圖片
  2-4. 別只靠 HTML5 的 width 與 height 來設定圖片尺寸
  2-5. 圖片寬度別超過網頁的內容
  2-6. 圖片 Exif 資訊 - 視狀況而刪除
  2-7. 選擇適當格式的圖片檔
  2-8. 創建圖片的 sitemap (進階)

 


圖片SEO的重要性


今天我們看到的 Google 商標只有 305 Bytes,經過壓縮後可以縮小為 195 Bytes。不過在 2015 年之前,舊的 Google 的 Logo 卻有 6KB (6,380 bytes)、經過壓縮後大小仍為 2 KB (2,145 bytes)。


曾經,Google 針對我們看到的新 Logo 發表了以下談話:「舊的標誌由於檔案太大,讓我們必須在頻寬較低的網路上 (就是網路連線速度會比較慢),變成文字模式的標誌。而新的標誌檔案大小降低,讓我們可以不再作任何的修正,而使用一致的標誌,讓全世界可以更容易地存取我們的資源」。


這就是我們 「Google 大神」 給大家的圖片 SEO 課程。反觀國內部分網頁設計者,希望網頁看起來漂亮,而使用高解析度的圖片大檔。但是部分使用者因礙於網路連線速度慢等因素,而無法看這樣高解析度的圖片。而近年來行動設備的使用者已成主流用戶,有些用戶使用有限的資費方案,若圖片檔案過大也會吃掉過多頻寬。因此要好好優化圖片檔案,可減少連線較慢的使用者的時間、也減少有限資費方案的使用者的頻寬、但又不失圖片的顯示尺寸。


 


8 大圖片 SEO 心法


以下列舉八項基本的圖片 SEO 方法,包含圖片大小的優化。


 


1.使用合適的圖片檔名


搜尋引擎只會認字,然而,圖檔並不是文字,因此它能被搜尋引擎拿來當成線索的資訊非常有限。但另一方面,圖片的檔名是文字,對搜尋引擎來說,它可以給予搜尋引擎關於圖片內容的資訊。


而當你需要上傳許多圖片時,直接用相機預設的檔名 (如 IMG00050.jpg、IMG00051.jpg 等等) 對 SEO 是沒有幫助的。 你可以將圖片的檔名改成與圖片內容符合的簡短敘述。如一件印著 「Stratovarius」 樂團的 T 恤圖片,你就可以命名為:a-Stratovaiurs-shirt.jpg 就比 IMG00050.jpg 更利於 SEO。


也許你會反駁說:「Google 的人工智慧技術一直都在進步。現在 Google 藉由機器學習所便是的圖片已經多到能主動讀取圖片的訊息...你隨便輸入一張圖片給 Google Cloud Vision API(雲視覺API),裡面的 AI 就能讀取分析圖片的資料了。 如下圖所示,我給 Google 一張圖片,它就馬上讀出圖片裡面有 「貓」 的資訊。【參見:動手玩玩 GOOGLE 人工智慧影像辨識雲平台:Google Cloud Vision API】


Google的圖片AI辨認這張圖為貓咪圖.png


沒錯,對於部分難以辨識的圖片,Google 的 AI 還是會誤判的喔!如下圖 ,Google 解讀成圖片中的物體是 「cheese (乳酪)」 ,但事實上,這是一塊奶油...因為它們實在長得太像了!


Google的圖片AI把奶油誤判成起司.png


所以要讓搜尋引擎正確的解讀你網頁上的圖片的方式,就直接給它一個正確而精準的名字吧!但是!絕對不要使用 「關鍵字堆砌」 的方式來命名,因為這樣會被 Google 判定為黑帽作弊網站,並被打入冷宮。【參見:SEO-white-n-black-hat-difference.html" target="_blank">白帽SEO、黑帽SEO,到底差在哪?】」


針對上述貓的貓咪圖片,下面有對於好的與錯誤的命名的範例:
好的命名範例: cat.jpg
錯誤的命名範例 (使用關鍵字堆砌的方式): cat-mammal-kitten-pussy-kitty


當然,單靠圖片檔名取的好,不一定就等於能排在 Google 搜尋結果前三名。但是,可以藉著圖片檔名增加與該網頁相關的線索!更何況,幫圖片重新命名並不會花你太多時間 - 所以這樣做還是值得的啦!


 


2.優化 alt 文字


比圖片檔名更可以給予搜尋引擎關於圖片內容的線索的,就是圖片的 alt 文字。


而當網頁無法載入圖片時,使用者就會無法在網頁上看到圖片,但是會看到 alt 文字。因此對於無法看到圖片的使用者,也能透過 alt 文字理解圖片的資訊。


alt 文字在撰寫上,應以簡短的文字寫出圖片的重要特徵,再加入關鍵字。 當然,也不能以胡亂填充關鍵字的方式來撰寫之,以免被 Google 判定為 SEO 作弊而被打入冷宮。


alt 的命名相較於圖片檔名,可以用更精確、更長的文字來敘述。如上例的貓咪圖片,圖片名稱命名為 「cat(貓)」、而 alt 命名為 「calico cat with heart-shaped fur pattern (一隻毛色有愛心圖樣的三花貓)」 ,HTML5 原始碼則如下例所示:


<img src="cat.jpg" alt="calico cat with heart-shaped fur pattern">

如果你的圖片是關於你賣的產品,就可在 alt 文字中放入品名、型號等重要資訊。這樣的話,若有使用者以品名或型號來搜尋,你的圖片就比較有機會在圖片搜尋的結果中出現,而提高曝光率。如果照片是關於產品的細節、不同角度等,也都可以補充在 alt 文字中作補充說明。


如今天你經營車用電池的專賣網站。 這時你正要上架一顆充電器,品牌為 「Battery Tender」 、型號為 「022-0186G-DL-WH」。 這時你的圖片名稱可命名為 「Battery-tender.jpg」、而 alt 命名就可以加入型號等資訊,為 「Battery Tender (022-0186G-DL-WH)」。因為有時 Google 可以憑藉著型號等資訊而判定圖片為何物。另外,你還可以加入其他更精確的訊息:如產品用途、伏特數等敘述,像是 「Battery Tender (022-0186G-DL-WH) 12V 5 Amp Battery Charger」 。HTML5 原始碼如下例所示:


<img src="Battery Tender.jpg" alt="Battery Tender (022-0186G-DL-WH) 12V 5 Amp Battery Charger">

 


 延伸閱讀:





八個大圖片SEO心法大解析(2)圖片真的很重要嗎?








八個大圖片SEO心法大解析(3)只要靠HTML設定尺寸就好了?


八個大圖片SEO心法大解析(4)圖片寬度和Exif資訊超重要











  投資自己學習Python課程 領先全球八億人口





一個靈活運用網路行銷課程的app等著你





在上Python課程前,你確定你夠了解它嗎!?


NOWnews 今日新聞


  


  


 


(繼續閱讀...)
文章標籤

布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣(65)

  • 個人分類:網路行銷課程.SEO優化
▲top
  • 4月 12 週五 201916:00
  • 想當Python工程師,這個症候群可要小心了!?

想當Python工程師,這個症候群可要小心了!?

 
 
原來不只Python工程師,各行各業都有機會遇到的"冒名頂替症候群",今天充分了解也知道如何避免了!
 
聽說工程師很容易患「冒名頂替症候群」?連愛因斯坦生前都可能罹患此病!? 到底什麼是「冒名頂替症候群」?
 
先認識「冒名頂替症候群」
根據中文版維基百科,對於「冒名頂替症候群」的解釋如下:
冒名頂替症候群(英語:Impostor syndrome),亦稱為冒名頂替現象(英語:impostor phenomenon)、騙子症候群(英語:fraud syndrome)。這個名稱是在1978年由臨床心理學家克蘭斯博士(英語:Pauline R. Clance)與因墨斯(英語:Suzanne A. Imes)所提出,用以指稱出現在成功人士身上的一種現象。
患有冒名頂替症候群的人無法將自己的成功歸因於自己的能力,並總是擔心有朝一日會被他人識破自己其實是騙子這件事。他們堅信自己的成功並非源於自己的努力或能力,而是憑藉著運氣、良好的時機,或是因為別人誤以為他們能力很強、很聰明,才導致他們的成功。即使現實環境中已有證據指明,這些人確實具備優秀才能,但他們依舊認為自己只是騙子,且不值得獲得成功。
另外,維基百科也列出了一些罹患此症狀的名人:包含曾任 GOOGLE 副總裁、現任 Facebook 的首席運營官雪柔·桑德伯格、演員艾瑪華森、美國聯邦最高法院大法官索尼婭·索托瑪約、還提到愛因斯坦在臨終前有可能也遭遇此症狀。
 
美研究:58% 的矽谷高科技人才都有「冒名頂替症候群」
這個「症狀」各行各業都有,美國一個社群媒體「Blind」,2018 年就曾做過一個針對Amazon、Facebook、微軟、Google、Cisco 等頂尖科技公司科技菁英的調查,結果竟發現:平均高達 58% 的專業 IT 人才,私下認為自己其實是個「假貨」。如下圖所示:
而根據知名IT部落客「半路出家軟體工程師在矽谷」的文章指出:軟體工程師,可能更是一個格外讓人容易患有「冒名頂替症候群」的職業。他也在文章中明白指出:「非本科系」出身的他,也經常有覺得自己不如人的 OS:「別人從小學習,或是大學四年的主修,他們學了那麼多知識、實習工作了那麼多厲害的專案,我該如何追上他們呢?」
 
程式語言推陳出新速度快 各式軟體工程師競爭激烈
其實不管是Python或java工程師,只要是軟體工程師,通常都是要經常需要在短時間內「砍掉重練」的職業。因為今日科技發展太過快速,新的程式語言一直不斷被開發出來。從第一代的機器語言、第二代的組合語言、1950 年代 Fortran、ALGOL、COBOL 等開啟第三代程式語言的時代 (今日常用的 C、 C++、C#、Java、JavaScript 等都算是第三代程式語言),到現今第四代的 Python、Ruby 等,都需要軟體工程師不斷地學習,隨時適應新的程式語言、框架、及工具,才不會被時代淘汰。未來,可能還要跟 AI (根據維基百科所述,下一代的「第五代程式語言」可在沒有工程師的狀況下由 AI 自行解決特定問題) 打一場職場生存戰呢!
 
科技產業天才菁英如雲 常讓從業者有「不如人」錯覺
通常容得下軟體工程師這種職位的產業,都有一定的水準,也就是說這個產業幾乎充斥者「工程師中的工程師」、「菁英中的菁英」。尤其是在矽谷這個地方,有些天才從小就開始寫程式,到高中學時就已經累積了幾萬個小時的練習,知識和技能都熟的跟吃飯一樣,甚至還可以製造出劃時代的產品、創業賺大錢,在你現在的年紀,他們早已退休開始享受人生了。如這位「 7 歲教人寫程式、14 歲成為 IBM 的 AI 人工智慧專家--全球最年輕的 AI 工程師」。因為如此,他們經常會讓軟體工程師有「不如人」的錯覺。
 
對付「冒名頂替症候群」 心理學教授:成長型思維是藥方
而這位部落客「半路出家軟體工程師在矽谷」也提到自己每天在職場上被史丹佛、柏克萊、MIT、卡內基美隆等名校電腦科學系所的畢業生圍繞,也會有像是「冒名頂替症候群」的想法,如:「我當初面試的時候,是不是剛好運氣好才被雇用的?」、「如果他們發現我不夠資格的話,我是不是就要立刻被開除了?」
若身為工程師的你,也有「冒名頂替症候群」的話,不妨參考暢銷書《心態致勝(Mindset: The New Psychology of Success)》一書的作者、也是史丹福大學心理學教授卡蘿.杜維克(Carol Dweck)在 TED 的演講:《相信你還可以更好的力量》(The power of believing that you can improve)。這種「成長型思維(Growth mindset)」正好是「患有」這個「症候群」的人的解方:







暢銷書《心態致勝》作者在 TED 上發表的「成長型思維」是「冒名頂替症候群」患者的解方


杜維克長年對不同群體的實證研究後,得出了一個結論:無論任何人,只要具備成長型思維,打從心裡相信「能力都是可以改進的」,並且付諸行動,就可以一步步接近目標。
其實只要紮實努力過,就算最終結果不合預期,但是在這努力過程中所得到的技能、眼光,以及歷練,對自己來說都是得到。所以選擇接受挑戰,必定是正確的選擇,不是嗎?
 
 
 延伸閱讀:
前端工程師都會的CSS背景五學問,再不學要待何時(1)固定背景
前端工程師都會的CSS背景五學問,再不學要待何時(2)背景位置
前端工程師都會的CSS背景五學問,再不學要待何時(3)重複背景

來自python課程的AI戰鬥女天使

想到海外工作嗎?選擇達內教育讓你與國際接軌!

最好剁手的屈臣氏利用大數據課程提升業績,你還在等什麼呢?
中國IT教育領導品牌 達內教育集團第一家海外授權中心
 
 
(繼續閱讀...)
文章標籤

布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣(45)

  • 個人分類:各式程式語言讓你挑!
▲top
  • 4月 11 週四 201923:00
  • 要先學Python或java?快來參考這篇整理超詳細的文章!

要先學Python或java?快來參考這篇整理超詳細的文章!

關於要先學Python還是java,看完這篇文章,讓我這門外漢用最快速度決定好啦!
Python 和 Java 是兩種現今熱門、卻又不同的程式語言。對現在的科技業來說,兩者都是十分有用工具,且瀏覽各大求職網站,Java 工程師近十年來一直是科技業赤手可熱的職缺。而新興的 Python 語言,職場上對於會 Python 語言的工程師的需求也越來越高。如果現在你想轉職工程師,卻又不確定要學哪種程式語言的話,歡迎參考本篇文章,相信能給你一些方向!
 
1、動態類型 vs. 靜態類型
Java 和 Python 最大的差別之一,就是兩種語言處理變數的方式。
Java 強迫你在第一次聲明變數時,就必須要定義它的類型,且不可再修改,這就是「靜態類型」。
相反的, Python 不需要在一開始就聲明變數的類型,且後續可以改變一個變數的類型,例如可以把整數變數替換為字符串(string)。
2、Python 中一切皆為物件
在 Python中,無論是數值(整數、浮點型)、字符串、字典、元組對象、還是他們所對應的類型,以及函數、模塊等,都是物件,他們的祖先是PyObject。而 Java 中的函數,基本數據類型等都不算物件。
3、括號和縮排
Python 與眾多程式語言的不同之處,在於它使用縮排區分程式區塊(block)。而 Java 與其他大部分的程式語言都是使用大括號定義函數和類定義的開頭和結尾。使用縮排的好處在於程是碼會比較易讀,且不會有缺括號導致錯誤的可能。
4、軟體可移植性
Java 的可移植性 (可攜性) 更強,可以用於開發平台獨立的應用。這是 Java 相較於 Python 的優勢之一,任何可以運用 Java 虛擬機器 (JVM) 的電腦或者行動裝置都可執行 Java 的應用。相較於 Java,執行 Python 的程式就比較麻煩,都需要一個編譯器來將 Python 代碼轉化為你的作業系統可理解的代碼。因為大部分的設備有安裝了 Java 虛擬機器 (JVM) ,所以 Java 工程師可以自信的說他們的開發出來的 Java 應用,幾乎對所有的用戶都可用。
5、Python 的 GIL
Python 的 GIL (全局解釋器鎖) 一直被不少開發者所詬病。Python 的多執行緒在多 CPU 條件下,並不能一併運行,而必須要在每個執行緒運行時,先需要獲得解釋器的訪問權限,才可以運行。在一個執行緒運行時,其他的執行緒只能處於等待的過程。不過這方面的問題可使用多工處理機制來彌補。而 Java 支援真正的多執行緒,控制資源的的共享很到位。
6、應用領域
Java 主要用於商業邏輯強的領域,如電子商城系統、金融、保險等傳統資料庫事務領域,通過類似 ssh 框架事務代碼,對商業資料庫,如 Oracle、DB2、SQL 伺服器等支援較到位。Python 主要用於大數據分析、金融分析、信息分析、圖像演算法、數學計算、統計分析、算法建模、伺服器運算、自動化操作、開發速度快,適合需要快速靈活開發的產業。
哪一個更好上手?
一開始也許是 Python 較好上手。因為 Python 的語法設計很直覺,讓新手們可以快速上手、寫各種應用程式。但是入門簡單,並不代表會一直簡單下去。要學會巧妙運用 Python,還需要學習各種 Python 的函式庫。Python 的強大在於函式庫,因為 Python 的函式庫可以用 Python、C 語言、C++等程式語言設計,再提供給 Python 使用,所以無論是 GPU 運行、神經網絡、智能算法、數據分析、圖像處理、科學計算等,各式各樣的函式庫都在等著你來學習。而 Java 就沒有那麼多函式庫,無論是入門還是進階,學習的難易度相較於 Python 都較平均。
 
 延伸閱讀:


物聯網時代來臨你跟上了嗎?Python課程讓你晉升IT專業人才



有著共榮共生關係的AI和Python課程,你還霧煞煞?(上)

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

 什麼!?人工智慧竟淪為假新聞寫手?


用上大數據!美妝產業用科技行銷術接軌新客群



前端工程師必學:Div應用篇(上)

人人都能是工程師!台灣 IT 培訓中心推「找到工作再付學費」專案,要試試嗎?


  
(繼續閱讀...)
文章標籤

布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣(337)

  • 個人分類:各式程式語言讓你挑!
▲top
  • 4月 10 週三 201921:19
  • 從達內教育評價事件來看Geego(奇科?)IT培訓評論的謬誤




華人最大電腦補習機構達內教育在美國NASDAQ上市



圖說:華人最大電腦補習機構達內教育在美國那斯達克 Nasdaq 上市




小弟我最近陪著剛從同名補習班上完 Java 課的朋友喝咖啡,非本科系的朋友跟我炫耀說:他現在也會寫程式。目前還有兩間科技公司「聖X」跟「德X」要應徵他為工程師,目前還在等朋友的回應......真是跩啊~小弟不禁好奇問問朋友達內教育評價如何?為何還可以讓一個門外漢也來跟我們一樣都成為「科技碗糕」了?
小弟為了查詢達內教育評價,也成為達內「IT沃客」FB 的粉絲了。每天看著他們在我的 FB 投遞廣告,似乎也在暗示著我需要進修電腦課程,單單靠著「就醬」速成班短期訓練出來的成果,還是無法跟企業需求接軌......光靠證照考試通過不代表你可以出頭天。不過在搜尋「達內教育評價」的過程中,也觀察到補教業者攻擊同業的招數...
 


已改名成富捷IT培訓的Geego奇科IT培訓還要靠在部落格上抹黑同行來苦撐業績


已改名成「富捷IT培訓」的「Geego奇科IT培訓」在自家的部落格上惡意抹黑同行,圖片左上方為Geego 富捷IT 培訓 (原:奇科培訓) 的標誌。
圖片來源 / 翻攝自Geego 富捷IT 培訓 (原:奇科培訓) 部落格


過程是這樣,我有一個外文系出身的姪子,他想要跟我朋友一樣,轉跑道學習JAVA。我就幫他使用 Google 搜尋「達內教育評價」,結果第一個就是「美好的外表,隱藏的秘密 - 剖析達內的秘辛」,從網址看到 geego.com 等字眼,等等!那不就是 Geego (奇科培訓) 的部落格嗎?這誰啊,不就是日前改名為「富捷IT」的電腦補習班嗎?看來寫這篇文章的人很有事,達內教育評價被陰了,還能被操作到 Google 第一頁!等等我也用局外人的身分,撰寫「剖析富捷的秘辛」,看看是否也能到第一頁(誤),哈哈!
就在這個時候,我看到「奇科Geego」的編輯(自稱是月薪 5W 的小小系統工程師)寫道:「我找不到『達內』這間補習班在台灣有任何立案的資料......原來當時風光登台的『達內教育』只是一間名為『上台科技股份有限公司』代理的...(原來是加盟店呀)」
於是,我問了在上台工作的朋友,發現真相如下: 「上台科技電腦技藝短期補習班」為美國那斯達克上市的「達內時代科技集團有限公司 (美股交易代碼:TEDU),簡稱達內集團」的總代理商,所有的服務、管理與課程皆受到達內集團總公司監督,並針對台灣的產業作調整。絕非「富捷IT培訓」部落格文章中所說的「加盟店」
 


已改名成富捷IT培訓的Geego奇科IT培訓惡意攻擊同業的撰文者,自稱為「月薪 5W 的小小系統工程師」


已改名成「富捷IT培訓」的「Geego奇科IT培訓」在自家的部落格上惡意抹黑同行,


(繼續閱讀...)
文章標籤

布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣(16)

  • 個人分類:達內教育評價,不會讓你失望
▲top
  • 4月 03 週三 201920:00
  • CSS的多重名稱真的有差嗎?前端工程師:可差多了!

CSS的多重名稱真的有差嗎?前端工程師:可差多了!

 
前端工程師都要會的CSS多重名稱,一些些小細節讓你抓狂嗎?放心,今天讓你一次搞定!
有時在 HTML 中,前端工程師們會對同一個標籤給予兩個以上的 Class 名稱,如以下所示:
<div class="first second"></div>
對於這類有兩個以上的 Class 名稱的 HTML,其 CSS 選擇器可能會用以下的三種情況顯示。而聰明的你,分辨得出這些 CSS 有什麼不同嗎?
/*1. 兩個 class 中有空格*/
.first .second
/*2. 兩個 class 中沒有空格*/
.first.second
/*3. 兩個 class 中出現逗號*/
.first,.second
對於 CSS 及前端工程師的初學者來說,上述三種 CSS 因為長得很像,所以經常傻傻分不清楚。究竟兩個 class 中間空格、沒空格、有逗號,到底差在哪裡? 別擔心,立刻講解給你聽:
 
1. 兩個 class 中有空格的例子:五個區塊中,階層必須是要在 first 區塊之下的 second 區塊,才會顯示黑底白字的 CSS 設定
See the Pen .first與 .second中間有空格的例子 by Tedutw (@Tedutw) on CodePen.
 
2. 兩個 class 中沒有空格的例子:五個區塊中, div class 名稱必須同時出現 first 與 second 才會顯示黑底白字的 CSS 設定
See the Pen .first與 .second中間無空格的例子 by Tedutw (@Tedutw) on CodePen.
 
3. 兩個 class 中有逗號的例子:五個區塊中,只要 div class 名稱中有出現 first 或是 second 的區塊,就會顯示黑底白字的 CSS 設定
See the Pen .first與 .second中間有逗號的例子 by Tedutw (@Tedutw) on CodePen.
註 : 以上三個範例的 HTML 碼都一樣
 
 
延伸閱讀:




CSS必學!前端工程師與Div.Span標籤的應用(上)




蛤?HTML繼承關係?前端工程師課程大解密

那些前端工程師不一定會告訴你的五四三,今天在這裡你有福了!

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




不想被搜尋引擎搜尋到嗎? 你一定要會SEO優化的robots.txt!!
想到海外工作嗎?選擇達內教育讓你與國際接軌!

人人都能是工程師!台灣 IT 培訓中心推「找到工作再付學費」專案,要試試嗎?
 
 
 
(繼續閱讀...)
文章標籤

布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣(83)

  • 個人分類:前端工程師就是我!
▲top
  • 4月 02 週二 201921:00
  • 將這些前端工程師的技能帶上手,希望無窮!

將這些前端工程師的技能帶上手,希望無窮!

 
你曉得前端工程師應該要有那些技能嗎?今天一手教給你!
曾經聽過很多這樣的說法:會用DIV+CSS,會用 Javascript 寫一些頁面特效,就是前端開發工程師的工作內容!但你知道嗎,其實前端工程師需要做的比這些多更多!下面整理了各大網路資料給你參考:

  • 會設計,不要求精湛,處理圖片,設計個小廣告是要的;




  • 精通HTML+CSS,並能快速處理各瀏覽器兼容問題;




  • 熟練掌握Javascript或Actionscript,精通加分;




  • 熟練使用JS框架,如jQuery/YUI等,並解讀過源碼,熟練多框架加分;




  • 熟悉Ajax技術,必須的;




  • 熟悉開發調試工具,如Firebug等;




  • 代碼語義化,懂優化,壓縮和反壓縮;




  • 對SEO有一定的了解,尤其是HTML結構和標籤的使用;




  • 高效合成CSS Sprite;




  • 了解伺服器方面基本知識;




  • 熟練掌握一門後端語言,如PHP/ASP.NET等,絕對加分項;




  • 有自己的網站(看對網站所有東西的把握);




  • 對移動開發有一定的了解和涉入;




  • 熟練HTML5和CSS3技術(主要用於移動應用開發);




  • 效率開發,精湛的開發軟體操作;




  • 有過用戶體驗研究,更關注人性化頁面開發;




  • 了解瀏覽器工作原理,了解w3c標準,了解web2.0;



  •  
     
     延伸閱讀:



    前端工程師抄捷徑!今天把網頁顏色代碼直接整理給你!



    覺得電子書很死板?多虧HTML5教學,你該改觀囉!



    為了成為前端工程師,我一定要成功-認識ID選擇器



    網路行銷課程贈送學員四字訣:簡單,直白!


    全球頂級AI咖啡師就在你家? 多虧有了Python課程,讓一切成真!!


    妥善運用網路行銷課程,所有客群都靠攏

    NOWnews 今日新聞


     
     
    (繼續閱讀...)
    文章標籤

    布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣(1,103)

    • 個人分類:前端工程師就是我!
    ▲top
    «1...52535466»

    個人資訊

    布萊恩的創業小窩
    暱稱:
    布萊恩的創業小窩
    分類:
    職場甘苦
    好友:
    累積中
    地區:

    熱門文章

    • (162)從達內教育評價事件來看Geego(奇科?)IT培訓評論的謬誤
    • (78)人工智慧和生化人科技下的底層生活-"戰鬥天使:艾莉塔"為你呈現
    • (78)有了Python課程,癌細胞看你往哪跑!
    • (223)前端工程師抄捷徑!今天把網頁顏色代碼直接整理給你!
    • (138)輕鬆入門前端工程師的HTML5課程(4)元素排版-下
    • (1,224)常常聽到的Java,原來真的是咖啡名字!!?
    • (141)前端工程師的必備品Emmet(四)快速設定顯示文字與自訂屬性值
    • (7,342)Python基礎功不可少-dir()與help()的使用
    • (13)十種文字特效,讓你的網路行銷影片獨樹一格~
    • (10)不能不懂的Python基本常識9-原地運算符

    文章分類

    • UI.UX設計五四三 (25)
    • 前端工程師就是我! (74)
    • 達內教育評價,不會讓你失望 (14)
    • 各式程式語言讓你挑! (135)
    • 網路行銷課程.SEO優化 (86)
    • IT評比 (2)
    • IT人的數位生活 (260)
    • 未分類文章 (1)

    最新文章

    • 全球首屆的元宇宙時裝周盛會,落幕後的反響是什麼?
    • 烏克蘭運用人工智慧以辨別戰爭罹難者,是好還是壞?
    • 2022年的人工智慧七大突破就是這些了!!!??
    • Google迫使YouTube Vanced中止開發啦!!!
    • 有關Python跟Java的差別,一篇文章就讓你懂!
    • 前端工程師網頁開發神器Emmet,沒聽過?今天介紹給你!
    • 在元宇宙受傷,你會感受到痛??這次該不會是玩認真的吧?
    • 怕自己成為股市小韭菜嗎?人工智慧操盤手有機會拯救你!!
    • 是什麼原因,讓日本飯店狠下心裁了兩百多個人工智慧!??
    • 透過診斷視網膜病變,人工智慧成功降低糖友的失明風險!

    動態訂閱

    文章精選

    文章搜尋

    誰來我家

    參觀人氣

    • 本日人氣:
    • 累積人氣: