纯代码开发c# ui_UI代码挑战#1-心跳 青旅半醒 2022-12-03 08:56 101阅读 0赞 纯代码开发c\# ui **Do you ever find that the UI screens that we see in blockbuster movies, television, and games are so much more fun than the UIs we might build at work? Here’s your chance to code something fun and maybe even win a $100 Amazon Gift Card.** **您是否发现我们在大片的电影,电视和游戏中看到的UI屏幕比我们在工作中可能创建的UI有趣得多?** **这是您编写有趣的代码的机会,甚至可能赢得$ 100的Amazon礼品卡。** ![Code Challenge \#1][Code Challenge _1] Starting from today, we’ve got 4 quick fortnightly UI coding challenges to test your skills and problem-solving abilities. You get the chance to show off your skills while maybe learning a trick or two from others. There is no single ‘correct’ way to tackle these challenges. 从今天开始,我们每两周会进行4次快速的UI编码挑战,以测试您的技能和解决问题的能力。 您有机会炫耀自己的技能,同时可以从他人那里学习一两个技巧。 没有单一的“正确”方法来应对这些挑战。 At the end of the week (next Wednesday) we’ll publish a post on the best solutions submitted and pick our all-around favorite for the prize. That winner will receive: 在本周结束时(下一个星期三),我们将发布有关最佳解决方案的帖子,并选择我们最喜欢的解决方案。 该优胜者将获得: * The glory of being adjudged our favorite solution 被裁定为我们最喜欢的解决方案的荣耀 * A $100 Amazon gift card 价值100美元的亚马逊礼品卡 We’ll also give away 2 Premium memberships and some highly-sought-after SitePoint t-shirts to runners-up. 我们还将向亚军赠送2个高级会员和一些备受追捧的SitePoint T恤。 Let’s get the first challenge started! 让我们开始第一个挑战! ## 挑战1:创建ECG / EKG \*心率UI动画 **(**Challenge \#1: Create an ECG/EKG\* Heart Rate UI Animation**)** ## ![Bio monitor in Luke Cage][] Clockwise from top left: Luke Cage ([S01E10][]), Cabin in the Woods ([2012][]), Oblivion ([2013][]), & Casino Royale ([2006][]). 左上角顺时针方向:卢克·凯奇( [S01E10][] ),树林小屋( [2012][] ),遗忘( [2013][] )和皇家赌场( [2006][] )。 We’ve all seen this common movie, television, and games trope – the ‘real-time heart rate monitor/electrocardiograph’. Sometimes it’s a plot point in a contemporary medical drama (i.e. Grey’s Anatomy, ER, etc). More often we see it as cutting-edge technology for elite super-spies (e.g. James Bond or Mission Impossible) or the far-future bio-monitoring of sci-fi space-marines (e.g Aliens or Oblivion). Design teams spend thousands of hours crafting these [FUIs][] (Future/Fantasy/Fictional User Interfaces) to look as authentic and believable as possible. Now it’s your turn. 我们都已经看过这种常见的电影,电视和游戏机,即“实时心率监测器/心电图仪”。 有时,这是当代医学戏剧中的情节(例如,《灰色解剖学》,《 ER》等)。 我们更经常将其视为精英超级间谍(例如James Bond或不可能的任务)的尖端技术或科幻太空船的远距离生物监控(例如Aliens或Oblivion)。 设计团队花费数千小时来制作这些[FUI][FUIs] (未来/幻想/虚构用户界面),以使其看起来尽可能真实可信。 现在轮到你了。 ## 任务 **(**The Task**)** ## Your task – *should you choose to accept it* – is to create an animated ECG/EKG bio-monitor display panel. You can use whatever technologies you like – **as long as you can present your solution as a CodePen**. That includes but isn’t limited to: 您的任务( *如果您选择接受的话* )是创建一个动画的ECG / EKG生物监测器显示面板。 您可以使用任何喜欢的技术- **只要您可以将解决方案显示为CodePen即可** 。 这包括但不限于: * HTML/CSS HTML / CSS * Canvas 帆布 * SVG SVG * WebGL WebGL * D3 D3 * Any other web technology 任何其他网络技术 Generally, these UI screens are shown in ‘dark mode’ and dominated by **at least one** (but often more) left-to-right-looping graph lines tracing out a heart rate. Feel free to expand the UI to include other cool elements (core temperature, blood pressure, etc), but the squiggly, beating graph line/s is the core element we’re interested in. 通常,这些UI屏幕以“暗模式”显示,并以**至少一条** (但经常是更多条)从左到右循环显示心率的图形线控制。 随意扩展用户界面以包括其他很酷的元素(核心温度,血压等),但是曲折,跳动的图形线是我们感兴趣的核心元素。 In the CodePen below, I’ve dropped in a temporary animated GIF as a rough visual guide, but please take your inspiration from whatever movies, TV shows, or games you like. 在下面的CodePen中,我放入了一个临时的GIF动画作为粗略的视觉指南,但请从您喜欢的电影,电视节目或游戏中汲取灵感。 ### 分叉此Codepen开始 **(**Fork this Codepen to Start**)** ### See the Pen [ Machine that goes Ping!][Machine that goes Ping] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][]. 看到[去Ping][Machine that goes Ping]的制笔[机!][Machine that goes Ping] 通过SitePoint( [@SitePoint][SitePoint]上) [CodePen][] 。 ### 注意事项... **(**Things to keep in mind…**)** ### 1. Humans are **NOT** perfect clockwork machines – we need your line to show authentic organic, *random-looking* variation. 人类**不是**完美的发条机–我们需要您的产品线来展示真实的, *随机的*有机变化。 2. Typically the line is written to screen sharp but then fades to black before being overwritten on the next pass. 通常,该行会被清晰地写入屏幕,但是在下一次遍历被覆盖之前会逐渐变黑。 3. No GIF animation, video or After Effects – we’re looking for a code solution. 没有GIF动画,视频或After Effects –我们正在寻找代码解决方案。 4. Solutions should be a fork of the CodePen above (so we can keep track of solutions). Feel free to add/change/remove whatever you like from the fork. 解决方案应该是上述CodePen的分支(因此我们可以跟踪解决方案)。 随意从叉中添加/更改/删除任何内容。 ### 我该如何输入? **(**How do I enter?**)** ### Easy. Just post a link to your CodePen.io fork in the comments below with a short explanation of what you did and why. If you’ve got more than one idea, you can enter more than once. For simplicity, don’t enter more than one variation on the same idea. 简单。 只需在下面的评论中发布指向您的CodePen.io分支的链接,并简要说明您所做的事情和原因。 如果您有多个主意,则可以输入多个。 为简单起见,请不要在同一创意上输入多个变形。 ### 您将如何挑选获胜者? **(**How will you pick the winner?**)** ### We’ll be picking the winner based on three criteria: 我们将根据以下三个条件选择获胜者: 1. **Code elegance and effectiveness:** Fewer files is better. Fewer characters is better. Simplicity and code readability is rated highly. **代码优雅而有效:**文件越少越好。 字符越少越好。 简单性和代码可读性得到很高的评价。 2. **Look and feel:** The more ‘movie authentic’ your UI looks the better **外观:**用户界面越“真实电影”越好 3. **Cleverness/inventiveness:** This is pure X-factor stuff we haven’t thought of. Scriptability, audio, 3D, whatever… **聪明/创造力:**这是我们**从未想到过的**纯粹X因子的东西。 脚本性,音频,3D等 There’s no pure mathematical formula for picking the winner, so it will come down to what Kishen, Joel and I agree on. 没有纯粹的数学公式来选择获胜者,所以这将取决于基申,乔尔和我的同意。 ### 您什么时候判断? **(**When will you judge it?**)** ### The Challenge opens for entries on **Wednesday 5th June at 9:00 am PST** and closes a week later (**Wednesday 12th June 9:00 am PST**). 挑战赛将于**6月5日** ( **星期三)** **太平洋标准时间上午9:00**开放,而一周后( **6月12日** ( **星期三** ) **太平洋标准时间上午9:00** )结束。 Best of luck. We’re looking forward to what you can come up with. 祝你好运。 我们期待您能提供什么。 #### [在此处发布您的条目][Link 1] **(**[Post your entry here ][Link 1] **)** #### ###### (\* ECG / EKG: [心电图][Link 2] ) **(**(\* ECG/EKG: [Electrocardiography][Link 2])**)** ###### > 翻译自: [https://www.sitepoint.com/ui-code-challenge-1-heartbeats/][https_www.sitepoint.com_ui-code-challenge-1-heartbeats] 纯代码开发c\# ui [Code Challenge _1]: /images/20221123/32396c4ffa3943d6867fa24459c40ba3.png [Bio monitor in Luke Cage]: /images/20221123/ade274ef3d454d9baac6d36f3eaecf11.png [S01E10]: https://getyarn.io/yarn-clip/f3390661-fc76-4ecc-a08e-0ce458bd99ab [2012]: https://www.youtube.com/watch?v=E4LBIs87F68 [2013]: https://en.wikipedia.org/wiki/Oblivion_%282013_film%29 [2006]: https://www.youtube.com/watch?v=LGYLe01oT6s [FUIs]: https://www.hudsandguis.com/ [Machine that goes Ping]: https://codepen.io/SitePoint/pen/JqxyNY/ [SitePoint]: https://codepen.io/SitePoint [CodePen]: https://codepen.io [Link 1]: https://www.sitepoint.com/community/t/sitepoint-ui-code-challenge-1-heartbeats/329921 [Link 2]: https://en.wikipedia.org/wiki/Electrocardiography [https_www.sitepoint.com_ui-code-challenge-1-heartbeats]: https://www.sitepoint.com/ui-code-challenge-1-heartbeats/
相关 代码维护挑战:Java代码规范与重构实例 在软件开发过程中,代码的规范性和可重构性是关键的挑战。以下是一个使用Java进行代码规范和重构的例子: 1. **代码规范**: - 命名约定:类名首字母大写,方法名和 ゝ一纸荒年。/ 2024年09月15日 20:09/ 0 赞/ 19 阅读
相关 代码优化挑战:减少Java代码冗余实例 在Java编程中,冗余代码通常意味着重复的工作或者逻辑。优化的目标是消除这些重复,提高代码的可读性和维护性。以下是一些减少Java代码冗余的例子: 1. **使用方法和变量* 小灰灰/ 2024年09月10日 09:24/ 0 赞/ 16 阅读
相关 MacOS-MAC 开发和iOS开发不同之处(纯代码) 一、坐标系不同 iOS 零点在左上角 mac 零点在左下角 二、ViewController 初始化不同 iOS alloc init 会自动创建空view ma 「爱情、让人受尽委屈。」/ 2023年10月04日 13:03/ 0 赞/ 8 阅读
相关 纯代码开发c# ui_UI代码挑战#1-心跳 纯代码开发c\ ui Do you ever find that the UI screens that we see in blockbuster movies, tele 青旅半醒/ 2022年12月03日 08:56/ 0 赞/ 102 阅读
相关 C# log4net纯代码设置参数 `log4net.config`参数设置 <?xml version="1.0" encoding="utf-8" ?> <configuration> ╰半夏微凉°/ 2022年11月25日 05:23/ 0 赞/ 157 阅读
相关 iOS开发——纯代码界面(自定义UITableViewCell) 自定义UITableViewCell 创建一个TableViewController类继承于UITableViewController,创建一个TableViewCell 青旅半醒/ 2022年07月30日 13:54/ 0 赞/ 209 阅读
相关 iOS开发——纯代码界面(UITableViewController) 创建UITableViewController(表视图控制器) 创建一个类TableViewController继承UITableViewController 1、A ╰半夏微凉°/ 2022年07月30日 13:53/ 0 赞/ 130 阅读
相关 iOS开发——纯代码界面(UITabBarController,UINavigationController,UIImageView) 一、创建UITabBarController和UINavigationController(标签栏控制器和导航控制器) 创建两个类,FirstViewController和S 本是古典 何须时尚/ 2022年07月30日 13:13/ 0 赞/ 139 阅读
相关 纯代码实现 presentAsPopView 在iOS中,segue的class为`UIStoryboardSegue`,用于storyboard中不同视图控制器间转场,即从一个视图控制器转场到另一个视图控制器。Segue 「爱情、让人受尽委屈。」/ 2022年02月26日 02:44/ 0 赞/ 184 阅读
还没有评论,来说两句吧...