HTML5 foresight and experience: the entanglement of technology and art.

Source: Internet
Author: User

1. A few drops of runclean leaves betacafe and arrives at chuanweiguan at half past one. A dish of Yangzhou Fried Rice is still designed. At half past three, Sichuan weiguan is left. At half past five, we go home to bed, wake up at, and sit up at to open the computer, then, I got entangled in HTML5 and finally got dizzy at, so I went to sleep. Then I got up at and sorted out my dog's nest. I made a cup of coffee and opened a bag of cookies for further design, at, I drank a bowl of porridge, two wings, and a few white melons. at, I arrived at betacafe and Yingjie to plot a big plan. At, I saw another, after 24 hours, I waited for the next cycle ...... [7.13]

In the long-standing one-sided publicity, most of them refer to video tags, just like HTML5 = video tags. But as I get deeper and deeper into html5, it is becoming more and more intense, and it brings more than video. It is really the future of web. Most importantly, ie9 is keeping up with the times and Microsoft is keeping up with it. The hardware acceleration that ie9 took the lead in implementation is indeed quite forward-looking, while ie9 has taken a huge step in HTML5 support. Although IE8 and ie9 are only a digital division, however, it is a demarcation line of the Times. Although ie9 has been released for a long time, it must be applauded and Microsoft is working very hard to catch up.

CSS 3

[Ie9 OK]Css3 selectors
The full support of ie9 is the biggest highlight. Select is the beginning of everything. Although the choice of css2 is basically enough, it gives more and better choices. Why not? I made some interesting attempts and it was quite comfortable.
[Ie9 OK]Css3 colors
Whether rgba or HSLA, that A is too important. Font color, background color, border color ...... Transparency can be introduced in any color application, which makes the entire design crystal clear and thorough, and greatly help. I almost had a crush on a. I have gradually abandoned the definition of # fff, changed it to rgba (255,255,255, 1), and then cooperated with transition ......
[Ie9 OK]Css3 rounded corners
The desire for rounded corners is needless to say. Although the rounded corners are not omnipotent, it is a kind of natural and soft design brought about by the ubiquitous and eye-catching corner design, and ie678 will be instantly destroyed. Think of the subject: You will never go back after you have read the Retina screen. The rounded corner is like this. Do you still remember the dingdang cat?
[Ie9 no]Css3 text-shadow & css3 box-shadow
The text is the same as the text. Different from rounded corners, text shadows must be available and used as little as possible. There is also a halo. If it works with transition ...... The shadow of the box model is a condition for hierarchical design. As the layer window becomes more and more necessary and rich, its visual role is very important, let alone the existence of the Inner Shadow.
These two shadows are put together because these two attributes are the most used in css3 except for rounded corners. Well, color a brings light, and shadow is shadow, light and shade. The page is full and texture! However, why is this important attribute second only to rounded corners in my eyes? ie9 has not been supported so far. It gives no shadows and a bag of head!

I don't expect the release of ie9 to support transform, transition, gradient, and many other advanced attributes, because some things such as animation can be abandoned, and some things such as gradient can be replaced, but I can't give up on shadow and can't find a replacement. Is it a lame filter? Do I use rigid images? Besides, if there is no shadow, the rounded corner is halved. Ie9 is about to enter the beta version. I hope it will bring us that important effect during the beta period. Otherwise, I will continue to skip this step!

