タグ

WEB制作に関するcolonoeのブックマーク (18)

  • WebGL 開発支援サイト wgld.org

    次なる Web を見据えて 来たるべき WebGL2 の時代へ 2011 年、最初のバージョンである 1.0 が勧告された WebGL は、ウェブブラウザ上で OpenGL ES に相当するグラフィックス API の機能を利用することができる JavaScriptAPI です。 そして 2016 年、WebGL の正当な後継バージョンとなる WebGL2 (もしくは WebGL 2.0) がいよいよ格的に利用できる段階になりつつあります。 当サイトでは、2012 年の開設以来、WebGL 1.0 系の API を用いるための技術解説を掲載してきました。そして今後は、時代の変遷に合わせて WebGL 2.0 系の解説記事も公開していく方針です。 WebGL 2.0 が登場するとは言っても、後方互換を保つという意味もあって 意図的に有効化 しない限りは WebGL 1.0 相当の AP

  • 最低限覚えておきたいWEB配色の基本2大原理と6つの配色パターン

    ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved. WEBサイトのデザインは、誰もが頭を悩ませる部分だ。 「どういう配色なら良い印象を持ってもらうことができるのか?」「どのレイアウトならコンバージョンが上がるのか?」など、様々なところまで考えを張り巡らさなければいけないからだ。 そこで日は、The Art of Color Coordination というインフォグラフィックをご紹介する。これを見れば、WEB配色の基の2大原理と、今すぐに使える6つの配色パターンがすぐに分かる。 そして、初心者でも、統一感のある配色のWEBサイトを作るための大きな助けとなるはずだ。 WEB配色の2大原理と6つの配色パターン画像を拡大して表示する ※追記:インフォグラフィックの最後のクレジットの部分が途切

    最低限覚えておきたいWEB配色の基本2大原理と6つの配色パターン
  • インターネットでものづくりするときに役立つサイトまとめ

    先日、東京学生広告研究団体連盟の総会にて、 「インターネットでつくる人を増やす」というテーマでお話させていただきました! その時に紹介したサービスをまとめます。 この記事のターゲットは、インターネットでまだ作ったことがない人。 興味があってこれから始めよう!と思っている人向けです。 ポイントは、ブラウザだけで完結できるもの。PCさえあればOK。 アイデア・インスピレーションをストックしよう まずは、アイデアのストックやインスピレーションを高めるサービスを紹介します。 EVERNOTE 簡単なメモから、写真や動画まで記憶し、整理整頓ができるサービスです。 tumblr オンラインでできるスクラップブック。Web上の記事や画像・映像などを簡単にストックできます。 また他のユーザーの投稿もストックできるので、面白いユーザーをフォローするのがオススメです。 Pinterest 画像を貼りつけて共有

  • HTML+CSSコーディングが10倍速くなるZen Coding コーナーの記事一覧 | Web担当者Forum

    HTML+CSSコーディングが10倍速くなるZen Coding コーナーの記事一覧 | Web担当者Forum
  • Google HTML/CSS Style Guide の推奨ガイドラインまとめ | バシャログ。

    すっかり夏っぽくなり、ビアガーデンに毎日通いたいと常々感じる今日この頃、Latin です。 巷で流行っていると噂の Google HTML/CSS Style Guide についてまとめて下さっている REFLECT DESIGN さんのブログより、代表的なものをいくつか抜粋してみました。 全般的なスタイルルール 一般的な書式ルール 全般的なメタルール HTMLのスタイルルール HTMLの書式ルール CSSスタイルルール CSS書式ルール 全般的なスタイルルール プロトコルの記述 <!-- NG --> <script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script> <!-- OK --> <script src="//www.google.com/js/gweb/analytics/autotrac

    Google HTML/CSS Style Guide の推奨ガイドラインまとめ | バシャログ。
  • Webデザイナーのためのjquery入門2(前編)

    82 views jQueryの社内勉強会用スライドです。だいたい1時間で終われるように、前編・後編に分けています。 後編は6月以降で公開を予定しています。 More… jQueryの社内勉強会用スライドです。だいたい1時間で終われるように、前編・後編に分けています。 後編は6月以降で公開を予定しています。 このスライドを作るにあたって、書籍「WebデザイナーのためのjQuery入門」をかなり参考にしています。 Webデザイナーのためのjquery入門2(前編) — Presentation Transcript Webデザイナーのための jQuery入門  -覚醒編(前編) -jQueryのコードを自分で考えて書けるようになろう! 目標 日々の業務にjQueryを取り入れて、 自分で何かを作れるようになる。 大まかな内容1. 何かを取ってくる 2. それに何かをする3. まとめ  1

  • 初心者のためのjQueryプログラミング入門 - libro

    ※ページが正常に表示されない場合 AddBlockなどの広告ブロックツールがONになっていると、ページの一部が表示されないことがあります。これらのツールをOFFにしてみてください。

  • ウェブデザイナーは知っておきたい、ページレイアウトの代表的な10のパターン

    実際のウェブサイトを例に、ずっと廃れないであろうページレイアウトの10のパターンとその特徴を紹介します。 10 Evergreen Website Layouts (that will never go out of style) [ad#ad-2] 下記は各ポイントを意訳したものです。 2カラム、広いヘッダ 3カラム、広いヘッダ フォーボックス 不確定なグリッド 大きいスクリーンショット シングルカラム 打ち出し画像 固定サイドバー グリッドベースのギャラリー マガジンスタイル [ad#ad-2] 2カラム、広いヘッダ これは最も普通のレイアウトと言ってもよいでしょう。広いヘッダが上部にあり、960pxを2カラムにし、一つは広く、もう一つは狭くしたものです。狭い方はサイドバーでナビゲーションなどが設置してあります。 慣習的に、ブログでは広い方の右にナビゲーションを置き、スタティックなサイ

  • ネットサービスの競合分析で使えるツールと手法 : LINE Corporation ディレクターブログ

    こんにちは。ブロググループの池田です。 今回は、マーケティングデータの収集・分析の中でも、入手できる情報が限られるために手薄になりがちな競合サイトの調査・分析方法を紹介します。 まずは基データをおさえる PVやUU、ユーザ属性などを調べる際、ネットレイティングス (有料)、ComScore (有料) や Alexa (無料) といったツールがありますが、ここでは無料でかつ最近なかなかいい線いっていると思っている doubleclick ad planner by Google を紹介します。 使い方は簡単。doubleclick ad planner のページを開いて、調べたいサイトのURLを入力するだけ。表示されるページの「データを表示:」のプルダウンリストで「日」を選択します。 以下、表示されるページの中で特におさえておきたいデータです。 トラフィックデータとユニークユーザ数推移基

    ネットサービスの競合分析で使えるツールと手法 : LINE Corporation ディレクターブログ
  • 「Web AI」ライブラリの使い方と内部仕様 - Web上のデータからJavaScriptだけで人工無脳を作成

    はじめに いつもは「創活ノート」でマンガを描いている柳井です。その裏ではゴリゴリとコードを書いています。そんな私のマイブームはJavaScript。今年は「マンガで分かるJavaScript プログラミング講座」を描いてネット上で公開したこともあり、JavaScriptづいています。 こういったマイブームの流れに乗り、少し前にJavaScriptの新しいライブラリ「Web AI」を開発してリリースしました。Web上の情報を利用して、JavaScriptで人工無脳的なプログラムを書くためのライブラリです。データベースを持つことなく、ユーザーの入力に対してネット上の情報を収集して、インテリジェンスな振る舞いをするための各種命令が収録されています。 以下のサイトで、「Web AI」ライブラリのダウンロードや、サンプルの確認、リファレンスや全ソースコードの閲覧が行えます。 「Web AI」ダウンロ

  • 結局どうすればいいの? - Dive Into HTML5

    Translation of: What Does It All Mean? - Dive Into HTML5 Diving In The Doctype The Root Element The <head> Element Character Encoding Friends & (Link) Relations rel = stylesheet rel = alternate Other Link Relations in HTML5 New Semantic Elements in HTML5 A long digression into how browsers handle unknown elements Headers Articles Dates and Times Navigation Footers Further Reading 訳注 Diving In この章で

  • ゼロから学ぶ「CSS Sprite」

    CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

    ゼロから学ぶ「CSS Sprite」
  • 日本向けのウェブデザインというのはあるのか? – 秋元

    進出に興味のある海外企業や外国人から質問されることがあるので、まとめてみたいと思います。 僕はウェブデザイナーじゃないので、プロの方から補足や突っ込みがいただければとても嬉しいです。 [更新 2011-02-01] コメント・ツイッター・はてブからの意見を反映させました。 ある程度まとまったら英語にしてAsiajinにも書こうかと思います。 日向けにウェブサイトを作るときに特別しないといけないことはあるのか? 「メニューの文字をGoogle Translateで全部日語に置き換えたけど、これでいいかな? 他にすることある?」 – 機械翻訳は使い物にならない 英語-フランス語、とか英語-スペイン語、のノリで機械翻訳を使っても、あなたが想像するレベルの日語には決してならない # 英語に再機械翻訳してのチェックは必須だが、それでも日語訳のおかしさが見えてこないケースもある – フォン

  • Webデザイナー必読?!著作権について知っておくべき10のこと - kojika17

    Webデザインに限らず、制作したものに発生する「著作権」を知っておかないと、トラブルの元になるかもしれません。 特にWebデザインの場合は写真、文章、素材。 場合により動画など多岐の著作物を扱う場合が多々あります。 自分の頭の整理のためにも、Webデザイナー、ディレクターが知っておくべき著作権のことについて、まとめてみました。 1、著作権の基礎知識 著作権とは、知的財産権の一つです。 日の著作権は「無方式主義」と呼ばれる方式で、制作物を制作すると自動的に著作権が発生します。 この時、著作者人格権と**著作権(著作財産権)**に分かれます。 「著作者人格権」と「著作権(著作財産権)」について 著作者人格権 簡単に言えば「制作者」 公表の時の手段、方法を決定できる権利です。 法律上、制作者の同意がなければ公表できません。 著作権(著作財産権) Webデザイナーにとっては、Webサイトなど制作

    Webデザイナー必読?!著作権について知っておくべき10のこと - kojika17
  • サイト運営をやってみて起こった6つの「想定外」

    1ヶ月ほど前に、アノニマスダイアリーでサービスの紹介させてもらった「完全に一致」のおっさんです。 昨年11月25日に公開させてもらったサービスですが、公開から約1ヶ月半の間、いくつも思ってもみなかった事が起こりました。 誰かに聞いて欲しいものの、例のSEの友人が精神的な病で倒れてしまい聞いてくれる人もおらず、 Twitterでは短すぎてかけず、なおかつブログもないのでここに書かせてもらいます。 「なんだ、またかよ」という方、お目汚し失礼しました。 想定外1:サーバーが幾度となくダウン最初の記事を書いて、初日から約1週間で300万アクセスがあり、この間何度もサーバーが応答しなくなるという事態に陥りました。 MySQLサーバーとWEBサーバーの調整を教えてもらったお陰で、かなりダウン回数減らす事ができたものの、結局全然処理が間に合ってくれませんでした。 一番のネックになったのは画像の変換処理と

    サイト運営をやってみて起こった6つの「想定外」
  • 使われていないCSS設定があるか教えてくれる『Unused CSS』 | 100SHIKI

    似たようなツールは他にもあるが、シンプルで使いやすそうだったのでご紹介。 Unused CSSを使えば、使われていないCSS設定がどこにあるかを教えてくれる。 使い方は簡単で、チェックしたいサイトのURLを入力するだけだ。 すると、どのCSSファイルにどれだけ不要な設定が入っているかを教えてくれる。また、不要な設定を排除したCSSをダウンロードできたりもする。 サイトの開発がながびくと不要な設定も増えていくことだろう。こうしたツールをうまく使ってサイトの最適化をはかりたいですな。

    使われていないCSS設定があるか教えてくれる『Unused CSS』 | 100SHIKI
  • W3C - 『HTML 5 differences from HTML 4』日本語訳 - HTML5.JP

    一部、直訳ではなく意訳した部分がございます。原文と表現が異なることがございますので、ご了承ください。この日語訳は、私が理解を深めるために、自分なりに日語化したものです。語訳には、翻訳上の誤りがある可能性があります。したがって、内容について一切保証をするものではありません。正確さを求める場合には、必ず原文を参照してください。当方は、この文書によって利用者が被るいかなる損害の責任を負いません。もし誤りなどを見つけたら、当サイトのお問い合わせより連絡いただければ幸いです。 原文URL:http://www.w3.org/TR/2011/WD-html5-diff-20110525// 原文タイトル:HTML 5 differences from HTML 4 - W3C Working Draft 25 May 2011 翻訳日:2011/05/26 最終更新日:2011/05/26

  • 1: Web 標準カリキュラムの紹介 - Opera Developer Community

    1: Web 標準カリキュラムの紹介 Translated by Masataka Yakura · 20 Oct, 2009Published in: curriculum, course, beginner, Web, standards, japaneseThis is a translation of 1: Introduction to The Web Standards Curriculum/Table of Contents, written by Chris Mills. 次の記事: インターネットと Web の歴史、そして Web 標準の進化 カリキュラムの目次へ はじめに 私には、ある夢がありました。 過去8、 9年にわたり、私は教育に関する仕事に力を注いでいました。あるときは技術書を執筆し、人がその技術で何かかっこいいものを作る手助けをしました。勤務先に新しく入って

  • 1