[B! design][html] mazinlabsのブックマーク

WEB標準デザイン、はじめの一歩～デザインからマークアップまで～

第6回岡山WEBクリエイターズのセッション1で発表したスライド内容を全文掲載。第6回岡山WEBクリエイターズセッション1『WEB標準デザイン、はじめの一歩～デザインからマークアップまで～』岡山WEBクリエイターズ勉強会でお話した内容を、スライドとともに全文掲載しています。テキストはあくまで原稿そのままですので、実際に喋った内容とは幾分異なる場合があります。スライドのPDFをダウンロード講師概要 SKPRODUCT代表。デザイン、コーディング、PHPによるシステム構築、ActionScriptを使用したFlashなど、WEB制作全般を行うWEBアーキテクトです。岡山の大手企業・学校などを中心にWEBサイトと独自に開発したCMSフレームワーク『SEED』の提供を行っています。本日は、WEB標準デザインはじめの一歩です。 WEB標準というと、技術的なことを想像される方

mazinlabs 2011/05/09

リンク

HTML5とCSS3をページ全体or少しずつ導入するチュートリアル

デモページの全体のキャプチャ下記は各ポイントを意訳したものです。全体をHTML5化しても、面白そうなCSS3のエフェクトを少しずつ適用しても面白そうです。ウェブページにHTML5を導入ウェブページにCSS3を導入ウェブページにHTML5を導入デモページのHTMLの構造は、下記のようになっています。 HTML5：ページのベース各エレメントを配置する前のHTMLのベースは、下記のようになります。 <!DOCTYPE html> <html lang="en"><head> <meta charset="utf-8" /> <title>Ferris Buller on Abduzeedo</title> <link rel="stylesheet" href="style.css"> <!--[if IE]> <script src="http://html5sh

mazinlabs 2011/03/03

リンク

モバイルアプリケーション開発のためのHTML/CSS/JavaScript関連技術まとめ

モバイルアプリケーションをHTML/CSS/JavaScriptなどのWeb標準技術を用いて開発するためのさまざまなツールや環境が登場しています。1つ前の記事で紹介した「jQuery Mobile」もその1つですが、それ以外のものもここでまとめて紹介しましょう。 jQuery Mobile jQuery Mobileは、JavaScriptライブラリとして知られるjQueryのプラグインです。オープンソースで提供されています。「マークアップドリブン」をコンセプトとし、HTMLを記述していくことで、あらかじめ用意されているボタン、メニュー、ダイアログボックス、などのモバイル対応のタッチユーザーインターフェイスを備えたアプリケーションを開発できます。クロスプラットフォームに対応し、iOS、Android、WebOS、Windows Phone、Symbianなど多数のデバイスでそのまま動作

mazinlabs 2011/02/16

リンク

既存のフォームをユーザーに使いやすくする10のポイント

10 Tips for Optimizing Web Form Submission Usability [ad#ad-2] 下記は各ポイントを意訳したものです。 1. 必須入力欄は強調する 2. エラーメッセージは分かりやすく 3. クライアントサイドのバリデーション 4. 入力している欄を明示 5. 進捗を明示 6. データの保存やキャッシュ 7. 送信ボタンの文言 8. キャンセルボタン 9. 入力例の記載 10. 垂直に配置 1. 必須入力欄は強調するユーザーはフォームに入力した後に入力ミス・エラー表示があると、不安を感じたりイライラを募らせるでしょう。まずは、入力欄に「必須」「任意」などを記載して、入力欄が必須なのか任意なのかを明示的にユーザーに伝えるのは安全な方法となります。 2. エラーメッセージは分かりやすくフォームのエラーメッセージは、「あなたが下に必要とさせるフィー

mazinlabs 2011/02/01

リンク

2011年、押さえておきたいウェブデザインの11のトレンドとテクニック

Web Design Trends in 2011 [ad#ad-2] 以下、各ポイントを意訳したものです。 1. HTML5 + CSS3 2. シンプルなカラースキーム 3. モバイル対応 4. 視差効果 5. タッチスクリーン 6. 奥行き 7. 大きい写真の背景 8. 素敵なドメイン名 9. QRコード 10. サムネイルデザイン 11. Life Stream 1. HTML5 + CSS3 HTML5とCSS3はリリースされてから今日まで、あまり多くは使用されませんでした。しかし、この2011年、多くのサイトで採用されるようになるはずです。多くのデザイナーはFlashから離れてはじめています。次の2つのサイトを見てみてください。 Scribblertoo(Flash) ここで注意してほしいのは、FlashとHTML5は敵対するものではないことを理解しておいてください。問題は、