My Web道

WEB制作科 受講記録 …とその後も続くWEB制作に関する活動・学習記録です。

※ 当サイトはアフィリエイト広告を利用しています

2014-01-01から1年間の記事一覧

2014/12/28 jQueryのプラグイン「DataTables」を使ってみた

DataTables とは、 HTMLテーブルをとっても高機能にしてくれる jQueryのプラグイン たとえば、以下のような機能がとっても簡単に実装できます。 テーブルヘッダにソート機能を付け、列ソートができます。 フィルター機能で、検索がとっても簡単にできます。 …

2014/09/10 RSSフィードをサイトに実装する

RSSフィードを簡単にサイトに表示するには Google Feed APIを使って、簡単にRSSフィードをサイトに表示する方法 Google Feed APIを使うと、簡単にRSSフィードをサイトに表示することができると知りました。 試しに、自身のブログサイトからfeed用URLを取得し…

2014/09/05 本日のWeb道 学習メモ

【本日のWeb制作 学習メモ】 MACを使いこなす(ファンクション編) jQueryを使ったWebページ制作 mysql 文字化け対応 1. MACを使いこなす(ファンクション編) WindowsからMACを使うようになって困ったこと Windowsでは普通に使えていた入力変換ができない!…

2014/08/08 ショッピングサイトを作る

【本日のWeb制作 学習メモ】 ショッピングサイトを作ってみる PHPの演習として、ショッピングサイトを作ってみます。 作成ページ(ページ遷移)は以下の通り 1.スタッフ追加画面 2.入力チェック画面 3.スタッフ追加完了画面 4.スタッフ一覧画面 5.スタッフ …

2014/08/07 ロジックとデザインの分離(送信した値を出力)

【本日のWeb制作 学習メモ】 [PHP] ロジックとデザインの分離 PHPをHTMLに組み込む際、ロジックとデザインを分離してコーディングするように配慮する。 理由: チームで分業の場合など、WEBデザイナーがPHPを理解できるとは限らない。 ソースのわかりやすさ…

その後のWeb制作活動について

2014年7月に制作科受講終了以後の活動について、その後の活動は、「まだまだ続くよ…」でと告知していましたが、 やっぱり引き続きこちらで続きを投稿します。引き続きよろしくお願いいたします。

はじめに

改めまして 求職者支援訓練後も続く、My Web道…Web制作に関する学習メモを公開していきます。

2014/07/25 修了日

修了日を迎えて… 6ヶ月に及ぶWeb制作科の授業が終了しました。毎日9時から14:25までの5コマの授業、 開始当初は結構長いと思われた6ヶ月は、始まってしまえば、あっという間の6ヶ月でした。 修了後、Web制作に関わるのか、全然違う職場に行くのかは、人それ…

Bootstrap サイトにメールフォームを作成

Bootstrapテンプレートで作成したサイトに、 メールフォームを設置しました。 《index.php》以下を、htmlの直前に記述

7/15 Portfolio 制作に向けて (2)

本日の授業テーマPortfolio制作に向けて 本日の授業内容プログラマー志望の場合のアプローチは?プログラムを公開する以下のサイトを活用するjsdo.it - Share JavaScript, HTML5 and CSS : http://jsdo.it/ ポートフォリオ制作に向けてポートフォリオ制作時…

7/14 Portfolio 制作に向けて (1)

本日の授業テーマ Portfolio制作に向けてポートフォリオ制作に向けての学習メモ 本日の授業内容 [Tips] マウスオーバーhoverがうまくいかないときに参考にしたいサイト hover疑似クラスは宣言順序に注意が必要です - Web標準普及プロジェクト http://www.moz…

6/27 [PHP/SQL] データベース(DELETE / UPDATE)

