WORDPRESS Tutorial básico en 3 minutos

http://www.youtube.com/watch?v=5RejzXekakI

 

Magento ou Prestashop? Artigo com comparação

artigo interessante falando sobre uma comparação:

Traduz os pontos principais:
Tamanho do Software:
Presta – 2.2 MB (1292 files)
Magento 10.3 Mb (5521 files)
Presta parece muito mais leve quando comparado com Magento que é enorme ( olhe os arquivos).

Licença
Presta e Magento ambos são oferecidos sob Open Software License (OSL )

Instalação
Presta – Os requisitos de instalação são menores ( Depende da biblioteca GD do PHP )
Magento – Maior dor de cabeça. Precisa de um monte de extensões como PDO, CURL, etc…
Mas não se preocupe muito com isso, pois muitos hosts oferecem a maior parte desses requisitos.

Características

Presta – Prestoshop dá ênfase na pesquisa, é impressionante. A busca em sua interface parece mais rápido do magento e é com base na pontuação para trazer relevância da pesquisa. Desenvolvedores do Prestoparecem ter passado algum tempo neste requisito sabendo que a pesquisa é talvez uma das características mais importantes de uma loja de comércio eletrônico. Alguns recursos que chamou minha atenção foram –

– Pesquisa de Alias ​​. Gerenciar uma lista, Alias, ​​Pesquisa de termos de busca antecipada digitadas pelos visitantes. Esta também poderia ser útil para as diferenças lingüísticas entre as regiões. Por exemplo, uma pesquisa por apartamento ou apartamentos ou apart * pode ainda resultar em um acerto para o apartamento, como poderiam apartamento ou alojamento, se a lista de Pesquisa Alias ​​é configurado dessa forma.

– RSS feeds

Magento – Magento está atualmente à frente dos recursos que o Presto oferece. Grupos de clientes, comparação de produtos, Componentes CMS já estão no Magento . Características de SEO são novamente características matadores. Pacotes e design no Magento são superiores a outros recursos do Presta ‘s. Controle multi- loja Magento é muito poderoso.

Código & Arquitetura
Presta – Object Oriented para uma extensão. Os módulos do núcleo e entidades são orientadas a objeto. E customizações nas partes não- POO pode torná-lo feio.

Magento – Obsessivamente Orientada a Objetos. Mas como uma pessoa a personalização do site, isso ajuda muito e uma vez que você aprender o básico, o mundo é o limite para o que você pode fazer com Magento. Magento é baseado no Zend Framework ( algumas polêmicas aqui – Zend Framework tem sido muitas vezes referido um porco desempenho no servidor – que, pessoalmente, gosto de ouvir porque Magento foi preferido para ser desinged sobre Zend Framework )
Magento é baseado em alguns padrões de design de som, como Front Controller e separa a concepção da lógica.

Magento fará bem para se concentrar mais em pesquisa e em outros aspectos cruciais como o sistema de afiliados, que são muito importantes.

A flexibilidade do projeto

Acho Presto utiliza um sistema de templates Smarty e Javascript baseado em Jquery. A codificação OOP oferece muita flexibilidade. O sistema Plus Magento Project parece ser bem pensado e muito poderoso. Eu não arrisco muito em design em Magento. Mas isso é uma sensação que eu tive do forum.

Comunidade e Apoio Profissional
Presta – No momento da publicação desta, os usuários online foi de 9.
Magento – usuários on-line em fóruns é geralmente mais de 100. Máximo, como as citações no site foi 600 no dia dos namorados.

Comunidade Magento é maravilhoso com alguns membros da comunidade apaixonados (como eu). Além disso, a abordagem da equipe de Magneto para envolver a comunidade de uma forma faseada e em parceria é muito louvável e re – assegurar.

Magento: tutoriais em vídeo, screencasts são novamente imensamente útil.

Fonte: http://www.magentocommerce.com/boards/viewthread/3957/

Dicas para o Exame 70-480 Programming in HTML5 with JavaScript and CSS3

 

Para agendar a prova faça seu cadastro no http://www.register.prometric.com/Index.asp – Selecionar a prova 70-480, na hora de forma de pagamento você vai em promotional voucher e joga o texto HTMLJMP.

Treinamentos no MVA(Se o seu cadastro no MVA for brasileiro alterar para United States)

Desenvolver Aplicativos para HTML5 Iniciar (01a): HTML5 Estrutura Semântica, Parte 1 http://www.microsoftvirtualacademy.com/tracks/developing-html5-apps-jump-start

Novas certificações Web applications: http://www.microsoft.com/learning/en/us/certification/cert-mcsd-web-applications.aspx

