サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
ブラックフライデー
vosegus.org
または ※デモでは実際にアップロードはされません。 HTML <p id="response"></p> <div id="dropto">ファイルをここにドロップ</div> <div id="progress"><div id="percent"></div></div> または<input name="userfile" type="file" id="input-file"> CSS #dropto { background: #FFC; border: 2px dashed #CCC; height: 200px; line-height:200px; text-align: center; color: #CCC; } #dropto.over { background: lightgreen; } #progress { width: 100%; } #percent { b
HTML5 の説明でよくでてくるのがセマンティクスの強化。 ここでひとつの疑問が浮かぶ。「はて、セマンティクスとはなんじゃろうか?」 これをひとに聞かれた時、案外言葉に詰まるので、ここはひとつ、セマンティクスとはなにかを簡単に説明する方法を考えてみる。 セマンティクスの意味 セマンティック HTML を考える前に、そもそもセマンティクスとはどういうものなのか。 セマンティクスとは言語学の領域のひとつで、日本語にすると意味論になる。 意味論はざっくり言うと言葉と意味の関係を扱う。 例えば食事中に「そこの醤油差しとって」と言われたとする。そしてその醤油差しが仮に空だったとする。 これを意味論的に解釈すると、醤油差しが欲しいという要求に応えるために空の醤油差しをとって相手に渡すことになる。 もうひとつの領域である語用論で「そこの醤油差しとって」を解釈すると、醤油差しが欲しいのは食べ物に醤油をかけ
楕円を描くメソッドがないので、拡張してみた。 使用例 stage.ellipse({ x:145, y:145, width:220, height:120 }); ellipse メソッドのコード CanvasRenderingContext2D.prototype.ellipse = function(arg){ var cnt = arg || 0; var x = (cnt.x) ? cnt.x : 0; var y = (cnt.y) ? cnt.y : 0; var width = (cnt.width) ? cnt.width : 0; var height = (cnt.height) ? cnt.height : 0; var radW = width/2; var radH = height/2; this.beginPath(); this.bezierCurveT
先日ちょっと Android アプリの GUI のデザインをする機会があってもろもろ調べていたのでそのまとめ。 実際はほとんどスマートフォンらしい定型の GUI だったので、やったことはレイアウト組んでスキンをあてるくらいだったのだけれど、さすがに HTML とは違うので最初は少し戸惑うものの、基本さえ理解できればそれほど難しいものでもなく、純粋に UI のためのマークアップという意味ではいろいろと学ぶことも多かった。 簡単なものなら自分でもつくれるようになろうかと Java もはじめてみたけれど、時間がなかったので基本構文で終わっているので、おいおいその辺は続けていこうかと思う。 当たり前といえば当たり前だけれど、本とか探しても UI の部分には少ししか触れられていない。探せば Web には十分な情報があるのだけれど、それも検索のための単語が分かってこないと最初はすぐに行き止まりになって
ビジネス展開も進むセマンティック Web。そろそろいろいろ情報収集。ということで、まとめてみた。 W3C 文書の和訳 RDF Primer（和訳） W3C の RDF Primer の和訳 OWLウェブ・オントロジー言語ガイド W3C の OWL Web Ontology Language Guide W3C Recommendation 10 February 2004 の和訳 XML名前空間 1.1 W3C の Namespaces in XML 1.1 の和訳 Web サービス W3C GRDDL service profile 属性、transformation 属性から、 XSLT の変換結果を出力 RDFa Distiller and Parser RDFa から RDF を抽出 SPARQLer - General purpose processor ページ上で SPARQL
作成日 : 2009年09月13日 更新日 : 2010年05月30日 Vosegus Labs 基本設計 SQLスキーマの設計 XMLの設計 HTML JavaScript PHP 基本設計 デフォルトでは現在の情報をGETし表示 更新はform elementにデータを入力 入力されたデータを元にしてXMLHttpRequestでPHPにPOSTする PHPがパラメータからSQLを作成して送信 クエリが通ったら、更新されたデータベースの情報を取得 更新されたデータベースの情報をXML形式でJavaScriptへ渡す JavaScriptは受け取ったデータをHTMLで表示 SQLスキーマの設計 CREATE TABLE rex( rex_id SMALLINT UNSIGNED AUTO_INCREMENT, rex_year YEAR, rex_month VARCHAR(2), re
Hello kangaroonote kangaroonote 線をなぞる Web デザインを学ぶ人のために WebGL やってみた 子供向けゲーム スタイルガイドジェネレーター
HTML5&API入門 Google、Appleも推進する注目技術、「HTML5」の初の解説書! Web関連技術の標準化団体「W3C」が策定を進めている、次期 HTMLバージョンが「HTML5」です。仕様策定はまだ道半ばですが、Firefox、Safari、Google Chrome、Operaといった先進的なブラウザはすでに積極的に実装を始めています。定価 ¥ 2,940
ActionScript 3.0 アニメーション アニメーション表現や3D表現をスクリプトで制御したいと思っている人は絶対に読んでおくべき1冊だと思います。この本は、『完全なソースコードはサンプルライブラリで』的な、技術本によくあるコードの断片のみの抜粋掲載ではなく、紙面だけで完結するActionScript3ソースが掲載されていて、本の分厚さと値段を補っても余りある程の知識と経験を身につけさせてくれました。 定価 ¥ 7,350 加速するアニメーション SWF ActionScript //ベクターの描画 var sp:Sprite = new Sprite(); var grp:Graphics = sp.graphics; grp.lineStyle(0,00000000,1); grp.beginFill(00000000,15); grp.drawCircle(16,16,16)
下のボタンクリックでフォントサイズが変更されます。セットされたCSSの情報はCookieに保存され、リロードしても保持されます。 高速サイトを実現する14のルール 米Yahoo!のパフォーマンス担当責任者が導き出した「高速サイトを実現する14のルール」を実例とともに紹介します。サイトの高速化と聞くと、サーバ負荷分散などバックエンドで実施する大掛かりなパフォーマンスチューニングを思い浮かべますが、じつは待ち時間の80%はフロントエンドの処理に費やされています。ここで紹介する明解なルールに従いさえすれば、この時間を大幅に削減できるのです。定価 ¥ 1,890 JavaScript window.onload = function(){styleCtrl.addFSBtn.create("ctrl");} var styleCtrl = new Object; /************
日本人はだいたい必要のないものを、あった方が良いという消極的な理由で、溜め込んだり、付け足したりするのが好きだ。 コンピュータにしても、日本メーカーのものを買うと、バージョンの古いアプリケーションがたくさんついてくる。そしてそれは往々にして、生涯使われることはない。 必要なものは、必要な時に、必要なだけ、必要とするひとだけが必要なものでしかない。 お得感をだそうとしているのかもしれないけれど、ぼくには貧乏性なだけのようにしかみえない。 先日も知人のコンピュータを買うのに付き合い、セットアップする際にハードディスクを圧迫する無用なものを全て削除するのに、ひどく時間をくった。 それはそれとして、最近、なぜかホームページで流行りの文字サイズ変更ボタン。 なぜ付けているのだろうか? もちろんあったほうがいいからに相違ない。確かに、あったほうが良い。ならいっそ、ビデオの予約と日焼け対策もしてくれると
ActionScript 3.0 プログラミング入門 基礎から学んで、ずっと使える。サンプルデータで着実に学べる。ActionScript 3.0でインタラクティブWebコンテンツ、リッチインターネットアプリケーション開発を本格的にはじめたい人のための解説書。定価 ¥ 2,940 画像を読み込む 文字を生成してみる SWF ActionScript import flash.display.MovieClip; import flash.display.Loader; import flash.net.URLRequest; //画像読み込み var url:String = "amz_lrnAS3.png"; var imageUrl:URLRequest = new URLRequest(url); var img:Loader = new Loader(); img.load(ima
最適なサイト構築のための論理的アプローチ Web情報アーキテクチャ Webを通じた情報提供の方法を「情報アーキテクチャ」という概念に基づいて整理，再考することを提案する。現状のサイト構築が，ユーザーの情報ニーズについて単純すぎるモデルしか描けていない点を批判し，より実際的なモデルを構築することで幅広いニーズに対応できる可能性があるとする。個々の要素技術ではなく，サイト設計に必要な概念の紹介や戦略の立て方，作業するに当たってプロジェクトをどのように組織・運営していくかといった経営者的な視点から解説している。定価 ¥ 4,620
つまり、誰にでもつくれないものは何かを考える必要があるし、Webでの情報公開はただなんとなく行っても無意味で、コンテンツとは何か、を明確に定義できないのであれば、それは誰にでもつくれるものになってしまう。 実際、ちょっとパソコンが触れて、簡単な画像処理ができる。というレベルで、ホームページはつくれる。 もともと、そのように誰でも自由に情報が公開できる、という目的で考えられたもので、再現性の高いWYSWYGのついたオーサリングツールが、数万円で手に入るのだから、何もン十万円もだして、ホームページ屋に発注する意味があるのか? と、もし自分が経営者で、ホームページをつくろうと考えた場合、答えはNOだと思う。 構成やナビゲーション設計といっても、ページ数が少なければ、特に高度な専門知識がなくてもそれっぽいものをつくれる。 ショッピングサイトなどのWebアプリーケションも独自に開発するよりは楽天など
画像の内側に border をかけるテクニックが CSS-Tricks というブログで公開されていました。 記事にあるとおり、これで hover 時にのみ border を追加することができて、素敵です。 あとギプスもとれて、元気になったような気分です。 Image Rollover Borders That Do Not Change Layout
要素の表示非表示切り替え head level3 click hereparagraph paragraph Definition Term click hereDefinition Description $(".trg").next().slideUp(); $(".trg").click(function(){ $(this).next().slideToggle('fast');//”slow”,”normal”,”fast” or "ミリ秒" }); 要素の表示非表示切り替え（アイコン付き） head level3 click hereparagraph paragraph Definition Term click hereDefinition Description $(".itrg > a").attr("href","javascript:void(0);"); $(".
テンプレートとなるHTMLの構造 <?xml version="1.0" encoding="utf-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <title>{title}</title> <link type="text/css" href="output/skin.css" rel="stylesheet" /> <script type="text/javascript" src="output/add_event.js"></script> </h
リンクによる意味付け <a href=“http://vosegus.org/guideline” rel=“tag”>html</a>のように記述。 licence
ディレクトリ構造 ディレクトリ構造、ファイル構成は案件毎に最適な方法を検討 公開ファイルと公開不要なファイル（SASS や node_modules など）は明確に分ける 特に理由がなければ下記の形にし、読み込み順とスタイルの優先度に整合性がとれるように心がける root/ ├── dist/ └──index.html └──assets/ └──css/ └──images/ └──js/ └──lib/ └── src/ └──sass/ └──style.scss └──foundation （基本的となるスタイル） └──_global_var.scss └──_mixin.scss └──_reset.scss └──_font.scss └──layout （ヘッダ、フッタ、共通ナビ、カラム構造） └──_flex.scss └──_float.scss └──_nav-ma
GitHub ディレクトリ構造 ディレクトリ構造、ファイル構成は案件毎に最適な方法を検討 ただし公開ファイルと公開不要なファイル（SASS や node_modules など）は明確に分ける 特に理由がなければ下記の形にする root/ ├── dist/ └── index.html └──css/ └──js/ └──images/ └── src/ └──sass/ └──style.scss └──_var.scss └──_mixin.scss └──_header-footer.scss └──_compo-list.scss └──_compo-table.scss └──_compo.scss └──_single-propery.scss └──_animation.scss 基本ルール 命名規則 ID名、クラス名、ファイル名で単語をつなぐ場合は -（ハイフン）を使用親要
バージョン情報(ナンバー,日付,編集者,編集したドキュメント) ver0.4.1 2008/10/9 azuma Add Cardinal rule。 ver0.4 2008/8/11 azuma default.cssをreset.cssに名称変更。 ver0.4 2008/8/11 azuma Templateを廃止。DesignModuleに統一。 ver0.4 2008/8/11 azuma cssの設計を変更(common.cssとpages_layout.cssをskin.cssに統合) ver0.4 2008/8/11 azuma Add Microformats reference(Micorformatsの記述に合わせてid class名を大文字区切りから“-”区切りに変更) ver0.3 2008/5/2 azuma Add XSLT reference ver0.2.
ｊａｖａｓｃｒｉｐｔを使って文字サイズを変更できるサイトというのが最近増えてきました。 アクセシビリティの面でも大事なことで、これは大事だ、と思って自分でもやってみました。 ただ、なかには文字サイズを固定しなければいいだけじゃないか、というひともいるかもしれませんが、それはいろんなレベルのリテラシーのユーザーがいることを考えて、親切な機能はつけておくにこしたことはないじゃないかということで。 また、文字サイズを切り替えるだけでは簡単でつまらないのでcookieを扱って、ページ遷移、リロードでも切り替えたcssが保持されるようにしています。 いろいろ調べてみると、どうやらIE,Operaなど各ブラウザ毎にcookieの扱いかたに微妙に違いがあるということで、そこはブラウザ毎の切りかえが必要なようです。 でも切り替えなんかめんどくさいので、そこはcookieを簡単に扱える便利なライブラリをつか
例のやつです。前から置いてはいたのですが、classが不要なように書き換えました。 CSSの疑似要素:focusに対応したブラウザにはinput[type=text]:focus,textarea:focusで背景色をかえています。 IEは未対応なので、JavaScriptを使い、getElementsByTagNameでinputとtextareaを取得し、それらのlengthでループさせ、type == 'text' ならば event.srcElement.classNameでclassをセットしスタイルを変更しています。 入力欄のハイライト NOだす。 Webでもマーケッターは広告屋よりかとも思ったけれど、それもまた一つの手段でしかないと思う。 ブランディングという意味でも、既存の広告はビジュアル、音などを繰り返し使用し、刷り込みを行うことでそれを行ってきたけれど、Webの場合は情
webサイトは無駄にページを増やさないことが大事ではないのだろうか。 ページが増えれば入口も増えるということで、もしかするとseo的な効果があるのかもしれないけれど、結果としてユーザは余計なクリック数にわずらわされるので、逆にいかにして全体のページ数を減らすのか? がユーザビリティの向上に繋がると思う。 特に商品のための特設サイトなんかでは、その傾向が強く、究極1枚にまとめてしまった方が情報が一覧できて便利だったりする。 カテゴリ分けするにしても、各ページごとにしっかりしたコンテンツが用意できないのであれば、いっそカテゴリでわけるのではなく、デザインの方でしっかりとした情報のメリハリをつけたほうが、より優れた、使い勝手の良いサイトができるんじゃないんだろうか、ページ分予算も減るかもしれないし。なんてことを最近思った。
このページを最初にブックマークしてみませんか？
『Hello kangaroonote』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
