English Activity: Omar Orlando Valbuena Baena
English Activity: Omar Orlando Valbuena Baena
English Activity: Omar Orlando Valbuena Baena
APRENDIZ
INSTRUCTOR
ENGLISH ACTIVITY
COLOMBIA
2018
Introduction
Dear learner, the next information taken from a webpage, will help you understand
better the concepts about HTML5; however, it is convenient for you to read and study
the technical documents prepared by your instructor.
Remember to check the unknown vocabulary in the glossary attached to this file.
What is HTML5?
HTML5 will be the new standard for HTML. The previous version of HTML, HTML 4.01, came in 1999.
The internet has changed significantly since then.
HTML5 is designed to deliver almost everything you want to do online without requiring additional
plugins. It does everything from animation to apps, music to movies, and can also be used to build
complicated applications that run in your browser.
HTML5 is also cross-platform (it does not care whether you are using a tablet or a smartphone, a
netbook, notebook or a Smart TV).
HTML5 can also be used to write web applications that still work when you are not online.
The HTML 5 working group includes AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera, and
hundreds of other vendors.
HTML5 is still a work in progress. However, all major browsers support many of the new HTML5
elements and APIs.
HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext
Application Technology Working Group (WHATWG).
WHATWG was working with web forms and applications, and W3C was working with XHTML 2.0. In
2006, they decided to cooperate and create a new version of HTML.
<!DOCTYPE html>
<!DOCTYPE html>
< html>
< head>
<meta charset="UTF-8">
< title>Title of the document</title>
< /head>
< body>
Content of the document......
< /body>
< /html>
HTML5 is not yet an official standard, and no browsers have full HTML5 support.
But all major browsers (Safari, Chrome, Firefox, Opera, Internet Explorer) continue to add new
HTML5 features to their latest versions.
HTML5 References
At W3Schools you will find complete references about tags, global attributes, standard events, and
more.
The internet, and the use of the internet, has changed a lot since HTML 4.01 became a standard in
1999.
Today, several elements in HTML 4.01 are obsolete, never used, or not used the way they were
intended. All those elements are removed or re-written in HTML5.
To better handle today's internet use, HTML5 also includes new elements for drawing graphics,
adding media content, better page structure, better form handling, and several APIs to drag/drop
elements, find Geolocation, include web storage, application cache, web workers, etc.
What is Canvas?
The HTML5 <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript).
The <canvas> element is only a container for graphics. You must use a script to actually draw the
graphics.
Canvas has several methods for drawing paths, boxes, circles, text, and adding images.
Browser Support
Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support the <canvas> element.
Note: Internet Explorer 8 and earlier versions, do not support the <canvas> element.
What is SVG?
SVG Advantages
Advantages of using SVG over other image formats (like JPEG and GIF) are:
SVG images can be created and edited with any text editor
SVG images can be searched, indexed, scripted, and compressed
SVG images are scalable
SVG images can be printed with high quality at any resolution
SVG images are zoomable (and the image can be zoomed without degradation)
Browser Support
Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support inline SVG.
In HTML5, you can embed SVG elements directly into your HTML page:
Example
<!DOCTYPE html>
< html>
< body>
< /body>
< /html>
Result:
Differences Between SVG and Canvas
SVG is XML based, which means that every element is available within the SVG DOM. You can
attach JavaScript event handlers for an element.
In SVG, each drawn shape is remembered as an object. If attributes of an SVG object are changed,
the browser can automatically re-render the shape.
Canvas is rendered pixel by pixel. In canvas, once the graphic is drawn, it is forgotten by the
browser. If its position should be changed, the entire scene needs to be redrawn, including any
objects that might have been covered by the graphic.
The table below shows some important differences between Canvas and SVG:
Canvas SVG
Resolution independent
Resolution dependent
Support for event handlers
No support for event handlers
Best suited for applications with large
Poor text rendering capabilities
rendering areas (Google Maps)
You can save the resulting image as .png
Slow rendering if complex (anything that
or .jpg
uses the DOM a lot will be slow)
Well suited for graphic-intensive games
Not suited for game applications
Reference:
GLOSSARY
Attribute: Atributo
Browser: Navegador
Content: Contenido
Current: Actual
Data: Información
Draggable: Arrastrable
Draw: Dibujar
Established: Establecidas
Event: Evento
Features: Características
File: Archivo
Graphic: Gráfico
Handling: Manejo
Heading: Encabezado
Location: Ubicación
Manipulate: Manipulación
Playing: Reproducir
Rules: Reglas
Should: Debería
Support: Soporte
Whether: Si
Yet: Todavía
Answer according to your own experience:
6. Are you An Architecture Student? If your answer is negative, what do you study?
No, I study technology in the analysis and design of information systems in the Sena.