Fundamentos da Web

Fundamentos da Web "The Dark Side" of the web

Secções 1. Conceitos Básicos 2. HTML 3. CSS 4. Javascript
5. Chrome DevTools 6. Q&A

Conceitos Básicos

Elementos de um website

HTML CSS JS Website Apresenta e estructura informação de conteudos
Aplica design com cores, fontes e formas Adiciona comportamentos e funcionalidade Camadas de um website

Igual que nos M&M's

Versões actuais

HTML Hypertext Markup Language Formato Estructura Instruções Etiquetas (tags) Links

Etiquetas HTML (Tags) <abrir> </fechar>

<!DOCTYPE html> <head> <title>Nome do Site</title> <meta ... > <css
... > <javascript ... > </head> <body> <p>parágrafo</p> <a href...>link</a> <img src... /> <div class...>conteudos varios</div> </body> </html> Estructura básica HTML5

<!DOCTYPE html> <head> <title>Nome do Site</title> <meta ... > <css
... > <javascript ... > </head> <body> <p>parágrafo</p> <a href...>link</a> <img src... /> <div class...>conteudos varios</div> </body> </html>

Tags mais frequentes

<body> Parágrafo <p>Hello world! This is HTML5. </p> Break line
<p>Hello world! <br /> This is HTML5. </p> Link <a href="http://google.com" target="_blank" >Hello world!</a> Bold <strong>Hello world!</strong> This is HTML5. Italic <em>Hello world!</em> This is HTML5.

Headline <h1> - <h6> <h1>Hello world! This is HTML5.</h1> div
<div class="box"> <h3>Hello world!</h3> <p>This is HTML5.</p> </div> Order list <ol> <li>Hello world!</li> <li>This is HTML5</li> <li>...</li> </ol> Hello world! This is HTML5 1. Hello world! 2. This is HTML5 3. ...

Unorder list <ul> <li>Hello world!</li> <li>This is HTML5</li> <li>...</li> </ul>
Image <img src="img/smile.png" alt="Smile" height="32px" width="46px" / > Small Text <small>I'm a small text </small> Botão <button type="buttom" >Click Me!</button> </body> Todos os tags: http://www.w3schools.com/tags/ • Hello world! • This is HTML5 • ...

Componentes e Tags de HTML5 <header> <nav> <aside> <section> <article>
<footer> <body> </body>

CSS Cascade Style Sheet Presentação • Cores • Tipografias •
Tamanhos • Margens • ... Save a lot of work!

p { color: #FF0099; font-size: 1em; font-family: "Helvetica", Arial; }
.text { font-weight: bold; padding: 20px 10px 20px 10px; text-align: right; text-decoration: none; } #title1 { border-bottom: 1px solid red; margin: 2em 0.6em; display: block; background-color: rgba(255,35,145,0.5); } Elements Classes ID Mais informação: http://www.w3schools.com/css/ Uma unica utilização

Javascript

JavaScript é uma linguagem de programação interpretada . Foi originalmente
implementada como parte dos navegadores web para que scripts pudessem ser executados do lado do cliente e interagissem com o usuário sem a necessidade deste script passar pelo servidor, controlando o navegador, realizando comunicação assíncrona e alterando o conteúdo do documento exibido. - Wikipedia

Livreria JavaScript

Chrome Dev Tools

- Google Developers The DevTools, bundled in Chrome, provide web
developers deep access into the internals of the browser and their web application.

Acceder a DevTools • Selecionar o menu na parte superior
direita do Google Chrome, e depois Tools -> Developer tools. • Botão direito em qualquer parte da pagina e seleccionar Inspect element. • Varios atalhos rapidos para acceder a DevTools: ◦ Ctrl + Shift + I (Mac: ⌥⌘I) Para abrir Developer Tools ◦ Ctrl + Shift + J (Mac: ⌥⌘J) Para abrir Developer Tools e mostrar a Consola. ◦ Ctrl + Shift + C (Mac: ^⌘C) para mudar no modo Inspect Element.

The DevTools Window

Inspect the DOM and Styles

Debugging JavaScript

Improve Network Performance

Recursos • Formação: ◦ Web Fundamentals ◦ W3 Schools ◦
HTML5 Please ◦ HTML5 Rocks ◦ Chrome DevTools • Frameworks HTML+CSS+JS ◦ Twitter Bootstrap ◦ Zurb Foundation ◦ Sapo Ink ◦ HTML5 Boilerplate • Validator HTML+CSS ◦ W3C Markup Validator Service

Duvidas? !!!

Obrigado! Help! @rbarona

Fundamentos da Web

Fundamentos da Web

More Decks by Rodrigo Barona

Other Decks in Technology

Featured

Transcript