A McTech Tatuapé forma web designers completos que aprendem a editar imagens, criar sites, vídeos, animações em flash e DVDs, logotipos e programar em linguagens como HTML, ASP e PHP. Além disso, temos 5 módulos exclusivos: Google Analytics, SEO, Google Adwords, iOS para iPhone e Wordpress.
O poder e a magia do Photoshop através de ferramentas surpreendentes.
O Photoshop, editor de fotografias mais usado e famoso, está passando por mudanças bastante importantes para os seus usuários com a adoção de um novo sistema de compra e utilização, a Creative Cloud. Agora, você paga por mês para usar os softwares da Adobe em planos mais acessíveis.
Você pode pagar por apenas um software ou vários, sendo que o preço sofre alteração para cada tipo de conta. Todas elas possuem acesso direto à rede Behance Network, um portal de divulgação artística voltado principalmente para designers.
O Photoshop continua bastante parecido com a sua versão CS6, sendo que poucos recursos foram alterados ou adicionados. Veja, por exemplo, este vídeo que saiu com o CS6 e mostra algumas mudanças que ainda estão presentes, como as opções da ferramenta de corte e a nova timeline, com efeitos de transição e possibilidade de adicionar trilha sonora:
Modos de Blur
Até a quinta versão do Photoshop, se você quisesse fazer uma imagem em estilo tilt-shift, era preciso criar uma máscara e trabalhar com o desfoque de uma forma complexa. A versão CS6 do software trouxe um filtro especial para isso que permanece no Photoshop CC; ele cria o efeito com apenas um clique e é totalmente personalizável.
Ainda é possível visualizar a máscara de edição e deixar o seu filtro tilt-shift exatamente como você deseja, mas agora isso é muito mais fácil. Além disso, existe a possibilidade de criar um filtro de blur com várias distâncias focais.
Ferramenta Crop
Não é possível imaginar muitas mudanças na ferramenta de corte inteligente, o “Crop”, não é mesmo? Mas a Adobe inovou mesmo onde não se podia esperar e trouxe melhorias para essa função desde a versão CS6, com algumas mudanças menores na versão CC.
Agora o “Crop” está muito mais intuitivo, principalmente na hora de ajustar a inclinação da imagem. Em vez de você precisar mexer na grade e depois ver o resultado, a fotografia é inclinada quando você gira o controle e é possível ver o resultado imediatamente.
Content-Aware Move e Redução de Vibração
Guarde bem o nome "Content-Aware Move — ele pode ser de grande ajuda para você! Com esse brush você pode mover objetos de lugar e o software completa o fundo automaticamente, sem a necessidade de usar a ferramenta “Clone” exaustivamente.
Um recurso exclusivo da nova versão do Photoshop, o CC, é a redução inteligente de borrados causados por vibração na câmera durante o disparo. Esse filtro procura estabilizar a imagem e consegue bons resultados em casos menos graves e que tenham uma boa iluminação. Veja o vídeo abaixo com um exemplo de uso:
Outras melhorias
Quem tira fotografias profissionalmente está bem familiarizado com a extensão RAW, uma espécie de “negativo digital”, um arquivo de imagem “cru” que precisa ser editado posteriormente. Normalmente, os fotógrafos tratam esse tipo de foto no Adobe Lightroom, mas o novo Photoshop CS6 traz opções bastante incríveis para este formato.
Outro aspecto que mudou é a edição de vídeo, que ganhou uma timeline com direito até a uma trilha de áudio. Adicione efeitos de transição de fade e monte os seus vídeos sem nem mesmo usar outro software. A ideia da Adobe é unificar os serviços básicos, para que você só precise abrir outro programa se for realmente necessário.
A janela do software não mudou muito, apenas alguns botões foram adicionados, fazendo com que a experiência de uso não seja prejudicada. Quem já usou o software antes não vai sentir um grande impacto visual, mas poderá aproveitar todas as melhorias da nova versão do editor de imagens mais famoso do mercado.
Faça parte voce tambem do nosso curso iWeb e domine esta incrível ferramenta essencial para os profissionais de web.
Se você é um usuário dos programas desenvolvidos pela Adobe, a atual versão de Fireworks certamente não vai decepcioná-lo. O Adobe Fireworks CS6 oferece, em sua mais recente atualização, recursos aprimorados de criação de layouts não apenas a sites; agora, o design e a funcionalidade de aplicativos para mobiles, por exemplo, poderá ser também melhorado através do uso deste software.
Prototipagem para smartphones e tablets, criação de gráficos vetoriais e imagens bitmap, mock-ups e a possibilidade de geração de traços em 3D são as grandes novidades desta tradicional ferramenta dedicada às melhorias estéticas e funcionais de interfaces digitais.Além dessas novas funcionalidades, um sistema dinâmico de extração de códigos CSS está disponível; elementos como cor, fonte, gradiente e proporção podem ser agora copiados diretamente à planilha de trabalho de editores HTML (como o Adobe Dreamweaver CS6). Uma nova jQuery Mobile, performance otimizada de uso de ferramentas e a possibilidade de criação de extensões acessíveis a APIs são outras das propriedades de Adobe Fireworks CS6.
Como baixar?
Para realizar o download, instalar o programa e testá-lo durante 30 dias, você terá de acessar o aplicativo Adobe Criative Cloud e criar uma conta de registro. E não se assuste. Nenhuma grande complicação vai ser enfrentada durante esse processo. Siga os seguintes passsos e faça, em instantes, seu cadastro no banco de dados da Adobe.
Criando sua conta
Antes de baixar o Adobe Fireworks CS6 (ou qualquer outra atualização da desenvolvedora de softwares), você precisa ter uma conta cadastrada no sistema da tal empresa. Clique aqui, preencha os dados solicitados, marque a caixa "Li e concordo com os Termos de uso e a Política de privacidade da Adobe" e aperte então o botão "Criar".
Pronto! Agora já é possível acessar o espaço de downloads da Adobe Criative Cloud e baixar o Adobe Fireworks CS6.
Download
Ao selecionar a opção "Clique aqui para baixar", o aplicativo do serviço de direcionamento ao catálogo de programas disponíveis para testes será instalado em seu computador. Acesse então o Adobe Criative Cloud (que deve ter aparecido na sua Área de trabalho), insira seu login e senha e escolha, neste caso, o Fireworks, clicando em seguida em "Baixar Avaliação".
Aguarde alguns instantes até que o seu dowload seja concluído, execute as etapas tradicionais de instalação solicitadas pelo software e comece finalmente a explorar as ferramentas da mais recente versão de Adobe Fireworks CS6 por 30 dias.
Interface
A maioria dos softwares da Adobe possui um padrão bastante semelhante quando se fala em interface. E, mantendo a tal tradição, Adobe Fireworks CS6 mostra, à esquerda, uma barra lotada por diversas ferramentas de edição. À direita, informações sobre a mídia tratada e acerca do modo de edição utilizada são exibidas.
A aba superior do programa lista diversas opções de comandos. Em "Arquivo", por exemplo, é possível importar e exportar diversos formatos de mídias. Ao selecionar o botão "Exibir", você poderá personalizar, se este for o seu desejo, o layout de todo o programa. E o melhor: o idioma-padrão deste software é o português – o que evita maiores complicações na hora de "colocar o mouse para funcionar".Pode ser que pessoas já familiarizados com versões anteriores do programa observem algumas diferenças no posicionamento de certas ferramentas. Ainda assim, as principais caracterísitcas e funcionalidades do programa podem ser facilmente encontradas.
Novos recursos
Para permitir uma personalização ainda mais dinâmica de imagens e layouts, agora você pode importar determinados pincéis do Photoshop. Assim, muitos dos “Custom Brushing” usados nesse outro editor da Adobe poderão ser também utilizados no Fireworks CS6.
E, conforme mencionado logo no início desta análise, ferramentas para a criação e otimização das propriedades estéticas e funcionais de aplicativos para tablets e smartphones foram também adicionadas ao programa. Traduza rapidamente projetos em CSS3 para sites, integrando-os também a plataformas mobiles.Configure imagens em bitmap, vetores, wireframes e mock-ups de forma a manter a precisão e nitidez de cada pixel mesmo quando os arquivos forem exibidos em altas resoluções. Essas são, por óbvio, apenas algumas das implementações trazidas por esta nova versão de Fireworks CS6. Contudo, é certo que em pouco tempo pessoas mais experientes logo vão se acostumar com as novidades do programa, utilizando-as da melhor forma possível.
Faça nosso curso iWeb e domine esta maravilhosa ferramenta !!!
Tableless é uma forma de desenvolvimento de sites que não utiliza tabelas para disposição de conteúdo na página sugerido pela W3C , pois defende que os códigos HTML deveriam ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados tabulares. Para a disposição da página o recomendado seria usar CSS.
Para desenvolver um site usando tabelas muitas ferramentas e desenvolvedores abusam de recursos como criar tabelas com células possuindo elementos com Gifs com um único pixel transparente apenas para manter a célula visível e forçar o layout da página ficar visualmente elegante, porém o código torna-se totalmente incoerente se comparado com o conteúdo do site. A W3C também não desaprova o uso de tabelas, desde que elas sejam utilizadas para tabular dados e não para formatar layout. Muitos navegadores travam ou exibem incorretamente formatações usando tabelas.
Pra quem ainda não conhece o termo tableless ou não sabe como usá-lo, eis aqui mais uma fonte para o aprendizado.
Desenvolver sites em tableless não significa apenas desenvolver sites sem utilizar tabelas, mas sim em seguir padrões e utilizar tabelas onde é necessário. Vamos entender o porquê que antigamente os desenvolvedores utilizavam tabelas ao desenvolver.
No início da web os navegadores eram poucos: Netscape, Mozaic e Lynx. E pra atrapalhar a vida dos desenvolvedores a Microsoft lança mais um concorrente, o Internet Explorer. Após o lançamento do IE’ca, Netscape declara guerra a fim de buscar adeptos. Guerra essa que ficou conhecida como “Guerra dos browsers”. Como a W3C ainda não tinha seus padrões definidos, os navegadores foram lançados com padrões próprios.
Os browsers tinham seus próprios padrões… Já os desenvolvedores não conseguiam criar um único código que funcionasse nos dois navegadores. Por este motivo, eles eram obrigados a desenvolver, na maioria das vezes, para apenas um browser. Isso trouxe mais um problema, agora para os usuários. O usuário que usava Netscape, não conseguia acessar sites que eram feitos para Internet Explorer, e vice-versa. — Tableless
Como não havia os padrões de CSS para auxiliar na parte gráfica, restou recorrer para o modo tabelado, ou seja, utilizar tabelas para estruturar o site e slices de imagens para compor o design.
As diferenças
A forma de escrever o código muda muito e favorece a técnica tableless, vejamos a forma antiga:
Como disse no quarto parágrafo, utilizar tabela aninhada (uma dentro da outra) era a única forma que havia para se estruturar o site. Naquela época isso era “lindo”, já hoje…
Agora vejamos a forma atual:
Note que não há tabela neste trecho de código. Como disse anteriormente, desenvolver em tableless não significa não usar tabelas, mas sim utilizar em seu devido lugar.
A grande diferença entre uma técnica e outra é que desenvolver em tableless faz com que seu site seja cross browser, ou seja, independente do navegador que o usuário estiver utilizando, teu site será acessível.
Agora, se ele vai ficar 100% idêntico em todos os navegadores são outros 500. Daí você deve estar se perguntado: “mas por quê?” Simples! Porque cada navegador tem seu próprio renderizador de código e cada um reage de uma forma; tem seu próprio espaçamento de caracteres e algumas outras diferenças bobas que talvez podem lhe trazer problemas.
Que saber mais, venha e faça parte da McTech Tatuapé !!!
Google Analytics é um serviço gratuito e é oferecido pela Google no qual, ao ativar-se o serviço por intermédio de uma conta do Google, e ao cadastrar-se um site recebe-se um código para ser inserido na página cadastrada e, a cada exibição, estatísticas de visitação são enviadas ao sistema e apresentadas ao dono do site. Foi criado principalmente como um auxilio aos webmasters para otimizar seus sites para campanhas de marketing e para o Google AdSense.
O sistema foi modelado com o sistema de estatísticas Urchin, da Urchin Software Corporation, adquirida pela Google em abril de 2005. Ainda hoje o sistema Urchin original para instalação em computadores é vendido pela Google como um novo pacote.
Recursos
O Analytics é capaz de identificar além da tradicional taxa de exibição e hit de uma página, localização geográfica do visitante, forma com a qual chegou na página (através de links de outros sites, buscador, AdSense ou diretamente pelo endereço), sistema operacional, navegador, navegador e sistema operacional combinados e suas versões, resolução de tela, Java_(linguagem_de_programação), reprodutor de flash instalado, entre outros, em períodos diários, semanais, mensais e anuais.
Embora muitas pessoas vejam o Google Analytics apenas como uma ferramenta de monitoramento de tráfego essa ferramenta na verdade funciona como uma poderosa ferramenta para tomada de decisões em negócios relacionados à Internet.
Tecnologia
O Sistema conta com um breve código javascript em cada página do site que o visitante acessar. Este código envia os dados ao Analytics, que, por sua vez, os transmite ao dono. A cada novo site cadastrado no sistema, o Google Analytics varre o código-fonte em busca do código fornecido. Caso não encontre ele continua acessando a página periodicamente até encontrar a seqüencia de caracteres prevista. Caso não encontre-a, o sistema não fornecerá dados ao cadastrante. Isto serve como uma forma de confirmar que somente o dono da página cadastre seus sites e somente ele tenha acesso aos dados.
O significado de SEO é Search Engine Optimization. Em
português ele é conhecido como Otimização de Sites, MOB e Otimização para Buscas.
O SEO nada mais é do que a otimização de uma página (ou até do site inteiro)
para ser melhor compreendido pelas ferramentas de busca. A conseqüência da
utilização das técnicas de SEO é o melhor posicionamento de um site em uma
página de resultados de uma busca. Por exemplo, ao pesquisar no Google por
“Marketing de Busca”, o primeiro resultado é este site. O SEO é uma prática sem
garantias, ou seja, nenhuma empresa ou pessoa pode garantir que seu site fique
em primeiro em uma busca, pois o único capaz disto seria o próprio site de
busca como o Google ou o Yahoo.
O SEO surgiu com a nova geração de sites de busca. Antes
dela, a organização do links em uma páginas de resultado era alfabética como
nos diretórios web. Na nova geração de ferramentas de busca, o posicionamento
passou a depender da relevância. Esta relevância é definida por algoritmos, que
são cálculos que servem para definir o quanto uma página é importante. Um dos
mais conhecidos algoritmos de busca é o Google PageRank.
Os fatores que influenciam o posicionamento das páginas são
guardado a sete chaves pelos site de busca. Porém, ao longo do tempo, foi
possível identificar as melhores práticas que se resumem em empregar o bom
senso na criação e estruturação de um site. O SEO também depende da palavra-chave
que é o termo que você usa em um busca. Dependendo de quais palavras você
utiliza, serão retornadas páginas diferentes em posições diferentes.
O SEO pode ser dividido em duas partes. Fatores internos e
fatores externos. Os internos são relacionados ao site. Alguns exemplos são
urls claras, utilização dos padrões web, títulos de página racionais e a
correta utilização das tags html que é linguagem utilizada para construir
páginas web. Já a parte externa analisa como os outros sites se relacionam com
o site. Os exemplos são quantidade de links apontando para o site, quais sites
apontam o site e o conteúdo do link apontado. Dependendo destes fatores, as
páginas são pontuadas pelos sites de busca para que ele possa determinar a
relevância da pagina e quais as palavras-chave relacionadas a ela. O Google
utiliza um sistema de pontuação de 0 a 10 que é o PageRank.
Existe também o lado negro do SEO conhecido como Black Hat
Seo. Nele, são utilizadas técnicas que tentam enganar os algoritmos das
ferramentas de busca para melhorar o posicionamento da página como uso de texto
invisível ou de exibir conteúdo diferente para pessoas e sites de busca. Quando
descobertos, os sites de busca podem punir os sites que utilizam estas práticas
diminuindo a importância do site ou chegando a excluí-lo da sua busca.
Não se deve confundir o SEO com links patrocinados, pois no
segundo você pode pagar para ter a garantia de ficar na frente de outros
resultados, podendo ficar até em primeiro se estiver disposto a pagar o preço.
Conheça algumas ferramentas SEO que podem ajudá-lo no
processo de otimização do seu site.
GOSTOU??? VENHA FAZER PARTE DA MCTECH TATUAPÉ E DOMINE ESTA MARAVILHOSA FERRAMENTA !!!!
Adobe Dreamweaver é o famoso aplicativo de web design desenvolvido pela gigante Adobe, com o objetivo de oferecer uma ferramenta para a modelagem de páginas da internet.
O programa conta com uma interface limpa e simplificada, com ferramentas e recursos de edição visual e suporte completo ao HTML5, CSS3 e jQuery.
Além disso, o aplicativo está integrado ao Creative Cloud, fazendo com que você receba as atualizações mais recentes no momento em que elas são lançadas. Da mesma forma, devido a esse recurso também é possível compartilhar projetos diretamente na aplicação e receber feedback de outros profissionais.
Baixando a aplicação
Após acessar o link do Baixaki, é realizado o download do pacote Creative Cloud e é preciso fazer a instalação do aplicativo normalmente. Uma vez concluído o processo, você deve realizar o login com o seu ID da Adobe. Se você ainda não tiver uma conta, ela pode ser criada diretamente na tela da aplicação.
Assim que você efetuar o login na sua conta, procure o Adobe Dreamweaver na lista de programas e clique em “Instalar”. Feito isso, o procedimento é iniciado imediatamente e você pode acompanhar o andamento da operação por meio da barra de progresso exibida na tela.
Facilitando o desenvolvimento
Para quem ainda não conhece o produto, se trata de uma solução integrada para desenvolver conteúdo web. A interface do programa é moderna e possui uma organização adequada, destinando a porção central para a inserção do código. Além de você trabalhar com a sintaxe propriamente dita, o aplicativo também conta com um setor de design visual no estilo WYSIWYG.
Na lateral esquerda da tela são dispostas algumas ferramenta comumente utilizadas na forma de botão, embora vários recursos estejam disponíveis também na parte direita da tela e nos menus. O programa conta com suporte a várias tecnologias, estando entre elas HTML, CSS, LESS, SaSS, JavaScript, PHP e XML.
Recursos do programa
O programa conta com um editor de CSS com atualizações em tempo real. Dessa forma é possível observar os resultados do seu trabalho enquanto você edita o código, evitando o retrabalho ou ter que retomar determinada parte posteriormente para fazer ajustes. Outro recurso interessante é o layout de grade fluído, ideal para o design de projetos exibidos em telas de tamanhos diferentes (como quem desenvolve para desktops e smartphones, por exemplo).
Além disso, você pode utilizar os recursos da Adobe Edge Web Fonts para fazer uma tipografia única e adequada ao site que você precisa modelar. Devido à integração com o Creative Cloud, também é possível importar composições diretamente do Edge Animate e de outros produtos da Adobe.
O programa possui suporte também à sincronização das suas configurações, permitindo que você acesse os seus arquivos e definições de site em qualquer computador na qual ele esteja instalado. Para quem trabalha com projetos em dispositivos móveis, o Adobe Dreamweaver também apresenta suporte ao PhoneGap Build.
Assim, você pode converter páginas em HTML existentes para aplicativos móveis, com compatibilidade para Android e iOS. Da mesma forma, é possível criar sites dinâmicos tendo como base sistemas de gerenciamento de conteúdo como o WordPress, Drupal e Joomla!. Além disso, o programa conta com um serviço de validação de marcação do W3C.
Dessa forma, você garante que as suas páginas estejam bem desenvolvidas e corretamente adequadas aos padrões oficiais.
Conheça este maravilhoso programa e outros em nosso curso iWeb !!!
11:05
Unknown
Além dessas novas funcionalidades, um sistema dinâmico de extração de códigos CSS está disponível; elementos como cor, fonte, gradiente e proporção podem ser agora copiados diretamente à planilha de trabalho de editores HTML (como o Adobe Dreamweaver CS6). Uma nova jQuery Mobile, performance otimizada de uso de ferramentas e a possibilidade de criação de extensões acessíveis a APIs são outras das propriedades de Adobe Fireworks CS6.
Pode ser que pessoas já familiarizados com versões anteriores do programa observem algumas diferenças no posicionamento de certas ferramentas. Ainda assim, as principais caracterísitcas e funcionalidades do programa podem ser facilmente encontradas.
Configure imagens em bitmap, vetores, wireframes e mock-ups de forma a manter a precisão e nitidez de cada pixel mesmo quando os arquivos forem exibidos em altas resoluções. Essas são, por óbvio, apenas algumas das implementações trazidas por esta nova versão de Fireworks CS6. Contudo, é certo que em pouco tempo pessoas mais experientes logo vão se acostumar com as novidades do programa, utilizando-as da melhor forma possível.
