quarta-feira, 18 de maio de 2022

Como fazer um link para pessoa se inscrever no seu Canal do Youtube

 O Youtube não é apenas um repositório de vídeos pessoais, mas uma versão mil vezes melhorada da televisão. Se você é um influenciador digital, maquiador, engenheiro ou exerce qualquer outra profissão, ter um canal no Youtube pode te ajudar a conseguir mais clientes e expandir sua marca.

Facebook, Instagram e Twitter são ferramentas poderosas para isso – trataremos desse assunto em um outro post – e você deve aproveitar a sua rede de contatos online para aumentar sua área de influência. Uma maneira de fazer isso é colocar links das suas redes sociais em todo canto.

Ao invés de simplesmente colocar o link do seu Canal do Youtube assim https: //www.youtube.com/channel/UCiIl2HPlF05wwF0_zUbw3dw, você pode colocar um link para as pessoas já se inscreverem assim que caírem na sua página. Quer aprender como? Siga os passos abaixo.

  1. Descubra qual é a sua ID do Youtube – o meu é assim “UCiIl2HPlF05wwF0_zUbw3dw“;
  2. Substitua sua ID neste link: http: //www.youtube.com/channel/COLOQUE-O-CODIGO-AQUI?sub_confirmation=1
  3. Seu link deve ficar assim: http://www.youtube.com/channel/ UCiIl2HPlF05wwF0_zUbw3dw?sub_confirmation=1
  4. Compartilhe com seus amigos e cole este novo endereço na descrição das suas redes sociais
  5. Lembre-se de não colocar o link todo, nem de utilizar  /channel/ ou /user/, inclua apenas sua ID.

    Para que já for inscrito no seu canal, o endereço levará à página principal, para que não for inscrito, você estará dando mais uma chance de a pessoa se tornar parte da sua comunidade.

    Gostou da dica? Já se inscreveu no meu canal?

domingo, 23 de agosto de 2020

Como alterar a cor da imagem apenas com CSS

Neste post, vou mostrar como mudar (parte da) cor da imagem com CSS puro. Isso é muito útil se você deseja criar um seletor de cores de produto em seu site. Vamos dar uma olhada

terça-feira, 10 de dezembro de 2019

CSS em Links: Colocar e tirar sublinhado, mudar cor, colocar plano de fundo e bordas

 Aprenderemos como retirar sublinhado, inserir, mudar cor do link, inserir uma cor de plano de fundo, bordas etc. Você verá como essas opções do CSS nos permitirão estilizar nossos links das mais diversas maneiras, ao gosto do desenvolvedor.

Lembrando que links também podem ser vistos como textos, textos com características especiais, mas são textos. Ou seja, também podemos aplicar as propriedades do CSS que aplicamos nos textos.

E é basicamente isso que faremos neste tutorial.
Usar diversas propriedades do CSS nos links, e veremos as inúmeras possibilidades que temos de estilizar os hiperlinks.


Sublinhado em Links: CSS text-decoration

Por padrão, os links que criamos tem um sublinhado. É tanto que, em nosso curso de HTML, todos os links textuais que criamos possuíam o sublinhado.
Obviamente, com o CSS as coisas mudam: podemos fazer o que quiser.

E faremos isso através da propriedade CSS text-decoration.

Assim, para que seus links fiquem sem sublinhado, use o código:

a {
 text-decoration: none;
}


Porém, não é bacana que os links fiquem sem estilo algum, pois irão se parecer simplesmente como o restante do texto.

Assim, um estilo CSS bastante utilizado é aquele de aparecer o sublinhado (underline) no link quando passamos o mouse em cima.
Isso é feito em CSS da seguinte maneira:

a:link {
 text-decoration: none;
}

a:hover {
 text-decoration: underline;
}


Mudando a cor de Links com CSS: color

Outra maneira bem comum que vemos de se estilizar links usando CSS, é fazendo eles mudarem de cor quando passamos o mouse por cima.

Por exemplo, para que seu link seja normalmente azul e vire vermelho que você passar o mouse por cima, utilize o seguinte código CSS:

a:link {
 color: #00F;
}

a:hover {
 color: #F00;
}


Note que estamos utilizando as propriedades do CSS que usamos em textos.
Essa flexibilidade é bem comum no CSS, o que nos permite estilizar muitas coisas, de maneiras totalmente diferentes. Tudo depende de sua criatividade.



Plano de Fundo em Links usando CSSbackground-color

Uma outra maneira interessante de estilizar links com CSS, é através da propriedade background-color, que muda a cor do plano de fundo de qualquer elemento HTML.

No caso, vamos mudar a cor de fundo somente do link.
No seguinte código de CSS, o plano de fundo é amarelo naturalmente.
Depois, ao passar o mouse em cima do link, ele se torna preto:

