Así se dibujan los Logos de Google

Talleres y Cursos ECUM en Facebook

Aunque ya hay varios inscritos…os dejo el link de Talleres ECUM en Facebook. Aquí publicaremos constantemente todos los cursos de capacitación que se estén impartiendo en la Escuela de Comunicación de la U. del Mar: Ir a Talleres ECUM en Facebook.

Curso de Diseño Web: Clase VII, VIII y IX

Hace bastante rato que no escribía en mi blog, y es que la verdad, estoy lleno de cosas -clases, agencia, clientes y bla, bla , bla-. Pero bueno, ya estoy aquí.

Hemos pasado un largo trecho con los muchachos, nos dedicamos por completo a estilizar nuestros documentos HTML con hojas de estilos (CSS). Aprendimos sobre selectores, los aplicamos y ahora ya casi (pero bien casi) los dominamos, revisamos propiedades como el “background” y la infinidad de cosas que podemos hacer con ellas, “enchulamos” tipografías y textos, y ahora último jugamos con las Pseudo-clases, en especial para los links.

Nos queda solo una clase de materia y las últimas dos para trabajo de taller al 100% para dedicarnos exclusivamente a realizar nuestro proyecto final donde los alumnos deberán sacar a flote todo lo aprendido, para así, terminar por visualizar los trabajos en internet subiéndolos a un servidor.

He disfrutado bastante esta experiencia con los chicos, pero aún nos queda el último tramo…¿llegarán todos a la meta final?…espero que así sea.

Segunda Edición del Curso: Diseño Web con Estándares: (x)HTML+CSS

Muchachones:

La Escuela de Comunicación de la Universidad del Mar, (sede Viña del Mar) tiene el agrado de invitarlos a la “Segunda Edición del Curso: Diseño Web con Estándares: (x)HTML+CSS” que tiene como fecha tentativa la primera semana de septiembre. Esta será la última edición del año 2008, retomando el 2009 con este mismo curso y talleres complementarios y avanzados en diseño web y gráfica digital.

Temarios, horarios, valores, beneficios y facilidades de pago directamente en las zonas de contacto que dejo a continuación.

Mail: pcontreras@publicentro.cl

Web: http://www.ecum.cl/talleresecum

Link del curso:

http://ecum.cl/talleresecum/taller-diseno-web.php

Saludos chicos!

Curso de Diseño Web: Clase V

EL instructor con la bufanda corrida

Ya estamos casi en la mitad del taller, 7 clases más y se acaba. En la sesión anterior finiquitamos todo con respecto a (x)HTML -en cuanto a código en bruto- ahora jugaremos con el software para optimizar nuestro trabajo y nos dedicaremos a “enchular” con CSS.

Lo alumnos en concentración “mode on”

La clase pasada pecamos…si, caímos en pecado, y en mala, peorrrr. Creamos nuestro primer sitio web con tablas. Vimos un poco de los sabores y sin sabores de diseñar sitios web bajo esta modalidad. Por un lado (cuando lo hicimos en vista diseño eso si) vimos la rapidez para generar una estructura -eso es lo bueno-, lo malo el excesivo código basura y las complicaciones con algunos navegadores. Parece que la lluvia sorpresa que cayó en viña del mar les mojó las tablas a algunos de los chicos ya que se demoraron un “poquito mucho” en terminarlas, pero al final lo consiguieron (good).

También le dimos un punta pié inicial a los CSS. Cuando pasemos modelo de caja las tablas quedarán en el pasado, aunque hay algunos alumnos que le agarraron un poco de cariño.

Alumna agotándome la paciencia

Hay muchachos que ya le agarraron el gustito al diseño web, puedo ver futuros colegas en mi bolita de cristal…

Subinglés ¿Cantemos en inglés?

El tío TarSo los quiere mucho, y como siempre les trae una que otra pildorilla interesante del ciberespacio. A mis alumnos, colegas y amigos en general siempre les recomiendo alguna web interesante para que puedan mejorar su inglés, ya lo hice con el excelente sitio Yappr y ahora les traigo otro para que practiquen su inglés y mejoren su pronunciación cantando -obvio galla-, ¡si señor!, ¡cómo lo oye!, cantando. Se trata de subingles.com. Miguel Martín me escribió recomendando el site, le dí una vuelta y lo encontre bastante interesante. Es un sitio que se encarga de recopilar videos en Youtube -obviamnete en gringolandés- con sus respectivos subtítulos para que uno pueda seguir la letra y escuchar la pronunciación. Hasta el momento ya tiene más de 1200 temas categorizados por grupos y cantantes, así que ya lo saben, si quieren mejorar su inglés de forma divertida Subinglés es otra muy buena solución.

