Yasumasa's Portfolio

Yasumasa's Portfolio
WEB大好きな濱田泰昌のポートフォリオを紹介します。

2015年01月

残り

アフィリエイトだけなら、無料ブログとワードプレスだけで十分

人型ピクトグラム
http://seo.siyo.org/webcustom/seo11050/
http://h2ham.seesaa.net/
http://kamukamuline.jugem.jp/?eid=100

viral-community.com
http://viral-community.com/seo/all-in-one-seo-pack-5013/

google Analyticsをやっていると登録するだけでOKなのでやっておく
google webマスターツールに登録しておくとgoogleの変更で足りなくなったものとかを教えてくれる

http://whitehatseo.jp/
これもindexと同じ階層に入れる。google Analytics登録しておくとこれいらない

http://www.sitemapxml.jp/
アップされているサイトのurlを入れるとサイトマップを自動で生成してくれる。
それをindexと同じ階層に入れる
priorityはするでOK
除外ディレクトリは見られたくないものがあるのであればファイル名を記入する。

どんな規模でもサイトマップは必要

page Analyticsっていうプラグインがある。
これすごい、押しているボタンまでわかる。

アドセンス、コンバージョンとか必須

google movile friendly testで自分のサイトをチェックしてみる。
文字が小さいとダメ。
フラッシュコンテンツはダメ
ボタンとボタンの間隔が小さい

portfolio作成の際、htmlはローカルでいいが、wordpressはupしてリンクを載せる

seesaaでgoogle アナリティクスを入れる方法
http://algorhythnn.jp/blg/2013/08/26/google-analytics-seesaa-tag/
イラストレーター
レイヤーとアピアランスパネルは必ず出しておく
alt shift押すと中心から書ける
画像を開くにはファイルから配置
ctrl+十字キー1ピクセル単位で動かせる

自由変形でゆがませる場合はちょっと動かしてからやると上手くできる

ナビゲーション fixed スクロールすると
http://web-pc.net/jquery008

下絵がある場合は、まず新規でプリントで作る。プリントじゃなくても良い。
そして、ファイルの配置から、下絵を選択する。この時テンプレートにチェックを入れる。リンクははずす。

表示から定規を表示、ガイドを持ってきて、交差する場所から書き始める。
角丸ドラッグしたままの状態でキーボードの十字キーの上下で丸の角度を調整できる。
複数選択するためにはshift+選択したいもので選択していく
そしてパスファインダーを使っていらないところを削除する
パスファインダーの基本ははみ出させる

リフレクトツール
基準点が必要なツールは大体ALTキーが必要なので、そういう風に覚える。

オフライン・ファイルで検索する。
ファイルを同期してくれる。

http://www.nxworld.net/sample/button-mouseover-event/index.html

サーバーの種類
専用サーバー
共有サーバー
クラウドサーバー

ECCUBE
CSCART
OSCOMMERCE
MOVABLE TYPE
WORDPRESSはどんなプラグインを使うかが大切
プログラミングはPHPが良い
javaも良い
jqueryも良い

HTML5のメリットはOSに依存しないので本当に良い
HTML5で作ったものはアンドロイドでもアイフォンでも同様に見れる

サイトは
IEテスターで必ず見てみる
photoshop イラレ究極の最新テクニックほとんど海外のサイト

移動ツールを2回クリック
ctrl;+dで複製できる

全部を選択して書式からスレッドテキストオプションを選んで作成
エリア内文字ツール

タッチアイコンは144px×144px
ファビコンは16px×16px
プロパティと値、プロパティはwidthとかheightとか、対象物、値は:の後はすべて値
box-sizing:border-box;
borderを範囲内にする記述が出る
一個進めるにはctrl+shift+zキー

ラスタライズかけると

線に対してはグラデーションはかからないので、
オフセットを使う

図形を描いて、効果⇒パスの変形⇒パンクと膨張

Adobe Design Magazine
http://www.adobe.com/jp/jos/designmagazine.html

インラインフレームはデザインはいじれない
グーグルドライブちょー便利。

ストレージ、ワークスペース

