Mascara campo de telefone em javascript com regex – Adiciona o nove para telefones de são paulo

por em Javascript Nenhum comentário

Esse código abaixo, possui uma função que no evento onblur do campo, adiciona o dígito nove para telefones com ddd 11, caso o usuário tenha informado um telefone de dígito 11 e não tenha informado o nove.

Completo do post Mascara campo de telefone em javascript com regex – Nono dígito – Telefones São Paulo

<html>
<head>
    <title>Mascara Telefone</title>
<script type="text/javascript">
/* Máscaras ER */
function mascara(o, f) {
    v_obj = o;
    v_fun = f;
    setTimeout(execmascara, 1);
}
function execmascara() {
    v_obj.value = v_fun(v_obj.value)
}
function mtel(v) {
    v=v.replace(/\D/g,"");
    v=v.replace(/^(\d{2})(\d)/g,"($1) $2");
    v=v.replace(/(\d)(\d{4})$/,"$1-$2");
    return v;
}
function id(el) {
	return document.getElementById(el);
}
window.onload = function() {
	var $telefone = id('telefone');
	$telefone.onkeyup = function() {
		mascara( this, mtel );
	}
	$telefone.onblur = function() {
		var v = this.value;
		if( v.indexOf('(11)') !== -1 && v.length === 14) {
			this.value = v.replace(/\((\d{2})\) (\d{4})-(\d{4})/g,'($1) 9$2-$3');
		}
	}
}
</script>

</head>
<body>

    <input type="text" name="telefone" id="telefone" maxlength="15" />

</body>
</html>

Tableless: Como posicionar elementos de um layout – Recorte CSS

por em CSS Nenhum comentário

Sim, um tema básico aqui no blog. Ou talvez nem tanto.
Diariamente vejo diversos desenvolvedores se enrolando com essa questão: “Como estruturar um layout css?”, ou “Por que tableless é tão difícil?”, e “Por que no Chrome/Internet Explorer, não fica igual?”


Impossível escrever uma receita de bolo que sirva para todos os layouts, que resolva todos os efeitos visuais..
Depende de cada projeto, a variação do design faz que tenhamos que analisar cada um individualmente, mas ainda assim, vou tentar escrever algumas dicas que de forma geral podem te ajudar a ter menos problemas ao fazer um recorte tableless.

CSS Reset/Normalize

Só comece a escrever o teu css, depois te ter algum css reset declarado. Nem que seja um:

 * { margin: 0; padding: 0; border: none; }

DOCTYPE

Escolha algum. Eu recomendo o doctype html5, ou o strict xhtml.

Position

Evite usar position. Muitos se perdem e saem fazendo tudo, absolutamente tudo com position: absolute;
Pare já com isso. Não use. Posicione os “grandes blocos”, a estrutura do layout, ou seja, topo, conteudo , colunas e rodapé, com float, margin e clear.

Apenas isso. Evite também valores muito altos de margins e paddings.

Semântica

Seja semântico. Se você tem um texto, use a tag <p>, se tem uma imagem que passa informação, use <img /> e assim por diante.
Deixe que o conteúdo lhe diga qual tag vc deve usar.

Use poucos elementos

Evite desperdiçar marcação html. Não há motivo para por exemplo, usar uma tag <figure> em um banner, que não possui nenhum outro conteudo relacionado na pagina, e não possui uma legenda. Use o bom senso.
8

Não chute

Sei que nem sempre sabemos como chegar a tal feito, mas não fique chutando regras css e elementos html. Limpe eles depois. Não deixe regras css inúteis nos teus elementos.