Curso de Diseño Web: Clase III

Oh mai gosh!. Qué les puedo decir, la tercera patita de Diseño Web con Estándares estuvo llenas de emociones. Por fin -y como muchos anhelaban- abrimos un programa de diseño, “programa WYSIWYG” (alguién que me diga como se pronuncia por favor), el escogido fué Dreamweaver MX 2004 Professional, y escogido por dedocracia, por que es la versión que tiene la Universidad (cueck!). Pero la verdad es que a nosotros nos da lo mismo, aprendemos estructura, metodología de diseño y no un programa, yo feliz hubiese seguido con block de notas, pero quería llegar sano a mi casa y algunos ya me ponían cara de pitbull.

Uno que otro chiquillo ya había usado el software, pero no de la forma correcta, así que saqué a relucir todo el tiempo invertido leyendo el manual de DW CS3 para que pudieran aprender a optimizar su trabajo. Si bien son versiones distintas la escencia es la misma (previa revisión del intructor días antes eso sí). No hubo problemas.

Las sonrisas florecieron, pero comprobaron -gracias GOD- que si no entienden las etiquetas difícilmente lograrán realizar un trabajo óptimo. Creo que ahora me aman de nuevo. Vista código la lleva.

Insertamos imágenes, jugámos con los vínculos y aprendimos algunas cosillas interesantes que nos ofrece DW MX 2004. El DOCTYPE, el elemento raíz y la etiqueta <meta> de codificación salieron a la cancha nuevamente, los chicos, al parecer, ya lo empiezan a digerir (good).

El tiempo se nos hizo cortísimo, nos faltaron las tablas y los formularios, ahora se pone buena la cosa, estamos a pasos entrar a la Hojas de Estilos. Veamos que ocurre en el próximo capítulo…

Escenas del capítulo anterior (su monitor no está malo, soy yo el gordito ):

Curso Diseño Web: Clase II

Uf!. Con esa primera exclamación puedo definir la segunda clase de diseño web. En el capítulo anterior, todos gozaban de las maravillas del lenguaje (x)HTML, es que claro, ver como con un simple block de notas puedes generar un documento web es siempre sorprendente. La clase de ayer fué un poco más dura, shuper hard. Volvimos por última vez al block de notas, algunos ya no les gusta tanto, otros ya lo odian y el resto me odia a mí. La próxima vez trabajaremos con un software -hay varios candidatos-.

En esta segunda jornada vimos la mayoría de las etiquetas definidas en el temario, solo nos quedan las tablas y los formularios. Vitupero llantos y agresiones físicas y psicológicas hacia mi persona.

En la odisea de ayer nos encontramos con nuestro querido navegador Explorer y sus validaciones invalidadas, puaj!, pero nada que nuestro amigo personal Firefox no pueda mostrar . Degustamos del DOCTYPE, el elemento raíz (si, si, esa cuestión que va en el <head> ) y las codificaciones. Parece que nadie me cacho.

El primer acercamiento al diseño web sin monos está dando sus frutos, un alumno me comentó que pudo enchular su MySpace con lo aprendido en la primera clase, espero no estar formando pokemones .

Los chicos se fueron ayer con bastante información en sus mates, ahora la deben comprender y practicar, si no, no sacarán nada.

Curso de Diseño Web: Clase I

El martes pasado comenzamos con la primera clase de diseño web con estándares (XHTML+CSS) en la Escuela de Comunicación de la Universidad del Mar. Tengo un grupo de personas bastante interesante, compuesto de: Diseñadores, Cinéfilos, Periodistas, Publicistas, Estudiantes y hasta una futura Socióloga. Yeah!.