Novas certificações Windows 8: http://www.microsoft.com/learning/en/us/certification/mcsd-windows-store-apps.aspx

Apostila de HTML5:  http://www.w3c.br/pub/Cursos/CursoHTML5/html5-web.pdf

Apostila CSS3:  http://www.w3c.br/pub/Cursos/CursoCSS3/css-web.pdf

Vídeo de algumas Novidades do HTML5 e CSS3

Ou uma sério de videos mais completa

 

Apostila de HTML5 http://www.w3c.br/pub/Cursos/CursoHTML5/html5-web.pdf

Apostila CSS3 http://www.w3c.br/pub/Cursos/CursoCSS3/css-web.pdf

 

CSS3 cantos arredondados

Adicionando cantos arredondados em CSS2 foi complicado. Tivemos de usar imagens diferentes para cada canto.

Em CSS3, criando cantos arredondados é fácil.

Em CSS3, a propriedade border-radius é usado para criar cantos arredondados:

Exemplo

Adicionar cantos arredondados a um elemento div:

div
{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
}

Apostila de HTML5 http://www.w3c.br/pub/Cursos/CursoHTML5/html5-web.pdf

Apostila CSS3 http://www.w3c.br/pub/Cursos/CursoCSS3/css-web.pdf

Vídeo: NCIS Los Angeles Microsoft Surface(tablet)

Test Drive do Internet Explorer 10!

RoboHornet Pro

RoboHornet encontra o mundo real

Bubbles

IE10 de bolhas de desempenho para o topo

Índice de referência do quadro

IE10 tem outros navegadores para a escola

Superfície navegador

Experiência de toque macio e sedoso navegador

Adaptação de layout

Tire sua disposição para qualquer dispositivo

Explorando Error.stack

Depuração de JavaScript com Error.Stack

O compartilhamento do Windows 8

Nada participação de IE10 no Windows 8

Peixe Beta do IE

100% CSS – JavaScript 0% – todos os peixes

Fixando local no Windows 8

Windows 8 prendeu demonstração locais

Use a fonte inteiro

OpenType em navegadores modernos

Blob Builder

Do lado do cliente de construção dinâmica de arquivos

Inspector arquivo binário

Ler o conteúdo de arquivos usando matrizes digitados

Aceleração da partícula

Fissão nuclear alimentado navegando

Plataforma Windows 8 Web

Experimente os recursos da plataforma novos

Efeitos de toque

Toque seu caminho para uma experiência mais rápida

Fishbowl

Encontre o seu peixe interior.

Demos mais

http://ie.microsoft.com/testdrive/Default.html

Baixe http://ie.microsoft.com/testdrive/Info/Downloads/Default.html

Drag-n-drop, Correção Ortográfica e barra de rolagem no HTML 5

Drag and Drop

A API de Drag and Drop é relativamente simples. Basicamente, inserir o atributo

draggable=”true” num elemento o torna arrastável. E há uma série de eventos que você pode

tratar. Os eventos do objeto sendo arrastado são:

dragstart	O objeto começou a   ser arrastado. O evento que a função recebe tem um atributo target, que contém   o objeto sendo arrastado.
drag	O objeto está sendo   arrastado.
dragend	A ação de arrastar   terminou.

 

O objeto sobre o qual outro é arrastado sofre os seguintes eventos:

dragenter	O objeto sendo   arrastado entrou no objeto target.
dragleave	O objeto sendo   arrastado deixou o objeto target.
dragover	O objeto sendo   arrastado se move sobre o objeto target.
drop	O objeto sendo   arrastado foi solto sobre o objeto target.

 

Detalhes importantes:

A ação padrão do evento dragover é cancelar a ação de dragging atual. Assim, nos objetos que devem receber drop, é preciso setar uma ação de dragover com, no mínimo, return false.

Seleções de texto são automaticamente arrastáveis, não precisam do atributo draggable. E se você quiser criar uma área para onde seleções de texto possam ser arrastadas, basta tratar esses mesmos eventos.

Por fim, todas funções de tratamento de evento de drag recebem um objeto de evento que contém uma propriedade dataTransfer, um dataset comum a todos os eventos durante essa operação de drag.

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