本日の授業テーマ [PHP] データベース(登録内容削除) [PHP] データベース(登録内容修正) 本日の学習内容 [PHP] データベース(登録内容削除) SQLでデータを削除する(DELETE文) SQLでテーブルからデータを削除するには? DELETE FROM `items` WHERE `ite…

6/26 [PHP/SQL] データベース (INSERT / DELETE)

本日の授業テーマ [PHP] データベース 新規商品登録 (INSERT) 登録商品削除 (DELETE) 本日の学習内容 [PHP] データベース (前回のおさらい) ここまでの処理の流れを確認(ログインから新規商品登録完了まで) 新規商品登録確認画面 (entry_confim.php) [処…

6/25 [CSS3] 確認テスト/ 入力フォーム

本日の学習課題[CSS3] 確認テスト入力フォーム 本日の学習内容~まとめと感想~ [CSS3] 確認テスト(演習ドリル10) 以下、昨日の確認テストで学んだ内容の復習テストです。問題【01】CSS3で影をつける場合のプロパティ名を書きなさい答え: box-shadow text…

6/24 CSS確認テスト / Webフォントの活用 / Zen-coding(Emmet)の活用

本日の授業テーマ CSS3確認テスト Webフォントの活用 SVG画像の活用 Syntax Highlighter Zen-coding(Emmet)の活用 本日の学習内容 CSS3確認テスト 【問題】【問1】CSS3で影をつける場合の、2つのプロパティ名を書きなさい答え: box-shadow text-shadow参…

6/19 Sublime Text3 日本語化 / [PHP]データベース(ログイン・ログアウト・商品情報登録)

各種ソフトインストール・日本語化(Sublime Text3 インストール・日本語化) [PHP]データベース(ログイン・ログアウト・商品情報登録) [課題] ▼各種ソフトインストール・日本語化 Sublime Text3 インストール・日本語化 Eclipseインストール・日本語化 + …

6/18 [Portfolio] Web制作者としての就職活動心得 / ポートフォリオ制作

本日の授業テーマ Web制作者としての就職活動心得 ポートフォリオ制作 本日の学習内容~まとめと感想~ Web制作者としての就職活動心得 Web制作者としてのアピール効果の高い履歴書・職務経歴書の作成 ポートフォリオを制作する 職務経歴書 デザイン会社に応…

6/17 [HTML5/CSS] レスポンシブサイト(固定レイアウト)/ [CSS3] 角丸 / [PHP] 各種RSSを取得

[HTML5/CSS] レスポンシブサイト(固定レイアウト) [CSS3] 角丸 [PHP] 各種RSSを取得 [HTML5/CSS] レスポンシブサイト(固定レイアウト) 以下リンク先の演習課題によりレスポンシブサイトの作成方法を学びました。[課題] 固定レイアウトパターン:構造 - W…

6/16 [PHP] 確認テスト(データベースへの接続) / [HTML5/CSS] レスポンシブサイト(可変レイアウト)/ [CSS3] シャドウ

[PHP] 確認テスト(データベースへの接続) [HTML5/CSS] レスポンシブサイト(可変レイアウト) [CSS3] シャドウ(ボックス・テキスト) [PHP] 確認テスト(データベースへの接続) 前回の授業の復習として、以下の課題を実施 【課題】 ブラウザの画面に、以…

6/13 [PHP] 商品管理データベース(try catchステートメント/ログイン情報の照合)

[PHP] 商品管理データベース [PHP] 商品管理データベース 商品登録データベースを作成します。 【機能】 認証(ログイン・ログアウト)機能 登録商品一覧画面 新規商品登録 登録内容修正 登録商品削除 【作業・確認事項】[作業の流れ]1. テーブル作成(phpMy…

6/12 [HTML5] 習得度確認テスト / [PHP] メールフォーム

6/12 授業 [HTML5] 習得度確認テスト [PHP] メールフォーム [HTML5] 習得度確認テスト 【問1】HTMLの最新バージョンは? 【答】 HTML5参照: http://app-review.jp/news/159165【問2】見出しの要素は6種類あります。すべて記述しなさい。 【答】 h1, h2, h3,…

6/10 [HTML5] レスポンシブWebデザイン

[HTML5] レスポンシブWebデザイン 参照: http://d.hatena.ne.jp/web-0127/20140701/p1 レスポンシブWebデザイン デバイスごとのマルチソースではなく、ワンソースで対応する参考: slideshare 「レスポンシブWebデザインの基礎」 http://www.slideshare.net…

6/9 HTML5(構造化要素) / WordPress(カスタマイズ)

HTML5(構造化要素) WordPress(カスタマイズ) HTML5(構造化要素) 講師ブログ(対象ページ) http://d.hatena.ne.jp/web-0127/20140601/p1 http://d.hatena.ne.jp/web-0127/20140602/p1 参考サイト: slideshare http://www.slideshare.net/myakura/html…

6/5 [PHP] メールフォーム

[PHP] メールフォーム [PHP] メールフォーム 今日は、メールフォーム設置時に考慮すべきセキュリティ面についての学びです。 それらを考慮のうえ、引き続き、作成中のメールフォームに機能を追加していきます。 send_mail について WordPressではできない。 …

6/4 [PHP] メールフォーム(エラーチェック機能の追加)

本日の学習課題[PHP] メールフォーム(エラーチェック機能の追加)文字数チェック全角半角チェック メールアドレスチェック 本日の進行 init.phpの書き換え 以下書き換え [変更前] require_once 'init.php';[変更後] require_once(dirname(__FILE__)).'/init…

5/30 [PHP] 習熟度テスト(5/29実施) 回答

[PHP] 習熟度テスト(問と答え) 【問1】変数「$a」に「1000」を代入し、変数「$a」の値をブラウザ上に表示するように記述しなさい。 答え:

5/29 [PHP] メールフォーム

[PHP] メールフォーム(サーバーへアップロード) [PHP] メールフォーム(サーバーへアップロード) 【作業手順】 1. サイト管理(XAMPP環境) Dreamweaver-サイトの管理: アップロード用データを新規サイトに設定しておく 2. FFFTP 設定 アップロード先の…

5/26 WordPress 基本設定

- WordPress 基本設定 WordPress 基本設定 では、以下、WordPressを使いはじめるための基本設定を行なっていきます。 1. テーマを選ぶ 管理者メニューの「外観」-「テーマ」を選択テーマ画面 2. テーマを適用する 使いたいテーマの上にカーソルを移動、 「有…

5/23 WordPess(環境準備)

Wordpress インストール WordPress インストール 今日からWordPressの授業が始まりました。 使用テキストは、こちら、「WordPress レッスンブック 3.x対応」です。WordPress レッスンブック 3.x対応posted with amazletエビスコム(著) 出版社:ソシム Amazon…

5/22 [PHP] フォームの練習

本日の授業では、PHPによるフォーム作成の実習を行いました。 以下、本日の演習におけるポイントです。ポイントHTML5に対応させるplaceholderrequiredautofocusencode処理を関数化placeholderその他お問い合わせフォームとアンケートフォームは分けても良い …

※ 当サイトはアフィリエイト広告を利用しています