Partimos con las presentaciones de rutina, luego de eso, le incamos el diente inmediatamente a la materia. La clase comenzó con una pincelada de alfabetización digital. Los chicos se espantaron un poco con las preguntas, quizá por lo básicas que eran, y ver como las asimilaban y convivían con ellas pero no lo lograban definirlas, preguntas sencillas como: ¿Qué es un computador? ¿Qué es internet? ¿qué es un sitio web? y bla bla bla…pero la timidez duró poco, bastó que uno se soltara y empezaron a dar rienda suelta a sus ideas.

Continuamos con lo que nos convocaba, HTML: historia, evolución y como se estandarizo hasta llegar a nuestro querido y sabroso (x)HTML. Cuando mostré por primera vez como era la estructura básica de un sitio, hubo algunos desmayos y otros ataques de shock post traumáticos, bueno, la cosa empeoró cuándo abrieron el block de notas. Eran los nervios de la primera vez. Todo pasó cuando vieron impreso en pantalla el título en el navegador y el querido “hola mundo” con la etiqueta <h1>. De ahí en adelante lluvia de preguntas.

De pasadita vimos un poco de arquitectura de información, a varios les interesó el tema. Bueno es algo a lo que se van a tener que acostumbrar, por que van a convivir con ello cada vez que emprendan un proyecto web.

Si bien hay de todas las edades, profesiones y ocupciones, tengo solo una periodista, ahora entiendo muchas cosas…muchas cosas…

Bueno, es la primera clase, los chicos -muy buena onda todos ellos- se fueron contentos, veamos que aventuras nos prepara la segunda sesión.

A Bad Day

El Fin de Mouse.cl, uno de los primeros medios digitales de Chile

Que les puedo decir muchachos, esto es Chile…realmente cuando leí esta noticia me dió un poco de nostalgia, es que la revista Mouse nos es cualquier medio digital, es una de las primeras revistas tecnológicas de nuestro país, es una reliquia Geek, de hecho fué el primer sitio web “tech” al que me hice adicto y el enterarme que “cierra transmisiones” no me hace gracia…esta revista tiene toda una historia, pasó del papel a la pantalla, con altos y bajos, 10 años de experiencia a su haber, y en los últimos días -cosa que me confirma El Francotirador- habría vuelto a las andanzas, subiendo mucho su cantidad de visitas y contenido. Pero bueno, mientras en otros países se valora a los ancianos y se aprende de su experiencia, en el nuestro los dejamos en los asilos para que no molesten.

Viendo esto se me viene a la cabeza Emol. Mientras ellos se preocupan en potenciar su sección de tecnología -dajándo para el criterio de cada uno si lo hacen bien o mal- La Tercera, y en realidad Copesa, le hace el quite a esta temática, siendo que está dentro de las más consumidas por los “internetadictos”. Si los “genios” de La Tercera tuvieran visión, se darían cuenta de la mina de oro que están cerrando.

La tecnología está, los medios están, las ganas están y los usuarios estamos…y no somos pocos…

¡NO AL CIERRE DE MOUSE!

Curso de Diseño Web con Estándares (x)HTML+CSS

Muchachos:

Junto con la Escuela de Comunicación de la Universidad del Mar, tengo el agrado de invitarlos al Taller de Diseño Web con estándares (x)HTML+CSS, que estaré realizando este 24 de junio al 9 de septiembre del 2008.

El curso está dirigido a todas aquellas personas que deseen aprender a diseñar y estructurar sitios Web desde la esencia misma de este, involucrándose y aprendiendo el código HTML para la estructura y aplicando Hojas de estilos (CSS) para la presentación.

Este taller está dirigido a Personas sin conocimientos de diseño web y aquellos con conocimientos vagos que deseen perfeccionar y profundizar en la temática.

DATOS DEL CURSO

• DURACIÓN: 36 horas.
• CUPOS: 20 ALUMNOS
• FECHA INICIO: MARTES 24 DE JUNIO DE 2008
• FECHA TÉRMINO: MARTES 9 DE SEPTIEMBRE DE 2008
• HORA: 19:00 a 22:00 hrs.

Para más Informaciones a mi correo: pcontreras@publicentro.cl

O al siguiente link: Clik Aquí.

Aprende inglés viendo videos con Yappr

