ytkwsmのブックマーク / 2013年6月18日

ytkwsm id:ytkwsm

2013年6月18日のブックマーク (18件)

[HTML5]HTML5にmain要素が追加された…(現在HTML5のタグは109)
調べる。備忘録としてwebやデザインについて調べたり新しく知ったことなどを書き残していくカテゴリです。これまでのあらすじはい、特にネタがあるわけでもないんですけどHTML5のCR(勧告候補)が先日更新されまして、めでたくHTML5にmain要素が追加されました。hgroupは実際に消えましたねー。これまでの流れは HTML5のタグって現時点(2012年8月)でいくつあるの？ ― #HTML5のタグは百八つまであるぞ …？ ― – WEBCRE8.jp 【悲報】HTML5のタグが109個になってる…(またはdialog要素について)【今更】 – WEBCRE8.jp 【108厨歓喜】HTML5のタグ，108つに戻るってよ【らしい】 – WEBCRE8.jp といった感じです。108とか言いだしたのが運のつき…ｗ main要素とは以下はmain要素の仕様。 The main ele
ytkwsm 2013/06/18
tag

html5
リンク
[HTML5]datalist要素の基本的な使い方・応用(WordPressで全タグを検索の入力候補にしたりする)
調べる。備忘録としてwebやデザインについて調べたり新しく知ったことなどを書き残していくカテゴリです。 datalist要素とは HTML5で新しく加わったdatalist要素は、list属性で紐付けられたinput要素にユーザーが入力する際に、datalist要素内に置かれたoption要素の値をその入力候補として表示させる為の要素です。 datalistタグ内に入力候補としたいワードをvalue属性に持つoptionタグを複数記述します。 <form method="get" action=""> <input type="text" list="tools"> <datalist id="tools"> <option value="手裏剣"> <option value="まきびし"> <option value="煙玉"> </datalist> <input type="s
ytkwsm 2013/06/18
html5

attribute
リンク
[webデザイン]スキュアモーフィックデザインとフラットデザイン、リアリズムとミニマリズム - WEBCRE8.jp
私はデザイナーとして、流行りのデザインにとても詳しいという訳ではありません。今気持ちはHTML5やwebサービスの作成等、どちらかというとテクノロジーの方に興味が強くなってしまっていて、インプットの種類もかなりそっち寄りに…デザイナーと名乗るのがちょっと恥ずかしくなってきてますｗで、とはいえデザインとかデザインに関する事を考えるのはすごく好きだったりします。今回は最近読んだ記事のいくつかで、ここのところ流行りの兆しを見せているフラットデザイン、そしてその対極とされているスキュアモーフィックデザインについて色々考えていたことの理解が進み、ある程度頭の中で整理できたので、ちょっと記事にしてみようかなと思ったわけです。言葉の定義で戦うのはあんまり好きじゃなかったりしますけど、この辺りの事を頭に入れた上で話をするのは有意義なのではないかなと思ってます。解釈のおかしなところなどご指摘ありました
ytkwsm 2013/06/18
Sukeuomorphic

flat design

sukeuomorphic design
リンク
[デザイン]インフォグラフィックコンテンツについての情報源や話題まとめ
インフォグラフィックとはまずはWikipediaから。インフォグラフィック(infographics)は、情報、データ、知識を視覚的に表現したものである。インフォグラフィックは情報を素早く簡単に表現したい場面で用いられ、標識、地図、報道、技術文書、教育などの形で使われている。また、計算機科学や数学、統計学においても、概念的情報を分かりやすく表現するツールとしてよく用いられる。科学的情報の可視化にも広く適用される。と説明されています。ざっくり言えば数値などの情報をぱっと見でわかるようにまとめなおしたグラフやピクトグラムの集まり、というようなものですね。評価されているインフォグラフィックは単に視覚的にわかりやすいだけでなく、グラフィックと名の付く通りビジュアル的にも良く工夫されていたり、面白かったり美しい見た目を備えていることが多いです。当然これは作り手の自己満足という訳ではありません
ytkwsm 2013/06/18
information graphic

information design

visual design
リンク
[HTML5 入門]HTML5要素に指定できる属性の分類、書き方の違いについて
http://roadstohtml5.com/html5karuta/ HTMLの各要素には属性というものがあります。これもまあまあたくさんあるので全部解説するわけではないんですけど、まずこの記事ではどういう種類のものがあるのかを確認してみましょう。 …といいつつこれは私の備忘録でもあるんですがｗ興味ある人はお付き合いください★ HTMLの属性とは HTMLにおける属性(Attribute)とは、HTMLで各要素のタグに指定する設定の事です。例えばハイパーリンクであるa要素のaタグにはhref属性を指定します。href属性の属性値(value)にはURL等が入りますね。要素自体のタグ名の後に続く一つ一つが属性です。そしてその属性には、予め指定できる属性値が一つに決まっているもの、いくつかに決まっているもの、ルールが決まっているもの、なんでも指定できるものがあります。グローバル属性(
ytkwsm 2013/06/18
html5要素の属性について

