Nesta aula continuamos a examinar propriedades de CSS: em particular, aprendemos as diferenças entre os valores da propriedade “position”: static, relative, absolute e fixed. Exemplos comprovaram os assuntos. Parte da aula foi dedicada è tirar dúvidas de um aluno sobre utilizo de backgrounds e relativo posicionamento, assunto que precisou de um reforço. No final começamos um exercicio de criação de uma página a partir de um layout em imagem, para poder aplicar todos os conceitos aprendidos.
Category Archives: Cursos Webmaster Joinville
24 de agosto
Aula n.11 – Curso de PHP em Joinville
Hoje examinamos estruturas de repetição (loop, laço): while, do e for. Observamos as semelhanças e as diferenças entre eles, identificando em quais caso é bom usar um ou o outro. Depois fizemos um exercício com a finalidade de criar um protótipo de galeria de foto. Através de um laço, criamos uma galeria de thumnails que cada um “linkado” à foto ampliada. O exercício ainda não acabou: na próxima aula criaremos uma estrutura para a paginação dos thumbnails.
Nesta aula examinamos mais propriedades CSS, além dos pseudo-elementos, mas o que mais deu foi exercícios para treinar tudo o que foi aprendido no curso.
17 de agosto
Aula n.10 – Curso de Php em Joinville
Hoje vimos duas estruturas de tomada de decisão: o if o e switch.
O if é o equivalente em php do se e é complementado pelo else (senão) e pelo elseif (senão se). O switch é o equivalente em php do escolha.
Depois de ter aprendido mais uma função do php, o include, conseguimos criaruma pequena estrutura de navigação baseada numa única página index.php que, através de uma variável $_GET na URL, inclue um conteúdo central diferente. Este é um primeiro passa para um pequeno portal ou sistema, ou site dinámico. Começem a pensar em algo que queiram desenvolver até o final do curso: sejauma loja virtual, seja um forum, seja un sistema interno, seja um guestbook…qualquer coisa que seja dinamica serve, pois vai ser seu trabalho final. Ainda temos bastante para aprender, mas a idéia pode crescer conforme o seu conhecimento.
Primeiro layout completo de site em 3 colunas hoje!
Utilizando os conceitos vistos na aulka precedente, conseguimos criá-lo rapidamente, com float, clear, width, margin e outras proprieades CSS.
Conceitos novos foram as pseudo-classes :hover, :active, :visited, :link etc, que representam o estato em que um elemento se encontra. Com isso conseguimos criar um menú principal em que cada link se ‘acendia’ (mudava de cor) quando o mouse passava em cima dele. A atividade proposta foi completar este layout: deixar ele mais bonito e criar uma página ‘produtos’ , com uma galeria de fotos e link que levasse á pagina de cada um.
8 de agosto
Aula n. 9 – Curso de PHP em Joinville
Na aula de hoje aprendemos a lidar com variáveis de forma mais completa: converter tipos, utilizar variáveis por referência, utilizar variáveis de variáveis. Aprendemos também a criar Arrays , e a verificar e imprimir o conteúdo deles.
Em seguida, foram apresentados os dois métodos existentes para receber dados através de variáveis enviadas pelo navegador: o GET e o POST. Para poder utilizar eles, o POST especialmente, é necessário dominar o HTML para a criação de um formulário. Foi o que vimos. Logo, foi possível criar uma versão ‘online’ do algoritmo ‘Media’, que enviava duas notas a partir de um formulário e a imprimia na página seguinte. Logo, conheçendo mais funções e estruturas, será possível criar algo mais ‘Web’.
Para começar, corrigimos o exercício começado na aula precendente.
Em seguida foram resumidas as propriedades CSS aplicáveis ao texto como font-size, font-family, color etc. Interessantes, mas ainda não desvendamos como se cria um layout completo com CSS. É aí que apresentei para a galera o nosso amigo, o DIV.
O DIV (abreviação de dividit, ou divisão) é, junto ao SPAN, uma tag que nã otem nenhum valor semantico, ou seja, não caracteriza algo que tem um significado a nível de conteúdo, como por exemplo um título, um parágrafo, uma tabela, etc. Eles só representam uma área física da página, com a diferença que o DIV delimita um bloco (ou seja, cria um quebra de linha) enquanto o SPAN continua na mesma linha de um paraágrafo, por exemplo. Por isso eles são chamados respectivamente elemento ‘block’ e elemento ‘inline’. O DIV é uma grande aliado para a criação de layouts, mas pode tornar-se um grande vilão se anusamos deles, então cuide-se, não exagere, ou vai ser uma vitima da DIV-MANIA!
Descobrimos como colocar borda, cor ou imagem de fundo, como gerenciar margem e padding (que ficam diferentes em diferentes navegadores) e, muito interessante, como criar layouts multi-coluna utilizando a propriedade ‘float’. Começamos a criar um layout em 3 colunas. Na próxima aula vamos terminar eles e aprender mais conceitos de CSS. Até lá.
3 de agosto
Aula n.8 – Curso de PHP em Joinville
A primeira parte da aula foi dedicada a uma correção de alguns algoritmos e ao desenvolvimento de novos.
Nunca é perda de tempo treinar a lógica, qualquer que seja o seu nível de experiência. Vale a dica de não ficar procurando no Google a resolução, mas tentar criar a propria, mesmo que pareça muito enrolada, comprida ou duvidosa. Tem que tentar, só fazendo sozinho pode afinar seu pensamento.
Consultar a Internet durante o desenvovlimento é coisa normal para o programador Web e, em geral, para os programadores é normal ter que consultar alguma referência de vez em quando, pois a quantidade de funções e nomes para memorizar é grande, mas isso é bem diferente de navegar para encontrar um procedimento para uma tarefa ou uma solução pronta do começo ao fim.
Na segunda parte da aula (que na verdade não passou de 45 minutos) começei a introduzir alguns conceitos básicos de PHP.
Estamos usando, como plataforma de servidor, o Easy PHP, que não é nada mais do que um pacote que instala automaticamente o Apache, o PHP e o MySql. Existem várias alternativas a ele, facilmente encontráveis na Web. Assim como os 3 software que instala, o Easy PHP é um software livre e gratuito. Com ele conseguimos ter um servidor virtual na nossa própria máquina, assm podemos desenvolver e testar nosso site sem precisar contratar logo uma hospedagem.
Na pasta “Easy PHP” existe uma pasta, ‘www’, que é a raiz do nosso site: é aí que temos que colocar nossos arquivos. Para acessar nosso site, digitamos http://localhost ou http://127.0.0.1 . Se não especificamos nenhum arquivo depois deste endereço, será lido o arquivo ‘index.php’. O nosso primeiro script em php foi para testar as funções echo e print, equivalentes ao escreva em algoritmos. Ambos tem a mesma função, mas acabei desobrindo que o echo é mais rápido.
Vimos também a criação de variáveis (explicações detalhadas na semana que vem) e como mostar o conteúdo delas através do echo, e também os diferentes resultados ao se usar aspas simples ou dupla para imprimir linhas de texto incluindo variáveis. A vírgula que a gente utilizava no VisulAlg para concatenação é substituida pelo ponto, em PHP. Foi isso…até semana que vem!
Enfim, começou o capítulo CSS.
Porque este nome, Cascading Style Sheets? Vamos analisar duas partes separadamente, antes o ‘Sytle Sheet’ e depois o ‘Cascading’.
Style sheet quer dizer ‘folha de estilo’. Com estilo entendemos tudo que tem a ver com a apresentação visual da nossa página HTML. Com folha queremos dizer que temos um arquivo separado para guardar estas informações. Porém, o arquivo separado não é o único jeito – apesar de ser o melhor – de lidar com o CSS. Existem também – listando a partir do pior – o atributo ‘style’ inserido direto no nosso HTML ou a tag ‘style’ no cabeçalho da página. Separa num arquivo externo tem a grande vantagem do podera alterar o visual de infinitos números de páginas apenas mexendo num arquivo só.
A palavra ‘Cascading’ representa uma caracteristica muito importante do CSS, o Efeito Cascata, graça ao qual elementos filhos pode ‘herdar’ dos elementos pais algumas propriedades. o Efeito Cascata também gerencia qual folha de estilo tem a prioridade para ser renderizada. Pode encontrar melhores explicações aqui, aqui e aqui.
Cada declaração em CSS segue esta estrutura:
seletor { propriedade: valor; }
sendo que pode ter múltiplas duplas de propriedade – valor. Começamos a ver algumas propriedades básicas como escolha da fonte, cor da mesma, tamanhos etc. e também introduzimos margin e padding, e já deu para intuir que o Box Model pode gerar um pouco de confusão . Por isso aconselho a leitura deste artigo e deste também: teremos que lidar bastante com este assunto ao longo das próximas aulas, especialmente quando usaremos o CSS não só para estilizar textos mas sobretudo para criar layouts completos.
A aula terminou com o primeiro exercicio que consistia em reproduzir o HTML e o CSS a partir de um layout pronto. Devo dizer que a maioria se saiu bem por ser a primeira aula.
27 de julho
aula n.7 – Curso de php em Joinville
Última aula sobre algoritmos. Fizemos alguns exercicios e tirei algumas duvidas dos – hoje poucos – alunos.