-
Atividade: Carta para banda
sábado, 27 de abril de 2013
| Marcadores: CCW | 0 comentários | |
-
Formulário Fã Clube
sábado, 20 de abril de 2013
A atividade que tivemos de fazer durante essa semana para a matéria CCW (Criação de conteúdo para web), consistia em criar um formulário de inscrição para um fã clube, tivemos livre arbítrio para escolhermos qualquer banda ou cantor que gostássemos.Confesso que fiquei com muita dúvida entre muitas bandas (Pink Floyd, Symphony X, Angra, Genesis [quem me conhece sabe]) e cantores, mas no final fiz unicamente sobre Kagrra, uma banda japonesa que já não existe mais, entretanto suas música tocam até hoje na minha alma. s2Os formulários foram feitos em HTML5 e CSS3, seguindo assim os mandamentos divinos.
Versão inglês:
Versão português:
Obs: Se tiver alguma coisa errada, a professora vai corrigir e depois eu corrijo aqui também.
Obs2: Não conseguiu ver a imagem direito por conta do tamanho? Problema seu! Vide link abaixo.
Obs3: Versão em html| Marcadores: CCW, HTML5 | 2 comentários | |
-
CGI.br
sexta-feira, 19 de abril de 2013
O Comitê Gestor da Internet no Brasil (CGI.br) foi criado maio de 1995 e alterado em setembro de 2003.Sua missão é coordenar e integrar todas as iniciativas de serviços Internet no país, promovendo a qualidade técnica, a inovação e a disseminação dos serviços ofertados.Composto por membros do governo, do setor empresarial, do terceiro setor e da comunidade acadêmica, o CGI.br representa um modelo de governança na Internet pioneiro no que diz respeito à efetivação da participação da sociedade nas decisões envolvendo a implantação, administração e uso da rede. Desde julho de 2004 o CGI.br elege democraticamente seus representantes da sociedade civil para participar das deliberações e debater prioridades para a internet, junto com o governo.O CGI.br mantém grupos de trabalho e coordena diversos projetos em áreas de importância fundamental para o funcionamento e o desenvolvimento da internet no país. Para executar suas atividades, o CGI.br criou uma entidade civil, sem fins lucrativos, denominada "Núcleo de Informação e Coordenação do Ponto BR" - NIC.br.
Desde 1995, o Registro.br executa algumas das atribuições do CGI, entre as quais as atividades de registro de nomes de domínio, a administração e a publicação do DNS para o domínio <.br>. Realiza ainda os serviços de distribuição e manutenção de endereços internet e também oferece os serviços de engenharia e hospedagem.
O CERT.br - Centro de Estudos, Resposta e Tratamento de Incidentes de Segurança no Brasil. Além de tratar incidentes de segurança, também realiza atividades de apoio a administradores de redes e usuários de internet no país. Destacam-se a produção de documentos sobre segurança de redes, a manutenção de estatísticas sobre spam e incidentes no Brasil e o desenvolvimento de mecanismos de alerta antecipado para redes possivelmente envolvidas em atividades maliciosas.
O Centro de Estudos sobre as Tecnologias da Informação e da Comunicação (CETIC.br) é responsável pela produção de indicadores e estatísticas sobre a disponibilidade e uso da internet no Brasil, divulgando informações periódicas sobre o crescimento da rede no país. Esses dados são fundamentais para monitorar e avaliar o impacto sócio-econômico das TICs, e também para permitir a comparabilidade da realidade brasileira com a de outros países.
O Centro de Estudos e Pesquisas em Tecnologia de Redes e Operações (CEPTRO.br) é o órgão responsável pela execução de projetos aprovados pelo CGI.br e relacionados à Tecnologia de Redes e Operações na Internet. Cabe a ele desenvolver estudos que permitam a inovação e a melhoria do nível de qualidade técnica no uso da Internet, bem como pesquisar tecnologias de redes que estimulem a disseminação da Internet no País, buscando constantemente oportunidades para agregar valor a bens e serviços vinculados à Internet.São projetos do CEPTRO.br:
O PTT.br é um ponto de troca de tráfego que fornece uma infraestrutura de conexão aos seus participantes distribuída em uma área metropolitana.
O NTP.br (Network Time Protocol) define um jeito para um grupo de computadores conversar entre si e acertar seus relógios, baseados em alguma fonte confiável de tempo, como os relógios atômicos do Observatório Nacional, que definem a Hora Legal Brasileira.
Acompanhando deliberação do CGI.br e os requisitos do W3C, World Wide Web Consortium, o NIC.br instalou um escritório do W3C no Brasil - o primeiro na América do Sul. O W3C é um consórcio internacional com a missão de conduzir a web ao seu potencial máximo, criando padrões e diretrizes que garantam a sua evolução permanente. Mais de 80 padrões foram já publicados, entre eles HTML, XML, XHTML e CSS. O W3C no Brasil vem reforçar os objetivos globais de uma web para todos, em qualquer aparelho, baseada no conhecimento, com segurança e responsabilidade.
Os Grupos de Trabalho do Comitê Gestor, GTER - Engenharia de Redes; GTS - Segurança de Redes; e GTRH - Formação de Recursos Humanos, foram criados para subsidiar as decisões e recomendações técnicas, administrativas e operacionais do CGI.br. Seus membros se 'reúnem' por meio de listas de discussões e em eventos periódicos
FONTE DE PESQUISA: http://www.cgi.br/| Marcadores: Bases da Internet | |
-
FORMULÁRIOS HTML
domingo, 7 de abril de 2013
Os formulários são muito importantes em websites; geralmente utilizados para reunir informações de cadastro de clientes e usuários em uma base de dados, eles servem para facilitar o contato do cliente com a empresa em diversos sentidos, já que não é necessário um contato telefônico – por exemplo – para que possa dar seus dados cadastrais, fazer uma reclamação, dar uma sugestão ou enviar uma dúvida.
Tag e atributos (para formulários):<form> </form>: Tag de abertura de um formulário.- Atributos da tag form:*id: Agrupa elementos, mas sua mais importante função é a de dar uma identificação para eles (o Id é único, jamais deve haver 2 elementos com o mesmo).*action: Indica onde os dados informados serão guardados após sua submissão (ou seja, o local onde as informações preenchidas serão guardadas [por ex: um banco de dados]).*method: Método de envio dos dados, existem apenas 2, que são:- Get: Os dados são conduzidos através da URL do navegador. Esse método não é aconselhável, pois informações importantes (como de variáveis, por exemplo) aparecem na barra de endereço e a quantidade de caracteres é extremamente limitada.- Post: O método de envio mais seguro, devido ao fato de os dados serem transmitidos diretamente no corpo da página. Outra vantagem é que não há uma quantidade definida de caracteres que possam ser enviados de uma única vez.*enctype: Determina a maneira como serão codificados os dados do formulário (geralmente o formato texto é o escolhido).<label>: Dá um rótulo para o campo. Sua importância semântica é facilitar a leitura por intermédio de sintetizadores de voz. A leitura da label é importante para sinalização dos campos em casos de pessoas que não enxergam.- Atributos da tag label:*accesskey: Utilizado para a criação de alguma tecla de atalho, assim a navegação pelo teclado também é favorecida.*for: Usa-se para criar uma ligação entre a label e o campo à qual se refere.<input>: Define um campo de entrada de dados no formulário.- Atributos da tag input:*type: O tipo de entrada de dado, que tem como principais valores:- Text: Cria um campo que receberá texto (letras, números, caracteres especiais);- Date: Cria um minicalendário, onde o usuário escolhe uma data;- E-mail: Cria um campo validado para receber um endereço de e-mail (se preencher sem @ e . o endereço de e-mail não é aceito);- Number: Cria um campo de tipo numérico;- Range: Cria um controle numérico (uma espécie de regulador), onde o desenvolvedor define qual será o intervalo entre um número e outro (o intervalo sempre será o mesmo);- Password: Campo de senha, aceita números, letras e alguns caracteres especiais. Sua máscara de entrada é a •;- Hidden: Cria um elemento invisível ao usuário, entretanto ele contém informações que geralmente são importantes ao desenvolvedor (última vez que o usuário fez alteração dos seus dados, por exemplo);- File: Cria um botão que, quando clicado abre uma caixa de seleção de arquivo na máquina do usuário;- Checkbox: Cria uma caixinha que funciona como seletor de opções;- Radio: Lembra um checkbox, entretanto sua forma é circular e somente uma opção pode ser selecionada no radio. Muito utilizado para questões onde a informação é fixa, por exemplo, sexo feminino ou masculino;- Button: Simplesmente cria um botão. Deve-se inserir um script que especifique a utilidade do mesmo;- Image: Inclui uma imagem como botão de envio “submit”;- Submit: Botão de envio dos dados preenchidos no formulário para o local indicado no atributo action do form;- Reset: Botão que devolve aos campos do formulário seus valores originais.Obs: Muito parecido com o botão ‘limpar’, já que aparentemente os campos ficam em branco quando clicamos sobre ele, a diferença está no caso de algum campo já ter algum valor específico e esse valor for alterado pelo usuário, quando resetado, o valor original torna a aparecer.*id: Agrupa elementos, mas sua mais importante função é a de dar uma identificação para eles (o Id é único, jamais deve haver 2 elementos com o mesmo).*name: Permite-nos dar um nome ao elemento.*accesskey: Utilizado para a criação de alguma tecla de atalho, assim a navegação pelo teclado também é favorecida.*alt: Texto alternativo somente para imagens.Motivos: se a imagem não carrega, ao passar o mouse acima do espaço onde ela ficaria, o texto - geralmente descritivo - aparece. Também utilizado por sintetizadores de voz;*checked: Determina que uma opção no radio ou checkbox estará pré-selecionada;*disabled: Desabilita a utilidade do campo;*maxlenght: Usado em campos tipo text e password, delimita uma quantidade máxima de caracteres permitidos;*readonly: Indica que o campo é somente de leitura, ou seja, o usuário não consegue digitar nele;*size: Especifica uma a largura (calculada por quantidade de caracteres) que um campo terá;*src: Usado sempre que o tipo for ‘img’ (imagem), indicará o caminho de onde a tal imagem está guardada;*tabindex: Apontará qual será a ordem dos campos do formulário que ficarão em foco conforme a tecla tab for pressionada;*value: Especifica o valor que será enviado ao banco de dados;--- Abaixo atributos que são utilizados exclusivamente para tipos number e range ---*max: Valor máximo;*min: Valor mínimo;*step: Define os intervalos entre os números.<select>: O select expõe uma série de opções que podem ser escolhidas, essas opções são apresentadas em forma de lista.*id: Agrupa elementos, mas sua mais importante função é a de dar uma identificação para eles (o Id é único, jamais deve haver 2 elementos com o mesmo).*multiple: Permite que mais de uma opção possa ser selecionada (por intermédio da tecla ctrl);*disabled: Desabilita a utilidade do campo;*size: Especifica uma a largura (calculada por quantidade de caracteres) que um campo terá;*tabindex: Apontará qual será a ordem dos campos do formulário que ficarão em foco conforme a tecla tab for pressionada;<option>: Define uma opção em algum tipo de lista de seleção.*value: Especifica o valor que será enviado ao banco de dados;*selected: Deixa uma das opções pré-selecionada;*label: Rotula a opção;*disabled: Desabilita a utilidade do campo;<optgroup>: Agrupa as opções relacionadas, dando assim uma maior organização ao select.<textarea>: É uma área onde textos maiores podem ser digitados, aceita qualquer tipo de caracter e quebras de linha também.*id: Agrupa elementos, mas sua mais importante função é a de dar uma identificação para eles (o Id é único, jamais deve haver 2 elementos com o mesmo).*tabindex: Apontará qual será a ordem dos campos do formulário que ficarão em foco conforme a tecla tab for pressionada;*accesskey: Utilizado para a criação de alguma tecla de atalho, assim a navegação pelo teclado também é favorecida;*cols: Define a largura da área de texto;*rows: Define a altura da área de texto;*readonly: Indica que o campo é somente de leitura, ou seja, o usuário não consegue digitar nele;<button>: Essa tag define um botão, dependendo da utilidade que esse botão terá, um script precisa ser criado para dar ao botão tal competência. Também podemos adicionar uma imagem ao botão, adequando-o assim ao design do site.<fieldset>: Cria uma borda em volta dos elementos do formulário. Bastante útil para agrupar informações semelhantes dentro do formulário.<legend>: Define um título para o fieldset.*accesskey: Utilizado para a criação de alguma tecla de atalho, assim a navegação pelo teclado também é favorecida.
Exemplo de utilização das tags:
<!DOCTYPE>
<html>
<head>
<title>Trabalhando com formulários</title>
<meta charset="utf-8">
</head>
<body>
<form id="cadastro" action="cadastrar.php" method="post">
<fieldset>
<legend>Formulário de Contato</legend>
<fieldset>
<legend>Dados Pessoais:</legend>
<label for="nome">Nome:*</label>
<input id="nome" type="text" required><br>
<label for="data">Data que iniciou as aulas:</label>
<input type="date" id="data"><br>
Sexo:
<label for="sexo">M</label>
<input type="radio" name="sexo" value="m">
<label for="sexo">F</label>
<input type="radio" name="sexo" value="f"><br>
<label for="endereco">Endereço:*</label>
<input id="endereco" type="text" required>
<label for="numero">Nº:*</label>
<input id="numero" type="text" required>
<label for="complemento">Complemento</label>
<input id="complemento" type="text"><br>
<label for="telefone">Telefone:</label>
(<input id="ddd" type="number">)
<input id="telefone" type="number"><br>
<label for="email">Email:</label>
<input type="email" id="email"><br>
</fieldset>
<fieldset>
<legend>Dados do curso</legend>
<label for="unidade">Unidade:</label><br>
<input list="list_unidade" id="unidade">
<datalist id="list_unidade">
<option value="Carapicuíba">
<option value="Barueri">
<option value="Osasco">
<option value="Embu das Artes">
<option value="São Paulo">
</datalist><br>
<label for="esportes">Período:</label><br>
<input type="checkbox" value="mn" name="esportes">Manhã
<input type="checkbox" value="td" name="esportes">Tarde
<input type="checkbox" value="nt" name="esportes">Noite<br>
<label for="curso">Curso:</label>
<select id="curso">
<option selected>--- Selecione um curso ---</option>
<optgroup label="Cursos de TI">
<option value="ADS">Análise de Sistemas</option>
<option value="JD">Jogos Digitais</option>
<option value="SI">Sistemas para Internet</option>
<optgroup label="Outros cursos">
<option value="LG">Logística</option>
<option value="SC">Secretariado</option>
</select><br>
<label for="pontos">Dê uma pontuação ao curso:</label>
<input type="range" id="pontos" min="1" max="10" step="1"><br>
<label for="mensagem">Mensagem:</label>
<textarea cols="45" rows="10" id="mensgem">Seu feedback é importante para nós!</textarea><br>
<input type="submit" value="Enviar">
<input type="reset" value="Redefinir">
</fieldset>
</fieldset>
</body>
</html>
Exemplo da formulário no navegador:
| Marcadores: HTML5, PPSI1 | 1 comentários | |
