Does the code generated by Adobe Edge conform to good programming practice? [closed]
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 11 year开发者_开发问答s ago.
I'm a long-time as3 designer who wants to dip a toe into the html5 pool. Adobe edge seems happy, but does it make code that anyone wants to look at?
No, not at all.
The basic page looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Adobe EDGE TEST August 1, 2011</title>
<!--Adobe Edge Runtime-->
<script type="text/javascript" src="edge_includes/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="edge_includes/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="edge_includes/edge.0.1.1.min.js"></script>
<script type="text/javascript" src="edge_includes/edge.symbol.0.1.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="adobe_edge_test_edge.js"></script>
<link rel="stylesheet" href="adobe_edge_test_edge.css"/>
<!--Adobe Edge Runtime End-->
<script type="text/JavaScript">
<!--
function timedRefresh(timeoutPeriod) {
setTimeout("location.reload(true);",timeoutPeriod);
}
// -->
</script>
</head><body onload="JavaScript:timedRefresh(4000);">
<div id="stage" class="symbol_stage">
</div>
</body>
</html>
Which looks nice, till you notice that there is no content, so SEO is completely ruined.
It uses JS to create and animate the content, and doesn't use CSS transitions or animation. Here's a snippet of the Javascript:
dom: [
{
id:'Text1',
type:'text',
rect:[98,120,385,150],
text:"A test using Edge",
font:["Arial Black, Gadget, sans-serif",[24,""],"rgba(0,0,0,1)","normal","none",""],
},
{
id:'RoundRect2',
type:'rect',
rect:[187,332,45,41],
borderRadius:[47,47,47,47],
fill:['rgba(255,255,0,1)'],
stroke:[0,"rgb(0, 0, 0)","none"],
},
{
id:'Text3',
type:'text',
rect:[79,270,0,0],
text:"Here's another paragraph",
align:"auto",
font:["Times",16,"rgba(0,0,0,1)","normal","none","normal"],
},
Here's some of the animation bit:
{ id: "eid29", tween: [ "transform", "#Rectangle1", "skewY", '43deg', { valueTemplate: undefined, fromValue: '0deg'}], position: 220, duration: 280, easing: "linear" },
{ id: "eid2", tween: [ "color", "#stage", "background-color", 'rgba(215,215,215,1.00)', { animationColorSpace: 'RGB', valueTemplate: undefined, fromValue: 'rgba(215,215,215,1.00)'}], position: 0, duration: 0, easing: "linear" },
{ id: "eid308", tween: [ "color", "#stage", "background-color", 'transparent', { animationColorSpace: 'RGB', valueTemplate: undefined, fromValue: 'rgba(215,215,215,1)'}], position: 750, duration: 750, easing: "linear" },
{ id: "eid76", tween: [ "transform", "#Text3", "translateY", '-267px', { valueTemplate: undefined, fromValue: '0px'}], position: 750, duration: 250, easing: "linear" },
{ id: "eid15", tween: [ "style", "#Rectangle1", "opacity", '0.84705882352941', { valueTemplate: undefined, fromValue: '0.84705882352941'}], position: 65, duration: 0, easing: "linear" },
{ id: "eid17", tween: [ "style", "#Rectangle1", "opacity", '0.84705882352941', { valueTemplate: undefined, fromValue: '0.84705882352941'}], position: 500, duration: 0, easing: "linear" },
{ id: "eid72", tween: [ "transform", "#RoundRect2", "scaleY", '3.07', { valueTemplate: undefined, fromValue: '3.07'}], position: 735, duration: 0, easing: "easeInCirc" },
{ id: "eid98", tween: [ "transform", "#RoundRect2", "scaleY", '3.07', { valueTemplate: undefined, fromValue: '3.07'}], position: 940, duration: 0, easing: "linear" },
{ id: "eid67", tween: [ "transform", "#RoundRect2", "rotateZ", '-85deg', { valueTemplate: undefined, fromValue: '-85deg'}], position: 735, duration: 0, easing: "easeInCirc" },
{ id: "eid100", tween: [ "transform", "#RoundRect2", "rotateZ", '-85deg', { valueTemplate: undefined, fromValue: '-85deg'}], position: 940, duration: 0, easing: "linear" },
{ id: "eid93", tween: [ "transform", "#Text4", "translateY", '-14px', { valueTemplate: undefined, fromValue: '0px'}], position: 750, duration: 250, easing: "linear" },
{ id: "eid71", tween: [ "transform", "#RoundRect2", "scaleX", '3.07', { valueTemplate: undefined, fromValue: '3.07'}], position: 735, duration: 0, easing: "easeInCirc" },
So, no content, no transitions/animation and the JS is an unmaintainable mess.
Other than that, it's fine.
加载中,请稍侯......
精彩评论