HTML

Categoria | 8 posts usam esta categoria.

Descrição: O básico dos básicos na internet, não o conteúdo mais sim o assunto :).

Linha Framework – Desenvolva Front-end Com Mais Qualidade!

Criado por Mateus Souza em 27 de abril de 2010 às 11:02

Bom dia, boa tarde, boa noite…depois de muito tempo sem atividade no blog venho trazer uma novidade para vocês. Alguns já devem saber o que é, não vou ficar de papo furado então vamos direto a novidade:

Linha Framework

Trata-se de um framework (meio obvio não?) para desenvolvimento front-end – HTML, CSS e Javascript. Se você já usou algum grid CSS, como o 960.gs ou Blueprint por exemplo, irá se familiarizar facilmente com este framework, mas o Linha Framework é mais completo.

É mais completo pois não fica somente no grid CSS, temos o grid template (PSD), marcação HTML e CSS em português, sem falar do plugins para jQuery em português támbem. Acredite, desenvolver com um framework poupa e muito o seu tempo. Passando um pouco para a prática, você poderá desenvolver as três camadas (HTML, CSS e JS) de uma só vez, de forma fácil e rápida.

Como colocar favicon em seu website

Criado por Mateus Souza em 13 de outubro de 2009 às 15:39

Já postei este tutorial uma vez (aqui) mais este estava com alguns “bugs” e era restrito somente ao wordpress, então hoje decidi fazer este post sobre favicons, beneficios e como inserir favicons que funcione no IE(Internet Explorer) e em todos ou outros navegadores vai ser bem completinho:

O que é favicon?

Favicon nada mais é do que aquelas pequenas imagens que aparecem no navegador ao lado do endereço do site. Mais para maiores e melhores detalhes veja a descrição do Winkipédia:

Favicons (palavra derivada de favorite (favorito) e icon (ícone)) são pequenas imagens no formato *.ico com de cerca de 16×16 pixels que ficam guardados em um site para visualização pelo navegador. Em alguns navegadores como Internet Explorer até a versão 6, só exibem os favicons quando um site é adicionado aos favoritos. Neste caso, apenas no menu correspondente aos favoritos pode-se encontrar a imagem. Em outros navegadores como Firefox, Opera e Internet Explorer 7⁽⁺⁾, os favicons podem ser encontrados também nas abas e na barra de endereço.

Os favicons também tem teor de acessibilidade pois ajudam um usuário comum a identificar uma página quando ela está exibida em uma lista ou em uma barra de abas. Visando isto, muitos favicons são imagens simplificadas do logotipo da marca que representam.

Na ausência de um favicon, os navegadores exibem seu próprio ícone ou um ícone padrão como uma folha em branco.

Beneficios

Alguns beneficios que podemos conquistar com o uso de uma favicon são os listados abaixo:

É otimo para marcar seu site tornando a localização deste mais fácil e de brinde tem até um destaque a mais ;
Seu site vai ganhar uma aparência mais profissional e exclusiva que pode levar a mais links para seu site melhorando a parte do SEO (aqui já entra PR).

Preparando o terreno

Como tudo o que vamos fazer tem um requisito este não deixa de ser diferente. Para este processo precisamo de uma imagem no formato .ico com 16×16 pixels que pode ser feita usando o photoshop ou fireworks ou o seu programa de preferência. Para o processo que explicarei agora recomendo que faça a imagem em um formato grande uns 100×100 pixels deve ser o suficiente.

Menu Com Efeito Hover Perfeito Em Todos Os Navegadores!!!

Criado por Mateus Souza em 28 de fevereiro de 2009 às 14:20

Bom hoje eu vou postar um dos meu “macetes” que eu uso pra me ajudar na produção de sites…é o famoso “don’t repeat yourself”:

hover Menu Com Efeito Hover Perfeito Em Todos Os Navegadores!!!

Demonstração / Download

Primeiro vamos ao conceito.Seria um modelo já produzido para agilizar o seu trabalho como webdesigner, por exemplo, você ta la ganhando o pão de cada dia e se depara com um menu como este…não é mais facil usar o famoso CTRL+C e CTRL+V? pois bem, este é o conceito…e acredite, sua produtividade vai aumetar e muito...chega de fica perdendo tempo escreve linhas e linhas de código, torrando a cabeça, ouvindo o chefe gritar no seu ouvido porque o job ta atrasado…ta bom, eu apelei mais é essa a intenção.
É claro que cada menu é diferente um do outro e tals, enfim…o objetivo é ter em mãos um modelo propriamente feito, compatível com todos os navegadores, ai é só fazer o jogo do copiar e colar, um pouquinho de alteração aqui…outro ali…e voala…menu certinho e produzido pelo menos na metade do tempo. Já deu pra entender né…

