季卓芸/MEMO

MEMO

2019.10.24

• http://design.kyusan-u.ac.jp/OpenSquareJP/?JavaScript/Sample

• http://design.kyusan-u.ac.jp/OpenSquareJP/?ResponsiveDesign
  
  

2019.09.19

• http://design.kyusan-u.ac.jp/OpenSquareJP/?PHP
• http://design.kyusan-u.ac.jp/OpenSquareJP/?PHP/Sample01
• http://design.kyusan-u.ac.jp/OpenSquareJP/?PHP/Sample02
  
  

FZ
学園サーバーFTP接続先：ftp.ip.kyusan-u.ac.jp（　133.17.4.74　）
最终保存的文件夹内位置

CMS

*** Webserver

#image(): File not found: "" at page "季卓芸/MEMO"

*UPLOAD写真PLUS 添加照片

Photoshop 照片调尺寸

1.サイズ ＊　イメージ中で 画像解析度640
2.フェルタ中でレンズ辅正
3.保存
size

画像データの準備(2019.10.17)

画像のリサイズ

画像のリサイズを行うにはオンラインツールやスマホ、PCにインストールされた画像処理ツールを使います。

   画像のリサイズサービスの活用
       Bulk Resize Photos：https://bulkresizephotos.com/
       上記の利用方法解説 ：https://ferret-plus.com/1866
   Adobe Photoshop で「Web用に書き出し」を使う。
       Photoshop Express Editor というオンラインツールもあります。
   The GIMPなどのオープンソースフリーウエアを使う

第二回 2019.09.26.

PHP

Hypertext Preprocessor（ Personal HomePage Tool ）

PHPはオープンソースの汎用スクリプト言語で、Webアプリケーションの開発では最も頻繁に使われています。

file:///home/・・・/sample.html
自分のパソコンｈｔｔｐ
http://localhost/sample.php

一方、PHPが含まれたWebアプリケーションの動作確認をする場合は

http://www.kyusan-u.ac.jp/・・・/sample.php

JavaScript vs PHP

点击画面有按键🔘。 文件名dice.html

today :2019.10.03

PukiWiki サイト開発の前提

開発者自身が PukiWiki の使い方を熟知しておく必要があります。

以下のような機能については、PukiWikiのプラグインを活用すれば解決します。自分でプログラムやCSSを作り込む必要はありません。
検索機能：＃search プラグイン
投稿機能：＃article、 ＃comment プラグイン
最新の更新の表示：＃recent プラグイン
他のページの読み読み込み機能：＃include プラグイン
部分的な文字色の変更：＆color(red){・・・・}; プラグイン
部分的な文字サイズの変更：＆size(12){・・・・}; プラグイン
表組み：｜ (縦ストロークの利用)
囲み表示(整形済みテキスト)：行頭に半角スペース
左寄せ・センタリング・右寄せ：LEFT：、CENTER：、RIGHT：
参考：EditGuide

PukiWikiの記法とHTMLタグの関係理解
Wikiの記法がどのHTMLタグに対応するのか、その対応関係を知っておくことが必要です。以下、主なものを挙げます。
要素 Wikiの記法 HTMLタグ
ページ名 Wikiページ名 h1
大見出し *　 h2
中見出し **　 h3
小見出し ***　 h4
箇条書き レベル１ -　 ul.list1　li
箇条書き第 レベル２ --　 ul.list2　li
段落 記述+改行　 p
整形済みテキスト 行頭半角空白　 pre
引用 行頭に ＞　 blockquote p.quotation
リンク [ [　] ]　 a
強調 ’’文字列’’　 strong
斜体 ’’’文字列’’’　 em
取消線 ％％文字列％％　 del
学科サイトの個人ページで、プラグインの活用を含め、様々な書き方を試して下さい。また、ブラウザの分析ツールで、それぞれどのようなタグに置き換わっているか確認して下さい。

2019.10.24

HTML最上方

head>

   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width">
   <link rel="stylesheet" href="style.css">
     <script src="script.js"></script>
   <title>Sample Site</title>

