96's blog

WEBサイト制作科 6ヶ月コース

HTML08(レイアウトサンプル)

ブログ・Webデザイン初心者の勉強「サンプルE」 <htmllang="ja"> <head> <metacharset="UTF-8"> <title>jQueryの練習</title> <linkrel="stylesheet"href="style.css"> <scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script></script>

ポートフォリオサイト集(jQueryfiltering習作)

アイデア収集用。プロのみでなく他校のものもあり。

ポートフォリオ(メモ)

11月中にアイデアを決める。 スキルアップを時系列で表現。

スマートフォンサイト(jQuery mobileの紹介)

西畑一馬のjQuery Mobileデザイン入門 jQuery Mobile日本語リファレンス jQuery mobileを使うことで、簡単にサイトのレイアウトができる。 ボタンなどのグラデーションを設定してくれる。 data-roleでひとつのサイトの中で複数のサイトレイアウトが組める。

デザインの要素満載なポスター

情報の配置 人の視線はZの字。角に重要な情報を置く。 視線が通過しやすい場所に情報を置く場合は、大きくするなどして目立たせる。 写真のふち 角版:伝えたい情報。商品など。 切り抜き:カジュアルな印象を与える。漫画っぽい。若者向き。→投票率をあげ…

レスポンシブWebデザイン05(可変+固定)

ブログ・HTML5の勉強「可変+固定レイアウトパターン:構造」

PHP30(フォーム入力~データ一覧の演習)

PHP

商品と価格を入力し、データベースに格納。 入力チェックし、エラーがあれば入力画面に戻るよう誘導する。 データベースに接続できないときは、エラーメッセージを表示。 データ一覧でデータベースから引っぱってきて表示し、選択用のラジオボタンをつけてお…

ポートフォリオ

数字を使うと伝わりやすい。 制作時間も書く。 紙バージョンも必要。

JavaScript10(GoogleMapsAPI習作)

ブログ・Webデザイン初心者の勉強「GoogleMap API(2)」 習作 移動時間をscriptの中のtravelModeでDRIVINGかWALKINGか設定できる。 RUNNINGがなかったので、これを非表示にするために行をむりやりつぶしている。

サイト制作

これから作成するサイトに縦スクロールのjQueryを必ず使おう。 いろいろあるけどto-Rで紹介しているsmooth scrollが動きがいい。 http://blog.webcreativepark.net/2012/09/06-152317.html

PHP29(cookie:各自で進める)

PHP

ブログ・PHPの勉強「COOKIE:解答例」 クッキー setcookie('名前',値,保存期間); サイト表示のたびに変数に1ずつ足してsetcookieに入れることでサイト訪問回数を数えることができる。 エラー input.phpのフォームでクッキー保存のチェックボックスをチェック…

PHP28(課題フォームの修正)

PHP