Leia estes posts

  1. Nem só de <div> vive um desenvolvedor FrontEnd
  2. Como iniciar um recorte Tableless – comece !
  3. Como iniciar um recorte tableless – ensinando a pensar
  4. O elemento HTML body nos nossos sites, como melhor aproveitá-lo.
  5. Mau cheiro em código css – Como sentir
  6. Outros maus cheiros em código css – Como sentir
  7. Separação de camadas no FrontEnd
  8. Otimizações para websites não óbvias
  9. Meu boilerplate de projetos de sites html5 e mobile
  10. Semântica html5 – Comece agora mesmo! Use!
  11. A semântica da tag <br /> – Simplesmente não use !
  12. Devemos saber desenvolver para internet explorer [ie]!



Depois de ler esse arsenal de posts, espero ter aberto a sua mente para que você comece a criticar a forma com que vc vinha fazendo sites até hoje, e passe para o próximo nível, desenvolvendo em menos tempo, e com muito mais qualidade.

=)

Separação de camadas no FrontEnd

por em CSS,HTML,Javascript Nenhum comentário

Separar a VIEW do MODEL e não misturar as regras de negócio com os CONTROLERs há muito tempo já fazem parte das preocupações e boas práticas adotadas pelos programadores back end, mas e dos desenvolvedores frontend ?

A separação de camadas onde cada componente possui uma responsabilidade bem definida, também deve ser preocupação dos desenvolvedores frontend. As vezes as coisas ficam um pouco confusas, e então frequentemente vemos projetos em que está tudo misturado, trocado e até mal aplicado.

A princípio precisamos definir a responsabilidade de cada uma das camadas principais, e depois detalhar cada uma delas.

Conteúdo

A camada responsável pela apresentação do conteúdo é representada pelo HTML. Esta é a linguagem criada para tal, possui tags semânticas, e aquelas velhas coisas como: blink, marquee, ou até mesmo font foram depreciadas, para que parássemos de formatar diretamente no html.

Imagem ou background

Ilustrações que apresentem um conteúdo ao usuário e que passem alguma informação, devem ser marcadas com a tag img e obrigatoriamente devem possuir um alt que as descreva.
Já aquelas que existem apenas por conceitos estéticos de layout, são melhores colocadas como background através de CSS.

Apresentação

A camada de apresentação é responsabilidade do CSS. Esta é a linguagem ideal para tal, e cada dia mais ganha novas ferramentas, e melhor suporte dos diversos browsers.

Hoje em dia apenas com css3, conseguimos rotacionar imagens, fazer fadeIn e fadeOut suaves, cantos arredondados(negros dias em que só era possível com diversas imagens nos cantos dos elementos), degradês e uma outra infinidade de coisas, que além de diminuir a quantidade de imagens que precisamos para chegar a tal efeito, também diminuíram a quantidade de código javascript.

Comportamento

Não por acaso deixei par comentar da camada de comportamento por último. Esta camada aqui, é responsabilidade da linguagem javascript. Deve ser adicionada ao projeto, injetando os comportamentos de forma não obstrutiva, ou seja, se não houver suporte ou falhar por qualquer motivo o javascript da página, o site precisa continuar acessível, navegável.

Acessível

Se for fazer um site com navegação ajax, lembre-se de só fazer isso depois que o site já funcionar perfeitamente sem javascript. Ou então aquele carousel de imagens e slideshow, onde usamos overflow, só ative e esconda o conteúdo quando o javascript for iniciado e então o acesso à informação for feito pelo usuário através das setas que você criou.

A camada de comportamento é responsável por tudo aquilo o usuário vai interagir. E existe para melhorar a experiência, como verificar se um email ou id de usuário é válido sem precisar recarregar a página.

Cálculos

Frequentemente precisamos calcular algo que depende de alguma entrada do usuário. Lembre-se que o conteúdo é responsabilidade do HTML, então pegue as informações dinamicamente via DOM, e então calcule no javascript. Sem escrever tags com js, mas apenas injetar as informações na marcação.

Conclusão

Tudo flui melhor quando cada camada está bem separada e definida no projeto. Isso não deveria ser novidade para ninguém, mas não custa nada relembrar. =)