有名なjQuery
http://masonry.desandro.com/

メカニカルなブラシ
SFデジタルブラシ
photoshopのブラシすごい
パネルとイメージ(直接)の色調補正の違い
新しいレイヤーとレイヤーそのものにかける違い

グリッド
ctrl+@でもできるが今回は

新規で40px40px背景は黒
鉛筆ツールでL時に塗って、下の背景の目玉を消してからパターン登録。

パターンの定義は表示されているものが定義される。
ctrl+dで選択解除

真ん中のラインはまっすぐを保つ

photoshopテクニックとかで出すとネットで色々紹介している。
http://www.adobe.com/jp/joc/dekimaga/fun.html
http://www.webdesignlibrary.jp/photoshop/

背景色の塗りつぶしctrl+delete

http://www.xn--bitcoin-er4fwevg5bzh3r.com/
Low plly portrait in photoshop
steps.sg
http://10steps.sg/

検索ワード
photoshop tutorial
photoshop チュートリアル
photoshop テクニック
イラストレーターも同じwordで検索する

https://www.modern.ie/ja-jp

wordpress 作品のcssにすべてwordpressの決まった記述入れなきゃダメ

全部自分の責任。全部自分を決める。自分がすべて。

覚えちゃダメ、使わなきゃダメ。
死ぬほど勉強することしか残されていない。

IE対策
modern.IEこれを登録しておけば、IEのバージョン違いが見れる。
今はIEテスターより、こっちを使うことが多い

http://kenyo–c.com/html/334/
コンディショナルコメントって検索して出てくるものが、IE対策
http://d.hatena.ne.jp/web-0818/
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title></title>
<link rel=”stylesheet” href=”css/style.css”>
<!–[if lte IE 9]>
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<![endif]–>
<!–[if lte IE 9]>
<script src=”http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js”></script>
<![endif]–>
<style>
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section { display: block; }
hgroup, menuこれは入れなくて良い。廃止された。
</style>
<script src=””></script>
</head>
<body>

</body>
</html>

articleは使わない方がいい。

EM zencoding
ドットインストール
http://dotinstall.com/

テンプレートで良い
中身で勝負する。

コンプレックスを商売にする。

メインのcssには入れる。

wordpressのbodyにクラスを追加する
http://www.nxworld.net/wordpress/wp-body-class-adding-more-classes-and-alternative-method.html
http://placehold.it/

font Helveticaかっこ良い

お気に入りのエディタはwebstormとBrackets、最近はSublime Textも。
Skill

Codinghtml5css3
HTML5の新要素を使ったセマンティックなマークアップができます。
特にCSSの学習には力を入れており、jQueryと組み合せて動的なWEBサイトを構築できます。また、sassを使用したり、SMACSSやBEMなどを勉強し、管理しやすいCSS設計を心がけています。
WordPressは、ローカルで作成したテーマをテンプレートタグに置き換え、サーバーに落とし込むことができます。
Programmingphpjavascript
jQueryはコピー&ペーストを使わず自分で記述するようにしています。また、簡単なプラグインならカスタマイズできます。でもプラグインはあまり使用しません。
PHPとMySQLを使用し、メールフォームや簡易的なブログページが組めます。
現在javascriptを勉強中です。
DesignPhotoshopIllustratorFlashDreamweaver
Photoshopでは、ワイヤーフレームや簡単なバナーの作成、スライス、画像補正ができます。
Illustrator、Flashはペンツールやキーフレームの扱いといった基礎的なところを習得しています。
Dreamweaverに関してはCSSデザイナーやFTP、テンプレート機能などひと通り使えます。
Othergulpgruntsass
EmmetやCSSプリプロセッサ、gruntなどのビルドツールを使用できます。
UI/UXを意識し、ユーザーの立場になって考えるようにしています。
日頃から新しい技術をチェックし、使えそうなら進んで学んでいくようにしています。
Javascript
現在、ひたすら参考書を読みひたすらコードを書いています。また、CodePenやjsdo.itのソースコードを見て勉強しています。canvasやWebGLを使用したパーティクルアニメーションに興味があります。
最近はCoffee scriptも書いています。
English
単語帳を使用して勉強中です。国外のWEBサイト、WEBサービスを積極的に利用しています。ゆくゆくは(三年後を目処に)カナダかアメリカでWEBの仕事にチャレンジしたいです。
WebDesign
「siteinspire」や「Io3000」などの優れたWEBサイトを紹介しているサイトを毎日閲覧しています。よく見るWEBサイトギャラリーをこちらにまとめてみました。
Tools
Git(SourceTree)とPrototyperの勉強を始めました。実際にリモートリポジトリを作成し学習しています。

