master

分支 (1)

标签 (3)

管理

管理

master

v1.2

v1.1

v1.0

blockly2python
/
example.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- SEO优化 -->
    <title>从Blockly到Python数据分析与可视化——一个基于Blockly可视化拖拽的教学平台</title>
    <!-- 网站说明 -->
    <meta name="description"
        content="从Blockly到Python数据分析与可视化——本网站基于 Blockly 可视化拖拽的编程方法，设计了一套从 Blockly 到 Python 数据分析与可视化的教学平台及案例。">
    <!-- 关键字 -->
    <meta name="keywords" content="Blockly,Python,数据分析,可视化,拖拽,编程">
    <!-- 引入favicon图标  -->
    <link rel="shortcut icon" href="images/favicon.ico">
    <!-- 引入初始化样式文件 -->
    <link rel="stylesheet" href="css/base.css">
    <!-- 引入公共样式文件 -->
    <link rel="stylesheet" href="css/common.css">
    <!-- 引入example.css -->
    <link rel="stylesheet" href="css/example.css">
    <link rel="stylesheet" href="lib/codemirror.css">

</head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-LHEJS09B49"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());

    gtag('config', 'G-LHEJS09B49');
</script>

<body>
    <!-- 导航模块 start -->
    <nav class="nav">
        <iframe width="100%" height="80" src="nav.html" frameborder="no" marginwidth="0" marginheight="0"
            scrolling="no"></iframe>
    </nav>
    <!-- 导航模块 end -->


    <!-- main主体模块 start -->
    <div class="container">
        <div class="left">
            <ul>
                <!-- <li>
                    <a href="#2022Blockly师资培训" target="_self" class="main-title" style="color:#3DA19F;font-weight: 600;">2022 From Blockly To Python 师资培训回顾</a>
                </li>

                <li>
                    <a href="#Day1" target="_self" class="sub-title">Day 1</a>
                </li>

                <li>
                    <a href="#Day2" target="_self" class="sub-title">Day 2</a>
                </li>

                <li>
                    <a href="#Day3" target="_self" class="sub-title">Day 3</a>
                </li> -->

                <li>
                    <a href="#Blockly概述" target="_self" class="main-title" >Blockly To Python 数据分析与可视化教程</a>
                </li>

                <li>
                    <a href="#Blockly概述" target="_self" class="sub-title">第一章
                        Blockly概述</a>
                </li>
                <li>
                    <a href="#Blockly与数据分析开发环境搭建与使用" target="_self" class="sub-title"
                        title="Blockly 与数据分析开发环境搭建与使用">第二章 Blockly 与数据分析开发环境搭建与使用</a>

                </li>
                <li>
                    <a href="#Blockly数据输入、显示、可视化" target="_self" class="sub-title" title="Blockly 数据输入、显示、可视化">第三章
                        Blockly 数据输入、显示、可视化</a>

                </li>
                <li>
                    <a href="#弹簧实验" target="_self" class="sub-title " title="基于 Blockly 数据分析模块探究弹力和弹簧伸长的关系（胡克定律）实验">
                        第四章 探究弹力和弹簧伸长的关系（胡克定律）实验</a>

                </li>

                <li>
                    <a href="#单摆实验" target="_self" class="sub-title " title="基于 Blockly 数据分析模块探究单摆测定重力加速度实验"> 第五章
                        探究单摆测定重力加速度实验</a>

                </li>
                <li>
                    <a href="#电阻实验" target="_self" class="sub-title " title="基于 Blockly 数据分析模块探究测定金属的电阻率"> 第六章
                        探究测定金属的电阻率</a>

                </li>
                <li>
                    <a href="#伏安实验" target="_self" class="sub-title " title="基于 Blockly 数据分析模块探究描绘小电珠的伏安特性曲线"> 第七章
                        探究描绘小电珠的伏安特性曲线</a>

                </li>
            </ul>
        </div>


        <div class="right">
            <div class="content">

<!--
                <h1 id="2022Blockly师资培训" style="margin-top: 0;">2022 From Blockly To Python 师资培训回顾</h1>

                <h2 id="Day1">Day 1</h2>
                <div>
                    <pre>
* Blockly概述
* Blockly编程环境介绍
* Blockly模块功能简介
* Blockly与Python环境搭建（Jupyter notebook）
* 实例1：hello, world
* Blockly与Python的基础知识
* Blockly与Python的选择结构
                    </pre>

                </div>
                <video width="100%" preload="none" poster="./images/poster.png" controls>
                    <source src="/video/2022/Day1.mp4" type="video/mp4">
                </video>


                <h2 id="Day2">Day 2</h2>
                <div>
                    <pre>
* 复习Day1的内容
* Python与Blockly的循环结构
* 例子：构建地铁1、2、3号线路，输出从上海南站到金科路站的两条线路
* 函数在Blockly与Python的定义
* 函数的参数
* Blockly与Python函数的创建与使用
* 函数的返回值
* 函数的嵌套调用
* 拓展内容：模块引用、全局变量和局部变量
                    </pre>
                2022年Day2录制视频不完整，可参考百度网盘里2021年Day2完整录屏。
                </div>

                <video width="100%" preload="none" poster="./images/poster.png"  controls>
                    <source src="/video/2022/Day2.mp4" type="video/mp4">
                </video>


                <h2 id="Day3">Day 3</h2>
<div>
    <pre>
* 复习Day2的内容
* Blockly Developer Tools 介绍
* 实践二次开发案例——拼图游戏的制作
* blockly数据处理和可视化模块介绍
* 四个实验的数据处理：
   * 胡克定律实验
   * 测重力加速度实验
   * 金属电阻率实验
   * 伏安特性曲线实验
    </pre>
