Curso de Verão em Bioinformática Estrutural Introdução ao desenvolvimento Web usando HTML, CSS e PHP

Tamanho: px
Começar a partir da página:

Download "Curso de Verão em Bioinformática Estrutural Introdução ao desenvolvimento Web usando HTML, CSS e PHP"

Transcrição

1 Curso de Verão em Bioinformática Estrutural Introdução ao desenvolvimento Web usando HTML, CSS e PHP Eduardo Campos dos Santos Felipe Ferré

2 Apresentação Este documento foi construído para servir como material de apoio, mais especificamente como notas de aula, sobre conceitos de desenvolvimento Web discutidos durante o I Curso de Verão em Bioinformática Estrutural.

3 Introdução A programação do ambiente Web que desenvolveremos neste curso envolverá o desenvolvimento de parte de código que é interpretado no computador do usuário mais especificamente pelo seu navegador e parte de código que será executado pelo computador que atuará como servidor. No primeiro caso dizemos tratar-se de programação client-side e, no segundo caso, chamamos de programação server-side. Sobre a programação client-side apresentaremos fundamentos sobre HTML, CSS e JavaScript. Focaremos somente sobre os fundamentos e apresentaremos exemplos particularmente interessantes para nossos propósitos. Induziremos os alunos a adotarem os padrões sugeridos pelo XHTML de modo que seu código HTML seja mais robusto, eficiente e confiável. Preparação do servidor (LAMP) O acrônimo LAMP (às vezes chamado de quarteto fantástico) vem de: Linux, Apache, MySQL, PHP. Significa um servidor web e de banco de dados baseado no sistema operacional Linux, no web-server Apache, no servidor de banco de dados MySQL e no interpretador de comandos PHP. Para que tudo funcione como se espera é preciso ainda que esteja instaladas algumas bibliotecas adicionais e algumas configurações precisam ser ajustadas. Felizmente, as distribuições de Linux atuais fornecem mecanismos bastante simples para deixar tudo instalado e configurado adequadamente. Mostraremos aqui uma maneira que consiste em dar um único comando na linha de comandos do console. Tomando-se como exemplo o Ubuntu (ou outra distro debian-like atual), basta dar o seguinte comando como root: apt-get install apache2 mysql-server php5 libapache2-mod-php5 php5-mysql Outros pacotes serão incluídos pelo apt-get devido às dependências de pacotes encontradas. Observe que além do servidor web (apache), do servidor MySQL (mysql-server) e do interpretador PHP (php5), incluímos na lista de pacotes a biblioteca que contém o módulo do Apache2 que permite ao Apache2 executar o PHP5 ( libapache2-mod-php5) e também o módulo do PHP que adiciona as funções do PHP para acessar e manipular uma base de dados MySQL (php5-mysql). Observe que o comando deve ser dado como root. Alternativamente, utilizando um usuário com privilégios de root, pode usar o comando sudo: sudo apt-get install apache2 mysql-server php5 libapache2-mod-php5 php5-mysql Por padrão, o Apache só reconhece o diretório /var/www constituindo este a raiz do Webserver. A página com a frase It's Working é o arquivo index.html que está no referido diretório. Somente o usuário root tem poder de escrita neste diretório. Para configurar o Apache para reconhecer também a chamada pasta pública do usuário (usualmente uma pasta denominada public_html na pasta do usuário) é preciso efetuar alguns simples procedimentos. 1) É preciso criar em /etc/apache2/mods-e nabled os soft links para os arquivos userdir.conf e userdir.load que estão em /etc/apache2/mods-available. Ou seja, os módulos já estão disponíveis (available) mas não ativados (enabled). 2) Além disso é preciso comentar algumas linhas do arquivo php5.conf (pode abri-lo diretamente em modsavailable ou pelo seu link em mods-enabled). Leia as orientações no próprio arquivo. Quanto ao servidor MySQL, vale destacar que, por padrão, ele está configurado para não aceitar conexões remotas. Se seu webserver (Apache) estiver em uma máquina diferente da que está instalada o MySQL, será preciso modificar uma linha do arquivo /etc/mysql/my.cnf. Neste caso, basta comentar a linha: bind-address =

4 Visão geral Façamos aqui uma explanação sobre como tudo funciona. Figura 1: Fluxograma geral de uma aplicação web no LAMP (Linux, Apache, MySQL, PHP).

5 Façamos um exercício simples para compreender que o PHP é um interpretador e, portanto, não fica rodando (ou escutando uma dada porta). E ele entrega o resultado da interpretação do código para aquele que o chamou. Assim, se ele for chamado a partir do console, retornará o resultado para o console. Mas se for acionado via Webserver (este sim é um servidor e fica "escutando uma porta"), entregará o resultado para o Webserver. Este, por sua vez, repassa o resultado para quem o requisitou o navegador do usuário. A Figura 2 ilustra e explica o experimento. Figura 2: Experimento: acessando um mesmo arquivo via php-cli (acionado a partir do console) e do Apache (acionado por uma requisição disparada em um navegador). Em ambos os casos, o interpretador PHP apenas interpreta o código do arquivo e retorna o resultado para o ente que o acionou. O código-fonte PHP original é simplesmente <?php echo( <b>oi Mundo!</b>\n );?>. Console como o navegador recebem o mesmo resultado, entretanto, como o console não interpreta tags HTML, ele exibe na tela exatamente o conteúdo retornado pelo PHP. Já o navegador, interpreta o conteúdo recebido como sendo um código-fonte HTML e exibe o resultado desta interpretação (ao invés de exibir <b> e </b>, exibe o texto que se encontra entre esses dois elementos em negrito). Para visualizar o conteúdo do arquivo recebido pelo navegador, basta dar o comando para o navegador exibir o código-fonte. O \n foi transformado em quebra de linha em ambos os casos. No caso do console, isso foi interessante para que o prompt seguinte não ficasse na mesma linha do <b>oi Mundo!</b>. No caso de um documento HTML, quebras de linha e tabulação não modificam o resultado renderizado e exibido na tela do navegador, mas dão uma aparência mais agradável ao código-fonte HTML e pode ser interessante se você precisar analisar este código.

6 Programação client-side: XHTML, CSS e JavaScript Fundamentos de HTML / XHTML HTML (HyperText Markup Language) é a linguagem para criação de páginas web e seus enlaces. É constituída por entidades denominadas tags. Uma tag pode possuir atributos (ou propriedades) e seus respectivos valores. O estudo de HTML consiste em estudar as tags que existem e seus respectivos atributos e possíveis valores. Ou seja, não se pode criar uma tag ou definir um novo atributo para uma dada tag ou ainda usar um valor não aceito para determinado atributo de determinada tag. Em XML (extensible Markup Language) pode-se criar novas tags e definir seus possíveis atributos e valores. Isso porque XML serve para estruturar o conteúdo de um dado documento num formato bom para ser lido por algum programa (machine-readable). Mas se você quer que seu documento possa ser visualizado em um navegador mostrando-se com textos formatados, gravuras ilustrativas, tabelas etc., então você precisa usar HTML. O XHTML consiste-se do prórprio HTML, mas com a observância obrigatória de algumas regras provindas do XML. A maior restrição imposta por essas regras garantem um código mais confiável. Algumas das regras já existiam no HTML, mas os navegadores modernos aceitavam (e por vezes até interpretavam adequadamente) códigos que desrespeitavam tais regras. Por exemplo, a ordem adequada para abrir e fechar tags sempre foi similar à regra da matemática sobre chaves, colchetes e parênteses. Ou seja, estruturas como {[ ][(...)]} estão corretas, mas uma estrutura como {[( ])} é imprópria porque o colchetes é fechado antes do parênteses. O programa que interpreta os códigos HTML é o navegador do usuário. Quando o usuário navega em um site (ou simplesmente visualiza um documento HTML em seu navegador), o navegador interpreta todas as estruturas do tipo <algo> ou <algo e mais alguma coisa> como sendo tags HTML e tenta fornecer o resultado dessa tag. Se o que aparece entre os símbolos < e > não for uma tag HTML válida, o navegador, em geral, simplesmente a desconsidera e não exibe nem os símbolos < e >, nem o texto que estiver entre eles. Observe que a primeira palavra entre os símbolos < e > deve estar colada (sem espaços) ao símbolo <. Dito isso, podemos agora definir tag. Uma tag é uma entidade no formato: <nome_da_tag atributo1= valor_do_atributo_1 atributo2= valor_do_atributo_2 > O que define o nome da tag é a palavra (ou letra) que aparece colada ao símbolo <. Pode haver espaço(s) após o nome da tag e, caso haja algo mais depois do nome da tag e o símbolo de fecha mento >, então o que aparece deve apresentar-se no formato atributo= valor. Aqui já estamos adotando uma regra do XHTML compare no quadro abaixo alguns casos do padrão antigo HTML e do novo padrão XHTML. Padrão antigo (HTML) Novo padrão XHTML <br> <br /> <img src=... alt=... > <img src=... alt=... /> <input type= checkbox checked> <input type= checkbox checked= checked /> <input name= pdb...> <input name= pdb id= pdb /> No padrão antigo (HTML), para incluir uma caixa do tipo checkbox que devia aparecer já marcada, bastava incluir a palavra-chave checked dentro da tag input que define a referida caixa. Entretanto, para que a tag input que define a caixa fique de acordo com o padrão XHTML, devemos usar uma estrutura que mais parece uma gambiarra (e talvez seja mesmo) mas é a gambiarra padronizada oficialmente incluímos não apenas a palavra checked mas sim checked= checked. Além disso,

