タグ

関連タグで絞り込む (0)

  • 関連タグはありません

タグの絞り込みを解除

DevelopmentとDesignとdevelopmentに関するHeavyFeatherのブックマーク (115)

  • WordPressでWebサイトを構築するまでの手順リスト - かちびと.net

    この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 私的なメモです。WordPressで個人的にWebサイトを構築したり、受注した際の手順リストをメモ。自分用のチートシートです。いつも何かしら忘れている気がするのでいつもやる事をぱっと見で分かりようにリスト化しておきます。※個人的な主観が入っています。 Todoソフト等はあまり使わないので当に私的なメモですが、これが誰かのお役に立てたら幸甚です。プラグインなども好みが有ると思いますのでご参考までに。。 [note]情報が古くなったので改正版としてアップデートしました。[/note] インストール DB作成 WP最新版をダウンロード wp-config.phpDBに合わせて変更 接頭語も変える(wp_ → example_) FTPソフトでサーバーにインストール ロ

    WordPressでWebサイトを構築するまでの手順リスト - かちびと.net
  • Mockingbird has Shut Down

    Mockingbird is no longer in operation. We’re hoping to open-source the code sometime in the near future. In the meantime, some simple alternatives, in a similar spirit to Mockingbird, are: Excalidraw: https://excalidraw.com TLDraw: https://www.tldraw.com If you need a more comprehensive mockup solution, you might want to check out the following: FigJam: https://www.figma.com/figjam/ MockFlow: http

  • IBMがWebアプリケーションのUIガイドラインとHTML/CSSのソースコードを公開

    業務アプリケーションがWebアプリケーションとして開発されるのは現在の大きなトレンドです。それに伴ってHTMLCSSによって業務アプリケーションの複雑なユーザーインターフェイスを構築する必要性が生じます。 しかし機能が豊富な業務アプリケーションのユーザーインターフェイスをHTMLCSSで構築するのはそれほど簡単ではなく、しかもそれをアプリケーション全体で統一し、優れたユーザビリティを実現するのはさらに手間のかかる作業です。 そうした業務用のWebアプリケーションのユーザーインターフェイスを構築するためのサンプルが豊富に含まれたガイドライン「IBM Lotus User Interface Developer Documentation」が、IBMから公開されました。 今回公開されたIBMのガイドラインは、同社のLotus製品群のユーザビリティを統一するための社内プロジェクト「One U

    IBMがWebアプリケーションのUIガイドラインとHTML/CSSのソースコードを公開
  • HTML5 を学ぶための情報源まとめ

    ちょっと更新サボりすぎでしたが、最近 HTML5 関連の話もとっても増えてきましたので、ここらで HTML5 に関する情報を集めるときに情報源として有益なサイトをまとめてみたいと思います。やはり、英語での情報が多くなってしまうので、英語能力が残念な私なんかは結構厳しいんですが、いくつか日語での情報源も挙げてみましたので、併せて見ておくといいと思います。 ちょっと更新サボりすぎでしたが、最近 HTML5 関連の話もとっても増えてきましたので、ここらで HTML5 に関する情報を集めるときに情報源として有益なサイトをまとめてみたいと思います。 やはり、英語での情報が多くなってしまうので、英語能力が残念な私なんかは結構厳しいんですが、いくつか日語での情報源も挙げてみましたので、併せて見ておくといいと思います。 ちなみに、XHTML 好きな私としては、XHTML5 で次のサイトリニューアルとか

    HTML5 を学ぶための情報源まとめ
  • デザイン・パターンとは何か

    先日のMVCの議論の際には、私自身いろいろと勉強させていただいたが、少し心配になったのは、「MVCの定義だって時代とともに変わる」「ウェブサービス用のMVCはSmalltalk時代のMVCとは異なるもの」「MVCなんか理解してなくてもアプリケーションが作れればいいじゃん」など、そもそも「MVCとは何か」どころか「デザイン・パターンとは何か」を理解していないんじゃないかと思われる発言が見られたこと。ということで、今日はデザイン・パターンについてひと言。 デザイン・パターンとは、(業界に蓄積されたノウハウに立脚した)何かを作る際の指針のこと。ソフトウェアに限らず、ものを作るときにはさまざまな(場合によってはお互いに矛盾する)要求条件や制約が課せられるわけだが、そんな時に過去にさまざまな事例を解決してきた先人の知恵を「パターン化」してノウハウとして身につけておけば、似たような事例に出会った時に効

  • O/Rマッピング技術の進化が皮肉にも助長している「えせMVC症候群」

    昨日の「Ruby on Railsの『えせMVC』の弊害」というエントリー。若干「釣り」の要素が含まれたタイトルが功を奏したのか、たくさんのフィードバックがいただけた。そんな中で見えて来たのは、この問題はRailsに限った話ではなく、業務用アプリケーションで使われているJavaや.Netの世界でもよく見られる問題だということ。 その「問題」とは、ActiveRecordに代表されるO/Rマッピングの技術の進化が、来のMVC(そしてオブジェクト指向そのもの)のメリットを無視した「えせMVC」な設計を助長している、という問題である。 ・MVCやオブジェクト指向を表面的にしか理解していないエンジニアが増えている(ここが根的な問題) ↓ ・SQLを自分で記述しなくて良いO/Rマッピングはとても魅力的(これはこれで別の問題を含んでいるが、このエントリーではあえて突っ込まない) ↓ ・O/Rマッピ

  • HTML5時代の「運営しやすいアーキテクチャ」の話

    増井君と二人でPhotoShareというサービスを立ち上げてもう15ヶ月になるが、いろいろと学んだことがある。その中でもつくづく思うのは、サービスを作り上げる段階よりも、運営のことを考えた設計が大切なこと。つまり、メンテナンスしやすい、テストしやすい、多少のミスをしても大丈夫、こまめなアップデートがしやすい、作業分担がしやすい、などなどである。 そんななかで強く感じるのは、「AJAXを見た目や使いやすさの面だけに利用するだけでなく、『運営しやすいサービス』を作るのに利用できないか」ということである。 私のイメージするアーキテクチャを図にするとこんな感じになる。 まず一番の特徴は、テンプレート等を利用したHTMLのダイナミックな生成をすべてやめて、データ(JSONもしくはXML)だけをダイナミックに生成するようにし、HTMLはスタティック・ファイルをサーバー側に置いておく(上の図で、CSS,

    HTML5時代の「運営しやすいアーキテクチャ」の話
  • https://vanillate.org/blog/wp-content/uploads/minecraftskin_02.jpg

  • CSS3 Generatorを作ってみた

    最近は、HTML5で遊んでばかりいる私。今回作ったのは、左の"CSS3 Generator"(Safari、Chromeなどのwebkitベースのブラウザーが必要)。もちろん、iPhoneでもちゃんと動作する(http://www.widgetpad.com/694/)。 ちなみに、HTML5関連のデモのアナウンスや、コメント、ヒントはwidgetpadというTwitterのアカウントでつぶやくので興味のある人はFollowをどうぞ。 【追記】ちなみに、ここでいうCSS3とは厳密な意味での「標準化されたCSS3」ではなく、「WebKitがいつのまにかスマートフォンのデファクト・スタンダードになってしまった結果できつつある、新しいCSSのデファクト」の意味なので要注意。"Box Shadow"が、"box-shadow"ではなく、"-webkit-box-shadow"なのはこれがまだ「We

  • 「テキストプロトコルは遅くないよ」という話 - kazuhoのメモ置き場

    「バイナリプロトコルは速い」「テキストプロトコルは遅い」という言説を、ときおり目にするけど、それって当なのか。個人的には、それって昔の話だと思ってる。 SMTP みたいな、ペイロードについてもターミネータ(とエスケープ)を使うプロトコル*1は確かに遅い。で、FTPプロトコルでは、大容量のデータを「高速」に転送するために、制御用のTCPコネクションと転送用のコネクションを分けたりしてた。 だけど、HTTPプロトコルは、テキストプロトコルだけど、ペイロードについてはターミネータを使わない。keep-alive を行う際には、Content-Length ヘッダ(あるいはchunkedエンコーディング)を使うことで、ペイロードのパース/変換処理を不要にしている。別の言い方をすると、テキストプロトコルだからと言って、バイナリプトロコルよりペイロードの処理時間が長くなるとは限らない。HTTP 以降

    「テキストプロトコルは遅くないよ」という話 - kazuhoのメモ置き場
  • モバイルサイトのWebデザイン15選 - かちびと.net

    この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 携帯、モバイルサイトの デザインってどうなってるのか 少し興味が沸いたのでモバイル サイトのキャプチャを取って アーカイブとしてまとめている モバイルデザインアーカイブさん から15のモバイルサイトで好きな デザインを15個厳選しました。 個人的なギャラリーとなっていますが、共感して頂ければ幸いです。キャンペーンサイトのデザインなどもあるので現在は確認出来ない事もあります。 FAT ONLINE SHOPPING 余計な情報を入れず、一番伝えたい事は画像にしてTOP絵にしています。 FAT ONLINE SHOPPING AEON Lake Town シンプルですが、画面の小さいモバイルサイトで情報を絞り込むのはかなりいいのでは。Flashで操作も軽快でした。 AE

  • サイト設計時のワイヤーフレームをサクッと作って画像も生成できる「MockFlow」

    サイトのモックアップ作成ツールと言えば、身近なところでFirefoxアドオンのPencilなどもありますが、それよりもパーツひとつひとつがリアルに再現されているところが特徴。しかし日語が通らないところはとても残念。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! サイトのワイヤーフレームを作成し、画像でエクスポートできる「MockFlow」「MockFlow」は、ウェブサイト設計時のワイヤーフレームをサクッと作成して共有できるオンラインソフト 日語は通らないものの、Firefoxアドオンと違って、どのブラウザでも対応できるところが便利です。 ワイヤーフレームの作り方 ↑これがワイヤーフレーム作成のUI。右メニューからパーツをドラッグで持ってくるだけで配置できます。 ↑文字が入っている部分をダブ

    サイト設計時のワイヤーフレームをサクッと作って画像も生成できる「MockFlow」
  • https://jp.techcrunch.com/2009/09/07/20090903creately-releases-its-simple-diagramming-and-design-tool-to-the-masses/

    https://jp.techcrunch.com/2009/09/07/20090903creately-releases-its-simple-diagramming-and-design-tool-to-the-masses/
  • https://jp.techcrunch.com/2009/09/02/20090901developers-be-warned-apple-has-apparently-trademarked-those-shiny-chat-bubbles/

    https://jp.techcrunch.com/2009/09/02/20090901developers-be-warned-apple-has-apparently-trademarked-those-shiny-chat-bubbles/
  • 知っておきたい使えるCSSテクニック25 – creamu

    Web Developer plusで、知っておきたい使えるCSSテクニックが紹介されています。 いくつかご紹介しますね。 ・テキストハイライト時の色を変更する SafariやFirefoxでテキストを選択した時の色を変更できる。コードサンプルは以下 ::selection{ /* Safari and Opera */ background:#c3effd; color:#000; } ::-moz-selection{ /* Firefox */ background:#c3effd; color:#000; } ・プリント時にページを指定箇所で分割する 以下のクラスを指定することで印刷時のページを分割できる .page-break{ page-break-before:always; } ・テキストの代わりに画像を表示する よく見られるSEOテクニック。ユーザーには画像を見せ、検索エ

  • きまぐれ日記: ファンに支えられるプロダクトとユーザにdisられるプロダクト

    世の中には熱狂的なファンに支えられるサービスやプロダクトがあります。 Appleファン、Googleファン、日産ファンといえばピンときますが、 Microsoftファン、Yahooファン、トヨタファンと言うとあまり聞きません。 ファンに支えられることは素晴らしいことですが、ファンが多いからといって プロダクトの完成度やクオリティが高いとは限りません。私がファンになるのは アイドルぐらいで、ソフトウェアに関してこれとってファンはないのですが (いやむしろありとあらゆるプロダクトを触ってみては〇〇はウンコと言っていますが...) 某製品の改善点をそのファンに伝えると「愛が足りない」とか 「そんな所誰が気にするのか」とかわされます。 あるプロダクトのファンになるかどうかは、中の人がどれだけカリスマ性があるかとか、 彼らの長期的なビジョンや理念がどれだけ魅力的かと言ったハイレベルなところで 決まり

  • 第65回 [図解]Webサイト構築プロジェクト・ワークフロー - Webデザイン エンジニアリング:ITpro

    今回は,Webサイト構築プロジェクトのワークフローを俯瞰してみたいと思います。実際にクライアントから声がかかる場面から納品,つまり開発案件の完了までを12の「ステージ」に分けて図解してみました。思考のプロセス/人的配置/タスク/ツールなども一緒に記しています。少し大きな図になってしまいましたが,ご参考になれば。 図は,一番上は「4つのステップ/3つのタスク/12の要素(第62回 持続可能なWebサイト開発を支える12の要素)」。その下は,人的配置をロール(役割)ごとに記述しています。その下は,大まかなタスクのレベルです。それぞれの期間内に処理すべき項目を列挙しています。その下が,「ステージ」。プロジェクト全体を12のステージに分類して作業内容を整理しています。基的には,その流れの順で進んでいきます。その下は,それぞれのステージのアウトプットのイメージで,更にその下にはよく使うファイルアイ

    第65回 [図解]Webサイト構築プロジェクト・ワークフロー - Webデザイン エンジニアリング:ITpro
  • Yahoo!検索の「ユーザーインターフェース設計」

    分業による効果 一般的なデザイン作業において、下記のようなデザイン作業の上流部分をごく限られた人数で行い、そこから先の展開部分を大人数で行う方法を取る場合が多いと思われます。 インタラクションの設計 ビジュアルの設計 主要要素のHTMLマークアップ・CSSコーディング設計 しかし、モジュールの概念を取り入れることにより、デザイン作業の上流部分から分業を行うことが可能になります。 作業者のスキルやサービスへのコミット具合によって、多少ぶれる場合もありますが、そこはサービスの全体的なルールや作業時の補助ツールによってコントロールを行うことが可能です。 そのため、モジュールの命名規則や運用ルールについては、あらかじめドキュメントを作成した上で、ある程度厳密に運用を行う必要があります。 コミュニケーションの効率化による効果 最初にインタラクションの設計時に命名したモジュール名や要素名を、ビジュアル

    Yahoo!検索の「ユーザーインターフェース設計」
  • ホンダ開発、簡単に装着できる「外骨格」:画像と動画で紹介 | WIRED VISION

    ホンダ開発、簡単に装着できる「外骨格」:画像と動画で紹介 2008年11月11日 サイエンス・テクノロジー コメント: トラックバック (0) Jason Sattler Photo credit: 田技研工業(以下同様、動画も) 田技研工業(ホンダ)のロボット工学オタクたちが、のように装着して身体を支え、関節を保護する「外骨格」を開発した。ホンダによると、工場の組立ラインでのケガを減らす効果が期待できるもので、さらに、高齢者の動きを楽にする用途も考えられるという。 この機器は、自転車のサドルをに取り付けたような外観で、脚の間にフィットする作りになっている。これを装着することで、歩く、しゃがむ、立つなどの動作が、股関節や膝関節、足首関節に余計な負担をかけることなく行うことができる。 ホンダはこの『体重支持型歩行アシスト』試作機の有効性を、埼玉県狭山市にある埼玉製作所の車両組立ライン

  • DB設計時のサイズ見積もり - よねのはてな

    ここのところ、javaccとawsに魅了されている米林です。 よく使うDB(Oracle/MySQL/PostgreSQL/SQLServer)における設計時のサイズ見積もりで使うサイトの備忘録。 あとは、OracleからのPython情報。 Oracle Oracle 物理設計 http://www.oracle.com/technology/global/jp/columns/skillup/oracle9i/index.html 領域サイズ見積もり http://otn.oracle.co.jp/document/estimate/index.html OTNにログインする必要ありますがオンラインで見積もりが出来ます。 アカウント持っていない人は、この見積もりツールを使う目的でアカウントを作ってみてはいかがでしょうか。 OLTP系とDWH系においてブロックサイズを考慮し、DWH系はブ

    DB設計時のサイズ見積もり - よねのはてな