2012年11月3日土曜日

WEBデザインの練習をしてみた

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
とりあえず目標的なものとして
①使えるウェブデザインとコーディングを身に着ける。
②1つのWEBサイトを作って更新、管理する。

①については
個人で独学でやっている状態では自身を持って自分のスキルを説明しにくい
また実際に要求されるサイト作りに必要なノウハウを知ることができない。
ということから、やはり自分が作りたいものを作るだけでなく
他人が作りたいものを作れるようにもなっていきたいというのが動機です。

②については
逆に自分でサイトを管理する際に必要なものを覚えたいというのが動機です。
いくつか趣味で作りましたが正直、無管理ほったらかしと言う状態で
ユーザーの分析やサイトのレイアウトの分析といった作る以外の部分は
まったくといってやっていないからです。

さっそく①の使えるウェブデザインとマークアップ、コーディングを身に着けることを目標に
一番参考になると思われるプロが作った実際のサイトのデザインコードをみつつ
真似て作ってみました。

アップロード先URL






















元の公式サイト(http://www.kobayashi.co.jp/
勝手に同じようなデザインのものを作ってますが、実際に運営するわけでないので大丈夫でしょう
タイトル属性も入れてないの検索効果もないでしょう)

どうでしょう、ざっと見た感じでは似たように作れたんではないでしょうか

今回、作業を一度通し、今の自分でどこまでできるかチェックする感じでやっていきました。
手順は
①デザインカンプ作成
 画像加工ソフトですべて位置から書き直し
 できた画像をスライスして素材に

②マークアップ
 HTMLでのマークアップ、各種配置
 CSSでのレイアウト

③Javascriptコーディング
 文字サイズ変更、トップに戻る、メインビジュアルスライド
 ほぼコピペでコードを追いながら理解する感じで

デザインカンプ作成で7時間程度、その他で7時間程度でしょうか
この辺ももっと早く、正確にこなしていく必要があります。

デザインについてフリーソフトのGIMPでやっていますが
作る分にはとくに問題なさそうですね
出来栄えはというと、自分なりにはある程度確認できたと満足している部分がありますが
実際はもっと丁寧に仕上げる必要がありそうですね
この辺のチェックは自分では甘くなってしまうのが独学の悪いところです
でも繰り返し練習していけば同じように作れるようになると信じていますが。

マークアップについては
クロスブラウザ対応や特にCSSの理解が不十分だと感じました
この辺も繰り返し練習か

Javascirptコーディングについては
Jquery一本でいいと思いますが自分で組むにはまだまだ速い。
よく使う機能を見て言ってそこから必要なコードの理解をしていこう

ていうことでどんどんサイトを真似て実際に使う技術を吸収しつつ
フリーランスのWEBサービスの依頼なんかをつついてみたいなと考えています。

あと、3ヶ月ぶりの更新ですが
応用情報技術者の試験の勉強でサイト作りを中断していました。
10月末に実際受けましたが、難しいですねえ・・・。
午前は覚えてマークシートなので楽な方ですが
午後は記述がたくさんあるので実際の業務についていないと
なかなかそれっぽい答えにたどり着けないですね
5問は全て埋めたのですが、残り1問のうちいくつか空欄で残しちゃって
たぶん来年またうけることになるでしょう

資格はそれ自体で役に立たないことのほうが多いですが
勉強やスキルアップの動機には十分なので
またいくつか選んで並行してやっていこうかな

2012年8月4日土曜日

英語という言語は候補の機能とかあるのかなあ?

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
先の言語添削SNSで遊んでいてふと思ったのですが
普段日本語をPCで書いたりする場合、キーボードどでかちゃかちゃやってスペースで変換候補がでますね。漢字が弱い自分にとって非常に便利な機能です。

英語の場合はどうなんだろう。
自分が英文を書く場合、スペルをいちいち調べないといけないくらい覚えていない。
なんあら日本語と同じようにapp をうったら 変換候補で apple や applicationがでてきてさっと選べるような感じなら便利なのに。

ネイティブの人でもスペルって忘れるものだと思うんだが
そういう機能は不要なのだろうか・・・

2012年8月3日金曜日

英語の添削のサイトを英語習得に役立てたい

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
はてぶの記事であった

http://lang-8.com/

人の役に立てるって思うと添削しちゃいませんか
日本語の添削しても英語はあまり上達した感じにはなりませんが
自分の英語も添削してもらうようになれば、どんどん上達するのではないでしょうか

ちょっとはまってしまって、ずっと添削してました。
海外の方でも本当に日本語が上手な人が多いのでびっくりです。
自分のああいう風になりたいなあ。

で、気になったのがこのサイトの作り
見た目が完全にBootstrapじゃないですかー
よくあるテンプレートそのままでもちゃんと人気あるサイトにできあがるんですね
ほぼ個人で作ったのだと思われるのですが、
使いやすさ、機能が盛りだくさんな気がします。
4年前?くらいから開設してるらしいのですが
いろいろマイナーチェンジしながら、ここまで便利なものにできあがったんでしょうね。

自分も長く頑張ればこういうのを作れるかもしれないと妄想しながら。
もうちょっと練習しつつ、ひと段落着いたら腰すえてこういうのを作ってみたいな

