在2018年重建2004年的Flash网站

IT资讯 2018-08-04 93 次浏览 0 条评论

使用HTML,CSS和JavaScript将旧的Flash网站从死里复活。

1999年,我使用Web Studio 1.0构建了我的第一个网站。 Web Studio是一个图形用户界面。可以创建新的登录页面并将元素拖放到其中。然后,我建立了一个免费域名,并与GeoCities托管,瞧!我有一个网站。快进到2004年,我想更进一步,所以和许多其他人一样,我打算建立一个乐队网站。

回答了12个常见的JavaScript问题
从那以后很多事情改变了。在这篇文章中,我将在记忆中走一段路,并在今天为网络重新创建相同的站点。

获取本教程的文件。

我在1999年建立了我的第一个网站

那么,让我们开始吧!首先,通常我的每个新项目都以mkd开头,然后是g init。对于那些了解我的人,在某些时候,我可能已经提到了dotfiles给你。 Dotfiles是一个简单地以点开头的文件(实际建立连接花了我很长时间!)它们可以用于多种用途。我最喜欢的两个dotfiles是.aliasas和.functions。让我详细说明......

在bash中,可以使用命令mkdir创建一个新目录,然后你必须将目录cd更改为刚刚创建的目录。使用我的.functions文件中的代码,现在可以运行mkd。这不仅会创建新目录,还会更改为该目录。一开始看起来有点矫枉过正,但我​​喜欢这些微赢。随着时间的推移,特别是如果每​​天多次运行这些命令,它们很快就会节省大量的时间。

#创建一个新目录并输入
function mkd(){
mkdir -p“$ @”&& cd“$ _”;
}
如果您熟悉git,那么下一个命令就是git init,这将使我们能够对项目进行版本控制。即使是购物清单,我也经常使用git!因此,不必每次都输入git,将alias g =“git”再次添加到.aliases对我来说是一个不错的,节省时间的小事。

如今,有许多不同的框架和技术。对于这个项目,我想保持简单。我将使用HTML,CSS,如果需要,可以使用JavaScript。首先,让我们创建基本的HTML标记。可是等等!让我们停下来思考一下。

2advanced.com网站激励我学习Flash

有时包括我自己在内的开发人员可能对项目过于兴奋,并且希望立即开始破解并直接让键盘编写代码。但是,我发现这通常不是最好的方法。我喜欢先了解项目的概况。通过这样做并对整个项目有更清晰的视野,我发现它可以做出更好的决策。例如,如果我直接潜入代码,我可能会遇到一个问题,然后我必须回去重构。这种方法有一些不同的结果。首先,可能是我必须完全删除代码并重新开始;第二,如果以这种方式继续下去,我最终可能会遇到“意大利面条代码”,这使得将来很难更新,调试并导致性能下降;第三,有时它确实没问题,你最终得到了更好的代码,但我倾向于说第一和第二个结果更为常见。

这个项目相当小;它有几页:主页,新闻,演出,媒体,专辑,链接和这些页面中的常见部分:标题,导航,排版内容,列表,图像,视频。在2004年最初构建Flash网站时,测试方面的事情要简单得多。该网站是用Flash构建的,用于带有鼠标和键盘的台式计算机上的Flash。目前,移动和平板电脑的互联网使用比台式电脑更常见,而且这种趋势还在继续增加。

为了让观看网站的人能够获得更好的体验,我将在项目开始时考虑一些事项并使用移动优先策略。为了做到这一点,再次,在编写任何代码之前,我将要找出一个好的老式笔和纸。首先,我写出了站点地图;这样做有一些我认为可以改进的关键领域。例如,我的原始网站包含每个乐队专辑的不同页面。当时他们有三张专辑,因此非常适合导航。现在他们有更多,可能还有更多,所以我已经在脑海中思考如何使网站更具未来性(一个老人,但好东西是Dan Cederholm的防弹网页设计)。现在我已经了解了网站如何在更小的设备和可重用元素上工作,是时候用更大的设备重复这个过程了。由于网站相当简单,并且已经为移动设备创建了线框,我看到较大的设备非常相似 - 除了现在我们还有一些额外的空间,因此我们可以扩大内容区域并包括侧面导航。

侧面导航是我最兴奋的偏移站点。从乐队的原创艺术作品中汲取灵感,我将导航设计为带叶子的树形轮廓。每个叶子都是一个链接到网站不同页面的按钮。此外,当你滚入并远离叶子时,叶子将会生动,落到地上。 Flash很棒;它被称为补间。您可以在时间轴上的界面中的一个关键帧处设置元素,沿时间轴进一步创建另一个关键帧,并为要遵循的元素添加路径。更进一步,改变落叶的路径,持续时间和速度,我最终得到了一些我非常满意的东西。

但是现在我们没有使用Flash,那么我们该如何做呢?我经常会跳到CodePen或JS Bin。对于那些不了解的人,CodePen和JS Bin是在线服务,可以让您快速编码和保存。我倾向于将CodePen视为更多的设计导向,而JS Bin则更多地关注JavaScript。对于这个项目,我将使用CodePen创建树导航,原因有几个。首先,我想开始构建该网站的主要移动版本,事实上,通过这样做,如果事情是时间关键的,我最终可能会得到一个mvp。尽管通过添加漂亮的叶子导航和动画可以对网站进行增强,但这需要更长时间才能生成。在CodePen中使用树导航的一个优点是它与主站点和代码库隔离。如果完成它后事情变得棘手,我可以保存我所处的位置,继续主站点构建,然后返回导航。有时我会发现,在远离问题,甚至睡觉时,我的潜意识可以继续思考它。然后在回到问题时,解决方案呈现出来。