[Ie9 OK]Css3 multiple backgrounds
The significance of Multi-background is not the image, because we usually merge small images. The significance of Multi-Background lies more in gradient. The multi-level gradient with a can create a gorgeous background. Ie9 does not support gradient, but we have alternatives.
[Ie9 OK]Css3 border Images
Is the image beautiful as a border? Never before, and never expected to be available.
[Ie9 OK]Css3 box-Sizing
I have never used it, mainly because I am used to the combination of width, height, margin, and padding. Unlike the previous attributes, they all belong to the current habit of adding colors, it is not easy to change the existing habits.
[Ie9 no]Css3 multiple Column Layout
I have never used it, and I am used to relative, absolute, and float for the same reason.
[Ie9 no]Css3 gradient
As it is difficult to replace rounded corners and shadows, gradient is the easiest way to replace. tiled images are limited to horizontal or vertical la S. If it is a diagonal line or a circular gradient, it is a disaster. The emergence of gradient makes people worry-free. Even if ie9 does not support it at the end, you can find an alternative. Well, I have said it several times. Have you guessed it?
[Ie9 no]Css3 transforms
Transforms mostly exist for transition, and independent transforms have almost no value.
[Ie9 no]Css3 3D transforms
Let alone ie9 is no. So far, only Mac Safari 4 + and win safari 5 are supported. Safari under win is a zombie, and a few hundred megabytes of memory is gone, which is no exaggeration. It looks like the most gorgeous and cup-of-the-art attribute. However, IOS is perfectly supported. Can you miss iOS? Some time ago, I was taken down with a cool test, so the experience ...... Let me be surprised: Flash is dead!
[Ie9 no]Css3 transitions
The change is unpredictable. After I understand it, I am now the main force of my animation. However, I have to say that the application is quite limited, not to mention that ff4 has just been supported, but opera has a small market share. In terms of performance, the transitions of ff4 and opera10.6 have poor performance, it is not as bad as it is. I will discuss the performance issues in detail later. It is useless to say anything.
[Ie9 no]Css3 Animation
I have played animation for more than half a year since last year before I understood tansitions. "Animation" is obviously more animated than "transform" text, right? The timeline is also friendly for animation design. Later, I found that some problems with animation were hard to solve, so I had to understand transitions, and then started to turn around in the first half of this year. The problem with animation is that its process is from the start point of the timeline to the end point, but instead of stopping at the end point, it returns to the start point. Although it can be stopped at the end in a specific situation, there are many obstacles or even none. Even if JS is used to listen to events, the 1 millisecond error will flash. Transitions is not the start and end point of the timeline, but does not return from one state to another.
After a year of hard work, I realized that it is truly true. Animation refers to a long animation, which automatically reverts back to the initial state based on the time series at the beginning and end. It means that the key is to generate an animation, but the object itself remains unchanged. Transitions is purely a transformation, from State A to State B. Although there is also a timeline in a certain sense, the focus is on changing, not animation, and changing, of course, will not go back. Well, I think I have made it quite clear about these two things. I think it should be clear about how to choose them, and it may still be dizzy. Haha, then continue to dizzy. (It's about half past three. I can't finish writing it. The new 24 hours have passed. I will go to bed and continue tomorrow .)
[Ie9 OK]Css3 media queries
This is a very good property. The uncontrollable resolution of users has made the design very difficult. The Global adaptive design is not suitable for the times, and customization is the best. The full screen browsing experience of my blog garden on the High-split screen is unpleasant. There is no way, the 1024 fixed width center design method has become the only choice, so it brings the blank space on both sides, the font is getting smaller and smaller, this is just a situation on the computer. On the other hand, with the rapid development of mobile Internet led by IOS and Android, 3-inch, 3.2-inch, 3.5-inch, 4-inch, 5-inch, 9-inch ...... 320,480,720,768,960 ...... What should I do if I add more messy screen sizes and resolutions? Oh, my God, the iPhone 4 has also brought precision. It is foreseeable that the precision will reach the display in the future and will not be unified to 72 dpi. All static images will also be separated from different specifications, unprecedented disaster!
If you are not a perfectionist, this will have no impact on you. You can continue to set the center width to 1024. But what should I do if I pursue perfection infinitely and pursue my own design to bring the best user interface and user experience to any device and environment ?! Css3 media queries! Whether in the whole or in the part, it can satisfy your perfect feeling. Scared, how is this a bit like an advertisement for the bones of the White Camel mountains ~~~
[Ie9 OK]Font linking (@ font-face)
This is useless for Chinese font files that are just a few MB or even 10 + m at will, and it seems that it does not allow the font to be installed in the system, which means that it will be downloaded every time. However, in our imagination, it still has other excellent functions ~~~ I will try again later ~~~

HTML 5