なんでもピンはねする。

http://www.jquerystudy.info/index.html

レイヤー構造に配置できるjQuery

 

Webデザイン初心者でもできる、Bootstrapの使い方超入門

jQuery Isotope

手書きフォントで検索
デザインリンク集からちょいつまみしてくる。

Z-index

英会話の学校

ホームページを英語
パンフレットを英語化

異種交流会に参加した

明朝体で見せたい一番綺麗に見える指定

明朝体で見せたい場合に一番きれいに見える指定
p{
font-family:
“ヒラギノ明朝 ProN”,
“HG明朝E”,
“MS P明朝”,
“MS 明朝”,
serif;
}

htaccessのデータ

この下の7行を入れて別名保存 すべてのファイルで.htaccess.txtを作る
<IfModule mod_rewrite.c>
RewriteEngine On          ここでデバイスを増やしたり出来る
RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone) [NC]
RewriteCond %{QUERY_STRING} !mode=pc
RewriteRule ^$ /sp/ [R,L]ここで、アドレスを設定する。

Header set Vary User-Agent
</IfModule>

.htaccess.txtを作る際、windowsはいいけどマックは.が頭にくるとダメなので、マックは気をつける。マックは.を無くした状態でファイルを作ってサーバー上で.を付ける。
そしてサーバー上では.htaccessという名前に変更する.txtは取らなきゃダメ

jQuery movile

jqueryモバイルサイトに特化した動的ページが簡単に作れる。
jqueryモバイルの時代は終わったんじゃない。
http://jquerymobile.com/
themerollerをクリック
英語でテーマネームを入れる

http://jquerymobile-memo.com/sample/

jQuerymobileリファレンスを見ながら作るプラグイン良いね。

西畑一馬のjQuery Mobileデザイン入門で検索
http://ascii.jp/elem/000/000/607/607366/
アスキーのwebプロフェッショナルの記事は勉強になる

レスポンシブデザイン

レスポンスデザインはブレイクポイントで作ったほうが良い

スマホのボタンサイズを44px×44pxにガイドラインで推奨
レスポンシブデザインにするなら、固定で作る。

ブラウザに応じてcssを振り分け安くするため、htmlにclass名を付与してくれる
http://modernizr.com/

developers.google.comでアクセス
googleはレスポンシブサイトを作ってほしい。
方法は3つ
学校でやったレスポンシブサイトを一番推奨。

smart 4me
幅640で作る

モバイルサイトのテスト
https://www.google.com/webmasters/tools/mobile-friendly/
http://food.foto.ne.jp/

スマホのサイトはとにかく軽くする。
jQueryを入れたりしない。
対応するOSはIOSとアンドロイドだけ。
あらゆるものを偶数で作る。
アンドロイド太字bold使えない。
画像はあまり使わない。
CSS3で作成する方が良い。

レスポンシブオススメ動画

スマートフォンサイト制作 よくあるトラブルと 解決方法・回避方法 from Maboroshi.inc

PCサイトからスマホサイトに変える

chromF12 スマホボタン押すデバイスを選ぶ
FITボタンを外すと原寸大選択しているデバイスと同じ画面になる。
情報量が多い場合はレスポンシブデザインは難しい
ナビゲーションが多いサイトとか

ハーゲンダッツ
クローム
要素の検証。
携帯サイト見える。

<ul>
<li><a href=”#”><div>サービス紹介</div></a></li>
<!–androidはdisplay block 効かないので、このようにdivで囲むことによりdisplay blockと同じ効果になる–>
</ul>