html5

attribute
リンク
デザインを言語化しようよって話
私は理詰めも、感情的な訴えかけもどちらも好きで、シンプルでミニマルな機能重視のデザインもカッコいいと思いますが、五感を刺激し、相手を楽しませるグラフィカルでインタラクティブなデザインも好きです。飾るのがデザインではないと言われても、やっぱり装飾の力も信じています。なんにせよ、それを期待されているならやらないといけないですしねｗ更に言えば私はフラッシュサイトも大好きです。見たいサイトなら重かろうがなんだろうがワクワクしながら待ちます。映画上映の前の様に。バナーならバナーの絵柄や文字、キービジュアルなら何を持って見る人の意識を引きつけるか。アニメ―ション、世界観、その全てもやはりデザイナーの腕の見せ所でもあり、webサイトへの没入感、愛着を持たせると思うのです。そう思うからこそ、私はデザインに取り組む人、色んなスキルや価値観を持っている人と、デザインが好きな人と話がしたい。そう思っていま
ytkwsm 2013/06/18
design
リンク
Sublime Text2との恋を見送り、Adobe Bracketsに巡り会いました
永らくHTMLエディターを移ることなく過ごしてきたのですが、先日Adobe Bracketsの記事を見て一目ぼれし、インストールしてみました。ごめんな、Sublime Text…！どうもハマれなかったSublime Text 私は普段HTMLを書くときに結構適当なエディターを使ってきたんですが、いい加減ちゃんと効率のいい、Zen-Codingにも対応してて、HTML5の予測変換も出来てSassに対応したエディターを使わなきゃなーと思ってました。そして現れたのがSublime Text。 ”恋に落ちるエディタ”「Sublime Text」完全入門ガイド！ | 株式会社LIG 確かに、知人友人のweb制作者達がこいつの魅力にバッタバッタとやられてました。私も望んでいる要件を満たしているこいつが気になってはいました。恋する速度を爆速化。Sublime TextでZen-Codingを使用
ytkwsm 2013/06/18
気になってたBracketsの操作法

editor

adobe

develop
リンク
[web制作]humans.txt ― webサイトに基本情報を設置しよう
robots.txtとは robots.txtは、検索エンジン向けの情報を記述したテキストファイルで、書式に従って書くことで検索エンジンのクローラーにクロールして欲しくないページを知らせたりします。というか、まあ基本的に出来ることはそれのみですね。例えば、 User-Agent: * Disallow: / こうrobots.txtに書くとルート以下全てのファイルへのクロールを禁止します。決められた書式があって、それに沿った形で書かれていればクローラーはある程度いう事を聞きます。 humans.txtとは robots.txtがロボットの為の説明であるなら、humans.txtは人間の為の説明です。人間がサイトについて受け取りたい情報としては誰が書いたのか、何を使って書かれたのか、というようなことでしょうか。そしてこのhumans.txtを設置する事を推奨するサイトもあり、面白いなーと
ytkwsm 2013/06/18
web developer
リンク
jQuery Pin
Want a sticky left menu? Just like the Webpop documentation? Pin it and relax. Macaroon donut tiramisu gummies. Jelly halvah oat cake pastry lemon drops apple pie tart. Muffin tart donut tiramisu. Lollipop tiramisu danish cupcake topping macaroon powder. Topping candy carrot cake halvah tiramisu sesame snaps donut lollipop jelly beans. Cotton candy biscuit jelly-o jelly-o. Gummies jelly beans croi
ytkwsm 2013/06/18
iOSとかinstagramのUIっぽいセクション毎のfixed

component control

jquery

plugin
リンク
「怒り顔」が増えたレゴ・フィギュア：20年間の調査
ytkwsm 2013/06/18
research

LEGO
リンク
Blurjs.com - For Sale
Project Title Use this area of the page to describe your project. The icon above is part of a free icon set by Flat Icons. On their website, you can download their free set with 16 icons, or you can purchase the entire set with 146 icons for only $12! Client: Start Bootstrap Date: April 2014 Service: Web Development Close Project Title Use this area of the page to describe your project. The icon a
ytkwsm 2013/06/18
透過の要素をぼかせて良い感じ

visual effect

javascript
リンク
JavaScript Samples フリーサンプル - eWeb
JavaScriptは、ホームページに様々な機能、効果を加えることができるプログラムです。サンプル・プログラムはご自由にカスタマイズなどをしてお使いください。
ytkwsm 2013/06/18
javascript