<!DOCTYPE HTML> <html> <head> <metacontent=”text/html;charset=UTF-8” http-equiv=”content-type”/> <title>HTML5 Drag and drop demonstration</title> <style type=”text/css”> #boxA, #boxB { float:left;width:100px;height:200px;padding:10px;margin:10px; font-size:70%; } #boxA {background-color:blue; } #boxB {background-color:green; } #drag, #drag2 { width:50px;padding:5px;margin:5px;border:3pxblack solid; line-height:50px; } #drag {background-color:red;} #drag2 {background-color:orange;} </style> <script type=”text/javascript”> // Quando o usuário inicia um drag, guardamos no dataset do evento // o id do objeto sendo arrastado function dragStart(ev) { ev.dataTransfer.setData(“ID”,ev.target.getAttribute(‘id’)); } // Quando o usuário arrasta sobre um dos painéis, retornamos // false para que o evento não se propague para o navegador, o // que faria com que o conteúdo fosse selecionado. functiondragOver(ev) {return false; } // Quando soltamos o elemento sobre um painel, movemos o // elemento, lendo seu id do dataset do evento functiondragDrop(ev) { varidelt =ev.dataTransfer.getData(“ID”); ev.target.appendChild(document.getElementById(idelt)); } </script> </head> <body> <!-- Painel 1 --> <divid=”boxA” ondrop=”return dragDrop(event)” ondragover=”return dragOver(event)”> <!-- Draggable 1 --> <divid=”drag” draggable=”true” ondragstart=”return dragStart(event)”>drag me</div> <!-- Draggable 2 --> <divid=”drag2” draggable=”true” ondragstart=”return dragStart(event)”>drag me</div> </div> <!-- Painel 2 --> <divid=”boxB” ondrop=”return dragDrop(event)” ondragover=”return dragOver(event)”> </div> </body> </html>

 

 

Revisão ortográfica e gramatical

Os agentes de usuário podem oferecer recursos de revisão ortográfica e gramatical, dependendo do que houver disponível em cada plataforma. Os desenvolvedores podem controlar o comportamento dessa ferramenta através do atributo spellcheck. Inserir spellcheck=”true”num elemento faz com que a revisão esteja habilitada para ele. Você também pode desabilitar a revisão para determinado elemento, inserindo spellcheck=”false”.

SCROLL para ver E OCULTA

Rolagem em vista

UM Simples Truque, mas Muito util. Guia Você PODE Fazer:

document.getElementById (‘aviso’). scrollIntoView ()

Vai Rolar um ISSO ATÉ page Que o Elemento com o id “aviso” esteja visível não topo fazer viewport. Guia Você PODE passar hum topo parametro opcional:

document.getElementById (‘aviso’). scrollIntoView (false)

O valor padrão è verdade. Se passar Você. falsa, uma rolagem Vai deixar o Objeto visível NA Base do viewport.

escondido

Ocultar Elementos de e exibir E UMA das tarefas Mais comuns los JavaScript. Em HTML5 existe hum Atributo Específico parágrafo ISSO, o Atributo escondido. Ao inserí-lo los hum Elemento Assim:

<div hidden> Xi, se esconde! </ div>

Ou Assim:

<div hidden=”true”> Xi, se esconde! </ div>

 

Este treinamento faz parte do Microsoft Virtual Academy:http://www.microsoftvirtualacademy.com

Conteúdo Editável e campo de detalhe no HTML 5

Ainda mais formulários

Vejamos mais duas coisas que você certamente já fez mais de uma vez e foram simplificadas pelo HTML5.

Detalhes e sumário

Veja um exemplo de uso dos novos elementos details e summary:

 

1 2 3 4 5 6 7 8 9 10 11 12 13

<details> <summary>Copiando <progress max=”39248” value=”14718”> 37,5%</summary> <dl> <dt>Tamanho total:</dt> <dd>39.248KB</dd> <dt>Transferido:</dt> <dd>14.718</dd> <dt>Taxa de transferência:</dt> <dd>127KB/s</dd> <dt>Nome do arquivo:</dt> <dd>HTML5.mp4</dd> </dl> </details>

 

Veja como um agente de usuário poderia renderizar isso:

E ao clicar:

Conteúdo editável

Para tornar um elemento do HTML editável, basta incluir nele o atributo contenteditable, assim:

 

1 2 3

<div contenteditable=”true”> Edite-me... </div>

 

Você pode ler e manipular os elementos editáveis normalmente usando os métodos do DOM. Isso permite, com facilidade, construir uma área de edição de HTML.

 

Este treinamento faz parte do Microsoft Virtual Academy:http://www.microsoftvirtualacademy.com

Tipos de dados e Validadores no HTML 5

Formulários vitaminados

Conforme você deve ter percebido no último capítulo, o HTML5 avançou bastante nos recursos de formulários, facilitando muito a vida de quem precisa desenvolver aplicações web baseadas em formulários. Neste capítulo vamos avançar um pouco mais nesse assunto e, você vai ver, a coisa vai ficar ainda melhor.