SVGs!我喜欢SVG。以前在Flash中,我在Illustrator中绘制了叶子资源。令人惊讶的是,我仍然有一张原创艺术品的CD,并且能够打开它。这些天我使用Sketch,它在打开文件方面做得很好。我现在已经准备好将叶资产导出为SVG。为何选择SVG?原因很多。如果我们在Retina设备上使用jpg或gif,我们还必须提供更大的资产,否则它们看起来会模糊不清。此外,使用SVG,我们可以使用CSS。这很棒,让我们只需使用一些CSS来改变SVG的颜色,而不必创建另一个图像资源。这意味着它更容易维护,作为奖励,它也更高效。如果您不熟悉SVG,我强烈建议您阅读它们以及我的好朋友Sara Soueidan的精彩作品。

移动优先,响应式导航菜单

现在树和叶资产已经到位,最后要添加的是动画。我可以采取一些方法。一个是坚持我原来的Flash路径。这意味着复制路径并使用SVG,然后可能进一步使用SVG与path和animateMotion协同工作。从怀旧的角度来看,我非常喜欢这个想法,但CSS多年来已经发生了很多变化,现在我们已经改变和翻译了,所以这可能是另一种方法。更进一步,我们甚至可以添加一些JavaScript来随机化落叶。

两种选择听起来都不错,但我正在朝着更多以CSS为主导的路线摇摆不定。这是使用CodePen的另一个好处,我可以快速尝试一种方法。如果事实证明它比我原先想象的更复杂,或者感觉不对,我可以尝试另一种方法,浪费很少的时间。事实上,这是一个好主意!我还在考虑这个选项 - 请参考GitHub上的项目获得最终结果。随着树导航现在排序,我转向移动第一种方法,建立导航。如果你熟悉Sass,你很可能遇到变量。但是你知道CSS中现在有变量吗?他们在Chrome,Edge,Safari和三星互联网上也有相当不错的浏览器支持!当我试图保持基本的CSS并避免需要任何额外的依赖时,这是个好消息。那么我们如何实现呢?在样式表的顶部,我声明了我的变量:

:根 {
--grey:#ccc;
--red:#fb0f0c;
--grid-size:10px;
}
现在它们已经被声明,我可以调用它们,所以例如设置主体背景颜色将如下所示:

身体 {
背景:var( - 灰色);
}
更进一步,并帮助网格对齐,空白,垂直节奏,您可能已经注意到我还定义了网格大小变量。变量与calc的效果非常好,看起来像这样:

//正在使用的标准变量,输出10px。
padding-top:var( - grid-size);

//添加calc以将变量单位乘以2,输出20px。
padding-bottom:calc(var( - grid-size)* 2);
完整的移动导航样式,让我们解决隐藏和显示它的功能。对于切换按钮,我们将应用标签标签,然后在导航标签中我们将添加一个输入:

<header class =“header”>
<h1 class =“header_title”>乐队网站</ h1>
<h2 class =“header_currentPage”>主页</ h2>
<label for =“mobileNav_toggle”class =“mobileNav_toggle”> Toggle </ label>
</报头>

<nav class =“mobileNav”>
<input type =“checkbox”id =“mobileNav_toggle”role =“button”>
<ul class =“mobileNav_list”>
<li class =“mobileNav_listItem”> <a class="mobileNav_listItemLink" href="#">主页</a> </ li>
<li class =“mobileNav_listItem”> <a class="mobileNav_listItemLink" href="#">关于</a> </ li>
<li class =“mobileNav_listItem”> <a class="mobileNav_listItemLink" href="#">投资组合</a> </ li>
<li class =“mobileNav_listItem”> <a class="mobileNav_listItemLink" href="#">新闻</a> </ li>
<li class =“mobileNav_listItem”> <a class="mobileNav_listItemLink" href="#">联络</a> </ li>
</ UL>
</ NAV>
使用以下CSS,我们可以显示和隐藏导航菜单;因为我们想要标题中的标签,我们可以使用〜还是代字号或(U + 007E),因此它可以工作,而不会被第一个元素立即取代。

#mobileNav_toggle [type = checkbox] {
display:none;
}

#mobileNav_toggle [type = checkbox]:checked~.mobileNav_list {
显示:块;
}
随着移动导航的完成,是时候实现一些响应式网页设计。添加网站的主要内容,然后使用Chrome开发者工具中的响应视图,我可以增加视口宽度,直到我觉得有足够的空间来充分保持树导航。这最终达到600px,为此我们可以使用媒体查询:

.treeNav {
display:none;
}

@media screen和(min-width:600px){
.treeNav {
显示:块;
}
}
差不多了!最后,为了将树导航放在主要内容区域旁边,我将使用Flexbox:

。容器 {
显示:flex;
}

.treeNav {
display:none;
最小宽度:140px;
}
现在,树导航占据了100%的高度,内容做得相同并且坐在它的右边。这意味着无论内容多长时间,它都不会在树导航下面流动。如果您想了解更多有关Flexbox的信息,我建议您选择仅使用Wes Bos来检查flexbox.io。它可以做很多事情!

显示'display:flex'的示例,防止内容在树导航下面进行换行

这就是我现在所有的时间,但我们还有很多事情可以让这个项目变得更好。如果您有任何疑问或喜欢这篇文章,请在Twitter上或通过我的网站问好,或者在GitHub上发送拉取请求!

0
小包子

【 飞龙网.com:小包子】为你推荐!我的文章如同我的名字,香甜可口,咸淡适宜,油而不腻,阅后令你回味无穷尽哦~

发表评论