Verificar se um arquivo de imagem existe – JavaScript

por em AJAX Nenhum comentário

Dado um arquivo de imagem, como verificar se ele existe usando apenas javascript ?

Eu consegui pensar em pelo menos três formas de fazer isso.

Verificando com AJAX

<script type="text/javascript">
function is_img(file) {
	var ajax = new XMLHttpRequest();

	ajax.open("GET",file,true);
	ajax.send();

	ajax.onreadystatechange = function() {
		if (ajax.readyState == 4){
			var jpg = ajax.responseText;

			if(ajax.status===200) {
				console.log("A imagem " + file + " existe");
			} else {
				console.log("A imagem " + file + " NAO existe");
			}
		}
	}
}
is_img("imagem-garfield.jpg");
is_img("imagem-garfield-2.jpg");
</script>

A propriedade status do objeto ajax existe exatamente para isso. Caso não exista ela retorna 404, caso exista retornará 200, ou então 304(not modified) dependendo de como você serve imagens com o teu servidor.

Verificando com new Image();

<script type="text/javascript">
function is_img(file) {
	var img = new Image();
	img.src = file;
	img.onload = function() {
		console.log("A imagem " + file + " existe");
	}
	img.onerror = function() {
		console.log("A imagem " + file + " NAO existe");
	}
}
is_img("imagem-garfield.jpg");
is_img("imagem-garfield-2.jpg");
</script>

Outra possibilidade é usar aquele truque que conhecemos para fazer preload de arquivos de imagem, usando o objeto Image()

Aqui é bem simples, se a imagem responder no evento onload(), então ela existe, caso não, disparará o evento onerror, ai sei que deu algo errado.

Verificar com document.createElement

Aqui o truque para saber se o arquivo de imagem existe ou não, é o mesmo do método acima. Usando os eventos onload, e onerror. Porém o resource agora é criado com um elemento imagem, e não com o objeto.


<script type="text/javascript">
function is_img(file) {
	var img = document.createElement('img');
	img.src = file;

	img.onload = function() {
		console.log("A imagem " + file + " existe");
	}
	img.onerror = function() {
		console.log("A imagem " + file + " NAO existe");
	}

}
is_img("imagem-garfield.jpg");
is_img("imagem-garfield-2.jpg");
</script>

HR, participative management, democracy in the workplace and leadership

por em leadership,participative mgt,Vídeos Nenhum comentário

Readers of this blog already know Clóvis Bojikian, former Semco’s HR director. Back in 2009, when I met Clóvis, I wrote a long post about Clóvis experience in participative management.

One month ago I received a Linkedin invitation to connect with Heiko Fischer:

Salut Joaquim,
I follow your blog and love it! My team made HR redundant at Europe’s largest videogames company. We called it the Way of Resourceful Humans, basically democratic entrepreneurship. I was wondering if you could get me in touch with Clóvis Bojikian. I would love to invite him! Thank you!

Doing some research I was able to find this TED presentation:

It’s easy to see that Heiko’s ideas are in synch with Clóvis experience. I instantly put them in contact and arranged for them to meet over Skype. This meeting occurred last week and it was a pleasure and an honour to be part of the conversation between those two top HR professionals so ahead of their own time. The conversation could certainly generate many posts, but I’d like to write specifically about the beginning and the end of the conversation.

In the beginning of the conversation, Heiko told a bit about his history. He told that his father worked in HR at HP and there democracy in the workplace was a value brought by the founders, so Heiko thought this was common place. Following the steps of his father, Heiko decided to work in HR as well and to his surprise, companies were far from democratic and HP was much more an exception than the rule.

At this moment, Clóvis congratulated Heiko for following his father’s steps. Normally children tend to go the opposite direction of their parents, just for the sake of opposing their parents’ opinion. Heiko replied that actually he went in the opposite direction of his father. While his father believed that in order to maintain democracy in a company it is needed a strong HR department, Heiko’s view is that the perfect democratic company is one where HR is no longer needed.

