Drupal: Como os dados são moldados dentro da estrutura de camadas

Postado: 08:55
|
Autor: Francisco Luz
|
Tags: CMF, CMS, Criar Websites, Drupal, Internet e Tecnologia, temas, Web 2.0, Webdesigner, Webmaster

Para ter total controle sobre o seu Tema no Drupal, você precisa entender como os dados são moldados no transcorrer de seu fluxo dentro das camadas (layers) do sistema.

Leia também Conceito por tras do Drupal

Imagine a linha de produção de uma fábrica onde a(s) matéria(s) primas entram de um lado, são trabalhadas (transformadas) e do outro sai o produto acabado.
As cinco principais camadas a serem consideradas são:

Na base do sistema temos uma coleção de "nodes", ou seja, um punhado de materia prima (dados) que precisa ser trabalhada (moldada) antes de apresentarmos (display) para o usuário.
A próxima camada acima é onde os módulos (plugins) residem. Módulos são tanto aqueles que compõem o núcleo do Drupal (já vem na instalação inicial) como aqueles que podem ser baixados em separado que foram desenvolvidos pela comunidade Drupal (http://drupal.org/project/modules) e que estão em constante expansão e atualização.
Assim como o Drupal propriamente dito, todos os módulos feitos pela comunidade são open source, desenvolvidos com a colaboração de indivíduos bem como grande corporações.
Na camada seguinte temos os blocos e menus. Blocos e menus são basicamente as seções da prateleira (a página do seu site) onde os dados resultantes da elaboração feita pelos módulos são colocados a disposição do tema (layout - última camada) para serem apresentados ao usuário.
Blocos podem ser configurados para apresentar dados de várias formas, bem como para aparecerem somente nas páginas que você queira ou para aparecerem somente para os usuários que você queira ou ainda uma combinação de ambos.
A seguir temos as permissões, nesta camada o sistema determina se o usuário pode ou não visualizar ou interagir com os dados acomodados na nossa prateleira.
As permissões são atribuídas aos cargos (Papeis na versão traduzida ou Roles na versão em inglês) e cada usuário, por sua vez, pode ser alocado para um ou mais papeis.
No topo temos a o tema (theme ou skin - pele) que é a camada que determina a aparência do seu site.
Essa camada é predominantemente feita de XHTML e CSS, misturado com algumas variáveis em PHP, desta forma o conteúdo gerado pelas camadas anteriores podem ser manipuladas pelo designer para que os dados finais sejam propriamente acomodadas nos lugares corretos.
Temas por si só possuem uma variedade de funções (métodos) que podem sobre-escrever as funções (métodos) padrões dos módulos para que o designer possa ter total controle sobre os marcadores html no momento que estes são gerados (output time).
Temos podem ainda serem determinados em output time conforme a(s) permissão(ões) que o usuário possua.

Esse fluxo direcional da base ao top determina como o Drupal funciona.
Aquela nova funcionalidade não tá aparecendo?
Talvés você esqueceu de ativar o módulo recém baixado. Isso faria o sistema não funcional conforme pode ser observado, de baixo para cima, na coluna "A" do diagrama acima a partir da camada "Modules".

Ou talves o novo módulo tenha sido instalado e ativado corretamente mas você esqueceu de ativar o bloco, conforme pode ser visto na coluna "B" camada "3".
Ou ainda, talvez você não tenha dado a permissão necessária aos usuários daquele grupo (papeis) conforme pode ser visto na coluna "C" camada "4".

Adicionalmente, conforme mencionado anteriormente, se você deseja ter ainda mais controle sobre o resultado XHTML (module output), então você precisa compreender esse fluxo tratado aqui.
Por exemplo, se você instalou um módulo que faz exatamente o que você precisa mas você gostaria apenas que os marcadores HTML fossem um pouquinho diferente, ou você precisa que algumas tags HTML sejam outras, ou mesmo você precisa adicionar uma ou mais classes CSS, você pode moldar o output copiando a função do módulo, que cria o output a ser modificado, para o seu tema, modifique o código para atender a sua necessidade e assim a sua alteração será considerada na última camada. Você pode ainda criar o seu próprio módulo para fazer o mesmo e assim modificar os dados ainda na camada dos módulos.

(0) Comments
RSS

Qual o conceito por trás do Drupal?

Postado: 05:42
|
Autor: Francisco Luz
|
Tags: CMF, CMS, Criar Websites, Drupal, Internet e Tecnologia, Web 2.0, Webdesigner, Webmaster

O Drupal é geralmente referido como um content management system (CMS), entretanto o mais apropriado seria referencia-lo como sendo um "content management framework" (CMF), ou seja, Drupal é bem mais configurável e customizável que um CMS convencional, tanto por módulos desenvolvidos por terceiros quanto por módulos feitos por você mesmo.

Imagine uma série de medidas onde de um lado da escala possuem coisas classificadas como "específicas" e do outro coisas classificadas como "abstratas". Agora, dentro desse espectro, as coisas "específicas" possuem forma especializada pois estas foram criadas para uma função específica, uma chave de fenda por exemplo. Já do outro lado as formas são abstratas e sem propósito definido, como uma barra de aço por exemplo. Entretanto uma barra de aço lhe trás inúmeras possibilidades, você poderia produzir uma chave de venda ou qualquer outra coisa que precisasse.

Claro que, enquanto uma barra de aço é mais configurável que uma chave de fenda, uma barra de aço não possui muita utilidade de cara pois apenas algumas pessoas sabem como trabalhar o aço, assim obvioamente que as pessoas vão prefirir ter uma chave de fenda para fazer os concertos rotineiros de suas casas, mesmo que isso signifique a compra de jogos com Philips e fenda de diferente tamanhos.

Ao usar Drupal, no entanto, você não precisa fazer essa escolha, pois Drupal é como se fosse uma única chave com várias cabeças que podem ser trocadas. Indo mais adiante com essa analogia, com o Drupal, você pode criar suas próprias cabeças caso você precise trabalhar com parafusos especiais.

Drupal mora na esquina entre específico e abstrato, sendo mais fácil de usar que os frameworks os quais você precisa escrever grande parte do código por você mesmo, mas mais flexível que outros CMSs os quais foram criados para um uso específico, blogs por exemplo.
Seu design possui uma flexibilidade incrível e ainda assim permite que pessoas que não são programadoras a criar websites de última geração.

É importate que se entenda o princípio do gerenciamento de abstração, pois este é o ponto central do sistema Drupal. A partir do momento que você compreender que uma certa quantidade de abstração tem grande valor, você começará a entender a força desse argumento quando tratar-se do uso do Drupal.

(1) Comment
RSS

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.

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

(0) Comments
RSS

Francisco Luz

Drupal: Como os dados são moldados dentro da estrutura de camadas

Qual o conceito por trás do Drupal?

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

Pesquisar-

Assuntos-

Arquivo do blog-

Últimos Artigos-

Flickr Photostrem-

Francisco Luz

Drupal: Como os dados são moldados dentro da estrutura de camadas

Qual o conceito por trás do Drupal?

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

Pesquisar-

Assuntos-

Arquivo do blog-

Oferecimento-

Últimos Artigos-

Flickr Photostrem-