🏙️
Interfaces: 03/08
Interface, UI, UX, HTML e IDE
Interface;
Interface é a comunicação física ou lógica entre sistemas.
Design;
A concepção, idealização e planejamento para a criação de um
objeto.
UI;
UI é o ambiente digital em que o usuário tem resposta visual e
simples de uma ação.
UX;
É a experiência do usuário com a interface.
Interfaces: 03/08 1
HTML:
O que é;
É uma linguagem de marcação de hipertexto.
Para que serve;
Para a criação de páginas para a internet.
Versões;
O que é IDE;
É um ambiente de desenvolvimento integrado, é utilizado para
agilizar o processo de desenvolvimento.
O que consigo desenvolver com HTML;
Sites para WEB marcando textos, imagens, tabelas e demais tipos
de conteúdos.
HTML
Interfaces: 03/08 2
Vá em: Abrir Pasta...
Crie a pasta: Códigos. Dentro de Códigos crie a pasta: Imagens. Selecione a
pasta códigos.
TAGs
Interfaces: 03/08 3
Standalone: não há necessidade de fechamento. Exemplo:
<!DOCKTYPE html>
Abertura: <p>, <h1>.
Fechamento: <!p>, <!h1>.
IDE utilizada
Visual Studio Code.
Extesions for VS CODE
Name: HTML Snippets
Id: [Link]-snippets
Description: Full HTML tags including HTML5 Snippets
Version: 0.2.1
Publisher: Mohamed Abusaid
VS Marketplace Link:
[Link]
itemName=[Link]-snippets
Name: Live Server
Id: [Link]
Description: Launch a development local Server with live
reload feature for static & dynamic pages
Version: 5.6.1
Publisher: Ritwick Dey
VS Marketplace Link:
[Link]
itemName=[Link]
Name: Material Icon Theme
Id: [Link]-icon-theme
Description: Material Design Icons for Visual Studio Code
Version: 4.8.0
Publisher: Philipp Kief
VS Marketplace Link:
Interfaces: 03/08 4
[Link]
itemName=[Link]-icon-theme
Name: open in browser
Id: [Link]-in-browser
Description: This allows you to open the current file in your
default browser or application.
Version: 2.0.0
Publisher: TechER
VS Marketplace Link:
[Link]
itemName=[Link]-in-browser
Name: Bracket Pair Colorizer
Id: [Link]-pair-colorizer
Description: A customizable extension for colorizing matching
brackets
Version: 1.0.61
Publisher: CoenraadS
VS Marketplace Link:
[Link]
itemName=[Link]-pair-colorizer
Name: Color Highlight
Id: [Link]-highlight
Description: Highlight web colors in your editor
Version: 2.4.0
Publisher: Sergii Naumov
VS Marketplace Link:
[Link]
itemName=[Link]-highlight
Nome: Auto Close Tag
ID: [Link]-close-tag
Descrição: Automatically add HTML/XML close tag, same as
Visual Studio IDE or Sublime Text
Versão: 0.5.12
Editor: Jun Han
Interfaces: 03/08 5
Link do Marketplace do VS:
[Link]
itemName=[Link]-close-tag
Nome: Auto Rename Tag
ID: [Link]-rename-tag
Descrição: Auto rename paired HTML/XML tag
Versão: 0.1.8
Editor: Jun Han
Link do Marketplace do VS:
[Link]
itemName=[Link]-rename-tag
Nome: Beautify
ID: [Link]
Descrição: Beautify code in place for VS Code
Versão: 1.5.0
Editor: HookyQR
Link do Marketplace do VS:
[Link]
itemName=[Link]
Nome: Dracula Official
ID: [Link]-dracula
Descrição: Official Dracula Theme. A dark theme for many
editors, shells, and more.
Versão: 2.23.0
Editor: Dracula Theme
Link do Marketplace do VS:
[Link]
[Link]-dracula
Nome: Rainbow Brackets
ID: [Link]-brackets
Descrição: A rainbow brackets extension for VS Code.
Versão: 0.0.6
Editor: 2gua
Link do Marketplace do VS:
Interfaces: 03/08 6
[Link]
itemName=[Link]-brackets
Name: CSS Peek
Id: [Link]-css-peek
Description: Allow peeking to css ID and class strings as
definitions from html files to respective CSS. Allows peek
and goto definition.
Version: 4.2.0
Publisher: Pranay Prakash
VS Marketplace Link:
[Link]
itemName=[Link]-css-peek
[Link]
<DOCKTYPE html>
<html>
<head>
<title>
Primeira Página HTML5
</title>
</head>
<body>
<h1>
Hello World
</h1>
<p>
Salve
</p>
</body>
</html>
[Link]
Interfaces: 03/08 7
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name ="description" content="Página Oficial do
<meta name = "author" content="Jailson Costa dos Sant
<meta name="keywords" content="PROA, Oficial, Alunos"
<meta name="viewport" content="width=device-width, in
<title>
Segunda Página HTML5
</title>
</head>
<body>
<h1>
PROA - Instituição.
</h1>
<p>Jailson</p>
<p>Proa <br>Equipe 04</p>
<p>José</p>
</body>
</html>
Utilizar o comando <!> para a pre-configuração de todos os
metas.
Sites Úteis
[Link]
[Link]
[Link]
Interfaces: 03/08 8