Porque el tio TarSo solo necesitas de sus click los quiere mucho, les trae este nuevo sitio para que todos aprendamos a hablar inglés, ¡oooooh sí!. El otro día escuchando a un profe de inglés, dijo que uno debe aprender igual que los niños -primero hablando y después escribiendo- si tiene razón o no, no me importa por que igual es más entretenido lo segundo. Yappr es un sitio en el cual puedes ver videos en inglés y al mismo tiempo ver lo que dice escrito en el mismo idioma y su traducción al español, o al idioma que elijas, ya que puedes hacerlo: del japones al ingés, del alemán al inglés, del italiano al inglés…y la última innovación del inglés al inglés (chiste fome pero corto, hay muchas más lenguas).

Hay desde entrevistas, videos musicales, humor, spots, y bla bla bla. Pero eso no es todo, si eres todo un TarSo para el inglés puedes registrarte pedir videos para que alguien de buena voluntad los traduzca, o subir los tuyos propios, hacer amistades con gente de otras nacionalidades, agrupar tus videos favoritos, editar los videos que encuentres mal traducidos…en fin, un buen dato para aprender divirtiendose…mientras ustedes navegan yo sigo aprendiendome esta canción.
Ir al sitio Aquí.

Hacker Publica datos de 6 millones de chilenos

Estoy a punto de empezar a recopilar los pastelazos del mediocre gobierno de Michelle Bachelet, por que este último si la hizo de oro. Leo -aunque no todos los días- Fayerwayer, que, para los que no sepan, es un blog de tecnología chileno superhipermega shorizo wuarisnai popular con chorrocientos millones de visitas por segundo una gran cantidad de usuarios. El otro día buscando algo interesante que leer en internet me llamó la atención un post que denunciaba la publicación en su sitio de datos confidenciales (algunos sí otros no) de 6 millones de chilenos, robados por un pirata informático. Después salió en internet, el periódico, la radio, la televisión y culminado con el más masivo de todos…mi blog.

Lo que me llamó la atención fueron las palabras de nuestro analfabeto digital Ministro Vidal:

“Yo de computación no entiendo nada, apenas sé que hay algo que se llama hacker. Soy un analfabeto tecnológico. Al señor hacker hay que pillarlo.”

Oh mai Gosh!…y al parecer no fuí el único que se dió cuenta…ver aquí, aquí y aquiiií. Al “Señor Hacker hay que pillarlo” y al “Señor vidal hay que educarlo“. Es incleíble que en pleno siglo XXI tengamos ministros que con suerte sepan encender un PC. En vez de gastar energías buscando al “señor hacker” deberían gastarlas en mejorar nuestros sistemas informáticos.

Informó desde regiones el “señor blogger”.

Spike, El Perro de Lipigas

Spike es un Quiltro, ¿qué es un quiltro?, es una definición que se le da en Chile y en algunas zonas de Bolivia a los perros que no son de raza definida. En nuestro país son muy populares y se podría decir que forman parte de nuestra urbe y nuestro cotidiano andar (el que no ha tenido algún percance con un quiltro que tire la primera piedra). Por lo general son perros callejeros que han nacido de cruzas de varios canes.

El caso del perrito Spike es especial, es la mascota y símbolo por estos días, de la empresa chilena de gas licuado Lipigas y que ha hecho noticia por lo mediático que ha sido en Internet. La empresa en cuestión ha realizado una serie de campañas publicitarias con él, y de seguro, la que la rompe, es la que se efectúa a través de Facebook, donde colapsaron la cuenta del perrito teniendo más de 5.000 amigos, más de 30.000 fans y ha llegado a superar los facebooks de personas como el candidato presidencial Sebastián Piñera.

Este simpático animalito ha popularizado frases como “Cambiate al amarillo”, “oh mai gosh” (Oh my God en inglés), y “los raperros” y una buena cantidad de singles. Es tanta la popularidad de este can que ahora tiene su propio sitio web. Siempre nos quejamos que la publicidad en Chile es bastante mediocre, pero este caso, por lo renombrado es un digno ejemplo de destacar.

Este perrito pertence al sargento segundo de Carabineros José Montanares, quién lo recogió de la calle cuando tenía cerca de 40 días de vida, en una feria de la comuna de Lo Prado en Santiago de Chile, José dice haberlo recogido por “tierno y vivaracho”.