Como não te muito o que falar vamos logo ao bendito menu em css:

HTML:

<ul class="menu">
<li><a href="">Home</a></li>

<li><a href="">Contato</a></li>
<li><a href="">Serviços</a></li>
<li><a href="">Musica</a></li>
<li><a href="">Teste</a></li>
</ul>

O codigo HTML é só isso mesmo, uma lista simples, nada demais…

CSS:

ul.menu li {
float:left;
background: #333;
padding:0px;
line-height: 30px;
border-style: solid;
border-width: 1px;
border-color: #404040 #1a1a1a #1a1a1a #505050;
}
ul.menu li a{
display: block;
padding: 5px 30px;
color: #fff;
font-size:17px;
font-family:Arial,Helvetica,sans-serif;
text-decoration: none;
font-weight: bold;
}
ul.menu li a:hover, ul.menu li:hover{
color: #fff;
background: #4698ca;
border-top-color: #5db1e0 !important;
border-left-color: #5db1e0;
}

Se você fizer o download dos arquivos verá que quase todas as linhas de códigos do CSS (algumas seria idiotisse comentar) estão comentadas explicando o funcionamento de cada uma.

Até a próxima.

Postado em CSS, Dicas, HTML, Webdesigner.

Desenvolvimento Web – 23 Cheat Sheets de Grande Ajuda

Criado por Mateus Souza em 19 de janeiro de 2009 às 16:30

Como esse é o meu primeiro post do ano…vamos postar algo eficiente que ajude a todos
Pra quem não sabe…teve algumas pessoas que resolveram criar PDFs ou Imagens contendo uma ajuda, um help pra quem esqueceu os codigos de CSS por exemplo.
Esses arquivos receberam o nome de Cheat Sheets (num sei o que significa e nem quero saber )

Tem de tudo…HTML/XHTML, CSS, JavaScript (incluindo MooTools e jQuery), e mais alguns.Espero que ajude a todos:

HTML/XHTML

1. HTML Help Sheet

Apostila Completa de HTML – Ótimo Para Iniciantes

Criado por Mateus Souza em 25 de setembro de 2008 às 11:37

Uma apostilha ou pode ser chamado de curso de HTML também, para quem ta começando nessa área.Nessa apostilha tem muita coisa pra você aprender mais lembrando num adianta lê e ficar só por isso mesmo, busque fazer tutorias encontrados em sites como o meu né , procure entender o código, enfim se familiarize com o código.

Apostila Completa de HTML

Download

Descrição detalhada: Veja quantos tópicos tem o material:

1. Introdução
1.1. Internet
1.2. Intranet
1.3. WWW (World Wide Web)
1.4. Web
1.5. Hipertexto
1.6. Links ou Hyperlinks
1.7. Home Page
1.8. Site
1.9. Browsers (Navegadores da Web)
1.10. Protocolo
1.11. Protocolo HTTP (HyperText Transfer Protocol)
1.12. Protocolo FTP (File Transfer Protocol)
1.12.1. FTP Anônimo
1.13. URL (Uniform Resource Locator)
1.13.1. URL Absoluto
1.13.2. URL Relativo
1.13.3. Endereço
1.13.4. Entendendo uma URL
1.14. ISP (Internet Service Provider)
1.14.1. Provedores
1.14.2. Seu Site na Grande Rede
1.14.3. Login
1.15. Resolução
2. HTML (HyperText Markup Language)
2.1. TAGs
2.2. Estrutura Básica
2.2.1. Início e Fim do Documento
2.2.2. Definições Lógicas sobre o Documento
2.2.3. Título da Página
2.2.4. Conteúdo da Página
2.3. TAG com Atributos
3. Estrutura da Página
3.1. HTML <html>…</html>
3.2. HEAD <head>…</head>
3.2.1. Elementos presentes em HEAD
TITLE <title>…</title>
SCRIPT <script>…</script>
META <meta>
3.3. BODY <body>…</body>
Atributos de BODY
4. META TAGs <meta>
5. Caracteres Especiais e Acentuação
5.1. Por que usar estas formatações ?
6. Cores Através de Valores Hexadecimais
7. Comentários
8. Controles de Formatação
8.1. Títulos / Subtítulos
8.2. Controles “Físicos”de Formatação de Texto
8.3. Controles de Fontes
8.3.1. FONT <font>…</font>
8.3.2. BASEFONT <basefont>
8.4. Formatação de Parágrafos
8.5. Quebra de Linha
8.6. O TAG Blockquote <blockquote>…</blockquote>
8.7. O TAG DIV <div>…</div>
8.8. O TAG PRE <pre>…</pre>
8.9. O TAG CENTER <center>…</center>
8.10. O TAG NOBR <nobr>…</nobr>
9. Listas
9.1. Listas Ordenadas
9.2. Elementos LI <li>. . . </li>
9.3. Listas Não Ordenadas
9.4. Listas de Definição
10. Links
10.1. Links para dentro da própria página
10.2. Para outras páginas de um mesmo Site
10.3. Links para outros Sites
10.4. Link especial: “mailto”
11. Imagens
12. Formatos de Imagens
12.1. Usando o GIF (Graphics Interchange Format)
12.2. Usando o JPEG (Joint Photographic Experts Group)
12.3. Sobre o PNG (Portable Networ Graphics)
12.4. Imagens no Browser
13. Mapas Sensitivos
13.1. Definição
13.2. Descrição
15. Tabelas
15. Espaçamento (Netscape Navigator)
16. Marquee (Microsoft Internet Explorer)
17. Formulários
17.1. Envio de Arquivos
17.2. FORM FIELD – Exemplos
17.2.1. One-Line Text Box
17.2.2. Scolling Text Box
17.2.3. Check Box
17.2.4. Radio Button
17.2.5. Drop-Down Menu
17.2.6. Push Button
18. Som
18.1. Controles de Som do Microsoft Internet Explorer
BGSOUND <bgsound> (Microsoft Internet Explorer)
Atributos de BGSOUND
18.2. Controles de Som no Netscape Navigator
19. Frames
19.1. Definição
19.2. Documentos de Layout e Documentos de Conteúdo
19.2.1. Documentos de Layout 19.2.2. Documentos de Conteúdo
19.3. TAGs e Atributos Básicos
19.4. Frames Sobrepostas Diretamente e Indiretamente
19.5. Links em Frame Alvo
20. SSI (Server Side Include)
21. Etapas para Criação de um Site
21.1. Planejamento
21.2. Coleta de Material
21.3. Direção Editorial
21.4. Design
21.5. Programação
21.6. Divulgação
21.7. Manutenção
22. DHTML (HTML Dinâmico)
23. XML (Extensible Markup Language)
24. Editores de HTML
25. WebMails
26. Definições
26.1. Programas CGI (Commom Gateway Interface)
26.2. Client Side
26.3. ASP (Active Server Pages)
26.4. PHP (Personal Home Page)
26.5. Criptografia
26.6. Plug-In
26.7. Applet
26.8. Servlet
26.9. Cookie
26.10. Download
26.11. Upload
26.12. RGB
26.13. CMYK

Download

Postado em HTML.

Image Fade – Tutorial Jquery

Criado por Mateus Souza em 23 de setembro de 2008 às 20:14

Vamos recriar o efeito usado no site Dragon Interactive, vai ficar igualzinho, até em inglês:),não vou entrar em detalhes só vou mostrar como funciona e o código, pois acho que você já deve estar cansado de alguns processos utilizados em tutoriais anteriores e já deve saber como fazer.Mas se você é novo aqui no site e tal, veja meus tutoriais mais antigos é bem fácil, basta clicar aqui.

Demostração:
Aqui

HTML:

<ul id="navigation">
    <li class="highlight"><a href="#" class="home"><span>Home</span></a></li>
    <li class="highlight"><a href="#" class="services"><span>Services</span></a></li>
    <li class="highlight"><a href="#" class="portfolio"><span>Portfolio</span></a></li>
    <li class="highlight"><a href="#" class="about"><span>About</span></a></li>
    <li class="highlight"><a href="#" class="contact"><span>Contact</span></a></li>
</ul>

CSS

#navigation {
  list-style: none;
}

#navigation li {
  float: left;
}

#navigation a * {
  display: none;
}

#navigation a,
#navigation a .hover {
  height: 70px;
	position: relative;
	display: block;
	background: url(images/dragon-sprite.jpg) 0 0 no-repeat;
}

/* individual navigation items */
#navigation a.home {
  background-position: 0 0;
  width: 102px;
}

#navigation .highlight a.home:hover,
#navigation a.home .hover {
  background-position: 0 -280px;
  width: 102px;
}

#navigation a.services {
  background-position: -102px -140px;
  width: 115px;
}

#navigation .highlight a.services:hover,
#navigation a.services .hover {
  background-position: -102px -280px;
}

#navigation a.portfolio {
  background-position: -217px 0;
  width: 120px;
}