2012年7月28日土曜日

Codeigniter フィールドのユニークチェック is_unique

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
前はDBのフィールドに対するユニークチェックのバリデーションを自前でやる必要があったのですが、バージョンが新しくなってis_uniqueが使えるようになったみたいですね。

is_unique[category.title]

テーブル名と フィールド名を指定するだけ。簡単。

ソーシャル的にWEBサイトを作り上げる方法はないものか

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
ソーシャル的にとはなんなのか、よくわからない。
たぶんコミュニケーションとってごにょごにょすることだろう。

アマチュア一人ではそれなりのものしか作れない。でもネットでソーシャル的に協力すれば
その作業に誰でも参加できて、良い作品を作り上げることができるし、多くの人がそう感じてるのではないだろうか。

昔はネットがなかったからわからないことはすぐ調べるということができなかった。
いまはぐぐってしまえばある程度の知識はなんとかなるし、アマチュアでもWEBサイトが作れてしまう。ツールも進化して一人で多くの分野の作業もできるようになった。
それはたぶん、ネットで知識の共有のおかげで、プロの方がブログで知識を公開したり、サービスでコードを共有したり、知恵袋であったりするのだろう。

ネットは人類の脳という例えがどっかにあったがまさにそんな感じかな。
実現に50年、100年かかるといったものが半分になったりするんじゃないかと思うと
何かわくわくしてくる。

とはいえ、専門的な知識の進化も著しくなってきているので
一人がググって多くの分野にわたって高度なスキルを習得するのはかなりの時間がかかってしまうし、進化し続けることを考えると、追いつくのはほぼ不可能だと思う。

ちょっと本題からそれて、おっさん世代はネットで共同作業することに慣れてはいない。
記事で読んだが、今の中学生、高校生はそれを良くも悪くもうまく利用している。
Skypeやgoogleドキュメントを使って、分業して教えあい課題をクリアしていくことができる。

もし自分が今の学生の立場であるとしたらこんな使い方をしてみたい。
例えば夏休みに英文訳の課題 100 ページ分でたとする。
いまなら一人で翻訳ツール、辞書ツールを使いつつそれなりの速度でこなすことが出来るだろう。
でももっと楽をするのなら、同級生100人で1人1ページを分業して合わせれば1日で終わらすこともでき、残りを遊ぶ時間に他の勉強に当てることもできる。
これには。実際に訳する力が鍛えられないという問題はあるが、協力してお互い補完しあうことで1つの良い模範訳を作ることになるので、ある意味教材の模範解答に近いものができるだろう。
それと照らし合わせて自分の問題点を知ることができるので、教材を買わずに効率よく復習することができる。本当に羨ましい限りだ。

つまり、何人か異なる分野の専門家がお互いに協力して作り上げるほうが、一般的に良いものができる。(当たり前か)。同じ作業場に実際集まって協力して作り上げるのが効率の良い方法だ。
ネットで同様なやり方を実現できないものか?

もし、アマチュアの100人のWEBサイト作成者が協力して1つのWEBサイトを作成できたら
今ある有名なこのサイトやあのサイトが1時間でできるかもしれない!
とまではまだまだいかないだろうけど、お互いの知識を共有してそれを繰り返していくことでそれを可能にするのではないかと思う。

10個のWEBサイトを自分ひとりで作成できるのもそれなりに評価されることではあるけれど
やはり、多くの人が使う有名なサイトの作成者の1人として携わったことがあると言えるほうが
多くの人に認められるし、自信にもなる。

結局言いたいのは、望むなら、今日始めたアマチュアから、プロまでスキルの幅が広くでも
一つのプロジェクトをそれぞれのスキルにあった作業に分業し誰でも参加できるシステムがあるようなソーシャル的に開発できるサービスが出来てほしい。(自分ではまだまだ作れないし)
もっというならお互いが共同作業できる各種ツールが備わっているといい。プログラミング作業をリアルタイムで共同作業するのはまだまだ難しいのかなあ。

2012年7月23日月曜日

グーグル急上昇ワード関連のツイートをまとめて表示させてみた

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
今話題のワードといえばグーグルトレンド、急上昇のランキングのワード
それに関してリアルタイムでのツイートをまとめてみれたらいんじゃないかということで
作ってみました。

グーグル急上昇ワード関連ツイートまとめ
















非常に手抜きをしております。
グーグルの急上昇ワードをとってきてそれぞれのキーワードに対して
グーグルのガジェットを表示しているだけという


グーグルの急上昇のAPI関連は以下を参考にさせてもらいました。

XMLが自分としては扱いやすいのでモバイル?のバージョンのほうを取得しています。
そしてそれらのキーワードをツイートのガジェットに適用してたくさん表示させているだけです。

ツイートガジェットはここでいろいろ作ることができます。

なぜ作ろうと思ったかわからない、誰得なのかもわからない
とりあえず作ればいいと思う(所要時間 3時間程度)
いろいろ迷走しています

Whitespace in query component. Use %20 in place of spaces.

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
HTM5コードチェックのメモ

URLのクエリのスペースは%20で置き換える
&は&で置き換えるなどなど

phpの場合URLを表示させる前に
htmlentities($url) もしくは htmlspecialchars($url) しておく