Web, .NET, Apps

Posts Tagged "css3"

Como criar a estrutura de um site responsivo com bootstrap

Como criar a estrutura de um site responsivo com bootstrap

By on maio 10, 2015 in Bootstrap, JQuery | 6.792 comments

Hoje é dia 10 de maio de 2015, mas provavelmente a partir de 21 de abril de 2015, o Google fez uma alteração no algoritmo do seu robô de busca capaz de mudar completamente o cenário de sua empresa no mundo dos negócios. Muitas irão cair nas buscas e perder clientes, enquanto que outras, mais preparadas, ou por pura sorte, ganham posições no ranking sem mesmo saber o porquê. Desesperador ou não. O Google explica que agora os sites responsivos terão a preferência entre as primeiras posições. Um site é responsivo quando sua estrutura continua sendo amigável mesmo acessando de outros dispositivos que não sejam desktop, como por exemplo smartphones. No video a seguir, você verá como funciona a criação da estrutura de um site responsivo, aproveitando toda a interface do Visual Studio 2013, bem como bibliotecas de código importantíssimas, como o bootstrap. Saiba agora como tornar o seu site mais rápido e acessível para todas as plataformas no primeiro video desta série! Se gostou do video, veja agora como criar o cabeçalho e o rodapé desta página com o bootstrap, na segunda parte dessa série de...

Read More
Bootswatch II – Implementando o estilo

Bootswatch II – Implementando o estilo

By on abr 21, 2014 in Bootstrap, Bootswatch, CSS3, HTML5 | 12.719 comments

Abra o projeto do Bootstrap feito nos artigos anteriores. O nome do Projeto do Visual Studio 2013 é PedroDesenvolve.Bootstrap.UI.WEB. Vamos relembrar como está o mesmo até o momento. Compile a Solution: O nosso Bootstrap implementado é o padrão, ou seja, ainda não há nenhum estilo aplicado:   Vamos implementar o tema United do Bootswatch. Vá até o site http://bootswatch.com/, desça a barra de rolagem e encontre o tema “United”. Clique no menu “Download” e no menu dropdown que aparece, identifique a opção bootstrap.min.css. Clique com o botão direito do mouse nessa opção e clique em “Salvar Link Como…”:   Identifique sua pasta do projeto. Em “Content”, crie uma pasta chamada “united” e salve dentro da mesma: Se você perceber na sua Solution Explorer no Visual Studio, pode não estar visível a pasta united dentro da pasta Content. Vamos adicionar essa pasta ao nosso projeto. Clique com o botão direito do mouse sobre a pasta Content e escolha a opção “Open Folder in File Explorer”. Arraste a pasta united para Content:   Veja como deve estar: Agora que temos a biblioteca do tema importada, vamos implementá-la no código. Arraste o arquivo united/bootstrap.min.css para baixo da linha do último arquivo css do arquivo, para que fique dessa forma:   Se rodarmos a aplicação agora, perceberemos que nada muda, ou seja, a aparência está como no início. Mas o que está faltando? Falta a folha de estilos do Bootswatch! Vamos pegar esse arquivo rapidamente e chamá-lo antes do bootstrap que acabamos de inserir no código. Volte ao site do Bootswatch na opção do tema “united” e clique em “Preview”. Exiba o código-fonte da página e clique no link do Bootswatch: Como da vez anterior, salve o Bootswatch no seu projeto, repetindo os procedimentos anteriores: Arraste o arquivo salvo para dentro da pasta Content:   Importe o bootswatch para o código-fonte para que fique desta forma: Mesmo se testarmos agora, não acontecerá nada como resultado. E por quê? Porque não importamos o javascript responsavel pelo controle do bootswatch. Vá até o código-fonte onde você pegou o arquivo css e desça a barra de rolagem até embaixo. Você deverá copiar o arquivo bootswatch.js para dentro do seu projeto, mais precisamente na pasta Scripts: Adicione o...

Read More
Bootswatch I – Conhecendo os temas para Bootstrap

Bootswatch I – Conhecendo os temas para Bootstrap

By on abr 20, 2014 in Bootstrap, Bootswatch, CSS3, HTML5 | 8.353 comments

Vimos e implementamos nos artigos anteriores a biblioteca ágil para desenvolvimento de front-end chamada Bootstrap. Com ela, podemos fazer layouts rápidos, ricos e bonitos, além de usufruir de uma boa performance. O bootswatch é uma biblioteca auxiliar ao bootstrap. Ambos estão perfeitamente ligados um ao outro. Foram desenvolvidas vários temas que podemos aplicar aos bootstraps do layout web. É isso que veremos aqui. Primeiramente, acesse o site do Bootswatch: http://bootswatch.com/. Use a barra de rolagem de seu navegador e desça um pouco. Você verá os temas disponíveis para o bootstrap, com as opções de visualização e download. Dê uma olhada nos temas disponíveis para utilizarmos posteriormente:   No exemplo que fizemos com o Bootstrap, iremos implementar o Bootswatch United, que é um tema alaranjado. Você pode escolher o que mais lhe agradar também. Na sessão do United, clique no botão azul “Preview” para analisar o que o bootswatch pode fazer em questão de layout. Veja as implementações para o tema United: United Navbar: United Buttons: United Tipografia:   United Tables:   United Forms: United Estruturas de Navegação: United Indicators: United Progress Bars: United Containers: United Dialogs: Agora que vimos as implementações disponíveis para este tema, incluiremos em nosso projeto no próximo...

Read More
Bootstrap III – Implementando o Navbar

Bootstrap III – Implementando o Navbar

By on abr 9, 2014 in Bootstrap, CSS3, HTML5 | 9.658 comments

Agora que temos a estrutura do HTML5 pronta juntamente com a biblioteca bootstrap instalada, é hora de implementarmos em nosso projeto. Abra o projeto SuaEmpresa.Bootstrap.UI.WEB, que no meu caso é PedroDesenvolve.Bootstrap.UI.WEB. Abra em seu navegador (de preferência, mas não obrigatoriamente, o Google Chroome) o site do Bootstrap: http://getbootstrap.com/. Ao entrar no site, clique na opção Components:   O download não precisa mais ser feito pelo link do site, já que no artigo anterior, fizemos através do Manager NuGetPackage do Visual Studio. Mas para quem usa o Dreamweaver, o Notepadd++ ou outro editor de códigos HTML, pode fazer pelo botão Download Bootstrap. Será baixado um zip com os scripts, configurações e folhas de estilo da biblioteca e você deverá apenas adaptá-los em seu projeto. No canto inferior direito da tela de componentes, escolha Navbar:   Veja o exemplo do componente e copie todo o código da tag nav:   Cole o código dentro das tags header, substituindo seu atual conteúdo:   Caso o código tenha sido colado em desordem, utilize a combinação de teclas Ctrl + K + D para identá-lo:   Agora, vamos rodar o projeto. Pressione a tecla F5 para ver os resultados:   Não se assuste com o resultado. O projeto está desconfigurado, pois faltam alguns elementos a serem declarados. Mas quais? Lembra-se dos arquivos que foram baixados da biblioteca Bootstrap? Pois os mesmos não foram chamados no documento. Vamos fazer isso agora. Atente-se à Solution Explorer. Arraste para dentro do tag head e abaixo da tag title o arquivo: <link href=”Content/bootstrap.min.css” rel=”stylesheet” />   É boa prática chamarmos sempre a versão min de qualquer tipo de biblioteca, desde que a mesma tenha disponível. Isso faz com que a página renderize com mais velocidade. Pressione a tecla F5 novamente e veja o novo resultado com os estilos aplicados:   Perceba que os estilos estão organizados agora, mas se clicarmos no menu dropdown, nada acontece.   Lembra de quando o Manager NuGet Package baixou a biblioteca e que tinha como dependência o JQuery? Pois é exatamente essa biblioteca que falta ser chamada. Arraste a versão min para uma linha antes de terminar a tag body, não esquecendo também do script do bootstrap:   Usualmente a chave para o funcionamento é...

Read More
Bootstrap II – Baixando a biblioteca com o Manage NuGet Package

Bootstrap II – Baixando a biblioteca com o Manage NuGet Package

By on abr 9, 2014 in Bootstrap, CSS3, HTML5 | 9.344 comments

Agora que temos a estrutura HTML5 pronta, vamos implementar a biblioteca propriamente dita. Para isso, usaremos o gerenciador de pacotes provindo do próprio Visual Studio 2013. Abra o projeto do artigo anterior: SuaEmpresa.Bootstrap.UI.WEB, que no meu caso está como PedroDesenvolve.Bootstrap.UI.WEB. Se o arquivo cadastrar.html não estiver aberto, abra-o. Na Solution Explorer, clique com o botão direito do mouse sobre o Projeto e, no menu que aparecer, escolha a opção Manage NuGet Packages, assim como na figura:     Na janela do gerenciador de pacotes que aparece, ao lado esquerdo, escolha a opção Online e em seguida a opção All, para abranger a busca. Ao lado direito, clique na caixa de pesquisa e digite “bootstrap”. Você escolherá a segunda opção e clicará em Install, como mostra a figura:   Se você estiver usando uma outra versão do Visual Studio, pode ser que dê um erro de dependência. Isto porque, para que o bootstrap funcione, deveremos ter a biblioteca jquery importada. Caso não tenha, repita o mesmo passo da instalação do bootstrap com o jquery. No caso do Visual Studio 2013, a biblioteca jquery vem junto e já com uma versão atualizada. Feche o Manage NuGet Package e dê uma olhada na Solution Explorer. Para um olhar mais amplo, expanda as pastas Content, fonts e Scripts. São criadas as pastas Content, fonts e Scripts, além do arquivo de configuração de pacotes, o packages.config. Content: Nesta pasta estão os arquivos de folha de estilo, os .css. Script: contém os scripts da biblioteca e de outras dependências; fonts: Contém as imagens que servem como ícone. packages.config: Contém as informações sobre os pacotes baixados até o momento. Com o bootstrap importado para o projeto, o próximo passo será implementá-lo no mesmo....

Read More