<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>MXStudio &#187; Jean_Carlos</title>
	<atom:link href="http://www.mxstudio.com.br/author/jean_carlos/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.mxstudio.com.br</link>
	<description>Macromedia e Adobe - Artigos, colunas, tutorias e muito mais...</description>
	<lastBuildDate>Sun, 29 Jan 2012 11:31:48 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.3</generator>
		<item>
		<title>Relógio em Flash usando ActionScript 3.0</title>
		<link>http://www.mxstudio.com.br/desenvolvimento/flash/relogio-em-flash-usando-actionscript-3-0/</link>
		<comments>http://www.mxstudio.com.br/desenvolvimento/flash/relogio-em-flash-usando-actionscript-3-0/#comments</comments>
		<pubDate>Tue, 13 Jul 2010 20:50:59 +0000</pubDate>
		<dc:creator>Jean_Carlos</dc:creator>
				<category><![CDATA[Flash]]></category>
		<category><![CDATA[actionscript 3.0]]></category>
		<category><![CDATA[Relogio]]></category>

		<guid isPermaLink="false">http://www.mxstudio.com.br/?p=4478</guid>
		<description><![CDATA[Neste artigo vou estar mostrando como manipular a classe Date do AS3.0, no artigo anterior mostrei como usar esta mesma classe na versão 2.0. Basicamente não mudou nada, apenas a forma de chamar o evento enter frame.Vou seguir os mesmos passos do artigo anterior, explicando passo a passo. Faremos dois relógios, um analógico e outro [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align: justify">Neste artigo vou estar mostrando como manipular a classe Date do AS3.0, no <a title="Fazendo um relógio em flash com Actionscript 2.0" href="http://www.mxstudio.com.br/desenvolvimento/flash/fazendo-um-relogio-em-flash-com-actionscript-2/" target="_self"><span style="text-decoration: underline">artigo anterior</span></a> mostrei como usar esta mesma classe na versão 2.0.</p>
<p style="text-align: justify">Basicamente não mudou nada, apenas a forma de chamar o evento <em>enter frame.</em>Vou seguir os mesmos passos do artigo anterior, explicando passo a passo. Faremos dois relógios, um analógico e outro digital.</p>
<p style="text-align: justify">Primeiro vamos entender a classe Date. Através desta classe podemos manipular todos os elementos relacionados a tempo, ou seja, hora, minuto, milésimos, dia, ano, etc. A utilização desta classe é muito simples e pode ser usado em qualquer trabalho que necessite de manipulação de tempo. Seja somente exibir a data e hora, como para algo mais especifico. Neste artigo vamos nos reter a somente fazer o relógio.</p>
<p style="text-align: justify">Primeiro passo: Precisar ter pelo menos o Flash CS3 instalado para poder trabalhar com o ActionScript 3.0.</p>
<p style="text-align: justify">Segundo passo: Desenhar o relógio, vou estar disponibilizando para download o design do relógio. Mas quem desejar criar o próprio, pode usar as ferramentas de desenho do flash, ou usar outro software. Vamos fazer dois relógios, um será somente analógico e o outro digital.</p>
<p style="text-align: justify">Obs.: O ponto de registro dos ponteiros devem ficar na parte central inferior, ou seja, a base do ponteiro, onde irá girar.</p>
<p style="text-align: justify">Terceiro passo: Após criar os relógios, vamos instanciar os ponteiros que devem ser movieClip e caxa de texto, campo dinâmico, para poder receber os eventos da classe Date.</p>
<p style="text-align: justify">Os ponteiros, dê os seguintes nomes:</p>
<ul>
<li>hora_mc</li>
<li>minuto_mc,</li>
<li>segundo_mc;</li>
</ul>
<p style="text-align: justify">Caixas de textos:</p>
<ul style="text-align: justify">
<li>hora_txt,</li>
<li>minutos_txt,</li>
<li>segundo_txt,</li>
<li>dia_txt, mes_txt,</li>
<li>ano_txt,</li>
<li>semana_txt;</li>
</ul>
<p style="text-align: justify">Obs.: Os nomes devem estar sem acento!</p>
<p style="text-align: justify">Quarto passo: Após dar os respectivos nomes ao objetos, vamos a programação. Crie uma nova layer, e renomeie para ~AS3.0.</p>
<p style="text-align: justify">Quinto passo: Abra o painel Actions. Indo em Window &gt; Actions ou apertando F9.</p>
<p style="text-align: justify">Sexto passo: A programação!</p>
<p style="text-align: justify">Com o painel Actions aberto, vamos inserir a primeira linha:</p>
<pre><span style="color: #0000ff">import flash.events.Event;</span></pre>
<p style="text-align: justify">Nesta linha, importamos a classe Event, para podermos utilizar o ENTER_FRAME.</p>
<p style="text-align: justify">Nas próximas linhas vamos zerar a posição dos ponteiros para zero (0).</p>
<pre><span style="color: #0000ff">clockAnalogico_mc.horas_mc.rotation = 0;
clockAnalogico_mc.minutos_mc.rotation = 0;
clockAnalogico_mc.segundos_mc.rotation = 0;</span></pre>
<p style="text-align: justify">Obs.: Os ponteiros, neste caso, se encontram dentro de um movieClip clockAnalogico_mc.</p>
<p style="text-align: justify">O próximo código, fará a chamada da função disparar_relogio.</p>
<pre><span style="color: #0000ff">this.addEventListener(Event.ENTER_FRAME, dispara_relogio);</span></pre>
<p style="text-align: justify">Nesta linha, declaramos um “ouvinte” que chama o evento ENTER_FRAME através da função declarada dentro dos parênteses. Após está linha declaramos a função que receberá todo o corpo do código.</p>
<pre><span style="color: #0000ff">function dispara_relogio(e:Event):void
{</span>
<span style="color: #0000ff">}</span></pre>
<p style="text-align: justify">Dentro das chaves iremos por todo o código responsável por fazer o relógio funcionar. Primeiro declaramos o objeto da classe Date, com o nome time.</p>
<pre><span style="color: #0000ff">var time:Date = new Date();</span></pre>
<p style="text-align: justify">Nas linhas seguintes, declaramos as variáveis que iram receber os eventos da classe Date.</p>
<pre><span style="color: #0000ff">var hora:Number;
var minuto:Number;
var segundo:Number;
var semana:Number;
var dia:Number;
var mes:Number;
var ano:Number;
var dataSemana:String;</span></pre>
<p style="text-align: justify">Após declarado as variáveis, vamos instanciar os eventos as variáveis.</p>
<pre><span style="color: #0000ff">hora = time.getHours();
minuto = time.getMinutes();
segundo = time.getSeconds();
semana = time.getDay();
dia = time.getDate();
mes = time.getMonth();
ano = time.getFullYear();</span></pre>
<p style="text-align: justify">Para simplificar, hora recebe a hora atual obtida pelo objeto time, que foi declarado no topo deste bloco, e através do método getHours() que obtemos a hora, isso ocorre para os outros eventos, mas obtendo seus respectivos valores.</p>
<p style="text-align: justify">Nos próximos passos que irmos dar funcionalidade ao relógio, primeiro o analógico.</p>
<pre><span style="color: #0000ff">// Análogico
clockAnalogico_mc.horas_mc.rotation = hora * 30;
clockAnalogico_mc.minutos_mc.rotation = minuto * 6;
clockAnalogico_mc.segundos_mc.rotation = segundo * 6;</span></pre>
<p style="text-align: justify">Cada ponteiro recebe seu respectivo valor. Nome do objeto instanciado, e a propriedade rotation, que é responsável por fazer o ponteiro girar, como seu valor, recebe o evento hora multiplicado por 30, exemplo: se for 14h o ponteiro será rotacionado 420º em seu eixo, porque 14 * 30 = 420. Isso ocorre o mesmo para os minutos e os segundos, mas ao invés de 30, será multiplicado por 6. Por estar dentro de um evento ENTER_FRAME, o codigo contigo dentro desta função ficará se repetindo infinitamente, até que a aplicação seja fechada. Isso faz com que os ponteiros se movimentem.</p>
<p style="text-align: justify">E com isso concluímos o relógio analógico. Agora faremos o relógio digital.</p>
<p style="text-align: justify">Dando continuidade ao código, vamos inserir o código responsável por fazer o relógio digital.</p>
<pre><span style="color: #0000ff">// Digital
clockDigital_mc.hora_txt.text = hora;
clockDigital_mc.minuto_txt.text = minuto;
clockDigital_mc.segundo_txt.text = segundo;</span></pre>
<p style="text-align: justify">Cada caixa de texto (que estão contidas dentro do movieClip clockDigital_mc) recebe seus respectivos valores, usando os mesmos eventos usados nos ponteiros, mas não iremos multiplicar por valor algum.</p>
<p style="text-align: justify">Basicamente nosso código está pronto, mas vamos manipular os eventos dia, mês, ano e dia da semana. Como já foi declarado anteriormente, vamos apenas manipulá-lo.</p>
<pre><span style="color: #0000ff">dataSemana = dia + "/" + mes + "/" + ano;
switch (semana)
{
case 1: clockDigital_mc.semana_txt.text = dataSemana + " - Segunda-feira"; break;
case 2: clockDigital_mc.semana_txt.text = dataSemana + " - Terça-feira"; break;
case 3: clockDigital_mc.semana_txt.text = dataSemana + " - Quarta-feira"; break;
case 4: clockDigital_mc.semana_txt.text = dataSemana + " - Quinta-feira"; break;
case 5: clockDigital_mc.semana_txt.text = dataSemana + " - Sexta-feira"; break;
case 6: clockDigital_mc.semana_txt.text = dataSemana + " - Sábado"; break;
default: clockDigital_mc.semana_txt.text = dataSemana + " - Domingo"; break;
}</span></pre>
<p style="text-align: justify">A variável dataSemana que é do tipo String, recebe o arranjo de dia/mes/ano, para ser usado dentro da instrução switch, que detecta qual e o dia da semana, e escreve na caixa de texto semana_txt (que esta dentro do movieClip clockDigital_mc) o arranjo da data junto com o dia da semana. Os valores obtidos pelo método getDay() vai de zero (0) a seis (6), respectivamente, Domingo, segunda-feira,&#8230;</p>
<p style="text-align: justify">Nosso código completo fica assim:</p>
<pre><span style="color: #0000ff">import flash.events.Event;</span>
<span style="color: #0000ff">clockAnalogico_mc.horas_mc.rotation = 0;
clockAnalogico_mc.minutos_mc.rotation = 0;
clockAnalogico_mc.segundos_mc.rotation = 0;</span>
<span style="color: #0000ff">this.addEventListener(Event.ENTER_FRAME, dispara_relogio);
function dispara_relogio(e:Event):void
{
var time:Date = new Date();
var hora:Number;
var minuto:Number;
var segundo:Number;
var semana:Number;
var dia:Number;
var mes:Number;
var ano:Number;
var dataSemana:String;</span>
<span style="color: #0000ff">hora = time.getHours();
minuto = time.getMinutes();
segundo = time.getSeconds();
semana = time.getDay();
dia = time.getDate();
mes = time.getMonth();
ano = time.getFullYear();</span>
<span style="color: #0000ff">// Análogico</span>
<span style="color: #0000ff">clockAnalogico_mc.horas_mc.rotation = hora * 30;
clockAnalogico_mc.minutos_mc.rotation = minuto * 6;
clockAnalogico_mc.segundos_mc.rotation = segundo * 6;</span>
<span style="color: #0000ff">// Digital</span>
<span style="color: #0000ff">clockDigital_mc.hora_txt.text = hora;
clockDigital_mc.minuto_txt.text = minuto;
clockDigital_mc.segundo_txt.text = segundo;</span>
<span style="color: #0000ff">dataSemana = dia + "/" + mes + "/" + ano;
switch (semana)
{
case 1: clockDigital_mc.semana_txt.text = dataSemana + " - Segunda-feira"; break;
case 2: clockDigital_mc.semana_txt.text = dataSemana + " - Terça-feira"; break;
case 3: clockDigital_mc.semana_txt.text = dataSemana + " - Quarta-feira"; break;
case 4: clockDigital_mc.semana_txt.text = dataSemana + " - Quinta-feira"; break;
case 5: clockDigital_mc.semana_txt.text = dataSemana + " - Sexta-feira"; break;
case 6: clockDigital_mc.semana_txt.text = dataSemana + " - Sábado"; break;
default: clockDigital_mc.semana_txt.text = dataSemana + " - Domingo"; break;
}
}</span></pre>
<p>É isso ai, duvidas só postar em comentários.</p>
<p>Arquivos: <a title="Design do relógio" href="http://files.myopera.com/jeancarloscbr/files/meus_artigos/mxstudio/relogio_as3_arquivos.fla" target="_blank">Design do Relógio</a>.</p>
<p>Até++!</p>
<p style="text-align: justify">
]]></content:encoded>
			<wfw:commentRss>http://www.mxstudio.com.br/desenvolvimento/flash/relogio-em-flash-usando-actionscript-3-0/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>HTML5, está na hora?</title>
		<link>http://www.mxstudio.com.br/desenvolvimento/programacao/html5-esta-na-hora-2/</link>
		<comments>http://www.mxstudio.com.br/desenvolvimento/programacao/html5-esta-na-hora-2/#comments</comments>
		<pubDate>Mon, 12 Jul 2010 17:54:11 +0000</pubDate>
		<dc:creator>Jean_Carlos</dc:creator>
				<category><![CDATA[Programação]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[HTML5]]></category>
		<category><![CDATA[XHTML]]></category>

		<guid isPermaLink="false">http://www.mxstudio.com.br/?p=4433</guid>
		<description><![CDATA[Olá pessoal, depois de tanto tempo sumido, estou de volta! Neste artigo vou falar um pouco se esta na hora de começar a desenvolver seus projetos na nova versão do HTML que está dando o que falar. Apesar da euforia sobre a nova versão, muitos devem estar se perguntando. Está na hora de desenvolver projetos [...]]]></description>
			<content:encoded><![CDATA[<p>Olá pessoal, depois de tanto tempo sumido, estou de volta!</p>
<p>Neste artigo vou falar um pouco se esta na hora de começar a desenvolver seus projetos na nova versão do HTML que está dando o que falar. Apesar da euforia sobre a nova versão, muitos devem estar se perguntando. Está na hora de desenvolver projetos em HTML 5?</p>
<p>A resposta é bem simples, NÃO!</p>
<p>A explicação é mais simples ainda! O HTML5 nem saiu do forno, a sua versão final está prevista para meados de 2012. Sem falar que os navegadores ainda não oferecem suporte total, justamente por não estar pronto. E quem está pensando em se aventurar em desenvolver na nova versão, cuidado!</p>
<p>Muitos dos recursos que o HTML5 prometidos apenas estão presente em alguns navegadores, na imagem abaixo mostra alguns exemplos do HTML 5 e os navegadores que os suportam:</p>
<p style="text-align: center;"><a href="http://www.mxstudio.com.br/wp-content/uploads/2010/07/html5_demos.jpg" target="_blank"><img class="size-medium wp-image-4422  aligncenter" src="http://www.mxstudio.com.br/wp-content/uploads/2010/07/html5_demos-187x300.jpg" alt="" width="187" height="300" /></a></p>
<p>Agora, quem está pensando em começar seus estudos na nova versão, sem intensão de usar em seus projetos, será uma boa. Nos próximos artigos vou falar mais sobre a nova versão do HTML.</p>
<p>Até++! </p>
]]></content:encoded>
			<wfw:commentRss>http://www.mxstudio.com.br/desenvolvimento/programacao/html5-esta-na-hora-2/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>HTML 5 – Matando a curiosidade</title>
		<link>http://www.mxstudio.com.br/tecnologia/geral/html_5_%e2%80%93_matando_a_curiosidade/</link>
		<comments>http://www.mxstudio.com.br/tecnologia/geral/html_5_%e2%80%93_matando_a_curiosidade/#comments</comments>
		<pubDate>Sat, 06 Mar 2010 19:01:04 +0000</pubDate>
		<dc:creator>Jean_Carlos</dc:creator>
				<category><![CDATA[Geral]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[W3C]]></category>
		<category><![CDATA[web 2.0]]></category>
		<category><![CDATA[Webstandarts]]></category>

		<guid isPermaLink="false">http://www.mxstudio.com.br/?p=3235</guid>
		<description><![CDATA[Beleza pessoal? Depois de mais de um ano sem escrever aqui no MX Studio, volto falando sobre a nova versão do HTML. Vamos lá! O HTML 5 veio com grandes novidades, podendo até substituir algumas funções que normalmente era utilizado no flash, como player de audio ou vídeo, por exemplo. A nova versão e muito [...]]]></description>
			<content:encoded><![CDATA[<p>Beleza pessoal? Depois de mais de um ano sem escrever aqui no MX Studio, volto falando sobre a nova versão do HTML.</p>
<p>Vamos lá!</p>
<p>O HTML 5 veio com grandes novidades, podendo até substituir algumas funções que normalmente era utilizado no flash, como player de audio ou vídeo, por exemplo. A nova versão e muito mais robusta, antes para estruturar um documento, era usado div’s com o atributo id, para identificar cada parte do site, agora na nova versão isso foi melhorado, para cada parte da estrutura existe uma tag especifica, o que deixa o código muito mais estruturado. Abaixou vou mostrar dois exemplos, como era no HTML 4 e como é agora na nova versão. Também vou listar algumas novas tags.</p>
<p>Sintaxe HTML 4 x HTML 5:</p>
<p>HTML 4</p>
<blockquote><p>&lt;?xml version=&#8221;1.0&#8243; encoding=&#8221;UTF-8&#8243;?&gt;</p>
<p>&lt;html xmlns=&#8221;http://www.w3.org/1999/xhtml&#8221;&gt;</p>
<p>&lt;head&gt;</p>
<p>&lt;title&gt;Titulo do Documento&lt;/title&gt;</p>
<p>&lt;/head&gt;</p>
<p>&lt;body&gt;</p>
<p>&lt;div id=”topo”&gt;&lt;/div&gt;</p>
<p>&lt;div id=”menu”&gt;&lt;/div&gt;</p>
<p>&lt;div id=”conteudo”&gt;&lt;/div&gt;</p>
<p>&lt;div id=”rodape”&gt;&lt;/div&gt;</p>
<p>&lt;/body&gt;</p>
<p>&lt;/html&gt;</p></blockquote>
<p>HTML 5</p>
<blockquote><p>&lt;?xml version=&#8221;1.0&#8243; encoding=&#8221;UTF-8&#8243;?&gt;</p>
<p>&lt;html xmlns=&#8221;http://www.w3.org/1999/xhtml&#8221;&gt;</p>
<p>&lt;head&gt;</p>
<p>&lt;title&gt;Titulo do Documento&lt;/title&gt;</p>
<p>&lt;/head&gt;</p>
<p>&lt;body&gt;</p>
<p>&lt;header&gt;Topo&lt;/header&gt;</p>
<p>&lt;nav&gt;Menu de Navegação&lt;/nav&gt;</p>
<p>&lt;article&gt;Conteudo&lt;/article&gt;</p>
<p>&lt;footer&gt;Rodapé&lt;/footer&gt;</p>
<p>&lt;/body&gt;</p>
<p>&lt;/html&gt;</p></blockquote>
<p>Abaixo segue as novas tags.</p>
<ul>
<li><span style="text-decoration: underline"><strong>selection</strong></span> – representa um documento genérico ou seleção de tags. Pode ser usado em conjunto com os elementos h1, h2, h3, h4, h5 e h6.</li>
<li><span style="text-decoration: underline"><strong>article</strong></span> – representa um pedaço independente do conteúdo de um documento, como um blog ou artigo de jornal.</li>
<li><span style="text-decoration: underline"><strong>aside</strong></span> – representa uma parte do conteúdo que é apenas ligeiramente relacionado com o restante da página.</li>
<li><span style="text-decoration: underline"><strong>hgroup</strong></span> – representa o cabeçalho de uma seção.</li>
<li><span style="text-decoration: underline"><strong>footer</strong></span> – representa um rodapé para uma seção e pode conter informações sobre o autor, copyright,&#8230;</li>
<li><span style="text-decoration: underline"><strong>nav</strong></span> – representa uma seção do documento destinada à navegação.</li>
<li><span style="text-decoration: underline"><strong>figure</strong></span> – pode ser usado para associar uma legenda junto com algum documento incorporado, como uma imagem ou vídeo.</li>
</ul>
<blockquote><p>&lt;figure&gt;</p>
<p>&lt;video src=&#8221;ogg&#8221;&gt;&lt;/video&gt;</p>
<p>&lt;figcaption&gt;Example&lt;/figcaption&gt;</p>
<p>&lt;/figure&gt;</p></blockquote>
<ul>
<li><span style="text-decoration: underline"><strong>figcaption</strong></span> – fornece a legenda.</li>
<li><span style="text-decoration: underline"><strong>video</strong></span> e <span style="text-decoration: underline"><strong>audio</strong></span> para conteúdos multimídia.</li>
<li><span style="text-decoration: underline"><strong>embed</strong></span> – plugins.</li>
<li><span style="text-decoration: underline"><strong>marker</strong></span> – representa uma série de texto marcado.</li>
<li><span style="text-decoration: underline"><strong>progress</strong></span> – representa uma conclusão de uma tarefa, como baixar ou executar uma série de operações.</li>
<li><span style="text-decoration: underline"><strong>meter</strong></span> – representa uma medida, como o uso do disco.</li>
<li><span style="text-decoration: underline"><strong>time</strong></span> – representa uma data e/ou tempo.</li>
<li><span style="text-decoration: underline"><strong>ruby</strong></span> <span style="text-decoration: underline"><strong>rb</strong> </span> e <span style="text-decoration: underline"><strong>rp</strong></span> – A marcação define uma anotação ruby (notas chineses ou caracteres).</li>
<li><span style="text-decoration: underline"><strong>canvas</strong></span> – é utilizada para renderização de gráficos bitmap.</li>
<li><span style="text-decoration: underline"><strong>command</strong></span> – representa um comando que o usuário pode invocar.</li>
<li><span style="text-decoration: underline"><strong>details</strong></span> – representa informações adicionais ou controles que o usuário pode obter sobre uma procura. O elemento <span style="text-decoration: underline"><strong>summary</strong></span> fornece um resumo.</li>
<li><span style="text-decoration: underline"><strong>datalist</strong></span> – em conjunto com o atributo <span style="text-decoration: underline"><strong>list</strong></span> usado na tag <span style="text-decoration: underline"><strong>input</strong></span> pode ser usada para fazer caixas de combinação:</li>
</ul>
<blockquote><p>&lt;input list=&#8221;browsers&#8221;&gt;</p>
<p>&lt;datalist&gt;</p>
<p>&lt;option value=&#8221;Safari&#8221;&gt;</p>
<p>&lt;option value=&#8221;Internet Explorer&#8221;&gt;</p>
<p>&lt;option value=&#8221;Opera&#8221;&gt;</p>
<p>&lt;option value=&#8221;Firefox&#8221;&gt;</p>
<p>&lt;/datalist&gt;</p></blockquote>
<p>Isso só foi uma amostra da nova versão, nos próximos artigos vou estar mostrando como utilizar a nova versão do HTML 5.</p>
<p>Até++! </p>
]]></content:encoded>
			<wfw:commentRss>http://www.mxstudio.com.br/tecnologia/geral/html_5_%e2%80%93_matando_a_curiosidade/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Sintaxe CSS</title>
		<link>http://www.mxstudio.com.br/desenvolvimento/css/sintaxe-css/</link>
		<comments>http://www.mxstudio.com.br/desenvolvimento/css/sintaxe-css/#comments</comments>
		<pubDate>Tue, 29 Apr 2008 00:10:32 +0000</pubDate>
		<dc:creator>Jean_Carlos</dc:creator>
				<category><![CDATA[CSS]]></category>

		<guid isPermaLink="false">http://www.mxstudio.com.br/?p=1266</guid>
		<description><![CDATA[Olá pessoal! Vou estar fazendo uma seqüencia de artigos relacionado a CSS, quem ainda não leu o post anterior Introdução a CSS, leia para poder ficar por dentro dessa ferramenta. É bem simples seu entendimento, no artigo de hoje vou falar sobre a sintaxe que é bem simples. Vamos lá?   A sintaxe CSS e [...]]]></description>
			<content:encoded><![CDATA[<p>Olá pessoal!</p>
<p>Vou estar fazendo uma seqüencia de artigos relacionado a CSS, quem ainda não leu o post anterior <a href="http://www.mxstudio.com.br/css/introducao-a-css-cascading-style-sheets/">Introdução a CSS</a>, leia para poder ficar por dentro dessa ferramenta. É bem simples seu entendimento, no artigo de hoje vou falar sobre a sintaxe que é bem simples. Vamos lá?</p>
<p> </p>
<p>A sintaxe CSS e formada por seletor, propriedade e valor.</p>
<p><span style="#000080;">seletor { propriedade:valor; }</span></p>
<p>Seletor:</p>
<p>O seletor é o que indica ao CSS qual tag que será formatada. Ela pode ser de três formas, tag HTML, class ou ID.</p>
<p>Ex</p>
<p><em>Tag HTML: p, a, ul, div, etc</em></p>
<p><em>Class: .menu, .topo, .geral</em></p>
<p><em>ID: #menu, #geral, #conteudo</em></p>
<p>Detalhe, de acordo com as recomendações da W3C, as ID&#8217;s são unicas dentro de um documento (X)HTML ou seja, se criou dois menus, eles não poderão ter a mesma ID. Veja o exemplo.</p>
<p>Errado:</p>
<p><em>&lt;div id=&#8221;menu&#8221;&gt;Menu 1&lt;/div&gt;</em></p>
<p><em>&lt;div id=&#8221;menu&#8221;&gt;Menu 2&lt;/div&gt;</em></p>
<p>Certo:</p>
<p><em>&lt;div id=&#8221;menu&#8221;&gt;Menu 1&lt;/div&gt;</em></p>
<p><em>&lt;div id=&#8221;submenu&#8221;&gt;Menu 2&lt;/div&gt;</em></p>
<p>Já as class elas podem ser repetidas dentro de um mesmo documento diferente da ID.</p>
<p>Ex: </p>
<p>&lt;div class=&#8221;menu&#8221;&gt;Menu 1&lt;/div&gt;</p>
<p>&lt;div class=&#8221;submenu&#8221;&gt;Menu 2&lt;/div&gt;</p>
<p>Exemplo de seletor:</p>
<p><em>p { propriedade:valor;}</em></p>
<p><em>.menu { propriedade:valor;}</em></p>
<p><em>#geral { propriedade:valor;}</em></p>
<p>No exemplo acima mostra como o seletor é aplicado a sintaxe.</p>
<p>Propriedade:</p>
<p>A propriedade é onde definimos como será nossa formatação, como cor do texto, margem, tamanho&#8230; Veja no exemplo abaixo o nome de algumas propriedade.</p>
<p>Ex:</p>
<p><em>Color: Cor do texto;</em></p>
<p><em>Background-color: Cor de fundo;</em></p>
<p><em>margin: Margem;</em></p>
<p><em>font-size: Tamanho do texto;</em></p>
<p>Existe varias propriedade, apenas citei algumas. </p>
<p>Valor:</p>
<p>As propriedade mencionadas acima necessitam de um valor próprio para que elas funcionem.</p>
<p>Ex:</p>
<p><em>Color: Cor em exadecimal (#FFFFFF) ou RGB(255,255,255)</em></p>
<p><em>Background-color: Também utliza exadecimal ou RGB;</em></p>
<p><em>margin: A margem pode ser definada em pixel, cm&#8230; ;</em></p>
<p><em>font-size: Pode usar px, pt&#8230;;</em></p>
<p>Agora vamos ver como ficaria o código CSS. Nesse exemplo vou apenas colorir a cor de fundo e alterar a cor e tamanho do texto.</p>
<p>Ex:</p>
<p><em>&lt;style type=&#8221;text/css&#8221;&gt;</em></p>
<p><em>body { color:#FFFFFF; background-color:#1F1BE3; font-size:12pt;}</em></p>
<p>p { text-align:center;}</p>
<p><em>&lt;/style&gt;</em></p>
<p><em>&lt;body&gt;</em></p>
<p><em>&lt;p&gt;MXStudio&lt;/p&gt;</em></p>
<p><em>&lt;/body&gt;</em></p>
<p>Como puderam observar utilizei mais de uma propriedade em um mesmo seletor, isso e totalmente valido, desde que separados por ponto-e-virgula(;). Nos próximos artigos vou estar mostrando há fazer varias coisas com CSS, como, menu, layout&#8230;</p>
<p>Bom pessoal por hoje é só! Até++!</p>
<p>  </p>
]]></content:encoded>
			<wfw:commentRss>http://www.mxstudio.com.br/desenvolvimento/css/sintaxe-css/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Introdução a CSS (Cascading Style Sheets)</title>
		<link>http://www.mxstudio.com.br/desenvolvimento/css/introducao-a-css-cascading-style-sheets/</link>
		<comments>http://www.mxstudio.com.br/desenvolvimento/css/introducao-a-css-cascading-style-sheets/#comments</comments>
		<pubDate>Sun, 27 Apr 2008 12:56:38 +0000</pubDate>
		<dc:creator>Jean_Carlos</dc:creator>
				<category><![CDATA[CSS]]></category>

		<guid isPermaLink="false">http://www.mxstudio.com.br/?p=1225</guid>
		<description><![CDATA[Introdução a CSS (Cascading Style Sheets) Olá pessoal vou começar primeiro dando uma introdução a esta tecnologia CSS, antes de começarmos a trabalhar com está ferramenta. A Cascading Style Sheet (CSS) é uma ferramenta utilizada para a construção da aparência de páginas para Web. Permite o uso de uma técnica diferente da convencional (HTML puro), [...]]]></description>
			<content:encoded><![CDATA[<p><strong>Introdução a CSS (Cascading Style Sheets)</strong></p>
<p>Olá pessoal vou  começar primeiro dando uma introdução a esta tecnologia CSS, antes de  começarmos a trabalhar com está ferramenta.</p>
<p>A Cascading Style Sheet (CSS) é uma ferramenta  utilizada para a construção da aparência de páginas para Web. Permite o uso de  uma técnica diferente da convencional (HTML puro), possibilitando uma  considerável redução no tempo de trabalho.</p>
<p>O recurso, que traduzido significa Folha de Estilo  em Cascata, se tornou uma necessidade para quem deseja ser um WebDeveloper  (Desenvolvedor Web) e para quem quer criar qualquer projeto para Web. Para  utilizar CSS é necessário possuir conhecimentos básicos de HTML, que podem ser  adquiridos consultando livros ou tutoriais sobre o assunto, também estarei  postando alguns tutoriais.</p>
<p>Para aprendermos CSS serão necessários alguns  recursos:</p>
<p>Editor de texto simples como o Notepad (Bloco de  Notas) do Windows. Para ter acesso ao programa, acesse Iniciar &gt; Programas  &gt; Acessórios ou Iniciar &gt; Executar &gt; notepad. Outros exemplos são o  Pico para Linux e o Simple Text para Macintosh (Apple).</p>
<p>Navegador para testar os códigos, como o Opera,  Firefox ou Internet Explore, por exemplo.</p>
<p>É importante ressaltar que um editor de texto  simples é o ideal para o aprendizado de HTML e CSS, uma vez que não afeta nem  modifica o código digitado. Assim, os acertos e erros de codificação serão de  responsabilidade de quem digitou o código e não do software utilizado.</p>
<p>Mas afinal, o que é CSS? Trata-se de uma linguagem  para estilos que definem o layout de documentos HTML controlando, por exemplo,  fontes, cores, margens, linhas, alturas, larguras, imagens de fundo e  posicionamento.</p>
<p>A linguagem HTML também pode ser usada para  definir o layout de web sites, mas isso não é mais recomendado, de acordo com  os padrões da W3C é recomendada à utilização da CSS para o design. Contudo, a  CSS proporciona mais opções, é mais precisa e sofisticada, além de ser  suportada pela maioria dos navegadores atuais. A principal diferença entre CSS  e HTML é que o primeiro é usado para formatar conteúdos e o segundo para  conteúdos já estruturados.</p>
<p>Até pouco tempo atrás, a linguagem HTML era usada  somente para estruturar textos. Um programador podia marcar seus textos  definindo “isto é um cabeçalho” ou “isto é um parágrafo”, usando tags HTML tais  como</p>
<div>
<pre>&lt;h1&gt;</pre>
</div>
<p>e</p>
<div>
<pre>&lt;p&gt;</pre>
</div>
<p>. A medida que a Web  ganhou popularidade, os designers precisavam encontrar meios de construir  layout para os documentos on-line.</p>
<p>Para suprir essa necessidade, os fabricantes de  navegadores (naquela época Netscape e a Microsoft)inventaram novas tags, como</p>
<div>
<pre>&lt;font&gt;</pre>
</div>
<p>, que se  diferenciavam das originais do HTML para a construção de layouts, e não apenas  para a estruturação da página.</p>
<p>Isso fez que se distorcesse o uso de tags,  inicialmente projetadas para estruturar, como, por exemplo,</p>
<div>
<pre>&lt;table&gt;</pre>
</div>
<p>, que passou a ser  empregadas para layout. Muitas dessas tags, como</p>
<div>
<pre>&lt;blink&gt;</pre>
</div>
<p>, eram suportadas somente por determinados  navegadores. A frase “Você precisa do navegador X para visualizar esta pagina”  passou a ser tornar comum nos websites.</p>
<p>Devido a essas questões, o W3C* criou a CSS,  colocando à disposição dos webdesigners meios sofisticados de projetar layout,  sendo estas suportados por todos os navegadores. Dessa forma, a separação dos  estilos de apresentação da marcação dos conteúdos facilitou a manutenção das  páginas.</p>
<p>Entre os benefícios do uso de CSS para o  desenvolvimento de páginas para web, podemos incluir alguns itens:</p>
<p>Controle do layout de vários documentos a partir  de um simples arquivo CSS;</p>
<p>Aplicação de diferente layout para servir  diferentes mídias (telas, impressoras etc.);</p>
<p>Emprego de variadas técnicas de desenvolvimento.</p>
<p>Bom, é isso  ai! Vou fazer vários artigos de CSS como: menu, layout entre outros. Espero que  gostem!</p>
<p>Até++ </p>
]]></content:encoded>
			<wfw:commentRss>http://www.mxstudio.com.br/desenvolvimento/css/introducao-a-css-cascading-style-sheets/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>Melhorando o Windows XP ou Vista</title>
		<link>http://www.mxstudio.com.br/tecnologia/windows/melhorando-o-windows-xp-ou-vista/</link>
		<comments>http://www.mxstudio.com.br/tecnologia/windows/melhorando-o-windows-xp-ou-vista/#comments</comments>
		<pubDate>Sun, 27 Apr 2008 01:07:55 +0000</pubDate>
		<dc:creator>Jean_Carlos</dc:creator>
				<category><![CDATA[Windows]]></category>
		<category><![CDATA[desempenho]]></category>
		<category><![CDATA[windows vista]]></category>
		<category><![CDATA[windows xp]]></category>

		<guid isPermaLink="false">http://www.mxstudio.com.br/?p=1223</guid>
		<description><![CDATA[Blz pessoal do MXStudio? Bom, nesse meu 2° artigo vou estar mostrando com dar uma melhoradinha no desempenho de seu windows. Como fazer os item do menu iniciar, abrir janelas, o carregamento do windows e desligar mais rapidos e outras coisas. Vamos lá? I- Vamos fazer um ponto de restauração, caso algo dê errado, se [...]]]></description>
			<content:encoded><![CDATA[<p>Blz pessoal do MXStudio?</p>
<p>Bom, nesse meu 2° artigo vou estar mostrando com dar uma melhoradinha no desempenho de seu windows. Como fazer os item do menu iniciar, abrir janelas, o carregamento do windows e desligar mais rapidos e outras coisas. Vamos lá?</p>
<p>I- Vamos fazer um ponto de restauração, caso algo dê errado, se seguirem corretamente os passos nem haverá necessidade de criar, mas por segurança vamos fazer.</p>
<p>A) Iniciar &gt; Todos os programas &gt; Acessórios &gt; Ferramentas do sitema &gt; Restauração do sistema</p>
<p>B) Selecione Criar um ponto de restauração &gt; Avançar &gt; Na descrição escreva um nome que descreva o porque de está o criando &gt; depois clique em criar &gt; na proxima tela mostra o dia, hora e o nome da restauração &gt; depois clieque em fechar. Para restaura o sistema, só basta seguir o passo A e marcar a primeira opção.</p>
<p>Pronto! O ponto de restauração está criado, ele pode ser usado sempre que for instalar um novo programa ou qualquer modificação que for feito no Sistema, eu normalmente não utilizo, mas fica a criterio de cada um.</p>
<p>II- Menu iniciar</p>
<p>A) Iniciar &gt; Executar &gt; regedit</p>
<p>B) HKEY_CURRENT_USER &gt; Control Panel &gt; Desktop</p>
<p>C) No lado direito procure o registro MenuShowDelay &gt; dê um duplo clique &gt; altere o valor para 0 &gt; depois feche o editor de registros &gt; reinicie o PC.</p>
<p>Caso não encontre, siga o próximo passo.</p>
<p>D) No mesmo lugar onde se encontra todos os registros, clique com o botão direito &gt; novo &gt; valor da seqüência &gt; renomeie para MenuShowDelay &gt; dê um duplo clique e altere o valor para 0.</p>
<p>III- Carregamento mais rapido</p>
<p>A) Iniciar &gt; Executar &gt; regedit</p>
<p>B) HKEY_CURRENT_USER &gt; Control Panel &gt; Desktop</p>
<p>C) Procure no lado direito o registro de nome WaitToKillAppTimeout e altere o valor para 1000.</p>
<p>D) Agora vá novamente em Iniciar &gt; executar &gt; e digite msconfig</p>
<p>F) Vá para a guia Inicializar e desmarque os programa que não queira que carregue junto com o windows, isso fará que seu sistema carregue muito mais rapido, se optar em desativar tudo, apenas remarque a opção de seu anti-vírus. Após isso clique em Aplicar &gt; Fechar &gt; Reinicair, para que as mudanças tenham efeito.</p>
<p> </p>
<p>Esses passos também pode ser aplicado no Windows Vista.</p>
<p>Bom, por hoje é só! Depois faço um outro com outras dicas para deixer seu sistema mais agil.</p>
<p>Qualquer duvida só deixar um comentario.</p>
<p>Até ++ </p>
]]></content:encoded>
			<wfw:commentRss>http://www.mxstudio.com.br/tecnologia/windows/melhorando-o-windows-xp-ou-vista/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>Fazendo um relógio em flash com Actionscript 2.0</title>
		<link>http://www.mxstudio.com.br/desenvolvimento/flash/fazendo-um-relogio-em-flash-com-actionscript-2/</link>
		<comments>http://www.mxstudio.com.br/desenvolvimento/flash/fazendo-um-relogio-em-flash-com-actionscript-2/#comments</comments>
		<pubDate>Sun, 20 Apr 2008 01:24:49 +0000</pubDate>
		<dc:creator>Jean_Carlos</dc:creator>
				<category><![CDATA[Flash]]></category>
		<category><![CDATA[actionscript]]></category>
		<category><![CDATA[Relogio]]></category>

		<guid isPermaLink="false">http://www.mxstudio.com.br/?p=1138</guid>
		<description><![CDATA[Bom, primeiramente devemos entender como vai funcionar nosso relógio, ele será digital e analógico, no digital além de mostrar a hora também irá exibir o dia da semana e a data. Para começarmos a fazer nosso relógio, primeiro temos que fazer o desenho, podemos usar o próprio flash ou qualquer editor de imagem. Depois de [...]]]></description>
			<content:encoded><![CDATA[<p>Bom, primeiramente devemos entender como vai funcionar nosso relógio, ele será digital e analógico, no digital além de mostrar a hora também irá exibir o dia da semana e a data.</p>
<p>Para começarmos a fazer nosso relógio, primeiro temos que fazer o desenho, podemos usar o próprio flash ou qualquer editor de imagem.</p>
<p>Depois de feito o desenho do relógio, vamos criar cinco campos de texto dinâmicos, instanciados como hora_txt, minuto_txt, segundo_txt, semana_txt e dia_txt, após isso vamos instanciar os ponteiros, ponteiro_hora, ponteiro_minuto e ponteiro_segundo.</p>
<p>Obs.: O ponto de registro dos ponteiros tem que estar como centralizado inferior.</p>
<p><strong>Actionscript </strong></p>
<p>O relógio será feito em um único frame, então devemos fazer para que o aplicativo atualize o tempo todo naquele único frame, para isso vamos usar o onEnterFrame que irá atualizar o código infinitamente, enquanto o relógio estiver aberto.</p>
<blockquote><p>this.onEnterFrame = function()<br />
{</p>
<p>};</p></blockquote>
<p>Todo nosso código ira ficar dentro dessa função. Dentro da função vamos criar as variáveis onde irão conter os valores para que o relógio funcione.</p>
<blockquote><p>this.onEnterFrame = function()<br />
{<br />
var horario:Date = new Date();<br />
hora = horario.getHours();<br />
minuto = horario.getMinutes();<br />
segundo = horario.getSeconds();<br />
};</p></blockquote>
<p>Dentro da função foram inseridas quatro variáveis, onde a primeira recebe todos os valores da propriedade Date();, na segunda variável de nome ‘hora’ vai receber o valor getHours(); da variável horario, a variável ‘minuto’ receberá o valor getMinutes(); e ‘segundo’ receberá getSeconds(); também da variável horario.</p>
<p>Agora vamos chamar as variáveis nas entrâncias dos ponteiros para ele funcionar, ficando assim:</p>
<blockquote><p>this.onEnterFrame = function()<br />
{<br />
var horario:Date = new Date();<br />
hora = horario.getHours();<br />
minuto = horario.getMinutes();<br />
segundo = horario.getSeconds();</p>
<p>_root.ponteiro_hora._rotation = hora * 30;<br />
_root.ponteiro_minuto._rotation = minuto * 6;<br />
_root.ponteiro_segundo._rotation = segundo * 6;<br />
};</p></blockquote>
<p>A instancia ponteiro_hora recebe a variável hora que e multiplicada por 30. Para que o ponteiro_hora dê uma volta completa a cada 12 horas, vamos dividir 360° por 12 que e igual a 30, o mesmo será usado para os ponteiros minuto e segundo, só que ao invés de ser dividido por 12 será divido por 60 que será igual a 6.<br />
A instancia ponteiro_minuto recebe a variável minuto e a instancia ponteiro_segundo recebe a variável segundo que são multiplicadas por 6.</p>
<p>Nosso relógio analógico está pronto. Agora vamos fazer a programação do relógio digital.</p>
<p>Para o digital funcionar, vamos chamar as variáveis hora, minuto e segundo nas instancias hora_txt, minuto_txt e segundo_txt, ficando assim:</p>
<blockquote><p>this.onEnterFrame = function()<br />
{<br />
var horario:Date = new Date();<br />
hora = horario.getHours();<br />
minuto = horario.getMinutes();<br />
segundo = horario.getSeconds();</p>
<p>//Analógico<br />
_root.ponteiro_hora._rotation = hora * 30;<br />
_root.ponteiro_minuto._rotation = minuto * 6;<br />
_root.ponteiro_segundo._rotation = segundo * 6;</p>
<p>//Digital<br />
_root.hora_txt.text = hora;<br />
_root.minuto_txt.text = minuto;<br />
_root.segundo_txt.text = segundo;<br />
};</p></blockquote>
<p>Bom, basicamente nosso relógio já está pronto! Mas agora falta fazer o relógio exibir o dia da semana e a data, para fazer isso vamos utilizar um laço de repetição switch para verificar o dia da semana e exibir na caixa de texto. Primeiro vamos criar uma variável onde ira buscar o valor getDay();, assim:</p>
<blockquote><p>semana = horario.getDay();<br />
switch (semana)<br />
{<br />
case 1 :<br />
_root.semana_txt.text = &#8220;Segunda&#8221;;<br />
break;<br />
case 2 :<br />
_root.semana_txt.text = &#8220;Terça&#8221;;<br />
break;<br />
case 3 :<br />
_root.semana_txt.text = &#8220;Quarta&#8221;;<br />
break;<br />
case 4 :<br />
_root.semana_txt.text = &#8220;Quinta&#8221;;<br />
break;<br />
case 5 :<br />
_root.semana_txt.text = &#8220;Sexta&#8221;;<br />
break;<br />
case 6 :<br />
_root.semana_txt.text = &#8220;Sábado&#8221;;<br />
break;<br />
default :<br />
_root.semana_txt.text = &#8220;Domingo&#8221;;<br />
break;<br />
}</p></blockquote>
<p>Dentro de cada case a instancia semana_txt recebe da variável semana um texto correspondente a cada dia da semana de acordo com o numero.<br />
Ex.: 1 = segunda, 2 = terça etc</p>
<p>Agora só falta colocar o dia. Para isso vamos criar uma variável chamada dia onde recebera o valor getDate da variável horário. E colocar o valor da variável dia na instancia dia_txt, ficando assim:</p>
<blockquote><p>dia = horario.getDate();<br />
_root.dia_txt.text = dia;</p></blockquote>
<p>Nosso código completo:</p>
<blockquote><p>this.onEnterFrame = function()<br />
{<br />
var horario:Date = new Date();<br />
hora = horario.getHours();<br />
minuto = horario.getMinutes();<br />
segundo = horario.getSeconds();</p>
<p>//Analógico<br />
_root.ponteiro_hora._rotation = hora * 30;<br />
_root.ponteiro_minuto._rotation = minuto * 6;<br />
_root.ponteiro_segundo._rotation = segundo * 6;</p>
<p>//Digital<br />
_root.hora_txt.text = hora;<br />
_root.minuto_txt.text = minuto;<br />
_root.segundo_txt.text = segundo;</p>
<p>//Semama<br />
semana = horario.getDay();<br />
switch (semana)<br />
{<br />
case 1 :<br />
_root.semana_txt.text = &#8220;Segunda&#8221;;<br />
break;<br />
case 2 :<br />
_root.semana_txt.text = &#8220;Terça&#8221;;<br />
break;<br />
case 3 :<br />
_root.semana_txt.text = &#8220;Quarta&#8221;;<br />
break;<br />
case 4 :<br />
_root.semana_txt.text = &#8220;Quinta&#8221;;<br />
break;<br />
case 5 :<br />
_root.semana_txt.text = &#8220;Sexta&#8221;;<br />
break;<br />
case 6 :<br />
_root.semana_txt.text = &#8220;Sábado&#8221;;<br />
break;<br />
default :<br />
_root.semana_txt.text = &#8220;Domingo&#8221;;<br />
break;<br />
}<br />
// Dia<br />
dia = horario.getDate();<br />
_root.dia_txt.text = dia;</p>
<p>};</p></blockquote>
<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="430" height="320" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="http://www.mxstudio.com.br/wp-content/uploads/2008/04/relogio-jc.swf" /><embed type="application/x-shockwave-flash" width="430" height="320" src="http://www.mxstudio.com.br/wp-content/uploads/2008/04/relogio-jc.swf"></embed></object> </p>
]]></content:encoded>
			<wfw:commentRss>http://www.mxstudio.com.br/desenvolvimento/flash/fazendo-um-relogio-em-flash-com-actionscript-2/feed/</wfw:commentRss>
		<slash:comments>18</slash:comments>
		</item>
	</channel>
</rss>

