LogoMark.png

季卓芸/MEMO の変更点


#author("2019-12-05T11:14:33+09:00","default:member","member")
*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 )
最终保存的文件夹内位置
#image(66.png)
~
~

***CMS


#image(CMS.jpg,right,30%)
~
~
~
~


 *** Webserver
#image(,right,30%)
~
~
~
~

#image(スクリーンショット 2019-09-19 10.41.48のコピー.png)
~
~
****UPLOAD写真PLUS 添加照片

#image(1.png)

*** Photoshop 照片调尺寸
1.サイズ * イメージ中で 画像解析度640
2.フェルタ中でレンズ辅正
3.保存
size


#image(2.png)
~~
~


*画像データの準備(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
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
箇条書き レベル1	- 	ul.list1 li
箇条書き第 レベル2	-- 	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>

#image(スクリーンショット 2019-10-24 11.32.20.png)
背景变色
**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