タグ

ブックマーク / kachibito.net (30)

  • 穴埋め問題を解くような形式でPHPを学べる勉強サイト・(un)classroom

    プログラミングを学べる、みたいなサイト が凄く増えている印象ですが、また似たよ うなサイトを見かけましたのでご紹介です。 実践しながら学べるサイト・(un)classroom。 実践といっても、穴埋め問題っぽい感じで、 手を動かして学べるようになってるだけで すが。 こういうサイト、日でも増えていく気もします。需要が高い事は明白ですし、このように前例が出来ればインスパイアされるものですのでいずれ増えてくるんじゃないでしょうかね・・ まだ出来たばかりでPHPの基礎とFacebookアプリの作り方しか教室が無いんですが、今後に期待という事で・・ 最初の授業です。「PHPは<?phpで始まって?>で終わらせます」とあります。基礎のキですね。で、右側のsubmitで実行してみましょう、といった流れで進んでいきます。 で、2ページ目でレッチチャレンジ、という感じで穴埋めし、先ほどと同じようにsub

    穴埋め問題を解くような形式でPHPを学べる勉強サイト・(un)classroom
    richard_raw
    richard_raw 2012/04/08
    穴埋め問題は好きなので他の言語でも出ないかと期待しております。
  • 著作権放棄のレスポンシブWebデザイン対応CSSフレームワーク・ingrid

    シンプルで良さそうだったのでメモ。 パブリックドメインのCSSフレームワ ークです。レスポンシブWebデザイン にも対応していますし、グリッドレイ アウトにも利用出来るのでなかなか 汎用性があるのでは無いかなと。 ライセンスはCC0(クリエイティブコモンズ版のパブリックドメイン)で、著作権は放棄されていますので、気軽に使えますね。 凄く特殊な性能をもったフレームワークという訳ではありませんが、個人的には余計な物が備わってない方がありがたいのでカスタマイズしやすいです。 グリッドレイアウトにも対応しています。 以下、サンプルです。 Sample css/* UNITS These divider classes are set on .ingrid container --------------------------------------------------------*/ .in

    著作権放棄のレスポンシブWebデザイン対応CSSフレームワーク・ingrid
    richard_raw
    richard_raw 2012/03/31
    ふむふむ。
  • CSS3やHTML5などのコードを書く様子を再現し、徐々に 出来上がっていく様を見ながら学べる チュートリアルサイト・TheCodePlayer - かちびと.net

    一つの形として面白かったのでシェア。 実際にコードを書いていきながら徐々に 出来上がっていくさまを見ながら学べる チュートリアルサイト。動画のチュート リアルより見やすく頭に入りやすい気も しないでもないです。 こういう形で学べるのは面白いですねー。はじめてみるタイプのチュートリアルサイトです。よく、書いたコードがインタラクティブに反映されるサービスがありますが、そのチュートリアル版という感じ。 ブログ形式でチュートリアルを公開しています。 説明するより見た方が早いですね。以下のようなチュートリアルです。Play Walkthroughをクリックするとコードを打っているのが分かります。右はビューエリア。 Make a simple cloud in CSS3 こういう発想は全然なかったですけど、Youtube等の動画で見るより分かりやすい気はします。動画は音声も使ええるのが魅力でしょうけど

    CSS3やHTML5などのコードを書く様子を再現し、徐々に 出来上がっていく様を見ながら学べる チュートリアルサイト・TheCodePlayer - かちびと.net
    richard_raw
    richard_raw 2012/03/25
    なんかチラチラするけど面白いですな。
  • ノンデザイナー向けのスライド・「Webデザインのセオリーを学ぼう」 - かちびと.net

    既出なんですが良かったので。空いた時間に、気になっていたスライドがあったので拝見しましたが、内容が素敵だったのでご紹介します。ノンデザイナーさん向けのデザインセオリーのスライドです。 Webデザイナーが読んでおきたい、最近公開されたWeb系のスライドっていうので知ったんですが、どちらかというとWebデザイナーさんなら知ってて当たり前じゃないかという内容かもしれません。 スライドの作成者さんのブログでもノンデザイナー向けの講義向けのスライド、とありました。→福井高専でノンデザイナー向けの講義しました デザインとアートの違い、なぜデザインが必要なのか、Webデザインとは、などなどが解説されています。Webデザイン論では必須の導線、レイアウト、情報のグルーピングにもしっかり触れてくれています。Webデザインには理由がある、というのが分かるかと思います。(「意味」って言っちゃうと語弊がありますよ)

    ノンデザイナー向けのスライド・「Webデザインのセオリーを学ぼう」 - かちびと.net
    richard_raw
    richard_raw 2012/03/06
    あとで観る。
  • 15秒でHTML5のテンプレを作成出来るWebツール・InitializrがTwitter Bootstrap 2にも対応した模様です - かちびと.net

    InitializrっていうHTML5のテンプレ を15秒で作成出来る(らしい)ツール があるんですが、このWebツールが、 話題のTwitter Bootstrap 2にも対応 したみたいです。人気のフレーム ワークなのでありがたいですねー。 土曜日ですし、軽い話題。15秒でHTML5のテンプレが作れる!と謳うWebサービス・・InitializrがBootstrapに対応してます。これは地味に嬉しいんじゃないですかねー。 右側になんか増えてた!Bootstrapやたら人気ですしね。こういうのは嬉しいんじゃないでしょうか?Initializrはその気になれば当に15秒で作成出来るので使うといいですよ。性能とか特徴は使って実感してください。 作ってみた 試しに15秒で支度してみました。こんな楽でいいのかな・・・LESS版も選べるので設定項目は好みで設定してくださいませ。 因みに・・・ B

    15秒でHTML5のテンプレを作成出来るWebツール・InitializrがTwitter Bootstrap 2にも対応した模様です - かちびと.net
    richard_raw
    richard_raw 2012/02/19
    これは便利そう。
  • ゲーム感覚で楽しく学べる系Webサービスいくつか - かちびと.net

    ちょこちょこ見かけるので最近に なって見かけた、ゲーム感覚で 楽しく学べるWebサービス的なもの をご紹介。Webアプリのアイデア の参考にもなればなぁとの気持ち も込めて。 ゲーム感覚で学べる、みたいなWebサービスは昔からありますので、ここ最近見かけたものを中心に少しまとめてみます。暇つぶししながら学べるって考えるとお得かもしれませんね。 Web制作に関わるものが中心です。 Kern Type カーニングをゲーム感覚で楽しく学べます。ドラッグで文字詰めしてください。 Kern Type Shape Type ベジェ曲線を学べるサイト。デザイナーさんは勿論、非デザイナーさんもこういうのでデザインがいかに難しく時間がかかるものか理解できるのではないかと。こういうの体感しておくとデザインなんて安売り出来ないし、簡単に学べない事が分かるかと思います。 Shape Type Color — Me

    ゲーム感覚で楽しく学べる系Webサービスいくつか - かちびと.net
    richard_raw
    richard_raw 2012/01/27
    ColorとCodecademyが気になります。
  • Webサイトの制作スピードを、より向上させる目的で作られたスターターキット・99lime - かちびと.net

    結構参考になったので備忘録がてら ご紹介。Webサイトの制作スピードを より向上させるために、汎用的なUI を集めて、マークアップも綺麗な状態 で済むように設計されたスターター キット、というかフレームワークです。 制作スピードを向上させる目的で作られたHTML5フレームワークです。レイアウトだけでなく、汎用的なUIも備わっていて、class名1つ付けるだけでタブやスライドショーを実装出来るようになっています。 そういった仕様にする事で、シンプルで綺麗で可読性の高いソースを保てるように設計されていたりと、結構参考になるスターターキットですよ。フレームワークは自作してるので良い部分を組み込んでみようかなと思いました。 タブやドロップダウン、スライドショーなどを備えているだけでなく、class名1つで実装出来るようになっているので、綺麗なソースを保持する事が出来るようになっています。 いろいろ

    Webサイトの制作スピードを、より向上させる目的で作られたスターターキット・99lime - かちびと.net
    richard_raw
    richard_raw 2012/01/22
    これは有用そうなフレームワーク。
  • jQueryのカルーセル系プラグイン・Caroufredselだけで「こんな事も出来るよ!」をまとめたサイト・Cool Carousels - かちびと.net

    Caroufredselという、結構人気なプラグイン があるんですが、このプラグインの開発者が 応用例をサンプルソース付きでまとめてくれ ていましたのでご紹介。1つのプラグインで ここまで出来るってちょっと凄いですね。 もう少し軽量になってくれると嬉しいんです けど・・ カルーセル系プラグインの定番的なライブラリ、Caroufredselの応用例を開発者さん人がまとめてくれていました。もともと沢山例があったんですが、更に一歩進んだ使い方を紹介してくれています。サンプルはダウンロードできます。

    jQueryのカルーセル系プラグイン・Caroufredselだけで「こんな事も出来るよ!」をまとめたサイト・Cool Carousels - かちびと.net
    richard_raw
    richard_raw 2012/01/08
    何がどうカルーセル麻紀なのか分かりませんが多分単に回転木馬の意味でしょうか。
  • 商用も無料でリンク不要の日本語フォント・こども丸ゴシックと、無料で手に入るフォント配布サイトの早見表 - かちびと.net

    はんなり明朝の作者さんより新作の ご連絡がありましたのでご紹介です。 丸みのある可愛らしい丸ゴシックの 「こども丸ゴシック」。今回も商用 でも無料でリンクなども不要と、 太っ腹なご提供です。貢献者さんで すね・・・頭が下がります。 さて、またも商用利用OK・リンク不要の日フォントが登場です。いつもご連絡頂き有難う御座いますー! 現在漢字は創意製作中で、先行してひらがな、カタカナ、アルファベットをご提供頂きました。 かわいい丸ゴシックのフォントです。漢字は製作中とのことです。Twitterでフォロー(@typingart)しておくと見逃さないかもしれません。 テスト的に使って見ました。今年の漢字は「絆」なのでそんなニュアンス。コピーは思い付きです。手書き風のような丸みのあるフォントは人の声などを表すのに適してますね。子供や女性がターゲットのサイトで活躍してくれるかもしれません。漢字が出来

    商用も無料でリンク不要の日本語フォント・こども丸ゴシックと、無料で手に入るフォント配布サイトの早見表 - かちびと.net
    richard_raw
    richard_raw 2011/12/19
    築地二号がかっこいい……!
  • 覚えておくと地味に便利だと思える日が来るかもしれないjQueryのコードスニペット何個か - かちびと.net

    これならjQueryじゃなくてもいいんじゃ 無いか、っていう記事です。短くて使い やすいスニペットなんですが、まぁ用途 は人それぞれだと思うので適当に流して 下さい。自分が使いやすいようにまとめ たいだけです。 そのコードおかしいわーみたいなのあったらすいません。まぁその程度の記事です。というわけでいろいろとツッコミどころ満載かもですが、あんまり気にしないで下さい。じゃあ記事書くなよって話ですけどw デモの見方 jsfiddleというサービスを好んでよく使うのですが、あまり見慣れないかもなので一応デモの見方を。上図の○で囲った部分、Resultを押せばデモ画面に、再生ボタンでリロードします。 簡単なコードなので実践で使うにはもう少し工夫が必要です。また、jQueryの勉強にもなるかもしれません。jsfiddleはフォークできるので宜しければ改善や動作の勉強等にご利用下さい。 こういうスニペ

    覚えておくと地味に便利だと思える日が来るかもしれないjQueryのコードスニペット何個か - かちびと.net
    richard_raw
    richard_raw 2011/10/08
    参考にしたい。
  • iPhoneやAndroidのUIパターンを収集するシンプルで見やすいギャラリーサイト・Patterns of Design - かちびと.net

    いくつか同じようなギャラリーサイトは ありますが、こちらもなかなか見やすか ったのでメモ。スマートフォンのUIの パターンギャラリーサイトです。スマー トフォンに限らず、通常のWebサイトの パーツデザインの参考にもなりそうです。 特にスマートフォンのUIは細かい部分のこだわりが見られてとても参考になりますので見ておいて損は無いかと思います。 シンプルな作りです。パーツはカテゴリで分けられていて探しやすいです。ちょっと重いかな・・ 例えばこちらはグリッドのカテゴリ。同じ幅、同じ高さという限られた空間の中で、様々な工夫が見られます。 クリックするとその場でLightbox風にポップアップします。iTuneへのリンクもあるので確認しやすいですね。 同じようなギャラリーサイト 似たようなサイトは沢山あるので合わせてチェックしてみてはいかがでしょう。 Mobile UI Patterns pttr

    iPhoneやAndroidのUIパターンを収集するシンプルで見やすいギャラリーサイト・Patterns of Design - かちびと.net
    richard_raw
    richard_raw 2011/10/04
    後でチェックしないと。
  • 地味に使えるCSS小技のメモ&サンプル集 - かちびと.net

    cssの小技的なテクニックが便利なので好きなん ですが、cssそのものが嫌いで覚えられないので カンペ的な記事を作ることにしました。便利な小技 は沢山あるんですが、特に自分が良く使いそうな Tipsをメモします。既に出回っている情報ばかりで 特に目新しい手法はありませんので何も期待でき ないです。 というわけで特にテーマも一貫性も無くて、ただ便利ってだけです。推奨されない方法もあるかもしれませんが、僕は細かいこと気にしませんのでそんな感じです。 内容も既出なのでお詳しい方にはお役に立てないですが、僕の個人的なメモなので適当に流して頂けると幸いです。 floatで並べたリストのセンタリング Sample01 コード .centered { position: relative; overflow: hidden; } .centered ul { position: relative; le

    地味に使えるCSS小技のメモ&サンプル集 - かちびと.net
    richard_raw
    richard_raw 2011/08/31
    white-spaceとかドロップキャップとか地味に役立ちそうです。
  • HTML5やcss3を使う際に見てるリファレンス的なサイトとか、使い勝手の良いツールとか - かちびと.net

    あまりに情報量が多くて混乱してきたので 自分用にまとめ。リファレンスとか、ちゃんと 実践で使えるツールを自分なりに厳選して まとめておきます。どうも、あっちこっちで あれが便利とかこれが便利だとか言われる と訳が分からなくなるのでそろそろ絞らない とですね。 というわけでお遊びではなく実践に役立ってる基的なリファレンスとか助けてくれるツールのメモなので目新しいものはありません。完全に自分用のまとめです。個人的には基礎用のサイトと、実践向けのツールやライブラリだけあればいいという感じです。 尚、css3/html5に関する情報だけを求めている&特に情報取得に急いでないならdotHTML5というサイト1つで事足りるかと思います。 ※W3Cは割愛でいいですよね チートシートとかリファレンスだけで基的にはいい感じですかね・・ HTML5 タグリファレンス マークアップもままならないほど慣れてな

    HTML5やcss3を使う際に見てるリファレンス的なサイトとか、使い勝手の良いツールとか - かちびと.net
    richard_raw
    richard_raw 2011/08/24
    html5.js使いたい。
  • 「ノンプログラマーのためのjQuery入門」のスライドが凄く分かりやすいですね - かちびと.net

    Twitterに流れてきたスライドがとっても 分かりやすかったのでブログでより多く の方に拡散。ノンプログラマー向けの jQueryの基講座。これからjQuery を使おう、という方は読んでおくと良さ そうですね。 ノンプログラマー向けにjQueryの基礎をスライド化してくれています。 @pocotan001さん作のスライドです。 このスライドを見ながらコーディングする、というより、基礎知識を頭に入れるのに適したスライドだと思いますので気軽にご覧になってみて下さい。ハードルがかなり下がると思います。 また、当ブログでもjQueryプラグイン等の情報を取りあえげていますので合わせてどうぞ。 jQueryのリファレンスサイトと入門書籍 [2011.09.21アップデート] よくアクセスいただくのでハブ的な役割くらいは果たそうと思います。 jquery / jQueryの家です。 jQuer

    「ノンプログラマーのためのjQuery入門」のスライドが凄く分かりやすいですね - かちびと.net
    richard_raw
    richard_raw 2011/08/24
    JavaScript始めないとなー。
  • jQuery Mobileを使う際に知っておくと役立ちそうなTipsや情報のまとめ - かちびと.net

    jQuery Mobileに関して少し整理したいので まとめました。JQMを使うときに知っておくと 便利そうなTipsとか情報とか。いくつか自分 の記事も含まれているのが若干アレなんです が、ご了承ください。内容はコードのみ、では なく、参考サイトなど一貫性無い感じですが。 整理するのが下手なもので一貫性に欠ける内容で申し訳ないですけど、jQuery Mibileを使ったWebサイト構築時のちょっとしたTipsや役に立つ情報などのまとめです。 ページ移動にAjaxを使わないようにする プラグインの前に記述。リンク単位でならマークアップでrel=”external”を、フォームはdata-ajax=”false”を加える。 <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script type="text

    jQuery Mobileを使う際に知っておくと役立ちそうなTipsや情報のまとめ - かちびと.net
  • CSS Regionsのように雑誌のような複雑なレイアウトを組めるライブラリ・Regions.js

    雑誌のような複雑なレイアウトをWebや 電子書籍でも組めるようにしよう、という 目的(かどうか分からないけど)で先日 W3Cで公開されたCSS Regionsをjsで 実装しよう、というもの。cssオンリーだと まだまだ時間かかりそうなのでjsの手を 借りて疑似体験しておくのも手ですかね・・ つい先日(2011/06/09)、W3CでCSS Regions Moduleが公開されました。CSS Regionsは、Adobeが提唱している、複雑なレイアウトを組むために要素間を繋いでテキストを自由に配置できるようにする、というものだそうです。 例えば、モニターの幅が狭い環境で閲覧した際に、余ってしまう要素内のテキストを次の要素に流し込めます。CSS Regionsに関してはPublickeyさんの説明が凄く分かりやすかったです。僕は存在すら知りませんでしt これに先行して実現したjsライブラリ

    CSS Regionsのように雑誌のような複雑なレイアウトを組めるライブラリ・Regions.js
    richard_raw
    richard_raw 2011/06/24
    多段縦組みがしたいですハァハァ。
  • 商用OK・無料でクレジット表記もリンクも不要!日本人の人物写真素材サイト・モデルピース - かちびと.net

    これはかなり重宝するのではないでしょうか。 日の人物写真素材が無料で商用OK,更に クレジット表記やリンクも不要のサイト・モデル ピース。人物写真は基的にどれも有料か、 あっても日人ではなかったりですが、こちら は無料ですし、国産のサービスなのでモデル さんはみんな日人です。 お友達のまさとさん(@makavelicom)に教えてもらいました。ご紹介するモデルピース以外にもいろいろまとめられてるのでチェックしてみてください [note]激安で日的な写真素材、レンポジサイト一覧[/note] 無料・商用OK・リンクもクレジット表記も不要で解像度も高いです。こんないいサイトがあったとは知りませんでした。足成とは別の選択肢としてかなり重宝しそうです。 日人の人物写真を専門に扱っていて、無料ながら商用OK、リンクもクレジットも不要とのこと。ありがたい。 数もかなり豊富 数が少ないかと思

    商用OK・無料でクレジット表記もリンクも不要!日本人の人物写真素材サイト・モデルピース - かちびと.net
    richard_raw
    richard_raw 2011/05/03
    仕事で使いたい素材集。
  • iPhoneやAndroid向けのJavaScriptフレームワーク・Wink Toolkitが割と良かったので日本語サンプル作った - かちびと.net

    iPhoneAndroidなどの人気の スマートフォン向けのJavascript製 フレームワーク・wink toolkitを触っ てみました。動作サンプルが豊富 で割と応用できそうだったので日 語でサンプルを作ってみました。 スマートフォン向けのWebサイトやネイティブアプリに使えそうなJavaScript製のフレームワークです。沢山の動作サンプルがあって、内容もとっても分かりやすかったので(完全ではないけど)日語サンプルを作成してみました。 スマホ向けのWebアプリ用JavaScript製フレームワークです。 動作サンプルを日語にしたのでお手持ちのiPhoneなどでサンプルを触りながら記事を読んでいただけると嬉しいです。 [note]お持ちでない場合でも、Safariでご覧頂くと同様の動作確認が出来ます。Chromeでも多少確認出来ました。また、デモ動画もいくつかありますので宜

    richard_raw
    richard_raw 2011/03/06
    こんなエフェクトが使えるとは……。
  • jQuery事始め・コピペに頼らず、基礎知識を理解して実際に動かしてみる - かちびと.net

    人気のJavaScriptライブラリ、jQueryもかなり 情報が増えました。僕の様に知識が無くても 簡単に動きのあるWebサイトや、更なるユー ザビリティの向上を可能にしてくれましたが、 いつまでもコピペではいずれ困る事になります。 その前にそろそろ基礎から学んでみませんか。 という訳で、jQuery事始め。さほど知識が無い僕が書くのも微妙なんですが、一緒に学んでいきましょう、という事でご了承下さい。内容は基礎中の基礎です。 いつまでもコピペに頼っていては、何か問題が起こったときに対応できませんし、そもそもコピペするならjQueryである必要はありません。 でもjQueryはすごく便利なので、ちゃんと使いこなしたいところですよね。この記事が、誰かが勉強し始める切欠になれば幸いです。 jQueryを使うには まず、jQueryを利用するには体を読み込む必要があります。方法は2つあって、

    richard_raw
    richard_raw 2011/02/22
    そろそろ始めてみますかね。
  • デスクトップっぽいUIをブラウザ上で再現するjQueryプラグイン・jDesktop

    ユニークなライブラリでしたのでメモも 兼ねてシェア。PCデスクトップのよ うなUIをブラウザ上で再現するjQuery プラグインです。特にWinのような、と かMacライクな、といったものではあり ませんが・・ご覧頂いた方が早いかと 思います。 正直、使い道あるのかな?とも思ったんですが、iPadのようなタッチデバイスのタブレットなんかで動作すればちょっと面白いこと出来そうな気がしますね・・ PCでアクセスした状態です。アイコンはドラッグで移動できます。デスクトップっぽいUIなので直感で操作できるのが最大の利点でしょうか。触っていただければ分かると思いますが、特にWin風でもMac風でも無い感じです。 アイコンはアクセサリーのようなコンテンツが用意されていて、それを起動するボタンです。上画像では電卓を起動しています。 ゲームなんかもあったり。 iPadでアクセスしてみた 気になったので試

    デスクトップっぽいUIをブラウザ上で再現するjQueryプラグイン・jDesktop
    richard_raw
    richard_raw 2011/01/12
    Web OSですか。/血走ってるこわい。