After that, the conversation followed with Heiko and Clóvis exchanging experiences, telling each other how they implemented participative management and democracy at workplace and their motivation to do so.

At the end, after Heiko hung up, I was walking with Clóvis on his way out when I mentioned how interesting Heiko’s view on HR that the perfect democratic company is one where HR is no longer needed. Then Clóvis completed “and managers are no longer needed as well”.

[IT Web - Ruby Fundamental] Curso grátis de Rails 4

por em cursos,Grátis,IT Web,rails,ruby,Ruby Fundamental,Ruby on Rails Nenhum comentário

Que tal aprender a nova versão do Ruby on Rails totalmente de graça?

Veja o post completo no blog Ruby Fundamental:
Curso grátis de Rails 4

Veja também os outros posts do blog Ruby Fundamental:

9a Corrida dos Inconfidentes Itupeva 2013 – 9km

por em 9km,Corridas de rua,Esportes Nenhum comentário

No domingo de 21 de abril de 2013, participei da 9a Corrida dos Inconfidentes Itupeva.

Fiz o percurso de 9km acompanhando minha esposa, que fez o tempo total de 00:48:28 e ficou no 3o. lugar da faixa etária de 35 a 39 anos.

Foi a primeira vez que ela ganhou um trófeu em uma corrida de rua.

Patricia no 3o lugar do pódio

Patricia no 3o lugar do pódio

Eu, Patricia e o troféu dela.

Eu, Patricia e o troféu dela.

Corrida Contra o Preconceito 2013 – 5km

por em 5km,Corridas de rua,Esportes Nenhum comentário

No domingo chuvoso de 14 de abril de 2013, participei da Corrida Contra o Preconceito.

O percurso de 5 km foi realizado no Centro Histórico de São Paulo, com a largada e chegada na rua Libero Badaró.

Tempo total: 00:21:27

Tempo médio por km: 04:23

Tempo em cada km:

  1. 03:54
  2. 04:18
  3. 04:40
  4. 04:39
  5. 03:56

Vídeo da chegada:

Foto de Jura Santos

Foto de Jura Santos

Foto de Jura Santos

Foto de Jura Santos

Patricia Hamasaki e Eu.

Patricia Hamasaki e Eu.

Vídeo da largada:

Corrida Eco Paineiras Jundiaí – 10km

por em 10km,Corridas de rua,Esportes Nenhum comentário

No domingo de 7 de abril de 2013, participei da Corrida Eco Paineiras Jundiaí.

O percurso teve a largada na avenida 9 de Julho, em frente ao Shopping Paineiras, e depois pegando a avenida Luiz Latorre, voltando novamente para a avenida 9 de julho. Eu acompanhei minha esposa Patricia nos primeiros 5km para depois dar mais uma volta no percurso para completar os 10km.

Tempo total: 00:49:57

Tempo médio por km: 05:00

Tempo em cada km:

  1. 04:21
  2. 04:54
  3. 05:30
  4. 05:37
  5. 05:39
  6. 04:26
  7. 04:44
  8. 04:54
  9. 05:00
  10. 04:52

Foto de Olho no Atleta

Foto de Olho no Atleta

Foto de Olho no Atleta

Foto de Olho no Atleta

Foto de Olho no Atleta

Foto de Olho no Atleta

Como ler XML com SimpleXML do PHP

por em PHP Nenhum comentário

Eu sei que você quer saber como ler xml com php, mas primeiro vamos entender o que XML e qual é sua utilidade.

Como ler XML com PHP
Direito da imagem – Blog Super Geekers

XML é uma Liguagem de Marcação utilizada para compartilhamento de dados entre dois sistemas. Caso tenha interesse de saber mais sobre o XML reomendo a leitura do post da TecMundo.

