HTML/CSS/JSの記事一覧

去年末あたりからHTML5の本がたくさん出版されているところをみると、
思いのほかHTML5への移行は早そうな気がします。

html5adcal.png

上手に冗長化すれば現状のブラウザでもなんとか再現可能なタグも多いです。来るセマンティックウェブの世界!!
これでマークアップに迷う事無くコーディングができますね。

続きを読む
HTML5の世界を楽しもう!「HTML5 ADVENTURE CALENDER」

htmlヘッダー

htmlリクエスト
    htmlリクエスト行
        メソッド
        URL
        htmlのバージョン
    htmlヘッダー
        ユーザーエージェント名(User-Agent)
            ブラウザ種類、OS情報、検索エンジンのクローラの場合は「Googlebot」など
        リファラ(Referrer)
            どのページから発生したリクエストなのかを表示する
        If-Modified-Since もしくは If-None-Match
            ローカルキャッシュが更新されているかチェックするために更新日時や管理情報をリクエストに含める
        クッキー(Cookie)
            ブラウザに保存されているクッキーデータ
        Accept、Accept-Language、Accept-Encoding、Accept-Charset
            どんなデータを受け取りたいか。画像の種類、言語、文字コードなどを伝達する。
    データ本体
            

htmlレスポンス
    レスポンス状態行
        httpステータスコード
            200:ok
            300番台:リダイレクト
            400番台:クライアント側のエラー
            500番台:サーバー側のエラー
    htmlヘッダー
        コンテンツタイプ(Content-Type)
            データがHTMLなのか画像なのかや、文字コードなどの情報
        再利用期限(Expire)
            キャッシュの期限
        データの最終更新日時(Last-Modified)
            HTMLや画像がいつ更新されているかの情報、サーバー上のファイル場所ID、ファイルサイズ、更新日時、更新チェック情報などが更新されているかチェックする
        キャッシュ制御(Cache-ControlやPragma)
            ブラウザや通信するプロキシが、データのキャッシュをどう扱うかの情報
        接続状況(Connection)
            接続を持続するか(keep-alive)、毎回接続を切断するのか(close)。ブラウザもサーバーもHTTPバージョン1.1の持続接続(keep-alive)を使える場合、通信のやりとりが効率良くなります。

        移動先(Location)
            リダイレクト先を示す情報
    データ本体
        htmlや画像データ    

URLとURI

URI(UniformResourceIdentifier)
名前または場所を識別する書き方のルールの総称

    URL(Uniform ResourceLocator)
    場所を示す書き方のルール
    
    URN(UniformResourceName)
    名前を永続的に識別するルール

URLの例:http://yasuda:pass@www.example.com:8080/news/index.htm?page=2&msg=yes#hot
    http:
        スキーム(scheme)
        この場合はhttpプロトコルを使うことを示します。ほかにhttps:、ftp:、data:、file:。IANAという組織が管理している。
    //yasuda:pass@www.example.com:8080
        オーソリティ(authority)。「//」で始まり、さらに以下のパーツに分かれます。
            yasuda:pass@
                ユーザー情報(userinfo)。アクセスに使うユーザー名
            www.example.com
                ホスト(host)。アクセス先サーバー名
            :8080
                ポート(port)。アクセス先サーバーのポート番号
    /news/index.htm
        パス(path)。指定したオーソリティの中でアクセス先を指定します。
    ?page=2&msg=yes
        クエリ(query)。パスの中でさらに内部を細かく識別します。
    #hot
        フラグメント(fragment)。アンカーと呼ばれますが、正式にはフラグメント。サーバーから送られた情報をクライアント側で処理する際に使います。


参考サイト:
http://web-tan.forum.impressrd.jp/e/2010/01/12/7156
http://web-tan.forum.impressrd.jp/e/2010/03/09/7539




grooveshark2.jpg

なっなんと『グルーヴシャーク』もしくは『グルーブシャーク』でググると、今現在このブログが1位に!!
リリースしてまだ2週間程度ですが、こんなに簡単に単体ワードで1位がとれるとは...。素直にやったー!!
出来れば『grooveshark』でもてっぺん目指したいですね。
これからもたくさんの人に読まれる記事を目指して精進したいと思います。


あっ、groovesharkもいいですけど、itunesもよろしくお願いします。一応アフィリエイト貼っているので(笑)
ちなみに本日発売の放課後ティータイムのシングルおすすめですよ〜。
フルコーラスで聴いてクオリティの高さをあらためて思いしりました。特に『Listen!!』のギターソロからブリッジのあたりがグっっときます!!流石HTT!!

※リンクがまだ作れなかったのでこちらからどうぞ。
↓↓↓↓↓
ふわふわ時間
gogomaniac.jpglisten.jpg


groovesharkはこちらから:

2010/04/13

html5について

話題になったりならなかったり。
現在進行形で宙ぶらりん状態のHTML5。

正直なところまだ実務に活かせるかというと否でしょうね。
iphoneなど一部利用できそうな分野はありそうですが、
まだちょっと早いかな...。

しかし早めに手を付けておいて損はないと思います。
HTML5の勧告はまだまだ先かと思うが、
CSS2.1も確かまだ勧告候補のはずだし。

何よりも<canvas><audio>などの魅力的な新要素がたんまりですし。
その代表的なサンプルがこれ
flash等を使う事無く、canvas、audio要素とjsのみですよ!

他にはテトリスなんかも出来ちゃうみたいです。

もちろんこういったインタラクティブな要素だけではなく。
従来のウェブレイアウトを便利にしてくれる(であろう)要素も多いです。
さらにソースコードはシンプルかつ分かり易いものへと進化してゆくでしょう。

さっそく日本の方でもhtml5のコーディングに挑戦しているサンプルサイトがあったので
いくつか紹介します。



ソースコードは確かにシンプルですね!

続きを読む
html5について

このページのトップへ