LP — Lógica de Programação

Sumários

13: body — 13 de janeiro

Demos

12: include — 06 de janeiro

Proposta

Vais continuar a construir o teu Oráculo, desta vez implementando a estrutura de documento que demos hoje com o include.

Cria áreas de cabeçalho (header) e rodapé (footer), e coloca-as em ficheiros separados do principal, incluindo-as no principal com o comando include. Isto vai ser prático quando considerarmos mais do que uma página no nosso site.

Entretanto, lembra-te que estamos já a trabalhar no que vai ser o projeto final da disciplina, por isso aproveita o tempo que tens agora para não teres de entrar em pânico nas vésperas da entrega final. Para essa entrega, o teu projeto será avaliado com base em vários pontos:

11: post — 16 de dezembro

Demos

Proposta

Agora que sabes enviar e processar um formulário, está na altura de o implementares no teu oráculo.

Mais tarde podes afinar o seu comportamento; para já, queremos algo que funcione. Mas é de aproveitar as férias para adiantar trabalho, seja nos formulários ou no estilo, copywriting e identidade do teu oráculo.

10: forms — 09 de dezembro

Demos

Referência

Proposta

09: flex — 02 de dezembro

Proposta

  1. Joga e termina o Flexbox Froggy.
  2. Traz na próxima aula um exemplo de um site que consideres um bom exemplo de web design, e outro site que entendas ser um mau exemplo. Vem preparada/o para justificar porque são bons ou maus exemplos. Coloca os links na tua página principal, para ser mais simples de aceder quando os virmos na aula.
  3. 08: random — 25 de novembro

    Proposta

    • Vais criar uma página com um gerador de texto, movido graças aos artifícios PHP que vimos na aula de hoje.
    • Antes de pegar no Atom, determina uma base a partir da qual vais determinar os pedaços de texto. Procura um tipo de suporte com que te identifiques e que te possa dar algum entusiasmo para executar a proposta. Algumas ideias de tipos de texto que se dão bem para um gerador:
      • Um poema, nonsense ou não
      • Horóscopo
      • A previsão do tempo
      • Uma ideia para argumento de filme
      • Uma ideia para um jogo de computador
      • Comentário de futebol
      • Letras de músicas
    • Mais premissas para a proposta:
      • No mínimo, o teu texto deve ter mais do que uma frase, com pelo menos três partes que variam com cada refresh da página. (Atenção que isto é o mínimo dos mínimos. É esperado mais.)
      • Coloca o resultado final num diretório gerador/ dentro do teu public_html.
      • Guarda pelo menos 45 minutos para tratares do aspeto visual da página. É esperado que o critério gráfico esteja de alguma forma adequado ao tipo de texto que escolheste.

    07: finalmente, lógica de programação — 18 de novembro

    Proposta

    No teu diretório public_html tens um novo ficheiro ja-e-natal.php.

    • Edita-o para refletir outra data, procurando o código PHP relevante e alterando-o para o(s) dia(s) que pretendes mostrar.
    • Edita também o texto que surge em cada caso. E o CSS também: o site é simples e convém que fique bonito.
    • Extra: Com base no código que vês, é possível carregar um ficheiro CSS diferente de acordo com o dia que é. Consegues?

    06: layout — 11 de novembro

    • Apresentação do trabalho Stylus
    • Como Assegurar que o nosso HTML e CSS estão corretos
    • reset.css
    • Primeiros passos de layout: Como combinar elementos em CSS de uma forma estruturada
      • Simples de uma coluna
      • Colunas simples
      • controlar o wrap de elementos
    • Estrutura de diretórios
    • Questões sobre HTML?

    Proposta

    Continuamos a afinar a nossa página de medicamento com o que vimos hoje.

    • Aplica o reset.css do Eric Meyer (através de um link para a stylesheet ANTES da tua.)
    • Aplica o layout de uma coluna centrada.
    • Estrutura os diretórios do teu public_html de acordo com o que foi indicado na aula, e apaga (ou guarda noutro sítio) o que não interessa, como ficheiros velhos ou backups (como é o caso dos ficheiros com extensão .save).
    • Confirma que resolveste todos os pontos levantados no feedback que te foi dado sobre a página de medicamento.
    • Extra:
      • Coloca pelo menos uma área com colunas (os endereços no final são um bom alvo para isto).
      • Passa os ficheiros HTML e CSS nos validadores e tenta resolver todos os erros indicados.

    Demos

    05: posições — 4 de novembro

    • Revisão de pormenores HTML e CSS
      • extensões .html
      • formatos para nomes de ID’s e classes
      • hierarquia de elementos
      • importar fontes externas
      • como utilizar o Google Fonts
    • Formatos de cor em CSS
      • RGB
      • hexadecimal
      • HSL
      • transparência
    • Particularidades CSS de certos elementos
      • links
      • listas
    • Elementos em bloco vs. elementos em linha
    • Posicionamento de elementos
      • relative
      • absolute
      • fixed
      • sticky
    • Feedback sobre propostas realizadas

    Demos

    Proposta

    1. Termina o teu trabalho no Stylus. Haverá apresentação na próxima aula, e é esperado que cada pessoa possa explicar o porquê de escolher o site que escolheu, bem como a razão para as alterações feitas.
    2. Revê o HTML e CSS da tua home page e página de medicamento de acordo com o feedback que tiveste na aula. Aproveita para pôr os links mais bonitos com o que vimos na aula de hoje.
    3. Lê o artigo Software Livre de fonte aberta num mundo fechado. Não se admite preguiças, que o texto não é longo ;-)

    04: caixas — 28 de outubro

    • Comentários em HTML e CSS
    • Classes
    • Divs: caixas para tudo
    • Spans: excertos
    • Selectores: ID (#main), classes (.highlight), elementos dentro de elementos (ul li)
    • Margin e padding:
      • tudo é uma caixa
      • sintaxe e atalhos
    • larguras e unidades
      • valores absolutos (px) e relativos (%)
    • texto e o @font-face
    • Stylus: como editar o CSS de qualquer site

    Demos práticas

    Proposta

    Na aula: Refinar a tua página de medicamento.

    1. Definir a aparência dos links
    2. Ajustar o espaçamento dos cabeçalhos de acordo com o teu critério tipográfico
    3. Usar pelo menos uma fonte externa com o @font-face

    Pra casa: Vais usar o Stylus para alterar um site à tua escolha.

    1. Procura uma página com um layout que sintas que pode ser afinado, e antes de começar aponta as ideias que tens para o melhorar.
    2. Cria as regras CSS no Stylus para o alterar. Usa o Inspector para as testares antes de colocar no Stylus.
    3. Cria uma página no teu espaço do servidor a conter:
      • screenshots do site antes e do site depois das tuas intervenções
      • o código CSS que usaste, dentro de um elemento <pre>
      • uma lista das alterações que gostarias de fazer, mas que ainda não consegues por envolver partes de CSS que ainda não abordámos.
    4. Se conseguires colocar esta página online antes de sexta-feira, na próxima aula serão abordados os pontos que indicaste na lista do que não conseguiste executar.
    5. Depois, terás mais uma semana para concretizar o teu make-over final.

    03: text/css — 21 de outubro

    Plano da aula

    • HTML: O resto das bases
      • O texto que faltava
        • Quebras de linha: <br>
        • Bold e itálico, <strong> e <em>
      • Imagens: <img>
      • Links: <a>, o atributo href, links absolutos vs. relativos, links internos com o atributo id
      • Secções: <header>, <article>, <section>, <footer>
    • Atom: Atalhos de teclado, o super-atalho Ctrl-Shift-P e a extensão atom-beautify
    • Recursos: Mozilla Developer Network (MDN)
    • Inspector: Como alterar HTML no browser
    • CSS!
      • Como adicionar um style.css com o <link>
      • Selectores: encontrar elementos e ID's
      • Molhar o pé: aplicar cores, bordas, margens

    Proposta: Volta à tua página de medicamento, e vamos aplicar os conhecimentos de hoje.

    1. Colocar um link para o Infarmed no rodapé da página (lembra-te do <footer>)
    2. Converter a tabela de conteúdos para um conjunto de links internos para cada secção
    3. Colocar uma borda fina abaixo dos <h2>
    4. Colocar os <h3> a cinzento
    5. Colocar uma linha horizontal algures como separador. Não falámos disto, mas a página de LP usa essas linhas. Descobre, com o Inspector ou vendo o código fonte da página, como se faz.

    Mais: Coloca links na tua home page para as propostas que já executaste.

    Extra 1: Instala a extensão Stylus para Firefox ou Chrome – vamos dar-lhe uso na próxima proposta.

    Extra 2: Põe 20 minutos de parte e experimenta jogar o A Dark Room.

    02: text/html — 14 de outubro

    • Mais referências PETSCII
    • Tilde e Raspberry Pi
    • Como transferir ficheiros
      • Filezilla
        • Como criar uma ligação
        • Como copiar ficheiros
      • Uma boa alternativa ao Filezilla: Cyberduck
    • Editor de texto: Atom
      • Como mudar o estilo do interface (temas)
      • Packages, as extensões do Atom: instalar o ftp-remote-edit
      • Como ligar ao servidor com o ftp-remote-edit
    • HTML
      • Como funcionam as tags e a estrutura semântica
      • Cabeçalhos: <h1> a <h6>
      • Parágrafos: <p>
      • Listas: <ul>, <ol> e <li>
      • Estrutura geral do documento: <html>, <head> e <body>
      • Ainda subsiste alguma confusão? Há um bom guia para clarificar.

    Proposta: Paginar texto em HTML

    Está disponível no servidor uma lista de folhetos informativos de medicamentos.

    Estão divididos em dois diretórios: curtos e longos. Cada um dos diretórios tem vários PDF com vários folhetos, escolhe apenas um. O mínimo dos mínimos é paginar um dos curtos, mas se te sentires confiante, pega num dos longos.

    A ideia é usares os elementos que aprendeste na aula para conseguir estruturar melhor o documento que tens, com títulos, parágrafos e listas.

    Podes omitir alguns elementos supérfluos e outro "lixo" que encontres no documento, e usar do teu critério para definir os níveis dos títulos. Uma boa forma de os organizar é:

    • h1: Título principal (apenas um no documento inteiro)
    • h2: Títulos de secções
    • h3: Subtítulos internos

    Finalmente, uma nota: Caso os títulos do teu folheto tenham números (ex. 3. Como usar), pode parecer que é de usar uma lista ordenada, mas não! Usa um cabeçalho simples, incluindo o próprio nmero (ex. <h2>3. como usar</h2>)

    Deliverable: Um ficheiro .html no vosso diretório do servidor com o documento paginado, acessível pelo browser (ou seja, coloca-o no teu diretório public_html ou num subdiretório lá dentro).

    Prazo: domingo 20 de outubro às 23:59

    Slides da aula

    01: boot — 7 de outubro

    • Lógica e Programação: do que estamos a falar?
    • Programa, objetivos, requisitos e metodologia
    • A cloud, os computadores dos outros e a dança cliente-servidor
    • Tilde.pt: O nosso espaço
    • Sujar as mãos (parte prática):
      • entrar no Smith-Corona (o servidor do Tilde.pt) via Terminal
      • navegação pela linha de comandos
      • editar ficheiros de texto
      • home pages e public_html/
    • Estética e precursores da ASCII Art ¯\_(ツ)_/¯
      • Typewriter art
      • Brooklyn Daily Eagle - as formas criativas de ultrapassar as restrições dos anúncios
      • Arquivos de ASCII e ANSI art
      • Delaware - coletivo japonês de design gráfico com raízes fortes na cultura digital
      • Dekora - sistema de módulos para padrões e ilustrações
      • Paulo de Cantos - designer português que empregava frequentemente o sistema Dekora

    Proposta: Cortar as ervas daninhas da tua home page e colocar lá algo mais teu.

    Extra: Experimenta voltar ao servidor e correr o comando figlet "Texto hacker"

    Errata: Ao contrário do que mencionei, o Dreamweaver continua bem vivo. Mas vamos falar mais tarde de ferramentas melhores para web design.

    Slides da aula

Demos

A melhor forma de aprender é pelo exemplo, e por isso aqui encontramos vários dos princípios abordados na forma de demonstrações rápidas.

Referência

Um índice selecionado a partir dos artigos-chave da Mozilla Developer Network, a referência de eleição para o nosso ofício.