Log
1 aaaa entrando al wiki
2 <VARGUX> ### INICIANDO LA CHARLA ###
3 Bien, esta segunda charla tendrá relación a la "Creación de tablas y uso de tipografías"
4 en especial a los tipos de tablas posibles, colores y configuración, de ellas
5 <Radixs> ok..
6 <VARGUX> cualquier pregunta será respondida .. aunque sea descabellada :P
7 <Radixs> jajaja gracias..
8 <VARGUX> si lo desean, pueden crear una subpágina de usuario...
9 <VARGUX> si no saben preguntan no más... sobre todo tu Lete
10 <Lete> sip
11 --> pcarmona (n=moreback@186.9.177.14) ha entrado en #ubuntu-cl
12 <VARGUX> si saben me dicen "Ok"
13 <Radixs> pl
14 ok
15 <Lete> Ok!
16 <Radixs> listo
17 <VARGUX> yap
18 la idea de esto es ver sus avances en el mismo wiki, y ver los posibles errores si es que los tienen
19 bien... veamos algunas tablas simples para que las hagan o recreen en el wiki
20 ... es tan simple como copiar esto:
21 || 1 fila x 1 columna ||
22 <Radixs> ok
23 <VARGUX> tabla de 1 fila x 1 columna ... muy simple y fácil
24 <Lete> ok
25 <VARGUX> Tabla de 1 fila x 2 columnas: || 1 fila x || 2 columnas ||
26 deben separar con una línea estas dos tablas...
27 ya que pare aumentar las filas es cosa de dejarlas juntas. o así:
28 || 2 filas x 1 columna ||
29 || 2 filas x 1 columna ||
30 cada una en una línea
31 <Lete> ok
32 <VARGUX> para una tabla de 2x2 sería algo así:
33 || 2 filas x || 2 columnas ||
34 || 2 filas x || 2 columnas ||
35 --> pmorenos_ (i=pmorenos@pc-231-214-160-190.cm.vtr.net) ha entrado en #ubuntu-cl
36 <VARGUX> ... algo más interesante sería una tabla donde la primera fila sea como el ancho de 2 columnas.... a saber:
37 |||| Fila 1 unificada ||
38 || Columna 1 || Columna 2 ||
39 si ustedes escribieran algo entre ||||, al inicio de la primera fila, ya sería como la anterior...
40 si desean que la parte "unificada" esté al final de la tabla; sería al reves:
41 || Columna 1 || Columna 2 ||
42 |||| Fila 2 unificada ||
43 <Radixs> ok
44 https://wiki.ubuntu.com/EstebanRamirez/Claseswiki2#preview
45 <VARGUX> veamos :)
46 ok.. bastante simple :)
47 --- pcarmona es ahora conocido como moreback
48 <VARGUX> .. prueba o prueben con esto:
49 |||||| Muestra combinada ||
50 || Columna 1 |||| Columna 2 combinada ||
51 * VARGUX saluda a moreback
52 <moreback> hola VARGUX
53 <VARGUX> Lete: algún problema hasta ahora???
54 <Lete> nonex
55 <VARGUX> ok
56 muestra tus avances...
57 <Lete> toy mirando el ejemplo
58 <VARGUX> cual?
59 el de Radixs?
60 <Lete> sip
61 <VARGUX> mmm
62 <Radixs> https://wiki.ubuntu.com/EstebanRamirez/Claseswiki2#preview
63 <VARGUX> es mejor probar uno mismo
64 :P
65 <Radixs> ahy esta el avance
66 <VARGUX> eso es..
67 es bastante simple
68 o no?
69 <Radixs> sip
70 <VARGUX> :P
71 bien veamos algo más complejo...
72 <Radixs> siiii el centrado en las tablas podria ser?
73 <VARGUX> crearemos una tabla donde una file abarque dos columnas, y otra línea donde se posea color de fondo
74 ya vamos para allá Radixs :)
75 <Radixs> ok
76 <VARGUX> bien, el código para unir hacer esto, que una fila abarque dos o más columnas es esto: <|N>
77 donde "N" es la cantidad de filas que se unen, o que se abarcan
78 <pmorenos_> ok
79 <VARGUX> una forma "antigua" de hacerlo es agregando un <rowapan=N>
80 ooops... es <rowspan=N>
81 .. y para un color de fondo en una sección de una tabla se agrega con <rowstyle="background-color: 3XXXXXX;">
82 opss... es #XXXXXX
83 :P
84 donde los XXXXXX son los colores en código hexadecimal...
85 veamos todo es en una ejemplo :)
86 --> pedro_ (n=pedro@ubuntu/member/pedro) ha entrado en #ubuntu-cl
87 <VARGUX> prueben con este código:
88 ||<rowspan=2> abarca las filas |||| abarca 2 columnas ||
89 ||<rowstyle="background-color: #FFFFE0;">celda 2||celda 3||
90 <pedro_> holas
91 * VARGUX Saluda a pedro_ y le indica que estamos en clases del Wiki :)
92 * Lete wolas pedro
93 <pmorenos_> pedro_ Holas
94 <pedro_> oops, hola a todos
95 <VARGUX> ... la idea es que muestren como se ve en el wiki, y así todos veamos "que se puede" :)
96 * pedro_ se calla para que siga la clase
97 <VARGUX> ... es de esperar que Radixs, el alumno aventajado de este día muestre sus avances...
98 <Radixs> lo de <|N>
99 no me quedo claro
100 <VARGUX> ok
101 prueba con esto:
102 ||<|2> abarca las filas |||| abarca 2 columnas ||
103 || fila 2 ||
104 lo primero es una forma antigua... lo que acabo de enviar es la forma nueva de unir las columnas
105 siempre es mejor usar "lo nuevo"...
106 y todos los futuros ejemplos serán siempre en formato de código "nuevo"...
107 ya que es más explicativo, y en muchos casos más simple
108 ... es decir <rowspan=2> es similar a <|2>
109 <Radixs> aver sigo sin entender como se usa <|2>
110 |||| abarca 2 columnas || lo entiendo perfecto
111 <VARGUX> los de 2, indica que es una fila que tiene o utiliza el alto de dos filas, pero está en una única columna
112 el código ||<|2> abarca las filas |||| abarca 2 columnas ||
113 || fila 2 ||
114 muestra eso
115 quizás el texto de dentro no es muy explicativo, pero no se me ocurrió que más colocar ahí :)
116 esto muestra una columna con el alto de dos filas de la otra columna
117 <Radixs> los demas entienden, con un ejemplo visual compredenria mejor.
118 <VARGUX> ... alguna consulta, ya que esto se complica, como mencioné antes :)
119 copia el código, y verás :)
120 ||<|2> abarca las filas |||| abarca 2 columnas ||
121 || fila 2 ||
122 <Radixs> lo copio y nada..
123 sale tal cual en la vista prebia
124 <VARGUX> ok...
125 voy a mostrarlo más gráficamente
126 <Radixs> olk
127 ok
128 <VARGUX> estará aquí: https://wiki.ubuntu.com/FabianDelgado/Wiki}
129 pueden verlo
130 <Radixs> viendo
131 <pmorenos_> sip
132 se ve bien
133 <VARGUX> es bastante simple
134 <Radixs> aps.. ya se cual fue mi factor error
135 <VARGUX> para aumentar la cantidad de filas que se abarcan, es cosa de aumentar el número
136 y de crear una nueva línea
137 ... cual fue tu error, es importante que lo digas
138 --> Dark200 (n=rodrigo@pc-10-249-161-190.cm.vtr.net) ha entrado en #ubuntu-cl
139 <Radixs> estaba copaindo |<|2> abarca las filas |||| abarca 2 columnas ||
140 siendo que deberia ser ||<|2> abarca las filas |||| abarca 2 columnas ||
141 --> _Xebasco_ (n=xebasco@pc-193-158-120-200.cm.vtr.net) ha entrado en #ubuntu-cl
142 <Radixs> aqui la muestra https://wiki.ubuntu.com/EstebanRamirez/Claseswiki2#preview
143 <VARGUX> jejeje.. es bastante simple ver eso :)
144 <Dark200> alguien cacha como tener audio por bluetooth en linux
145 <VARGUX> las secciones de las tablas siempre usan una doble barra ... así ||
146 <Radixs> Dark200 sorry pero tamos en clases,, jejej xD wena onda..
147 <Dark200> ubieran dicho Modo Off (ascuchando
148 <VARGUX> se puede ver un ejemplo ahora con más tablas y filas utilizadas ahora
149 https://wiki.ubuntu.com/FabianDelgado/Wiki
150 <_Xebasco_> hola
151 * VARGUX saluda a _Xebasco_
152 <VARGUX> ahora algo que no expliqué...
153 <Radixs> sip bien simple todo.. genial :D https://wiki.ubuntu.com/EstebanRamirez/Claseswiki2#preview
154 * _Xebasco_ saluda a VARGUX
155 <VARGUX> el "por qué" dice "abarca 2 columnas"...
156 <Radixs> en mi ejemplo sale VARGUX
157 <VARGUX> mmm
158 casi casi
159 <Radixs> UFFF
160 <VARGUX> ahora sólo deja que se muestren sólo 1 columna doble
161 y las otras unidas
162 más claro: https://wiki.ubuntu.com/FabianDelgado/Wiki
163 <Radixs> pero es lo mismo que mostre... solo que tenia 4 filas
164 <VARGUX> es decir, donde decía "abarca 2 columnas".... a este código se escribe así: |||| abarca 2 columnas ||
165 <Radixs> en verdad 5
166 <VARGUX> sí... prácticamente.
167 pero eso es permitido si colocas |||| ya que abarcas 3 columnas
168 si quieres abarcas más usas 3 pares de ||
169 o sera... ajajaj.. 3 pares de |
170 :P
171 ahí se puede ver que dejo un espacio "en blanco"
172 .... sólo quería mostrar eso, para que se vieran las diferencias
173 ... pero la verdad no es tan complejo...
174 <Radixs> |||| abarca 2 columas
175 |||||| serian 3 y asi en adelante..
176 <VARGUX> si
177 pero debe agregar la misma cantidad de || en cada línea para que esté formada correctamente la tabla
178 sino quedará como que le falta algo
179 --> TuxSarge (n=TuxSarge@110-245-21-190.adsl.terra.cl) ha entrado en #ubuntu-cl
180 elkan76 (n=mauro@pc-116-155-104-200.cm.vtr.net) ha entrado en #ubuntu-cl
181 <VARGUX> pueden ver nuevamente https://wiki.ubuntu.com/FabianDelgado/Wiki y verán de lo que hablo
182 <Radixs> aaa ok..
183 <VARGUX> aunque, quizás esto no este mal, sino que se muestra de otra forma...
184 puede ser hasta "interesante" :)
185 <Radixs> :D
186 <VARGUX> bien... algo que quizás sea también interesante sea ver un fondo de un color... pero en toda una tabla
187 ...y con alguna clase de borde
188 o sin él
189 ... eso se ve utilizando HTML...
190 <Radixs> https://wiki.ubuntu.com/EstebanRamirez/Claseswiki2#preview
191 algo asi seria
192 <-- _Xebasco_ (n=xebasco@pc-193-158-120-200.cm.vtr.net) ha dejado #ubuntu-cl
193 <VARGUX> esto se ve "mejor" al usar este código:
194 ||<style="background-color: red;"> rojo ||<style="background-color: green;"> verde ||<style="background-color: blue;"> azúl ||
195 <-- pmorenos_ (i=pmorenos@pc-231-214-160-190.cm.vtr.net) ha dejado #ubuntu-cl
196 TuxSarge (n=TuxSarge@110-245-21-190.adsl.terra.cl) ha dejado #ubuntu-cl
197 <VARGUX> lo otro que sería "interesante"... sobre todo a Radix, sería modificar el ancho de una sección o columna de una tabla, y dejar centrado el texto :)
198 <Radixs> siiii
199 xD
200 <VARGUX> || estrecho ||<style="width: 99%; text-align: center;"> ancho ||
201 con ese código, se puede ver
202 donde dice width, se aprecia el ancho que se utiliza
203 <Radixs> si no se inserta width quedara en un 100%
204 <VARGUX> y lo de "text-align" que es la alineación del texto, se aprecia que posee la característica "center" (al centro o centrado)
205 puede verse aquí https://wiki.ubuntu.com/FabianDelgado/Wiki de lo que hablo
206 <Radixs> https://wiki.ubuntu.com/EstebanRamirez/Claseswiki2#preview
207 <-- Azag ha parado ("Leaving.")
208 <Lete> los colores tb sirven los codigos, cosa de no colocar los nombres?
209 <-- x_jefesin_x ha parado (Remote closed the connection)
210 <VARGUX> si
211 pero para los colores comunes: red, blue, gree, black, white... etc
212 <-- elkan76 (n=mauro@pc-116-155-104-200.cm.vtr.net) ha dejado #ubuntu-cl
213 <Radixs> alfin centre los textos
214 <VARGUX> :P
215 puedes ver ahora en: https://wiki.ubuntu.com/FabianDelgado/Wiki una combinación de colores y de anchos
216 <Radixs> <style="text-align: center;"> centrado
217 <style="text-align: left;"> centrado
218 <VARGUX> ... esto siempre se puede combinar dentro de los parámetros de HTML
219 <Radixs> <style="text-align: left;"> izq... *
220 <VARGUX> siempre dentro de <style=...>
221 :)
222 <Radixs> ok
223 <Lete> ok
224 <Radixs> VARGUX <style=...> lo mismo para el tipo de letra?
225 <VARGUX> algo "especial" sería alinear el texto a la izquierda, luego al centro, luego a la derecha, en una columna.... dejar un texto arriba, es una columna que "unifique varias filas en una".. y lo contrario en la parte inferior....
226 <-- pedro_ ha parado ("Leaving.")
227 <VARGUX> style indica el estilo... puede ser de letra ... donde dice font... de color.... background-color
228 <Radixs> ok
229 <VARGUX> para eso DEBES saber de HTML
230 :)
231 .... bueno ahora mostrando el ejemplo de lo que mencioné anteriormente...
232 es bastante grande quizás
233 <-- CdK1 ha parado (Remote closed the connection)
234 Schmick ha parado ("leaving")
235 <VARGUX> ||<style="text-align: left;">izquierda...... ||<style="vertical-align: top; text-align: center;"|3> arriba (superior) ||<style="vertical-align: bottom;"|3> inferior || ||<style="text-align: center;"> .centrado. || ||<style="text-align: right;"> derecha... ||
236 --> Schmick (n=nouser@124-15-20-190.adsl.terra.cl) ha entrado en #ubuntu-cl
237 <VARGUX> si no se ve bien, le agregué un width:50% a las secciones de izquierda, centro, derecha
238 véanlo aquí: https://wiki.ubuntu.com/FabianDelgado/Wiki
239 en la sección final )
240 :)
241 <Radixs> ahora que vi la pagina salio mas ordenado y se entendio
242 <VARGUX> si, se entiende más cuando se aprecia
243 el código se torna "feo" cuando es algo más definido :)
244 --> CdK1 (n=CdK1@200.90.231.233) ha entrado en #Ubuntu-cl
245 <VARGUX> imaginen como debe ser el código de la portada del wiki :)
246 .... por eso ahora está separado en varias páginas :)
247 <Radixs> uuu
248 :D
249 <VARGUX> .... bien... ahora veamos lo de agregar anchos de letras y colores en ellas
250 <Radixs> ok
251 <VARGUX> esto, siempre se aprecia en las secciones "font" o "color"
252 <Radixs> y Lete???
253 <Lete> si
254 <VARGUX> en código sería algo así
255 || normal ||<style="font-weight: bold;"> negrita ||<style="color: #FF0000;"> en rojo ||<style="color: #FF0000; font-weight: bold;"> negrita en rojo ||
256 <Radixs> aaa pensaba que ya no estabas
257 <Lete> si si toy
258 <VARGUX> se aprecian las diferencias de forma clara en ese código
259 ... si tienen dudas, me dicen :)
260 <Radixs> sip, VARGUX en la clase anterior
261 explicaste tambien para negrita '''negrita'''
262 <VARGUX> .... a todo esto, dejaré una página con los ejemplos de esta clase
263 si, pero en el último código se aprecia como es en HTML
264 y darle colores a ese código en negrita
265 o código simple
266 bien... para finalizar, veremos como crear una sección con puntas redondeadas
267 <Lete> ok
268 <VARGUX> esto depende del navegador... entonces deberemos crear secciones que permitan esto..
269 pero no funciona en todo los navegadores... y se torna complejo
270 <Radixs> VARGUX las fuetes de color solo se pueden dentro de una tabla?
271 <VARGUX> ... intenta ponerlar fuera de ella.. y verás por ti mismo :)
272 .. será algo "lindo" de ver
273 jajajaja :P
274 <Radixs> nadaa
275 <VARGUX> como?
276 <Radixs> <style="font-weight: bold;"> negrita
277 <VARGUX> no funciona cierto?
278 <Radixs> nop
279 aver deja ver donde esta el error
280 <VARGUX> si... eso es porque el wiki mismo, a través de las tablas, permite que los colores tomen su forma y color
281 en HTML se usan secciones <div> </div> para ver esto
282 y en CSS se definen esas secciones de forma similar a como se aprecian en el wiki
283 quizás por esto el wiki, en cierta forma unifica estás cosas de HTML/CSS dentro del código
284 <Radixs> claramente no funciona xD
285 <VARGUX> bien... esto será algo más complejo.. para las puntas redondeadas con un color bastante claro y un enlace dentro, agregando un ícono del wiki
286 ahh y su enlace :)
287 <Radixs> woww..
288 <VARGUX> ||<tablestyle="text-align:center; font-weight: bold; font-size: 0.80em; border: none; width: 100%; -moz-border-radius:15px; background-color:#F2F2F2;" style="border: none;">{{attachment:ChileanTeam/GrupoArte/Iconos/30px/ubuntu.png}}[[ChileanTeam|Inicio Wiki]]||
289 <Radixs> ehhh
290 <VARGUX> la sección "-moz-border-radius:15px;" es la que define las puntas redondeadas para esa sección
291 pero esto funciona SOLO en firefox
292 <Radixs> te refieres a que la persona que lo ve con firefox notara el redondeo
293 <VARGUX> así es
294 <Radixs> abriendo windows y viendo con IE
295 xD
296 <VARGUX> si usas KTML (Konqueror), o Safari/Chrome (Webkit)... u otro no lo verá
297 pero en IE casi nunca funciona nada... descártenlo de plano :)
298 <Radixs> lo are para ver que sucede
299 <VARGUX> si se desea ver para safari/chrome, y los basados en khtml (como konqueror), se deben agregar otras secciones similares a la de -moz-border-radius
300 para webkit: -webkit-border-radius: 15px;
301 para khtml: -khtml-border-radius: 15px;
302 :) esto se ve siemple, ya que sólo se modifican las partes iniciales
303 <Radixs> para los interezados asi se ve con IE
304 ://i40.tinypic.com/5uwt3.png
305 http://i40.tinypic.com/5uwt3.png
306 <VARGUX> si se desea ver esto bien en todos los navegadores estándar (no IE), entonces se deben agregar estas secciones seguidas dentro de código
307 y las puntas redondeadas Radixs ?
308 <Radixs> estan, pero asy se muestra con IE por eso no se ve
309 <VARGUX> ok
310 <Radixs> mira https://wiki.ubuntu.com/EstebanRamirez/Claseswiki2
311 <VARGUX> bien.. eso es
312 puedo modificarlo para agregar las secciones que faltan, y veas como es?
313 <Radixs> ok
314 pero agregalo abajo para ver la diferencias
315 <VARGUX> quizás se vea hasta en IE
316 ok
317 <Radixs> y ahy lo pruebo con IE
318 <VARGUX> a simple vista no lo verás :)
319 listo
320 <Radixs> ok
321 en IE siguen cuadradas las puntas xD
322 <-- Gonium ha parado (Read error: 54 (Connection reset by peer))
323 <VARGUX> así es
324 <Radixs> cabe decir que es el 6
325 nose si el 7 cambiara en algo
326 <VARGUX> ... quizás en el si se vean
327 IE 6 es muy malo en lo que a estándares se refiere
328 <Radixs> bueno a simple vista se nota que el codigo es mas extenso
329 esta fue la linea que agregaste -moz-border-radius: 15px; -webkit-border-radius: 15px; -khtml-border-radius: 15px;
330 <VARGUX> si, pero lo digo al estar ya guardado todo :)
331 <Lete> ||<style="background-color: red;"> rojo ||<style="background-color: green;"> verde ||<style="background-color: blue;"> azúl || <style="background-color: yellow;"> amarillo ||
332 <VARGUX> no agregué la de "-ms..." ???
333 <Lete> debo tener algún error
334 =(
335 <VARGUX> si
336 <Radixs> a claro.. ya vi, tienes razon
337 <VARGUX> el último <style>, o más bien, todos los <style> deben estar unidos a ||, sin espacios
338 sino el wiki los tomará como que ahí, en el espacio hay algo...
339 <Radixs> lo que entendi es que <style> no funcionara si no esta entre ||
340 <VARGUX> Lete, prueba eso, y luego guardas y nos muestras el enlace
341 <VARGUX> exacto
342 pero debe estar unido a los ||
343 es decir ||<style="...">||
344 <Lete> https://wiki.ubuntu.com/HectorLetelierS/Wiki
345 <VARGUX> algo así, a simple modo
346 <Lete> tabla de colores
347 si funko! =)
348 <Radixs> xD
349 <Lete> toy mirando el codigo!
350 ta bien?
351 <VARGUX> Lete, cierra la vista previa y hago los cambos y los verás.. te falta una línea :P
352 <Lete> ok guardando cambios ...wait...
353 la tabla de colores si guardo el amarello
354 <VARGUX> tamos listo pa' verlo?
355 <Lete> si
356 <VARGUX> ok
357 <Lete> tengo problemas con los colores claros
358 =/
359 <VARGUX> :P
360 guardando la pag...
361 <Radixs> viendo
362 <VARGUX> puedes verlo ahora: https://wiki.ubuntu.com/HectorLetelierS/Wiki
363 <Lete> pl
364 ok
365 ok++
366 y q pasa con los colores claros y el atachemennt
367 no me quedo claro
368 <VARGUX> bueno, la tabla con puntas redondeadas de abajo tiene un color gris zulado bastante claro
369 y el attachment:..... es una imagen ó un ícono agregado en el wiki
370 <Lete> ahhh ok
371 sii pero solo se puede sacar del wiki
372 ó me puedo traer otra imagen
373 de cualquier parte
374 <VARGUX> puede otra imagen, pero es mejor que sea una agregada al wiki
375 ya que puede ser reutilizada en otras páginas
376 (utilizando la dirección completa de la imagen, o en donde se encuentre)...
377 <Lete> ahhhh yap...
378 <VARGUX> similar a como es en un sistema Linux o UNIX
379 ...bien compañeros... es todo por hoy :)
380 <Radixs> uuuuu..
381 <Lete> T_T
382 <VARGUX> pueden ver un resumen de todo esto aquí:
383 https://wiki.ubuntu.com/ChileanTeam/GrupoWiki/CharlaWiki/CW2
384 <Radixs> yo creo que dentro de la semana empesare con mi wiki
385 <VARGUX> y al final, enlaces de código de apoyo, y de tipografías simples
386 <Lete> muchas gracias por su tiempo!
387 <VARGUX> de nada... :P
388 <Lete> se agradece mucho la info!
389 <Radixs> gracias, gracias
390 <VARGUX> nos veremos a las 21 hrs en las otras 2 charla que faltan
391 <Radixs> a ok..
392 solo dos mas
393 <VARGUX> si no llego a la hora, como hoy, es porque "algo me pasó"...
394 <Lete> sii okas
395 <VARGUX> pero regularme llego a la hora
396 o antes !
397 bien ahora digo......
398 <Lete> okey!
399 <VARGUX> ##### FINALIZANDO LA CHARLA #####
400 <Radixs> jajajaj
401 tanks
402 <Lete> thank's
V A R G U X/CharlaWiki/CW2/Log (last edited 2010-02-17 19:53:44 by pc-131-140-161-190)