Pero Spike no es –ni será- el primer quiltro chileno famoso, como no olvidar a “Washington” el perro de Condorito o “Canopus” el perro de La Armada Chilena (que falleció hace pocos meses) y que detectó un incendio en uno de los barcos, o al quiltrito que entró en el mundial de Chile 1962 en el partido entre Brasil e Inglaterra, al cual Garrincha adoptó por creer que le trajo suerte en el encuentro y como no olvidar al “Rucio” (modismo chileno para nombrar a los rubios) perrito que se arrancó de la matanza indiscriminada de perros callejeros que ordenó la presidenta de Chile en la moneda y que luego se transformó en su cara oficial contra este tipo de acciones.

En fin cuantos perritos vagos han pasado por nuestras vidas haciéndonos reír y llorar. Sea este post un homenaje a todos los quiltros del país, que se cruzan en paradas militares, protestas, partidos de fútbol internacionales y cuanta ceremonia pillen a su paso.

Un recuerdo para “Kuky” mi primera perrita, quien vivió 20 años…y sí, era quiltra…

Microsoft ahora se quiere quedar con Facebook

Después de la olímpica retirada que se pegó Microsoft al dejar de insistir en la compra de Yahoo, ahora los superpoderosos chicos de la ventanita quieren adueñarse del sitio de redes sociales más popular del espacio interestelar mundo. Aunque esta noticia no es nueva y la empresa de Bill Gates ya tiene un 1,6% de participación en Facebook, quieren toda la torta para ellos. Con esto Gates empieza a justificar la frase que lanzó en Tokio “Debemos seguir nuestro propio camino”…Qué ira a resultar de esto nadie lo sabe…Y como la cosa viene de la mano de Microsoft de seguro es una porquería algo muy buena onda

Fuente de la noticia: Aquí.

Aladygma: Más sobre el Misterioso Sitio

JJ. Abrams

El sitio de aladygma cada vez más nos da más y más “pistas” sobre esta supuesta super producción de JJ. Abrams. Algunos dicen que es la continuación de la película Cloverfield (Monstruoso en español), otros especulan que no es más que otro de sus proyectos bizarros, y los más osados llegan a vituperar que es solo algún proyecto universitario de campañas virales en internet, pero bueno –sea como sea- realmente ya está dando que hablar dentro y fuera de la red.

Porción del afiche de Cloverfield

Es un sitio realmente curioso, no tiene textos introductorios ni nada que nos de datos concretos sobre lo que estamos presenciando, lo único que podemos hacer es tratar de encontrar pequeños links escondidos que se ubican en el gran fondo negro de su portada, que nos llevan a imágenes, animaciones, números y otras yerbas, que a medida que pasa el tiempo nos deberían aclarar el enigma o en el peor de los casos confundirnos aun más.

La primera pantalla con la que nos encontramos nos muestra los siguientes datos:

Portada del sitio Aladygma.com

En esta pantalla es donde nacen todos los vínculos ocultos. Según yo, creo que hay dos formas de encontrar los links sin estar horas tratando de adivinar con el mouse donde se encuentran. Una de ellas es yendo directo al código fuente del sitio y, si entienden el lenguaje HTML, buscar las rutas vinculadas. Esto lo pueden lograr, si como yo navegan con Firefox, usando el botón secundario y hacer clic en “ver código fuente de la página”, o en el menú superior del navegador en: Ver > Código fuente de la página.

La segunda forma, es usar los comandos “ctrl.+ a” y seleccionar todos los elementos del sitio, o en el menú superior ir a: Edición > Seleccionar todo. Así podrán ver de forma gráfica los elementos en cuestión (esta opción es la más recomendable).

Imágen con selección que muestra los enlaces ocultos

A continuación les mostraré los links, que hasta el momento en que escribo estas líneas, se encuentran el la página web (no están en orden cronológico).

El primero es: http://aladygma.com/%20/

Este no difiere mucho en cuanto a la gráfica de la portada pero si se puede apreciar un cambio en la numeración de este.

El segundo es: http://aladygma.com/%20%20/

Que es muy similar al anterior. El mismo fondo negro con un nuevo cambio en la numeración.

El tercer link: http://aladygma.com/w2a/

1. Esta es la primera imágen antes de cambiar al extraño ser

Ya nos muestra una animación, con símbolos extraños, y donde al final de esta se puede apreciar un ser muy parecido a los seres de la película Alien.

2. Una vez que cambia la imágen quede esta especie de Alien.

El cuarto enlace: http://aladygma.com/dan%20y/