7 para ficar de acordo com o XHTML que define que toda tag será fechada incluímos um espaço seguido da barra / antes de fecharmos a tag. Isso porque a tag input originalmente no HTML não era fechada. Bem... vamos definir logo as regras do padrão XHTML para que já nos acostumemos com elas. Toda tag e seus atributos devem ser escritos com letras minúsculas; A todo atributo deve estar definido um valor entre aspas duplas; Toda tag deve ser fechada; As tags devem ser fechadas na ordem apropriada. Para uma discussão mais detalhada sobre as diferenças entre HTML e XHTML, incluindo alguns exemplos ilustrativos, sugerimos consultar as páginas: O quadro da Figura 3 exibe o código básico que toda página no padrão XHTML deve conter: <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>este é o título que aparece na Barra de Título do navegador</title> </head> <body> <p>aqui fica o conteúdo do corpo da página. Este foi o primeiro paráragrafo.</p> </body> </html> Figura 3: Código XHTML básico A duas primeiras tags são casos diferentes não são fechadas com barra (/) no final. A primeira é importante se você for usar caracteres especiais (e.g. letras acentuadas, cedilha etc.) sem ter que usar códigos para elas. A segunda linha define o Doctype do documento. O Doctype é a Declaração do Tipo de Documento ou simplesmente DTD, todo documento (X)HTML deve conter um Doctype logo em seu início. É ele que vai dizer para o navegador qual é a versão do (X)HTML que você está usando no arquivo. Existem diferentes versões de HTML, cada uma com sua regra e algumas diferenças na sintaxe. Se você deixar de declarar o Doctype em seu arquivo (X)HTML, o navegador tentará adivinhar qual é o Doctype. Às vezes ele acerta, às vezes não, o que pode provocar uma renderização defei tuosa pelo navegador. Existem três tipos principais (e alguns outros exóticos ): Strict; Transitional e; Frameset. Doctype Strict pode ser um pouco complicado para iniciantes porque você precisa escrever um código impecável, sem erros, você não pode usar tags e atributos de apresentação como a tag <font>, <body bgcolor= red >, etc. E você deve usar CSS para qualquer tipo de estilo/apresentação/design

8 que queria usar na página. Doctype Transitional foi destinado para permitir a escrita de códigos compatíveis com navegadores mais antigos (que não reconhecem CSS por exemplo) e para ajudar os web designers a melhorarem seus códigos enquanto aprenderem as novas recomendações. Com Transitional você poderá cometer alguns erros e usar tags e atributos de apresentação. Doctype Frameset foi feito para designers que querem usar frames em suas páginas. O uso de frameset foi criticado desde que surgiu. Pesquise bastante antes de optar por usar frames. A dica que deixamos aqui, é: NÃO USE FRAMES. No máximo, use inline frames (iframes) e em casos específicos onde sejam, de fato, interessantes. Quer um bom exemplo de uso de iframes? Gmail. No quadro abaixo, incluímos o uso de algumas outras tags básicas todas destinadas à formatação. <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>este é o título que aparece na Barra de Título do navegador</title> </head> <body> <h1>esta é uma forma simples de definir um título</h1> <h2>esta é uma forma simples de definir um subtítulo</h2> <h3>esta é uma forma simples de definir um subsubtítulo</h3> <p>este é o primeiro paráragrafo.</p> <p>esta é a primeira linha do segundo parágrafo.<br />E esta, a segunda.</p> <p>usar duas tags br NÃO é o mesmo que usar a tag parágrafo.</p> <p style="text-align:center">teste com dois parágrafos.</p> <p>como ficou o alinhamento deste?</p> <p style="text-align:center">teste com dois <br />.<br /><br /> Como ficou o alinhamento deste?</p> <!-- Comentário: o uso do atributo align para a tag p foi eliminado a partir do HTML 4.01 e do XHTML 1.0. Os navegadores atuais não reconhecem este atributo. --> <p>um pequeno exemplo com algumas coisas: você pode escrever <qualquer abobrinha>?? entre os símbolos < e > desde que tenha uma letra colada ao sinal de <font color="#ff0000">menor que (<)</font> porque o navegador tentará interpretar como código <b>html</b> e, se não conseguir, simplesmente ignorará sem <font color="#0000ff" size="+3">exibir</font> nenhuma mensagem de erro. Por outro lado, entenda que você precisa escrever tags, atributos e valores corretamente (inclusive sem erros de grafia).</p> <p>aqui um exemplo de: <i>itálico</i>, <b>negrito (bold)</b>, <u>sublinhado (underline)</u> e também de algumas combinações: <b><i>negrito e itálico</i></b>. </body> </html> Figura 4: Código XHTML com algumas tags fundamentais

9 Figura 5: O Resultado da renderização do código da Figura anterior Para inserir uma imagem, use a tar <img> e para inserir um link, use a tag <a>. Para indicar qual imagem deve ser carregada ou qual documento deve ser referenciado, é preciso indicar o caminho e o nome do arquivo. No caso da tag <img> isso é feito pelo atributo src e, no caso da tag <a>, pelo atributo href. As Figuras 6 a 9 ilustram exemplos de endereços relativos.

10

11 Figura 9: Exemplo contendo um link (tag <a> de address). O conceito de endereço relativo é o mesmo daquele relativo à tag <img>.

12 A Figura 10 ilustra o uso de endereços absolutos. O uso de tabelas é muito usual em sites do tipo que iremos trabalhar. Atualmente, é possível cons truir páginas com estruturas de linhas e colunas sem utilizar tabelas propriamente ditas. Isso é possível utilizando CSS com tags <div>. A boa e velha tabela sempre tem seu lugar. A Figura 11 representa um pequeno tutorial sobre tabelas ilustrando o efeito de alguns de seus atributos. Deixaremos para criar uma tabela efetivamente útil para nossos propósitos ao tratarmos o CSS.

13

14 Vejamos agora algo sobre formulários. A Figura 12 ilustra um exemplo simples de formulário e a Figura 13 exibe seu código-fonte. Este exemplo contém apenas dois tipos de elementos (<input type= text /> e <select...>) além dos botões (<input type= submit /> e <input type= reset />). Outros exemplos possíveis são <input type= checkbox /> <input type= radio /> <input type= hidden /> <textarea...>. Figura 12: Exemplo de formulário Figura 13: O código-fonte para gerar o formulário da Figura anterior. Aqui foram utilizados somente dois tipos de elementos (caixa de texto e lista de seleção). Observe que a lista de seleção permite passar valores múltiplos. Por isso, seu valor está sendo passado em um array selected_target[]. Atenção ao uso dos atributos name e id para garantir retrocompatibilidade (name), compatibilidade com as recomendações atuais (id) e também para poder escrever códigos JavaScript que referenciam os elementos do formulário.

