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

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

Categorias
CSS HTML Tutoriais

HTML 5: elementos figure e figcaption

Por vezes necessitamos de publicar uma imagem ou gráfico seguida por uma pequena legenda. Antes da HTML 5 não tinha uma maneira de aplicar semanticamente esse tipo de conteúdo na marcação HTML, e tínhamos que nos valer de nomes de classes e CSS. Mas agora é possível fazer uma marcação semântica para esta finalidade com os elementos e . O elemento marca um bloco de conteúdo independente que normalmente contém imagens, gráficos, diagramas ou ilustrações que fazem referência ao conteúdo principal do documento. Enquanto o elemento exibe uma legenda para o elemento figure. Este novo elemento age como subtítulo opcional ou legenda para qualquer conteúdo contido dentro do elemento . Vamos examinar estes elementos mais detalhadamente neste artigo. O elemento… Continuar a ler

Categorias
CSS HTML Programação

Usar a Google Font API na construção de sites

O Google lançou em 2010 a Google Font API e o Google Font Directory para darem suporte às fontes na construção de websites. Apartir dessa data passamos a poder escolher uma fonte dentre das que estão disponíveis no diretório e colocá-la no HTML/CSS do website, e ela funcionará na maioria dos navegadores (browsers). Assim passou a ser possível o uso de fontes em qualquer página web independentemente do navegador que é usado. Veja algumas vantagens: Economia de Banda; Fácil de usar; Suporte para estilos; Não é necessária a conversão para o formato suportado pelo IE; Fontes Open Source Neste artigo vamos ver como usar a Google Font API. É bem simples, para fazermos um teste vamos criar uma pagina HTML… Continuar a ler

Categorias
CSS Tutoriais

Como esticar imagem de fundo com CSS

Há algumas plugins jQuery que ajudam a esticar imagem de fundo no corpo ou outros elementos HTML. Não é uma tarefa difícil fazer que uma imagem de fundo cobrir um elemento HTML com a ajuda de JavaScript. Mas em CSS? É possível esticar a imagem usando apenas CSS? Felizmente, é possível! Para que a imagem seja alterada em função do tamanho da janela (viewport), ela deve ter uma regra de CSS, a propriedade «background» que define as características (os valores na regra CSS) do fundo dos elementos HTML. As propriedades «background» são as listadas abaixo: background-color – cor do fundo; background-image – imagem de fundo; background-repeat – maneira como a imagem de fundo é posicionada; background-attachment – se a imagem… Continuar a ler

Categorias
CSS HTML

O que é Responsive Web Design?

Responsive Web Design – Há uns anos atrás existia uma diferença clara entre os ambientes desktop e mobile. Com a introdução de smartphones, tablets e novas tecnologias que acedem à Web, os Web Designers depararam-se com o desafio de conceber para cada vez mais resoluções e dispositivos. Seria de enlouquecer desenhar múltiplas versões de um mesmo site que suprissem cada uma dessas variações de tamanho do ecrã e cada uma das resoluções de tela disponíveis no mercado. Nos dias que correm, todos querem uma versão mobile do seu website. Afinal de contas, os smartphones, tablets, etc, vieram para ficar. Iremos estar sempre a desenvolver os mesmos websites para mais uma mão cheia de dispositivos ou inclusivamente a re-desenhar websites mobile… Continuar a ler