1. Plano con imágen del New York Times de Fondo

Nos aterriza un poco más, este muestra una imagen con un plano marcado con rayas hechas a lápiz y de fondo el periódico Estado Unidense “The New York Times” un tanto arrugado.

2. Diario real al que hace referencia la imágen anterior

Dentro de los misterios de este sitio es la vinculación que hacen a hechos reales como lo fué el atentado de las torres gemelas el 11 de septiembre del 20004.

Quinto vínculo: http://aladygma.com/%20%20%20/

1. Imágen de supuesta cabeza humana sacada del sitio de Aladygma

Una especie de radiografía a una cabeza humana, pero si revisan la imágen anterior está sacada de los apuntes de Leonardo Da Vinci, lo cual vuelve aún más misterioso el asunto.

2. La misma cabeza anterior pero sacada de los bocetos y apuntes de Da Vinci

Vamos con la URL número seis: http://aladygma.com/dcoe/

Pide entrar un código, realizar una operación matemática y…bueno revísenlo ustedes.

El link siete es una especia de planeta: http://aladygma.com/kr2/

Si descargan la foto verán detalles interesantes de lo que presuntamente vendría hacer un planeta.

Vamos con el octavo enlace: http://aladygma.com/hum/

Documento antiguo con estudios del cuerpo humano

En este hay áreas sensibles en la cual pueden aumentar partes de la imagen, al hacer zoom se puede apreciar que es un documento antiguo, que tiene algunos apuntes y gráficas un tanto medievales.

1. imagen vista superior

2. imagen vista inferior

Y el último: http://aladygma.com/0%200%200%203%207%208/

Una misteriosa mujer con cara de horror mirando por la abertura de una puerta el número 211.

¿Qué tiene que ver Da Vinci en este cuento? mejor aún ¿Qué tienen que ver las torres gemelas? ¿Documentos antiguos? ¿Será una campaña viral? muchas incognitas que espero se resuelvan pronto antes de que aburran.

¡La Mejor escena de Acción del Mundo!

Increíble, super hiper mega power, ni en los mejores tiempos de los magníficos te habrías imáginado una escena de estas características, que coordinación, que movimientos, que dobles de riesgo, no sé como no está en la história del cine de acción, ¡oh mai gosh! creo que me he orinado, nada más que dcir que simplemente Enjoy!!!

Diseñando Themes para WordPress: (X)HTML + CSS

Bueno hace poco escribí un artículo para el mmug, de como diseñar themes para wordpress de forma básica, he aquí la cosa:

En este sencillo artículo aprenderemos el por qué de la popularidad de wordpress y veremos como modificar el “theme” de una de las plataformas para blogs más poderosas, sólidas, populares y gratuitas de la red.

Muchos se preguntarán en este momento…¿¡Pero qué es un Theme!?. Bueno para todos aquellos curiosos que no lo saben aún, un “theme” o “tema” para wordpress, es un conjunto de archivos y estilos que nos permiten cambiar el look de nuestro sitio. A diferencia de un “template” el “tema” de WP incluye desarrollo en Php, mientras que el segundo es una simple plantilla.

Muchos se han preguntado el por qué de la popularidad de WordPress y es sencillamente por que te permite trabajar en forma creativa si eres diseñador y rápida y segura si eres desarrollador, separando en forma fácil ambos tipos de trabajo (presentación y desarrollo).

WordPress corre gracias a el lenguaje de programación Php, uno de los lenguajes más extendidos de la red y funciona con una base de datos MySQL, también dentro de las más extendidas, y he ahí el por qué de su popularidad.

¿Por que sería bueno trabajar con wordpress?

- Por que es una plataforma que viene lista y no necesitas descubrir la rueda, si no, mejorarla.

- Te permite entender y reforzar conocimientos de programación en PHP y lucirte como diseñador en (x)HTML + CSS.

- Tiene soporte sólido y no debería presentar muchos bugs.

- Y una de las más importantes es opensource.

Muchos importantes sitios web corren bajo esta plataforma, su facilidad de uso la ha hecho estar entre las mejores y ahora veremos por que la gente le tiene tanto cariño. Ok muchachos sin tanto bla bla…manos a la ubre…perdón obra.

Ingredientes:

