front end
1.0.0
Preparation : For this content, the student must have a computer with internet access, a web browser with HTML 5 support (Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, Opera, etc.), a text editor (VSCode, etc.) .) and a hosting platform (free or paid).
When we talk about website, we can notice that this term is the combination of two words in English: “web”, which means network and refers to the world wide web, and “site”, which means place. In this sense, a website or site is a place that can be accessed on the internet, through a URL, and has a set of pages programmed in some language.
To better understand this subject, let's look at an example: when you type the address blog.betrybe.com into your internet browser to access Trybe's blog, the browser will look for where this website is located on the internet. Then a request will be made to the server.
All the text, image and style files that make up the web page are stored on this server. Then, the server will return this set of documents to the browser so it can display the content as you see it on your screen.
Websites can present different forms and contents. Some of the options include: virtual stores, such as Mercado Livre and Amazon, where products can be purchased and sold; institutional websites and portfolios, used by companies and people to present themselves and be found by clients; and blogs, like the one you read.
Furthermore, websites can also be classified as static or dynamic. Static websites are generally developed using HTML, CSS and JavaScript. Its content is simpler and there is no interaction with a database.
Dynamic websites, in addition to taking advantage of HTML, CSS and JavaScript, also use more robust programming languages, such as PHP. These sites have functionality connected to a database. This way, each page accessed can bring specific data.
With Web Design you need to observe the importance of the interface for website development, evolution of technologies used in the construction of rich web pages (web 1.0, web 2.0, web 3.0 and web 4.0), evolution of interfaces (aesthetic, functional and structural).
Therefore, you need to understand the importance of creating rich interfaces for building a website, aiming for the best navigation and usability experience for the end user, knowing some technologies used in the past to build online sites. From this vision, observe old market trends, as well as see new trends in the development of interfaces.
Color palette:
Gradients:
Basically, web development means coding pages for the internet. However, this task goes beyond the use of HTML and CSS, the basic tools for creating a static page — which presents information that can only be modified by editing the source code.
Conversely, pages on a website can be dynamic. This means that the displayed content can be changed without interfering with the source code. To make this possible, the dynamic parts of the website are stored in a database, which is accessed whenever it is necessary to retrieve this content.
This feature allows the development of complex applications, which use business rules, APIs — Application Programming Interface — and much more. Therefore, there is a division in activities focused on web development, client-side coding (front-end) and server-side coding (back-end).
API example with, the most used structure currently for Web and Mobile Applications, REST API also called RESTful API .
Web applications are the growing number of sites on the Web; that is, they mimic desktop applications rather than the traditional documents and static links of text and images that make up the majority of the Web. As an example, we have online word processors, photo editing tools, mapping websites, etc. Powered heavily by JavaScript, they pushed HTML4 to the brink of its capabilities. HTML5 specifies new APIs (Application Programming Interface) for DOM (Document Object Model), which is a cross-platform, language-independent convention for representing and interacting with HTML, XHTML, and XML objects and documents.
These new APIs help you drag and drop objects sent by the server, such as drawings, videos and the like.
These new interfaces that HTML pages expose to JavaScript via objects in the DOM make it easier to write applications using highly specified patterns, rather than just poorly documented gimmicks.
Even more important is the need for an open standard that is free (to use and to implement) that can compete with proprietary standards like Adobe Flash or Microsoft Silverlight. Regardless of what you think of these technologies or companies, we believe that the Web is a vital platform for society, commerce and communications to be in the hands of a manufacturer.
There are millions of Web pages already in use out there, and it is imperative that they continue to be reproduced. So, HTML5 is mostly a derivative of HTML4 that continues to define how browsers should handle old markup like ,
The term interface can have several meanings depending on the area in which it is studied. In the area of Information Technology, interface means the possibility of communication between two systems that could not communicate naturally without some external help .
HCI is the study of the interaction between people and computers. It is an interdisciplinary subject that relates computer science, arts, design, ergonomics, psychology, sociology, semiotics, linguistics, and related areas. The interaction between humans and machines takes place through the user interface, made up of software and hardware.
Human-computer interaction is a discipline concerned with the design, evaluation and implementation of interactive computing systems for human use and the study of the main phenomena surrounding them.
Send email
The term digital media is the opposite of analogue media, which was configured by a material base: the sound was recorded in small grooves, on a vinyl surface and, when a needle passed through these grooves, the sound was reproduced. In digital media, physical support practically disappears, and data is converted into numerical or digit sequences - hence the use of the term digital. In this way, sounds, images, texts are actually sequences of numbers, which allows data sharing, storage and conversion. In the broadest sense, digital media can be defined as the set of communication vehicles and devices based on digital technology, allowing the digital distribution or communication of written, sound or visual intellectual works. Means of electronic origin used in brands' communication strategies with their consumers, generally called digital media.
Flash has always been the most viable alternative for those who needed to add videos and music to Web pages. It was and still is present in almost all browsers and we had a format that could be used without any major problems.
Just add a call to the plugin and it works.
Due to browser inconsistencies, it was necessary to add both the
Due to all this, HTML 5 comes with new support, native to the language, to avoid the use of unnecessary plugins and commands. Currently, just place the simple call, as if it were an image and the file is triggered.
The problem presented by the new command is the use of the src attribute which does not work well in some browsers. And if we want everyone to be able to open the page, with any browser, it is necessary to use another type of attribute. Therefore, it is common to use the tag.
The
< video width =" 426 " height =" 240 " controls > < source src =" video.mp4 " type =" video/mp4 " > < source src =" video.webm " type =" video/webm " > < source src =" video.ogg " type =" video/ogg " > video >
< audio controls > < source src =" audio.mp3 " type =" audio/mpeg " > < source src =" audio.ogg " type =" audio/ogg " > < source src =" audio.wav " type =" audio/wav " > audio >
There are several possible codecs and you will need to export at least two versions to have a greater reach.
Note : Codecs are programs used to encode and decode media files. They compress the original format, favoring storage, and decompress it during reproduction, transforming it back into image or audio.
All audio and video examples mentioned are imported via document in the directory. And the question is, how do I import a video already hosted on a site like YouTube or Vimeo? And which of the two solutions (Via document or via server) is the most advantageous?
Let's see how to import videos from YouTube and Vimeo, step by step!
Until the appearance of HTML5, tables were used as a resource for designing page layouts. Designers used tables as a grid to display images and text, and they were widely used, becoming the predominant form of website design, thus creating a rich look.
However, today, the use of tables is, in fact, interfering with the construction of better, more accessible, flexible and functional websites, especially for new media, such as cell phones, tablets, etc.
These tables still exist in HTML 5 as a resource for displaying tabular data, information coming from a database. With the new version of HTML, we can create websites made completely without tables, thus creating dynamic layouts that appear on large screens like on a computer and adapt well to a small smartphone screen. Later you will see how to build responsive layouts with HTML5 and CSS3.
The table command was not removed from the language, but its use was restricted. On the other hand, we still have several websites that use this resource, so it is important that we understand how it works so that we can, if necessary, maintain this type of page.
The command to insert a table is . To start a line , we must introduce the
tag and for a cell , which divides the table row. divides the table row by placing the content in bold. All these commands are terminated as and respectively.
< table >
< tr >
< td > td >
< td > td >
tr >
table > The To choose the internal rows that will be shown within the table, we use the See some examples: The HTML forms part is very important for filling in data that users enter into the HTML page. This data is collected by the back-end with a back-end programming language (PHP, JavaScript, Python, Java, etc.) that stores and queries this data in a database (MySQL, PostgreSQL, MongoDB, OracleDB, etc.). ). Let's look at form tags: Login Form (boilerplate) : command has a series of attributes that help with table formatting. The main ones are:
align="" aligns the table in three positions: center , left , right and justify bgcolor="" determines the color of the table border="" determines the size of the border, if it is zero it does not show the border cellspacing="" determines the spacing between cells colspan="" determines the grouping between two or more table columns (sideways) rowspan="" determines the grouping between two or more rows in the table. (down and up direction) cellpadding="" determines the spacing between the text and the cell border Rules attribute
RULES attribute, within the tag. The complements of this attribute are: none no entire line. all to show all rows between each column and row in the table (default) rows for the horizontal lines between each row in the table. cols for the vertical lines between each column of the table. groups for rows between column groups and horizontal sections, defined by special tags such as < table border rules =" all " 6 >
">
">
">
">
Form TAGs
Senha: