Categoria: HTML

Categorias
HTML Programação Tutoriais

HTML5 Video Play como usar

HTML5 Video Play

Neste tutorial vou ensinar a inserir um vídeo em HTML5 e como criar um simples play/pause + controles de redimensionamento de um vídeo… A tag de vídeo é um dos recursos de HTML5 que mais chamou atenção. Geralmente apresentada como uma alternativa ao Flash, a tag de vídeo, na verdade, vai muito além disso. Embora ela só tenha se juntado recentemente ao restante das infindáveis tags HTML, seus recursos e compatibilidade com navegadores vêm aumentando a uma velocidade extraordinária. O pequeno código que se segue traduz como inserir um vídeo: Os controlos de atributo adicionam controlos de vídeo, como o play, pause e volume. Também é uma boa ideia de incluir sempre atributos largura e altura . Se a altura… Continuar a ler

Categorias
HTML Tutoriais

Códigos HTML para acentuação e caracteres especiais

acentuação e caracteres especiais

Precisa utilizar códigos HTML para acentuação e caracteres especiais em suas páginas? Confira uma tabela completa desses caracteres especiais… No inicio da WEB, o uso de códigos para caracteres especiais do HTML era essencial até mesmo para inclusão de acentos. Com a evolução e ascensão do HTML, alguns padrões de caracteres começaram a ser incrementados, e assim, acentuações deixaram de ser um problema. Hoje em dia, a partir do metadados charset, é possível incluir o padrão a ser utilizado na página. Esta página contém tabela da representação em forma de entidades HTML (sequências começando com “&” e terminando com “;”) para caracteres do alfabeto grego e outros símbolos, que são bastante usados em literatura técnica e matemática. Existem diversas formas… Continuar a ler

Categorias
HTML Programação

Ver força da Password – JQuery

força password jquery

No artigo de hoje vamos ver como fazer um verificador de força de password em JQuery, de maneira bem simples mas acima de tudo funcional. Verificar a força da password é muito útil para sites que permitem o registo do usuário e/ou actualizações de password. A maioria dos utilizadores o que quer é apressar o processo de registo, e geralmente não dão muita atenção à força da password, isto leva a uma básica falta de segurança visto que a password podem ser descobertas facilmente. Tendo isto em mente, vamos criar um verificador de força de password utilizando o JQuery, ajudando os utilizadores, de forma a terem boas combinações. HTML Em primeiro lugar criamos um formulário tendo em atenção os ID’s,… Continuar a ler

Categorias
CSS Design HTML Programação

Menu slide para mobile – JQuery

menu slide

No artigo de hoje vamos ver como é possível, de maneira bastante fácil e rápida, criar um menu estilo slide, utilizado muito nos meio mobile. Muitos já devem ter reparado que os sistemas para telemóveis usam, ou usaram, muito o menu que vamos exemplificar agora, alem de ficar esteticamente bonito e agradável é bastante fácil de ser feito. Estes menus, nativos, ficam na sua maioria (iOS7) escondidos na esquerda e após algum opção eles aparecem ‘empurrando’ o conteúdo para o lado esquerdo. Para este exemplo vamos usar CSS, HTML e claro o nosso companheiro de efeito JQuery. Resultado pretendido Como referido anteriormente o resultado que queremos é um menu escondido que ira ficar visível após alguma opção seja activo, no… Continuar a ler

Categorias
CSS HTML Programação

Checklist amigável em JQuery

checklist

Hoje, neste artigo, vamos ver como é possível transformar uma simples lista com checkboxs (checklist) numa lista mais amigável e visualmente atrativa usando apenas HTML, CSS e JQuery. Todos os que trabalham ou gostam da área de webdesign sabem que os olhos é mais de metade dá força para o utilizador dizer que o website é ou não bom, então seguindo esta lógica, podemos transformar coisas simples, em coisas mais elaboradas e visualmente mais atraentes para o utilizador. Para este artigo escolhi um exemplo simples, uma lista com checkboxs (checklist) mas tentando torna-la o mais atrativa possível, sem que fosse demorada de fazer por parte do programador ou designer. O resultado a que chegamos foi, na nossa opinião, excelente… Simples,… Continuar a ler

Categorias
CSS HTML Programação

Menu drop-down responsivo

menu drop down responsivo

Como criar um menu drop-down responsivo é uma das perguntas mais comuns que fazemos quando não encontramos nada adequados ao nosso site/blog. Muitos de nós até percebemos de html e css, mas quando chega a hora de fazer alterações ou de criar um, surge a dúvida, como deve ficar o menu drop-down em um celular ou tablet? Resolvemos assim mostrar como criar um Menu drop-down responsivo. Vamos fornecer a informação necessária e explicar como tudo deve de ser feito, usando sempre uma linguagem simples para que todos possam entender. Eu preparei uma só “Media Queries”, penso ser o suficiente para funcionar em quase todas as resoluções disponíveis para telemóveis, tablets, notebooks e desktops. /* ————————————————————– 2. MEDIA QUERIES ————————————————————– */… Continuar a ler

Categorias
CSS HTML PHP Programação

Criar chat em JQuery

Hoje vamos proceder a criação de um simples chat utilizando o JQuery, sem ser necessário utilizar uma base de dados. O chat que realizaremos, em seguida, trata-se de um exemplo simples das enumeras possibilidades existentes, utilizando o JQuery como base do projecto. A utilização de um chat, muitas vezes na pagina inicial dos websites, facilita a comunicação em tempo real, do criador do website com os seus visitantes, sendo assim, uma óptima ideia para aumentar o contacto com os seus visitantes. Hoje em dia existe “N” modelos e plugins espalhados pela internet, que prometem satisfazer o que procuramos, mas, como nem sempre é assim, não há nada como criarmos o nosso próprio modelo e personalizado ao nosso gosto, de acordo… Continuar a ler

Categorias
CSS HTML Programação

Slideshow: efeito de deslizamento de imagem com CSS e jQuery

Hoje vamos falar sobre CSS e jQuery e vamos ver como criar facilmente um simples slideshow, com um efeito de deslizamento, suave e automático de imagem usando HTML/CSS/Javascript. Veja outro slideshow muito simples, usando apenas HTML, CSS e o jQuery, com vários efeitos, muito suave, autoPlay automático, entre muitas outras funcionalidades, muito simples mas muito atrativo e funcional. Escolher a melhor apresentação de slides ou plugins jQuery galeria pode ser um problema, devido a grande quantidade que podemos encontrar na Internet. Existem diferentes tipos de controles e efeitos para escolher, e é importante analisar as opções para obter o design certo para o nosso site. Podemos incluí sliders imagem básicos, slider de conteúdo misto, sliders Galeria, sliders carrossel, rotadores de… Continuar a ler

Categorias
CSS HTML Tutoriais

HTML-CSS: Estilos diferentes para links

estilos diferentes para links

Então, como mudar estilo de sublinhado de links em uma página web? É fácil! Você só tem que definir os vários estilos CSS sem usar o ‘text-decoration’. Neste pequeno tutorial vamos ver algumas técnicas CSS para aplicação de estilos diferentes para links em uma página web. A ideia principal aqui exemplificada, é que você desabilite ‘text-decoration‘ para os links, em seguida, criar links para ter um modelo de caixa, adicionando a exibição com o valor inline-block. Depois disso, podemos mudar as bordas, preenchimento e margens. Aqui vamos mudar a borda inferior para alcançar os resultados desejados. Estilos diferentes nas bordas Na borda inferior, você pode alterar o tamanho, estilo e cor, esta pode ser solida, pontilhada ou tracejada. Mas se… Continuar a ler