Web & AOR Music Blog

I'm Web Front-End Engineer. I like AOR music.

日曜クラス スマホサイト制作

日曜クラス スマホサイト制作のまとめメモ

viewport (980px)

980px->320px

●iPhone (Safari)
480 x 320

●Android (Chrome)
横:320~480px
縦:640~960px

●Apple仕様
MobileHIGH.pdf

○画像
GIF, JPEG, TIFF, PNG, SVG, (3MB以下)

●画面のサイズでスマホ用サイトにするサンプルサイト

http://foodsense.is/

●ユーザーエージェントで切り替え
Safari->開発メニュー → ユーザーエージェント

でiPhpne画面のプレビューが出来る。

—–

header 980
main 680

●イーモバイル・サイト

https://github.com/pxgrid/js-flipsnap/downloads

HTML5のVideo要素、FirefoxでWebMを再生させる

●HTML5のVideo要素、FirefoxでWebMを再生させる

ローカルでFirefoxで再生できていたWebM形式の動画。
サーバーにあげたら、うまく動かなかった。

ググって、.htaccess に以下の記述をしたら動いた。

AddType video/webm .webm

いやはや、簡単には動かないモノである。

http://d.hatena.ne.jp/nakamura001/20100530/1275233328

http://blog.orangeage.net/archives/240

●Miri Video Converter (なんか使えそうな、動画コンバーター)

http://www.mirovideoconverter.com/

今回は、iPhoneで撮影して、iMovieで編集して、『共有→書き出し』
m4vの拡張子を、mp4に変更。

それを、

http://firefogg.org/

で、WebMに書き出したのサ!

等々力渓谷紹介サイト制作中

日曜クラスの課題で『等々力渓谷』の紹介サイトを制作しているが、はたして、間に合うか?

これから、地図を書くという、あいかわらずのギリギリにならないと『やる気』がおきないダメダメぶりだ・・・
あと3日!頑張ろう!!!

等々力渓谷 紹介サイト

——–

明日への課題。
地図、作成しなきゃ〜

fancyboxのliをたくさん、非表示にしたいので、CSS3の:nth-childをマスターせねば!!!

http://www.ideaxidea.com/archives/2011/06/css_master.html

——–

●今までmarginでゴマかしてきた、縦のセンタリングの方法。

http://www.webbibo.com/blog/htmlcss/vertical.html

 heightとline-heightを揃えるのか!知らなかったぁ〜

HTML5でmp3音楽形式のid3情報は取得できるのか?

ググってみたが、よく分からない・・・

http://d.hatena.ne.jp/famnet/20111114/1321202884

http://web.ist.utl.pt/antonio.afonso/www.aadsm.net//libraries/id3/

http://blog.nihilogic.dk/2008/08/reading-id3-tags-with-javascript.html

——-

Flash Action Script 3.0なら簡単なのに!!!

http://help.adobe.com/ja_JP/FlashPlatform/reference/actionscript/3/flash/media/Sound.html

課題サイトやっと始める前のまとめ

●ウィンドウサイズを変えるとコンテンツが再配置される可変グリッドレイアウトに関する情報まとめ
(Masonryに似たヤツ)

http://kachibito.net/web-design/grid-layout.html

jquery.vgrid.js

Smart Columns w/ CSS & jQuery

WordPressテーマ
GRID wordpress theme

●jQueryで背景画像を全画面表示する

http://www.webopixel.net/javascript/203.html

●Twitter関連のjQueryプラグイン

http://phpjavascriptroom.com/?t=topic&p=twitter_jquery

http://phpjavascriptroom.com/exp3.php?f=include/topic/twitter_jquery/monitter_widget.inc&ttl=%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB

●CSS 3のセレクタ:最初と最後、偶数と奇数の要素にスタイルシートを適用

http://builder.japan.zdnet.com/html-css/sp_css-firefox-safari/20385264/3/

●jQuery で奇数番目・偶数番目を指定するときの注意点。

http://blog.btmup.com/javascript/jquery-odd-even-nt.html

——-

●3D回転ナビ

http://lab.smashup.it/flip/

●ふわふわしてるコンテンツ

http://kaelab.ranadesign.com/blog/2010/08/post-5.html

●等々力渓谷 光に輝く『紅葉』