document
リンク
JavaScript - MDC
JavaScript チュートリアル初級編 JavaScript の基礎 JavaScript の第一歩 JavaScript の構成要素 JavaScript オブジェクト入門 JavaScript ガイド入門編文法とデータ型制御フローとエラー処理ループとイテレーター関数式と演算子数と日付テキスト処理正規表現インデックス付きコレクションキー付きコレクションオブジェクトを利用する Using classes プロミスの使用 JavaScript 型付き配列イテレーターとジェネレーターメタプログラミング JavaScript モジュール中級編クライアントサイド JavaScript フレームワーククライアントサイド Web API Language overview JavaScript のデータ構造等値比較と同一性プロパティの列挙可能性と所有権クロ
ytkwsm 2013/06/18
モジラのjavascriptドキュメント

mozilla

javascript

document
リンク
「iOS 7」論争とデザインの本質：ジョン・マエダ
ytkwsm 2013/06/18
GUI

thinking

flat design

UI

iOS

innovation

design
リンク
設置サンプル：YouTube IFrame API：プレーヤーの複数配置
2つの動画を配置し、再生・一時停止の再生ステイタスを同期させる。どちらか一方のプレーヤを一時停止すると、もう一方のプレーヤーも一時停止します。動画が最後まで再生された時のステイタスは一時停止、リプレイした時のステイタスは再生となります。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>設置サンプル：YouTube IFrame API：プレーヤーの複数配置</title> <link rel="stylesheet" type="text/css" href="lib/global.css" /> <style> #playerbox { width:700px; margin-bottom:10px; clear:both; float:none; overflow:hidden; } #playerbox if
ytkwsm 2013/06/18
複数のプレイヤー同時再生、停止

API

javascript

YouTube
リンク
ReFlowの原因とマークアップの最適化 « NAVER Engineers' Blog
自己紹介ネイバージャパンのUIT(User Interface Techno logy)チームの裵完理(ベワニ)です。概要 CSSやJavaScriptを使って複雑なデザインや動的なページを実装しているサービスが増えてきていますが、速度低下などの問題が発生しやすくなっています。これを100%直すことは難しいですが、改善するにはブラウザレンダリングプロセスを理解する必要がありますので、理解した上で改善方法を探してみましょう。ブラウザレンダリングプロセスの理解ブラウザの基本構造 User Interface – アドレスバー、戻る・進むボタン、ブックマークメニューなど、メインウィンドウに表示(document)されるページ以外の部分 Browser Engine – UIとレンダリングエンジン間のアクションを制御するもの Rendering Engine – リクエストしたコンテンツを表
ytkwsm 2013/06/18
ブラウザのレンダリングプロセスについて

javascript

markup

dom

performance

browser

optimization

html

css
リンク
Kyoto.js #7 何がMVCをつなげているのか
main.md 何がMVCをつなげているのかクライアントサイドMVC buzzwordっぽい Backbone.js Angular.js Knockout.js Ember.js とか使ってますか? はてなでも一部本番運用/社内向けツールではよくみるクライアントサイドMVCフレームワークを利用するとMVCによる設計方針を簡単に使うことができるようになる MVC!MVC! Ruby on Rails Django Amon2 WebアプリケーションのMVCはここでは忘れろ!!! MVCパターンって何が良いの? いつもの図 MVC consists of three kinds of objects. The Model is the application object, the View is its screen presentation, and the Controller
ytkwsm 2013/06/18
javascript

mvc

js

backbone.js
リンク
Rails で、Controller に定義されている action を一度に取得する方法はありますか？ - QA@IT
平素よりQA＠ITをご利用いただき、誠にありがとうございます。 QA＠ITは「質問や回答を『共有』し『編集』していくことでベストなQAを蓄積できる、IT エンジニアのための問題解決コミュニティー」として約7年間運営をしてきました。これまでサービスを続けることができたのは、QA＠ITのコンセプトに共感をいただき、適切な質問や回答をお寄せいただいた皆さまのご支援があったからこそと考えております。重ねて御礼申し上げます。しかしながら、エンジニアの情報入手方法の多様化やQAサービス市場の状況、＠ITの今後のメディア運営方針などを検討した結果、2020年2月28日（金）15:00をもちましてQA＠ITのサービスを終了することにしました。これまでご利用をいただきました皆さまには残念なお知らせとなり、誠に心苦しく思っております。何とぞ、ご理解をいただけますと幸いです。 QA＠ITの7年間で皆さまの知識
ytkwsm 2013/06/18
javascript

tips

array
リンク
- 2013年6月19日
- 2013年6月18日
- 2013年6月17日