15 Fundamentos de CSS O uso do CSS (Cascading Style Sheet) atualmente é não apenas necessário para construir interfaces mais atraentes, mas é também uma recomendação para construir códigos mais confiáveis segundo padrões webstandart e melhor tratados por navegadores e outros programas (programas que lêem o documento e transformam o texto em voz; programas para tratamento automático da informação distribuída em diversos documentos etc.). Além disso, como já vimos, alguns atributos HTML estão sendo simplesmente eliminados e não mais compreendidos pelos navegadores, tornando o CSS a única alternativa para obter certos resultados. Como o caso do atributo align da tag <p>. Para evitar que sua página fique com uma aparência arcaica, você deve, no mínimo, utilizar a atri buição text-decoration:none do CSS para fazer com que os hyperlinks não sejam sublinhados, pois os navegadores atuais ainda sublinham por padrão os hyperlinks. A combinação de CSS com JavaScript costuma produzir resultados bastante atraentes e interessantes, como menus dinâmicos e seções dinâmicas. Há quatro maneiras de se inserir atribuições CSS em um documento: (1) diretamente em uma dada tag usando o atributo style, por exemplo: <font style= color:#f4f3fa; font-style:italic >teste</font>) (2) pode-se definir os estilos de formatação para as tags HTML ou criar classes de estilo que podem ser usadas em diferentes tipos de tags usando a tag <style>. Em geral, isso é definido no cabeçalho do documento HTML, ou seja, entre <head> e </head>. Por exemplo: <style> body { background: #ccc; color: #666 } a { text-decoration:none; color: #aac; } a:hover { text-decoration: underline overline; color: #caa; }.protein { background: red; color: white; } </style> (3) outra alternativa consiste em colocar as definições CSS em um arquivo separado, geralmente, com extensão.css, e incorporá-lo aos documentos HTML. Esse arquivo é chamado de folha de estilo. Uma vantagem óbvia, é que você pode centralizar as definições facilitando eventuais alterações em estilos de formatação que devem modificar a aparência de todas as páginas do website. Além disso, pode-se incluir mais de uma folha de estilo em um mesmo documento. Isso facilita o gerenciamento da formatação de diferentes seções do website. Se uma atribuição é definida em mais de uma folha de estilo e ambas são incorporadas a um dado documento, vale a atribuição definida no último arquivo incorporado. Ou seja, uma atribuição sobre um mesmo elemento sobrescreve uma eventual atribuição anterior. Para incorporar uma folha de estilo a um documento, há duas maneiras: usar a tag <link> ou dentro de uma seção <style>. Esta última alternativa costuma gerar problemas, sobretudo para algumas (talvez todas) versões do MSIE. Em geral, sugere-se dar preferência ao uso de <link> para incorporar folhas de estilo. Assim, apresentaremos exemplo somente

16 para esta opção e deixamos como exercício a consulta sobre o uso da quarta opção que é o uso Para inserir uma folha de estilo usando <link>, basta inserir, geralmente, no cabeçalho (i.e. Entre <head> e </head>): <link rel= stylesheet type= text/css href= caminho_e_nome_do_arquivo.css /> Em geral, esta é a forma usada. Deixamos como referência o site da W3C para leitura complementar sobre outros atributos e outras possibilidades envolvendo a incorporação de folhas de estilo.

17 Figura 14: Uso de CSS para criar uma tabela HTML personalizada (permitindo, dentre outras coisas definir bordas diferentes na mesma tabela) e de uma forma mais centralizada e eficiente as mesmas configurações podem ser aplicadas para outras tabelas do documento e, para alterar totalmente a aparência dessas tabelas, basta alterar as especificações CSS sem ter que alterar o código HTML. Além disso, as especificações CSS podem estar em um documento.css separado servindo para atender a todos os documentos do site para mudar alguma formatação no futuro, bastará alterar a definição no arquivo.css.

18 Figura 15: Um exemplo de saída possível para uma aplicação que exibe informações sobre um conjunto de moléculas. Figura 16: Código-fonte (somente HTML) que gerou a tabela da Figura anterior. Observe que as definições CSS foram importadas de um documento.css usando a tag <link>.

19 Figura 17: Especificações CSS para o código da Figura anterior.

20 Figura 18: Usando um código-fonte HTML essencialmente idêntico ao da Figura anterior, produziu-se uma tabela com um visual bem diferente.

21 Figura 19: Código-fonte (parte HTML) que produziu a tabela da Figura anterior. As definições CSS estão exibidas na próxima Figura.

22 Figura 20: As definições CSS para o código da Figura anterior.

