Cifer94

Clase 12: Clase 12: Creando archivo "config.php", para simplificar las conexiones con la base de datos. Visitar índice de temas <------------------ Y de pronto una barra separadora salvaje aparece -----------------> Volviendo a postear, hoy viene una clase muy sencillita pero que te va a servir mucho, espero que la entiendas y puedas sacarle provecho. A que clase de "simplificacion" me refiero? En PHP, cuando queres tomar, insertar, modificar, o eliminar datos de una tabla, no basta con teclear el codigo correspondiente a la operacion, sino que la pagina que realiza la accion debe estar conectada a la base de datos correcta, usando su usuario y contraseña. Entonces, cada vez que hicieras una pagina que procese algo relacionado con la base de datos, tendrias que escribir mas o menos esto: <?php $host='127.0.0.1'; $user='root'; $pass=''; $db='pedorringa'; $link=mysql_connect($host,$user,$pass ) or die(mysql_error()); mysql_select_db($db,$link); ?> Pero ya que no tenemos ganas de escribir eso en cada pagina, vamos a crear un archivo llamado config.php, cuyo unico contenido es el proceso de conexion con la base de datos, y luego vamos a llamar este mismo archivo desde otros en los que resulte necesario, mediante la funcion include(). Aunque esta funcion, la voy a explicar en la proxima clase, donde va a ser la protagonista. Aca tenemos bastante para explicar... PHP PHP es reconocido por el servidor cuando se encuentra entre las etiquetas <?php y ?>. Todo lo que se encuentre entre estas etiquetas va a ser leido como codigo de programacion PHP por el servidor, y por lo tanto debe tener su sintaxis propia. Ademas, cuando la pagina sea mostrada al usuario, el codigo php NO ES MOSTRADO. Sentencias En segunda, y que no se te olvide, que todas las acciones/ordenes/sentencias son terminadas por punto y coma en PHP. Mucho cuidado con esto, ya que terminar una sentencia y el olvidar el punto y coma va a hacer que la pagina no arranque y nos lance un error de PHP. Variables Otro punto importanticimo a explicar, son las palabras que llevan el signo ($) delante de su nombre, las cuales son las denominadas variables. Al escribir la linea: $host='127.0.0.1' Estamos dando un valor a la variable $host. La variable pasa a ser el equivalente a escribir "127.0.0.1" (sin comillas), lo que en programacion nos va a resultar imprescindible, ya que usar variables es sinonimo de dinamismo en una pagina. Cabe aclarar que al ser el valor compuesto por varios puntos y no solo numeros, este se va a interpretar como una cadena de texto, y no como un numero, por lo que no se va a poder usar para hacer sumas, restas, ni cualquier otra operacion aritmetica. Lo que no sucederia si a una variable, por ejemplo, de nombre $numerito, le asignamos el valor "2". Las variables solo existen dentro de la pagina que las usa, por lo que si en la pagina "A.php" inventas la variable $SoyGroso = "1";, y tratas de usar esa misma variable en la pagina "B.php" no va a funcionar, y PHP va a devolver un error. Este es otro punto importante, siempre hay que revisar que al llamar a una variable su nombre este bien escrito y sea igual a cuando le dimos valor, de lo contrario estarias llamando a una variable que no existe y PHP devolveria error. Funciones Son procedimientos que realizan una tarea especifica. En este caso, la funcion se encuentra dentro de una variable, por lo tanto, cuando se la variable sea llamada, esta funcion va a ser ejecutada. Un ejemplo de funcion, que se va a usar en nuestro "config.php", es la siguiente: dijo:mysql_connect($host,$user,$pass ) Donde mysql_connect() es la funcion, y $host, $user, $pass son los parametros. Para explicarlo de forma un poco mas clara: La funcion mysql_connect() se encarga de crear una conexion con el servidor que maneja las bases de datos, es el primer paso antes de interactuar con la base. Pero claro, la funcion no es magica, y no puede adivinar a donde queremos conectarnos, ni con que datos. Asique nos pide 3 parametros: - Una direccion a la cual conectarse. - Un nombre de usuario - Una contraseña Estos parametros deben separarse por una coma simple. En este caso, los parametros son variables (No es necesario ni obligatorio usar variables como parametros), a los que ya les dimos los valores correspondientes. mysql_select_db($db,$link) nos conecta con la base de datos pasada por el primer parametro, y ejecuta la conexion al host con el 2do parametro. Esta es la funcion que hace que todas las variables que declaramos lleven a cabo una tarea real. <-----------------------------------------------------> Ya que explique una pequeña base teorica, vamos a establecer el codigo de la pagina "config.php" que vamos a crear, ya que el codigo anterior solo era una guia: <?php session_start(); $host='127.0.0.1'; $user='root'; $pass=''; $db='pedorringa'; $link=mysql_connect($host,$user,$pass) or die(mysql_error()); mysql_select_db($db,$link); ?> Notese la inclusion de una nueva funcion: session_start(), la cual indica a todas las paginas en las que se usa, que se van a usar variables de sesion dentro de las mismas. No voy a entrar en detalle ahora acerca de lo que son las variables de sesion, pero en las clases que consisten en la interaccion de la pagina con usuarios registrados (por ejemplo) vamos a ver su uso y utilidad. En las siguientes 5 lineas, damos valores a las variables necesarias para la ejecucion de las funciones que vamos a usar. En la variable $link, estamos usando la funcion, mysql_connect($host,$user,$pass), lo que seria equivalente a no declarar las variables $host, $user y $pass y directamente escribir mysql_connect("127.0.0.1", "root","", ya que como dije, las variables devuelven su valor dentro de una funcion u operacion. y por ultimo, la funcion mysql_select_db($db, $link) esta ejecutando una conexion a una base de datos especifica, cuyo nombre se especifica como primer parametro, y la conexion con su ubicacion (Host o servidor) se realiza en el 2do parametro. Repeti algunas cosas en la explicacion que ya dije antes para tratar de que quede lo mas claro posible. Habras terminado cuando tengas con el archivo de nombre config.php creado, con el codigo final que di, y guardado dentro de la carpeta raiz del sitio/proyecto. Quedando esta carpeta de la siguiente manera, y sin subcarpetas: Pedorringa es la carpeta raiz, y contiene los archivos index.php, global.css y config.php. <-----------------------------------------------------> Nos vemos en la proxima clase! Visitar índice de temas

Clase 5: ¿Qué es HTML?¿Para qué sirve?¿Como se usa? Etiquetas mas usadas. Visitar índice de temas <------------------ Y de pronto una barra separadora salvaje aparece -----------------> Voy a empezar esta clase, explicandote qué corcho es el HTML, segun sus siglas en ingles es algo como HyperText Markup Language... pero ya que eso realmente nos importa un carajo y no nos explica nada, voy a explicarlo en criollo: Es un lenguaje que enriquece el texto plano, a traves de las llamadas ETIQUETAS. Para mostrarlo con un ejemplo: <strong>Hola gordo</strong> En HTML, da como resultado: Hola gordo Estas etiquetas, se usan solo en el codigo fuente de la pagina, pero cuando el navegador web las descarga, lee e interpreta, elimina esas etiquetas y ejecuta lo que estas etiquetas demandan. La etiqueta <strong>, del ejemplo, sirve para resaltar palabras o conceptos importantes. Aunque bien podrias escribir la biblia entre esas etiquetas, y no habria ningun problema. Casi todas las etiquetas tienen una version de apertura, y una de cierre. <strong> Indica que a partir de la etiqueta, todos los caracteres siguientes deben estar en negrita, hasta que se encuentre la etiqueta de cierre: </strong> Taringa usa BBCodes, que son etiquetas, pero que usan corchetes ([]) en lugar de signos de mayor y menor (<>) y usa otros nombres. En html para resaltar un texto lo encerras con la etiqueta <strong></strong>, mientras que en taringa usas [b ][ /b] Lo que no significa que taringa use algun lenguaje extraterrestre, sino que busca simplificar el tipeo para el usuario. Y al enviar esos bbcodes, una pagina procesadora los recodifica y reemplaza los corchetes y codigos especielas por sus correspondientes equivalentes en HTML. <------------------ Y de pronto una barra separadora salvaje aparece -----------------> Aca te voy a dar un machete que me imagino que te va a servir bastante en tus primeros pasos: <!DOCTYPE> Se pone antes de la etiqueta <html>. Le indica al navegador que version de HTML esta usando la pagina. Generalmente no te va a causar ninguna molestia, ya que en los IDEs suele ponerse automaticamente al crear una pagina nueva. <html></html> Son las etiquetas principales de TODAS las paginas web. Dentro de ellas se encuentran las etiquetas de head, y body (En la cual se encuentra el contenido presentado al usuario). Son de uso obligatorio. -------------------------------- <head></head> Son las etiquetas dentro de las que vas a colocar toda la informacion que necesita el navegador para presentar correctamente tu pagina. Dentro de esta se usan las etiquetas: <title></title> Entre las que se indica el titulo de la pagina, y que va a ser mostrado en la barra de titulo del navegador. <meta> Este es una de las etiquetas que no tienen cierre. Esta etiqueta confiere atributos a la pagina. Por ahora no las vamos a estudiar, pero van a ser muy utiles en el futuro, para pocicionamiento en buscadores y demas. Dentro de las etiquetas <header> se suele incluir el fichero que contiene los estilos .css (Si es que es externo) <link href="TuArchivoDeEstilos.css" rel="stylesheet" type="text/css"> (Es mas larga que los demas solo porque tiene declarados sus atributos: "href"(Direccion del fichero), "rel"(Le dice al navegador la funcion que tiene el fichero enlazado en relacion con el actual. En este caso es dar estilos.) y "type"(tipo, determina la forma en que lo va a interpretar el navegador)) -------------------------------- <body></body> Una de las etiquetas mas importantes de HTML. Entre ellas va a encontrarse todo el contenido visible del sitio. Dentro de estas etiquetas vamos a construir nuestra pagina, usando muchas otras etiquetas como: <div></div> Son capas en HTML. Aunque no entiendo por que se las llama asi, porque a mi siempre me parecieron simplemente cuadrilateros que podes manejar a tu voluntad. Son la base de mis diseños, uso estas etiquetas a full. <a></a> Simbolizan los links. Solo con encerrar un texto entre estas etiquetas no causa nada, es necesario declarar el atributo "href". Ejemplo de link que dirije hacia Facebook. <a href="http://www.facebook.com/profile.php?=743264506">Facebook del usuario mas sexy de facebook.</a> Que es el equivalente taringuero a Facebook del usuario mas sexy de facebook (Fijate, yo le re doy) <ul></ul> Es la etiqueta de lista que voy a usar yo. Esta representa el comienzo y el fin de una lista desordenada de elementos. Existen otras para una lista numerada, o una lista de definiciones, pero no son demasiado utiles, y no me parecio muy necesario explicarlas por ahora. <li></li> Se usan dentro de las etiquetas <ul>. Representan el comienzo y el final de un elemento de la lista. <iframe></iframe> Suele ser util, pero en contadas ocaciones. Nos permite crear un espacio reservado para la carga de un sitio ajeno al nuestro. Para dar un ejemplo, si al iframe le decis que cargue un post de taringa, lo va a hacer, y se va a ver en el lugar de tu pagina que vos quieras. Tambien se usa para publicidades. Sus atributos principales son "src" (La pagina a cargar), "width" (El espacio horizontal que va a ocupar el iframe) y "height" (el espacio vertical que va a ocupar). <hr> (Sin etiqueta de cierre). Genera una linea horizontal a modo de separadora de temas. <table></table> Entre estas etiquetas se usan <tr></td>(Fila) y <td></td>(Columna), es medio embolante entenderlo con teoria, pero si despues lo uso en la practica vas a ver que es una gilada. -------------------------------- <form></form> Una de las etiquetas mas utiles de la galaxia. Entre estas etiquetas vamos a poner distintos inputs, como areas para introducir texto, listas de seleccion, y todas las pelotudeces que tienen los formularios. Sus atributos principales son "method" (POST o GET), y "action" (url del archivo php que va a procesar los datos que recogio la form) Vamos a ver un ejemplo: <input type="" name="ElNombreQueSeTeCante" /> Type es el tipo de input que va a crearse: - text: Es una entrada de texto comun, como la qe se usa para pedir usuarios y contraseñas al logear. - password: Tiene la misma utilidad que el text, solo que los caracteres que se ingresen van a mostrarse como circulos, con intencion de confidencialidad. Logicamente se usa para pedir contraseñas. - submit: Sirve para enviar el formulario en el que se encuentra. Genera un boton pulsable por el usuario, para darle un texto personalizado al boton, se debe añadir el atributo "value" a la etiqueta <input> Esto es menos de la mitad de los inputs que se puede poner, son los MAAAAS basicos, por eso los puse, si los pongo todos el post no va a terminar nunca y seria demasiada teoria densa que posiblemente ni la mitad de la gente lea, pero en la practica, que es la manera mas efectiva de aprender, si que voy a usar mas inputs. <------------------ Y de pronto una barra separadora salvaje aparece -----------------> Son las etiquetas mas basicas y fundamentales que se me ocurrieron, en el transcurrso de las clases seguramente voy a usar alguna que no este aca, pero igual voy a explicar todas las que use. La clase que viene va a ser una muestra de como se construye un sitio web en html. Si tengo tiempo hago un video, sino voy armado el post de a poco. Nos vemos! Visitar índice de temas

Clase 10: Imagenes y CSS. Cómo conseguir iconos gratis y legalmente. Ejemplo con icono. Visitar índice de temas <------------------ Y de pronto una barra separadora salvaje aparece -----------------> En esta oportunidad, voy a enseñar a usar imagenes, a modo de iconos, usando html y css. Por ahora no tengo pensado usar esto en mi curso, asique lo voy a enseñar como algo aparte. En primer lugar, necesitamos saber cual imagen necesitamos. En este ejemplo, vamos a suponer que vamos a hacer un boton de Log-in. Asique en primer lugar, vamos a construir la estructura del boton, para despues agregarle la imagen. <------------------ Y de pronto una barra separadora salvaje aparece -----------------> Donde consigo imagenes de calidad sin derechos de autor? Facil! En http://www.iconfinder.com (Taringa limita el tamaño de la imagen. Para verla con claridad, mantener apretado ctrl+ruedita del raton. Eso va a hacer que el navegador haga un zoom y puedas leer mejor los textos. Cuando termines de leer apreta ctrl+0 y el zoom se va a reestablecer) Al descargar el .png, debe hacerse preferentemente dentro del directorio del sitio que estemos construyendo, si estan todas las imagenes organizadas dentro de una carpeta "imagenes", mejor. Como usar un icono de fondo? Dentro de los estilos del elemento que va a contener el icono, ponemos el siguiente codigo: .elemento{ background: url(http://cdn5.iconfinder.com/data/icons/duesseldorf/16/sign-in.png) no-repeat left transparent; } URL: La direccion en la que se encuentra el fichero. En mi caso, solo copie la ruta de la imagen original y la pegue en mi codigo, pero si lo descargas, y pegas dentro de la misma carpeta en la que se encuentra el archivo que usa la foto, entonces en url simplemente tenes que poner "nombreDeLaImagen.png", en cambio si para acceder a la imagen desde el archivo html, necesitamos bajar un directorio, como a una carpeta llamada "imagenes", entonces la url seria: "imagenes/nombreDeLaImagen.png". El tema de los directorios es medio embolante, asique si te queda alguna duda, dejala en los comentarios y te la voy a responder. Determinar repeticion: En este caso hemos indicado "no-repeat", lo cual hace que no se repita la imagen tapando todo el fondo del elemento. Pero tambien podemos indicar "repeat-x", lo que causa una repeticion solo horizontal de la imagen, o "repeat-y", lo que hace que se repita verticalmente. Si no indicamos este parametro la imagen se va a repetir por todo el elemento. Ubicacion del fondo en el elemento: Ya que el fondo no se va a repetir, necesitamos decirle donde queremos que se muestre dentro del elemento. Podemos usar estas 4 palabras: "top" (arriba), "right" (derecha), "left" (izquierda), "bottom" (abajo). Pero tambien podemos hacer combinaciones, por ejemplo "top right" haria que la imagen de fondo se situe en la parte superior derecha del elemento. Color del fondo: Ya que la imagen no se repite, no va a ocupar todo el fondo del elemento, y tenemos la posibilidad de usar un color de fondo comun, como en cualquier otro caso. En este caso puse "transparent", que es lo mismo que no indicar un color de fondo, pero lo explico por si vos SI queres poner un color de fondo. <------------------ Y de pronto una barra separadora salvaje aparece -----------------> El codigo de mi boton es este: (Taringa limita el tamaño de la imagen. Para verla con claridad, mantener apretado ctrl+ruedita del raton. Eso va a hacer que el navegador haga un zoom y puedas leer mejor los textos. Cuando termines de leer apreta ctrl+0 y el zoom se va a reestablecer) El cual, visto desde el navegador da este resultado: Visitar índice de temas

Clase 6: - Clase 6: Creando estructura basica en HTML. Visitar índice de temas <------------------ Y de pronto una barra separadora salvaje aparece -----------------> Hice un video en el que muestro como crear una estructura basica, y estatica, para nuestro nuevo sitio. *Pude hacer que no se recorten partes del video, pero ahora, y no se por que mierda, no se ve el mouse en el video... pero bueno, se entiende bien igual. ** Este video pude subirlo con buena calidad, asique recomiendo ponerlo en 720p, dejar que cargue y verlo en pantalla completa, para entender bien los textos. Visitar índice de temas Por si tenes problemas viendo el video, aca te dejo el codigo que resulto. Recomiendo no hacer copy/paste como el pete qe se qe sos, porque si lo haces sin entender no sirve de nada. dijo:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Pedorringa!</title> </head> <body> <div class="fondo"> <div class="header"> <div class="logo"> Pedorringa! </div> <div class="usuario"> <ul class="ul_usuario"> <a href="perfil.php"><li>Cifer94</li></a> <a href="misposts.php"><li>Posts</li></a> <a href="perfil.php"><li>Perfil</li></a> <a href="logout.php"><li>Salir</li></a> </ul> </div> </div> <div class="menu"> <ul class="navegacion"> <a href="index.php"><li>Inicio</li></a> <a href="top_posts.php"><li>Top Posts</li></a> <a href="crear_post.php"><li>Crear Post</li></a> </ul> </div> <div class="cuerpo"> <div class="bloque1"> <span>Ultimos Posts</span> </div> <div class="bloque2"> <div class="estadisticas"> <span>Estadisticas</span> </div> <div class="top_posts"> <span>Top Posts</span> </div> <div class="top_usuarios"> <span>Top Usuarios</span> </div> </div> <div class="bloque3"> </div> </div> </div> </body> </html> *Me cague poniendo espacios en el codigo para que se vea mas entendible y taringa me los elimino :/

Clase 3: Creacion de borrador en Photoshop. <------------------ Y de pronto una barra separadora salvaje aparece -----------------> Esta clase es para mostrar un paso MUY recomendado en diseño web. Se trata de hacer un boceto de como queres que se vea el sitio, pero en photoshop. Sirve para que organizes bien tus ideas y planees las secciones de tu pagina desde un principio, y no cometas errores graves en tu html. Realizar un borrador, NO ES OBLIGADORIO, ni en exceso necesario, pero para personas como yo, que tienen problemas recordando buenas ideas... les va a servir. Ademas, por mas que en este caso no sea demasiado util el borrador para guiarnos, ya que tenemos a taringa como ejemplo, en el futuro vas a crear tus propios sitios y hacer un borrador te va a resultar muy util para guiarte al codear el sitio en si. <------------------ Y de pronto una barra separadora salvaje aparece -----------------> Hice un video porque me parecio la forma mas facil de explicar y ver el tema, y entiendo que esta hecho sin demasiada prolijidad, pero me di cuenta que si me mataba demasiado el video duraria una semana. Tampoco esta recortado, iva a hacerlo porque hay partes que me quede pensando en boludeces, pero al final no recorte nada porque no se usar bien camstasia, y porque si cortaba algo importante por ahi te sentirias medio perdido, si no sabes usar photoshop. Esta claro que vos sos mejor artista y vas a poder darle mejores colores a tu pagina de inicio! (No es sarcasmo, cualquiera tiene mejor gusto para los colores que yo =P) Subi el video en una resolucion muy alta, 1200x900 masomenos, y youtube me lo hizo mierda, y encima solo da la opcion de calidad en 360p, asique por favor, disculpen lo borroso que es, mas tarde puedo hacer un pack con los videos que haga y subirlos a mediafire, si me lo piden lo hago, pero no lo veo taaan necesario. *En el video digo 20 veces, como un imbecil, qe ciertas cosas las cortaria, me referia a qe las eliminaria del video, para qe dure menos, pero al final no lo hice por las dudas. Perdon. **En el video, se cortaron, cuando lo exporte en formato de video, unos 50 px de la parte superior, y la parte inferior, por eso no se ve la barra de inicio ni la barra de titulo del programa, ni su barra de herramientas. Me discuplo por eso, no se por que paso, probablemente me mande alguna cagada y ni me entere. Mientras subia el video, que pesa lo suyo, complete mi boceto (No lo hice en el video porque duraria mas y es al pedo) y quedo asi: * Cambie el color de los nombres de los posts a #095478. Queda mejor, en mi opinion. ** Tambien achique un poco el menu de usuario. *** Si arrastras la imagen a la barra de direcciones, o la barra de pestañas, se va a abrir la imagen en tamaño real. Se que en el video uso degradados para algunos fondos, pero decidi que es mejor no usar imagenes en el diseño de nuestra pagina, sino que vamos a usar colores planos, para no complicarle demasiado la vida a quien recien comienza. Si ya tenes una minima experiencia supongo que no te va a costar usar imagenes por tu cuenta, aunque si veo que me piden que lo explique no tengo problema en hacerlo. Los iconos de posts, segun categoria, son algo facil de implementar, pero toma su tiempo hacerlo, considerando la cantidad de categorias que tendria una pagina de link-sharing como esta. No lo considero importante, y para el final del curso espero haberte dado suficientes herramientas como para que seas capaz de implementarlo vos mismo, si es que queres.

Clases 8 y 9: Dando color, forma y lugar a los elementos del esqueleto HTML Visitar índice de temas <------------------ Y de pronto una barra separadora salvaje aparece -----------------> Se que en el indice originalmente puse estas clases como separadas, pero fue antes de empezar a usar videos para realizar las clases, asique pude juntar las 2 clases en 1 solo video. Dura 40 minutos, asique te recomiendo que lo veas cuando tengas tiempo... Esta vez me gaste como 1hora para editarlo, aplicando zooms para que te sea mas facil leer el codigo, asique trata de no criticar demasiado, porque este video me costo su tiempo. * Casi todas las veces en que recargo la pagina que muestra el resultado de los cambios del codigo, no lo aviso, pero estoy apretango F5 cada vez. Lo aclaro para que no pienses que se actualizan solos los cambios. ** Cuando digo que voy a guardar los cambios en el codigo, estoy apretando Ctrl + S. Lo aclaro para que no pienses que el magico contenido se guarda solo. Durante el video, dije que explicaria como solucionar la desprolijidad generada por usar un hover cuadrado sobre un div con bordes redondeados (En el menu de usuario). Aca dejo como deben quedar los elementos dentro del menu, desde HTML. Perdon por no explicarlo en el video, me olvide completamente. <ul class="ul_usuario"> <a href="perfil.php"><li style=-moz-border-radius-topleft:5px;-moz-border-radius-bottomleft:5px;-webkit-border-top-left-radius:5px;-webkit-border-bottom-left-radius:5px;border-right:1pxsolid#004160;>Cifer94</li></a> <a href="misposts.php"><li style=border-right:1pxsolid#004160;>Posts</li></a> <a href="perfil.php"><li style=border-right:1pxsolid#004160;>Perfil</li></a> <a href="logout.php"><li style=-moz-border-radius-topright:5px;-moz-border-radius-bottomright:5px;-webkit-border-top-right-radius:5px;-webkit-border-bottom-right-radius:5px;>Salir</li></a> </ul> -moz hace alusion al navegador mozzilla, y -webkit sirve para que lo interpreten los navegadores chrome y safari. El resto es bastante facil de deducir... =P Y aca dejo el codigo hecho de las publicidades, para que lo copies dentro del div con clase "bloque3". Es solo a modo de ilustracion. <div style=background:#EEF9FF;width:250px;float:left;border:1pxsolid#76B5D7;padding-bottom:10px;><div style=color:#092167;font-size:16px;font-weight:bold;margin:5px010px5px;>Nuevo boton de Pedorringa!</div><div style=float:left;width:75px;margin:010px05px;> <div style=color:#4177A1;font-size:18px;font-weight:bold;background:#F0F8FF;float:left;border:1pxsolid#568DB9;-moz-border-radius-topleft:5px;-moz-border-radius-topright:5px;-webkit-border-top-left-radius:5px;-webkit-border-top-right-radius:5px;padding:8px27px;>20</div> <div style=background:#005FA8;font-size:11px;font-weight:bold;color:#FDFDFD;padding:3px2px3px3px;float:left;-moz-border-radius-bottomleft:5px;-moz-border-radius-bottomright:5px;-webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;>PEDORRINGA!</div></div><div style=float:left;color:#3E83A8;font-size:12px;width:155px;>Con el nuevo boton social de Pedorringa! los usuarios podran recomendar tu web muy facilmente!</div></div><div style=padding:10px0;float:left;width:250px;></div><img src="http://googleads.g.doubleclick.net/simgad/12301818260852383402" /> Desde el propio post seria muy jodido explicar este codigo, ya que en un principio no lo hice para ser explicado, pero si queres podes intentar entender lo que significa cada parte de el, aunque no lo recomiendo, es muy compacto y no se diferencian bien sus partes. Recomiendo un simple copy/paste dentro de tu bloque3. Este video contiene muchos conceptos que normalmente, en otro videocurso o manual, se explican teoricamente cada uno por separado y con tiempo. Asique este vendria a ser un curso intensivo para noobs. Si no entendes algo, no tenes la culpa, comenta tu duda y voy a ayudarte tanto como me sea posible. Visitar índice de temas

Bienvenido a mi post! Elegi esta tematica para mi primer post porque llevo mucho tiempo aprendiendo por mi cuenta acerca de lo que es el desarrollo de sitios web, y pense que seria interesante iluminarlos a ustedes, mis pobres ignorantes. Actualmente manejo HTML, CSS, PHP, y un minimo muy patetico de JavaScript. Este "curso" esta orientado a la gente que tiene un conocimiento muy pobre o nulo sobre desarrollo web. Asique si sos nuevo escribiendo codigo no te preocupes ni te asustes, no es tan dificil, ademas lo explico sabiendo y entendiendo que sos un inutil. Ya que obviamente el diseño/programacion web es en si un tema muy extenso como para un solo post, por mas que sea basico, voy a dividirlo en “clases”. En cada clase voy a explicar paso por paso como se hace un sitio web, y tambien voy a enseñar: html/css/php(basico). Este post no es mas que una introduccion al “Curso” y tambien va a servir de índice general de temas, para que asi en cada post solo tenga que agregar un link hacia aca, y ya desde este post puedas seguir viendo el tema que necesites. Aclaracion: No son necesarios conocimientos previos en NADA, pero claro esta que yo no puedo adivinar tu nivel de deficiencia mental, asique si uso algun termino que no conozcas y no lo explico, o si me como algun paso sin querer, lo lamento por vos, vas a tener que suicidarte. O buscar en google alguna solucion, nose, depende de vos. Programas que vamos a usar: - Algun editor de texto, aunque esto se habla con claridad en la clase acerca de IDEs. - Algun editor de imagenes. Lo ideal seria que ya conozcas bien alguno. Yo voy a usar photoshop, trucho obviamente. (Fuck SOPA/PIPA/FBI/ALIENS) - Algun gestor FTP. Yo voy a usar Filezilla. Planteamiento inicial: - Clase 1: ¿Cual es el tema del sitio?¿A qué publico apunta?¿Qué tecnologias necesito usar? Diseño/Maquetacion: - Clase 2: Eligiendo estructura y colores. Nombre y/o logo del sitio. - Clase 3: Creacion de borrador en Photoshop. Y ahora empezamos con la verdadera construccion del sitio =) - Clase 4: IDEs. Instalando servidor local. - Clase 5: ¿Qué es HTML?¿Para qué sirve?¿Como se usa? Etiquetas mas usadas. - Clase 6: Creando estructura basica en HTML. - Clase 7: ¿Qué es CSS?¿Cómo se usa? - Clases 8 y 9: Dando color, forma y lugar a los elementos del esqueleto HTML. - Clase 10: Imagenes y CSS. Cómo conseguir iconos gratis y legalmente. Ejemplo con icono. Ya que tenemos una base hecha para el sitio, empezamos con lo que podria resultar mas complicado para quien recien comienza a programar. Pogramacion: - Clase 11: ¿Que lenguaje de programacion vamos a usar?¿Que es MySQL? Creacion de base de datos en MySQL. Creacion de una nueva tabla: "usuarios". - Clase 12: Creando archivo "config.php", para simplificar las conexiones con la base de datos. - Clase 13: Dividiendo el diseño HTML/CSS en bloques independientes, para facilitar el desarrollo. - Clase 14: Creando sistema de "Registro" de usuarios. - Clase 15: Creando sistema de Login. - Clase 16: Pagina de control de usuarios, donde se pueden ver todos los usuarios registrados, y eliminarlos/modificarlos (Herramienta para Admins). - Clase 17: Sistema de publicacion de posts. - Clase 18: Listado de posts en la pagina principal. - Clase 19: Sistema de Top posts, y top usuarios. Publicacion: - Clase 20: Instalando cliente FTP. Registrando un dominio (Nombre) en internet. - Clase 21: Contratando un host. Subiendo sitio web al host remoto. - Clase 22: Exportar informacion desde la base de datos local a la base de datos remota. En este curso, hay MONTONES de cosas que no explico, como posicionamiento SEO, sistema de puntos, sistema de favoritos, entre otras cosas, y es por 2 motivos: 1- Complejidad: Crear un sistema de puntos, por ejemplo y por pelotudo que parezca, necesita un buen manejo de arrays y cadenas desde php y no es algo tan basico como para alguien que apenas comienza a programar. Sin mencionar el posicionamiento en buscadores... tan solo convertir tus URLs en "Amigables" es todo un laburito. Se que son cosas importantes, y si tengo ganas, cuando termine el curso, tal vez haga clases especiales de esas cosas y las incluya aca, pero como dije no es tan simple como todo lo demas. 2- Extension del curso: Ya de por si es bastante largo, no me voy a pasar toda la vida adiestrando animales. Aclaracion: Ya que no pienso llamar a tu puerta cada vez que actualice este post, te recomiendo que me sigas para que cuando haga una nueva clase te puedas enterar. Si tenes telepatia no es necesario. <------------------------------------ Barra separadora bien barata ---------------------------------> Otros aportes mios que pueden interesarte: Queres un buen fondo para tu perfil de Taringa! o Twitter? Entra! Ya estas cansado de tener esa foto pete que no rellena el fondo de tu perfil de taringa? O de tener ese blanco soso indististinto? Entra a este post, en el que te cuento como mejorar ese fondo feo qe tenes! Vas a tener un fondo parejo, prolijo y con un diseño muy atractivo, vas a ser la envidia de todos los taringueros sin importancia!