a:link {
 color: #00F;
 background-color: yellow;
}

a:hover {
 color: #F00;
 background-color: black;
}


Bordas em Links com CSSborder

Um maneira bem simples de estilizar links, através de coisas que já estudamos em nossos tutoriais de CSS, é o uso das bordas.

Com bordas, você pode fazer efeitos e de uma maneira simples, que destacam bem seus links.
No exemplo a seguir, a borda aparece ao redor do link, caso você passe o mouse por cima:

a:link {
 text-decoration: none;
}

a:hover {
 text-decoration: none;
 border: solid;
}


Lembrando, que no tutorial sobre bordas, você vai ver que existem diversos tipos de bordas, pode definir sua espessura, cor, se aparecem em todos os cantos, etc.

Criando botões usando CSS em Links

É possível criar botões usando simplesmente estilizando links com propriedades CSS.
O grande segredo daqui são as bordas.

Se lembrar bem, os botões, embora sejam em duas dimensões, passam a sensação de ser algo com profundidade. Isso pode ser conseguir colocando bordas com cores diferentes.

Para fazer o botão que mostramos no início deste tutorial de CSS, colocamos a borda inferior do link com uma cor mais escura. A borda superior mais clara, e as laterais entre uma e outra.
Essa diferença na cor dará o efeito de profundidade.

Quando passarmos o mouse por cima do "botão" (link estilizado), tudo fica da mesma cor, dando a impressão de botão pressionado, veja como fica o código CSS:

a:link {
 background: #B1B1B1;
 color: #FFF;
 text-decoration: none;
 font-weight: bold;
 border-width: 4px;
 border-style: solid;
 border-top-color: #DFDFDF;
 border-right-color: #666;
 border-bottom-color: #333;
 border-left-color: #858585;

}

a:hover {
 background: #B1B1B1;
 color: #FFF;
 font-weight: bold;
 border-color: #B1B1B1;
}


Para entender como simular botões e profundidade, imagine que existe uma luz acima do botão.
Assim, a borda de cima é mais clara, e a borda inferior é escura, pois está na sombra.
As bordas laterais tem uma cor entre sombra e iluminada.

Isso é bem simples de se fazer e entender atualmente, porém, antes do CSS, isso dava uma trabalheira só.
Se usava imagens para simular botões, se colocava animação e efeitos através do JavaScript e outras técnicas mais complexas.

Boa sorte!


segunda-feira, 15 de julho de 2013

HTML5 - Visão geral do HTML5

De acordo com o W3C a Web é baseada em 3 pilares:
  • Um esquema de nomes para localização de fontes de informação na Web, esse esquema chama-se URI.
  • Um Protocolo de acesso para acessar estas fontes, hoje o HTTP.
  • Uma linguagem de Hypertexto, para a fácil navegação entre as fontes de informação: o HTML.
Vamos nos focar no terceiro pilar, o HTML.
 
Hypertexto
HTML é uma abreviação de Hypertext Markup Language - Linguagem de Marcação de Hypertexto. Resumindo em uma frase: o HTML é uma linguagem para publicação de conteúdo (texto, imagem, vídeo, áudio e etc) na Web.
 
O HTML é baseado no conceito de Hipertexto. Hipertexto são conjuntos de elementos – ou nós – ligados por conexões. Estes elementos podem ser palavras, imagens, vídeos, áudio, documentos etc. Estes elementos conectados formam uma grande rede de informação. Eles não estão conectados linearmente como se fossem textos de um livro, onde um assunto é ligado ao outro seguidamente. A conexão feita em um hipertexto é algo imprevisto que permite a comunicação de dados, organizando conhecimentos e guardando informações relacionadas.
 
Para distribuir informação de uma maneira global, é necessário haver uma linguagem que seja entendida universalmente por diversos meios de acesso. O HTML se propõe a ser esta linguagem.
 
Desenvolvido originalmente por Tim Berners-Lee o HTML ganhou popularidade quando o Mosaic - browser desenvolvido por Marc Andreessen na década de 1990 - ganhou força. A partir daí, desenvolvedores e fabricantes de browsers utilizaram o HTML como base, compartilhando as mesmas convenções.
 
O começo e a interoperabilidade
Entre 1993 e 1995, o HTML ganhou as versões HTML+, HTML2.0 e HTML3.0, onde foram propostas diversas mudanças para enriquecer as possibilidades da linguagem. Contudo, até aqui o HTML ainda não era tratado como um padrão. Apenas em 1997, o grupo de trabalho do W3C responsável por manter o padrão do código, trabalhou na versão 3.2 da linguagem, fazendo com que ela fosse tratada como prática comum. Você pode ver:
Desde o começo o HTML foi criado para ser uma linguagem independente de plataformas, browsers e outros meios de acesso. Interoperabilidade significa menos custo. Você cria apenas um código HTML e este código pode ser lido por diversos meios, ao invés de versões diferentes para diversos dispositivos. Dessa forma, evitou-se que a Web fosse desenvolvida em uma base proprietária, com formatos incompatíveis e limitada.
 