</div>
                <video width="100%" preload="none" poster="./images/poster.png" controls>
                    <source src="/video/2022/Day3.mp4" type="video/mp4">
                </video> -->


                <!-- chapter1 -->

                <h1 id="Blockly概述">第一章 Blockly概述</h1>


                <video width="100%" preload="none" poster="./images/poster2.png" controls>
                    <source src="/video/1.1.m4v" type="video/mp4">
                    <source src="/video/1.1.webm" type="video/webm">
                </video>

                <iframe src="pdf/chp1.pdf" frameborder="0"></iframe>


                <!-- chapter2 -->
                <h1 id="Blockly与数据分析开发环境搭建与使用">第二章 Blockly 与数据分析开发环境搭建与使用</h1>

                <!-- <div class="video"><a href="video/chp4.mp4" target="_blank" title="Blockly与数据分析开发环境搭建与使用">观看本节视频讲解</a></div> -->
                <video width="100%" preload="none" poster="./images/poster2.png" controls>
                    <source src="/video/2.1.m4v" type="video/mp4">
                    <source src="/video/2.1.webm" type="video/webm">
                </video>
                <iframe src="pdf/chp2.pdf" frameborder="0"></iframe>


                <!-- chapter3 -->
                <h1 id="Blockly数据输入、显示、可视化">第三章 Blockly 数据输入、显示、可视化</h1>

                <!-- <div class="video"><a href="video/chp4.mp4" target="_blank" title="Blockly 数据输入、显示、可视化">观看本节视频讲解</a></div> -->
                <video width="100%" preload="none" poster="./images/poster2.png" controls>
                    <source src="/video/3.1.m4v" type="video/mp4">
                    <source src="/video/3.1.webm" type="video/webm">
                </video>
                <iframe src="pdf/chp3.pdf" frameborder="0"></iframe>

                <video width="100%" preload="none" poster="./images/poster2.png" controls>
                    <source src="/video/3.2.m4v" type="video/mp4">
                    <source src="/video/3.2.webm" type="video/webm">
                </video>
                <iframe src="pdf/chp3-2.pdf" frameborder="0"></iframe>


                <!-- chapter4 -->
                <h1 id="弹簧实验">第四章 探究弹力和弹簧伸长的关系（胡克定律）实验</h1>
                <video width="100%" preload="none" poster="./images/poster2.png" controls>
                    <source src="/video/4.1.m4v" type="video/mp4">
                    <source src="/video/4.1.webm" type="video/webm">
                </video>

                <!-- <div class="video"><a href="video/chp4.mp4" target="_blank" title="基于 Blockly 数据分析模块探究弹力和弹簧伸长的关系（胡克定律）实验">观看本节视频讲解</a></div> -->

                <iframe src="pdf/chp4.pdf" frameborder="0"></iframe>


                <!-- chapter5 -->
                <h1 id="单摆实验">第五章 探究单摆测定重力加速度实验</h1>

                <!-- <div class="video"><a href="video/chp4.mp4" target="_blank" title="基于 Blockly 数据分析模块探究单摆测定重力加速度实验">观看本节视频讲解</a></div> -->
                <video width="100%" preload="none" poster="./images/poster2.png" controls>
                    <source src="/video/5.1.m4v" type="video/mp4">
                    <source src="/video/5.1.webm" type="video/webm">
                </video>
                <iframe src="pdf/chp5.pdf" frameborder="0"></iframe>


                <!-- chapter6 -->
                <h1 id="电阻实验">第六章 探究测定金属的电阻率</h1>

                <!-- <div class="video"><a href="video/chp4.mp4" target="_blank" title="基于 Blockly 数据分析模块探究测定金属的电阻率">观看本节视频讲解</a></div> -->
                <video width="100%" preload="none" poster="./images/poster2.png" controls>
                    <source src="/video/6.1.m4v" type="video/mp4">
                    <source src="/video/6.1.webm" type="video/webm">
                </video>
                <iframe src="pdf/chp6.pdf" frameborder="0"></iframe>


                <!-- chapter7 -->
                <h1 id="伏安实验">第七章 探究描绘小电珠的伏安特性曲线</h1>

                <!-- <div class="video"><a href="video/chp4.mp4" target="_blank" title="基于 Blockly 数据分析模块探究描绘小电珠的伏安特性曲线">观看本节视频讲解</a></div> -->
                <video width="100%" preload="none" poster="./images/poster2.png" controls>
                    <source src="/video/7.1.m4v" type="video/mp4">
                    <source src="/video/7.1.webm" type="video/webm">
                </video>
                <iframe src="pdf/chp7.pdf" frameborder="0"></iframe>


            </div>
        </div>

    </div>
    <!-- main主体模块 end -->

    <!-- footer模块 start -->
    <footer class="footer">
        <div class="w">

            <iframe width="100%" height="50" src="foot.html" frameborder="no" marginwidth="0" marginheight="0"
                scrolling="no"></iframe>
        </div>
    </footer>
    <!-- footer模块 end -->
</body>
<script>
    var list = document.querySelector('.left').querySelectorAll('a');
    for (var i = 0; i < list.length; i++) {
        list[i].onclick = function () {
            for (var i = 0; i < list.length; i++) {
                list[i].style.color = 'black';
                list[i].style.fontWeight = 400
            }
            this.style.color = '#3DA19F';
            this.style.fontWeight = 600
        }
    }
</script>

</html>