- Descargar alguna versión de wordpress (pueden descargarla de www.wordpress.org)
- Manejo de avanzado de (X)HTML
- Dominio CSS
- Conocimientos básicos de PHP
- Haber instalado alguna versión de wordpress o tener conocimientos sobre este.
- Algo de manejo del “english”…o espanglish en el peor de los casos.

No voy a perder tiempo explicando: como se crea una base de datos, como se programa en php, o como se instala wordpress. Para esta última duda en los tutoriales del mmug hay uno muy bueno sobre la instalación de este sistema de bitácoras y para las otras hay algo muy “choriflai” llamado Google. Ja!

Este artículo/tutorial solo pretende que entiendas como poder modificarlo en su parte básica, para temas más complejos dependerá exclusivamente de tu interés.

I. Ubicándonos en las carpetas.

Una vez que nosotros hemos instalado la aplicación (ya sea en modo local o remoto) vamos a buscar (donde instalamos wordpress) una carpeta llamada “wp-content”. Una vez que la hemos encontrado, nos auto-aplaudimos y procedemos a ver que, dentro de esta, tenemos 3 carpetas y un archivo php:

- plugins (carpeta)
- uploads (carpeta)
- themes (carpeta)
- index.php

De estas la que más nos interesa es la carpeta “themes”, y sobre la cual vamos a trabajar. Esta carpeta es importantísima, por que aquí se almacenan todos los archivos donde están los “temas” que queremos aplicar a nuestra plataforma WP.

Dentro de la carpeta “themes” encontramos 2 carpetas, una de ellas llamada “Default” y la otra llamada “Classic”. Estos son, ni nada mas ni nada menos, que los diseños predeterminados que nos ofrece el programa, y sobre los cuales vamos a aprender bastante.

II. Creando nuestros archivos

Una vez que estamos dentro de la carpeta “themes” y visualizamos las carpetas “default” y “classic”, vamos a crear una carpeta nueva -dentro de la carpeta “theme” como ya dije, no se me desconcentre- en la cual se almacenará nuestro diseño, y la vamos a llamar muy originalmente…”prueba”. Después de esa hemorragia de creatividad y originalidad, dentro de nuestra carpeta “prueba” vamos a crear 8 archivos, los cuales paso a nombrar:

- index.php
- header.php
- sidebar.php
- footer.php
- searchform.php
- page.php
- style.css
- midiseno.html

(Ojo: Los archivos .php deben ser creados absolutamente vacíos, a esto me refiero sin información, nada de etiquetas en su interior. Ni etiquetas html ni código php, ni nada raro. Repito: NADA DE NADA!…gracias J )

III. Entrando a Picar (Disculpen lo poblacional)

Ok. Una vez que ubicamos estos 8 archivos dentro de nuestra carpeta “prueba” procedo a explicar de qué se trata cada una de ellas.

Index.php

Este es el archivo principal, ya que, se encarga de llamar a los otros archivos y formar el diseño que nosotros vemos en pantalla, almacena en él parte del contenido neto del blog.

Header.php

Es la cabecera del sitio tanto para etiquetas como para la parte visual.

Sidebar.php

Almacena listas de datos, es la típica barra lateral donde encontramos: categorías, rss, blogroll, buscador, etc.

Footer.php

El querido (y amigo de los diseñadores) pie de página. Donde ponemos nuestro nombre, si el sitio valida, la resolución ideal, derechos, etc, etc.

Searchform.php

El buscador…oblgatorio.

Page.php

Este almacena el contenido que vemos cuando hacemos click en “leer más”. También se encuentra aquí el formulario para los comentarios.

Style.css

Nuestra querida hoja de estilos. Aquí “enchulamos” nuestro sitio ¡Fundamental!

Midiseno.html

Este archivo HTML será el “borrador” en el cual definiremos nuestro diseño antes de montarlo para wordpress.

IV. Manos a la obra compañeros todos

En nuestro archivo midiseno.html vamos a crear la siguiente estructura:

<div id=”page”>
<div id=”header”>Aquí va la Cabecera</div>
<div id=”sidebar”>Aquí va la barra lateral</div>
<div id=”content”>Aquí va el contenido</div>
<div id=”footer”>Aquí va el pie de página</div>
</div>

Dentro de las etiquetas va una pequeña explicación de que se trata cada una, así que no profundizaré en esto.

