Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介

4.489 visualizaciones

Publicado el

ーーーーーーーーーーーーーーーーーーーーーーー
schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。
WEB生放送の授業を無料で配信しています。
▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。
https://schoo.jp/class/431/room
ーーーーーーーーーーーーーーーーーーーーーーー

Publicado en: Empresariales
  • Was a little hesitant about using ⇒⇒⇒WRITE-MY-PAPER.net ⇐⇐⇐ at first, but am very happy that I did. The writer was able to write my paper by the deadline and it was very well written. So guys don’t hesitate to use it.
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • Dating for everyone is here: ❶❶❶ http://bit.ly/2Qu6Caa ❶❶❶
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • Dating direct: ❤❤❤ http://bit.ly/2Qu6Caa ❤❤❤
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí

Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介

  1. 1. Webデザインの幅を広げるjQuery初級
  2. 2. Web業務においてあなたの専門は? 1. コード書きが専門だ   2. デザインのみ担当   3. コードも書くし、デザインもします   4. どちらも未経験です
  3. 3. デザイナーの方にこそ   jQueryやJavascriptで何ができるか   を知ってもらいたい。!
  4. 4. でも“jQuery”ってなんだろう?
  5. 5. jQueryとは   数あるJavascriptライブラリの   うちのひとつです! と、一言で説明してしまう前に・・・
  6. 6. Webテクノロジー栄枯盛衰物語
  7. 7. Webサイトの構成と各テクノロジーの役割 CSS HTML レイアウト 構造化 Javascript 動作 Web素材 テキスト/画像
  8. 8. 今から7〜8年くらい前、CSSがなかった頃… Flash HTML 構造化   レイアウト Javascript アニメーション   インタラクティブ ブラウザ 制御 Web素材 テキスト/画像
  9. 9. まさに   IE6じゃ表示   カオス! されないよ〜 マックだと文字出 てないね FireFoxでずれ るんだけど? この画像、あと   1ピクセル右に! レイアウト 変更!
  10. 10. どのブラウザでも同じ表示が可能な   FlashはWebデザインの花形だった Flashくん Javascriptくん
  11. 11. しかし、今から5年くらい前   CSSの出現によって、レイアウトが楽に! HTML CSS 文書の 構造化 レイアウト 役割をきっちり分けられるようになった!
  12. 12. もしかすると、   Javascriptを使ってCSSやHTMLを   リアルタイムに書き換えることが   できるんじゃね? 非同期という概念
  13. 13. そこで“Ajax”の登場! 同期通信 Top.html page2.html 非同期通信 Top.html Top.html ページ遷移なしに情報を更新する!  
  14. 14. 再びJavascriptに注目が集まるように! ぐぬぬ・・・ Javascriptくん Flashくん
  15. 15. そんななか、Flashにさらなる追い打ちが・・・   iOSでFlashがサポートされず!   Javascriptの需要がますます高まることに
  16. 16. でもJavascriptのコマンドは長くて複雑…   Ajaxのプログラムを組むのは大変だぁ!
  17. 17. Javascriptを使って、   よく使うプログラムをまとめて   おけばいいんじゃね? Javascriptライブラリ   という概念
  18. 18. 例えば・・・   あるテキストボックス(div)の色を   変更したい場合 Javascriptだけだと・・・長い! var  divTag  =   document.getElementsByTagName("div");    for  (var  i=0;i<divTag.length;i++){    if  ((divTag[i].getA_ribute("className")|| divTag[i].getA_ribute("class"))="newClass"){   divTag[i].style.color="blue";}}
  19. 19. でもjQuery(Javascriptライブラリ)を使えば $(div.newClass").css("color","blue"); たったこれだけ!!
  20. 20. 赤字の部分をまとめて面倒みてくれる   これがJavascriptライブラリ var  divTag  =   document.getElementsByTagName("div");    for  (var  i=0;i<divTag.length;i++){    if  ((divTag[i].getA_ribute("className")|| divTag[i].getA_ribute("class"))="newClass"){   divTag[i].style.color="blue";}}
  21. 21. つまりJavascriptとライブラリの関係を   カレーで例えると・・・ Javascriptカレー 素のJavascriptでは自分で調味料を集めて、   ルーから作らなくちゃいけない
  22. 22. でもライブラリを使うと・・・・ Javascript  カレー jQuery  カレー ルーを入れるだけ!
  23. 23. 便利なJavascriptライブラリが   いくつもリリースされた! prototype.js jQuery.js Script.aculo.us
  24. 24. jQueryの特徴 文法が簡単 プラグインが豊富 エフェクト系に強い サイズが小さい jQuery  UIやjQuery  Mobileなど 用途に合わせたライブラリも用 意されている。
  25. 25. HTML5とJavascriptによる   Web2.0時代の到来だ!
  26. 26. Webテクノロジー栄枯盛衰物語   おしまい
  27. 27. それじゃ“jQuery”で何ができるの?
  28. 28. 基本的にはCSSで表現できるものは   jQueryで制御することができる! 位置の移動 表示・非表示 拡大・縮小 透明化などなど
  29. 29. jQueryを利用したサイトデザイン例 h_p://wooofys.com   を開いてみてください!
  30. 30. ハンズオンタイム jQueryプラグインを使って   Web絵本を作ろう!
  31. 31. 用意するもの ・同じサイズの画像   ・jQuery.js  (h_p://jQuery.com)   ・trun.js    (h_p://www.turnjs.com/)

×