[Ie9 OK]Video Element
Well, this is the most popular stuff. Think about it, and it should be a fire. Subverting flash? Not limited to this, it may also subvert video editing software such as premiere. Currently, all videos are finished at a time. Both flash and video element are the carriers of finished videos. Video editing is another field. Video element is not only a carrier, but also brings editing and interaction into the video. When a video is no longer a finished product, it is no longer a task from the beginning to the end. When the video is switched back to the material that needs to be processed again, the process is designed when the video can be operated by users, everything becomes very interesting. I am afraid that the development history of web design will be repeated in video design, that is, purely video designers will move back to the second line of internet video design to provide materials or even fade out, video designers Based on Web standards will be on the stage. The product design description may appear in the future: when a user clicks the character's head in the video, the video is paused, and a transparent window links Facebook to obtain and present relevant information about the person. Don't continue yy. What is the biggest difference between graphic design and web design? The goal of graphic design is to appreciate the eyes, while the goal of web design is interactive operations. I think the same difference and distinction will enter the video design field as video elements emerge.
[Ie9 OK]Audio Element
The same is true for audio and video.
WYSIWYG editable Elements
I have never understood that such a good thing, full-browser compatibility, is used so little. I have never used it. I don't know any obstacles. I'm trying to use it.
[Ie9 OK]New, stylable HTML5 Elements
Under the halo of class name substitution and powerful css3 selector, There is no necessary application surface.
[Ie9 OK]SVG & canvas
The two things that are being learned cannot be said much, and they are also entangled in many obstacles. Previously, I mentioned the substitution of SVG. ie9 does not support gradient, but supports SVG as the background, so we can use SVG to replace gradient.

Rounded corner, projection, luminous, transparent, gradient, SVG, canvas ...... What did you find? On the web page, highly elastic vectoring design is the trend of the times, and the rigid bitmap design is coming to the stage. This is fully adapted to the development of the times, because the iPhone, iPad, and Android have pulled major manufacturers and pushed the society to the broad Internet era with multiple devices. In this chaotic broad Internet era, the design's extensiveness becomes extremely important, and the bitmap's rigidity is obviously far behind.CodeFlexible vector. From this point, Flash is not comparable to HTML5, because the vector design in Flash is limited, or even a fixed Image Vector.

I now have fewer and fewer images and fewer opportunities for opening FW. More and more designs are transferred to writing code directly. Because of my personal image problems, I have been asked many times if I am engaged in art. I said that I am engaged in web page design, so I think I am a little bit involved in art, then he put his head in front of my screen and looked forward to seeing a gorgeous design. The results were all code, Hahahaha. Speaking of this, I think of the designer's transformation. Use code to complete vector design, the number of rounded corners, the number of blurred projection offsets, the angle of the luminous range, the gradient ...... These things are purely graphic design. If a standard web designer doesn't do graphic design, how can he do it?

In the css2 era, a designer transformation has been triggered. If the layout is transferred, the designer may depend on the output design draft to be independent from the team. Then, in the css3 era, how much is the design draft useful? Where can the designer who outputs the design draft escape? Nowhere to escape.

In the css2 era, DW used for page layout design is abolished by notepad. In the css3 era, drawing software such as FW, PS, and CD will be replaced by notepad as well. Design a vector icon, not AI, but SVG. Design a crystal button, not a picture, but a pure css3 vector button. I am used to the graphic designer who configures parameters in the settings Panel of the visualization software. How do I get used to configuring parameters in the code? Could you give me a design draft with a text: Where is the gradient in this place, where is the shadow left offset 1px right offset 2px blur 5px, oh, there are various color parameters, etc, so that standard web designers can use css3 to restore them?

So why not use code directly? The result is: graphic designers must learn code, and Web Standard designers must learn design and have nowhere to escape. Cooperation? Think about the obstacles to the current cooperation between the two, and the future will be more difficult. I keep saying that CSS and design are inseparable.

I'm tired of writing, but I don't want to write anything clearly. Hammer. Without an instance, I said that the vernacular is not comfortable and unconvinced, and I went to work. After the official English version was released, I pointed to the case one by one, and I was so embarrassed. Well, the beauty of reconstruction will be new again, endless and endless ~~~

PS: during the meeting yesterday, when talking about the page resolution performance problems of various browsers, I tried ie9 pre3. As a result, I was surprised to find the existence of Box-Shadow, it only appears in one place, and the other places where shadow is applied are still blank. Although I still don't understand how ie9 parses shadow, it seems a bit strange, but box-shadow is not in ie9's current publicity. This discovery shows that the ie9 team is testing its support for Box-shadow, so text-shadow will certainly not fall behind, and shadow is in the ie9 Development Plan. This is great !!! I am full of hope for ie9, haha, haha!

PS: Play Star 2, Server Discussion: zhengminlive@hotmail.com

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.