1stWebDesigner • Helping You Build a Better Web - For Web Professionals
Learn Web Design Retro CSS Text Effect: A Step-by-Step TutorialCSS offers an array of tools that, when used correctly, can improve the visual experience on your website. In this tutorial, we’ll explore a straightforward way to design a retro text effect with pure CSS. The approach, while not overly complex, yields a visually appealing result and serves as a… UX surveys can be pivotal tools for des
DataURI Maximum length - latest log
DataURI サポート状況: http://caniuse.com/datauri Wikipedia: http://en.wikipedia.org/wiki/Data_URI_scheme Browser Max length Source IE 7 0 IE 8 32KB - 1 http://msdn.microsoft.com/en-us/library/cc848897%28VS.85%29.aspx IE 9 4GB http://msdn.microsoft.com/ja-jp/ie/ff468705.aspx#_DataURI MobileSafari 3.x 128KB ? http://blog.clawpaws.net/post/2007/07/16/Storing-iPhone-apps-locally-with-data-URLs#c1989348 Chro
HTML5要素のブラウザー実装状況を調べてみた (1/2)
次世代Web標準規格として注目されるHTML5。2011年5月25日にはW3CがHTML5の最終草案を発表し、標準化のプロセスはいよいよ大詰めを迎えている。 とはいえ、実際にWebサイト制作に使えるかどうかは、結局のところブラウザーの実装状況次第。そこで、HTML5の各要素（タグ）について、主要ブラウザー（Internet Explorer、Firefox、Google Chrome、Safari、Opera）の実装状況を調べてみた。 ターゲットブラウザーにあわせてコーディングすることを考慮して、主要なブラウザーで共通して使えるタグ、特定のブラウザーで使える・使えないタグに分類した。 この記事の見方 要素名の下にあるテキストは要素の意味を表す IEはInternet Explorer、ChromeはGoogle Chromeの略 本調査は2011年11月に実施。IE以外は調査時点での最新バ
HTML5 でやりがちな間違い
HTML5 Doctor で 「Avoiding common HTML5 mistakes」 という記事が上がっていましたので稚拙ではありますが翻訳など。HTML5 でマークアップする際にやりがちな間違いをいくつか挙げて、さらに正しいマークアップ例も紹介くれていますので、参考にしてみてはいかがでしょうか。 HTML5 Doctor で 「Avoiding common HTML5 mistakes」 という記事が上がっていましたので稚拙ではありますが翻訳など。HTML5 でマークアップする際にやりがちな間違いをいくつか挙げて、さらに正しいマークアップ例も紹介くれていますので、参考にしてみてはいかがでしょうか。 Avoiding common HTML5 mistakes ： HTML5 Doctor 翻訳といっても要約みたいな感じですので、書いてあることをそのまま日本語にしたものではあり
WebSocket＆Canvas パフォーマンス最適化のコツ (1/4)
Handy Stadiumを公開してから1カ月が経ちましたが、もっとたくさんの人に遊んでもらえるようにマインドフリーでは日々改良を続けています。 改良点その1： Chrome ウェブストア対応 iPhone 4専用だったHandy StadiumをGoogle Chromeにも対応させ、Chrome ウェブストアに公開しました（インストールは無料）。 ウェブストアでの公開にあたってChrome向けに最適化したデザインを用意し、サーバーサイドでユーザーエージェントを識別して切り替えています。 Chromeに対応するにはゲーム画面サイズの調整やタッチ操作からクリック操作への変更が必要ですが、今回はJavaScriptとCSSを用意するだけで済みました。デバイスごとに開発言語や技術が変わるネイティブアプリと違い、OSやデバイスが変わっても同じ技術で開発できるのはWebアプリの大きなメリットです。
連載: IBM Watson Workspace #鬼わか アプリケーション開発: 第 7 回: IBM Watson Workspace で AI を利用したアプリ連携の実現 #鬼わか 解説（前編）
HTML�5 differences from HTML�4
About this specification This specification is like no other — it has been processed with you, the humble web developer, in mind. The focus of this specification is readability and ease of access. Unlike the full HTML Standard, this "developer's edition" removes information that only browser vendors need know. It is automatically produced from the full specification by our build tooling, and thus
08. video／audio要素のエラーや状態を知る » HTML5 -
video／audio要素は、メディアデータの読み込みや再生を行う中で、さまざまに状態を変化させる。これらの状態を正確に把握することは、ユーザーにとって使いやすいWebアプリケーションを構築する上で欠かすことができない。video／audio要素の状態を知るためには、要素のDOMオブジェクトが持つ以下のようなプロパティにアクセスする。 error 発生したエラー。エラーが発生していない場合はnull。 seeking 指定された再生位置に移動中かどうか。 paused 一時停止中かどうか。 ended 再生が終了しているかどうか。 networkState ネットワーク接続の状態を表す整数値。 readyState メディアデータのダウンロードの進捗を表す整数値。 error、networkState、readyStateは状態に応じてさまざまに値が変化する。 次の頁ではこれらのプロパテ
Video.js - Make your player yours
Video.js is a web video player built from the ground up for an HTML5 world. It supports HTML5 video and modern streaming formats, as well as YouTube and Vimeo. It supports video playback on desktop and mobile devices. The project was started mid 2010, and now has hundreds of contributors and is used on over 450,000 websites. Plays anythingPlays “traditional” file formats such as MP4 and WebM, but
Learn web development | web.dev
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
Indexed Database API について
Indexed Database API（以下、indexedDB）について、これまで追いかけてきた情報をとりまとめたので公開します。 indexedDBは当初は仕様が固まっておらず、サンプルコードも当然のように動かなかったので（今も動きませんが…）、検証するにはかなりハードな状況でした。最近になってどうにか動くようになってきたので、@komasshu さんと色々やり取りしながら一通りの動作を確認しました。 現時点で利用できるブラウザは Chrome 9 以降 または Firefox 4 beta 8 以降となります。まだまだ仕様は動いていますので、検証の際は、なるべく最新の開発版を使うことをおすすめします。本エントリーでは、Chrome 9 beta 、Firefox 4 beta 8 にて検証します。また、資料は、2011年1月20日時点の W3C Editor's Draft を参照
AfterEffects(Mocha)とWEBサイト(HTML5)の連携
レコメガール 簡単に説明すると、ブラウザ上で動画の中に画像が合成されるWEBサイトです。 映像製作とは違い、ちょっと特殊な使い方だと思いますが、インタラクティブなサイトを作る際の考え方としてお役に立てれば幸いです。 概要 自動でWEB上の可変的な動画広告（デジタルサイネージ）のようなものを作成できないかと考え、動画のなかで商品やお店などがお勧めされるサイトを作りました。動画の中の女の子が、お勧めものものを紹介してくれます。 それぞれの項目で、場所や興味がある言葉などを入力することで、APIで引っ張ってきた画像や文字が動画に合成され再生されます。アニメーションから動画合成まで、HTML5、CSS3で作成しております。 ここではAfterEffects(Mocha)を使った動画と画像が合成される部分の作り方を、解説いたします。 素材準備 まずは、使用する動画を用意します。 カメラは Panas
HTTP と WebSocket でセッションを共有する
こんにちは、 nodejs.jp の @masahirohです。 JavaScript Advent Calendar の最終日です。クリスマスだけど空気を読まずに Node.js の地味な話をします。ごめんなさい。 さて、 Node.js では Socket.IO を使えば、 WebSocket を使ったアプリケーションを割と簡単に作れるわけですが、これを Web フレームワークと一緒に使う場合、どうやってセッションを共有したらいいんだろう？とふと思いました。ユーザ名とパスワードをメッセージにのせたらいいんですかね？ いや、セッション ID をメッセージにのせればいいのかな？ うーん・・と思いながら Github をうろうろしていたら SessionWebSocket というアプリケーションを見つけました。セッション管理機能を追加する方法が結構参考になったので、コードリーディングをします
githubのアレ(history.replaceStateとかhistory.pushStateの話) - 愛と勇気と缶ビール
会社で下の記事についてリマインドしてもらって、なんとなく気になっていたことを調べたメモ。 http://webtech-walker.com/archive/2010/12/06160539.html 記事を読んで、history.replaceState(null, "title", "/new.html") とかやると遷移なしでページのcontentも勝手に置き換わるのかなー、だったらあのアニメーションはどこで発火してんだ？とか考えていたがそもそもreplaceStateの動作について勘違いしていた。 要は、次のようなhtml書いてボタンをクリックしても、historyの先頭が置き換わるだけでページ自体には何も起こらない。(ただしlocation.hrefは置き換わっており、reloadすると/replace.htmlにいく) <!DOCTYPE HTML> <html lang="e
【師走なので、簡潔に】iPhoneのwebアプリを作成する際にで使えそうな機能について簡単にまとめてみた
こんにちは、橋本です。 早いもので、2010年も残すところあと10日。 アシアルの営業日は残すところあと２日です。 こんな忙しいときにブログ当番が回ってきて、目がまわりそうなのですが、 弱音を吐いていても仕方ないので、さくっとブログ書いちゃおうと思います。 さて、今日はiPhoneのwebアプリを作成する際にで使えそうな機能について、 使い方を簡単にまとめていきたいと思います。 内容もコードも簡潔に。師走なので。 1. 位置情報の取得 iPhoneのsafariから位置情報を取得するときには、GeoLocationAPIを使用します。 サンプルコードを以下に <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title>location sample</title> <script type="text/java
canvas要素 + Javascriptで作る、動的コンテンツ
HTML 5 + Javascriptで作る動的なコンテンツ 前回の授業では、HTML 5について、その成り立ちや特徴を解説した上で、新しい構造化のための要素について解説しました。また、あわせてCSS3によって格段に進歩した表現力について実際にサンプルページを作りながら解説しました。 今までは、Webページで動的に図や画像やアニメーションを描画するにはFlashが代表的な選択肢でした。しかし、ここ数年でその状況が大きく動きつつあります。Flashに代表されるような動的なコンテンツが、専用のプラグイン無しに、HTMLの要素とそれと連携するスクリプトだけで実現できるようになりつつあるのです。こうした技術は、今後のWebの動向を大きく変える可能性を秘めた技術として脚光を浴びています。 HTML 5で動的に画像やアニメーションを生成するためには、canvas要素という新規に導入された要素と、can
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - IBM/japan-technology: IBM Related Japanese technical documents - Code Patterns, Learning Path, Tutorials, etc.
IBM Developer
https://csswarp.eleqtriq.com/
http://japan.internet.com/developer/20100302/26.html