Opera browser: XXI century
After all the events held by Opera Software in Russia recently, where developers told about new technologies and features planned to be included in the browser in the near future, many Opera users who for one reason or another could not attend the meetings were asked to post somewhere a presentation to look at innovations. Make it was quite difficult, because each performance by the Norwegian developers was a kind of improvisation, not a boring flipping of slides. But questions remained, so I decided to try to make an article based on those speeches by Opera developers, which I now present to you.
Opera browser: XXI century
Despite the fact that the first ten years of the XXI century, sung by science fiction writers, are already coming to an end, in terms of Internet technologies, we still use mostly the developments of the last century. The reasons are many, ranging from the need to support websites created many years ago and ending with a period of stagnation in the process of developing a once known monopoly company. And this is doubly sad, given the cosmic speed of development of new technologies in related IT-industries. However, today it is already clear to everyone that the time has come to create a new Internet in which it will be easier and better to live, not only for users, but also for developers: the search for new solutions and technologies is conducted by almost all leading market players. Naturally, Opera Software is also not standing still and is making a contribution to the common cause, and not only adding new functions to its browsers, but also promoting technologies that can make even the Internet itself simpler, faster and more functional.
More recently, the Norwegian company introduced a test version of its Opera-9.52 browser, which supports innovations that are actively promoted by the developers of Opera Software. In particular, this experimental instance has enhanced support for vector graphics in SVG format, HTML video tag and Canvas technology. For people who are far from the technical side of the question, it is difficult to understand what the Norwegian developers want to add to the Internet, so in this article we will try to see with visual examples what the effect of using new technologies is. If you want to not only see screenshots, but also try new developments with your own hands, you should install the same test version on your computer by downloading it from the company's official website (you must remember that this is a test version, so it’s best to install it to another directory, separately from the constantly used version of Opera). Links to sample files will be placed in the text of the article, so you can not only read, but also experiment with technologies that may become widely used only after a few years. So, you already want to look into the future? Then let's start.
')
Svg
The abbreviation SVG stands for “Scalable Vector Graphics”, in other words, scalable vector graphics. The main difference of this image format from the usual PNG or JPG is that it does not contain a pixel-by-pixel binary image cast, but consists of descriptions according to which the user's computer generates graphic objects. One of the most visible examples of the beneficial differences in SVG can be a trick with increasing image size in a browser window. Compare two screenshots:
As you can see, when zooming in, no “steps” and “squares” appear, no matter what scale we choose ( open an example in the browser ). At the same time, only one small file in the SVG format is used as the actual picture. In fact, these are just flowers - the potential of vector images is much higher. Let's look at the second example ( open the example in the browser ).
Externally - nothing special, just think - wavy text. Modern graphic editors allow not to perform such tricks with the text. And now a little trick: try to select with a mouse a part of the text, as is usually done in text documents.
Happened? Moreover, now you can even copy this text to the clipboard and paste into any document (of course - without saving the waviness). With ordinary images, which include not only drawing, but also text, such things do not work. And now exposing the focus. As I said above, vector graphics are represented by a description file (you can open this example even in a text editor). Thus, the wavy text in the image (and this is the image) is inscribed in the body of the description file with a regular line. I think you already guessed: these lines can be indexed by search services and you can search for pictures, for example, by text on them. At the same time, one more plus is found out: if you have ever engaged in replacing or translating the inscriptions in the pictures into another language, now you can forget about the tiresome mess with Photoshop or Gimp - you just need to replace the corresponding lines in the description of the SVG file using any text editor . There is a third plus - no matter how huge this SVG file is displayed on the page, its size will remain unchanged - less than a kilobyte (in this example - 761 bytes). After all, this is a plain text file in a couple of dozen lines. Considering that up to 90% of web page content is composed of graphic elements, it is easy to imagine how much faster the pages will be loaded into the browser, if you use the SVG format for graphics. Plus - high quality at any scale. At the same time, SVG graphics can easily be combined with regular raster images, bringing a lot of additional and, most importantly, easily realizable decorations to the page design ( open an example in the browser ).
Go ahead. We have already studied static images of the SVG format, but in fact we can easily animate these pictures and even add interactivity. This is done very simply - using scripting languages ​​based on the ECMAScript specification, i.e. - including the use and widespread JavaScript. To familiarize yourself with the animation capabilities in SVG images, you can see an example with rotating nested rings and embedded text ( open an example in a browser ):
Or another option - a simplified model of the solar system. This example is also interesting because in addition to the animation in the SVG file there is also an embedded bitmap in PNG format - this is actually the starry sky used as the background image. Agree that we will not get the same flexibility with any of the other popular graphic formats ( open an example in the browser ).
And finally - a little about interactivity. It is also achieved with the help of scripts and allows you to significantly expand the management of various objects of web pages, and simply opens up new spaces for the flight of imagination of web developers. It is noteworthy that, by tradition, the abundance of animation and even more interactive "ryushechki" always force users to put up with various inconveniences, ranging from exorbitant traffic and ending with the need to install all sorts of plug-ins to the browser, but this example shows that all this can be easily avoided - just Web developers to take advantage of the potential of the SVG format ( open an example in the browser ):
In conclusion, I can offer you to familiarize yourself with this comprehensively developed format in more detail , but for now let's move on to even more interesting technologies.
Tag video
First of all, let's see how the implementation of this technology looks directly in the browser. To do this, open the file containing only one line ( open an example in the browser ):
At first glance - nothing special: the Internet is simply flooded with similar videos embedded in web pages, there are even very popular online services offering hundreds of thousands of videos for viewing directly in the browser. In order to understand the difference, try turning off plugins in the browser (in the dialog box opened with the F12 key) and open any video on the same RuTube. That's right - it does not work. Now open the above example. And you will see that this video will be played as if nothing had happened. In fact, there is no miracle or deception, and the media player is not built into the browser. All that the developers have done is to include in the browser support for the video tag, which, by the way, is presented in the draft specifications of the future version of HTML-5, and also added a small codec for Opera to the free Ogg Theora format (which, by the way, is considered as an international standard for embedded video). Thus, as soon as the browser detects this tag in the code of a web page, it simply uses the embedded codec to play the embedded video file on the page. Also, if you wish, you can indicate in the tag the use of standard controls for the process of playing a video file (to be honest, they are not so good at design, but this is easily corrected, more on that later).
So, we found out that when using the video tag, there is no need to install additional plug-ins into the browser (and their total size may be even larger than the browser itself), which is already a plus. But there is a more weighty factor - financial and legal. The fact is that the currently popular flash format is proprietary technology owned by Adobe (a similar situation applies for slightly less popular realvideo and quicktime). Therefore, all those who use it in their professional activities related to making profit in one form or another are obliged to deduct a certain amount in convertible currency to the right holder. Of course, an ordinary user who watches videos on the network does not pay anyone, but all companies or services using this technology pay Adobe a “rent”, which, of course, is charged to the end user in one way or another. Plus, you can remember quite expensive development tools to get a more or less clear picture of how much flash technology uses. For completeness, it remains only to add that the adherents of free software in general are often forced to abandon such technologies because of incompatible licenses.
Fortunately, the video tag is an element of the HTML language and, therefore, belongs to the category of open technologies, the specifications of which are publicly available for free. This allows more flexibility to use its capabilities, and especially in tandem with other technologies, including JavaScript, CSS, and all the same SVG format. For example, this is how you can “screw” your own version of the translucent semi-transparent controls to the video ( open an example in the browser ).
But, perhaps, the greatest potential of this technology is revealed when used in conjunction with other avant-garde innovations. For example, if you embed this tag in the SVG file, it becomes possible to produce various manipulations with the image, including the use of filters. In this example, in addition to the original view, you can switch to the contour display mode or get a black and white picture ( open an example in the browser ).
In conclusion, it can be noted that this technology can be successfully used in various popular online services. Another example demonstrates how a Wikipedia page could look like, containing a video using the video tag.
Exploring Canvas
Canvas (in translation - “canvas”) is an even more interesting technology, also closely related to graphics. The canvas tag is an element of HTML-5 and is currently supported by several popular browsers. If in a nutshell, this technology allows you to create in the body of web pages special fields for drawing graphics, which, if desired, is associated with a blank canvas, on which the artist will later create his masterpiece. Only this canvas is virtual, and drawing on it becomes possible with the help of ordinary scripts. At first glance, Canvas is very similar to SVG, but between them there is one main difference: if the SVG format is a description of the elements of a graphic object, then the Canvas provides pixel-by-pixel control of graphics within the specified canvas. But this does not mean that you have to draw each point on the canvas separately: Canvas works great with scripts, and also allows you to go to the object level of drawing and even add animation or interactivity. To clearly see the capabilities of the Canvas, you can refer to this example ( open the example in the browser ):
What is the advantage of Canvas over existing technologies today that allow to implement similar graphical delights? As in the case of the video tag, web developers can easily embed graphical objects of various complexity into web pages without using any third-party plug-ins, graphic libraries and other types of additional software. At the same time, the size of objects embedded in the pages is extremely small, and the entire code is presented in text form, which allows search resources to index the contents of such images. And, of course, open Canvas specifications are available, allowing for flexible integration of this technology with others. As we see, there are quite tangible advantages, the value of which is difficult to overestimate. As an example of how complex things Canvas can do, you can look at a real graphic editor CanvasPaint (a copy of the well-known application from Microsoft), implemented using Canvas technology.
The scope for application of the opportunities provided by Canvas is limited only by the imagination of the developer. This technology can be used for a variety of purposes, ranging from decorating web pages to adding user-friendly interactive controls to the web site interface. And, of course, for creating entertainment content - Flash animation has become popular in many ways due to the emergence of many online miniature games, and in this field Canvas is as good as its proprietary competitors - using this technology, you can create applications of any complexity, using only HTML, CSS and JavaScript ( open an example in the browser ).
Note that the examples presented above relate to two-dimensional graphics, while Canvas has sufficient potential for embedding into web pages and three-dimensional objects. There is no particular difficulty here - just add the corresponding functions to the script to get an object visually presented in three dimensions ( open an example in the browser ).
Naturally, this contributes to the addition to the page even more nice looking graphic details or controls, while maintaining the small size of the data downloaded from the network and not requiring any additional plug-ins. And in terms of using 3D Canvas when creating entertaining online applications, new possibilities of modeling quite complex game processes are opening up.
At the end of the conversation about Canvas, it should be noted that this technology in its pure form is not of great interest - much greater potential lies in the use of Canvas in conjunction with other technologies. For example, in many examples presented in previous chapters, inquisitive readers will be able to find in the source code the canvas tag, with the help of which the authors have added additional functionality to their works.
Evolution continues
In general, now a very curious thing is happening in the world of web technologies - a return to the beginning of WEB is clearly visible. Judge for yourself: the first browsers were text, allowing you to view documents without any graphics. And what do we see now? SVG, Canvas, other latest developments - all of them for the most part operate on data in text form. In other words, browsers are again transformed into text, thus starting a new round of evolution of similar programs. But, of course, at a new level: the current text downloaded from the network allows generating not only graphic objects, but also three-dimensional animated applications in the browser window.
Well, such an evolution can only be welcomed, because in the case of widespread use of the above technologies, the Internet will become faster, better and more beautiful. Plus, there will be new opportunities for searching data and establishing relationships between the most diverse content, and these are already the distinctive features of the next generation Internet. Web developers will not be left behind either: with new technologies they will be able to spend much less time on creating very complex websites, while reducing the number of problems associated with the need to use complex and expensive technologies that are owned by certain companies. The Internet will become more free and accessible, and both developers and users of the worldwide network will be able to feel the positive effect. , , . , , , .
1
dev.opera.com .
2
, , Creative Commons Attribution .
www.myopera.net
Opera browser: XXI century
Despite the fact that the first ten years of the XXI century, sung by science fiction writers, are already coming to an end, in terms of Internet technologies, we still use mostly the developments of the last century. The reasons are many, ranging from the need to support websites created many years ago and ending with a period of stagnation in the process of developing a once known monopoly company. And this is doubly sad, given the cosmic speed of development of new technologies in related IT-industries. However, today it is already clear to everyone that the time has come to create a new Internet in which it will be easier and better to live, not only for users, but also for developers: the search for new solutions and technologies is conducted by almost all leading market players. Naturally, Opera Software is also not standing still and is making a contribution to the common cause, and not only adding new functions to its browsers, but also promoting technologies that can make even the Internet itself simpler, faster and more functional.
More recently, the Norwegian company introduced a test version of its Opera-9.52 browser, which supports innovations that are actively promoted by the developers of Opera Software. In particular, this experimental instance has enhanced support for vector graphics in SVG format, HTML video tag and Canvas technology. For people who are far from the technical side of the question, it is difficult to understand what the Norwegian developers want to add to the Internet, so in this article we will try to see with visual examples what the effect of using new technologies is. If you want to not only see screenshots, but also try new developments with your own hands, you should install the same test version on your computer by downloading it from the company's official website (you must remember that this is a test version, so it’s best to install it to another directory, separately from the constantly used version of Opera). Links to sample files will be placed in the text of the article, so you can not only read, but also experiment with technologies that may become widely used only after a few years. So, you already want to look into the future? Then let's start.
')
Svg
The abbreviation SVG stands for “Scalable Vector Graphics”, in other words, scalable vector graphics. The main difference of this image format from the usual PNG or JPG is that it does not contain a pixel-by-pixel binary image cast, but consists of descriptions according to which the user's computer generates graphic objects. One of the most visible examples of the beneficial differences in SVG can be a trick with increasing image size in a browser window. Compare two screenshots:
As you can see, when zooming in, no “steps” and “squares” appear, no matter what scale we choose ( open an example in the browser ). At the same time, only one small file in the SVG format is used as the actual picture. In fact, these are just flowers - the potential of vector images is much higher. Let's look at the second example ( open the example in the browser ).
Externally - nothing special, just think - wavy text. Modern graphic editors allow not to perform such tricks with the text. And now a little trick: try to select with a mouse a part of the text, as is usually done in text documents.
Happened? Moreover, now you can even copy this text to the clipboard and paste into any document (of course - without saving the waviness). With ordinary images, which include not only drawing, but also text, such things do not work. And now exposing the focus. As I said above, vector graphics are represented by a description file (you can open this example even in a text editor). Thus, the wavy text in the image (and this is the image) is inscribed in the body of the description file with a regular line. I think you already guessed: these lines can be indexed by search services and you can search for pictures, for example, by text on them. At the same time, one more plus is found out: if you have ever engaged in replacing or translating the inscriptions in the pictures into another language, now you can forget about the tiresome mess with Photoshop or Gimp - you just need to replace the corresponding lines in the description of the SVG file using any text editor . There is a third plus - no matter how huge this SVG file is displayed on the page, its size will remain unchanged - less than a kilobyte (in this example - 761 bytes). After all, this is a plain text file in a couple of dozen lines. Considering that up to 90% of web page content is composed of graphic elements, it is easy to imagine how much faster the pages will be loaded into the browser, if you use the SVG format for graphics. Plus - high quality at any scale. At the same time, SVG graphics can easily be combined with regular raster images, bringing a lot of additional and, most importantly, easily realizable decorations to the page design ( open an example in the browser ).
Go ahead. We have already studied static images of the SVG format, but in fact we can easily animate these pictures and even add interactivity. This is done very simply - using scripting languages ​​based on the ECMAScript specification, i.e. - including the use and widespread JavaScript. To familiarize yourself with the animation capabilities in SVG images, you can see an example with rotating nested rings and embedded text ( open an example in a browser ):
Or another option - a simplified model of the solar system. This example is also interesting because in addition to the animation in the SVG file there is also an embedded bitmap in PNG format - this is actually the starry sky used as the background image. Agree that we will not get the same flexibility with any of the other popular graphic formats ( open an example in the browser ).
And finally - a little about interactivity. It is also achieved with the help of scripts and allows you to significantly expand the management of various objects of web pages, and simply opens up new spaces for the flight of imagination of web developers. It is noteworthy that, by tradition, the abundance of animation and even more interactive "ryushechki" always force users to put up with various inconveniences, ranging from exorbitant traffic and ending with the need to install all sorts of plug-ins to the browser, but this example shows that all this can be easily avoided - just Web developers to take advantage of the potential of the SVG format ( open an example in the browser ):
In conclusion, I can offer you to familiarize yourself with this comprehensively developed format in more detail , but for now let's move on to even more interesting technologies.
Tag video
First of all, let's see how the implementation of this technology looks directly in the browser. To do this, open the file containing only one line ( open an example in the browser ):
At first glance - nothing special: the Internet is simply flooded with similar videos embedded in web pages, there are even very popular online services offering hundreds of thousands of videos for viewing directly in the browser. In order to understand the difference, try turning off plugins in the browser (in the dialog box opened with the F12 key) and open any video on the same RuTube. That's right - it does not work. Now open the above example. And you will see that this video will be played as if nothing had happened. In fact, there is no miracle or deception, and the media player is not built into the browser. All that the developers have done is to include in the browser support for the video tag, which, by the way, is presented in the draft specifications of the future version of HTML-5, and also added a small codec for Opera to the free Ogg Theora format (which, by the way, is considered as an international standard for embedded video). Thus, as soon as the browser detects this tag in the code of a web page, it simply uses the embedded codec to play the embedded video file on the page. Also, if you wish, you can indicate in the tag the use of standard controls for the process of playing a video file (to be honest, they are not so good at design, but this is easily corrected, more on that later).
So, we found out that when using the video tag, there is no need to install additional plug-ins into the browser (and their total size may be even larger than the browser itself), which is already a plus. But there is a more weighty factor - financial and legal. The fact is that the currently popular flash format is proprietary technology owned by Adobe (a similar situation applies for slightly less popular realvideo and quicktime). Therefore, all those who use it in their professional activities related to making profit in one form or another are obliged to deduct a certain amount in convertible currency to the right holder. Of course, an ordinary user who watches videos on the network does not pay anyone, but all companies or services using this technology pay Adobe a “rent”, which, of course, is charged to the end user in one way or another. Plus, you can remember quite expensive development tools to get a more or less clear picture of how much flash technology uses. For completeness, it remains only to add that the adherents of free software in general are often forced to abandon such technologies because of incompatible licenses.
Fortunately, the video tag is an element of the HTML language and, therefore, belongs to the category of open technologies, the specifications of which are publicly available for free. This allows more flexibility to use its capabilities, and especially in tandem with other technologies, including JavaScript, CSS, and all the same SVG format. For example, this is how you can “screw” your own version of the translucent semi-transparent controls to the video ( open an example in the browser ).
But, perhaps, the greatest potential of this technology is revealed when used in conjunction with other avant-garde innovations. For example, if you embed this tag in the SVG file, it becomes possible to produce various manipulations with the image, including the use of filters. In this example, in addition to the original view, you can switch to the contour display mode or get a black and white picture ( open an example in the browser ).
In conclusion, it can be noted that this technology can be successfully used in various popular online services. Another example demonstrates how a Wikipedia page could look like, containing a video using the video tag.
Exploring Canvas
Canvas (in translation - “canvas”) is an even more interesting technology, also closely related to graphics. The canvas tag is an element of HTML-5 and is currently supported by several popular browsers. If in a nutshell, this technology allows you to create in the body of web pages special fields for drawing graphics, which, if desired, is associated with a blank canvas, on which the artist will later create his masterpiece. Only this canvas is virtual, and drawing on it becomes possible with the help of ordinary scripts. At first glance, Canvas is very similar to SVG, but between them there is one main difference: if the SVG format is a description of the elements of a graphic object, then the Canvas provides pixel-by-pixel control of graphics within the specified canvas. But this does not mean that you have to draw each point on the canvas separately: Canvas works great with scripts, and also allows you to go to the object level of drawing and even add animation or interactivity. To clearly see the capabilities of the Canvas, you can refer to this example ( open the example in the browser ):
What is the advantage of Canvas over existing technologies today that allow to implement similar graphical delights? As in the case of the video tag, web developers can easily embed graphical objects of various complexity into web pages without using any third-party plug-ins, graphic libraries and other types of additional software. At the same time, the size of objects embedded in the pages is extremely small, and the entire code is presented in text form, which allows search resources to index the contents of such images. And, of course, open Canvas specifications are available, allowing for flexible integration of this technology with others. As we see, there are quite tangible advantages, the value of which is difficult to overestimate. As an example of how complex things Canvas can do, you can look at a real graphic editor CanvasPaint (a copy of the well-known application from Microsoft), implemented using Canvas technology.
The scope for application of the opportunities provided by Canvas is limited only by the imagination of the developer. This technology can be used for a variety of purposes, ranging from decorating web pages to adding user-friendly interactive controls to the web site interface. And, of course, for creating entertainment content - Flash animation has become popular in many ways due to the emergence of many online miniature games, and in this field Canvas is as good as its proprietary competitors - using this technology, you can create applications of any complexity, using only HTML, CSS and JavaScript ( open an example in the browser ).
Note that the examples presented above relate to two-dimensional graphics, while Canvas has sufficient potential for embedding into web pages and three-dimensional objects. There is no particular difficulty here - just add the corresponding functions to the script to get an object visually presented in three dimensions ( open an example in the browser ).
Naturally, this contributes to the addition to the page even more nice looking graphic details or controls, while maintaining the small size of the data downloaded from the network and not requiring any additional plug-ins. And in terms of using 3D Canvas when creating entertaining online applications, new possibilities of modeling quite complex game processes are opening up.
At the end of the conversation about Canvas, it should be noted that this technology in its pure form is not of great interest - much greater potential lies in the use of Canvas in conjunction with other technologies. For example, in many examples presented in previous chapters, inquisitive readers will be able to find in the source code the canvas tag, with the help of which the authors have added additional functionality to their works.
Evolution continues
In general, now a very curious thing is happening in the world of web technologies - a return to the beginning of WEB is clearly visible. Judge for yourself: the first browsers were text, allowing you to view documents without any graphics. And what do we see now? SVG, Canvas, other latest developments - all of them for the most part operate on data in text form. In other words, browsers are again transformed into text, thus starting a new round of evolution of similar programs. But, of course, at a new level: the current text downloaded from the network allows generating not only graphic objects, but also three-dimensional animated applications in the browser window.
Well, such an evolution can only be welcomed, because in the case of widespread use of the above technologies, the Internet will become faster, better and more beautiful. Plus, there will be new opportunities for searching data and establishing relationships between the most diverse content, and these are already the distinctive features of the next generation Internet. Web developers will not be left behind either: with new technologies they will be able to spend much less time on creating very complex websites, while reducing the number of problems associated with the need to use complex and expensive technologies that are owned by certain companies. The Internet will become more free and accessible, and both developers and users of the worldwide network will be able to feel the positive effect. , , . , , , .
1
dev.opera.com .
2
, , Creative Commons Attribution .
www.myopera.net
Source: https://habr.com/ru/post/37628/
All Articles