Por isso o HTML foi desenvolvido para que essa barreira fosse ultrapassada, fazendo com que a informação publicada por meio deste código fosse acessível por dispositivos e outros meios com características diferentes, não importando o tamanho da tela, resolução, variação de cor. Dispositivos próprios para deficientes visuais e auditivos ou dispositivos móveis e portáteis. O HTML deve ser entendido universalmente, dando a possibilidade para a reutilização dessa informação de acordo com as limitações de cada meio de acesso.
 
WHAT Working Group
Enquanto o W3C focava suas atenções para a criação da segunda versão do XHTML, um grupo chamado Web Hypertext Application Technology Working Group ou WHATWG trabalhava em uma versão do HTML que trazia mais flexibilidade para a produção de websites e sistemas baseados na web.
 
O WHATWG (http://www.whatwg.org/) foi fundado por desenvolvedores de empresas como Mozilla, Apple e Opera em 2004. Eles não estavam felizes com o caminho que a Web tomava e nem com o rumo dado ao XHTML. Por isso, estas organizações se juntaram para escrever o que seria chamado hoje de HTML5.
 
Entre outros assuntos que o WHATWG se focava era Web Forms 2.0 que foi incluído no HTML5 e o Web Controls 1.0 que foi abandonado por enquanto.
 
A participação no grupo é livre e você pode se inscrever na lista de email para contribuir.
Por volta de 2006, o trabalho do WHATWG passou ser conhecido pelo mundo e principalmente pelo W3C - que até então trabalhavam separadamente - que reconheceu todo o trabalho do grupo. Em Outubro de 2006, Tim Berners-Lee anunciou que trabalharia juntamente com o WHATWG na produção do HTML5 em detrimento do XHTML 2. Contudo o XHTML continuaria sendo mantido paralelamente de acordo comas mudanças causadas no HTML. O grupo que estava cuidando especificamente do XHTML 2 foi descontinuado em 2009.
 
O HTML5 e suas mudanças
Quando o HTML4 foi lançado, o W3C alertou os desenvolvedores sobre algumas boas práticas que deveriam ser seguidas ao produzir códigos client-side. Desde este tempo, assuntos como a separação da estrutura do código com a formatação e princípios de acessibilidade foram trazidos para discussões e à atenção dos fabricantes e desenvolvedores.
 
Contudo, o HTML4 ainda não trazia diferencial real para a semântica do código. o HTML4 também não facilitava a manipulação dos elementos via Javascript ou CSS. Se você quisesse criar um sistema com a possibilidade de Drag'n Drop de elementos, era necessário criar um grande script, com bugs e que muitas vezes não funcionavam de acordo em todos os browsers.
 
O que é o HTML5?
O HTML5 é a nova versão do HTML4. Enquanto o WHATWG define as regras de marcação que usaremos no HTML5 e no XHTML, eles também definem APIs que formarão a base da arquitetura web. Essas APIs são conhecidas como DOM Level 0.
Um dos principais objetivos do HTML5 é facilitar a manipulação do elemento possibilitando o desenvolvedor a modificar as características dos objetos de forma não intrusiva e de maneira que seja transparente para o usuário final.
 
Ao contrário das versões anteriores, o HTML5 fornece ferramentas para a CSS e o Javascript fazerem seu trabalho da melhor maneira possível. O HTML5 permite por meio de suas APIs a manipulação das características destes elementos, de forma que o website ou a aplicação continue leve e funcional.
 
O HTML5 também cria novas tags e modifica a função de outras. As versões antigas do HTML não continham um padrão universal para a criação de seções comuns e específicas como rodapé, cabeçalho, sidebar, menus e etc. Não havia um padrão de nomenclatura de IDs, Classes ou tags. Não havia um método de capturar de maneira automática as informações localizadas nos rodapés dos websites.
 
Há outros elementos e atributos que sua função e significado foram modificados e que agora podem ser reutilizados de forma mais eficaz. Por exemplo, elementos como B ou I que foram descontinuados em versões anteriores do HTML agora assumem funções diferentes e entregam mais significado para os usuários.
O HTML5 modifica a forma de como escrevemos código e organizamos a informação na página. Seria mais semântica com menos código. Seria mais interatividade sem a necessidade de instalação de plugins e perda de performance. É a criação de código interoperável, pronto para futuros dispositivos e que facilita a reutilização da informação de diversas formas.
 
O WHATWG tem mantido o foco para manter a retrocompatibilidade. Nenhum site deverá ter de ser refeito totalmente para se adequar aos novos conceitos e regras. O HTML5 está sendo criado para que seja compatível com os browsers recentes, possibilitando a utilização das novas características imediatamente.

fonte: www.microsoftvirtualacademy.com

segunda-feira, 25 de junho de 2012

PHOTOSHOP

VAMOS TRADUZIR NOSSO PHOTOSHOP CS3?: Hoje irei mostrar como fazer a tradução do photoshop CS3 do inglês para o português, não que isso seja um problema para usuários mais experi...

Software - JavaScript


JavaScript fica ainda mais rápido no Internet Explorer 10


O Internet Explorer não é um navegador tão querido pelos desenvolvedores web. A Microsoft está tentando mudar essa história e trabalhou em inúmeras otimizações, inclusive na velocidade de renderização das páginas: a versão 10 ganhou um motor JavaScript ainda mais rápido.

A nona versão do Internet Explorer já não é mais tão problemática quanto as anteriores. No blog de desenvolvedores do Internet Explorer, a Microsoft explicou as várias mudanças que realizou no motor Chakra, responsável por processar códigos em JavaScript. As otimizações são essenciais porque, além de o motor Chakra processar páginas da web, ele é responsável por processar os elementos gráficos dos aplicativos Metro.
Internet Explorer 10 roda bem mesmo aplicativos mais pesados. Pelo menos é o que a Microsoft diz.

O objetivo foi deixar o navegador mais rápido em sites mais modernos (coisa que a concorrência já faz). Enquanto há uma década eram muito comuns páginas simples, sem muitos recursos, hoje temos várias aplicações que fazem uso intenso de AJAX e HTML5. Angry Birds e Cut The Rope, por exemplo, rodam direto do navegador e se beneficiam de aceleração por hardware para exibir animações fluidas sem depender de plugins de terceiros.

Existem duas características principais no Chakra. A primeira é tentar “adiar” tarefas de renderização de páginas. Assim, é possível processar o resto da página quando o computador do usuário estiver menos ocupado, melhorando a responsividade do navegador e evitando travamentos indesejados. A segunda é aproveitar ao máximo o hardware do usuário, utilizando todos os núcleos do processador e instruções específicas. No exemplo, eles citam as extensões SSE2, que foram introduzidas no Pentium 4 em 2000. Se determinadas instruções não estiverem disponíveis, o trabalho é feito via software, mas de maneira mais lenta.
Funcionamento do motor Chakra
A Microsoft também fez melhorias no garbage collector (ou coletor de lixo), responsável por limpar periodicamente elementos da página que não estão sendo mais utilizados, reduzindo o consumo de memória RAM. Isso é necessário porque os programas em JavaScript não removem explicitamente os elementos antigos. Se o garbage collector não existisse, os navegadores consumiriam ainda mais memória. E se o garbage collector for lento demais, você perceberá vários engasgos nas animações das páginas.

O Tecnoblog fez alguns testes com o benchmark SunSpider 0.9.1, que executa vários códigos JavaScript no navegador, e os resultados foram bem satisfatórios. Em uma máquina com Windows 8 Release Preview e processador Intel Core i3-390M, o Chrome 21 demorou 251,7 ms para processar tudo. O Firefox 15 fez o trabalho em 258,8 ms e o Internet Explorer 10 foi o melhor, com apenas 192,4 ms (desktop) e 205,7 ms (Metro).
Por Paulo Higa

quinta-feira, 3 de maio de 2012

DUVIDAS PARA UTILIZAR O PHP?

O que você precisa?
Se o seu servidor suporta PHP você não precisa fazer nada.

Basta criar alguns arquivos. Php no seu diretório web eo servidor irá analisá-los para você. Porque é livre, a maioria dos hospedeiros web oferecem suporte PHP.

No entanto, se o servidor não suporta PHP, você deve instalar o PHP.

Aqui está um link para um tutorial bom do PHP.net sobre como instalar o PHP5: http://www.php.net/manual/en/install.php

download PHPBaixar PHP gratuitamente aqui: http://www.php.net/downloads.php

Baixar Banco de Dados MySQLBaixar MySQL gratuitamente aqui: http://www.mysql.com/downloads/

Baixar Apache ServerBaixar Apache gratuitamente aqui: http://httpd.apache.org/download.cgi

Como fazer um link para pessoa se inscrever no seu Canal do Youtube

  O Youtube não é apenas um repositório de vídeos pessoais, mas uma versão mil vezes melhorada da televisão. Se você é um influenciador digi...