|
|
| (29 revisões intermediárias por 3 usuários não estão sendo mostradas) |
| Linha 1: |
Linha 1: |
| =Plano de ensino=
| | '''Semestre''': 2º |
| ==1. IDENTIFICAÇÃO==
| | =Objetivo= |
| '''Curso''': Tecnologia em Análise e Desenvolvimento de Sistemas | | Estudar e utilizar as tecnologias básicas para a construção de web sites, em especial a linguagem de marcação HTML, em conjunto com a linguagem de folha de estilos – CSS e a linguagem de programação Javascript. |
| | | =Ementa= |
| '''Componente Curricular''': Desenvolvimento Web I
| |
| | |
| '''Professor''': Estevan Braz Brandt Costa
| |
| | |
| '''Turma''': 01/2015
| |
| | |
| '''Período Letivo''': Segundo
| |
| | |
| '''Ano:''' 2015
| |
| | |
| '''Carga horária''': 72
| |
| | |
| '''Horário Semanal de Atendimento ao Estudante:''' Determinar uma data
| |
| | |
| ==2. EMENTA==
| |
| Visão histórica da internet; Conceitos básicos sobre o funcionamento e os protocolos da internet; Conceito de hipertexto e hipermídia; Linguagem de marcação HTML e sua utilização na estruturação de páginas web; Linguagem de folha de estilos (CSS); linguagem de programação JavaScript. | | Visão histórica da internet; Conceitos básicos sobre o funcionamento e os protocolos da internet; Conceito de hipertexto e hipermídia; Linguagem de marcação HTML e sua utilização na estruturação de páginas web; Linguagem de folha de estilos (CSS); linguagem de programação JavaScript. |
|
| |
|
| ==3. CONTEÚDO PROGRAMÁTICO== | | =Planos de ensino= |
| # Linguagem HTML
| | * [[Media:Plano-ensino-web1-2016.2.pdf | 2016/2]] (Prof. Itamar Pena Nieradka) |
| ## Tag's de gerenciamento de conteúdo
| | * [[TADS:Desenvolvimento Web I (2015-2)|2015/2]] (Prof. Estevan Braz Brandt Costa) |
| ## Navegação entre páginas
| | * [[TADS:Desenvolvimento Web I (2014-2)|2014/2]] (Prof. Felippe Scheidt) |
| ## Gerenciamento de Imagens e vídeos
| |
| ## Tabelas
| |
| ## Formulários GET e POST
| |
| ## HTML 5
| |
| # CSS
| |
| ## Criação de Regras e Seletores
| |
| ## Formatação de textos e imagens
| |
| ## Posicionamento de blocos com DIV
| |
| ## Regras vinculadas a ações do usuário
| |
| # Javascript
| |
| ## Integração do Javascript com o HTML
| |
| ## Variáveis
| |
| ## Funções
| |
| ## Arrays em Javascript
| |
| ## Gerenciamento do DOM (Document Object Model)
| |
| ## Criação de Objetos em Javascript
| |
| ## Utilização de Frameworks
| |
| | |
| ==4. OBJETIVOS DO COMPONENTE CURRICULAR ==
| |
| Estudar e utilizar as tecnologias básicas para a construção de web sites, em especial a linguagem de marcação HTML, em conjunto com a linguagem de folha de estilos – CSS e a linguagem de programação Javascript
| |
| | |
| ==5. PROCEDIMENTOS METODOLÓGICOS==
| |
| ===Metodologia de ensino===
| |
| * Aulas expositivas em laboratório de informática com projetor. | |
| * Uso de ambiente de programação para desenvolvimento das atividades
| |
| * Uso do computador para em laboratório para exemplificação dos conteúdos didáticos
| |
| | |
| ===Recursos e materiais===
| |
| * Aulas expositivas empregando: quadro, multimídia;
| |
| * Seminários para apresentação de trabalhos;
| |
| * Trabalhos individuais e/ou grupo;
| |
| * Exercícios em sala de aula.
| |
| | |
| ==6. AVALIAÇÃO==
| |
| Trabalhos individuais e/ou grupo;
| |
| | |
| Apresentação de seminários;
| |
| | |
| Provas bimestrais individuais;
| |
| | |
| Participação em sala.
| |
| | |
| ==REFERÊNCIAS BIBLIOGRÁFICAS==
| |
| ===REFERÊNCIAS BÁSICAS===
| |
| # SILVA, Maurício Samy. JavaScript: Guia do Programador. Novatec, 2010.
| |
| # SANDERS, Bill. Smashing HTML 5: Técnicas para a Nova Geração da Web. Bookman, 2012.
| |
| # MEYER, Eric A. Smashing CSS - Técnicas Profissionais para um Layout Moderno. Bookman, 2011.
| |
| # LUBBERS, Peter; ALBERS, Brian; SALIM, Frank. Programação Profissional em HTML5. Altabooks, 2013.
| |
| # FLANAGAN, David. JavaScript: O Guia Definitivo. Bookman, 2012.
| |
| | |
| ===REFERÊNCIAS COMPLEMENTARES===
| |
| # LAWSON, Bruce; SHARP, Remy. Introdução ao HTML 5. Altabooks,
| |
| # COLLISON, Simon. Desenvolvendo CSS na Web: do Iniciante ao Profissional. Altabooks, 2008.
| |
| # GOMES, Ana Laura. XHTML/CSS – Criação de páginas web. Senac, 2010.
| |
| # SILVA, Mauricio Samy. HTML5 – A Linguagem de Marcação que Revolucionou a Web. Editora Novatec: 2011.
| |
| # BOLTON, Jina; SMITH, Steve; ADAMS, Cameron; JOHNSON, David. A Arte e a Ciência da Css - Crie Web Designs Inspiradores Baseados em Padrões. Editora Bookman: 2009.
| |
| | |
| = Diários de Sala =
| |
| | |
| | |
| ==23/fevereiro==
| |
| LUTO
| |
| | |
| ==18/fevereiro==
| |
| Pendente
| |
| | |
| ==16/fevereiro==
| |
| Como já visto anteriormente, o Javascript não possui uma ligação direta com o html. Estes conversam por meio de um intermediário chamado DOM (Document Object Model). Isto não é diferente no jQuery. Assim temos alguns métodos específicos para poder trabalhar com este DOM, que podem facilmente adicionar ou remover elementos.
| |
| No exemplo a seguir é possível ver o método APPEND, que adiciona um elemento a página.
| |
| | |
| <syntaxhighlight lang="jQuery">
| |
| <html>
| |
| <script src="jquery-2.2.0.min.js"></script>
| |
| <script>
| |
| var x = 0;
| |
| $(document).ready(function(){
| |
| $("#botao").click(function(){
| |
| //$("#saida").html("<p>Oi</p>");
| |
| $("#saida").append("<p>Oi"+x+"</p>");
| |
| x++;
| |
| });
| |
| | |
| $("#botao2").click(function(){
| |
| $("#saida p").remove();
| |
| });
| |
| | |
| $("#saida").on("click", "p", function(){
| |
| $(this).remove();
| |
| });
| |
| });
| |
| </script>
| |
| <body>
| |
| <p> Seja bem Vindo </p>
| |
| <input type="button" value="adicionar" id="botao">
| |
| <input type="button" value="remover" id="botao2">
| |
| <div id="saida">
| |
| </div>
| |
| | |
| </body>
| |
| </html>
| |
| </syntaxhighlight>
| |
| | |
| Além disso temos a função REMOVE, que faz o processo inverso do Append. Só precisa tomar cuidado ao usar esta função, pois caso o seletor utilizado pegar mais de um elemento, todos serão removidos do DOM. Além disso, como o DOM segue uma estrutura em árvore, caso você remova um elemento que possui outros elementos dentro dele, TODOS serão removidos.
| |
| | |
| Outra função fornecida pela biblioteca jQuery é a CLONE, que permite fazer uma cópia fidedigna de um elemento já existente. Assim como a função REMOVE, todos os elementos que estão dentro do elemento que está sendo clonado irão juntos. Abaixo tem um exemplo de como utilizar esta função.
| |
| | |
| <syntaxhighlight lang="jquery">
| |
| <html>
| |
| <style>
| |
| .fera{
| |
| border: solid 1px black;
| |
| width : 500px;
| |
| height: 80px;
| |
| margin: 20px;
| |
| padding: 20px;
| |
| }
| |
| </style>
| |
| <script src="jquery-2.2.0.min.js"></script>
| |
| <script>
| |
| var controle = 0;
| |
| $(document).ready(function(){
| |
| $("#botao").click(function(){
| |
| var outro = $("#produto").clone();
| |
| if(controle == 0)
| |
| {
| |
| outro.css("backgroundColor","red");
| |
| controle = 1;
| |
| }
| |
| else
| |
| {
| |
| outro.css("backgroundColor","blue");
| |
| controle = 0;
| |
| }
| |
| $("#saida").append(outro);
| |
| });
| |
| });
| |
| </script>
| |
| <body>
| |
| <input type="button" value="adicionar" id="botao"><br>
| |
| <div id="saida">
| |
| <div class="fera" id="produto">
| |
| Codigo: <input type="text"><br>
| |
| Quantidade: <input type="text">
| |
| </div>
| |
| </div>
| |
| </body>
| |
| </html>
| |
| </syntaxhighlight>
| |
| | |
| No exemplo acima, a função CLONE é atribuída para uma variável. Esta variável contêm a cópia produzida, podendo ser manipulada pelas funções de jQuery já aprendidas. No exemplo a função CSS é utilizada antes de chamar a função APPEND para adicionar a cópia produzida a outro elemento.
| |
| | |
| ==13/fevereiro==
| |
| Este dia foi solicitado para os alunos praticarem sobre a função .animate(). Para isto foi solicitado para os alunos realizarem 2 exercícios:
| |
| | |
| 1) Criar uma página que mostre 4 imagens, todas semi-transparentes. Além das imagens, o site precisa ter uma área vazia. Ao clicar em uma das imagens semi-transparentes, a imagem clicada deve ficar opaca, e uma cópia da imagem deve aparecer na área vazia, no tamanho grande.
| |
| | |
| Solução: (é necessário que tenha 4 imagens na mesma pasta que este código, para poder funcionar):
| |
| | |
| <syntaxhighlight lang="jquery">
| |
| <html>
| |
| <style>
| |
| div{
| |
| margin: auto;
| |
| }
| |
| .grande, .imggrd{
| |
| width: 400px;
| |
| height: 400px;
| |
| border: solid 1px black;
| |
| }
| |
| | |
| .imgpeq{
| |
| width : 94px;
| |
| height: 94px;
| |
| margin: 1px;
| |
| opacity: 0.33;
| |
| }
| |
| .pequenos{
| |
| width: 400px;
| |
| height: 100px;
| |
| }
| |
| </style>
| |
| <script src="jquery-1.11.3.min.js"></script>
| |
| <script>
| |
| $(document).ready(function(){
| |
| $(".imgpeq").click(function(){
| |
| $("#imggrd").slideUp(1);
| |
| $("#imggrd").attr("src", $(this).attr("src"));
| |
| $("#imggrd").slideDown(500);
| |
| $("#imggrd").css("width","400px");
| |
| $(".imgpeq").fadeTo("fast", 0.33);
| |
| $(this).fadeTo("fast", 1);
| |
| });
| |
| });
| |
| </script>
| |
| | |
| <head></head>
| |
| <body>
| |
| <div class="grande">
| |
| <img id="imggrd">
| |
| </div>
| |
| <div class="pequenos">
| |
| <img class="imgpeq" src="img1.jpg">
| |
| <img class="imgpeq" src="img2.jpg">
| |
| <img class="imgpeq" src="img3.jpg">
| |
| <img class="imgpeq" src="img4.jpg">
| |
| </div>
| |
| </body>
| |
| </html>
| |
| </syntaxhighlight>
| |
| | |
| 2) Criar uma página com 4 divs, cada um com características que a diferenciem, como tamanho e cor (fica a sua escolha como diferenciá-las). Fazer com que cada um dessas div's tenha um movimento qualquer, um diferente do outro, mas que seja perpétuo, ou seja, caso o usuário deixar a página aberta, as div's devem se movimentar indefinidamente.
| |
| | |
| Solução:
| |
| | |
| O movimento perpétuo ocorre pois cada div possui uma função própria, que por meio do SETTIMEOUT ela se chama após o movimento ter concluído. Assim, cada função vai fazer 2 passos, controlados pelo parâmetro indicado na hora de chamar a função. Se passar 0, vai fazer um movimento, se passar 1 vai fazer outro movimento. Também é tomado o cuidado de colocar o tempo para a chamada da SETTIEOUT igual ao tempo da função ANIMATE.
| |
| | |
| <syntaxhighlight lang="jquery">
| |
| <html>
| |
| <script src="jquery-1.11.3.min.js"></script>
| |
| <style>
| |
| div{
| |
| border: solid 1px black;
| |
| width: 50px;
| |
| height: 50px;
| |
| position: absolute;
| |
| }
| |
| #bloco1{
| |
| background-color: #123456;
| |
| }
| |
| | |
| #bloco2{
| |
| background-color: #75AEF8;
| |
| }
| |
| | |
| #bloco3{
| |
| background-color: #FF6779;
| |
| }
| |
| | |
| #bloco4{
| |
| background-color: #11FF45;
| |
| }
| |
| </style>
| |
| <script>
| |
| function movimento1(tipo)
| |
| {
| |
| if(tipo == 0)
| |
| {
| |
| $("#bloco1").animate({left : "300px"}, 1000);
| |
| tipo = 1;
| |
| }
| |
| else
| |
| {
| |
| $("#bloco1").animate({left : "0px"}, 1000);
| |
| tipo = 0;
| |
| }
| |
| setTimeout(movimento1, 1000, tipo);
| |
| }
| |
| | |
| function movimento2(tipo)
| |
| {
| |
| if(tipo == 0)
| |
| {
| |
| $("#bloco2").animate({left : "500px" , top: "500px"}, 1500);
| |
| tipo = 1;
| |
| }
| |
| else
| |
| {
| |
| $("#bloco2").animate({left : "0px", top: "0px"}, 1500);
| |
| tipo = 0;
| |
| }
| |
| setTimeout(movimento2, 1500, tipo);
| |
| }
| |
| | |
| function movimento3(tipo)
| |
| {
| |
| if(tipo == 0)
| |
| {
| |
| $("#bloco3").animate({bottom : "200px" , right: "500px"}, 5000);
| |
| tipo = 1;
| |
| }
| |
| else
| |
| {
| |
| $("#bloco3").animate({bottom : "0px", right: "0px"}, 5000);
| |
| tipo = 0;
| |
| }
| |
| setTimeout(movimento3, 5000, tipo);
| |
| }
| |
| | |
| function movimento4(tipo)
| |
| {
| |
| if(tipo == 0)
| |
| {
| |
| $("#bloco4").animate({top : "300px" , left: "0px"}, 2000);
| |
| tipo = 1;
| |
| }
| |
| else
| |
| {
| |
| $("#bloco4").animate({top : "300px", left : "500px"}, 2000);
| |
| tipo = 0;
| |
| }
| |
| setTimeout(movimento4, 2000, tipo);
| |
| }
| |
| $(document).ready(function(){
| |
| movimento1(0);
| |
| movimento2(0);
| |
| movimento3(0);
| |
| movimento4(0);
| |
| });
| |
| </script>
| |
| <head></head>
| |
| <body>
| |
| <div id="bloco1"></div>
| |
| <div id="bloco2"></div>
| |
| <div id="bloco3"></div>
| |
| <div id="bloco4"></div>
| |
| </body>
| |
| </html>
| |
| | |
| </syntaxhighlight>
| |
| | |
| ==11/fevereiro==
| |
| *[[TADS:Desenvolvimento Web: codigos1102]]: Códigos Produzidos na Aula | |
| | |
| ==04/fevereiro==
| |
| | |
| Parabéns ao aluno FAAHD por ser o primeiro a entregar todos os exercícios com louvor!
| |
| | |
| | |
| Exercícios:
| |
| ------
| |
| '''1''' - Criar uma página que tenha 2 campos textos, um botão e uma div com o seu nome nela. O usuário deverá inserir o nome de uma propriedade CSS em um campo e um valor no outro. Ao clicar no botão, a propriedade indicada no primeiro campo deve influenciar no nome que está impresso na tela. Supondo que a pessoa digite COLOR no primeiro campo e RED no segundo, ao clicar no botão o nome do usuário deve ficar vermelho. Além disso, os campos devem ser limpos para a pessoa poder colocar outro campo.
| |
| | |
| '''(Modo One Punch Man: Criar um segundo botão que faz o nome voltar ao normal, sem influência de nenhuma regra CSS inserida pelo usuário.)'''
| |
| | |
| ------- | |
| '''2''' - Criar uma div com borda e cor de fundo a sua escolha, tamanho de 50 px por 50 px. Toda vez que o usuário clicar nesta div, ela deve mudar de lugar. O padrão e para onde ela vai fica ao seu critério.
| |
| | |
| '''(Modo One Punch Man: Fazer com que a cada 1 segundo ela mude de lugar, sem precisar clicar nela)'''
| |
| | |
| -------
| |
| '''3''' - Criar uma tabela 3 x 3 e um botão. Ao clicar no botão, deve aparecer valores numéricos aleatórios em cada célula da tabela.
| |
| | |
| '''(Modo One Punch Man: Fazer com que os valores gerados aleatoriamente comecem a decrementar seu valor em 1, e quando chegar a 0, parar de decrementar o valor)'''
| |
| | |
| -------
| |
| '''4''' - Criar uma página com uma área para mostrar diferentes imagens em um único lugar e 2 botões. Ao carregar a página, esta já deve mostrar a primeira imagem. Um botão deve ser "Próximo" e o outro "Anterior". Ao clicar em Próximo, deve ser mostrada a segunda imagem no lugar da primeira, e assim por diante (se a imagem for a última, voltar para a primeira). Se clicar em Anterior, deve ser mostrado a imagem anterior (se for a primeira, mostrar a última). Utilize pelo menos 5 imagens.
| |
| | |
| '''(Modo One Punch Man: Fazer com que troque de imagem a cada 1 segundo).'''
| |
| | |
| -------
| |
| '''5''' - Criar uma página dedicada ao poeta dos poetas, Wesley Safadão. Utilize pelo menos um evento de clicar para alterar o status da página de alguma forma. Use sua imaginacão.
| |
| | |
| '''(Modo One Punch Man: Não se emocione ao realizar esta página)'''
| |
| | |
| ==02/Fevereiro==
| |
| *[[TADS:Desenvolvimento Web: codigos0202]]: Códigos Produzidos na Aula | |
| | |
| ==30/janeiro==
| |
| *[[TADS:Desenvolvimento Web: codigos3001]]: Códigos Produzidos na Aula
| |
| | |
| ==28/janeiro==
| |
| *[[TADS:Desenvolvimento Web: codigos2801]]: Códigos Produzidos na Aula
| |
| | |
| *[http://jquery.com/ Download da Biblioteca jQuery]
| |
|
| |
|
| Caso deseje fazer o download da biblioteca:
| |
|
| |
|
| <syntaxhighlight lang="jquery">
| | =Diários de Aula= |
|
| |
|
| <script src="jquery-1.12.0.min.js"></script>
| |
|
| |
|
| </syntaxhighlight>
| | *https://ava.ifpr.edu.br/course/view.php?id=8768 |
|
| |
|
| ou você pode utilizar via CDN pela google utilizando o seguinte código:
| |
| <syntaxhighlight lang="jquery">
| |
|
| |
|
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
| | '''23/05''' |
| | *{{pdf}}[[Mídia:tads-web-aula-03-rowspan.pdf | tads-web-aula-03-rowspan.pdf]] |
| | **Enviar os exercícios 1 e 3 (MOODLE) |
|
| |
|
| </syntaxhighlight>
| | *{{pdf}}[[Mídia:tads-web-aula-05-layout.pdf | tads-web-aula-05-layout.pdf]] |
| | **Enviar os exercícios 1 a 4 (MOODLE) |
| | *[https://drive.google.com/file/d/1FWBqE4pcc7KBbfTIHW1X3e5nww_TaqCh/view?usp=sharing exemplo Layout1] |
| | *[https://drive.google.com/file/d/1C_3u1jGbyOURjiNCH_H8DpEF5KoHdK3n/view?usp=sharing exemplo Layout2 (incompleto)] |
|
| |
|
| *[[TADS:Exercícios Fixação: 2016-01-28]]: Exercícios de Fixação
| |
|
| |
|
| ==10/dezembro==
| | '''30/05''' |
| *[[Mídia:segundaavaliacaoweb1.zip | Trabalho de Avaliação]] | | *{{pdf}}[[Mídia:tads-web-aula-06-float_removed.pdf | tads-web-aula-06-float_removed.pdf]] |
tads-web-aula-03-rowspan.pdf