#navigation .highlight a.portfolio:hover,
#navigation a.portfolio .hover {
  background-position: -218px -280px;
}

#navigation a.about {
  background-position: -337px 0;
  width: 100px;
}

#navigation .highlight a.about:hover,
#navigation a.about .hover {
  background-position: -339px -280px;
}

#navigation a.contact {
  background-position: -437px 0;
  width: 115px;
}

#navigation .highlight a.contact:hover,
#navigation a.contact .hover {
  background-position: -440px -280px;
}

jQuery

 $(function () {
        if ($.browser.msie && $.browser.version < 7) return;

        $('#navigation li')
            .removeClass('highlight')
            .find('a')
            .append('<span class="hover" />').each(function () {
                    var $span = $('> span.hover', this).css('opacity', 0);
                    $(this).hover(function () {
                        // on hover
                        $span.stop().fadeTo(500, 1);
                    }, function () {
                        // off hover
                        $span.stop().fadeTo(500, 0);
                    });
                });

    });

Se você quiser ver o vídeo do cara que recrio esse efeito – pois não foi eu – veja logo abaixo:

Ver video (Versão em flash)

IE6 – Se você usa o IE6 é recomendável ver este video (Versão em flash)

Qualquer dúvida posta um comentário.

Postado em CSS, HTML, Javascript, Tutoriais, jQuery.

Slider Gallery – Tutorial JQuery

Criado por Mateus Souza em 1 de setembro de 2008 às 12:36

Estava navegando pelo site do Mac e gostei do menu em slider(Slider Gallery) e resolvi pesquisar e fazer um tutorial de como fazer esse efeito.

Demonstração / Download dos Arquivos

Vamos ao Tutorial:

Antes de tudo vamos aos arquivos necessários:
Jquery UI – este é como se fosse uma versão do Jquery voltado para designers, pois possui interface gráfica.

jquery.dimensions.js
ui.mouse.js
ui.slider.js

Baixe aqui o pack com todos os arquivos

Etapa 1 – CSS

Vamos colocar o css no html mesmo.cole antes da tag </head>.Este é o codigo:
leia mais »

Postado em CSS, HTML, Javascript, Tutoriais, jQuery.

O que é o CSS?

Criado por Mateus Souza em 28 de agosto de 2008 às 12:14

Quem começa agora na concepção de páginas WEB, depara-se muitas vezes com a sigla CSS (Cascading Style Sheets) que em português significa folhas de estilo em cascata. Basicamente este termo significa que é um conjunto de regras de formatação ou de estilos a serem publicadas aos elementos estruturais de uma página WEB.A finalidade do CSS prende-se com o facto de retirar ao HTML todo o tipo de declarações que visem a formatação ou seja, o HTML irá contribuir para a estruturação e o CSS para a formatação.
Assim, as vantagens da utilização do CSS serão:

Controle total sobre a formatação de um site disponível apenas num arquivo;
Maior facilidade na manutenção do site bem como na sua performance;
Redução do tempo de carga do site;
Adequação simplificada aos critérios de acessibilidade e usuabilidade;
Aumento da portabilidade dos documentos WEB;

As CSS estão de acordo com as práticas recomenadas pelo W3C (World Wide Web Consortium) para projectos WEB. Este organismo normalizador aponta neste momento para a elaboração de documentos WEB acessíveis, usáveis e portáteis fazendo assim que o CSS seja a solução para a obtenção destas 3 variáveis.

Para iniciar a programação em CSS é necessário um conheciméno prévio (básico) de HTML (Hyper Text Markup Language). Se ainda não está familiarizado com esta técnica, então visite este site que possuirá toda a informação necessária para aprender a usar HTML.

Para utilizar o CSS recomendo a visita deste site onde disponibiliza através de um tutorial as regras correctas (sintaxe) para um bom uso do CSS.

Por fim resta apenas dizer que ainda existem algumas limitações (temporárias) na utilização do CSS, sendo elas a incapacidade de alguns navegadores (Browsers) em dar suporte às especificações CSS definidas pela W3C. Aos poucos os fabricantes destes mesmos Browsers vão-se adequando às novas normas da W3C.

Para quem gosta de assistir a uma aulas em vídeo, deixo aqui um bom tutorial sobre CSS em Inglês:

Aqui vão alguns links espectaculares sobre sites de CSS:

http://www.cssbeauty.com/gallery/
http://www.webdesignerwall.com/
http://www.css-website.com/
http://www.csselite.com/

Bons Sites!

Até a proxima

Postado em CSS, HTML.

Ir para homeMateus Souza – Webdesigner