修正内容 COOKIEに入る前に、以前の課題で作成したフォームを授業ブログのソースを元に修正。 修正箇所は、1)nl2brを入れる。2)htmlspecialcharsをprintのすぐ前で使う。3)メールをユーザーとクライアントに届くようにする。 問題点(query('SET NAMES…

jQuery11(jQuery filteringの習作)

これぐらい動かす要素があると重い。やはり画像を見せるもの。 firefoxが特に重い。

JavaScript09(GoogleMaps API)

緯度・経度 pointabs スケール指定 マーカーの位置 センターの位置 エラー ブログ・Webデザイン初心者の勉強「GoogleMap API(1)」のソースを使ってローカルでは表示できたが、サーバーにアップすると表示できず「APIキーが必要」とでる。 最新バージョンで…

jQuery10(jQuery Filtering)

jQuery Filtering ブログ・Webデザインの勉強 | 風姿花伝「jQueryでフィルタ(フィルタリング)機能」 お手本サイト 補足 内容が多い・少ないによって縦スクロールバー分の表示ズレがある場合はhtml{overflow-y: scroll;}で固定。 画像サイズを変える場合は…

jQuery09(Beautiful Background Imageの習作)

今後やること

職務経歴書:年表・やってきたこと・できることなどを図案化する。ポートフォリオにも入れてよし。Web業界に就職するなら、デザイン化すること。 12/2・3:ポートフォリオサイト案のプレゼン。

PHP27(フォーム練習問題)

PHP

※11/06 11:30更新 ブログ・Webデザインの勉強 | 風姿花伝「フォーム(1)~(6)」 入力画面 http://webtm2013.main.jp/php_maita/Q06(2).php <htmllang="ja"> <head> <metacharset="utf-8"> <title>フォーム(2)</title> <linkrel="stylesheet"href="Q06style.css"> </head> <body> <divid="container"> <h1>メッセージ入力画面</h1> <p>必要事項(<span>※</span></p></divid="container"></body></htmllang="ja">

CSS13(ロールオーバー)

CSS

ブログ・Webデザイン初心者の勉強「ロールオーバー」 jQueryを使わなくても、CSS3でロールオーバーで画像を拡大・透明化できる。 HTML5でインライン・ブロックレベルの概念がなくなったので、divをaタグで囲むことができる。 サイト HTML <htmllang="ja"> <head> <metacharset="utf-8"> <title>ロールオーバー</title> <linkrel="stylesheet"href="style.css"></linkrel="stylesheet"href="style.css"></metacharset="utf-8"></head></htmllang="ja">…

職業能力基礎講習(書類作成)

書類の種類 履歴書 職務経歴書 添え状 ハローワークの紹介状 ジョブカード 書類作成の目的 採用担当者に「いいね!」「会いたい」「確かめたい」と思わせること 履歴書 見た目がきれいかどうか。字がうまければ手書きも可。 日付:郵送する日。基本的に元号…

PHP26(QRコード生成)

PHP

ブログ・Webデザイン初心者の勉強「QRコード作成サイト」 Google Chart Toolsを利用。

レスポンシブWebデザイン03(デバイスごとの外部CSSの切り替え)

ブログ・HTML5の勉強「実践レイアウトパターン(1)」 外部CSSを切り替える head内に以下を記述 <linkrel="stylesheet"href="○○.css"media="only screen and (min-width:○○px)"> サイト全体共通+スマートフォン用CSSを読み込み、次にタブレット用CSS、PC用CSSを読み込む。 今回制作したサイト style-s.css、style-m.css、style-l.cssを使</linkrel="stylesheet"href="○○.css"media="only>…

レスポンシブWebデザイン02(MediaQuery)

ブログ・HTML5の勉強「Media Queries基礎」 PC上で各デバイス表示(Mac・Winやスマートフォン・タブレット)に切り替え safariを使用。 右上の歯車アイコンのメニューから[設定]を開く。 [詳細]タブの一番下の[メニューバーに”開発”メニューを表示]にチェッ…

CSS12(CSS3Generator)

CSS

web上でボタンや背景の材料がつくれる。

PHP24(フォームでパスワード入力、サーバーエラー表示、データ修正)

PHP

ブログ・PHPの勉強「スタッフ登録一覧(1)」 名前とパスワードを入力し、データベースに格納。 1)データベース作成 2)入力画面 <htmllang="ja"> <head> <metacharset="utf-8"> <title>おいしい野菜農園</title> <linkrel="stylesheet"href="./css/style.css"> </head> <body> <divid="container"> <header> <h1>スタッフ追加</h1> </header> <sectionid="form"> </sectionid="form"></divid="container"></body></htmllang="ja">

PHP23(フォーム→データベース→管理画面作成練習)

PHP

$_POSTを$_SESSIONに渡したら$_POSTは空になる。 $dbh -> query('SET NAMES UTF8');の「UTF8」を「UTF-8」と書いて動かず。先週は「NAMES」を「NAME」と書いて動かず。 お問い合わせフォーム・確認画面・送信画面と、入力内容を受け取るデータベースを作成。…

PHP22(データベースへの接続)

PHP

ブログ・PHPの勉強「お問い合わせ:データベース(1)~(6)」 mysql_connect mysql_select_db mysql_query ローカルでやったらレンタルサーバーでも。 そろそろポートフォリオサイト準備。 デジタルステージ live

jQuery08(複数の画像を効果的にみせるjQuery2つ)

Beautiful Background Image Navigation 例:お手本 画像のスライド mootoolsのimage menuというスクリプトを使う。 例:街をつくる建築作法 その他 jQueryをいろいろ使うと、対応バージョンの違いからかちあって動かなくなることがあるので注意。 HTMLでid…

レンタルサーバーへのアップデートでの注意点など

業者が指定するアップデート先フォルダ(web、www、public_htmlなど)がある場合はそこに保存する。サーバー直下に保存すると、公開するつもりのない保存データが見えてしまう。 サイトが完成したあとは、クライアントにID・パスワードを変更してもらい管理権…

HTML07(カラムレイアウト)

ブログ・HTML5の勉強「グリッドレイアウト」 headerとnavはたて並びで。 制作したもの↓ 左1列と右2列にdivを分けて、中にheader、nav、sectionを配置。 小さい画像はそれぞれの中でさらにfloatさせてます。 navの中をul・liで作ったものをsectionの画像に…