タグ

html5とweb制作に関するhush_inのブックマーク (8)

  • ウェブパフォーマンスの基礎とこれから

    ウェブパフォーマンスの基礎と今後の動向について、Web標準周りを中心に解説しています。GREEのMini Tech Talkで発表時の資料です。

    ウェブパフォーマンスの基礎とこれから
  • 2014年これからのウェブ制作業界の流れ、伸びる職種、ウェブデザインのトレンドなどのまとめ

    数多くのブログで2014年のトレンドをさまざまな切り口でポストしているので、その中から特に印象的で共感がもてたものをまとめて紹介します。 キーワードとしては、スマフォ・タブレットなどの小さいサイズのタッチデバイス、レスポンシブ(特に画像)、HTML5/CSS3、ビッグデータ、リスク管理が注目されています。 2014年、ウェブ制作業界全体の流れ ウェブデザインの2014年のトレンド 2014年に大きく変化するウェブデザインの7つの傾向 2014年、注目度の高いIT系の職種・役割 2014年、ウェブ制作業界全体の流れ まずは、2012, 2013年と的確な予測をだしてきたsitepointの2014年のウェブ制作業界の全体の流れから。 10 Web Predictions for 2014 スマートフォン中心の年 最終的にはデスクトップからのアクセスをスマフォが超える HTML5のウェブアプリ

  • HTML5デモ「日本全国花粉飛散マップ」を作って分かったCreateJSとTypeScriptでの効率的な開発手法 - ICS MEDIA

    HTML5デモ「日全国花粉飛散マップ」を作って分かったCreateJSとTypeScriptでの効率的な開発手法 2013年3月15日に開催されたCreateJS勉強会(第2回)で発表したWebサイト「日全国花粉飛散マップ」ですが、CreateJSとTypeScriptを使って制作しました。 今回の作品のポイントとしては、次の3点があげられます。記事では次を具体的に説明します。 HTML5で制作、デスクトップだけでなくスマートフォンやタブレットでも再生可能 CreateJSで、DOMではできないHTML5 Canvasならではの表現 TypeScriptを用いて低学習コストで効率的な制作の実現 スマートフォンやタブレットでも閲覧可能 このWebサイトは環境省が提供している資料を元に、過去9年分の花粉の飛散量をパーティクルを用いてビジュアライズしたものです。花粉の量に比例して、パーティ

    HTML5デモ「日本全国花粉飛散マップ」を作って分かったCreateJSとTypeScriptでの効率的な開発手法 - ICS MEDIA
  • メイキング「Birthday Song for ミク | miku-39.jp」こと技術解説 - 甘味志向@はてな

    「初音ミク」というキャラクターが登場して5年。彼女の存在は世界中へと広がり、数の多くの人を魅了してきました。 その驚きと感動を盛大に祝ってあげるためのパーティの準備、そんな気持ちでこのミュージックビデオを制作いたしました。 http://miku-39.jp 初音ミク生誕5周年おめでとう! ということで「Birthday Song for ミク | miku-39.jp」というサイトを作りました。 せっかくなのでメイキングっぽい技術解説を書いてみたいと思います。 とりあえず miku-39.jp とはなんぞやってことなんですが、 Mitchie M ([twitter:@Tukada])さんが作った「Birthday song for ミク」という曲にあわせて Tatsuro Ogata ([twitter:@llcheesell])さんが作ったミュージックビデオにインタラクティブな感じの

    メイキング「Birthday Song for ミク | miku-39.jp」こと技術解説 - 甘味志向@はてな
  • HTML5でサイトリニューアルしました。+ 簡単な解説 - ORANGE AGE Weblog

    2年半ぶりくらいに自分のポートフォリオサイト、ORANGE AGEをリニューアルしました。 リニューアルする時どきに自分のやってみたいことを思いっきり反映してきて、前回はフルFLASHサイト、そして今回のリニューアルではHTML5+jQueryで制作してみました。(CSS3もちょこっとだけ使ったよ) 目次: 1. 今回やりたかったこと 2. HTML5でサイトを作る準備 3. 使用したその他のjQueryプラグイン 4. videoタグで再生する動画の準備 5. 制作実績の各背景、サイズは3000×1600px。ファイルサイズ圧縮が鍵。 6. まとめ&今後やりたいこと 1. 今回やりたかったこと ・HTML5 ・videoタグで動画再生 ・シングルページの構成 ・視差効果(パララックス) なぜか上手く動かなかったので断念。再チャレンジ予定。 2. HTML5でサイトを作

  • XHTML1.0とHTML5の違いをスタバのページで紹介 (1/6)

    HTML5タグの誤用で恥をかいた」「分厚い仕様書は読み切れない」コーダー&デザイナーのためのコーディングガイド。最終草案に対応したほか、商用サイトを意識したコーディング例を新たに書き下ろし。HTML5マークアップへ移行するために必要な知識を効率よく学べる1冊です。ネットで話題の「HTML5カルタ」付き! HTML5マークアップ 現場で使える最短攻略ガイド 定価:2,808円 (体2,600円)/形態:B5変 (240ページ) ISBN:978-4-04-866070-9 HTML5と従来のHTML4.01やXHTML1.0との違いは、既存のサイトをHTML5化してみると理解しやすいでしょう。今回は、実在するWebサイトをHTML5に(勝手に)リニューアルしながら、HTML 4.01やXHTML 1.0との違いを解説します。ソースコードだけをリニューアルすることは実務ではあまりないと思い

    XHTML1.0とHTML5の違いをスタバのページで紹介 (1/6)
  • 初心者の頃分からなかったWeb用語:フレームワーク … CSSからHTML5、WordPressまで

    Webを見ていると、フレームワークっていう言葉をよく目にします。初心者の頃は、このフレームワークっていうものがどんなものなのか、いまいち分かりませんでした。今回は、色んな例でフレームワークというものを紹介してみました。なので、フレームワークって何だろうっていう人向けの記事です! Web制作関連のブログを読んでいると、ときどきフレームワークっていう言葉がでてきます。例えば CSSのフレームワークとか、HTML5 + CSS3 のフレームワークとか …。 今でこそ、このフレームワークって何だかわかりますが、初心者の頃は、このフレームワークっていう言葉が何だか難しそうで、意味の分からないものでした(私だけ?)。何となく雰囲気で、使ってみると便利なのかなーという感じはしましたけど、そもそもフレームワークという言葉自体の意味が分かっていなかった頃は、使ってみよう!というところまで行きませんでした。

  • HTML5+CSS3 入門

    Webを記述する言語の標準の現状 昨年度であれば、HTMLを記述する授業では自信をもって以下の基準を推薦していました。 HTML (文書の構造を記述する言語) – XHTML 1.0 もしくは XHTML 1.1 CSS (文書の体裁・デザインを指定する言語) – CSS 2 しかしながら、ここ数年で、とくに去年あたりから状況は大きく変動しつつあります。現状の変化を理解するには、ここに至るまでの歴史的な経緯について簡単に理解する必要があります。ここまでの経緯を整理した上で、将来の展望を探りたいと思います。その上で、この授業ではどのような基準にのっとって「正しい」ということを定義するのか決めていきたいと考えます。 HTML (Webサイトの記述言語) の標準化巡る闘争の歴史 AppleInsider: なぜ AppleHTML 5 に賭けているのか: ウェブの歴史 [Page 2] よ

    HTML5+CSS3 入門
  • 1