Efeitos CSS 3, Javascript

Olá,  gosto muito de efeitos e animações nas paginas. E também gosto muito de procurar efeitos na internet, então resolvi divulgar aqui um site muito interessante, onde varias pessoas podem escrever os códigos e publica-los neste site.

thecodeplayer

Com o Code Player, você pode aprender e ver como funciona a programação de cada desenvolvimento passo a passo, e tudo de graça e tem muitos projetos interessantes. Em sua página do facebook do site e apresentados muitos trabalhos feitos com a plataforma, e você também pode criar os seus próprios trabalhos e compartilha-los.

Tweet

Como saber qual é as coordenadas de algum lugar ?

Olá, hoje eu irei ensinar como descobrir a longitude e latitude de algum lugar, isto é pode ser de sua casa, de um shopping,  de uma rua, de uma loja, ou de qualquer ponto no mapa.
Para falar a verdade isto e bem simples de descobrir. E há mais de uma forma.
A primeira forma e é a mais fácil e usando um site que utiliza API do Google Maps para mostrar as coordenadas de determinado lugar, basta digitar algumas particularidades do local, assim como o nome da rua, o nome da cidade, ou algo que especifique-o.
O nome do site é:
pagesperso-orange

Você também pode usar o Google Maps mesmo...
Porém e muito mais  trabalhoso

Quando você pesquisa algo no maps.google.com e clica para "Compartilhar" o link você tem a opção de usar um iframe ... neste iframe esta contido as coordenadas do seu ponto...
Veja o exemplo:


Link Normal :

https://www.google.com/maps/place/Shopping+Campo+Grande/@
-20.4585355,
-54.5873785,
15z/data=!4m2!3m1!1s0x9486e8961e3b0519:0xb20d7d1051b961fb

Frame Normal :

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d14952.648285499277!2d
-54.58737845340602!
-20.458535477226054!
2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9486e8961e3b0519%3A0xb20d7d1051b961fb!2sShopping+Campo+Grande!5e0!3m2!1sen!2s!4v1394823529372" width="600" height="450" frameborder="0" style="border:0"></iframe>

Tweet

Conflito jQuery | Como resolver? !

Texto Original: quebrandoacabeca.

Bom em um dos meus últimos jobs, estava com um problema em uma página pois estava usando mais de dois plugins jQuery e estava dando conflito de jQuery, o porque exatamente eu não sei, mais quando fui adicionar o terceiro plugin, ae parou de funcionar tudo mesmo, hahaha.Geralmente os plugins vem com chamadas usando o ‘$‘ e quando eu preciso adicionar mais de um plugin, geralmente uso a chamada ‘jQuery‘ ao invés do ‘$‘ como mencionado acima. Na maioria das vezes fica algo mais ou menos assim (usando o $).

<script type="text/javascript">
$(document).ready(function(){
//aqui vai a função
})</script>

Usando a chamada ‘jQuery‘ fica mais ou menos assim.

<script type="textjavascript">
jQuery(document).ready(function(){
//aqui vai a função
})</script>

Com essa diferenciação, muitas vezes ja resolvemos alguns problemas de conflito de jQuery, mas e para adicionar mais plugins? Então, podemos criar uma variavel e com isso, incluir quantos plugins quiser. Ficaria algo assim.

Conflito de jQuery – Como resolver

<script type="text/javascript"> 
var $j = jQuery.noConflict();
// Use jQuery com a variavel
$j(...)$j(document).ready(function(){
//aqui vai a função
})
</script>

Crie quantas variaveis forem necessárias para seu projeto e evite um provável conflito de jQuery, e não se esqueça de chamar somente uma vez e uma única versão de jQuery, já tive diversos problemas com isso, pois adicionei mais de uma versão e isso me causou mais conflito de jQuery, então quando o plugin não roda como deveria uma das primeiras coisas que eu verifico é se estou usando somente uma versão do jQuery e chamando apenas uma vez.É isso, espero ter ajudado vocês a resolver um conflito de jQuery com essas dicas.

Texto Original: quebrandoacabeca.

Tweet

Como exibir ou não um widget no blogger? Saiba como

Site original: tur-quesa

Você já quis ocultar um Gadget em determinada postagem ou página do seu blog? isso é possível e muito fácil, apenas utilizando Tags HTML dentro do seu template. Enquanto navegava no template/HTML do seu blog você já deve ter visto algo assim:<b:if>. é essa a tag que fará os elementos aparecerem nas páginas desejadas, mas ela será diferente, depende das páginas que você queira que o elemento apareça.

<b:if cond='data:blog.url == data:blog.homepageUrl'> 

