Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Apresentação IFRN

    Enviado por

    Thyago Sobreira
    2K visualizações31 páginas
    Este documento apresenta uma aula sobre criação de páginas web do lado do cliente (front-end) com HTML, CSS e JavaScript. O professor Thyago Sobreira irá ensinar sobre as linguagens e conceitos fundamentais do front-end, incluindo tags HTML, propriedades CSS e sintaxe básica de JavaScript.

    Descrição original:

    Direitos autorais

    © © All Rights Reserved

    Formatos disponíveis

    PPTX, PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento
    Este documento apresenta uma aula sobre criação de páginas web do lado do cliente (front-end) com HTML, CSS e JavaScript. O professor Thyago Sobreira irá ensinar sobre as linguagens e conceitos fundamentais do front-end, incluindo tags HTML, propriedades CSS e sintaxe básica de JavaScript.

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PPTX, PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    2K visualizações31 páginas

    Apresentação IFRN

    Enviado por

    Thyago Sobreira
    Este documento apresenta uma aula sobre criação de páginas web do lado do cliente (front-end) com HTML, CSS e JavaScript. O professor Thyago Sobreira irá ensinar sobre as linguagens e conceitos fundamentais do front-end, incluindo tags HTML, propriedades CSS e sintaxe básica de JavaScript.

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PPTX, PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 31

    Instituto Federal do Rio Grande do Norte

    Curso de Sistemas de Informação

    CRIAÇÃO DE PÁGINAS WEB DO LADO DO CLIENTE


    (FRONT-END) COM HTML, CSS JAVASCRIPT.

    Prof. Msc: Thyago Alves Sobreira

    1
    ◇ Quem sou eu?

    ￭ Graduado em Computação (bacharelado), pela UEPB campus Patos:


    ￮ Monitor de Redes de computadores I;
    ￮ Monitor de Projeto de Interface.

    ￭ Mestrando em Ciência da computação pela UFERSA campus Mossoró:


    ￮ Pesquisador de tecnologia voltada para educação;
    ￮ Ministrou a disciplina de Projeto de sistemas;
    ￮ Ministrando Gestão de projetos.

    2
    Roteiro

    ◇ Motivação; ￭ O que é, para que serve;


    ◇ Introdução: ￭ Sintaxe (operadores e variáveis);
    ￭ Programação WEB. ￭ Tag Script;
    ￭ Script;
    ◇ Front-end; ￭ Alterando páginas;
    ◇ HTML: ￭ Funções;
    ￭ O que é?; ￭ Eventos.
    ￭ Tags;
    ￭ Exemplo.
    ◇ CSS:
    ￭ O que é e para que foi feita;
    ￭ Sintaxe;
    ￭ Tag style;
    ￭ Propriedades Tipográficas e
    fontes.
    ￭ Alinhamento e Decoração.
    3
    Motivação

    ◇ Qual a importância de criar uma página web (Porquê)?

    ￭ Fortalecimento da marca;
    ￭ Visibilidade;
    ￭ Vender mais;
    ￭ Flexibilidade de publicidade;
    ￭ Fácil personalização;
    ￭ Baixo custo.

    4
    Motivação

    ◇ Mercado, estimativa realizada em 2016.

    Vagas mais buscadas Habilidade mais requisitadas


    Sem especificação
    4% Back-end Inglês
    16%

    PHP

    CSS

    Full Stack HTML


    48%
    Front-end
    32% JavaScript

    0% 10%20%30%40%50%60%70%80%

    5 Fonte: http://tutano.trampos.co/14187-infografico-mercado-de-desenvolvimento-brasil/
    Introdução

    ◇ Programação Web.

    ￭ Back-end:
    ￮ Regras do negócio, onde serão realizadas todas as operações através do
    gerenciador de conteúdo.

    ￭ Front-end:
    ￮ Interface do usuário, onde haverá interação do sistema com o usuário.

    6
    Front-end

    ◇ O desenvolvedor front-end é o responsável por dar vida a interface;

    ◇ Trabalha diretamente com a parte da aplicação que integre com o usuário:


    ￭ Importante se preocupar com experiência do usuário:
    ￮ Cores;
    ￮ Estilo;
    ￮ Domínio da aplicação...

    ◇ Para um bom desenvolvimento front-end, é necessário focar no aprendizado de:


    ￭ HTML (linguagem de marcação);
    ￭ CSS (linguagem de estilo);
    ￭ JavaScript (Linguagem de script/programação).

    7
    HTML

    ◇ O que é, para que foi feita e da onde veio?

    ￭ Linguagem de marcação de hipertexto;


    ￭ Foi criada para fácil entendimento por seres humanos e também por máquinas;
    ￭ Desenvolvida pelo físico e cientista da computação Tim Berners-Lee;
    ￭ Versão 5.

    8
    HTML

    ◇ Funcionamento.

    ￭ Como é uma linguagem baseada em marcação, funciona basicamente marcando


    informações para mostrar na exibição da página;

    ￭ Essas informações são escritas por Tags.

    9
    HTML

    ◇ Tags.

    ￭ Representa parágrafos, titulo, manchetes... Entre outras coisas;

    ￭ Representada por um caractere entre o sinal de menor e maior <>. Exemplo:

    ￮ <html> (inicio e fim de toda a página a ser exibida)


    ￮ <head> (Inicio e fim do título do documento)
    ￮ <title> (título da página)
    ￮ <body> (corpo de documento que será exibido)
    ￮ <p> (parágrafo)
    ￮ <h1> (Texto do título do conteúdo)
    ￮ ....

    10
    HTML

    ◇ Tags.

    ￭ Inserção de imagens:

    ￮ <img src=“diretórioDaImagem/nome.formato”/>

    ￭ Deixar texto em Itálico e negrito

    ￮ Itálico: <em>Texto</em>;
    ￮ Negrito: <strong>Texto</Strong>.

    11
    HTML

    ◇ Tags.

    12
    CSS

    ◇ O que é, para que foi feita?

    ￭ Significa folha de estilo em cascata;


    ￭ Versão 3;
    ￭ Usada para estilizar o que foi descrito no HTML;
    ￮ Cor do texto;
    ￮ Do fundo;
    ￮ Espaçamento;
    ￮ Fonte...

    ￭ Desenvolvido em 1996 para auxiliar na formatação de páginas.

    ￭ Podemos fazer uma simples analogia:


    ￮ HTML: O alicerce do site;
    ￮ CSS: As portas, janelas, pintura.
    13
    CSS

    ◇ Sintaxe.

    ￭ Declaração de propriedades e valores separado por sinal “ : ”;


    ￭ Propriedade separada por um sinal de “ ; “;

    ￭ Exemplo:

    ￮ O elemento que recebe a propriedade será exibido de azul com o fundo


    amarelo.

    14
    CSS

    ◇ Tag style

    ￭ Outra maneira (melhor), de utilizar o CSS;


    ￭ Ajuda a organizar o documento, indicando qual elemento está sendo estilizado;

    ￭ Exemplo:

    15
    CSS

    ◇ Propriedades Tipográficas e fontes.

    ￭ Podemos definir fontes por meio da propriedade “font – family”;


    ￭ Exemplo:

    ￮ O navegador verificará se a fonte “Arial” está disponível, caso não esteja


    será utilizada a fonte “Helvetica”. Caso não encontre nenhuma, será
    utilizada qualquer fonte da família “sans-serif”.

    16
    CSS

    ◇ Alinhamento e Decoração.

    ￭ Propriedade muito utilizada para o alinhamento é a “test–align”;


    ￭ Ex:

    ￮ Todos os parágrafos da página tenham texto alinhados a direita.

    ￭ Também são utilizados:


    ￮ Center (alinhado ao centro);
    ￮ Justifiy (ocupar toda largura da página);
    ￮ Left (Alinhado à esquerda).

    17
    CSS

    ◇ Alinhamento e Decoração.

    ￭ É possível configurar uma série de espaçamento de texto.

    18
    CSS

    ◇ Bordas

    ￭ É possível definir as bordas de um elemento, determinado sua cor, seu estilo e


    sua largura

    ￭ Exemplo:

    19
    CSS

    ◇ Existe X funcionalidade do HTML e CSS, porém essa aula se ateve a uma breve
    introdução, para que possa ver o poder das linguagens e suas funcionalidades.

    20
    JavaScript

    ◇ O que é, para que serve ?

    ￭ Linguagem de programação mais popular da internet;


    ￭ Nasceu visando potencializar a internet, potencializando uma interação maior
    dos usuários com as páginas;
    ￭ Suportada por todos os navegadores;
    ￭ Muito poderosa, pode fazer quase tudo com ela!
    ￭ Possui grande tolerância a erros:
    ￮ Pode ser fonte de muitos Bugs.

    21
    JavaScript

    ◇ Sintaxe básica (operadores).

    ￭ Pode-se somar, subtrair e dividir:


    ￭ Ex.

    22
    JavaScript

    ◇ Sintaxe básica (variáveis).

    ￭ Variável String, armazena um texto. EX:

    ￭ Pode criar variáveis para armazenamento de um valor (number):


    ￭ Ex.
    Resultado de uma variável criada é sempre undefined

    23
    JavaScript

    ◇ Tag Script.

    ￭ Para inserir um código JavaScript na página, é necessário utilizar a tag <script>;


    ￭ Pode ser declarada dentro da tag <head>;

    24
    JavaScript

    ◇ Script

    ￭ É possível reutilizar uma página já criada, o JavaScript permite isso!

    ￭ Ex:
    ￮ No arquivo HTML...

    ￮ Conteúdo do arquivo externo chamado:

    25
    JavaScript

    ◇ Alterando páginas.

    ￭ Para permitir a alteração de páginas, ao carregar o HTML os navegadores


    carregam em memória uma estrutura de dados que representam cada uma das
    tegs do JavaScript.

    ￭ Variável se chama “document”;

    ￭ Alterando...

    textContent é para alterar

    26
    JavaScript

    ◇ Funções.

    ￭ Para uma boa prática de programação e realizar o reuso de código é de grande


    importância que o programador crie funções, e a chame nos momentos
    oportunos.

    ￭ Criando funções no JavaScript...

    ￭ Chamando função no JavaScript...

    27
    JavaScript

    ◇ Eventos.

    ￭ Existe vários eventos que podem ser implementado no JavaScript para que a
    interação com o usuário possa disparar alguma função:

    ￮ Oninput: Quando um elemento inpult tem seu valor modificado;


    ￮ Onclick: Quando ocorre um click com o mouse;
    ￮ Ondblclick: Quando ocorre dois cliks no mouse....

    28
    JavaScript

    ◇ Exemplo de uma chamada de função pelo evento de click.

    29
    Por Fim!

    ◇ A junção dessas 3 linguagem de desenvolvimento WEB é muito poderosa, é


    praticamente possível fazer tudo. Deixar a página do jeito que quiser.
    ◇ Hoje existe muitos Frameworks que ajudam na programação Front-end:
    ￭ Bootstrap;
    ￭ Laravel...
    ￭ Entre outros!

    30
    Referências

    ◇ VILAVERDE, Ludimila. Infografo: Como é o mercado de desenvolvedores web no


    brasil?. Tutano, 2016. Disponível em: < http://tutano.trampos.co/14187-infografico-
    mercado-de-desenvolvimento-brasil/>. Acesso em: 29/04/2019.
    ◇ Desenvolvendo Web com HTML, CSS e JavaScript. Caleum. Disponível em:
    <https://www.caelum.com.br/download/caelum-html-css-javascript.pdf>. Acesso em:
    29/04/2019.
    ◇ FREEMAN, Elisabeth. Use a cabeça!: HTML com CSS e HTML. Alta books, 2008.

    31

    Você também pode gostar