可交互博文的小尝试

互动媒体技术实验报告——创意自画像 主题:用编程方式创作一幅介绍自己的作品 要求: 编程语言与工具:编程可以用p5,processing,若想用其他语言或工具,提前向老师说明情况; 作品: 一件编程创意作品,必须实现动态效果或交互效果;作品录制一段一分钟内的视频;作品可以是具象化地描绘自己的形象,也可以是任何形式表现自己的兴趣、追求、特色、经历等; 报告:写一篇文章,发表为博文/推文等形式,描述运用的规律,若用到了数学/物理/化学等... 阅读详情

由于优快云的原因,第二个交互程序基于webGL,在优快云上不能跑。有兴趣可以在我独立博客看到。原文链接

一直想在博文中加入可交互的内容,但对web一窍不通。如今找了个简单的方法,只要直接在markdown中嵌入html的iframe标签即可。具体交互的内容,单独写在一个html文件中,iframe引用这个文件。

最早出现这样的想法是看到很多大佬的博客,例如:

下面是交互的示例:

第一个来自《SIGHT & LIGHT》。

src="https://ncase.me/sight-and-light/draft7.html" width="840" height="360">

第二个来自《morphs paintings》,这个需要浏览器开启WebGL。

src=" http://alteredqualia.com/xg/examples/morphs_paintings.html" width="840" height="360">

之后自己会开始做一些尝试!梦想着自己也能创造那样 cool && elegant 的内容。

用Claude 3 Opus实现视频转博客的多模态工程实践 视频作为主流技术知识载体,面临检索难、复现难、引用难等核心痛点——无法Ctrl+F搜索关键算法,难以复制代码调试,也无法精准定位讲解片段。其本质是单向视听媒介与结构化文本需求之间的鸿沟。多模态大模型(如Claude 3 Opus)通过联合理解语音转录与关键帧图像,为‘视频→可读/可搜/可复用博客’提供了工程可行路径。该方案聚焦真实生产约束:突破20万token上下文瓶颈、保障代码与终端画面识别精度、实现图文强对齐与时间戳锚定。适用于技术博主批量转化课程、教育产品构建配套文本资产、开发者开展AI驱动的知识萃取 阅读详情

相关推荐

Metasploit渗透测试四阶段实战:从侦察到后渗透的工程化流程

渗透测试不是漏洞利用的炫技,而是基于阶段化逻辑的风险验证过程。其核心在于将目标资产识别、服务枚举、可控利用与证据提取构成闭环链条,强调可复现性、可审计性与工程规范性。Metasploit 作为标准化渗透框架,通过 auxiliary(侦察/枚举)、exploit(利用)、post(后渗透)等模块类型,映射真实攻防中的状态依赖与输入约束。尤其在企业红蓝对抗与合规评估场景中,模块选型、参数配置、失败归因及报告溯源能力,直接决定测试结果的技术可信度与管理说服力。本文聚焦 Metasploit 的四阶段流程设计哲学

weixin_30457465的博客 629

如何实现MARKDOWN网页内跳转?

■ 前言 在以下几种情况下,需要能够在网页内快速定位跳转: 如果网页实在是太长了,后面和前面的叙述需要相互引用,实现网页内跳转可以便于阅读和查看。 如果通过连接跳转到另外的长网页,也希望能够快速定位到相关内容,则需要提供在链接网页中跳转的方式。 JohnTsai在他的博文 MarkDown技巧:实现网页内跳转 中给出了两种使用MARKDOWN编辑器来获得网页内的跳转方式。下面基于他介绍的方法,来给出网页内跳转实现方法。   01网页内跳转 1.基本HTML标签实现方式 这个方式是由John

TSINGHUAJOKING 3321

C/C++关于VScode报错“终端将被任务重用,按任意键关闭”的解决方案