/head>

HTML最上方《head》中添加

 <script src="script.js"></script>

背景变色

HTML

 <article>
         <button onClick="MyFunction()" >Click Me!</button>
         article 01
       </article>

JS

function MyFunction(){

 var obj = document.body;

obj.style.backgroundColor = 'blue';
}
～
～

下方变色（JS）

HTML

 <article>
         <button onClick="MyFunction2()" >Click Me!</button>
           article 02
         <header id="ABC">・・</header>

       </article>

JS

function MyFunction2(){

 var obj = document.getElementById('ABC');
 obj.style.backgroundColor = 'red';

}
～
～

下方有色到变色（JS）

HTML

 <article>
         <button onClick="MyFunction3()" >Click Me!</button>
           article 03
         <ul class="list">
          <li class="line">A</li>
          <li class="line">B</li>
          <li class="line">C</li>
          <li class="line">D</li>
          <li class="line">E</li>
          <li class="line">F</li>
          <li class="line">G</li>
          <li class="line">H</li>
          <li class="line">I</li>
          <li class="line">J</li>
          <li class="line">K</li>
         </ul>
       </article>

JS

function MyFunction3(){

   // lineクラスの把握（情報が line[0], line[1] ,line[2]・・に一括で入る）
  //var lines = document.getElementsByClassName('line');
  var lines = document.querySelector('.list').children;

   //  i 番目の pタグ部分の背景を赤に
   for( var i=0; i<lines.length; i++ ){
     lines[i].style.backgroundColor = 'green';
 }

}

CSS中添加 可表示***条形

article ul li{

  margin-bottom: 10px;
}

尺寸变换自由缩小扩大

HTML最上方《head》中添加

 <meta name="viewport" content="width=device-width">  

CSS

举例：/****** Header ************/部分

header h1{

 position: absolute;
 top: 2rem;
 left: 6rem;
 font-size: 2rem;
 color: white;

}

header h2{

 position: absolute;
 top: 5rem;
 left: 6rem;
 font-size: 2rem;
 color: white;

}

添加⬇️

@media only screen and (max-width: 768px) {
然后只输入调整的部分

   header h1{
     font-size: 1.5rem;
   }

举例：/****** NAV ************/部分

nav {

 padding: 1rem 3rem ;
 background:  #CCEAF2;

}

nav ul{

 display: flex;
 flex-direction: row;

}
nav ul li{

 margin-right: 2rem;

}
nav ul li a {

 color: white;

}

添加⬇️

@media only screen and (max-width: 768px) {

然后只输入调整的部分
横的改为竖的

 nav ul{
   flex-direction: column;
 }

}

CSS 尺寸中的 高度自由合理变换

例： 添加👉min-height: 8rem;
article{

 min-height: 8rem;
 padding: 1rem;
 margin-bottom: 2rem;
 background: #FFF;

}

関数の独立性を高める

可随机变换颜色

 ***  HTML側

   <button onClick="ChangeBGColor()" >Click Me!</button> 

   ***JS側

   // 背景色の変更（汎用性が低い）
   function ChangeBGColor( ){  
     var obj = document.body;
     obj.style.backgroundColor =RandomColor();
   }

   //ランダムな16進6桁のカラーコードを生成（汎用性が高い）
   function RandomColor(){ 
       var col = Math.floor( Math.random() * 0xFFFFFF ).toString(16);
       for( var i = col.length; i<6; i++ ) { col = '0' + col; }
       return '#' + col;
   }

情報科学研究科公式サイト開発

   WireFrame > pukiwiki.skin.php
   informationscience_20191205.zip

http://design.kyusan-u.ac.jp/socialdesign/?%E7%89%B9%E8%A8%AD/%E6%83%85%E5%A0%B1%E7%A7%91%E5%AD%A6%E7%A0%94%E7%A9%B6%E7%A7%91%E5%85%AC%E5%BC%8F%E3%82%B5%E3%82%A4%E3%83%88%E9%96%8B%E7%99%BA