Criando efeitos 3D com elementos HTML, Aprendendo o básico das Expressões Regulares

• Postado: 11:26
• |
• Autor: Francisco Luz
• |
• Tags: doctype.tv, Expressões Regulares, HTML, Internet e Tecnologia, RegExp, Tutorial, Webdesigner, Webmaster

Nesse episódio legendado de DocType iremos aprender duas lições, a primeira na área de designing com o Nick ensinando como organizar os elementos HTML de forma a criar a sensação de profundidade. Em seguida o Jim ensina tudo que você precisa saber para dar o primeiros passos no mundo das expressões regulares.

Se você gostou deste artigo, por favor ajude a divulga-lo enviando para seus amigos ou através das opções das redes sociais no final desta página.

Veja abaixo a íntegra das legendas do vídeo acima.

<br /> 1<br /> 00:00:00,000 --> 00:00:04,070<br /> A seguir no DocType, iremos lhe mostrar coisas em 3D<br /> <br /> 2<br /> 00:00:04,070 --> 00:00:08,800<br /> na verdade! só irei falar de profundidade e webdesign, o qual também é maneiro...<br /> <br /> 3<br /> 00:00:08,800 --> 00:00:13,380<br /> depois mostraremos como se expressar com ”RegExp”<br /> <br /> 4<br /> 00:00:13,380 --> 00:00:18,390<br /> coloque seus óculos de 3D porque é hora de DocType<br /> <br /> 5<br /> 00:00:31,300 --> 00:00:36,210<br /> Publicidade...<br /> <br /> 6<br /> 00:00:36,330 --> 00:00:37,930<br /> Eu sou Nick Pettit...<br /> <br /> 7<br /> 00:00:37,940 --> 00:00:39,000<br /> e eu sou Jim Hoskins...<br /> <br /> 8<br /> 00:00:39,000 --> 00:00:40,480<br /> E você está assistindo DocType<br /> <br /> 9<br /> 00:00:40,480 --> 00:00:43,530<br /> para o designer que pensar que JS é um latte descafeinado...<br /> <br /> 10<br /> 00:00:43,530 --> 00:00:45,790<br /> ou para o Developer que não diferencia a ”margin” do ”padding”<br /> <br /> 11<br /> 00:00:45,790 --> 00:00:48,430<br /> DocType tem as últimas dicas e ferramentas para fazer<br /> <br /> 12<br /> 00:00:48,430 --> 00:00:50,050<br /> se tornar o imperador da InterWebs<br /> <br /> 13<br /> 00:00:50,050 --> 00:00:54,460<br /> então... flash vs HTML5 debate tá no ar<br /> <br /> 14<br /> 00:00:54,460 --> 00:00:57,670<br /> assim Apple postou suas ideias no flash<br /> <br /> 15<br /> 00:00:57,670 --> 00:01:01,380<br /> youtube developer blog também postaram o que eles pensam<br /> <br /> 16<br /> 00:01:01,380 --> 00:01:05,930<br /> e no momento eles estão um pouco a favor do flash<br /> <br /> 17<br /> 00:01:05,930 --> 00:01:08,800<br /> tem um monte de coisas que o HTML5 video não suporta<br /> <br /> 18<br /> 00:01:08,800 --> 00:01:12,030<br /> tais como, streaming com diferentes ”bare rates”<br /> <br /> 19<br /> 00:01:12,030 --> 00:01:15,640<br /> ser capaz de ler o arquivo sem precisar baixa-lo por completo<br /> <br /> 20<br /> 00:01:15,640 --> 00:01:17,760<br /> tem a questão também de suporte para alguns dispositivos<br /> <br /> 21<br /> 00:01:17,760 --> 00:01:21,530<br /> e outras coisas mais... não suporta webcams e SDRM<br /> <br /> 22<br /> 00:01:21,530 --> 00:01:25,550<br /> resumindo, HTML5 video tá crescendo e se aperfeiçoando mas<br /> <br /> 23<br /> 00:01:25,550 --> 00:01:26,750<br /> não chegueu lá ainda<br /> <br /> 24<br /> 00:01:26,750 --> 00:01:30,660<br /> por enquanto não podemos dizer adeus para o flash completamente<br /> <br /> 25<br /> 00:01:30,660 --> 00:01:31,640<br /> mas tá quase...<br /> <br /> 26<br /> 00:01:31,640 --> 00:01:33,500<br /> tudo tem seu lugar acredito eu<br /> <br /> 27<br /> 00:01:33,500 --> 00:01:37,290<br /> agora eu irei falar de profundidade em webdesign<br /> <br /> 28<br /> 00:01:37,290 --> 00:01:40,000<br /> e eu mostrarei como encontrar qualquer coisa usando ”RegExp”<br /> <br /> 29<br /> 00:01:40,010 --> 00:01:41,390<br /> manda vê!<br /> <br /> 30<br /> 00:01:41,390 --> 00:01:43,690<br /> PROFUNDIDADE<br /> <br /> 31<br /> 00:01:43,690 --> 00:01:46,360<br /> Criar uma sensação de profundidade em uma webpage<br /> <br /> 32<br /> 00:01:46,370 --> 00:01:48,640<br /> soa como uma tarefa impossível<br /> <br /> 33<br /> 00:01:48,640 --> 00:01:51,750<br /> se a tela é lisa, como podemos fazer parecer 3D?<br /> <br /> 34<br /> 00:01:51,750 --> 00:01:54,040<br /> o truque é pensar em camadas<br /> <br /> 35<br /> 00:01:54,040 --> 00:02:01,810<br /> um página com um plano de fundo, meio e frente você pode criar a sensação de profundidade<br /> <br /> 36<br /> 00:02:01,810 --> 00:02:04,910<br /> a teoria das cores diz que cores frias aparentam está mais fundas<br /> <br /> 37<br /> 00:02:04,910 --> 00:02:08,540<br /> enquanto cores quentes aparentam está mais perto do usuário<br /> <br /> 38<br /> 00:02:08,540 --> 00:02:16,070<br /> essa não é uma regra absoluta, mas facilita se você escolhar cores escuras para o fundo<br /> <br /> 39<br /> 00:02:16,070 --> 00:02:18,570<br /> e toms quentes na camada da frente<br /> <br /> 40<br /> 00:02:18,570 --> 00:02:21,790<br /> por example, se você olhar a home page da DocType<br /> <br /> 41<br /> 00:02:21,790 --> 00:02:24,310<br /> as películas com toms quentes pulam pra frente<br /> <br /> 42<br /> 00:02:24,310 --> 00:02:27,880<br /> quando configurados contra o plano de fundo em azul e cinza<br /> <br /> 43<br /> 00:02:27,880 --> 00:02:29,590<br /> ILUMINAÇÃO<br /> <br /> 44<br /> 00:02:29,590 --> 00:02:32,890<br /> uma vez que você tenha construido o seu cenário com diferentes elementos em camadas<br /> <br /> 45<br /> 00:02:32,890 --> 00:02:34,790<br /> você deve aplicar alguns efeitos de iluminação<br /> <br /> 46<br /> 00:02:34,790 --> 00:02:37,760<br /> para separar os dois planos 2D no espaço<br /> <br /> 47<br /> 00:02:37,760 --> 00:02:39,930<br /> antes de começar a iluminar o seu cenário<br /> <br /> 48<br /> 00:02:39,930 --> 00:02:43,290<br /> considere primeiro alguns detalhes sobre a fonte de luz<br /> <br /> 49<br /> 00:02:43,290 --> 00:02:45,310<br /> em qual direção tá vindo?<br /> <br /> 50<br /> 00:02:45,310 --> 00:02:46,620<br /> qual é a cor da luz?<br /> <br /> 51<br /> 00:02:46,620 --> 00:02:48,060<br /> e qual o nível de brilho?<br /> <br /> 52<br /> 00:02:48,060 --> 00:02:49,260<br /> e assim vai...<br /> <br /> 53<br /> 00:02:49,260 --> 00:02:51,970<br /> obviamente existem vários fatores para serem considerados aqui<br /> <br /> 54<br /> 00:02:51,970 --> 00:02:54,910<br /> que podem ser usados para criar alguns efeitos de iluminação bem complexos<br /> <br /> 55<br /> 00:02:54,910 --> 00:02:57,480<br /> quando a luz atinge diferentes elementos da página<br /> <br /> 56<br /> 00:02:57,480 --> 00:02:59,980<br /> sombras devem ser criadas nas camadas inferiores<br /> <br /> 57<br /> 00:02:59,980 --> 00:03:07,260<br /> adicionalmente, você pode adicionar destaques nas bordas dos elementos da página e de texto<br /> <br /> 58<br /> 00:03:07,270 --> 00:03:11,360<br /> por último, você deve adicionar destaques em gradação para os elementos de curva<br /> <br /> 59<br /> 00:03:11,360 --> 00:03:13,730<br /> como botões, para melhor definir sua forma<br /> <br /> 60<br /> 00:03:13,730 --> 00:03:18,780<br /> fique ligado porque quando voltarmos o Jim vai falar sobre RegExp<br /> <br /> 61<br /> 00:03:18,780 --> 00:03:58,180<br /> Publicidade...<br /> <br /> 62<br /> 00:03:58,180 --> 00:04:01,040<br /> RegExp nos ajuda a verificar se uma amostra<br /> <br /> 63<br /> 00:04:01,040 --> 00:04:02,090<br /> aparece em uma string<br /> <br /> 64<br /> 00:04:02,090 --> 00:04:04,400<br /> mostrarei como usa-las em JavaScript<br /> <br /> 65<br /> 00:04:04,400 --> 00:04:09,860<br /> se você não tá familiarizado com as regras das RegExp<br /> <br /> 66<br /> 00:04:09,870 --> 00:04:10,980<br /> talvez elas possam parecer intimidadoras<br /> <br /> 67<br /> 00:04:10,980 --> 00:04:13,500<br /> mas uma vez que você aprender as partes básicas de uma RegExp<br /> <br /> 68<br /> 00:04:13,500 --> 00:04:16,030<br /> você poderá encontrar praticamente qualquer amostra em uma string<br /> <br /> 69<br /> 00:04:16,030 --> 00:04:18,380<br /> Uma RegExp é constituida de duas partes<br /> <br /> 70<br /> 00:04:18,380 --> 00:04:22,430<br /> uma string que pode usar letras, caracteres e sequências especiais<br /> <br /> 71<br /> 00:04:22,430 --> 00:04:24,700<br /> que define a amostra que você gostaria de procurar<br /> <br /> 72<br /> 00:04:24,700 --> 00:04:28,370<br /> e os modificadores os quais fazem a expressão regular agir de forma diferente<br /> <br /> 73<br /> 00:04:28,370 --> 00:04:31,090<br /> por exemplo, aceitar ambos maiúsculos e menúsculos<br /> <br /> 74<br /> 00:04:31,090 --> 00:04:33,750<br /> cada modificador é representado por um único caractere<br /> <br /> 75<br /> 00:04:33,750 --> 00:04:36,360<br /> você pode definir uma RegExp em uma das duas formas<br /> <br /> 76<br /> 00:04:36,360 --> 00:04:43,170<br /> primeira opção, podemos chamar new RegExp, a string da amostra e a string do modificador<br /> <br /> 77<br /> 00:04:43,170 --> 00:04:46,760<br /> entretanto, JS oferece uma sintaxe mais curta para criar RegExp<br /> <br /> 78<br /> 00:04:46,760 --> 00:04:48,620<br /> com o uso de barras<br /> <br /> 79<br /> 00:04:48,620 --> 00:04:52,410<br /> uma barra inicia a amostra e a próxima barra finaliza a amostra<br /> <br /> 80<br /> 00:04:52,410 --> 00:04:59,290<br /> e opcionalmente, os caracteres modificadores podem ser colocados logo depois<br /> <br /> 81<br /> 00:04:59,290 --> 00:05:01,950<br /> BUSCAS SIMPLES<br /> <br /> 82<br /> 00:05:01,950 --> 00:05:04,970<br /> você pode pesquisar por simples palavras ou frases em uma RegExp<br /> <br /> 83<br /> 00:05:04,970 --> 00:05:05,970<br /> sem precisar usar nenhum modificador<br /> <br /> 84<br /> 00:05:05,970 --> 00:05:11,700<br /> os caracteres de A à Z e 0 à 9 quando colocados em uma RegExp<br /> <br /> 85<br /> 00:05:11,700 --> 00:05:14,260<br /> normalmente significa que você tá buscando somente por aqueles caracteres especificos<br /> <br /> 86<br /> 00:05:14,260 --> 00:05:18,670<br /> usaremos a função match com uma RegExp como parâmetro<br /> <br /> 87<br /> 00:05:18,670 --> 00:05:22,110<br /> para processar a string o qual retornar os resultados encontrados<br /> <br /> 88<br /> 00:05:22,110 --> 00:05:26,910<br /> então por exemplo, se processarmos match com a RegExp contendo a letra ”a”<br /> <br /> 89<br /> 00:05:26,910 --> 00:05:30,840<br /> na string ”orange” o resultado é uma array com ”a”<br /> <br /> 90<br /> 00:05:30,840 --> 00:05:34,060<br /> mas se processarmos a mesma RegExp na string ”purple”<br /> <br /> 91<br /> 00:05:34,060 --> 00:05:36,310<br /> o resultado é ”null” porque não há ”a” em ”purple”<br /> <br /> 92<br /> 00:05:36,310 --> 00:05:40,630<br /> você pode colocar multiplos caracteres juntos para buscar por palavras ou frases<br /> <br /> 93<br /> 00:05:40,630 --> 00:05:42,220<br /> ou uma sequência de caracteres<br /> <br /> 94<br /> 00:05:42,230 --> 00:05:46,590<br /> por exemplo, podemos usar ”doll” e encontraremos em ”I have 2 dollars”<br /> <br /> 95<br /> 00:05:46,590 --> 00:05:50,200<br /> podemos também usar ”2 dollars” para encontrar a frase ”2 dollars”<br /> <br /> 96<br /> 00:05:50,210 --> 00:05:52,810<br /> CARACTERES ESPECIAIS<br /> <br /> 97<br /> 00:05:52,820 --> 00:05:55,520<br /> Existem vários caracteres especiais em RegExp<br /> <br /> 98<br /> 00:05:55,530 --> 00:05:58,990<br /> mas as mais comuns são o ? * e +<br /> <br /> 99<br /> 00:05:59,000 --> 00:06:04,150<br /> o ? diz que o caractere anterior é opcional, pode aparecer 0 vezes ou 1 vez<br /> <br /> 100<br /> 00:06:04,150 --> 00:06:07,620<br /> por exemplo, se quizermos buscar pelas diferentes formas de se escrever a palavra ”cor” em inglês<br /> <br /> 101<br /> 00:06:07,620 --> 00:06:14,310<br /> então usamos ”colou?r”, o que quer dizer que o ”u” é opcional<br /> <br /> 102<br /> 00:06:14,310 --> 00:06:15,780<br /> assim podemos soletrar ”cor” nas duas formas<br /> <br /> 103<br /> 00:06:15,780 --> 00:06:19,400<br /> o * é como o ? mas permite que o caractere anterior apareça<br /> <br /> 104<br /> 00:06:19,400 --> 00:06:22,500<br /> 0 vezes, 1 vez ou várias vezes seguidas<br /> <br /> 105<br /> 00:06:22,500 --> 00:06:26,660<br /> por exemplo, a string /ah*/ vai buscar pela lestra ”a”<br /> <br /> 106<br /> 00:06:26,660 --> 00:06:31,390<br /> ”ah”, ”ahh” e assim vai<br /> <br /> 107<br /> 00:06:31,390 --> 00:06:35,410<br /> o + é igual o * mas o caracter anterior tem que aparecer pelo menos uma vez<br /> <br /> 108<br /> 00:06:35,410 --> 00:06:45,320<br /> então /ah+/ vai buscar por ”ah”, ”ahh” e ”ahhhh” mas não retornar null se a string conter apenas ”a”<br /> <br /> 109<br /> 00:06:45,330 --> 00:06:47,270<br /> GRUPOS<br /> <br /> 110<br /> 00:06:47,270 --> 00:06:50,570<br /> podemos buscar por multiplo caracteres usando grupos<br /> <br /> 111<br /> 00:06:50,570 --> 00:06:52,430<br /> Grupos são definidos por [ ]<br /> <br /> 112<br /> 00:06:52,430 --> 00:06:55,060<br /> qualquer caracter que estiver dentro de [ ]<br /> <br /> 113<br /> 00:06:55,070 --> 00:06:57,080<br /> se procurado na string da função match<br /> <br /> 114<br /> 00:06:57,080 --> 00:07:01,320<br /> por exemplo, se quizermos encontrar as palavras ”flips”, ”flaps” ou ”flops”<br /> <br /> 115<br /> 00:07:01,320 --> 00:07:08,240<br /> então usamos /fl[ioa]ps/<br /> <br /> 116<br /> 00:07:08,240 --> 00:07:13,360<br /> qualquer letra entre ”L” e ”p” que não seja ”i o a” será ignorada<br /> <br /> 117<br /> 00:07:13,360 --> 00:07:16,010<br /> mas se o grupo iniciar com ^ então a pesquisa considerará qualquer caractere<br /> <br /> 118<br /> 00:07:16,010 --> 00:07:20,710<br /> que não pertença ao grupo<br /> <br /> 119<br /> 00:07:20,710 --> 00:07:24,000<br /> por exemplo, se quizermos considerar qualquer caractere com excessão de vogais<br /> <br /> 120<br /> 00:07:24,000 --> 00:07:29,190<br /> então escreveremos [^aeiou]<br /> <br /> 121<br /> 00:07:29,190 --> 00:07:32,910<br /> dentro dos grupos você pode também usar concatenações de sequências<br /> <br /> 122<br /> 00:07:32,910 --> 00:07:34,900<br /> para definir grupos de caracteres continuados<br /> <br /> 123<br /> 00:07:34,900 --> 00:07:39,160<br /> por exemplo, se você quizer buscar por qualquer letra do alfabeto escreva [a-z]<br /> <br /> 124<br /> 00:07:39,160 --> 00:07:43,210<br /> ou caso queira qualquer número escreva [0-9]<br /> <br /> 125<br /> 00:07:43,210 --> 00:07:50,550<br /> se quiser tanto letras como números você tem a opção de [a-z0-9] ou [0-9a-z]<br /> <br /> 126<br /> 00:07:50,560 --> 00:07:53,100<br /> a ordem dentro de grupos não importa<br /> <br /> 127<br /> 00:07:53,100 --> 00:07:55,130<br /> um grupo age como se fosse um único caracter<br /> <br /> 128<br /> 00:07:55,130 --> 00:07:57,870<br /> ele busca por apenas um caractere dentro da string<br /> <br /> 129<br /> 00:07:57,870 --> 00:08:03,520<br /> você usar ? * ou + depois do grupo para buscar por multiplos caracteres na string<br /> <br /> 130<br /> 00:08:03,520 --> 00:08:09,030<br /> por exemplo, para buscar por um número ”integer” você pode escrever /[0-9]+/<br /> <br /> 131<br /> 00:08:09,030 --> 00:08:11,200<br /> assim retornar um ou mais números em sequência<br /> <br /> 132<br /> 00:08:11,210 --> 00:08:19,400<br /> caso queira ”integers” com excessão daqueles que comecem com zero escreva /[1-9][0-9]*/<br /> <br /> 133<br /> 00:08:19,400 --> 00:08:22,250<br /> assim buscaremos por qualquer número de 1 a 9<br /> <br /> 134<br /> 00:08:22,250 --> 00:08:25,070<br /> e opcionalmente qualquer número que vier logo afrente entre 0 e 9<br /> <br /> 135<br /> 00:08:25,080 --> 00:08:27,720<br /> essa foi apenas uma introdução básica às RegExp<br /> <br /> 136<br /> 00:08:27,720 --> 00:08:30,130<br /> existem uma tonelada de outros jeitos especiais para se buscar amostras<br /> <br /> 137<br /> 00:08:30,130 --> 00:08:31,390<br /> com o uso de RegExp<br /> <br /> 138<br /> 00:08:31,390 --> 00:08:34,320<br /> na próximo vídeo iremos ver algo um pouco mais avançado<br /> <br /> 139<br /> 00:08:34,320 --> 00:09:09,480<br /> Publicidade...<br /> <br /> 140<br /> 00:09:09,480 --> 00:09:10,500<br /> e é isso para essa semana<br /> <br /> 141<br /> 00:09:10,500 --> 00:09:17,180<br /> lembre-se de checar nossa página no facebook e twitter<br /> <br /> 142<br /> 00:09:17,180 --> 00:09:20,890<br /> caso tenha alguma pergunta que gostaria que fosse coberta em próximos<br /> <br /> 143<br /> 00:09:20,890 --> 00:09:21,800<br /> episódios do DocType, envie-nos um email para<br /> <br /> 144<br /> 00:09:21,800 --> 00:09:23,940<br /> questions@doctype.tv (tem que ser em inglês)<br /> <br /> 145<br /> 00:09:23,940 --> 00:09:36,100<br /> Legendas por Francisco Luz - http://francisco-luz.blogspot.com e http://www.outbackbrazil.com<br />

• Compartilhe:

• RSS
-->
• 
• 
•