Chega de enrolar, e vamos ver como utilizar o SimpleXML do PHP para ler um XML e retornar a saida em um HTML.

XML:

<library>
	<book>
		<id>1</id>
		<title>O futuro de Desenvolvedor Front-end</title>
		<description>O que é Desenvolvedor Front-end.</description>
		<price>100.00</price>
	</book>

	<book>
		<id>2</id>
		<title>Desenvolvimento Web</title>
		<description>Descubra o que é o Desenvolvimento Web.</description>
		<price>2000.00</price>
	</book>

	<book>
		<id>3</id>
		<title>Desenvolvedor Front-end</title>
		<description>O que é Desenvolvedor Front-end.</description>
		<price>1000.00</price>
	</book>
</library>

Lendo XML com SimpleXML do PHP:

Pronto! Agora vamos utilizar o SimpleXML do PHP para ler o XML e retornar um HTML com os dados. A explicação detalhada de cada linha esta no código abaixo em comentário.

<?php

#Enconding
#Se o Enconding é text/html a quebra de linha tem que ser em HTML - 
#Se o Enconding é text/plain a quebra de linha tem que ser em PHP - PHP_EOL header('Content-Type: text/html; charset=utf-8'); #Realizando o UPLOAD do XML $xml = simplexml_load_file('xml/libary.xml'); #Imprindo na tela o ID do primeiro Book echo "<strong>ID:</strong> ".$xml->book[0]->id."<br>"; echo "<strong>Título:</strong> ".$xml->book[0]->title."<br><br>"; #Utilizando o forech para imprimir todos books foreach($xml->book as $books) { echo "<strong>ID:</strong> ".$books->id."<br>"; echo "<strong>Título:</strong> ".$books->title."<br>"; echo "<strong>Descrição:</strong> ".$books->description."<br>"; echo "<strong>Preço:</strong> R$ ".$books->price."<br><br>"; }

Saída em HTML

Agora um exemplo de como fica o código com HTML de forma bUnita, ou não!!! :-)

 
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>TrayCheckout - Simulador</title>
	<style>
		* { margin: 0; padding: 0; border: none; list-style: none; }

		/* Pode deletar com for publicar */
		body, input, select, textarea { font-size: 13px; font-family: Open-sans, sans-serif; }
		.content { margin: 0 auto; width: 980px; }

		#result {
			background-color: #FFF;
			width: 100%;
			border: 2px solid #E8ECEE;
			border-collapse: collapse;
			text-align: center;
			margin-top: 40px;
		}
		#result th { border: 2px solid #E8ECEE; height: 50px; }
		#result td { height: 30px; border-right: 2px solid #E8ECEE; }
		#result tbody tr:nth-child(even) { background-color: #F7F7F7; }
		#result #result-title {
			text-align: left;
			font-size: 16px;
			padding-left: 15px;
			height: 60px;
		}
	</style>
</head>
<body class="content">
	<article>
		<table id="result">
			<thead>
				<tr>
					<th id="result-title" colspan="5">Biblioteca:</th>
				</tr>

				<tr>
					<th>ID</th>
					<th>Título</th>
					<th>Descrição</th>
					<th>Preço</th>
				</tr>
			</thead>

			<tbody>
				<?php 
					$xml = simplexml_load_file('xml/libary.xml');

					foreach($xml->book as $books) {
				?>
				<tr>
					<td><?php echo $books->id ?></td>
					<td><?php echo $books->title ?></td>
					<td><?php echo $books->description ?></td>
					<td>R$ <?php echo $books->price ?></td>
				</tr>
				<?php
				}
				?>

			</tbody>
		</table><!-- #result -->
	</article>
</body>
</html>

Me diverti muito fazendo este post, espero que você consiga ler o seu XML com o SimpleXML do PHP.

The post Como ler XML com SimpleXML do PHP appeared first on Desenvolvedor Front-End - Marco Bruno.

Switch to our mobile site