http://p.twipple.jp/9k2nT

12/11(日)日曜クラスまとめ

●マッシュアップ

http://www.mercedeath.com/cornelius_remix/

●Google Map API

jQuery gmap3 js

http://blog.bumberboom.net/archives/monthly/2010_09/google-maps-api-v3-jquery.php

・経度緯度を調べる

http://www.benricho.org/chimei/get_LatLon/

——-

●ブログRSS読み込み

http://blqt.org/

http://blqt.org/?page_id=2 (サンプルページ)

●Weather API

http://weather.livedoor.com/weather_hacks/

●ランダム文字 (textShuffle)

●jQueryで制御する文字エフェクト集「20+ Easy to Use jQuery Text Effects and Animations 」

http://design-develop.net/web-design/20-easy-to-use-jquery-text-effects-and-animations.html

●Fireworks GIFアニメの作り方
ステート 右クリック 追加

背景は別のレイヤーで作っておいて、右クリック
『レイヤーを複数ページで共有』
そして、ロック。

シンボルを始点と終点において、右クリック。

『シンボル』-『インスタンスのトゥイーン』

●来週のスマホサイトのURL

http://blqt.org/em/

jQueryサムネイル付きギャラリー

●サムネイル付き Lightbox風ギャラリー (ppgallery)

http://kachibito.net/web-design/ppgallery.html

http://www.ppplugins.com/demo/ppgallery/#http://ppplugins.com/demo/ppgallery/images/l_01.jpg

●Skitter (トップページに使えるかな?)

http://www.thiagosf.net/projects/jquery/skitter/

◎横スクロールの位置 (scrollLeft)

http://d.hatena.ne.jp/cyokodog/20090112/jQueryPositionSize03

12/6(火)気になった事まとめ

これからのWebデザイナーの為の

WordPressでつくる!Webサイト体験セミナー

https://www.facebook.com/events/147302398705696/

http://blog.dhw.co.jp/tokyo_event/2011/10/12webwordpress–0cc3.html

受講したい〜

WordPress によるWeb制作スキルが身につくエクステンション講座「Webアドバンス」講座(1月29日開講予定)のコース案内・お申込受付も行います。

iTunesで書き出したxmlファイルをHTML5で表示したいぃ〜

http://ttu.loopshoot.com/member.pl

http://www.xmlmaster.org/atelier/mc005.html

Flash/Ajax ベストコレクション20

http://www.tkrb.jp/archives/flash-ajax20.html#TOPIC08

マツ追悼試合(1/22)

http://www.sponichi.co.jp/soccer/news/2011/12/02/kiji/K20111202002150070.html

ブクレコ (面白そう)

http://www.bookreco.jp/users/login

HTMLきちんと
(このスライダーの説明分かり易いです)

http://www.slideshare.net/myakura/html5-2480964

Lateral On-Scroll Sliding with jQuery
スクロールすると真ん中に集まってくるぅ〜

http://tympanus.net/codrops/2011/12/05/lateral-on-scroll-sliding-with-jquery/

http://nizoapp.com/

みたい。

二子玉川経済新聞

http://nikotama.keizai.biz/

ニコトコってなんだ?

http://nikotama.keizai.biz/headline/233/

五島美術館ブログ

http://futakotamagawa.seesaa.net/article/237779620.html

上野毛のコブシ(いつか、こんなキレイな写真が取りたい〜)

http://ttoshichan.exblog.jp/13327528/

facebook 二子玉川生活

https://www.facebook.com/futakolife?sk=wall

foursquqreで、近くに居る人を表示出来ないか?

https://ja.foursquare.com/

https://ja.foursquare.com/sato_net/checkin/4edb5eaf77c8274efe4bd4a0?s=f0oYwxNjf9ZX6pFVpzVKY3CRnGo&ref=tw

岡本 紅葉

http://ameblo.jp/champagne-crown/image-11095462709-11647205200.html

世田谷ロケ地一覧

http://www.setagayaku-town.com/location/list.php?lo_id=3&pf_id=13&pg=2

私が恋愛できない理由

http://www.fujitv.co.jp/wataren/

http://loca.ash.jp/show/2011/d201110_wataren.htm

http://cento100.net/

Copyright © Web & AOR Music Blog, All Rights Reserve.