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.
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.
10 de agosto
Novo Layout
Finalmente um layout que posso chamar de definitivo.
Definitivo na idéia, não na sua realização, pois ainda faltam test cross-browser intensivos. Pode ajudar reportando bugs se quiser.
Este layout foi realizado a partir do wp-framework, que é um template completamente “em branco”, o que ajuda bastante a criar o que bem quiser. Fiz o layout no Photoshop sozinho. Até que dá pra quebrar um galho como designer, não é? Obviamente os icones peguei prontas, não chego a tanto… O meu bonequinho do link “sobre mim” foi feito pelo meu ex-colega André. Ainda quero acrescentar muitas coisas, mas basicamente está aqui, espero que gostem.
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’.
7 de agosto
Mais um golpe para o IE6
Aviso no Orkut
Finalmente. Um dos sites mais acessados do Brasil, o Orkut, acaba de descontinuar o suporte ao IE6.
Mais uma criatura do pai Google segue o exemplo do YouTube, como escrevi aqui. Obviamente a será uma transição gradual, mas com certeza esta atitude ajudará, e muito, a eliminar para sempre da face da terra um software de 2001. Credo. Muito de nós nem tem carro de 2001… e olha que carro sai caro, enquanto navegadores são quase todos de graça. Serei un programador web feliz o dia em que ter a última versão de navegador instalada no proprio computador será um status-symbol…
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!