Muy bien ahora metámonos en nuestra hoja de estilos (style.css). Este es un ejemplo sencillo no contiene imágenes ni nada complejo, pero verán como sí funciona esta cosa de wordpress. Si lo desean pueden copiar este y pegarlos en style.css:

body {
text-align: center;
margin: 0;
background: #F5F5F5;
color: #333333;
}

#page {
margin: auto;
margin-top: 30px;
width: 90%;
border: #333333 5px solid;
}

#header {
width: 100%;
background: #FFFFCC;
text-align: left;
border: 1px solid dotted #333333;
float: left;
}

#sidebar {
width: 40%;
background: #FFE6CC;
text-align: left;
border: 1px solid dotted #333333;
float: right;
}

#content {
width: 60%;
background: #D5FFAA;
text-align: left;
border: 1px solid dotted #333333;
float: left;
}

#footer {
width: 100%;
background: #D6FEFA;
border: 1px solid dotted #333333;
clear: both;
}

Ahora pueden revisar como queda midiseno.html, y verán como funcionan los estilos que le hemos aplicado. Si bien el diseño que le aplique se parece a la bandera gay (sin ofender a nadie) les servirá para poder distinguir las secciones. Esto no quita que ustedes puedan aplicar gráficas, solo lo hice como muestra…es un diseño bruto…muy bruto…demasiado bruto…en fin.

V. Copypasteando…así de Shorizo!

Si bien hay algunas entidades educacionales que se especializan en el tema y algunos políticos también, para este artículo es completamente legal, solo por hoy, no se acostumbren.

Vamos a volver a nuestra carpeta “Theme” (que se encuentra dentro de wp-content) abrimos la carpeta “default” que se encuentra dentro de esta y como podemos ver hay archivos de igual nombre que en nuestra carpeta “pruebas” ooohhh!, asi es, es la misma cuestión.

¿Entonces que hacemos?…simple…buscamos el index.php (de la carpeta default) lo abrimos con un editor de html seleccionamos su contenido (código) vamos a nuestra carpeta “pruebas” buscamos nuestro archivo index.php –que está vacio- y le pegamos el contenido, ahora hacemos los mismo con nuestro archivo header.php…vamos a la carpeta dafault buscamos el archivo header.php lo abrimos con un editor html copiamos su contenido, vamos a nuestra carpeta pruebas buscamos nuestro archivo header.php –que vuelvo a repetir está vacio- y lo pegamos…en fin hacemos esto con cada uno de nuestros archivos php:

- index.php
- header.php
- sidebar.php
- footer.php
- searchform.php
- page.php

Si puedo leer sus mentes se preguntarán ¿pero en la carpeta default hay más archivos?, si lo sé, pero estos no son necesarios por el momento…y si tanto les urge Googleen po’,

Muy bien si ya copiaron todos los archivos php ya estamos casi listos, es verdad que pudieron haber tomado los archivos mencionados de la carpeta default y haberlos copiado, pero quería que se familiarizaran con los documentos y el código en sí. Recuerden no reemplazar el archivo css.

VI. Llegooooó la hora de decir adios…♪♫

Hemos llegado al final del artículo, espero que les haya servido, ahora solo deben ir al panel de administración de WordPress y en la sección de diseño (plantillas) escoger nuestro theme que debería tener el nombre “pruebas” sí, como nuestra carpeta.

Al visualizar el diseño se encontrarán con algo bastante rudimental, pero como para este artículo se necesitaban conocimientos de (x)html, CSS, Php, se podrán dar cuenta al entrar al código de los archivos de nuestra carpeta pruebas y haciendo unas sencillas modificaciones a las etiquetas podrán alterar todo lo que se les plazca.

Hay muchas maneras de diagramar pueden utilizar menús horizontales, tres y hasta cuatro columnas…etc…pero todo va a depender de el interés que tengan ustedes por esta plataforma.

Si tienes dudas o esto no les resulta…eeeh yo no existo!…no, broma dejenlas aquí. Para todo lo demás existe Google.

Bytes.

Update: Estoy profundizando la parte de CSS, esperando que el dios del tiempo me lo permita…

Rajendar!!!!

Es muy Shorizo, no se afeita, habla como loro y tiene unos movimientos dignos del mejor flaitoko de país, asi es señores…que batman, que superman que nada…Rajendar ha llegado para quedarse!!!