DevTools Firefox

Torne-se um Mozillian!


LINK DA APRESENTAÇÃO:
jaimemaretoli.com/ferramentas

Apresentação Criada pela Comunidade Mozilla Brasil | Jaime Maretoli e Nelson Dutra

Conheça o Manifesto Mozilla e saiba o que pensamos e como pensamos.

Lutamos por uma internet de todos para todos.

Jaime Maretoli

  • Técnico em Informática formado pelo Senac
  • Bacharelando em Ciência da Computação
  • Pesquisador na área de Desenvolvimento Móvel
  • Mozillian desde Fevereiro de 2015
  • Membro do Hackerspace Laboratório Hacker
  • Sempre em eventos por aí...

Nelson Dutra


  • Graduando em Engenharia de Computação (UFPel)
  • Desenvolvedor Full Stack
  • Mozillian desde Janeiro de 2014
  • Club Leader no Quantum Firefox Club
  • Entusiasta de Software Livre

Você conhece a Mozilla?

História

  1. O Projeto Mozilla nasceu com o lançamento do código fonte do navegador Netscape
  1. Lançamento do Mozilla 1.0: A Primeira Grande Versão
  1. Criação Fundação Mozilla Sem Fins Lucrativos
  1. Na versão 1.0 do Firefox, +10.000 apoiaram à missão Mozilla pagando um anúncio New York Times

História

História

  1. Reorganização da Fundação: Criação da Corporação Mozilla
  1. Recorde Guinness World Record: Maior número de downloads em 24h
  1. 1º Navegador Móvel com complementos: Firefox Móvel tornou-se disponível na plataforma Nokia Maemo
  1. Início do projeto do Firefox OS
  1. Mozilla nomeada a empresa de Internet mais confiável
  1. Firefox OS Lançado na Mobile World Congress
  1. Firefox OS com primeiros telefones comerciais na Espanha
  1. Lançamento do Firefox redesenhado e com muitas novidades

Comunidade

"Trabalha em conjunto para manter a Internet viva e acessível para que todos sejam contribuidores e criadores da Web com uma plataforma de código aberto"

"Hoje a Mozilla tem colaboradores em cada continente, incluindo a Antártida (onde o Firefox é usado por 80% da população)"

"A comunidade ajudou a traduzir o Firefox para 70 idiomas, tornando o navegador disponível para mais de 90% da população mundial"

Manifesto Mozilla
https://www.mozilla.org/pt-BR/about/manifesto/

Na prática...

"Fazemos parte de uma comunidade global de pessoas que acreditam que a inovação, liberdade e oportunidade são a chave para a saúde contínua da Internet"

"Somos programadores, advogados, cientistas, designers, estudantes... Somos pessoas comuns que lutam para garantir a sua liberdade e direito de expressão."

Alguns Produtos e Projetos...

Firefox OS

"A mudança..."

Mozilla Firefox

"Orgulhosamente sem fins lucrativos, a Mozilla produz produtos como o Firefox com a missão de manter o poder da Web nas mãos dos usuários, pelo mundo inteiro e com 4 bilhões de complementos já instalados até agora"

Mozilla Firefox

Ferramentas de

Desenvolvimento

Barra de Ferramentas

Menu Ferramentas > Desenvolvedor Web > Exibir Ferramentas

Atalho: F12

Inspetor

Menu Ferramentas > Desenvolvedor Web > Inspetor

Atalho: Option + ⌘ + I ou CTRL + I

"Mover o mouse pela página, obter informações de elementos e alterá-los"

Console

Menu Ferramentas > Desenvolvedor Web > Console Web

Atalho: Option + ⌘ + K ou CTRL + K

"Permite ver mensagens de erro e outras informações..."

Depurador

Menu Ferramentas > Desenvolvedor Web > Depurar

Atalho: Option + ⌘ + S ou CTRL + S

"Permite percorrer o JavaScript, examinar ou modificar seu estado para ajudar a localizar bugs"

Monitor de Rede

Menu Ferramentas > Desenvolvedor Web > Rede

Atalho: option + ⌘ + Q ou ctrl + Q

"Mostra toda a rede que o Firefox solicita e seus detalhes, como quanto tempo leva cada pedido"

Editor de Estilos

Menu Ferramentas > Desenvolvedor Web > Rede

Atalho: shift + fn + F7 ou shift + F7

"Mostra todos os estilos, e editá-los."

Visualizador de Design Responsivo

Ferramentas > Desenvolvedor Web > Modo Design Adaptável

Atalho: ⌘ + option + M ou ctrl + shift + M

"Visualizar o Responsivo da Página"

Visualizador 3D

Sem atalho, mas podendo ser configurado.

"Faz com que seja fácil de visualizar o aninhamento do conteúdo. Em blocos de HTML."

WebIDE | Simuladores

Ferramentas > Desenvolvedor Web > WebIDE

Atalho: shift + F8

"Permite criar, editar, executar e depurar Web Apps"

E muito mais...

Mozilla Developer Network


developer.mozilla.org

Mozilla Developer Network


developer.mozilla.org

Criando uma conta na MDN


developer.mozilla.org

Aprenda, Crie, Edite, Traduza, Melhore...


developer.mozilla.org

Mozilla Learning Network

https://teach.mozilla.org/

"Oferece programas, instruções, documentos e uma comunidade para ajudar pessoas a aprender o mundo digital"

X-Ray Goggles

webmaker.org/goggles

"Permite visualizar e alterar páginas da web de forma mais intuitiva"

X-Ray Goggles

webmaker.org/goggles

Thimble

thimble.mozilla.org

"Ajuda a aprender a Web, criando e remixando projetos da Web"

Thimble

thimble.mozilla.org

Webmaker

beta.webmaker.org

"Permite criar, descobrir e compartilhar conteúdos de seu dispositivo móvel"

Webmaker

beta.webmaker.org

RUST

rust-lang.org

  • Seguro
  • Rápido
  • Simultâneo
  • Poder de uma linguagem de baixo nível

www.mozillabrasil.org.br

LINKS | DÚVIDAS? | SUGESTÕES


Obrigado!


Obrigado!