• 勉強会

    第2回 福岡マークアップ勉強会

    2012/09/19

    第2回のログログ。

    a2.jpg

    第1回のまとめがありませんが

    第2回のまーとーめ!

    ●参加メンバー(計12人)
    むねりん
    kanapple(私)
    daichi_shim
    tamshow_
    humpzin
    ina_ryu
    ARIMA
    東さん
    kecy_
    naminy
    ta2kick
    ゆかちゃん




    今回のテーマはずばり

    「スマホコーディングについて」

     

    a4.jpg  a5.jpg


    事前に、daichi_shimがデザインしたものを、むねりんでそれぞれコーディング。
    二人のコーディングを比較して、あーだこーだの回でした!

    その前に、私の会社の方のスライド


    webパフォーマンススライド
    http://www.slideshare.net/pesblog/web-13413402


    こちらを使用させて頂き、パフォーマンスについてのお話。

    みんなでへー!へー!言ったあとに、むねりんでそれぞれ解説しました。


    a1.jpg  a2.jpg

    決定的な違いは
    むねりん・・・HTML5に沿った明確な文書構造を意識したマークアップ、
    ・・・パフォーマンスを重視のマークアップ。
    (まぁこれが狙いだったんですが)


    共通点としては以下などがありました。
    ・<header>背景画像を表示領域によって拡大縮小させる(background-size)
    ・<nab>メニューリスト
    ・<footer>コピーライトは<small>タグで囲む


    違いはコンテンツの中身でしたが、
    デザインから2人がイメージ、認識した部分に違いがあり、
    コーディングやレイアウトに違い出てました。
    やはりデザイナーさんとコーダーの打ち合わせや相談、提案は大事だなーと思いましたね!


    その他
    ・imgを使わずcss3でどこまで再現するか
    ・可変する部分、固定する部分
    ・jsでの切り替え


    そんなことを話したあと、(のゴリ押しによって)sassの簡単な紹介。
    スマホコーディングに便利な機能(主にcompass)の話をしました。
    半ば押し付け的に、

    「さぁ!みんな!sass使おうよ!」と。


    そして、おなじみtamshow_の小ネタと最新ネタ(実際この話しが一番盛り上がったりする)

    a6.jpg

     

    ・mac/windowsでキーボード、マウスを共有できるコードの紹介
    (何てやつですかね?ファイルのコピーまでできて便利!)


    ・wifiで写真を自動アップロードするEye-Fiの紹介
    (撮ったものが即PCに!すごいなー)


    便利なショートカットや意外と知らない裏技?の話も盛り上がりました。

    ・Command + H・・・現在のアプリケーションを隠す(tamshow_:えっち!)
    ・Command + M・・・現在のアプリケーションをDockに収容(kanapple:にゅっと)
    ・Command + Dockのアイコンクリック・・・そのアプリケーションフォルダが開く(kanapple:MAMPでよく使ってます)
    ・Command + Shift + 4・・・スクリーンショット
    ・Command + Shift + 4 のnあとにスペース・・・アイコンがカメラマークに代わり、選択したウィンドウのみスクリーンショット(tamushow_:意外と知らないでしょ?)
    ・↑この方法で撮ったスクショをメールに添付するのが好き(kanapple:シャドウが入ってかっこいい♡)
    ・option + ファインダーの閉じるボタン・・・現在開いている全てのファインダーを閉じる(ta2kick:気持ちいい♡)
    ・【MAC】名前変更したいファイルを選択 + エンターキー・・・ファイル名の変更(naminy & kanapple:エンターはおもいきり叩く!)
    ・【Windows】名前変更したいファイルを選択 + そっとクリック・・・ファイル名の変更(naminy & kanapple:そっと、優しくクリック)※本当はF2でいけます



    あっという間に時間はすぎましたが(1時間押し)
    今回もわいわい、気軽な楽しい勉強会になったなーと思います。
    ありがとうございました!


    <個人的な感想>
    ・ファイル持っていくの忘れた(反省)
    ・HTML5に沿ったマークアップについて、もう少し掘り下げればよかったなぁ(むねりんマークアップの分)
    ・デザインについての説明も入れたかったなぁ(daichi_shimのデザイン)
    ・解説のことを考えてソースを見やすく書くべきだったな(改行いれるとか)
    ・一箇所くらいその場でマークアップしてもよかったかも
    ・やっぱ資料いるかな(むねりんバタバタあざした!)

    次回のテーマは
    ・デザインの話(ta2kick & naminy)
    ・プログラム(PHP)の話(kecy_ & ina_ryu)

    の2本立て予定!
    次回もとっても楽しみです(*´ω`*)ふふふ。



    皆様おつかれさまでしたー!

この記事へのコメント

コメントを送る

  ※ メールは公開されません
Loading...
 画像の文字を入力してください

back