文字コードって何？
文字コードって何？
文字一個一個に番号が振られている
世界で統一されていなかった。これが文字化けの原因。
なぜUTF-8にする理由？
文字コードをお世界で統一することになって、
ＵＴＦ－８作ろう、世界のあらゆる文字を網羅している。
Yasumasa's Portfolio
ＷＥＢ大好きな濱田泰昌のポートフォリオを紹介します。
未分類
残り
アフィリエイトだけなら、無料ブログとワードプレスだけで十分
人型ピクトグラム
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をやっていると登録するだけでＯＫなのでやっておく
google webマスターツールに登録しておくとgoogleの変更で足りなくなったものとかを教えてくれる
http://whitehatseo.jp/
これもindexと同じ階層に入れる。google Analytics登録しておくとこれいらない
http://www.sitemapxml.jp/
アップされているサイトのurlを入れるとサイトマップを自動で生成してくれる。
それをindexと同じ階層に入れる
priorityはするでＯＫ
除外ディレクトリは見られたくないものがあるのであればファイル名を記入する。
どんな規模でもサイトマップは必要
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+十字キー１ピクセル単位で動かせる
自由変形でゆがませる場合はちょっと動かしてからやると上手くできる
ナビゲーション fixed スクロールすると
http://web-pc.net/jquery008
下絵がある場合は、まず新規でプリントで作る。プリントじゃなくても良い。
そして、ファイルの配置から、下絵を選択する。この時テンプレートにチェックを入れる。リンクははずす。
表示から定規を表示、ガイドを持ってきて、交差する場所から書き始める。
角丸ドラッグしたままの状態でキーボードの十字キーの上下で丸の角度を調整できる。
複数選択するためにはshift＋選択したいもので選択していく
そしてパスファインダーを使っていらないところを削除する
パスファインダーの基本ははみ出させる
リフレクトツール
基準点が必要なツールは大体ALTキーが必要なので、そういう風に覚える。
オフライン・ファイルで検索する。
ファイルを同期してくれる。
http://www.nxworld.net/sample/button-mouseover-event/index.html
サーバーの種類
専用サーバー
共有サーバー
クラウドサーバー
ECCUBE
CSCART
OSCOMMERCE
MOVABLE TYPE
WORDPRESSはどんなプラグインを使うかが大切
プログラミングはＰＨＰが良い
javaも良い
jqueryも良い
HTML5のメリットはＯＳに依存しないので本当に良い
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/
メカニカルなブラシ
ＳＦデジタルブラシ
photoshopのブラシすごい
パネルとイメージ（直接）の色調補正の違い
新しいレイヤーとレイヤーそのものにかける違い
グリッド
ctrl+@でもできるが今回は
新規で40px40px背景は黒
鉛筆ツールでＬ時に塗って、下の背景の目玉を消してからパターン登録。
パターンの定義は表示されているものが定義される。
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の決まった記述入れなきゃダメ
全部自分の責任。全部自分を決める。自分がすべて。
覚えちゃダメ、使わなきゃダメ。
死ぬほど勉強することしか残されていない。
ＩＥ対策
modern.IEこれを登録しておけば、ＩＥのバージョン違いが見れる。
今はＩＥテスターより、こっちを使うことが多い
http://kenyo–c.com/html/334/
コンディショナルコメントって検索して出てくるものが、ＩＥ対策
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”,
“ＭＳ Ｐ明朝”,
“ＭＳ 明朝”,
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で作成する方が良い。
レスポンシブオススメ動画
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では文字コードがＵＴＦ８が推奨されているので
それで作ったほうが良い。
文字コードを変えるには、表示からオプションで文字コードを選んで初期設定と保存設定を
UTF-8にする。
表示のメニューからオプション
基本タブ
タブ文字数２
行間３
左余白８
元に戻す回数６４
文字間隔０
上余白２
オートインデントにチェックを入れる
頭を揃える時はスペースで揃えちゃ駄目
必ずTabキーで揃える
ブラウザで確認するので立ち上げボタンの設定する。
表示のメニューからオプション
ブラウザの設定
パスの設定
パス 道しるべ
ＩＥと
ＦＩＲＥ ＦＯＸ
wordpress
wordpress
オープンソース コードが公開になっている。
自由な形でブログが作れてしまう。
CMS、コンテンツマネージメントシステムズ
コンテンツ、その内容がWEB上で単純シンプルに構築出来てしまう。
いろんなCMSがある。
商用サイトでCMS
カラーミーショップ
通販できるようなもの
販売のショップを作れてしまう。
ECキューブ
phpで開発されており、データベース管理システムとしてMYSQLを利用している（サーバー上で動作）
GPLライセンス、使用者に対して、コードを含めた再配布や改変を認めている
wordpressの魅力
無料
ダッシュボードで簡単管理
テーマが豊富（見た目のデザイン）
プラグインが豊富 問い合わせホーム、SEO対策
デメリット
動的にページを生成するので、表示が遅い
細かい調整は結構ハードルが高い。
wordpressの仕組み
動的にページを生成する
文書構成 header.php等
テンプレートタグを使用
<?php get_header();?>
ヘッダーのファイルをここに読み込みますよ。
テンプレートタグを使いこなせるかどうかでwordpressを使いこなせるかが決まる。
テンプレートタグたくさんある。
自分の作ったサイトをwordpressに落とし込む
これをやると仕組みが分かる。
wordpressをここに展開する。
C/xampp/htdocs/
pointは１．アンドロイドSDKっていうのを使う。
パソコンと繋ぐドライバインストール
ダウンロードする。
２．OSのイメージファイルさえ用意すれば、どうにかすればできる。
１．２を用意すればどうにかすれば出来る。
bootrorder
wordpressをダウンロード
xamppのhtdocsにそのファイルを入れる
xampp立ち上げ、mysqlのadminをクリック
root
rootを入力
パスワードを入力
上のデータベースから
wordpress 照合順序をutf8 general ciで作成ボタンを押す
ブラウザを立ち上げて、localhost/wordpress/をアドレスバーに入力
そのまま進む
スラッグはURLのディレクトリになる。
半角英数で入力
カテゴリは二つまたぐようであれば両方にチェックでもOK
index.phpと
style.css
screenshot.jpg
<!DOCTYPE HTML>
<html lang=”ja”>
<head>
utf8を表示するテンプレートタグ
<meta charset=”<?php bloginfo(‘charset’); ?>”>
タイトルを表示するテンプレートタグ
<title><?php bloginfo(‘name’); ?></title>
</head>
<body>
</body>
</html>
DWを使って編集するには、サイト管理で定義してやる必要がある。
オリジナルテーマのフォルダを選んであげると
ファイル管理タブに
style.css
screenshot.jpg
index.phpの３個のフォルダが出てくる。
DWで編集する際は、サーバー定義しないほうが良い。
Contact Form 7
インストールするとメニューにお問い合わせというメニューができる。
メタスライダー プラグイン
カスタムフィールド
専用の入力スペースを作る
使用アプリ photoshop
制作時間
使用素材 ～～ブラシ
サムネイル画像
カスタムフィールドをカスタムできるプラグインがある。
wordpressのメディアのアップで画像は名前が日本語だとだめ、また使えない英数字以外でも受け付けないためちゃんと表示されなくなる。
wordpressであればこれ必須
ALL in one seo packのプラグインを入れればこれらすべてを含むのでＯＫ
プラグインがいっぱい入れちゃっている人は
これ使う
http://webcre-archive.com/2012/10/04/wordpress-db-url-replace/
wordpressが使える無料サーバー
http://www.daiwa-hotcom.com/
cssグリッドデザイン
グリッドデザイン倍倍
グリッドデザインのような1pxでもずれちゃ駄目なものは必ずリセットcssをかける。
position
static
特に配置方法を指定しません。この値のときには、top、bottom、left、rightは適用されず、初期値に配置します。（個人的に使わないです）
absolute
絶対位置への配置となります。親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。（個人的に単独で使う事はほぼないです）
relative
相対位置への配置となります。positionプロパティでstaticを指定した場合に表示される位置が基準位置となり、top、bottom、left、rightは適用されます。（個人的に単独では使わないです）
fixed
絶対位置への配置となるのはabsoluteと同じですが、スクロールしても位置が固定されたままとなります。（IE6は対応出来ていません…）
position使う場合は必ず、幅と高さを指定する。
ポジションは前に使っていれば、前に出ていたものが基準になる。
なければbodyが基準になる。
php
phpはサーバーで動く言語
サーバーがある人は擬似環境を作る必要はない。
ランプ
LAMPP リナックス、mysql php perl
XAMPPの導入でサーバーの擬似環境をつくる。
ザンプ
http://felica-portfolio.com/php_lesson/
XAMPPを検索した最上のもの
https://www.apachefriends.org/jp/index.html
ここからダウンロードする。
skype
port80番
xamppも同じ80番なので、競合してしまう。
チェックボックスはずすところがある。
ファイルの収納場所等を選んだ後辺り、会社の誘導のやつが出るところ一箇所チェックをはずす。インストール手順の手前。
セキュリティーの重要な警告が出たら、プライベートネットワークを選択して、クリックする。
１．php.iniの設定をする。
ウインドウズボタンとEを一緒に押すとエクスプローラーが立ち上がる。
そこにC:xamppphpを入れる。
教科書通りにやるとやばい
２．php.iniの変更確認
versionをちゃんと確認しないと動かない。
３．セキュリティの設定
この時、MYSQLが青くなっていないと駄目
これで上から3つが安全。
一番下が不明でOK
C:xampphtdocsで新しいフォルダを作成。
ブラウザを立ち上げて
localhost/hamada_php/lesson01.phpと打つ
localhostと打つとhtdocs直下を見に行く
localhost htdocsのフォルダ名、ファイル名
localhostで見た時にエラーが出る。エラーが出た時は上も怪しいと思ったほうが良い。
自分自身を指し示すIPアドレス
localhost=127.0.0.1にlocalhostが振られている。
スカイプと競合してしまう場合の対処法
コンパネから、Apacheのconfigから一番上を選択
listen80を81にする
serverName localhost:も81に変える
そして、ブラウザで表示する際には、localhost:81/を足さないと駄目
phpとmysqlの連携でデータベースから出したり入れたり出来るようになるので、新着ニュースを作れるようになる。
エクリプス
Eclips
PHPの辞書みたいなものがある。
https://php.net/manual/ja/index.php
word pressのダウンロード
https://ja.wordpress.org/
特殊記号の読み方サイト
http://penjp.com/50pc_use/pc_use_9_2.html
！ 感嘆符 ビックリマーク，びっくり
” 引用符 ダブルクォーテーション，二重引用符
＃ 番号記号 ハッシュ、シャープ、イゲタ
＄ ドル記号 ドル，ダラー
％ パーセント パーセント
＆ アンパサンド アンド，アンパサンド
’ アポストロフィ, アクサンテギュ シングルクォーテーション，クォート，
アポストロフィー
（ 左小括弧 括弧，丸括弧，左丸括弧
） 右小括弧 括弧閉じ，丸括弧閉じ，右丸括弧
= 等号 イコール
– ハイフン, 負記号 ハイフン, マイナス
~ オーバーライン チルダ，チルド
^ アクサンシルコンフレックス 山形、ヤマ、ハット
| 縦棒 パイプ
￥ 円記号 円マーク
shift+@マーク ‘ アクサンクラーブ バッククォート
＠ 単価記号 アットマーク，アット
｛ 左中括弧 中括弧
[ 左大括弧 角括弧，左角括弧，大括弧
＋ 正符号 プラス
； セミコロン セミコロン
＊ アステリスク アスタリスク，アスター
： コロン コロン
｝ 右中括弧 中括弧閉じ
] 右大括弧 角括弧閉じ、右角括弧，大括弧閉じ
< less than 不等号（より小） 不等号（より小） 小なり
, コンマ、セディユ コンマ カンマ
> 不等号（より大） 大なり
. ピリオド ピリオド，ドット
？ 疑問符 クエスチョンマーク，はてな
/ 斜線 スラッシュ
_ アンダーライン アンダースコア アンダーバー
バックスラッシュ
こっから下はあまり重要じゃない
「 始括弧 かぎ括弧
」 終括弧 かぎ括弧閉じ
～ スワングダッシュ
、 読点 てん
。 句点 まる
・ 中点 なかてん
ー 長音符号 長音符号，のばす
日本語
3byte utf8
半角英数
1byte
strlen()
メールフォームはCGIを勉強する
メールホーム設置ＰＨＰ
文字列はstring
tableは
インポート、エクスポートでファイルを保存することができる。
カラム 縦の項目の見出しをカラムという
レコード 実際の値が入っている行はレコード
row 行のこと
主キーデータを取り出す時の基本になる。codeなど重複がない1～１００
newsfeedを作るには
見出し、日時、記事（本文）ニュースコード（主キー）
名前はnews_idにした
データ型 数値はINTに設定 普通の数値型はINT
インデックスを PRIMARY主キーを表す言葉 PRIMARYキーとも言う。PRIMARYに設定
AIにチェック インクリメント増加 自動で追加させる 自動で連番
news_headline
データ型 VARCHAR 短いテキスト
長さ１２８
照合順序 utf8-general_ci
news_article
データ型 TEXT
照合順序 utf8-general_ci
news_date
データ型 DATETIME
データ型の基準は文字の長さで決めている
ここまで入力したら、保存ボタンを押してテーブル作成
その後、newsを選んで挿入
news_idは自動生成なので入れる必要ない。
headlineと本文を入力し、時間を選んであげると記事ができる
flash
フラッシュアニメーション
文字もシンボル化しない透明度、色の微妙な変化等出来ないアニメーションがある。
シンボル化
インスタンス配置
モーショントゥウィン
キーフレーム
花びらを動かすとかの複雑な動きを付けるのは、シンボル自体に動きを付けて更にステージに置いたインスタントにも動きを付けることにより、ダブルの動きになる。
iosアイフォンでもみれるようにgoogleでswiffyを検索swiffyの画面。参照でフラッシュで作成したswfファイルを選択する。そして、下の方に出てくるhtmlファイルを右クリックで保存する。３D回転はうまく出ない。
flashがIOS IPHONEで対応していなかったため、流行らなくなったため使われなくなったが、flashがhtml5での書き出しができるようになったので、今また見直されている。
TOPにムービーファイルだけだと、SEO上良くないからフラッシュ使われなくなった。
java scriptで書き出されるが、headが重くなるので、外部ファイルにscriptを書き出す。
このswiffyでjava scriptで書き出せば、swfファイルは一緒にあげなくて良い
レイアウトの話
レイアウトの話
１．縦の順番
通常人は上から下に目が行く
重要度高いものから上に置く
２・横の順番
左から右に動く
naviはやっぱり左が良い
３．グリッドレイアウト ノート参照
４・ホワイトスペース ノート参照
視覚的にmarginでブロックを分ける。
デザインの4原則
・整列の原則 きちっと並べる
通常は左寄せ
伝統的な格式あるものは中央寄せ
レストランのメニュー
映画のエンドロール
・近接の原則
関係性があるものは近づける
・対比の原則
コントラストの強弱をつける
文字の大きさの対比
色のコントラスト
青と黄色
明るいものと暗いもの
・反復の原則
色彩
物体色、反射される色が見えている。
光源色そのもの自体が光を発している
モニター、テレビ
ＲＧＢ
光の三原色
ＣＭＹＫ
色のインク
ＣＭＹを混ぜても黒にならないので、黒がついている。
色相＝色合い
彩度＝鮮やかさ
明度＝明るさ
この三つをトーンと読んでいる
webサイト制作フロー
webサイト制作のワークフロー
１．コンサルティング
相手がどういうものを作りたいのか
実際の効果を出す。成果を出す。
売り上げを上げる、問い合わせを増やす。
コンサルティングの際にヒアリングシートを使う。
２．企画
社内に持ち帰り、具体的にどのようにしていくかを練る。
３．プレゼンテーション
雰囲気を伝えるため
まだコーディング等はしない。
イラストレーター
photoshopで作ることが多い
写真や文字はダミーで良い
４．デザイン
背景やボタンなどのデザインを作成する。
５．コーディング
６．納品
７．維持・管理
ＳＥＯ上サイトマップは作ったほうが良い
ＴＯＰの下に作るのが方が良い。
最近の流行はＴＯＰページの一番下。
相互リンクもＳＥＯ上良い
同業種、関連企業など。