autofocus

Ao incluir em um campo de formulário o atributo autofocus, assim:

<input name=”login” autofocus >

O foco será colocado neste campo automaticamente ao carregar a página. Diferente das soluções em Javascript, o foco estará no campo tão logo ele seja criado, e não apenas ao final do carregamen­to da página. Isso evita o problema, muito comum quando você muda o foco com Javascript, de o usuário já estar em outro campo, digitando, quando o foco é mudado.

Placeholder text

Você já deve ter visto um “placeholder”. Tradicionalmente, vínhamos fazendo isso:

 

1 2 3 4 5 6 7 8 9 10 11 12

<!DOCTYPE html> <html lang=”en-US”> <head> <meta charset=”UTF-8” /> <title>Placeholder, the old style</title> </head> <body> <input name=”q” value=”Search here” onfocus=”if(this.value==’Search here’)this.value=’’”> </body> </html>

 

HTML5 nos permite fazer isso de maneira muito mais elegante:

 

1 2 3 4 5 6 7 8 9 10 11 12

<!DOCTYPE html> <html lang=”en-US”> <head> <meta charset=”UTF-8” /> <title>Placeholder, HTML5 way</title> </head> <body> <input name=”q” placeholder=”Search here”> </body> </html>

 

required

Para tornar um campo de formulário obrigatório (seu valor precisa ser preenchido) basta, em HTML5, incluir o atributo required:

<input name=”login” required>

maxlength

Você já conhecia o atributo maxlength, que limita a quantidade de caracteres em um campo de formulário. Uma grande lacuna dos formulário HTML foi corrigida. Em HTML5, o elemento tex­tarea também pode ter maxlength!

Validação de formulários

Uma das tarefas mais enfadonhas de se fazer em Javascript é validar formulários. Infelizmente, é também uma das mais comuns. HTML5 facilita muito nossa vida ao validar formulários, tornando automática boa parte do processo. Em muitos casos, todo ele. Você já viu que pode tornar seus campos “espertos” com os novos valores para o atributo type, que já incluem validação para datas, emails, URLs e números. Vamos um pouco além.

pattern

O atributo pattern nos permite definir expressões regulares de validação, sem Javascript. Veja um exemplo de como validar CEP:

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<!DOCTYPE html> <html lang=”pt-BR”> <head> <meta charset=”UTF-8” /> <title>O atributo pattern</title> </head> <body> <form> <label for=”CEP”>CEP: <input name=”CEP” id=”CEP” required pattern=”d{5}-?d{3}” /> </label> <input type=”submit” value=”Enviar” /> </form> </body> </html>

 

novalidate e formnovalidate

Podem haver situações em que você precisa que um formulário não seja validado. Nestes casos, basta incluir no elemento form o atributo novalidate.

Outra situação comum é querer que o formulário não seja validado dependendo da ação de submit. Nesse caso, você pode usar no botão de submit o atributo formnovalidate. Veja um exemplo:

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<!DOCTYPE html> <html lang=”pt-BR”> <head> <meta charset=”UTF-8” /> <title>Salvando rascunho</title> <style> label{display:block;} </style> </head> <body> <form> <label>nome: <input name=”nome” required></label> <label>email: <input name=”email” type=”email” required></label> <label>mensagem: <textarea name=”mensagem” required></textarea></label> <input type=”submit” name=”action” value=”Salvar rascunho” formnovalidate> <input type=”submit” name=”action” value=”Enviar”> </form> </body> </html>

 

Custom validators

É claro que as validações padrão, embora atendam a maioria dos casos, não são suficientes para todas as situações. Muitas vezes você vai querer escrever sua própria função de validação Javascript. Há alguns detalhes na especificação do HTML5 que vão ajudá-lo com isso:

1. O novo evento oninput é disparado quando algo é modificado no valor de um campo de formulário. Diferente de onchange, que é disparado ao final da edição, oninput é disparado ao editar. É diferente também de onkeyup e onkeypress, porque vai capturar qualquer modi­ficação no valor do campo, feita com mouse, teclado ou outra interface qualquer.

2. O método setCustomValidity pode ser invocado por você. Ele recebe uma string. Se a string for vazia, o campo será marcado como válido. Caso contrário, será marcado como inválido.HTML 5 – Curso W3C Escritório Brasil 41 Formulários e Multimídia

Com isso, você pode inserir suas validações no campo de formulário e deixar o navegador fazer o resto. Não é mais preciso capturar o evento submit e tratá-lo.

 

Este treinamento faz parte do Microsoft Virtual Academy:http://www.microsoftvirtualacademy.com