O código a seguir permite limitar a quantidade de caracteres que serão exibidos em um texto. Usamos a função substr() do PHP. $texto = "coloque um texto grande aqui"; $tam = strlen($texto); // Verifica o tamanho do texto. $max = 400; // exibirá apenas os 400 primeiros caracteres de um texto. if($tam > $max) // Se o texto for maior do que 400, retira o restante. { $conteudo = substr($conteudo, […]
Programação para Web
60 posts
A API accuweather A API da accuweather oferece uma forma simples de colocar dados da condição climática e temperatura da sua cidade em seu site. A API utiliza de uma estrutura jSON. Para ter acesso aos dados jSon da cidade de Atibaia por exemplo, acesse o endereço; http://apidev.accuweather.com/currentconditions/v1/36728.json?language=pt&apikey=hoArfRosT1215 Você verá estas informações; Como obter dados de outras cidades? Note que a url, é o nome do arquivo .json que define […]
Para ler um arquivo ou uma estrutura de dados jSON usando jQuery é muito fácil. Aprenda a usar o $.get do jQuery De acordo com a Documentação do jQuery, uma das formas de ober valores de uma saída jSON externa a sua aplicação WEB é usando o seletor $.get, sua sintaxe é a seguinte; $.get( "http://endereco-da-estrutura-json/", function(data) { // códigos a serem executados aqui... }); Exemplo – Como ler uma […]
Quando copiamos imagens dos bancos de imagens, normalmente No projeto de um site é importante usar imagens de boa qualidade e o mais importante; que tenha direito de uso. A maioria das imagens encontradas no Google não oferecem direito de imagem e isso pode ser um grande problema, a solução é pesquisar imagens em bancos de imagens gratuitos. Nesta outra publicação eu listei alguns sites bem legais que disponibilizam conteúdo […]
Se você ainda não conhece a biblioteca CSS Animate.CSS, veja a aula aqui – Criando animações em seu site com animate.css Esta biblioteca demonstra nos seus exemplos como criar efeitos durante o carregamento de um elemento, no entanto, podemos também criar efeitos após o elemento já estar carregado na página, um exemplo é um efeito hover usando recursos do próprio CSS ao invés de jQuery. Considere o seguinte código exemplo; […]
Em projetos de web sites é sempre importante usar boas imagens. O problema é que muitas das imagens disponibilizadas no Google possuem algum tipo de direito autoral, situação esta que cabe processo em esfera internacional, o autor pode cobrar por uma licença de uso ou alguma espécie de royalties, além de multas pelo uso indevido. No entanto, nem tudo está perdido! Existem vários sites que oferecem imagens de altíssima qualidade […]
Fala pessoal! Conforme comentado em algumas turmas, estarei na Etec atencipando os sábados letivos com o curso de WordPress. A data ainda será definida com a nossa Coordenação. O curso está limitado para no máximo 20 estudantes, sendo que os estudantes do modular noturno e ex-estudantes possuem a preferência. Caso o número de inscritos ultrapasse as 20 vagas, eu irei selecionar os estudantes que participarão de acordo com o seu […]
Existem na web diversos sites que oferecem o serviço de botões de compartilhamento. O que eu mais gosto, particularmente, é do SIMPLE SHARE BUTTONS que oferece um código livre para adaptações. No site do desenvolvedor, podemos ver um breve exemplo de utilizar o SIMPLE SHARE BUTTONS. Embora o site da SIMPLE SHARE BUTTONS apresenta um bom exemplo de uso, podemos melhorá-lo ainda mais com um pouco de JavaScript e jQuery. […]
Poucos anos atrás formatar campos de formulário sempre foi uma coisa muito chata e trabalhosa. Desenvolvedores sempre tinham a mão suas bibliotecas de funções de máscara de formatação para os mais variados campos de cadastro de um formulário HTML. Mas, com o advento dos frameworks JS, em especial o jQuery este trabalho ficou ainda mais simples. Lhe apresento na aula de hoje a biblioteca jQuery Mask Criando um formulário HTML […]
Material de apoio Resumo do material da aula: JavaScript Básico Alguns exemplos de aplicações usando JS: Introdução ao jSON – JavaScript Material do Prof. Rodrigo: JavaScript inicial W3Schools – Manipulação de objetos – DOM Exercícios JavaScript – TPI I 01. Crie uma aplicação WEB na qual o visitante insere faz um login, ele deve então inserir um texto para autenticar o usuário e outro para senha. Se o usuário digitado […]
Um servidor da WEB é considerado um ambiente de produção, ou seja, usamos um servidor da WEB quando já temos uma aplicação devidamente testada e funcionando. Muitos desenvolvedores fazem uso de softwares WAMP (Windows, Apache, MySQL/MariaBD, PHP), os famosos servidores localhost para simular um servidor de internet em seu próprio computador para depois então passar a utilizar um servidor de produção. Internal Server Error 500 No entanto, quando enviamos um […]
1. Crie um arquivo chamado dados_conexao.php cotendo os dados da conexão com o banco seguindo o código a seguir como exemplo; <?php // Dados do servidor $servidor = 'localhost'; $usuario = 'usuario_do_banco'; $senha = 'senha'; $banco = 'nome_do_banco'; ?> 2. Agora crie o arquivo operacoes-sql.php que irá executar os comandos SQL conforme exemplo a seguir; <?php // Carrega os dados da conexão! include("dados_conexao.php"); if ($_GET) //Testa se existem parâmetros […]
Hoje vamos aprender a resolver um problema comum em aplicações front-end e também em aplicativos híbridos quando precisamos ler parâmetros de uma página para outra sem utilizar linguagens de back-end, como PHP por exemplo. Conhecendo as funções JS Capturar o endereço da url com JavaScript Para capturar o endereço da url usamos a função window.location.href do JS. Esta função retorna o caminha completo da url, incluindo o http:// e […]
O HTML 5 possui uma lista de entities (caracteres especiais) na qual inclui algumas figuras semelhantes aos conhecidos ícones de emojis. O site que mais gosto de consultar é este: https://apps.timwhitlock.info/emoji/tables/unicode Outro site bem legal é esse outro aqui: https://getemoji.com/ Ao acessar a página você irá perceber o quanto extensa é a lista de entities. Com base nesta lista vamos criar um caixa de texto que aceite estes caracteres […]
Estou disponibilizando para download um aplicação web muito simples para manipular campos Blob do MySQL. O que é um campo do tipo Blob? Um blob (do inglês: Binary Large OBject, basic large object, representa um conjunto de dados binários armazenados em um único campo de uma tabela. O uso mais apropriado para o campo blob é para armazenamento multimídia como imagens, videos e áudio, porém, seu uso não limita apenas a isto. […]
A nova versão 3 do FancyBox está ainda mais fácil de usar. FancyBox é um aclamando plugin jQuery que acabou virando uma biblioteca em função da sua popularidade. Você pode usar esta galeria tanto em web sites como em aplicativos baseados em HTML 5. O FancyBox inclusive tem um site novo; acesse: http://fancyapps.com/fancybox/3/ Assim como toda boa biblioteca, podemos utilizar os endereços CDNs para adicioná-la a nossa página Web. FancyBox também […]
Dando continuidade na aula anterior (clique aqui para ver a aula anterior) onde criamos a página HTML para um sistema de rating. Agora vamos incrementar um pouco mais este sistema. Evitando que o usuário avalie duas vezes. Temos que garantir que o usuário não avalie a mesma página duas vezes. Podemos resolver isso usando o localstorage do navegador que irá funcionar como um cache. Dentro a função Avaliar() criada na […]
Sistema de rating são aquelas populares estrelinhas pelas quais o usuários avaliam determinado conteúdo de um site ou aplicativo. Este artigo será divido em três partes, a primeira ensina a fazer os cliques das estrelinhas, a segunda ensinará a acumular a quantidade de avaliações em um banco de dados usando AJAX e a terceira irá tirar a média das avaliações, gerar um bloco schema.org e exibir os dados na página. Então… […]
Animete.css é uma biblioteca CSS criada especialmente para criar pequenos efeitos em páginas e aplicativos. Alguns exemplos de animações podem ser testadas no próprio site da animate.css. Tutorial de como usar a biblioteca animate.css Crie uma nova página HTML (Pode usar BootStrap se quiser ?). Acrescente no cabeçalho do documento (dentro das tabes <HEAD> e </HEAD>) o endereço CDN do animate.css <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> A estrutura do documento ficará […]
Antes de acrescentar um botão de login no Facebook do seu site, ou site, é necessário criar um aplicativo no Facebook Developers é através deste aplicativo criado dentro do ambiente do Facebook que o seu aplicativo irá se comunicar com a API do Face, chamada de GRAPH API Criando o aplicativo no Facebook Developers Acesse https://developers.facebook.com/ No menu do topo da página, ao lado esquerdo, clique em Meus Aplicativos e depois clique […]
Introdução Esta aula serve tanto para o desenvolvimento de aplicativos móveis como de aplicações WEB, já que a chama AJAX será a mesma para amplas plataformas. Vantagens de gravar dados com Ajax. Aplicativos móveis podem se conectar diretamente à um banco de dados usando JS como intermediário na conexão. Não existe “reload” na página pois não há necessidade de fazer um SUBMIT para o servidor. A página consequentemente fica mais […]
BlueGriffon é um software open source que facilita o desenvolvimento de páginas para WEB. Pode ser utilizado tanto por desenvolvedores iniciantes como por desenvolvedores experientes. Para os iniciantes, o BlueGriffon facilita o aprendizado das tags e da estrutura das páginas, já para os experientes, o BlueGriffon aumenta a produtividade no desenvolvimento de páginas e sites. Download do BlueGriffon O software é gratuito e pode ser baixado no site oficial do desenvolvedor; http://bluegriffon.org/#download Após […]
Vimos na aula anterior (reveja aqui) como manipular elementos HTML usando jQuery. jQuery trabalha com o conceito com seletores e ações. Agora vamos ver a lista de ações que podemos usar no jQuery, lembrando que no W3Schools é possível ver exemplos práticos de cada um deles; Method Description addClass() Adiciona um ou mais nomes de classe aos elementos selecionados after() Insere conteúdo após os elementos selecionados append() Insere conteúdo no […]
Antigamente, as versões anteriores do HTML não permita utilizar fontes legais, tínhamos que usar as fontes padrões do computador como Arial, Times New Roman, Curier New, Verdana, etc… O código era assim <font face="verdana">Este é um texto com a fonte verdana</font> No entanto, este código não é utilizado mais e alguns navegadores já não o entende. Com a versão mais recente do HTML 5 a forma de utilizar fontes mudou e torno-se […]