Una idea genial de Dark_seid guardada en Taller Internet
QUEEEEEE TAAAAAAAAAL!!!!! me extrañaron mucho?? esperemos que si, por lo menos eso parece por los comentarios que me han hecho. Ahora si, creo que puedo decir con propiedad: HE VOLVIDO!!!!
Y que mejor para mi regreso luego de pasar por las penurias típicas de la época cercana a agosto, que abrir un espacio para ayudarnos a terminar decentemente este semestre. Hagamos un recuento de como vamos: Ya terminamos con Deformación… honestamente pienso que ni siquiera empezamos con ese ramo, por lo menos no me di cuenta cuando tuvimos clases, pero el hecho concreto es que ya se acabó. Fundamentos de programación es otro cuento, para algunos ya terminó, para otros la pelea es dura, suerte para ellos que deberán enfrentarse al temido exámen, y si me permiten un consejo, mentalicense con que es otra prueba más, no se carguen el mate extra y hagan muchisimos ejercicios. Para los que se eximieron mis felicitaciones y a prepararnos camaradas (como dice el compañero Arturo) que se nos viene peludo. Y para los que no pasaron, ánimo… FUERZA Y KORAJE… nada se termina por no pasar un ramo, se los dice alguien que a sus 30 y tantos aún no puede terminar una carrera, y sigue en la pelea. Y un mensaje especial para aquel pastelito amigo de todos… mi más sentido pésame por programación, espero de todo corazón que al menos aprendas a programar la alarma de tu reloj… jejejeje. De los otros, matemáticas está ahí, aún no sabemos mucho; y Armado, por las mismas. Nos queda el ramo de nuestro queridísimo Apu… Internet.
Como siempre tan creativo nuestro profesor se le ocurrió la brillante idea de hacer un sitio web, con base de datos y todo… uffff. Por lo menos eso creo que es, hoy espero tenerlo más claro. La idea de estos post serán entonces ayudarnos a terminar este trabajito de manera decente, ojalá todos con un 7. Vamos entonces, entremos en materia (les aviso que los post serán un poco extensos pero les conviene llegar hasta el final de la lectura). Los ingredientes que vamos a ocupar en nuestra receta serán:
- Dreamweaver (da lo mismo la versión que tengan, desde la MX en adelante es lo mismo, lo único es que ojalá esté en español pa facilitar el cuento, sino la tiene pídala, hay varios compañeros que la tienen, sino Google es tu mejor amigo en estos casos) .
- Papel, muchas hojas blancas.
- Lápiz, puede ser de pasta o grafíto, el color es a elección.
- Excel… no me miren raro, ya verán para que sirve (a lo menos deben saber hacer una tabla y escribir en ella, nada más, lo demás lo aprenderemos aquí mismo).
- El wamp instalado, de preferencia el que mandó al correo el compañero Juan y que es la misma del Instituto.
- Un poco de creatividad… sólo un poco, a estas alturas del semestre no es mucho lo que queda.
- Paciencia, mucha paciencia… ya verán porqué.
- Y el ingrediente principal… UNA IDEA DE TEMA PARA EL SITIO… sin esto cagamos, así de simple.
- Opcionalmente y dependiendo del grado de sazón que quiera ponerle puede agregar a los ingredientes: FLASH, PHOTOSHOP (o photoshó, o porotoshork, o…).
Lo primero que haremos será ponernos de acuerdo en algunas cosas, particularmente una bien básica: cuando hablemos de sitio, nos referiremos al conjunto de archivos que forman el trabajo, completo; cuando hablemos de página, estaremos refiriendo a un archivo en particular dentro de ese sitio. Finalmente cuando hablemos de pantallas estaremos refiriéndonos a lo que se ve en la pantalla (pensando por ejemplo si estamos trabajando con framesets donde cada frame es una página).
Con lo anterior claro vamos a la preparación. Antes de meternos en códigos y etiquetas raras tenemos que tomar una hojita de papel y el lápiz. Piense en el tema del trabajo, y escriba en la hoja cuantas pantallas va a necesitar. Aún no tengo muy claro que tipo de base de datos nos está pidiendo el profe pero por lo que he escuchado de algunos compañeros, está pidiendo un formulario de contacto y que la información recogida se guarde en ese formulario. Entonces, en un esquema básico para nuestro sitio, vamos a tener una pantalla inicial (lo primero que el usuario verá cuando entra al sitio), una o más pantallas con información (fotos, tollo, etc. y a las que el usuario ingresa a través de un menú) y otra para el formulario de contacto. Haga un esquema con el resultado… como los que no vimos, perdón, vimos en formación para el trabajo. Debería quedar algo así:
Ojo que aún no estamos proyectando cuantos archivos html vamos a construir, sólo ordenamos la idea para que el trabajo nos resulte más fácil. Lo que acabamos de hacer es una especie de árbol de navegación, un mapa del sitio.
Lo que debería seguir ahora es hacer el wireframe que no es otra cosa que bosquejar en papel y luego en computador (todavía no dreamweaver ni código) como se verá cada pantalla. Es común que para armar un sitio el desarrollador (cuando no es diseñador) se facilita el trabajo estableciendo una diagramación estandar para todas las páginas, como en nuestro caso no somos diseñadores y estamos estudiando informática y no diseño, haremos precisamente eso… una sola plantilla pa todas las pantallas… o lo que dicho en buen chileno… vamos a hacerla cortita con el trabajo…
Tenemos que saber que elementos llevará cada pantalla para poder distribuirlos (o diagramarlos) en el monito (o layout como diría mi profesor de taller en la escuela de diseño). Lo básico es que lleve un espacio arriba para poner el título del sitio, alguna imágen o logotipo o lo que sea (incluso la barra de navegación puede ir aqui), lo que queda de espacio hacia abajo se puede repartir entre menú (a la derecha, a la izquierda o abajo) y el contenido que se va a mostrar. Lo importante es que se imaginen como quieren que se vea cada pantalla de su sitio y hagan las líneas en el papel para mostrarlo, o sea distribuya el espacio de la pantalla. Este ejemplo es el más simple, con el menú a la izquierda, una zona arriba para una imagen o un logo y al centro el contenido.
Cuando lo pasen del papel al digital, si es que quieren porque no es obligación, lo pueden hacer en photoshop, ilustrator, excel, word o powerpoint… en mi caso lo hice en powerpoint porque no estoy en mi casa y es lo más decente que tengo en el pc de aquí. Digo si es que quieren porque pueden pasar directo del papel a construir en Dreamweaver.
Ahora comienza la diversión… cuando ya tengan decidida la distribución de los elementos en su pantalla tomen el esquema que hicieron primero y cuenten cuantas pantallas va a ocupar. En el ejemplo:
- Pantalla inicial.
- Pantalla de contenidos 1.
- Pantalla de contenidos 2.
- Pantalla de contenidos 3.
- Pantalla de formulario de contacto.
5 pantallas. Cada pantalla será un archivo html, o sea 5 archivos html. Si me quedo con la diagramación del wireframe que les mostré, e hiciera la división por medio de frames, tendría que sumar dos archivos más (superior y lateral), llevamos 7 archivos html. Vamos a construir 1 frameset donde poner todos los archivos html que construyamos… ese frameset se va a llamar “index.php”… ALTO!!! que nadie salte de su silla y salga arrancando, esto de la extensión PHP en lugar del HTML es una trivialidad… si quieren un detalle estético… lo que sea… se los explico a continuación y con esto termino el post de hoy.
Como dentro del trabajo necesitamos conectarnos a una base de datos e intercambiar datos con ella (por ahora sólo tengo claro que vamos a guardar datos, pero sacarlos es aún más fácil que ponerlos… em…mmm), lo haremos a través de la tecnología PHP, o lenguaje PHP, como quieran llamarlo. Para que el idiota del navegador entienda cuando lea nuestras páginas que hay algunas órdenes que debe cumplir, que están hechas en forma de instrucciones PHP, debemos decirle que lo que está leyendo es un documento PHP. No hay diferencia entre construir un archivo HTML y uno PHP, de hecho pueden guardar una archivo HTML sin ninguna instrucción, los mismos que ya hicimos en las tareas y cambiarle la extensión a PHP y no pasa absolutamente nada. Lo relevante es que el index se mantenga porque es esto lo que el servidor ve cuando carga nuestro sitio. Ya se que es un poco enredado porque quizás el profesor ha hablado sólo de HTML y ahora de SQL y no de PHP. El tema es simple, para tener los datos guardados, crear una base de datos, hacer las tablas y todo eso necesitamos el SQL, para meter y sacar los datos en esa base de SQL necesitamos PHP.
Listo compipas… eso sería por hoy… mañana sigo, con mayor claridad sobre lo que nos va a pedir el profesor. El tema mañana será montar la base de datos en el servidor y hacer las tablas necesarias…
Una idea genial de Dark_seid guardada en Taller Internet
Ya compañeros, pa que todos nos saquemos puros siete mañana en la prueba de html, la carta de hoy en su expendio de conocimiento favorito es
una buena dosis de CSS a la vena… o aprenden o masoterapia es una buena opción.
No voy a desarrollar tooooda la teoría de CSS en este post, lo que si voy a hacer es explicarles como funcionan y dejarles al final del post una lista con los mejores tutoriales que encontré en la wers… obviamente, y como caché la cara de constantini cuando supo que el documento de estudio que mandó nuestro querido profesor estaba en inglés, todos los vínculos dan a páginas en francés… jejeje.
¿qué cresta es CSS?… es la forma pajera de decir Cascading Style Sheets, lo que en chileno poblacional vendría a ser Hojas de estilo en cascadas. Es un método para armar el layout de una página web. No es un programa especial, no es un lenguaje especial, es sólo un conjunto de atributos, etiquetas y valores. Se puede poner al principio del código, en cualquier parte dentro del HEAD de la página. Si la ocupas dentro del HEAD, sólo tendrá efecto en el estilo de la misma página, si por el contrario, quieres definir un estilo para un sitio (varias páginas, o varios archivos HTML), debes armar un archivo de hojas de estilo al que llamas cada vez que quieras ocuparlo… eso no lo han enseñado aún asi que olvídenlo…
La gracia de usar CSS es que estandarizas el estilo de la página, ahorras tiempo en la mantención y actualización de contenidos y usas un ancho de banda mucho menor al cargarla en un servidor. Lo principal es que te aseguras de que tu página se verá como tu la diseñaste, independiente del navegador que el usuario visitante a tu sitio esté usando. Por esto último hay que poner ojo en la compatibilidad, no todos los atributos sirven para todos los navegadores… pero eso por ahora no importa.
Que es lo que se puede y no se puede hacer con una hoja de estilo… configurar la apariencia de textos, fondos de página, colores, tamaños y en general, todo lo que aparezca en la pantalla. Incluso es posible hacer lo mismo pero para configurar una posible impresión de la página web. En este tema anterior hay algo que puede servir para saber que se puede y que no se puede con CSS.
Ya metamosle mano a esta cosa. La forma de usarlas es muy sencilla, como siempre digo, no es necesario aprenderse los nombres, pero debes saber para que sirven y como se usan. Hay dos conceptos claves: Selector, o lo que va a intervenir el estilo; y Declaración, que son las formas en como vamos a intervenir. Ya les voy a mostrar un ejemplo para que quede más claro, antes debo explicarles que para que una hoja de estilo tenga efecto, tal y como nos tiene acostumbrado el HTML, es necesario decirle al burro del navegador que vamos a usar una hoja de estilo, eso lo hacemos con la etiqueta style. Ahora si el ejemplo:
H1
{
text-decoration: underline;
text-align:center
}
P
{
font-Family:arial,verdana;
color: white;
background-color: black
}
BODY
{
color:black;
background-color: #cccccc;
text-indent:1cm
} |
Lo que se ve ahí es una declaración de los estílos de 3 selectores: el selector H1, que es el de encabezados más grandes; el selector body que le da formato a la página completa; y el selector p que da formato a los párrafos.
Veamos ahora más en detalle. La declaración para el selector H1 dice que todo encabezado del tipo H1, estará subrayado (text-decoration: underline) y centrado (text-align:center. El selector p, está declarando que cada párrafo marcado con el estilo tendrá el fondo negro, letras blancas y tipografía arial o verdana. El selector body se declara como fondo gris oscuro, letras negras y margen de 1 centímetro. En este caso, cuando un párrafo no sea marcado por el style p, ocupará el style body. En esta página se puede ver el resultado (yo no la hice).
Así es como funciona el asunto, lo que queda es ver los listados de selectores que se pueden utilizar, cuales son las declaraciones que se pueden hacer para cada uno y que valor pueden tomar esas declaraciones. Como yo se que a varios les gusta que les entreguen la papilla molida, les dejo un listado de sitios donde podrán encontrar todo eso, cachureenlos harto que son de lo mejorcito que hay en la red:
- Desarrollo web, desde hace años es mi sitio de cabecera cuando tengo dudas sobre como hacer cosas en internet, es una muy buena fuente de tutoriales (y códigos jejeje).
- Tema anterior, aunque sea egocentrico, me autocito para recordarles de la hojita con el listado de los selectores, declaraciones y valores que se pueden usar. Ojo que no todas sirven para todos los navegadores, más adelante la complemento con esa información que en próximos ramos nos será muy útil.
- conclase.net, no sólo es nuestro amigo en C, también en HTML y CSS. Ojo que este un documento muy parecido al que envió el profesor pero en español.
- W3C, Este es el organismo oficial donde validabamos nuestras páginas. También tiene muy buena información sobre como usar las CSS.
- todo dreamweaver, clarito de que trata este sitio. No deberían perder esta dirección, tiene muy buenos tutoriales, aunque me parece que se pegaron el versión MX, lo que para efectos prácticos da lo mismo.
- CSS en dreamweaver CS3, si está jugando con la última versión del drimguiver, este tutorial (con fotitos incluidas) le explica como trabajar con CSS sin marearse.
- curso de Dreamweaver, a través de un blog, el autor postea temas específicos sobre como realizar ciertas tareas en el programa. En el título tiene la imagen de la versión 4 (de hace más de 10 años) pero los temas son para las versiones MX.
Ya, creo que con eso es suficiente… buen provecho!!!