23 Fundamentos de JavaScript Não estudaremos o JavaScript aqui por falta de tempo. Mas vamos tentar explicar o que ele é e para que serve. Diferentemente do que vimos até agora (HTML e CSS) o JavaScript é uma linguagem de programação. Enquanto HTML/CSS servem para definir a apresentação e a formatação do conteúdo de suas páginas, bem como permitir a interatividade através de hyperlinks e formulários, o JavaScript serve para inserir comportamentos disparados, em geral, instantaneamente em resposta a ações do usuário ou de algum temporizador (construído com o próprio JavaScript). Mas assim como HTML e CSS, JavaScript é executado pelo navegador. Um exemplo clássico de uso de JavaScript é a validação de formulários executada pelo próprio navegador do usuário, ou seja, sem requerer que os dados sejam enviados para o servidor e este faça a validação para então retornar alguma mensagem de erro caso encontre algo de errado. Para garantir segurança e confiabilidade, é importante que os dados passados via formulário sejam revalidados pelo servidor porque o código JavaScript pode ser adulterado ou pode haver alguma falha na sua execução que deixe passar algo impróprio. Outro exemplo bastante útil de aplicação do JavaScript é na disponibilização de uma funcionalidade de autocompletar ao digitar dados em uma caixa de texto de formulário (como os nomes de proteínas ou da espécie a ser pesquisada). Veja esse recurso sendo usado no site de sequências protéicas Uniprot (www.uniprot.org) e também em Drugs.com(http://www.drugs.com/drug_interactions.php). Programação server-side: PHP PHP é uma linguagem de programação que é executada no servidor. Assim, não há problemas de incompatibilidade com os navegadores como ocorre com HTML/CSS/JavaScript. Quando o usuário navega em um site e requer visualizar um dado documento PHP, o Webserver (Apache no nosso caso) chama o interpretador PHP para que este leia e execute o código. O que determina que o PHP deve ser chamado é a extensão do arquivo (.php) e não seu conteúdo. Alguns administradores configuram o Apache para também chamar o PHP quando a extensão do arquivo for.inc (de include). Cuidado com isso! Você pode ter surpresas desagradáveis com usuários conseguindo visualizar seu código-fonte PHP (às vezes até contendo senhas escritas) em algum documento.inc porque o administrador (ou mesmo você) se esqueceu de refazer a configuração adequada ao atualizar ou substituir um dado servidor. Assim, fica uma dica: ao escrever fragmentos de código que deverão ser incluídos em outros documentos PHP (isso pode ser feito com as funções include(), require() e outras) prefira denominar seus arquivos no formato foo.inc.php ou invente algo para ajudá-lo a gerenciar seus arquivos mas sempre usando a extensão.php. Um documento pode conter trechos que não serão interpretados pelo PHP de modo que você pode misturar PHP, HTML e qualquer texto no mesmo documento. Toda vez que um trecho precisar ser interpretado pelo PHP, deve-se abrir uma seção com <?php e encerrá-la com?>. Veja o exemplo abaixo:

24 <html> <head> <title>teste com PHP</title> </head> <body> Este trecho pode ser visto por todos.<br /> <?php if($login == 1){ echo Já isso só é exibido se a condição acima for <b>satisfeita</b>.<br />\n ; }?> Esse outro trecho também é exibido sempre. </body> </html> Vejamos agora um exemplo usando includes. <?php include(head.inc.php); include(protein_details.inc.php); include(foot.inc.php);?> <!-- Este é o conteúdo do arquivo head.inc.php --> <xml > <!doctype > <html> <head>... </head> <body> <!-- Aqui a barra de menu do site --> <!-- Este é o conteúdo do arquivo foot.inc.php --> <!-- Aqui texto do rodapé da página (endereço e telefone), copyright etc. --> </body> </html>

25 Vamos reconstruir a tabela da Figura 15 (cujo código-fonte está exibido na Figura 16). Figura 21: Código PHP para gerar a tabela da próxima Figura. Figura 22: Resultado do código PHP conforme exibido pelo navegador.

26

27 Figura 23: Código HTML retornado pelo PHP e entregue ao navegador. A documentação online do PHP (php.net) é excelente e recomendamos consultá-la. Verifique, por exemplo, as funções que tratam arrays (ordenar, colocar e retirar elementos, splits etc.). Verifique também as possíveis estruturas de repetição (for, while etc.) e as estruturas condicionais (if-elseif-else, case etc.). Você talvez precise rodar um programa externo (escrito em perl, por exemplo, ou o programa do próprio sistema operacional para compactar um dado arquivo a ser enviado por ao usuário). Se não for necessário que o script PHP receba algum retorno do programa externo, pode-se usar a função exec(), caso contrário, use a função system(). Outro recurso que pode ser interessante para a interface web que construiremos: guardar seção. Digamos que você selecione alguma estrutura durante a navegação e quer que essa seleção se mantenha enquanto navega pela interface e seleciona outras estruturas para serem todas analisadas em conjunto mais tarde. Para isso, pesquise sobre funções de sessões no php.net, principalmente as funções session_start, session_register e session_destroy (http://php.net/manual/en/ref.session.php). Bem... temos pouco tempo para tratar sobre HTML, CSS e PHP em nossa aula. Mas esperamos que as dicas apresentadas aqui ajudem a orientar seus estudos. Na segunda parte de nosso treinamento sobre desenvolvimento web e banco de dados, voltaremos a apresentar alguns exemplos de código em PHP. Abraços, Eduardo e Felipe.

Desenvolvimento Web Introdução a XHTML. Prof. Bruno Gomes

Desenvolvimento Web Introdução a XHTML. Prof. Bruno Gomes Desenvolvimento Web Introdução a XHTML Prof. Bruno Gomes 2014 Introdução HTML e XHTML Estrutura básica do documento DTDs Validação do documento Exercícios HTML e XHTML HTML (Hipertext Markup Language)

Leia mais

Sumário. HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1

Sumário. HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1 Sumário HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1 Linguagem HTML HTML é a abreviação de HyperText Markup Language, que pode ser traduzido como Linguagem de Marcação de Hipertexto. Não é uma linguagem

Leia mais

Apostila de XHTML Curso de Internet Professor Rinaldo Demétrio

Apostila de XHTML Curso de Internet Professor Rinaldo Demétrio Conteúdo XHTML - Por quê?... 2 Porque XHTML?... 2 Diferenças Entre XHTML e HTML... 3 Como Preparar-se para a XHTML... 3 As Diferenças Mais Importantes:... 3 Os Elementos Devem Estar Devidamente Aninhados...

Leia mais

MÓDULO 1 - xhtml Básico

MÓDULO 1 - xhtml Básico MÓDULO 1 - xhtml Básico 1. Introdução xhtml significa Extensible Hypertext Markup Language (Linguagem de Marcação Hipertextual Extensível) e é a linguagem de descrição de documentos usada na World Wide

Leia mais

Mini-curso de PHP. Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva

Mini-curso de PHP. Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva Mini-curso de PHP Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva Aula 1 Breve introdução de HTML, Conceitos básicos de PHP, Sintaxe, Separador de instruções e Comentários (Cap 1

Leia mais

Desenvolvimento de Aplicações Web. Prof. José Eduardo A. de O. Teixeira www.vqv.com.br / j.edu@vqv.com.br

Desenvolvimento de Aplicações Web. Prof. José Eduardo A. de O. Teixeira www.vqv.com.br / j.edu@vqv.com.br Desenvolvimento de Aplicações Web Programação Contextualização de aplicações Web: navegadores e servidores como interpretadores, tecnologias do lado do cliente (XHTML, CSS, Javascript) e do lado do servidor

Leia mais

Aplicativos para Internet Aula 01

Aplicativos para Internet Aula 01 Aplicativos para Internet Aula 01 Arquitetura cliente/servidor Introdução ao HTML, CSS e JavaScript Prof. Erika Miranda Universidade de Mogi das Cruzes Uso da Internet http://www.ibope.com.br/pt-br/noticias/paginas/world-wide-web-ou-www-completa-22-anos-nesta-terca-feira.aspx

Leia mais

Web Design. Prof. Felippe

Web Design. Prof. Felippe Web Design Prof. Felippe 2015 Sobre a disciplina Fornecer ao aluno subsídios para o projeto e desenvolvimento de interfaces de sistemas Web eficientes, amigáveis e intuitivas. Conceitos fundamentais sobre

Leia mais

Guia de Consulta Rápida XHTML. Juliano Niederauer. Novatec Editora. www.novateceditora.com.br

Guia de Consulta Rápida XHTML. Juliano Niederauer. Novatec Editora. www.novateceditora.com.br Guia de Consulta Rápida XHTML Juliano Niederauer Novatec Editora www.novateceditora.com.br Guia de Consulta Rápida XHTML de Juliano Niederauer Copyright 2002 da Novatec Editora Ltda. Todos os direitos

Leia mais

TECNOLOGIAS WEB. Unidade 2 Introdução a Construção de Páginas Estáticas. Luiz Leão luizleao@gmail.com http://luizleao.com

TECNOLOGIAS WEB. Unidade 2 Introdução a Construção de Páginas Estáticas. Luiz Leão luizleao@gmail.com http://luizleao.com Luiz Leão luizleao@gmail.com http://luizleao.com CONTEÚDO PROGRAMÁTICO DESTA UNIDADE HTML TAG S HTML LINGUAGEM HTML Hypertext Markup Language Interpretada pelo navegador Não linearidade da informação Formatação

Leia mais

Mais sobre uso de formulários Site sem Ajax

Mais sobre uso de formulários Site sem Ajax Mais sobre uso de formulários Site sem Ajax Página com busca padrão 1 Página com o resultado da busca carregada no local da anterior (o formulário está vazio) Site com Ajax 2 Site usando Ajax para preencher

Leia mais

WEBDESIGN. Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira

WEBDESIGN. Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira WEBDESIGN Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira 1 CDI - Curso de Webdesign - Prof. Paulo Trentin Objetivos para esta aula Debater sobre

Leia mais

Guia de Consulta Rápida. PHP com XML. Juliano Niederauer. Terceira Edição. Novatec

Guia de Consulta Rápida. PHP com XML. Juliano Niederauer. Terceira Edição. Novatec Guia de Consulta Rápida PHP com XML Juliano Niederauer Terceira Edição Novatec Copyright 2002 da Novatec Editora Ltda. Todos os direitos reservados e protegidos pela Lei 9.610 de 19/02/1998. É proibida

Leia mais

Hospedagem de site. Prof. Marciano dos Santos Dionizio

Hospedagem de site. Prof. Marciano dos Santos Dionizio Hospedagem de site Prof. Marciano dos Santos Dionizio Hospedagem de site O mundo está preparado para ver suas páginas? O mundo está preparado sim - você, em breve, estará também. Para publicar seu trabalho

Leia mais

LINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON

LINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON COMPONENTES: ROBSON EDMILSON O HTML (Hiper Text Mark-up Language) é uma linguagem de programação hipertexto. O HTML tem códigos para criar páginas na web. Estes códigos que definem o tipo de letra, qual

Leia mais

Webdesign HTML. Introdução a HTML e as principais tags da linguagem. Thiago Miranda dos Santos Souza

Webdesign HTML. Introdução a HTML e as principais tags da linguagem. Thiago Miranda dos Santos Souza Webdesign HTML Introdução a HTML e as principais tags da linguagem Conteúdos Os materiais de aula, apostilas e outras informações estarão disponíveis em: www.thiagomiranda.net Objetivos Apresentar a HTML

Leia mais

Programação Web Prof. Wladimir

Programação Web Prof. Wladimir Programação Web Prof. Wladimir Linguagem de Script e PHP @wre2008 1 Sumário Introdução; PHP: Introdução. Enviando dados para o servidor HTTP; PHP: Instalação; Formato básico de um programa PHP; Manipulação

Leia mais

PROGRAMAÇÃO MANUAL DE INSTRUÇÕES SEJA BEM VINDO VERSÃO 1.4 10/01/2013 UDS SOLUÇÕES DIGITAIS

PROGRAMAÇÃO MANUAL DE INSTRUÇÕES SEJA BEM VINDO VERSÃO 1.4 10/01/2013 UDS SOLUÇÕES DIGITAIS VERSÃO 1.4 10/01/2013 UDS SOLUÇÕES DIGITAIS PROGRAMAÇÃO MANUAL DE INSTRUÇÕES Instruções, métodos e recomendações para desenvolvimento de sistemas na UDS. 1 Sumário Apresentação... 3 Estrutura de pastas:...

Leia mais

Programando em PHP. Conceitos Básicos

Programando em PHP. Conceitos Básicos Programando em PHP www.guilhermepontes.eti.br lgapontes@gmail.com Conceitos Básicos Todo o escopo deste estudo estará voltado para a criação de sites com o uso dos diversos recursos de programação web

Leia mais

Características do PHP. Começando a programar

Características do PHP. Começando a programar PHP Introdução Olá pessoal. Desculpe o atraso na publicação da aula. Pude perceber pelas respostas (poucas) ao fórum que a realização da atividade do módulo I foi relativamente tranquila. Assistam ao vídeo

Leia mais

Desenvolvimento Web. Saymon Yury C. Silva Analista de Sistemas. http://www.saymonyury.com.br

Desenvolvimento Web. Saymon Yury C. Silva Analista de Sistemas. http://www.saymonyury.com.br Desenvolvimento Web Saymon Yury C. Silva Analista de Sistemas http://www.saymonyury.com.br Vantagens Informação em qualquer hora e lugar; Rápidos resultados; Portabilidade absoluta; Manutenção facilitada

Leia mais

Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2

Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2 Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2 Objetivo. O objetivo da disciplina é conhecer os princípios da programação de

Leia mais

mkdir /srv/www/default/html/calculadora/imagens mkdir /srv/www/default/html/calculadora/blocos

mkdir /srv/www/default/html/calculadora/imagens mkdir /srv/www/default/html/calculadora/blocos Programando em PHP www.guilhermepontes.eti.br lgapontes@gmail.com Criando uma Calculadora Primeiramente deve se criar uma estrutura para armazenar os arquivos necessários para o funcionamento da calculadora.

Leia mais

Ferramentas para Multimídia e Internet - 1486

Ferramentas para Multimídia e Internet - 1486 1 Ferramentas para Multimídia e Internet - 1486 HTML BÁSICO: O que é uma página WEB? Uma página WEB, também conhecida pelo termo inglês webpage, é uma "página" na World Wide Web, geralmente em formato

Leia mais

OPERAÇÃO DE SOFTWARE E APLICATIVOS

OPERAÇÃO DE SOFTWARE E APLICATIVOS OPERAÇÃO DE SOFTWARE E APLICATIVOS 1 SUMÁRIO 1 INTRODUÇÃO A WEB... 4 1.1 O QUE É A WORLD WIDE WEB?... 4 1.2 COMO FUNCIONA A WWW?... 4 1.3 SERVIDORES WEB... 4 1.4 BROWSERS... 4 1.5 PADRÕES DA WEB... 5 1.6

Leia mais

HTML (Hyper Text Markup Language) É a linguagem com que se escrevem as páginas web;

HTML (Hyper Text Markup Language) É a linguagem com que se escrevem as páginas web; HTML Introdução Introdução ao HTML HTML (Hyper Text Markup Language) É a linguagem com que se escrevem as páginas web; É uma linguagem de hipertexto; Permite escrever texto de forma estruturada, que está

Leia mais

FTIN - Módulo de WebDesign. Prof. Iran Pontes

FTIN - Módulo de WebDesign. Prof. Iran Pontes FTIN - Módulo de WebDesign Prof. Iran Pontes FTIN FORMAÇÃO TÉCNICA EM INFORMÁTICA IMPLEMENTAÇÃO HTML/CSS Hipertexto É um sistema para a visualização de informação cujos documentos contêm referências internas

Leia mais

Introdução à Tecnologia Web HTML HyperText Markup Language XHTML extensible HyperText Markup Language Declaração DOCTYPE e Tag Raiz html

Introdução à Tecnologia Web HTML HyperText Markup Language XHTML extensible HyperText Markup Language Declaração DOCTYPE e Tag Raiz html IntroduçãoàTecnologiaWeb HTML HyperTextMarkupLanguage XHTML extensiblehypertextmarkuplanguage DeclaraçãoDOCTYPEeTagRaizhtml ProfªMSc.ElizabeteMunzlinger www.elizabete.com.br ProfªMSc.ElizabeteMunzlinger

Leia mais

Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens

Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens Tag para inserir imagens e HTML O modelo CSS Noções fundamentais e funcionamento do CSS Incluindo estilos em uma página Sintaxe

Leia mais

Tecnologia WEB I. Prof. Erwin Alexander Uhlmann. Dos princípios do HTML, estruturação com CSS e automação com Javascript

Tecnologia WEB I. Prof. Erwin Alexander Uhlmann. Dos princípios do HTML, estruturação com CSS e automação com Javascript 1 Tecnologia WEB I Prof. Erwin Alexander Uhlmann Dos princípios do HTML, estruturação com CSS e automação com Javascript UHLMANN, Erwin Alexander. Dos princípios do HTML, estruturação com CSS e automação

Leia mais

DOCUMENTAÇÃO DO FRAMEWORK - versão 2.0

DOCUMENTAÇÃO DO FRAMEWORK - versão 2.0 DOCUMENTAÇÃO DO FRAMEWORK - versão 2.0 Índice 1 - Objetivo 2 - Descrição do ambiente 2.1. Tecnologias utilizadas 2.2. Estrutura de pastas 2.3. Bibliotecas já incluídas 3 - Características gerais 4 - Criando

Leia mais

QUEM FEZ O TRABALHO?

QUEM FEZ O TRABALHO? Introdução a Linguagem HTML: Conceitos Básicos e Estrutura ANA PAULAALVES DE LIMA 1 QUEM FEZ O TRABALHO? Com as tagsaprendidas hoje, faça uma página HTML sobre você com as seguintes informações: Seu nome

Leia mais

> Herbet Ferreira Rodrigues > contato@herbetferreira.com

> Herbet Ferreira Rodrigues > contato@herbetferreira.com Curso HTML & CSS > Herbet Ferreira Rodrigues > contato@herbetferreira.com Sumário > Apresentação > Introdução ao HTML História Começando a Programar > Tags em HTML Headings (Cabeçalhos) Parágrafos Formatação

Leia mais

Roteiro 2: Conceitos de Tags HTML

Roteiro 2: Conceitos de Tags HTML Roteiro 2: Conceitos de Tags HTML Objetivos Detalhar conceitos sobre TAGS HTML: elementos, atributos, elemento vazio, links. Implementar páginas de internet com uso da linguagem HTML; Ferramentas Necessárias

Leia mais

PHP Material de aula prof. Toninho (8º Ano)

PHP Material de aula prof. Toninho (8º Ano) Na aula anterior entendemos como se faz o acesso aos nossos arquivos PHP; Como construir um script em php. Nesta aula (3) vamos entender: Como roda o PHP Inserindo comentários Visualizando páginas a partir

Leia mais

Acessibilidade no SIEP (Sistema de Informações da Educação Profissional e Tecnológica) Módulo de Acessibilidade Virtual CEFET Bento Gonçalves RS Maio 2008 ACESSIBILIDADE À WEB De acordo com Cifuentes (2000),

Leia mais

Desenvolvimento de Sites com PHP e Mysql Docente André Luiz Silva de Moraes

Desenvolvimento de Sites com PHP e Mysql Docente André Luiz Silva de Moraes Roteiro 2: Introdução a Linguagem HTML Desenvolvimento de Sites com PHP e Mysql Neste roteiro é explorada a linguagem HTML. A linguagem HTML (Hypertext Markup Language) é amplamente utilizada na construção

Leia mais

HTML / JAVASCRIPT. A versão atual é o HTML5 (seus predecessores imediatos são HTML 4.01, XHTML 1.1, etc.).

HTML / JAVASCRIPT. A versão atual é o HTML5 (seus predecessores imediatos são HTML 4.01, XHTML 1.1, etc.). HTML / JAVASCRIPT Estamos iniciando o estudo do HTML através das TAGS (comandos) para construir formulários. Isso facilitará a continuidade dos nossos estudos da linguagem de programação JavaScript, a

Leia mais

Programação WEB. Prof. André Gustavo Duarte de Almeida andre.almeida@ifrn.edu.br docente.ifrn.edu.br/andrealmeida. Aula III Introdução PHP

Programação WEB. Prof. André Gustavo Duarte de Almeida andre.almeida@ifrn.edu.br docente.ifrn.edu.br/andrealmeida. Aula III Introdução PHP Programação WEB Prof. André Gustavo Duarte de Almeida andre.almeida@ifrn.edu.br docente.ifrn.edu.br/andrealmeida Aula III Introdução PHP Introdução PHP PHP=Hypertext Pre-Processor Linguagem de script open

Leia mais

SIEP / RENAPI. Dicas HTML e CSS para Desenvolvimento. de um Site/Portal Acessível

SIEP / RENAPI. Dicas HTML e CSS para Desenvolvimento. de um Site/Portal Acessível SIEP / RENAPI Dicas HTML e CSS para Desenvolvimento de um Site/Portal Acessível Setembro de 2009 Dicas HTML e CSS para Desenvolvimento de um Site/Portal Acessível Cuidados em geral Separar adequadamente

Leia mais

XHTML 1.0 DTDs e Validação

XHTML 1.0 DTDs e Validação XHTML 1.0 DTDs e Validação PRnet/2012 Ferramentas para Web Design 1 HTML 4.0 X XHTML 1.0 Quais são os três principais componentes ou instrumentos mais utilizados na internet? PRnet/2012 Ferramentas para

Leia mais

DHTML - MÓDULO 1: VISÃO GERAL E INTRODUÇÃO Por Marcelo Camargo Visão geral

DHTML - MÓDULO 1: VISÃO GERAL E INTRODUÇÃO Por Marcelo Camargo Visão geral Apostila retirada de http://www.ibestmasters.com.br DHTML - MÓDULO 1: VISÃO GERAL E INTRODUÇÃO Por Marcelo Camargo Visão geral A tecnologia DHTML (Dynamic HTML) foi apresentada inicialmente como um conjunto

Leia mais

Web Design Aula 02: HTML

Web Design Aula 02: HTML Web Design Aula 02: HTML Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Motivação Roteiro Introdução Conceitos HTML Primeira Página Identação Incluindo o título Salvando a página Vizualizando

Leia mais

Instalação do PHP no Linux

Instalação do PHP no Linux Instalação do PHP no Linux O código PHP está embutido diretamente nos documentos XHTML, embora esses segmentos de script sejam interpretados pelo servidor antes de serem entregues para o cliente, o que

Leia mais

Unidade: O que é CSS? HTML e CSS? Boa aula!!!

Unidade: O que é CSS? HTML e CSS? Boa aula!!! Unidade: O que é CSS? HTML e CSS? Boa aula!!! Objetivo Construir: Padrões Web, Tableless e outros Como inserir o CSS nas páginas Sintaxe de utilização do CSS Tag DIV e tag SPAN Orientações Durante a explanação

Leia mais

Curso de Desenvolvimento Web com HTML5, CSS3 e jquery

Curso de Desenvolvimento Web com HTML5, CSS3 e jquery Curso de Desenvolvimento Web com HTML5, CSS3 e jquery Professor: Marcelo Ricardo Minholi CH: 32 horas anuais (4 dias de 8 horas) Umuarama - 2012 Fundamentação Teórica: HTML (acrônimo para a expressão inglesa

Leia mais

Técnicas e processos de produção. Profº Ritielle Souza

Técnicas e processos de produção. Profº Ritielle Souza Técnicas e processos de produção Profº Ritielle Souza INTRODUÇÃO HTML Sigla em inglês para Hyper Text Markup Language, traduzindo daria algo como Linguagem para marcação de Hipertexto. E o que seria o

Leia mais

Introdução à Tecnologia Web HTML HyperText Markup Language XHTML extensible HyperText Markup Language Seção do Corpo Estrutura da Página

Introdução à Tecnologia Web HTML HyperText Markup Language XHTML extensible HyperText Markup Language Seção do Corpo Estrutura da Página IntroduçãoàTecnologiaWeb HTML HyperTextMarkupLanguage XHTML extensiblehypertextmarkuplanguage SeçãodoCorpo EstruturadaPágina ProfªMSc.ElizabeteMunzlinger ProfªMSc.ElizabeteMunzlinger SeçãodoCorpo EstruturadaPágina

Leia mais

Maurício Samy Silva. Novatec

Maurício Samy Silva. Novatec Maurício Samy Silva Novatec Sumário Agradecimentos...13 Sobre o autor...13 Introdução...15 Para quem foi escrito este livro... 15 Convenções tipográficas... 16 Site do livro... 18 Capítulo 1 O que é (X)HTML?...20

Leia mais

INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO RN - IFRN APOSTILA: AUTORIA WEB PROFESSOR: ADDSON ARAÚJO DA COSTA SANTA CRUZ - RN

INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO RN - IFRN APOSTILA: AUTORIA WEB PROFESSOR: ADDSON ARAÚJO DA COSTA SANTA CRUZ - RN INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO RN - IFRN APOSTILA: AUTORIA WEB PROFESSOR: ADDSON ARAÚJO DA COSTA SANTA CRUZ - RN Sumário 1. Introdução...1 2. Tags...1 3. HTML...1 4. Cabeça, Corpo

Leia mais

HTML. Conceitos básicos de formatação de páginas WEB

HTML. Conceitos básicos de formatação de páginas WEB HTML Conceitos básicos de formatação de páginas WEB HTML HyperText Markup Language Linguagem utilizada para criar hipertexto na web Ou seja, criar documentos estruturados utilizando para tal um conjunto

Leia mais

Web Design Aula 13: Introdução a CSS

Web Design Aula 13: Introdução a CSS Web Design Aula 13: Introdução a CSS Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Motivação Você lembra que HTML e XHTML são linguagens de marcação? Para organizar melhor o visual das páginas

Leia mais

Desenvolvedor Web Docente André Luiz Silva de Moraes

Desenvolvedor Web Docente André Luiz Silva de Moraes Roteiro 2: Introdução a Linguagem HTML Neste roteiro é explorada a linguagem HTML. A linguagem HTML (Hypertext Markup Language) é amplamente utilizada na construção de páginas de internet e é responsável

Leia mais

Webdesign A tag HEAD e as Meta tags

Webdesign A tag HEAD e as Meta tags Webdesign A tag HEAD e as Meta tags Conteúdos Os materiais de aula, apostilas e outras informações estarão disponíveis em: www.thiagomiranda.net HEAD Como vimos anteriormente, o nosso documento HTML é

Leia mais

Material de apoio a aulas de Desenvolvimento Web. Tutorial Java WEB JSP & HTML & CSS & CLASSE & OBJETOS. AAS - www.aas.pro.

Material de apoio a aulas de Desenvolvimento Web. Tutorial Java WEB JSP & HTML & CSS & CLASSE & OBJETOS. AAS - www.aas.pro. Material de apoio a aulas de Desenvolvimento Web Tutorial Java WEB JSP & HTML & CSS & CLASSE & OBJETOS AAS - www.aas.pro.net Março-2012 Este pequeno tutorial tem como objetivo conduzir o programador passo-a-passo

Leia mais

Potenciais de Aplicação da Metodologia AJAX

Potenciais de Aplicação da Metodologia AJAX SEGeT Simpósio de Excelência em Gestão e Tecnologia 1 Potenciais de Aplicação da Metodologia AJAX Bruno Simões Kleverson Pereira Marcos Santos Eduardo Barrere Associação Educacional Dom Bosco - AEDB RESUMO

Leia mais

Introdução. HyperText Markup Language HTML. Formulário. Fluxo do Formulário. Fluxo do Formulário. Fluxo do Formulário. Fluxo do Formulário

Introdução. HyperText Markup Language HTML. Formulário. Fluxo do Formulário. Fluxo do Formulário. Fluxo do Formulário. Fluxo do Formulário Introdução HyperText Markup Language HTML Formulário Prof. Luis Nícolas de Amorim Trigo nicolas.trigo@ifsertao-pe.edu.br http://professor.ifsertao-pe.edu.br/nicolas.trigo/ O usuário interage com os serviços

Leia mais

28 de dezembro de 2003

28 de dezembro de 2003 Padrões Web e Tableless Marcelo Toledo 28 de dezembro de 2003 O HTML, HyperText Markup Language ou Linguagem de Marcação HiperTexto, foi criado para marcar um texto através

Leia mais

COMO FUNCIONA UM FORMULÁRIO

COMO FUNCIONA UM FORMULÁRIO FORMULÁRIOS Constitui-se numa das formas de a máquina cliente enviar informações para que um programa no servidor receba estes dados, processe-os e devolva uma resposta ao usuário, por meio do navegador,

Leia mais

Introdução à Tecnologia Web HTML HyperText Markup Language XHTML extensible HyperText Markup Language Seção do Corpo Imagens

Introdução à Tecnologia Web HTML HyperText Markup Language XHTML extensible HyperText Markup Language Seção do Corpo Imagens IntroduçãoàTecnologiaWeb HTML HyperTextMarkupLanguage XHTML extensiblehypertextmarkuplanguage SeçãodoCorpo Imagens ProfªMSc.ElizabeteMunzlinger ProfªMSc.ElizabeteMunzlinger SeçãodoCorpo Imagens Índice

Leia mais

Introdução à Tecnologia Web. Ferramentas e Tecnologias de Desenvolvimento Web. Profª MSc. Elizabete Munzlinger www.elizabete.com.

Introdução à Tecnologia Web. Ferramentas e Tecnologias de Desenvolvimento Web. Profª MSc. Elizabete Munzlinger www.elizabete.com. IntroduçãoàTecnologiaWeb FerramentaseTecnologiasde DesenvolvimentoWeb ProfªMSc.ElizabeteMunzlinger www.elizabete.com.br ProfªMSc.ElizabeteMunzlinger www.elizabete.com.br FerramentaseTecnologiasde DesenvolvimentoWeb

Leia mais

TECNOLOGIAS WEB AULA 5 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD

TECNOLOGIAS WEB AULA 5 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD TECNOLOGIAS WEB AULA 5 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD Objetivos: Apresentar as principais tags utilizadas na construção de páginas Web. Compreender as principais funcionalidades de cada tag utilizada.

Leia mais

jquery Apostila Básica

jquery Apostila Básica jquery Apostila Básica INTRODUÇÃO 3 CAPÍTULO 1 POR ONDE INICIAR 3 CAPÍTULO 2 MEU PRIMEIRO SCRIPT! 4 EXERCÍCIOS...5 CAPÍTULO 3 ADICIONANDO CSS 6 EXERCÍCIOS...7 CAPÍTULO 4 MODIFICANDO APENAS PARTE DO DOCUMENTO

Leia mais

Logo abaixo temos a Barra de Menus que é onde podemos acessar todos os recursos do PHP Editor.

Logo abaixo temos a Barra de Menus que é onde podemos acessar todos os recursos do PHP Editor. Nessa aula iremos estudar: A anatomia da janela do PHP Editor Iniciando o servidor Web O primeiro exemplo de PHP Anatomia da janela do PHP Editor Barra de Títulos: É a barra azul que se encontra na parte

Leia mais

Flex. MANUAL DE USO DA FERRAMENTA FLEX O Flex como gerenciador de conteúdo

Flex. MANUAL DE USO DA FERRAMENTA FLEX O Flex como gerenciador de conteúdo 2011 MANUAL DE USO DA FERRAMENTA FLEX O Flex como gerenciador de conteúdo Aprenda como é simples utilizar a ferramenta Flex como seu gerenciador de conteúdo online. Flex Desenvolvido pela ExpandWEB 31/01/2011

Leia mais

DESENVOLVIMENTODE APLICAÇÕESPARAINTERNET:PHP. VitorFariasCoreia

DESENVOLVIMENTODE APLICAÇÕESPARAINTERNET:PHP. VitorFariasCoreia DESENVOLVIMENTODE APLICAÇÕESPARAINTERNET:PHP VitorFariasCoreia INFORMAÇÃOECOMUNICAÇÃO Autor Vitor Farias Correia Graduado em Sistemas de Informação pela FACITEC e especialista em desenvolvimento de jogos

Leia mais

Desenvolvimento Web XHTML Formulários. Prof. Bruno E. G. Gomes

Desenvolvimento Web XHTML Formulários. Prof. Bruno E. G. Gomes Desenvolvimento Web XHTML Formulários Prof. Bruno E. G. Gomes 2014 Introdução Um recurso bastante utilizado no desenvolvimento Web é o envio de dados de uma página para o servidor quando fornecemos informações,

Leia mais

Plano de Trabalho Docente 2014. Ensino Técnico

Plano de Trabalho Docente 2014. Ensino Técnico Plano de Trabalho Docente 2014 Ensino Técnico ETEC PROF. MASSUYUKI KAWANO Código: 136 Município: TUPÃ Eixo Tecnológico: INFORMAÇÃO E COMUNICAÇÃO Habilitação Profissional: TÉCNICA DE NÍVEL MÉDIO DE TÉCNICO

Leia mais

Professor: Paulo Macos Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira

Professor: Paulo Macos Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira Professor: Paulo Macos Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira Objetivo e desafio do curso Como objetivo o curso irá tornar o aluno capaz de desenvolver um

Leia mais

Técnicas e processos de produção. Profº Ritielle Souza

Técnicas e processos de produção. Profº Ritielle Souza Técnicas e processos de produção Profº Ritielle Souza Ferramentas Programáveis Mensagem para mais de um destinatário FALE CONOSCO Definindo

Leia mais

GERÊNCIA DE DADOS SEMIESTRUTURADOS -XML. Prof. Angelo Augusto Frozza, M.Sc. http://about.me/tilfrozza

GERÊNCIA DE DADOS SEMIESTRUTURADOS -XML. Prof. Angelo Augusto Frozza, M.Sc. http://about.me/tilfrozza GERÊNCIA DE DADOS SEMIESTRUTURADOS -XML Prof. Angelo Augusto Frozza, M.Sc. http://about.me/tilfrozza O QUE É XML? Tecnologia desenvolvida pelo W3C http://www.w3c.org W3C: World Wide Web Consortium consórcio

Leia mais

Aula 9: Fundamentos do JQuery Fonte: Plano de Aula Oficial da Disciplina

Aula 9: Fundamentos do JQuery Fonte: Plano de Aula Oficial da Disciplina Programação para Internet Rica 1 Aula 9: Fundamentos do JQuery Fonte: Plano de Aula Oficial da Disciplina Objetivo: Capacitar o aluno para o trabalho com o framework JQuery. INTRODUÇÃO JQuery é uma biblioteca

Leia mais

Passos Preliminares: Acessando a máquina virtual via ssh.

Passos Preliminares: Acessando a máquina virtual via ssh. CIn/UFPE Sistemas de Informação Redes de Computadores Professor: Kelvin Lopes Dias Monitor: Edson Adriano Maravalho Avelar {kld,eama@cin.ufpe.br Instalando o APACHE, PHP (PHPADMIN), MySQL. Este tutorial

Leia mais

Plano de Trabalho Docente 2013. Ensino Técnico

Plano de Trabalho Docente 2013. Ensino Técnico Plano de Trabalho Docente 2013 Ensino Técnico ETEC Paulino Botelho Código: 091 Município: São Carlos Eixo Tecnológico: Informação e Comunicação Habilitação Profissional: Técnico em Informática Qualificação:

Leia mais

Aula 1 Desenvolvimento Web. Curso: Técnico em Informática / 2º módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme

Aula 1 Desenvolvimento Web. Curso: Técnico em Informática / 2º módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme Aula 1 Desenvolvimento Web Curso: Técnico em Informática / 2º módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme Plano de Aula Ementa Avaliação Ementa Noções sobre Internet. HTML

Leia mais

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Desenvolvimento em Ambiente Web Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com No início A Web é criada em 1989, para ser um padrão de publicação e distribuição de textos científicos e acadêmicos.

Leia mais

Introdução ao HTML 5 e Implementação de Documentos

Introdução ao HTML 5 e Implementação de Documentos Linguagem de Programação para Web Introdução ao HTML 5 e Implementação de Documentos Prof. Mauro Lopes 1-31 20 Objetivo Iremos aqui apresentar a estrutura básica de um documento HTML e iremos também apresentar

Leia mais

Internet e Programação Web

Internet e Programação Web COLÉGIO ESTADUAL PEDRO MACEDO Ensino Profissionalizante Internet e Programação Web 3 Técnico Prof. Cesar 2014 1 SUMÁRIO Criar sites dinâmicos em PHP --------------------------------------------------------

Leia mais

WWW - World Wide Web

WWW - World Wide Web WWW World Wide Web WWW Cap. 9.1 WWW - World Wide Web Idéia básica do WWW: Estratégia de acesso a uma teia (WEB) de documentos referenciados (linked) em computadores na Internet (ou Rede TCP/IP privada)

Leia mais

Desenvolvimento de Aplicações para Internet

Desenvolvimento de Aplicações para Internet Desenvolvimento de Aplicações para Internet Aula 03 Celso Olivete Júnior olivete@fct.unesp.br Na aula de hoje... Javascript: introdução, operadores lógicos e matemáticos, comandos condicionais. Javascript:

Leia mais

Curso de Aprendizado Industrial Desenvolvedor WEB. Disciplina: Linguagem de Programação Web Professora: Cheli Mendes Costa Aula 02 Introdução ao PHP

Curso de Aprendizado Industrial Desenvolvedor WEB. Disciplina: Linguagem de Programação Web Professora: Cheli Mendes Costa Aula 02 Introdução ao PHP Curso de Aprendizado Industrial Desenvolvedor WEB Disciplina: Linguagem de Programação Web Professora: Cheli Mendes Costa Aula 02 Introdução ao PHP Agora falaremos de PHP. História - O nome da linguagem

Leia mais

Programação e Designer para WEB

Programação e Designer para WEB Programação e Designer para WEB PHP Prof. Rodrigo Rocha prof.rodrigorocha@yahoo.com http://www.bolinhabolinha.com Apresentação Onde Estamos Introdução a hipertexto. A linguagem HTML. Ambientes para programação

Leia mais

MANUAL E DICAS ASSISTENTE VIRTUAL (AV) ADS DIGITAL (WWW.ADSDIGITAL.COM.BR) VERSÃO DO ASSISTENTE VIRTUAL: 1.3.1 POR

MANUAL E DICAS ASSISTENTE VIRTUAL (AV) ADS DIGITAL (WWW.ADSDIGITAL.COM.BR) VERSÃO DO ASSISTENTE VIRTUAL: 1.3.1 POR MANUAL E DICAS DO ASSISTENTE VIRTUAL (AV) POR ADS DIGITAL (WWW.ADSDIGITAL.COM.BR) VERSÃO DO ASSISTENTE VIRTUAL: 1.3.1 ÍNDICE Introdução...3 Requisitos e Restrições do Assistente...3 Diferenças da Versão

Leia mais

Algoritmia e Programação APROG HTML. Introdução. Nelson Freire (ISEP DEI-APROG 2014/15) 1/15

Algoritmia e Programação APROG HTML. Introdução. Nelson Freire (ISEP DEI-APROG 2014/15) 1/15 APROG Algoritmia e Programação HTML Introdução Nelson Freire (ISEP DEI-APROG 2014/15) 1/15 O que é o HTML? Sumário Geral Documento HTML Elemento HTML Estrutura Básica de Documento HTML Elementos Títulos

Leia mais

INTRODUÇÃO AO DESENVOLVIMENTO WEB

INTRODUÇÃO AO DESENVOLVIMENTO WEB INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO Formulários Os formulários em HTML são usados para selecionar diferentes tipos de entradas do usuário. Um formulário é uma área que

Leia mais

Algoritmos em Javascript

Algoritmos em Javascript Algoritmos em Javascript Sumário Algoritmos 1 O que é um programa? 1 Entrada e Saída de Dados 3 Programando 4 O que é necessário para programar 4 em JavaScript? Variáveis 5 Tipos de Variáveis 6 Arrays

Leia mais

Introdução à Tecnologia Web

Introdução à Tecnologia Web Introdução à Tecnologia Web HTML HyperText Markup Language XTML extensible HyperText Markup Language Elementos da Seção do Corpo Tabelas Formulários Professor Alan Cleber Borim www.alanborim.com.br Índice.

Leia mais

HTML. Sessão 1 HTML. Cliente: browser (IE, por exemplo) Servidor: IIS (Internet Information Server), Apache, WebSphere,...

HTML. Sessão 1 HTML. Cliente: browser (IE, por exemplo) Servidor: IIS (Internet Information Server), Apache, WebSphere,... Sessão 1 A INTERNET Baseada no modelo Cliente-Servidor Cliente: programa que pede informação Servidor: programa que envia a informação No caso da WWW: Cliente: browser (IE, por exemplo) Servidor: IIS (Internet

Leia mais

HTML -- Criação de Home Page

HTML -- Criação de Home Page PPáággi innaa 1 LISTAS Na linguagem HTML existem elementos específicos para a criação de listas, que podem ser listas ordenadas (OL), listas sem ordenação (UL), ou listas de definição (DL). Um detalhe

Leia mais

Desenvolvimento de Sites com PHP e Mysql Docente André Luiz Silva de Moraes

Desenvolvimento de Sites com PHP e Mysql Docente André Luiz Silva de Moraes Roteiro 3: Introdução a Linguagem CSS Desenvolvimento de Sites com PHP e Mysql Objetivos Vincular folhas de estilo CSS em páginas de Internet; Compreender a sintaxe CSS; Controlar a formatação dos elementos

Leia mais

Conteúdo. Linguagem Estática x Dinâmica O que é PHP? Configurando o Ambiente do PHP Sintaxe

Conteúdo. Linguagem Estática x Dinâmica O que é PHP? Configurando o Ambiente do PHP Sintaxe Unidade IV Introdução à Linguagem PHP Parte 1 Professor Fabiano de Paula Soldati fpsoldati@yahoo.com.br http://br.groups.yahoo.com/group/professorsoldati/ Conteúdo Linguagem Estática x Dinâmica O que é

Leia mais

Apostila CSS - Introdução à folha de estilos

Apostila CSS - Introdução à folha de estilos Apostila CSS - Introdução à folha de estilos Este documento é propriedade intelectual do Núcleo de Educação a distância da NRsystem e distribuído sob os seguintes termos: 1. As apostilas publicadas pelo

Leia mais

[TUTORIAL] 5 passos Convertendo HTML Template para Joomla

[TUTORIAL] 5 passos Convertendo HTML Template para Joomla 1 de 5 16/5/2012 15:21 Voce esta aqui: Inicio Fórum Seu Nome ENTRAR Esqueceu Senha? Registrar-se Inicio Fórum Comunidade Templates Extensões Cursos Joomla Docs Matérias Fórum Registrar Entrar Pesquisar

Leia mais

Introdução 1ª Parte Web Web Web Web Browsers Editores Editores Etiquetas (tags) base indica que se trata de uma página escrita em linguagem HTML. Esta deve abranger todo o código;

Leia mais

WebDesign. Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br. Escola CDI de Videira

WebDesign. Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br. Escola CDI de Videira WebDesign Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira Entendendo Alguns Conceitos Antes de prosseguirmos é importante ter em mente o motivo pelo

Leia mais

Linguagem de. Aula 06. Profa Cristiane Koehler cristiane.koehler@canoas.ifrs.edu.br

Linguagem de. Aula 06. Profa Cristiane Koehler cristiane.koehler@canoas.ifrs.edu.br Linguagem de Programação IV -PHP Aula 06 Profa Cristiane Koehler cristiane.koehler@canoas.ifrs.edu.br Criação de Formulários o Um formulário consiste em uma série de campos que são preenchidos pelo usuário

Leia mais

O código JavaScript deve ser colocado entre tags de comentário para ficar escondido no caso de navegadores antigos que não reconhecem a linguagem.

O código JavaScript deve ser colocado entre tags de comentário para ficar escondido no caso de navegadores antigos que não reconhecem a linguagem. 1 - O que é JAVASCRIPT? É uma linguagem de script orientada a objetos, usada para aumentar a interatividade de páginas Web. O JavaScript foi introduzido pela Netscape em seu navegador 2.0 e posteriormente

Leia mais

Acessibilidade na Web Cesár Bomfim Brasília 15 de Março

Acessibilidade na Web Cesár Bomfim Brasília 15 de Março Acessibilidade na Web Cesár Bomfim Brasília 15 de Março Avaliação Passos para Site Acessível -Seguir padrões Web; -Seguir as diretrizes e recomendações de acessibilidade; -Realizar avaliação de acessibilidade.

Leia mais