Cole o código do gadget ou html aqui!

</b:if>

O trecho acima é um exemplo de como você vai deixar o elemento dentro da tag. Veja outro exemplo na imagem abaixo:  

Ocultando e Exibindo Elementos

1) Para Ocultar um elemento somente na página inicial:

<b:if cond='data:blog.homepageUrl != data:blog.url'>

2) Para Ocultar um elemento somente nas páginas internas (de postagens): 

<b:if cond='data:blog.pageType != "item"'>

3) Para Exibir um elemento somente nas páginas internas: 

<b:if cond='data:blog.pageType == "item"'>

4) Para Ocultar um elemento somente nas páginas estáticas: 

<b:if cond='data:blog.pageType != "static_page"'>

5) Para Exibir um elemento somente na página inicial: 

<b:if cond='data:blog.url == data:blog.homepageUrl'>

6)  Para Exibir um elemento somente nas páginas de arquivos: 

<b:if cond='data:blog.pageType == "archive"'>

7)  Para Exibir um elemento somente nas páginas estáticas: 

<b:if cond='data:blog.pageType == "static_page"'>

8) Para Exibir um elemento em uma página específica: 

<b:if cond='data:blog.url == "URL-DA-PÁGINA"'>

9) Para Ocultar um elemento em uma página específica: 

<b:if cond='data:blog.url != "URL-DA-PÁGINA"'>

10) Para Exibir um elemento somente na Página de um Marcador Específico: 

<b:if cond='data:blog.url == "URL-DO-BLOG/search/label/NOME-DO-MARCADOR"'>

11) Para Ocultar um elemento somente na página de um marcador específico: 

<b:if cond='data:blog.homepageUrl != "URL-DO-BLOG/search/label/NOME-DO-MARCADOR"'>

OBS: Não se esqueça de usar a tag de fechamento </b:if>

Site original: tur-quesa

Tweet

IDEs Online | Programe em seu navegador e em qualquer lugar e qualquer linguagem de programação

Bem-vindo ao Lisbasche, hoje trago alguns editores online, esses editores são chamados de IDE ONLINE, pois aceitam linguagens do tipo HTML, CSS, javascript e todas as que você puder imaginar. Você pode incluir no seu código bibliotecas jQuery para você editar em seu navegador, celular ou tablet. É possível também você programar em php e java dependendo do editor que você escolher e ainda compilar seu código e executá-lo em seu browser, você ainda tem a possibilidade de salvar seu código na web, para que você possa escrevê-lo em qualquer lugar e em qualquer dispositivo, também e possível você usar uma conta de FTP sua para salvar seus arquivos, ou até fazer o download do próprio.

IDEs Online:

Dabblet

Não é necessário o login.
Linguagens aceita: Html, CSS, javascript "Em partes".
link: http://dabblet.com/

---

Thimble

Não é necessário o login.
Linguagens aceita: Html, CSS, javascript.
link: https://thimble.webmaker.org/

---

jsFiddle

Não é necessário o login.
Linguagens aceita: Html, CSS, javascript, jQuery.
link: http://jsfiddle.net/

---

jsBin

Não é necessário o login.
Linguagens aceita: Html, CSS, javascript, jQuery, entre outras.
link: http://3.jsbin.com

---

Cloud9

Necessário o login.
Linguagens aceita: Html, CSS, javascript, jQuery, Node.js, PHP, Ruby on Rails, C/C++, StrongLoop, entre outras.
link: https://c9.io/

---

eXo Cloud IDE

Não é necessário o login.
Linguagens aceita: Python, Android, Angular, Bootstrap3, Java Web application, PHP, Spring, Ruby on Rails, Node JS, entre outras.
link: https://codenvy.com/

---

Compilr

Para utilizar essa plataforma, é necessário fazer pagamento por aulas, e depois é disponibilizado os editores para você.
Esses editores também são encontrados para download no android e ios.
Linguagens aceita: Bash, C ,C++ ,C#, Fortran, Objective C, Objective C++, Pascal, Python, Ruby, Visual Basic, x86 Assembly, PHP, Javascript, HTML/CSS, Java.
link: http://compilr.com

---

Codeanywhere

Necessário o login.
Linguagens aceita: Todas que você imaginar.
link: http://codeanywhere.net/

---

Kodingen

Necessário o login.
Linguagens aceita: Outra plataforma muito completa, que aceita muuuuitos tipos de linguagens.
link: https://kodingen.com

Este artigo foi inspirado em:
http://www.awwwards.com/10-html-css-online-code-editors-for-web-developers.html

Obrigado pela sua visita, volte sempre !

Tweet