这其实不是一种报错,有这个提示的原因是本地端口是被共享的,所以必须关闭一个进程才能执行另一个,只需要对 tasks.json文件做一些修改即可。 报错时候 此时的tasks.json为: { "version": "2.0.0", "command": "g++", "args": ["-g","${file}","-o","${fileDirname}/${fileBasenameNoExtension}.exe"], // 编译命令参数 "problemMatche

Jerry Man的博客 6424

7-8 点赞(20 分) 微博上有个“点赞”功能,你可以为你喜欢的博文点个赞表示支持。每篇博文都有一些刻画其特性的标签,而你点赞的博文的类型,也间接刻画了你的特性。本题就要求你写个程序,通过统计一个人

#include #include int main() {     int n,k,a[1000],c[1000],i,j=0,p;///先合并成一个数组     scanf("%d",&n);     while(n--)     {         scanf("%d",&k);         for(i=0; i         {             sc

qq_40877575的博客 1万+

ASP.NET Core Identity + Mysql(实战一)——注册登陆

在进行实战之前,我们先来了解一下Identity。 ASP.NET Core Identity是用于构建ASP.NET Core Web应用程序的成员资格系统,包括成员资格、登录和用户数据存储。简单的来讲包括: 1.用户数据存储(使用任意你喜欢的关系型数据库,从sqllite到mysql、sqlserver等等,由Entity Framwork 支持) 2.登陆、注册外加身份认证(基于coo...

weixin_40359716的博客 1398

科研党必备:5个高效查找论文开源代码的宝藏网站(附实战技巧)

本文为科研工作者推荐5个高效查找论文开源代码的宝藏网站,包括ResearchCode和PapersWithCode等工具,提供实战技巧如进阶搜索语法和代码质量评估体系,帮助快速定位高质量实现并提升复现效率。特别分享隐藏代码库的检索方法和智能工作流配置,助力科研党高效完成论文复现。

weixin_28829629的博客 401

7-2 点赞(20 分)

题目链接 微博上有个“点赞”功能,你可以为你喜欢的博文点个赞表示支持。每篇博文都有一些刻画其特性的标签,而你点赞的博文的类型,也间接刻画了你的特性。本题就要求你写个程序,通过统计一个人点赞的纪录,分析这个人的特性。 输入格式: 输入在第一行给出一个正整数N(≤1000),是该用户点赞的博文数量。随后N行,每行给出一篇被其点赞的博文的特性描述,格式为“K F​1​​⋯F​K​​”,其中1≤K≤...

王小平 2610

解密高并发系统的瓶颈:五大解决方案

在互联网应用中,高并发是指在短时间内同时有大量的用户访问一个网站或服务,造成系统压力过大,导致服务器宕机或服务停止响应的情况。高并发是互联网应用面临的一个重要问题,需要采取一系列措施来解决。负载均衡、缓存、数据库优化、异步处理和分布式架构是解决高并发问题的主要方法。在实际应用中,需要根据具体情况选择不同的方法来解决高并发问题。在高并发情况下,使用负载均衡是解决问题的一种常见方法。负载均衡可以通过将请求分配到多个服务器上,从而减少单个服务器的负载。这可以通过硬件设备或软件实现。

BUG制造者:图图 <p>这是一个P标签</p> 3902

L2-021 点赞狂魔(25 分)

L2-021 点赞狂魔(25 分) 微博上有个“点赞”功能,你可以为你喜欢的博文点个赞表示支持。每篇博文都有一些刻画其特性的标签,而你点赞的博文的类型,也间接刻画了你的特性。然而有这么一种人,他们会通过给自己看到的一切内容点赞来狂刷存在感,这种人就被称为“点赞狂魔”。他们点赞的标签非常分散,无法体现出明显的特性。本题就要求你写个程序,通过统计每个人点赞的不同标签的数量,找出前3名点赞狂魔。 输...

码奴生来就只知道前进 4156

使用Kettle进行数据同步(增量)

文章目录kettle介绍kettle安装kettle使用使用kettle同步关系型数据库数据(MySQL示例)1. 创建一个转换2. 选择表输入3. 格式转换4. 执行脚本5. 创建job使用kettle同步NoSql数据(MongoDB示例)创建转换时的注意事项MongoDBInput怎么创建job的创建如何在Linux上面运行已经创建好的job?1、把创建好的job传输到Linux机器上面2、编辑kjb文件3、执行任务 kettle介绍 Kettle 是一款国外开源的 ETL 工具,纯 Java 编写

JenKin的博客 7349

node运行项目-Network: unavailable-没有ip地址

vscode运行vue项目后发现Network: unavailable 是什么情况呢?可能有一下三种情况:1.多个网卡原因:打开网络共享中心,把多余的网络禁用掉,只留一个2.在中配置host及public3.系统环境变量问题。

JackieDYH的博客 7538

前端和后台如何做交互

1、前端请求数据URL由谁来写 在开发中,URL主要是由后台来写好给前端。 若后台在查询数据,需要借助查询条件才能查询到前端需要的数据时,这时后台会要求前端提供相关的查询参数(即URL请求的参数)。 2、接口文档主要由谁来写 接口文档主要由后台设计和修改。 后台直接跟数据打交道,最清楚数据库里有什么数据,能返回什么数据。 前端只是数据的被动接受者,只是接口文档的使用者。 使用过程中,发现返回的数据...

caopinpin的博客 1534

MATLAB - Gazebo 联合仿真 —— 使用 UR10 机械臂检测和采摘水果

本示例演示如何在 Gazebo 物理模拟器中设置 Universal Robotics UR10 机械臂和仿真环境。您需要配置一个机器人从树上摘苹果的仿真环境。本示例演示如何利用这些工具箱,使用 Universal Robotics UR10 机械手模拟机器人检测并从树上摘取苹果。Robotics System Toolbox™ - 在 Simulink® 和 Gazebo 中对机械手进行建模、规划和模拟。Navigation Toolbox™ - 生成三维环境的占用图。

机器人控制与仿真应用 4182

从零到一:技术博文创作的灵感挖掘与框架构建

本文系统介绍了技术博文创作的灵感挖掘与框架构建方法论,从日常工作痛点、新技术探索等场景中获取灵感,构建'问题-方案-延伸'的三段式结构,并通过技术验证、叙事优化和体验增强打磨内容。文章还分享了现代技术写作工具链与协作技巧,帮助开发者高效产出专业且易懂的技术内容。

weixin_28323057的博客 273

英飞凌 AURIX TC3XX 系列单片机的 NVM-Flash 介绍

简单介绍英飞凌 AURIX TC3XX 系列多核单片机的 Flash,便于快速上手使用

大橙子的博客 6637

IEM模型,地表粗糙度模拟

利用微波反演土壤水分时候,利用IEM模型可以实现对随机地表的模拟

在博客评论区引导用户购买Token进行模型推理体验

通过在博客评论区嵌入可交互的深度学习环境,引导用户使用Token体验模型推理。这种模式以极低门槛推动读者从‘看懂’到‘做到’,结合容器化技术与微计量经济系统,实现技术传播与商业可持续的平衡。

weixin_34064233的博客 960

汉书HE8,好用的汇编代码编写工具

汉书HE8,好用的汇编代码编写工具早期编写汇编代码所用功能强大

html换行符_用 3Dmol.js 在 html 和 markdown 中插入结构模型

可互动的结构模型可以让网页文章变得更为生动,写在笔记里也可以更为方便地随时查看模型的细节。之前使用过 JSmol 来实现这个功能,今天来尝试一下更为轻量化的 3Dmol.js[1]结构文件格式的转换3Dmol.js 支持的文件格式包括 pdb, sdf, mol2, xyz, cube如果手里的文件是其他格式,可以通过 ase 来进行转换。命令行运行如下即可:$ ase convert CONTC...

weixin_39854730的博客 588

数学建模模型总结

这是本人在两年内准备参加数学建模竞赛搜集到的模型资料,已经经过了本人的筛选和整理,希望能够对准备参加数学建模竞赛的学弟学妹们提供一些帮助!

Devexpress16.2.6破解工具

Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具

Ext JS 4倒计时:图形和图表

      基本图形功能       一直以来,在Web应用程序中进行绘图是很困难的事情。虽然我们很希望在应用程序中创建丰富的交互式图表或其他图像,但是HTML真的是不是这块料。通常,我们需要使用到Adobe Flash,但这给我们带来了两个难题:我们习惯书写Javascript代码,而且Flash并不是所有设备都支持。解决这个问题的方法就是使用一个纯Javascript的图形库,通过它创建丰富的图形和图表。它可以运行在ie6到iOS等任何平台,而且它已经成为Sencha Touch的附件。      

黄灯桥的专栏 1万+

如何用Unity和Cardboard做一款VR游戏

http://58kaifa.com/article/440 【Gamelook专稿,转载请注明出处】 Gamelook报道/随着Oculus宣布1月6日开启预售,2016年很可能成为VR游戏元年,但很多的调研显示,手游设备才是市场增长的关键,SuperData发布的报告显示,2016年全球VR游戏市场规模预计在51亿美元左右,消费者设备安装量在3890万左右,凭借价格门槛

ZON 1780

Centos安装docker与使用说明

本文主要介绍 Centos 下如何安装 docker,并给出一些基本的使用 case1. 安装说明通过脚本进行 docker 安装,比较简单curl -fsSL https://get....

小灰灰blog的专栏 250

软硬交互代码示例_Oculus展示一批全新UE4示例,涵盖移动机制、清晰文本、镜子、烘培、颜色分级等...

开发虚拟现实体验将是一次激动人心的冒险,但如果不知道从何开始,你可能会感动茫然生畏。代码示例可以帮助你完成旅程的第一步,特别是对于一个全新的知识空间,比如说XR。示例项目可以为你提供一个简单的实验路径,并允许你将其作为未来构思的跳板。Oculus日前展示了一批全新的UE4示例。从移动机制到平台权限,再到呈现清晰文本,它们将向你展示面向虚拟现实的各种基本功能。下面描述的大多数示例都附带一个解释项目构...

weixin_29237635的博客 182

2025 程序员必不可少的 9 个工具

2025年即将过去一半了,哪些开发工具值得我们投入时间去关注和学习呢?经过一番精挑细选和深度洞察,我为你们带来了这份“2025 开发者必备工具清单”,希望能为你打开新世界的大门,助你编码如神,事半功倍!

Sammyyyyy的博客 1082

二三层转发原理及过程_容器网络 calico 基本原理和模拟

摘要在容器网络跨 Host 互联方案中,除了 Flannel 的隧道实现方案,还有一种比较主流的纯三层路由的方案 Calico ,与 Flannel 不同的是 Calico 不使用隧道或 NAT 来实现转发,而是巧妙的把所有二三层流量转换成三层流量,并通过 host 上路由配置完成跨 Host 转发,本文对 Calico 的方案进行基本原理分析和模拟验证。简介Calico 官方定义如下:Calic...

weixin_39640520的博客 973

STM32CubeMX安装步骤+Java环境配置:详细说明与示例

手把手带你完成STM32CubeMX安装步骤,同步搞定Java运行环境配置——从JDK下载、环境变量设置到CubeMX验证运行,每一步都配实操截图和常见报错解析,确保嵌入式开发环境一次配通。

weixin_33812391的博客 416

第六届中国开源年会(COSCon'21)我在成都等你!

“点击蓝字/关注我们”| 作者:COSCon'21 组委会|编辑:周晶晶| 设计:朱亿钦|责编:Corrie01简介活动名称:2021中国开源年会活动主题:“开心开源 Happ...

开源社KAIYUANSHE的博客 728

Gemini 3 发布:当 AI 开始“理解”物理世界与因果逻辑

Gemini 3 的发布,让我们隐约看到了 GUI(图形用户界面)时代的黄昏。当 AI 能够理解物理世界,能够像资深工程师一样规划复杂任务,我们操作电脑的方式将从“点击菜单”彻底转变为“意图表达”。Google 这一次,不仅仅是发布了一个模型,而是发布了一个能够与现实世界“共鸣”的数字大脑。像资深工程师一样规划复杂任务,我们操作电脑的方式将从“点击菜单”彻底转变为“意图表达”。Google 这一次,不仅仅是发布了一个模型,而是发布了一个能够与现实世界“共鸣”的数字大脑。

十年通信老兵的技术修炼之路——从3G到5G,从地面基站到卫星通信。 806
上一篇: Ludum Dare 41 作品《Moth and Bat》
下一篇: 2018微软秋招面试经验(软件工程师岗位)
QZQmmmm
博客等级 码龄11年 77粉丝 110原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值