ゼロからはじめるレスポンシブWebデザイン入門すごい参考になる
http://ascii.jp/elem/000/000/700/700611/

 

144px×144pxの四角形の画像を使う。
pcのフォルダはファビコンもタッチアイコンもいらない。
spのフォルダに必要。

favicon.icoを作るには
ファビコンは16px×16px
photo shopでpngで作ってジェネレーターでicoに変換する
http://ao-system.net/favicon/
ファビコンはpcとspを両方入れる

スマートフォン向けウェブサイトの構築
https://developers.google.com/webmasters/smartphone-sites/?hl=ja

モバイルガイドhttps://developers.google.com/webmasters/mobile-sites/mobile-seo/other-devices/feature-phones?hl=ja

HTML に追加するアノテーション
pcのindexファイルのheadの一番上にコピペ
<link rel=”alternate” media=”only screen and (max-width: 640px)”
href=”http://m.example.com/page-1″ >
ここの中を書き換える。
こっちはsp/まで

pcのindexファイルのheadの一番上にコピペ
<link rel=”canonical” href=”http://www.example.com/page-1″ >
こっちはsite/まで
ulの中のliに入れる
/site/?mode=pc”><div><PC版を表示</div></li>

その他

すべての日常のものをwebに置き換える。
facebookが
twitterが主張
shopping

ポートフォリオが出来たら登録する
vivivit.com

web学ぶなら英語必要
毎朝の英語学習 NHKラジオを使っている。
webと英語を結びつける

月~金曜日 午前8:30~8:40 英会話タイムトライアル
サブライムテキスト テキストエディタ
VMウエアー 仮想化

西畑一馬
この人の本が良い。

キレート
キレーションで情報を集める

 

web系就職活動で使えるサイト
http://www.find-job.net/

企業の採用担当者にポートフォリオを見てもらえる
https://www.vivivit.com/

時間の流れがあるもの
イラストや
http://www.irasutoya.com/

form

HTML5フォームタグ内
入力の候補が出てくる
autocomplete=”on”

input type text 一行テキストボックスを作成する

必須項目を指定できる
required=”required”リクワイヤード
見本の薄いグレーのテキスト
placeholder=”入力の見本”

input type=”email” placeholder=”aa@bb.cc”
input type=”url”

入力の候補がでる
list=”codeType”
datalist id=”codeType”
<option value=”ロゴ入りTシャツ”></option>

色を選べる
input type=”color”

input type=”range”

上下の▲で数値を入力できる
input type=”number”

検索の仕方

キーハイフンキー だと両方キーワード
キー_キー 両方で一つのキーワード

cssスプライト

リストには文字が絶対ないと駄目なので、インデントで遠くに飛ばすか
文字を見えなくするようにする。文字を見えなくするには、見えなくしたい文字をspanかemで囲みcssでvisibility:hidden;で見えなくする

パソコンの知識

ZIP圧縮ファイル

windowsで定番の圧縮ファイル
ダブルクリックで展開

クラウドワークス(ネットで働くことが出来る)

新しいフォントを手に入れたので、パソコンに入れる。
IMACではフォントブックなるものがあるらしい。

テキストエディタ
エクリプス

Eclips

TERA PAD初期設定

TERA PADの初期設定

ファイルを右クリックして、プロパティを開く
プログラムのところで変更でTeraPadテラパッドを選ぶ

テラパッドの右下に文字コードが表示される
HTML5では文字コードがUTF8が推奨されているので
それで作ったほうが良い。

文字コードを変えるには、表示からオプションで文字コードを選んで初期設定と保存設定を
UTF-8にする。

表示のメニューからオプション
基本タブ
タブ文字数2
行間3
左余白8
元に戻す回数64
文字間隔0
上余白2
オートインデントにチェックを入れる
頭を揃える時はスペースで揃えちゃ駄目
必ずTabキーで揃える

ブラウザで確認するので立ち上げボタンの設定する。

表示のメニューからオプション
ブラウザの設定
パスの設定
パス 道しるべ
IEと
FIRE FOX