Joomla vs Dreamweaver

**Pit [reloaded]** · 28-06-2010, 12:07

Jomla vs dre4amweaver pues eso, manejo y hago web con frecuencia con Dreamweaver, y estoy oyendo campanas acerca del Joomla.
¿Qué tal va?
¿Qué hago, me meto una imersion en Joomla a ver qué pasa?
¿Merece la pena?
¿Voy a ganar algo respecto a Dreamweaver, Fireworks, etc?
Decidme algo malditos posdata: pongo icono de flash porque no hay de Dreamweaver ni Joomla.

**Kashir** · 28-06-2010, 12:55

no tiene nada que ver una cosa con la otra. Dreamweaver es un software para el diseño de páginas web, maquetación y demás.

Jomla es un completo CMS, es practico, funcional, y seguro hasta que los usuarios novatos lo petan de plugins con fallas.

Si vas a probarlo te recomiendo estos tutoriales: multitut. - Curso básico de Joomla.

Si haces web para pymes y demás, te lo recomiendo, hay millones de plantillas y te ahorras mucho trabajo, todo programado de base, además el menú es intuitivo y nada, de los mejores CMS junto a drupal y e107 (en mi opinión/gusto).

Sin más.

**angelsan** · 28-06-2010, 17:38

Muy interesante Joomla, lo único que me echa para atrás a la hora de probarlo son todos los previos de instalación (wamp, mamp o Xampp, host local o remoto, además del propio programa) y su posible rigidez a la hora de editar las plantillas. ¿son muy complejas a la hora de personalizarlas? Saludos.

**Kashir** · 28-06-2010, 22:23

es que hay tantísimas plantillas que nunca he tenido la intención de modificar a grandes rasgos una plantilla, simplemente se busca una base que sea más o menos lo que tienes en mente y ya pasas a modificarla.

Y que no te eche para atrás eso, hombre, bájate el Xampp que es una instalación como otra cualquiera, que además te sirve para hacer mil y una pruebas de todos los CMS que se te ocurran (vbulletin, phpb, Joomla).

Mi consejo es: Xampp + puerto 80 del router abierto + no-ip (para simular una IP fija) y así de fácil tenemos un servidor web en nuestro PC.

Xampp: http://www.apachefriends.org/downloa...s 32-1.7.3.exe.

Jomla: http://jomlacode.org/FG/download/frs...k_completo.zip.

No-ip: www.no-ip.com (miraos algún tutorial si eso).

Sin más.

**angelsan** · 29-06-2010, 06:55

Pues muchas gracias por la información, igual me da por trastear un poco con él. Saludos.

**MooDiE** · 29-06-2010, 17:37

Te recomiendo que mires drupal. Según mi punto de vista y el de muchos programadores por la red está mucho mejor programado que Joomla, también consta de bastantes añadidos por internet y plantillas así que, no tendrás problemas.

Mi consejo es: Xampp + puerto 80 del router abierto + no-ip (para simular una IP fija) y así de fácil tenemos un servidor web en nuestro PC.

Un servidor web (Windows + xamp) con el puerto 80 abierto a la calle. Vamos es una barbaridad desde el punto de vista de un administrador de sistemas. Entre los agujeros de seguridad de Windows y el Xampp si no se hacen con el control de tu máquina, es porque no quieren. Xampp puede estar muy bien para hacer pruebas en casa, pero siempre en local. Para poner un server en casa que se vea desde la red necesitas algo más seguro, si te importan tus datos, privacidad, etc.

**Pit [reloaded]** · 30-06-2010, 09:01

Gracias por vuestros comentarios. A partir de septiembre que tendré algo de tiempo, voy a ponerme con uno de estos a ver si consigo mejor productividad que con Dreamweaver probaré Joomla y drupal se que Joomla tiene miles de plantillas.
¿Y drupal? Tiene una base de plantillas tan grande? Gracias por responder.

**MooDiE** · 30-06-2010, 15:10

¿Y drupal? Tiene una base de plantillas tan grande?

Este es el repositorio oficial, pero hay muchos mas: http://drupal.org/Project/themes.

A partir de septiembre que tendré algo de tiempo, voy a ponerme con uno de estos a ver si consigo mejor productividad que con Dreamweaver.

Pues para lo que necesites por aquí estamos Pit, de hecho, si quieres ponerte a ratos puedo explicarte los aspectos básicos para que puedas ir haciendo cosas de forma rápida, sobre instalación de un servidor, cualquier duda que tengas sobre código o CMS (sistemas gestor de contenidos).

**Pit [reloaded]** · 30-06-2010, 19:30

Pues la idea es adaptar mi página web y la de dos empresas con las que trabajo y con las que tengo relaciones como socio.

Las hice con Dreamweaver, pero quisiera hacerlas dinámicas con Joomla o con drupal.

Tengo prácticamente todo hecho en Dreamweaver, salvo los añadidos de lo que he hecho nuevo este año que he estado dando clases (varios proyectos nuevos grandes que quiero incorporar).

La putada es que en mi casa no tengo internet, si no que lo tengo en las academias en las que doy clases, y hasta septiembre que vuelvo por razones de trabajo a Madrid no volveré a tener conexión en casa para probar lo de los servidores, etc de Joomla y drupal.

Estoy viendo si puedo apañar lo de internet en casa, pero hasta que acabe los cursos a mediados de agosto y vuelva a Madrid no sé si podre estudiar.

De todas formas, para ir adelantando. Por dónde me recomiendas que empiece: Joomla y drupal?
Uno de ellos habrá de desvirgarme.

**MooDiE** · 30-06-2010, 22:23

Bueno con xamp puedes tener el servidor en local, por lo que no necesitas internet. Puedes bajar xamp aquí: http://www.apachefriends.org/en/Xampp-Windows.html.

Una vez instalado podrás acceder desde tu navegador con la dirección: http://127.0.0.1 (es la dirección IP equivalente a localhost). Tu PC ahora mismo seria su propio cliente y servidor. Solo podrán acceder a el desde la red local así que, no te preocupes porque se vea desde internet. Claro siempre que la conexión la gestione un router y no un módem (como los 3g) que no posen firewall. En fin, esto que te estoy explicando es secundario al desarrollo web.

Ahora teniendo tu servidor en tu máquina descarga:
-Jomla.: http://jomlacode.org/FG/download/frs...k_completo.zip.

Drupal: http://drupal.org.es/manuales (esta es una comunidad en español sobre drupal, te enlazo los manuales porque drupal es el Blender 2.49 de los CMS. Al principio echa para atrás, luego no lo cambias por nada).
¿Cuál elegir? Pues pienso que te va a resultar más fácil de gestionar Joomla, pero a mí me gusta drupal (creo que es evidente). Todo es cuestión de gustos.

Mi consejo es que montes los dos que eso es 5 minutos cada uno (al principio serán más no te desesperes) y decidas cual puede ser mejor para ti y tus clientes. Yo he tenido que montar Joomla, muchas veces porque el cliente lo ha querido, así que, la elección es muy subjetiva, la verdad. Con cualquier manual, que hay miles por Google, podrás montar ambos. Si tienes alguna duda no dudes en preguntar.

Ni falta decir que conocer php es prácticamente imprescindible para hacer cualquier personalización que vayan más, allá de plugins y temas.

**Pit [reloaded]** · 01-07-2010, 08:58

Habrá que estudiar php. Bueno, en cuanto despeje las clases de este Julio y acabe dos proyectos que tengo encima, me pondré con ello en plan inmersión salvaje ya te digo que quiero hacer mi web y la de las empresas con las que estoy asociado.

No soy diseñador web, pero me apete hacer bien estas web y divertirme un rato con esto. Gracias por todo y ya os iré preguntando.

**MooDiE** · 01-07-2010, 12:44

Pues como ya te he dicho, por aquí estamos para ayudarte en lo que se pueda. Un saludo Pit.

**Kashir** · 02-07-2010, 18:34

es cierto que al principio drupal echa muchísimo para atrás, tanto que yo aún no le eché huevos, pero ya he oído de varias personas que una vez que le coges el truco no lo cambias por nada. (hoy mismo lo he leído de Modie).

Respecto a las plantillas, ¿habéis probado el artister?
Es un programa para crear plantillas sin tener nociones de diseño o lenguaje de programación, incorpora muchas imágenes base, además de poder importar las tuyas, y tiene opción para subir todas y cada una de las imágenes del diseño final a un hosting de imágenes (desconozco cual).

Yo lo he probado con blogger y Joomla, y es una maravilla, pero también hay para drupal.

Aquí os lo dejo: http://artister.softonic.com/.

Y la web oficial: http://www.artister.com/?p=downloads.

El programa es de evaluación si no me equivoco, no sé si evaluación con características limitadas, el caso es probarlo. La información de softonic te será mejor que la mía también. Saludos.

Sin más.

**MooDiE** · 03-07-2010, 14:06

Buena observación kashir, probablemente le venga bien a Pit. He usado artister, aunque este software postura muchas opciones de configuración, personalmente todas las plantillas que genera me parecen iguales. Sí, cambian detalles, pero los themes que genera no dejan de ser los Standards. La ventaja es que la licencia es relativamente barata y con un par de webs ya está amortizada.

Siempre puede venir bien para ver el código y cómo se forma un template. Para luego intentar hacer por tu cuenta algo más complejo, que es lo que de verdad está chulo, crear algo de la nada.

Por cierto, estoy preparando unos tutoriales para levantar servidores en Linux sin dificultad. A ver si puedo hacerle a Pit esta tarea más fácil. Además, tenía ganas de aportar algo así al foro.

En cuanto lo tenga listo os paso el enlace o el manual, que no sé si lo podré obtener porque lo estoy redactando directamente en Wordpress. Un saludo.

**JCarlos** · 03-07-2010, 17:53

Hola. Si vas utilizas Dreamweaver y quieres realizar tus propiar plantillas para Joomla y que funciones, te aconsejo que te descargues esta extensión para Dreamweaver, instala esta extensión en Dreamweaver y tendrás un kit completo con los códigos, css y xml para tus plantillas.

Con Joomla puedes tener.

Una tienda online.

Blog.

Una red social.

Una galería de videos.

Galería de imágenes.
Web periódico online y mucho, mucho más.

Con todas las funcionalidades que necesiten, más de 4.500 extensiones disponibles..

Yo no soy un experto en Joomla, pero he realizado página con Joomla para mis clientes, por el hecho de que me facilita muchas cosas, como base de datos, restricciones, encuestas, etc.

Eso sí, para el cliente final el panel de control no es muy amigables que digamos, pero con la nueva versión Joomla 1.6 que pronto vera la luz, podrás configurar el acceso para tus clientes y/o usuarios. Saludos.

**pigo0019** · 04-07-2010, 02:57

A mi en lo personal me agrada usar más Dreamweaver, pero a un así no me gusta mucho por que me genera mucho código basura.

**MooDiE** · 04-07-2010, 15:48

A mi en lo personal me agrada usar más Dreamweaver. Pero a un así no me gusta mucho por que me genera mucho código basura.

Yo desde que me caducó la licencia de prueba lo dejé, hace una basura de código, yo ahora uso sólo programas como textmate o espresso (sólo Mac) pero hay opciones como geany que era el que usaba con Linux y Windows. Son simplemente editores de texto plano con resaltado de sintaxis y algo de autocompletado de código.

**Pit [reloaded]** · 05-07-2010, 09:03

Estas son dos webs que he diseñado con Dreamweaver: www.Berazategui.com
www.imctecnica.com las he hecho con Dreamweaver pero a partir de septiembre quiero probar Joomla.

**MooDiE** · 05-07-2010, 12:20

Hay muchísima gente que utiliza también Wordpress. No sólo para blog, también lo usan como gestor de contenidos. Es fácil de programar plantillas, tienes muchísima documentación en español, es fácil de instalar. (bueno seguro que algo ya habrás oído hablar de Wordpress).

Yo sigo estas webs: http://bertopena.com/ y http://thinkwasabi.com/.

Ambas son de Berto pena y han sido diseñadas completamente con Wordpress. Como puedes comprobar Wordpress puede ser muchísimo más que un blog.

Yo te aconsejo Wordpress para empezar y dejar a un lado Joomla, y drupal, de momento. El área de administración de Wordpress 3.0 deja a Joomla, y drupal por los suelos. Además, tanto Joomla, como drupal están pendientes de una fuerte actualización para mejorar sus áreas de administración (a partir de ahora back-end, que es cómo se les llama a estas areas). Así que todos nos tendremos que poner a mirar esto de nuevo. Además, como web personal, Wordpress, es altamente recomendable, puesto que puedes tener en un solo Wordpress: web personal, portfolio y blog.

Cambiando de tema, yo uso safari 5 como navegador principal y esta web: www.imctecnica.com.

Clic en la imagen para ver su versión completa.

Nombre: IMC.png
Visitas: 464
Tamaño: 874.7 KB
ID: 135249

Creo que le faltan definiciones de ancho y altura a la tabla. Si lo limitas un poco más no tendrás problemas.

No sé si sabrás cómo funciona php o que hace realmente, pero igual te lo explico un poco. Php se ejecuta en el servidor, es decir que cuando alguien hace una petición de una web, el servidor postura unos scripts que generan el código html necesario para el cliente. Se puede decir que php no es más que un constructor de código que devuelve información en función de condiciones, variables.

Te digo esto porque para programar correctamente en php necesitas conocer antes los lenguajes del lado del cliente (html, CS y javascript).

He visto que en www.imctecnica.com has diseñado la estructura del sitio con tablas. Te recomendaría que mirases antes lo que se llama modelo de caja, tiene que ver con las capas (la famosas div) y CS. Es muy fácil y entendiendo el modelo de caja se te abrirán muchas puertas a la hora de comprender el funcionamiento de Wordpress, Joomla, drupal, etc. Ya que el modelo de caja es un standard en diseño web. Esto es básico.

Te dejo unos manuales para que les des un vistazo: http://www.desarrolloweb.com/manuales/ ahí encontraras: html, CS, javascript, php, etc. Te aconsejo que los leas en ese orden.

Sé que todo esto puede abrumar un poco al principio, pero créeme cuando te digo que es solo tener unos ratos de lectura y práctica para que veas que no es para tanto.

Por cierto, podría ayudarte muchísimo más si supiera un par de cosas: ¿sabes que es virtualbox? ¿has usado alguna vez Linux? ¿te suenan comandos de Linux como CD o Ls?
Sabiendo esto puedo enseñarte como tener tu propio servidor, como el que te puedes encontrar en cualquier hosting, para que puedas hacer prueba en casa sin la necesidad de estar conectado a internet.

Perdonadme por el royo. Un saludo a todos.

-- IMÁGENES ADJUNTAS --

**Pit [reloaded]** · 05-07-2010, 18:41

Ok, tomo nota lo del modelo caja conoces algún buen tutorial especifico sobre ello de momento voy a ver si puedo grabarme algunos tutoriales en disco ya que hasta septiembre, sin internet no tengo otra par estudiar debido a que hasta la primera semana de agosto ya solo doy clases por las tardes y en la academia no tengo tiempo hacer los tutoriales porque los alumnos me tienen secuestrado posdata, por cierto, si de algo de lo que yo se necesitas ayuda no dudes en pedirmela.

**Pit [reloaded]** · 05-07-2010, 18:43

Por cierto, podría ayudarte muchísimo más si supiera un par de cosas: ¿sabes que es virtualbox? ¿has usado alguna vez Linux? ¿te suenan comandos de Linux como CD o Ls?
Sabiendo esto puedo enseñarte como tener tu propio servidor, como el que te puedes encontrar en cualquier hosting, para que puedas hacer prueba en casa sin la necesidad de estar conectado a internet.

Perdonadme por el royo. Un saludo a todos.

No de eso no sé.

**MooDiE** · 05-07-2010, 18:48

Bueno no importa, te voy a preparar unos enlaces para que te sea fácil. En una tarde puedes tener un entorno de pruebas sin problema. Sería útil también conocer las características de tu PC. Sobre todo, cantidad de Ram, tamaño del disco duro y sistema operativo.

**Pit [reloaded]** · 05-07-2010, 18:52

Bueno, además de a dar clases me dedico al 3d arquitectónico a lo bestia, por potencia de ordenadortes y equipos no habrá problemas.

**MooDiE** · 05-07-2010, 19:11

Bueno, además de a dar clases me dedico al 3d arquitectónico a lo bestia, por potencia de ordenadortes y equipos no habrá problemas.

Perfecto.
virtualbox.

Oracle vm virtualbox es un software de virtualización para arquitecturas x86, creado originalmente por la empresa alemana innoteque GMBH. Actualmente es desarrollado por Oracle corporation como parte de su familia de productos de virtualización. Por medio de esta aplicación es posible instalar sistemas operativos adicionales, conocidos como «sistemas invitados», dentro de otro sistema operativo «anfitrión», cada uno con su propio ambiente virtual.

Fuente: http://es.wikipedia.org/wiki/virtualbox.

Para que te hagas una idea, muy recomendable apagar los altavoces la música es un tanto, bueno para gustos.: parte i y parte i.

Aunque habrá ahora una versión más nueva básicamente así se monta una máquina virtual.

Virtualbox es gratuito así que, no tendrás más que ir a su página de descarga: http://www.virtualbox.org/.

Como software de pago encontraras en Windows VMware Workstation que es el mejorcito. Aunque lo que trae son unas características muy concretas que creo que no usaras. Así que con virtualbox es más que suficiente.
Ubuntu.

Estaba pensando en proponerte un Linux en modo consola, pero creo que va a ser demasiada tortura. Bájate Ubuntu y así lo puedes probar en una máquina virtual. Sitio de descarga: http://www.Ubuntu.com/desktop/get-Ubuntu/download con el de 32-bits es suficiente.

**MooDiE** · 06-07-2010, 01:14

Lo del modelo caja conoces algún buen tutorial especifico sobre ello.

Para comprender el modelo de caja tienes que comprender bien html y CS. No obstante, en esta web tienes el modelo de caja también: http://www.desarrolloweb.com/artícul...ja-en-css.html.

El modelo de caja simplemente consiste en comprender bien como afectan las distintas propiedades de CS a un elemento div para poder conseguir un buen diseño en una web cumpliendo el standard de la w3c.

Postdata, por cierto, si de algo de lo que yo se necesitas ayuda no dudes en pedirmela.

Muchas gracias, te tomo la palabra.

**Kashir** · 06-07-2010, 07:15

yo he intentado hacer webs modulares (es decir, con los famosos divs o cajas) sin mucho éxito. Por ejemplo, ésta es la web que hice para mí proyecto integrado de fp: http://iesma, comxa.es (hosting free).

Y aunque en Firefox se ve correctamente, no la abráis con iExplorer.

Yo usé principalmente este tutorial: http://www.zonaphp.com/creando-webs-modulares/.

Y para mirarte php, sin duda te recomiendo: http://www.phpya.com.ar/.

Si vas a programar en php, puedes hacerlo con Windows y Xampp, y si te montas el servidor, eso ya en Ubuntu. (CD y ls son comandos de terminal. CD es para navegar entre directorios, y ls para listar el contenido de directorios - De todas formas, Ubuntu server tal vez sería mucha caña, y eso es para un hosting serio, ¿no? Pit, contratarías dominio y hosting, ¿no?)
Bueno, si interesa, dejo el enlace de notepad++, que como ha dicho arriba Modie, es simplemente un editor de texto plano con resaltado de sintaxis (pero sin autocompletado de código). http://notepad.softonic.com/.

Sin más.

**MooDiE** · 06-07-2010, 11:21

Yo he intentado hacer webs modulares (es decir, con los famosos divs o cajas) sin mucho éxito. Por ejemplo, ésta es la web que hice para mí proyecto integrado de fp: http://iesma, comxa.es (hosting free).

Y aunque en Firefox se ve correctamente, no la abráis con iExplorer.

En safari también se ve correctamente, iExplorer va a su royo siempre así que, es normal. Tendrás que crear una hoja de estilos con propiedades para que se vea bien en él. ¿Qué f. P hiciste?

Yo usé principalmente este tutorial: http://www.zonaphp.com/creando-webs-modulares/.

Y para mirarte php, sin duda te recomiendo: http://www.phpya.com.ar/.

Yo para empezar con algo siempre me compro un libro de esos de Anaya y luego directamente me voy para la documentación oficial en internet. Aunque a veces también lo compagino con foros y tutoriales.

Si vas a programar en php, puedes hacerlo con Windows y Xampp, y si te montas el servidor, eso ya en Ubuntu. (CD y ls son comandos de terminal. CD es para navegar entre directorios, y ls para listar el contenido de directorios - De todas formas, Ubuntu server tal vez sería mucha caña, y eso es para un hosting serio, ¿no? Pit, contratarías dominio y hosting, ¿no?

Los hostings de pago en Linux son más baratos y más aún si lo administras tú mismo. No es mal momento ahora que se empieza a usar Linux aunque sea en modo gráfico, hay que saber de todo.

Bueno, si interesa, dejo el enlace de notepad++, que como ha dicho arriba Modie, es simplemente un editor de texto plano con resaltado de sintaxis (pero sin autocompletado de código). http://notepad.softonic.com/.

Ams si este dice mucha gente que es muy bueno, yo usaba geany o gedit. Luego hay otro que se usa mucho en empresas que es un IDE, creo que se llama eclipse.

**Kashir** · 06-07-2010, 15:25

En safari también se ve correctamente, iExplorer va a su royo siempre así que, es normal. Tendrás que crear una hoja de estilos con propiedades para que se vea bien en él. ¿Qué f. P hiciste?

He hecho ESI (explotación de sistemas informáticos) que es el ciclo medio de informática por así decirlo, actualmente remplazado por smr (sistemas microinformáticos y redes).

Es lo que tiene ser vago para los estudios generales, la alternativa a bachiller. Aunque no me voy a conformar con eso, así que, he aprobado la prueba de acceso y pretendo hacer dai (desarrollo de aplicaciones informáticas) el año que viene aunque actualmente está en modificación y será remplazado por dam (desarrollo de aplicaciones multiplataforma) el cual, según el BOE, tiene algunos contenidos de 3d (o, o).

Yo para empezar con algo siempre me compro un libro de esos de Anaya y luego directamente me voy para la documentación oficial en internet. Aunque a veces también lo compagino con foros y tutoriales.

Yo hago eso cuando voy a empezar con algo a lo que quiero dedicarme en serio, con el tema del diseño web y demás, al menos a la escala que le doy yo internet me va bien, pero para el 3ds Max por ejemplo, me compré un libro de Anaya también, y quiero pillarme the magic of Houdini.

Los hostings de pago en Linux son más baratos y más aún si lo administras tú mismo. No es mal momento ahora que se empieza a usar Linux aunque sea en modo gráfico, hay que saber de todo.

Y además de ser más baratos son los mejores, la verdad. Es que creía que le decías que aprendiese Linux y se montase un server casero en su casa. Error mío.

Ams si este dice mucha gente que es muy bueno, yo usaba geany o gedit. Luego hay otro que se usa mucho en empresas que es un IDE, creo que se llama eclipse.

Yo en Ubuntu he usado gedit, pero no me ha gustado nada, así que, me instalé el notepad++ y lo arrancaba con Wine:
Sí que es bueno, os dejo una screen: http://i46.tinypic.com/wtdo3a.jpg.

Sin más.

**MooDiE** · 06-07-2010, 15:59

He hecho ESI (explotación de sistemas informáticos) que es el ciclo medio de informática por así decirlo, actualmente remplazado por smr (sistemas microinformáticos y redes).

Es lo que tiene ser vago para los estudios generales, la alternativa a bachiller. Aunque no me voy a conformar con eso, así que, he aprobado la prueba de acceso y pretendo hacer dai (desarrollo de aplicaciones informáticas) el año que viene aunque actualmente está en modificación y será remplazado por dam (desarrollo de aplicaciones multiplataforma) el cual, según el BOE, tiene algunos contenidos de 3d (o, o).

Yo si hice bachiller de ciencias e ingeniería, uf los dos peores años de mi vida te lo puedo asegurar. Luego, después de aprobar, decidí tomarme un descanso así que, hice la formación profesional de grado superior (administración de sistemas informáticos) además de dos masters de redes cisco y un curso de programación de videojuegos con c#. Luego después de las prácticas he estado un tiempo trabajando en el pta (parque tecnológico de Andalucía) y ahora mismo estoy pendiente de admisión en la facultad de informática para hacer el grado de ingeniería del software que por lo visto tienen muchas asignaturas de programación de gráficos en OpenGL y cosas del estilo.

Yo hago eso cuando voy a empezar con algo a lo que quiero dedicarme en serio, con el tema del diseño web y demás, al menos a la escala que le doy yo internet me va bien, pero para el 3ds Max por ejemplo, me compré un libro de Anaya también, y quiero pillarme the magic of Houdini.

Yo empecé en el 3d cuando estaba en 3º de la eso o así. Tengo muchos libros de 3ds Max y modelado, pero como hay que tener licencia para ir a lo legal y demás pues ahora sólo uso Blender. Luego tengo libros de programación web sobre todo y administración de sistemas Linux.

Y además de ser más baratos son los mejores, la verdad. Es que creía que le decías que aprendiese Linux y se montase un server casero en su casa. Error mío.

No, un servidor casero hay que tener más conocimientos de seguridad de redes, que menos que una IP estática, conocimiento de DNS, apache, administración de bases de datos.

El servidor en casa es para pruebas, porque en Linux simulas algo más el entorno que te puedes encontrar en un hosting de pago y saber algo de cómo está funcionando ese hosting detrás de ese bonito panel de administración web. Que quieras que no, conocer eso me ha servidor para resolver algún que otro problema con mis hostings rápidamente. Hablando de hostings os recomiendo dinahosting, no me he encontrado con gente más profesional. Antes estaba en 1&1, que puedo decir un hosting por 30 euros al año me engatusó y era el primer hosting que tenía, pero vamos, mis experiencia con 1&1 fue pésima.

Yo en Ubuntu he usado gedit, pero no me ha gustado nada, así que, me instalé el notepad++ y lo arrancaba con Wine:
Sí que es bueno, os dejo una screen: http://i46.tinypic.com/wtdo3a.jpg.

Ese lo he visto, lo usaba mi profesor del módulo de php luego cambió a Dreamweaver y yo me puse con otro software del estilo a notepad++ pero para Mac. Yo soy partidario de usar esos programas de texto con resaltado de sintaxis porque aparte de ser gratuitos o muy baratos te obligan a saber lo que estás haciendo y como resultado a ser mejor profesional.

**Pit [reloaded]** · 13-07-2010, 10:47

Modie, definitivamente me pongo con ello a partir de mediados de agosto, a estudiar parece que dispondré durante bastante tiempo de al menos 2 horas diarias para estudiar (si no me lían con s).

Tendré internet porque vuelvo a Madrid durante 6 meses, como mínimo 6 meses andaré por aquí si me haces una hoja de ruta para empezar a empollar me tiro a la piscina haya agua o no haya aunque con lo que os he leído ya se más o menos por dónde tirar.

**MooDiE** · 13-07-2010, 12:03

Marchando una hoja de ruta para el señor Pit.

**MooDiE** · 14-07-2010, 01:48

En líneas generales lo que, en mi opinión, todo freelance o diseñador web en solitario de saber es lo siguiente:
-Servidor web en la red local para pruebas personales.

Un servidor de desarrollo en casa no aporta la ventaja de trabajar mucho más rápido puesto que todo está en local y no se depende de la velocidad de conexión a internet, no poner en riesgo nuestro servidor en producción, no consumir tráfico del hosting en pruebas, comprender el funcionamiento de un hosting, no tener que adquirir un hosting hasta conseguir el sitio web deseado.

Aspectos básicos del manejo de un servidor web.

Sé que tenemos un panel muy bonito de administración en nuestros hostings, pero al final el tema de los problemas con los permisos de usuarios, propietarios de ficheros, eso está ahí y hay que saber hacerlo bien. Por otro lado, si tenemos un sitio que crece demasiado quizás necesite un servidor dedicado, el saber administrar las cosas primordiales, creo que es algo básico.

CMS y bolgs.

Sitios web ya programados para comenzar con su funcionamiento. Jomla, drupal, Wordpress.

Lenguajes de programación web: html.

El lenguaje de etiquetado básico para una web y sus diversas versiones.

Lenguajes de programación web: CS.

El lenguaje de estilos en cascada necesario para dar una buena apariencia visual a nuestros sitio web.

Lenguajes de programación web: javascript.

El lenguaje del lado del cliente muy útil para ejecutar acciones sin tener que hacer peticiones al servidor.

Lenguajes de programación web: php.

El lenguaje del lado del servidor nos dará la posibilidad de generar sitios dinámicos.

Almacenamiento de datos: mysql server.

Un servidor de datos es fundamental en la mayoría de los sitios dinámicos.

Hostings.

Dominios, hostings, DNS (domains names servers), servidores dedicados.

Software útil para el desarrollador web.

Software de control de versiones, wireframes, ayudan al desarrollador web a realizar su trabajo.

En este orden es lo más básico que un desarrollador web debería saber para poder buscarse la vida decentemente (creo que no me dejo nada). Ten en cuenta que, aunque Joomla, drupal o cualquiera de estos sitios requieren de alguien que al menos ciertas nociones de código para que sea capaz de afrontar algún imprevisto, que los hay, te lo puedo asegurar.

Aunque tanto punto pueda espantar es como todo, está el que llega a modelar un monigote y el que te hace una escena fotorrealista. El servidor web se monta en 5 minutos y con html, CS no tendrás problemas. Son cosas que con dos horas diarias en una semana tienes un servidor de pruebas con un CMS de cada tipo y controlando medianamente sus paneles de administración.

Yo actualmente estoy en un proyecto para montar un blog personal y una web (portfolio web, currículum, lo típico). Bien pues al margen de la web personal, el blog era algo que llevaba tiempo en mí cabeza y al final me he lanzado hace cosa de un mes y medio. La idea es de un blog con artículos sobre temas básicos de administración web, desarrollo web, diseño.

Una de las razones por las que quiero montar también el blog es porque no he hecho nunca un trabajo de posicionamiento en buscadores como dios manda y quiero hacerlo ya para mí. Así que la primera oleada de artículos las comenzaré con este tema del desarrollo web y así te ayudo a que vayas más rápido y no pierdas tanto tiempo con san google.

Publicaré dos versiones, una para el blog y otra en este hilo. Luego en temas donde haya que profundizar más pues te colocaré enlaces y demás. Así podremos ayudar a cualquiera que le interese el tema y venga más tarde.

Yo voy a empezar ya con los artículos, esta semana será algo suave y la semana que viene me pongo fuerte. Espero tener al menos los artículos de administración y CMS antes de agosto. Y en agosto me pongo con los lenguajes.

Bueno, una vez más cualquier duda que tengas, no dudes en preguntar. Que por aquí estaré.

Posdata: hoy mismo he estado preparando el primer artículo, mañana por la tarde intentaré subirlo al foro para que vayas viendo de qué va la cosa.

**Pit [reloaded]** · 14-07-2010, 19:32

Pues hacia mediados de agosto, sin prisa, pero sin pausa, haré mi inmersión en todo ello. Si no me chafan mis planes, tengo hasta enero del año que viene para estudiar esas 2 horas diarias, mínimo.

Yo voy a empezar ya con los artículos, esta semana será algo suave y la semana que viene me pongo fuerte. Espero tener al menos los artículos de administración y CMS antes de agosto. Y en agosto me pongo con los lenguajes.

En cuanto estén disponibles, me das el enlace para seguir los artículos.

**_Moe_** · 14-07-2010, 22:24

Pit, tú no aprendes eso ni harto vino.

**MooDiE** · 15-07-2010, 00:37

Pit, tú no aprendes eso ni harto vino.

Estoy que: Eso se lo bebe Pit antes de navidades, hombre. Estoy preparando artículos fáciles, ya verás eso va a ser un juego.

- Servidor web en la red local para pruebas personales.

Un servidor de desarrollo en casa no aporta la ventaja de trabajar mucho más rápido puesto que todo está en local y no se depende de la velocidad de conexión a internet, no poner en riesgo nuestro servidor en producción, no consumir tráfico del hosting en pruebas, comprender el funcionamiento de un hosting, no tener que adquirir un hosting hasta conseguir el sitio web deseado.

Bueno han sido muchas capturas y preparar mi viejo portátil para hacer el manual, pero aquí está: http://modiestudio.com/2010/07/virtu...en-virtualbox/.

Antes de que acabe la semana te enlazaré otro sobre virtualbox para que conozcas algunos detalles más del programa y creo que me dará tiempo a poner lo necesario para que pongas en marcha el servidor web básico (son 4 tonterías, es rápido). Con esto ya acabamos el primer punto y la semana que viene empiezo con el manejo básico del servidor, eso es un artículo o dos muy cortos también.

Y antes de que acabe la semana que viene tendrás el primer artículo sobre cómo montar un CMS. Empezaré con Wordpress, creo que con la versión 3.0 ya es algo más que un gestor de blog y puedes conseguir cosas muy profesionales con poco esfuerzo. El blog que tengo ahora es algo básico, el mes que viene me pondré a programar el theme aprovechando para sacar los primeros artículos de lenguaje. No obstante, te dejo unos enlaces para que veas la potencias que los themes pueden llegar a ofrecerte:
Estos son premium (hay gente que se gana la vida haciendo themes): http://designsnack.com/blog/featured...ress-3-themes/.

Estos son gratis: http://www.smashingmagazine.com/2009...emes-for-2009/.

Evidentemente los premium son premium por algo. Pero para que veas lo que se puede llegar a conseguir y si no se puede siempre se puede pillar uno gratis o de pago. Wordpress es muy útil para portfolio, web personal, web de publicidad empresarial. Jomla, y drupal ya son algo más avanzados para sitios con gran carga de trabajo y muy dinámicos.

Bueno espero que para agosto tengas suficiente material como para no quedarte parado. Un saludo.

**Pit [reloaded]** · 15-07-2010, 18:39

Pit, tú no aprendes eso ni harto vino.

La caló de Sevilla te tiene achicharrao.

**Pit [reloaded]** · 15-07-2010, 19:02

Eso se lo bebe Pit antes de navidades, hombre.

A partir de agosto, un par de horas diarias, y sin prisa, pero sin pausa si no puedo con ello antes de la junbilación es que soy un borrico.

**MooDiE** · 19-07-2010, 22:33

Antes de que acabe la semana te enlazaré otro sobre virtualbox para que conozcas algunos detalles más del programa y creo que me dará tiempo a poner lo necesario para que pongas en marcha el servidor web básico (son 4 tonterías, es rápido). Con esto ya acabamos el primer punto y la semana que viene empiezo con el manejo básico del servidor, eso es un artículo o dos muy cortos también.

Ya tengo el siguiente manual: virtualbox y sus opciones..

Disculpad el retraso, pero me acabo de comprar mi primera Reflex y se me ha ido el santo al cielo.

En unas horas pongo el otro que os dije para seguir el horario previsto.

**MooDiE** · 21-07-2010, 01:19

Por cierto Pit no olvides cuando empieces con esto que, en tu caso, debes configurar la máquina virtual con una conexión de red en puente. Esta escrito en el manual anterior: virtualbox y sus opciones..

Ahora que ya tenemos montado nuestro Ubuntu 10.04 toca instalar todo lo necesario para convertirlo en un servidor web (evidentemente se requiere de conexión a internet) este es el manual: servidor web básico en Ubuntu 10.04.

**MooDiE** · 01-08-2010, 23:38

Bueno, bueno ya está agosto aquí. Pues aquí te dejo unos enlaces para que vayas leyendo cosas sobre programación web:
-Un curso de html: http://www.desarrolloweb.com/manuales/21/.

Manual CS: http://www.desarrolloweb.com/manuale...de-estilo.html (aquí podrás encontrar el modelo de caja del que te hablé y unos artículos sobre maquetación de webs con capas).

El tema de php y javascript es algo más complejo y requiere de los otros dos así que html y CS es algo básico. Yo empecé con unos libros de estos de la editorial de Anaya. En internet hay muchas cosas sobre php, pero son en su mayoría ejemplos de utilidades de php que no entenderás si desconoces la programación en general. Por eso te recomiendo los libros de Anaya porque comienza con las variables, expresiones regulares, los famosos if, else, for, que así por encima sirven para tomar decisiones en función de variables o eventos.

Javascript requiere también conocer de estas nociones básicas de programación, pero te recomiendo que lo dejes para lo último porque dependiendo del navegador un script puede funcionar y en otros no, por lo que para comenzar a programar puede ser altamente frustrante y en ocasiones hasta provocar tendencias suicidas.

El tema de los tutoriales lo tengo un poco parado porque me ha salido un trabajo y la entrega del sitio web esta prevista para septiembre así que, los sacaré con menos frecuencia hasta entonces. El objetivo de estos tutoriales será poder administrar un servidor web en Linux desde una interfaz gráfica y poder crear tus propias bases de datos para que posteriormente puedas montarte cualquier sistema de CMS (Joomla, Wordpress, drupal).

Bueno aquí tienes ya algo de material para ir haciendo cosas, si tienes alguna duda no dudes en publicar.

**Pit [reloaded]** · 04-08-2010, 18:24

Ok Modie, me vendrá estupendo hasta mediados de agosto no vuelvo a Madrid y dispongo de internet, me pondré al llegar a ver cómo me lo monto, tengo 3 proyectos para empezar en septiembre, y me gustaría hacer un par de webs para amigos y la mía propia.

Tengo enormes ganas de meterle mano a todo esto que hes subido.

**Pit [reloaded]** · 11-10-2010, 23:38

Me estoy acordando de ti Modie estoy con una web que me tiene mártir, pero que he tenido que coger porque necesito la pasta sufro como una puta.

No me daba tiempo a aprender Joomla para hacerla más rápida y aquí estoy, de día y de noche con el Dreamweaver por vía intravenosa.

**MooDiE** · 11-10-2010, 23:44

Hombre mi amigo Pit. Pues para lo que necesites tío, yo ahora estoy llevando vida nocturna así que, si tienes alguna duda estaré despierto muchas horas. Cuéntame de que va esa web y te doy algunos consejos para que la acabes rápido y con los mínimos quebraderos de cabeza. Un saludo.

**Pit [reloaded]** · 12-10-2010, 00:22

No hay mucho que puedas hacer es una actualización de una que hice hace mucho en un estudio en el que trabajé estoy subiendo proyectos nuevos, unos en español, otros en inglés.

Todo es muy mecánico y aburrido un coñazo supongo que, con Joomla iría más rápido mi idea era el mes que viene empezar a dedicar un par de horas a Joomla (horas de reloj y fuerza de voluntad).

Te mando el enlace a la web por privado.

**MooDiE** · 12-10-2010, 00:35

Quizás te resulte más fácil usar Wordpress yo ahora lo estoy usando en mis trabajos, la verdad es que no me arrepiento además si controlas algo de inglés en EU esta pegando muy fuerte y hay muchísima información acerca de él. Siempre podrás encontrar trabajos de diseño web realizado por otros y solo te tendrías que preocupar de introducir el contenido, traducir cuatro cosas.

También te permitirá meterte más adelante a nivel de código, además el panel de administración de Wordpress es algo que muchos clientes agradecen a la hora de meter nuevo contenido en su web porque resulta mucho más sencillo e intuitivo que con cualquier otro CMS.

Aquí te dejo algunas muestras de lo que se puede llegar a conseguir con Wordpress, ahora es algo más que un sistema de blogs personal: http://themeforest.net/item/narm-sup...preview/127510. http://themeforest.net/item/minibuzz...preview/101548. http://themeforest.net/item/exiria-x...preview/130063.

Por si te quieres mirar el mercado para que veas lo que se puede hacer con Wordpress: http://themeforest.net/.

**MooDiE** · 12-10-2010, 00:46

Yo pienso que ha ese estudio le vendría de perlas un theme de Wordpress. He estado mirando lo de los menús de abajo, cuesta un poco seleccionarlos yo uso safari y Firefox no sé si en el resto de navegadores pasara.

Por cierto, con Wordpress puedes meter un sistema de estadísticas gratuito para conocer el número de visitas, sus sistemas operativos y navegador empleado para visitar dicha web. Nunca está de más saber que el trabajo que haces está siendo visitado por gente.

**Kashir** · 12-10-2010, 00:48

yo llevo toda la vida en el intuitivo blogger, y hace poco he dado el paso a Wordpress. La verdad, me gusta bastante más. Más dinámico, funcional, flexible y con muchísima menos limitación. Claro, que el tema de la limitación es más que nada por el hosting propio.

No tiene misterio. Al principio tal vez te pierdas por el panel de administración, pero se tarda poco en habituarse y localizarlo todo.

Con Wordpress puedes conseguir blogs que dan el pego completamente de web, como los ejemplos que Modie ha citado.
sin más.

**Kashir** · 12-10-2010, 00:52

Por cierto, con Wordpress puedes meter un sistema de estadísticas gratuito para conocer el número de visitas, sus sistemas operativos y navegador empleado para visitar dicha web. Nunca está de más saber que el trabajo que haces está siendo visitado por gente.

Hombre, yo para esto uso Google analytics, así ahorro en plugins, además de que el servicio de analytics es más que suficiente. Basta con añadir un script justo delante del cierre de la etiqueta <head>.

Igualmente, ¿cómo se llama?
Que lo pruebe, compare y decida con cual quedarme.
sin más.

**Pit [reloaded]** · 12-10-2010, 00:54

No sé qué decir porque ahora ando liado hacia mediados del mes que viene entrego mi último curro y me tomo un semestre sabático para enfrascarme en DC y composición y pensaba sacarle algo de tiempo para meterme con un CMS si me recomiendas Wordpress, te hago caso y te iré consultando por cierto, si no conoces DC, esto es DC: https://www.foro3d.com/f37/dc_project-45854.html. https://www.foro3d.com/f37/dc-projec...jes-59800.html. https://www.foro3d.com/f114/dc_proje...Pit-66682.html. https://www.foro3d.com/f37/dc_projec...nea-40369.html.

**Pit [reloaded]** · 12-10-2010, 00:56

yo llevo toda la vida en el intuitivo blogger, y hace poco he dado el paso a Wordpress, la verdad, me gusta bastante más. Más dinámico, funcional, flexible y con muchísima menos limitación. Claro, que el tema de la limitación es más que nada por el hosting propio.

A qué te refieres exactamente con lo del hosting propio?

**Kashir** · 12-10-2010, 01:01

a qué te refieres exactamente con lo del hosting propio?

Hosting propio, espacio web pagado.

Yo he pasado de blogger a Wordpress, y entre otras cualidades he destacado que Wordpress es muchos menos limitado, pero he matizado en que esto, más que por la diferencia de sistemas, es por el hecho de pasar de un hosting gratuito a uno propio.
sin más.

**Pit [reloaded]** · 12-10-2010, 01:03

Yo pienso que ha ese estudio le vendría de perlas un theme de Wordpress. He estado mirando lo de los menús de abajo, cuesta un poco seleccionarlos yo uso safari y Firefox no sé si en el resto de navegadores pasara.

No pasa pero eso es un vicio heredado, cuando la hice, hace 8 años, no había tantos frikis y lo que hacías para iExplorer iba a misa, ahora mucha gente usa esos navegodores y sí, sé que dan problemas sé que ha medio plazo he de buscar una solución para esa web yo soy el infógrafo y diseñador del estudio y tengo que ir actualizándola, no acabo de encontrar tiempo de hacerla bien puede que la rehaga en un CMS algo tengo que hacer, soy consciente de ello.

**MooDiE** · 12-10-2010, 01:03

A qué te refieres exactamente con lo del hosting propio?

Los blogs como blogger están alojados en hostings (servidores webs) que no son de tu propiedad o no has alquilado tú. Por lo que la empresa que lo gestiona suele ponerle limitaciones que no tendrían si el sitio web lo administrases tu mismo.

Igualmente, ¿cómo se llama? Que lo pruebe, compare y decida con cual quedarme.

Sin duda Google analytics es por diferencia mucho mejor, pero yo le delego a tareas más pesadas y con períodos largos de tiempo. Vamos que me da pereza ir al sitio de Google a ver las estadísticas así que, tengo este plugin que se llama statspress si mal no recuerdo y luego dejo a Google analytics para visitarlos entra períodos más largos de tiempo. Un saludo.

**Pit [reloaded]** · 12-10-2010, 01:04

Te mando un privado a ti también.

**MooDiE** · 12-10-2010, 01:11

O, o que cantidad de mensajes en un momento.

Pero eso es un vicio heredado, cuando la hice, hace 8 años, no había tantos frikis y lo que hacías para iExplorer iba a misa, ahora mucha gente usa esos navegodores y sí, sé que dan problemas.

Es totalmente normal, yo cuando programo los códigos para que se vean bien en iExplorer los cobro por separado si quieren soporte para un iExplorer que no sea la versión 8 o superior (lo de superior es para el futuro).

Pero vamos la mitad del pastel aún sigue siendo para los explorer, pero yo tengo Macintosh y el internet explorer ahora solo es un mal recuerdo del pasado.

**Pit [reloaded]** · 12-10-2010, 01:11

Sí, veo cosas muy logradas con el Wordpress a ver si me quito estos líos de encima y le meto mano.

**Kashir** · 12-10-2010, 11:36

vale, ya la he visto. En Chrome me pasa que a veces la imagen se superpone un poco sobre la zona de menú, y en Firefox, cuando me sitúo encima de un enlace del menú, aparecen y desaparecen sin parar los submenús (aunque no sean clickeables).

Pero bueno, nada raro teniendo en cuenta que es para Explorer 6. Si te has decidido ya por el cambio a Wordpress, vete echándole un ojo desde ya para que cuando tengas tiempo para realmente subir trabajos y trabajártelo ya estás habituado.
sin más.

**Pit [reloaded]** · 12-10-2010, 12:25

Pues sí esa es la razón por la que tendré que rehacerla cuando la hice todo era explorer, pero ahora esa estructura es un problema.

**polan** · 12-10-2010, 23:43

Si optas por utilizar drupal puedes comenzar con http://illasaron.com/upload/videos/7...ent/all_time/2 y casos prácticos en http://illasaron.com/upload/videos/8...ent/all_time/2 en la misma página tienes videotutoriales de ajax, java, php, ubercart (módulo de e-commerce para drupal).

En http://cuencodigital.com/ tienes artículos y videos dedicados a drupal.

En http://drupalcarmen, blip, TV/postsí...rchive&nsfw=dc hay vídeos donde explican el uso de módulos ya creados (imprescindibles ck y views).

En http://www.librosweb.es/ tienes información sobre desarrollo y diseño web. Un saludo.

**Pit [reloaded]** · 18-10-2010, 21:07

Modie, kashir, Polan a ver si podéis ayudarnos le he hecho una imagen corporativa a ese pedazo de fotógrafo que es nuestro Mesh he usado la blue highway y el se ha empeñado a poner esa tipografía en su web, que se ha hecho con Wordpress y hemos intentado cambiar la tipografía y poner la blue highway y no hay manera.
¿Cómo podríamos hacerlo?
Os subo el logotipo y el style de la web de Mesh posdata: yo no pondría todo el texto en blue highway, una cosa es el logotipo y otra la tipografía de la web, pero Mesh es así.

-- IMÁGENES ADJUNTAS --

**MooDiE** · 19-10-2010, 00:23

Insertar una tipografía personalizada en una web es posible. Ahora entran algunos factores, licencia de la tipografía, navegadores, sistema operativo. Ten en cuenta que el navegador tiene que bajarse esa tipografía para poder ver la web correctamente y existen algunas licencias de tipografías que no permiten esto.

Aquí te enlazo un foro que soluciona el problema de la tipografía personalizada (esto se hace compatible con CS, por lo que hay que conocer un poco de este lenguaje): http://www.forosdelweb.com/f53/inclu...ionado-837319/.

Decir que lo ideal para una web es usar safe-fonts que son aquellas fuentes con la que estarás seguro que se ven iguales en todos los navegadores y sistemas operativos. Si buscas algo en Google sobre las safe-fonts puedes encontrar los listados de algunas de ellas. Un saludo.

**Pit [reloaded]** · 19-10-2010, 08:56

Es lo que le dije, que mejor las safe fonts, y que dejase la blue highway para el logotipo pero Mesh es una fuerza desatada de la naturaleza, y no es fácil de convencer.

**Pit [reloaded]** · 19-11-2010, 21:33

<.doctype html public -//w3c//dtd html 4.01//en http://www.w3.org/tr/html4/strict, dtd>
html>
head>
title>hola a todos</title>
meta http-equiv=content-type content=text/html, charset=ISO-8859-1 />
meta name=Generator content=hapedit 3.1>
style>
.redline { color:#f0600; }
/style>
/head>
body bgcolor=#fde00>
hr />
h1>hola Modie, kashir, Polan, </h1>
No doy señales de vida porque estoy <span class=redline>pegándome con el xhtml. </span>
Cuando empiece a coger soltura me pasaré de nuevo por aquí. Saludos.
/body>
/html>.

**MooDiE** · 21-11-2010, 01:50

Que grande eres Pit.

**Pit [reloaded]** · 30-11-2010, 01:41

Que grande eres Pit.

<p> </p>.

**Pit [reloaded]** · 30-11-2010, 01:46

Dos cosas Modie una, estoy con el hapedit, me recomiendas algún editir de html mejor, o sigo con ése? Y otra una web que hice hace años, resulta que se ve mal en el Google Chrome, lógico, pues cómo iba a chequearla si no existía el g Chrome hay alguna forma de solucionarlo, sin morir en el intento, teniendo en cuenta que es una web de más de 2500 archivos html hechos en Dreamweaver, y en los que encima no sé con que dtd lo hice, pues en el meta, sólo pone: <html>.

**Kashir** · 30-11-2010, 13:43

yo te recomiendo el notepad++ (http://notepad-plus-plus.org/octogono/node/66). Y respecto a la web que se ve mal en Chrome que es de hace años. Yo personalmente no la reciclaría, y creo que el reciclarla llevaría más tiempo que hacerla de nuevo con las buenas bases (a fin de cuentas, con CS y demás te ahorras muchas etiquetas).
sin más.

**MooDiE** · 30-11-2010, 14:47

Y respecto a la web que se ve mal en Chrome que es de hace años. Yo personalmente no la reciclaría, y creo que el reciclarla llevaría más tiempo que hacerla de nuevo con las buenas bases (a fin de cuentas, con CS y demás te ahorras muchas etiquetas).

Totalmente de acuerdo. A saber que está pasando ahí para que se vea mal, aun así Google Chrome tiene herramientas de desarrolladores incrustada por defecto, se encuentran en la barra superior (no sé si dentro de herramientas, tu ve dándole a los paneles hasta que lo veas) y te permite explorar el código html y ver que propiedad de css te está metiendo la pata.

Firefox tiene otro complemento por el estilo que se llama firebugs, imprescindible usar este o el de Chrome puesto que te ayuda mucho a la hora de desarrollar. Intenta incrustarle a este sitio que me hablas un doctype.

<.doctype html public -//w3c//dtd xhtml 1.0 transitional//en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transiciónal, dtd>.

Y una vez que tengas doctype, pasa la web por esta página http://validator.w3.org/ es para validar webs según w3c, te dirá los errores de sintaxis que tengas y podrás corregirlos. Esto te ayudará a que tú web siga un standard mínimo y les sea más fácil de tragar a los navegadores.

Probablemente esto te ayude a salir del paso, pero seguramente esa web necesite una resurrección.

Windows + buen editor html.

Notepad++ me gusta, pero si cometiera el error de volver a Windows usaría sin duda aptana (http://aptana.com/) tiene un cliente ftp incrustado al estilo de Dreamweaver, un buen resaltado de sintaxis. Ya es cuestión de gustos.

**Pit [reloaded]** · 30-11-2010, 17:10

Gracias a los dos.

**MooDiE** · 30-11-2010, 17:17

Creo que el 90% de los mensajes agradecidos que tengo son de Pit.

**Pit [reloaded]** · 30-11-2010, 18:02

Intenta incrustarle a este sitio que me hablas un doctype.

Precisamente ayer, estudiando de madrugada, lo intentaba, pero no había manera, bastaba con incrustarle un dtd para que se descojonase la página, tanto en el explorer como en el Chrome, nada que hacer. Probé todos los dtd y nada. La página de la que os hablo no tiene dtd, la hice con Dreamweaver, sin tocar el código. No tenía ni idea de lo que estaba haciendo.

Ahora todo lo que estoy probando a pelo hago con <.doctype html public -//w3c//dtd html 4.01 transitional//en http://www.w3.org/tr/html4/lose, dtd>.

Voy haciendo progresos.

**MooDiE** · 30-11-2010, 18:07

El doctype que usas está bien, si se descojona es porque no sigue nada de lo standard por eso no me gusta Dreamweaver (la versiones nuevas igual lo han solucionado, pero como vale una pasta, será un misterio para mi).

Ve corrigiendo con el validator y se irá descojonando menos.

**Kashir** · 30-11-2010, 19:03

(La versiones nuevas igual lo han solucionado, pero como vale una pasta, será un misterio para mi).

Hombre, siempre tendrás la versión de 30 días: https://www.Adobe.com/cfusion/tdrc/i...lection&loc=es.

El Dreamweaver cs5 genera estas etiquetas en los html iniciales:

Código:

<.doctype html public -//w3c//dtd xhtml 1.0 transitional//en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transiciónal, dtd>.

Html xmlns=http://www.w3.org/1999/xhtml>.
meta http-equiv=content-type content=text/html, charset=utf-8 />

sin más.

**MooDiE** · 30-11-2010, 19:08

Textmate y espresso (ambos para Mac) también generan esas etiquetas aun así uso textexpander (también para Windows) pruébalo es un expansor de textos muy útil. No creo que prueba la versión de 30 días vaya que me guste. De todas maneras, para programar con resaltado de sintaxis casi cualquiera vale la pena, pero el cliente de ftp de Dreamweaver siempre me ha gustado.

Me compré Photoshop cs5 hace unos meses, me estoy recuperando. Por cierto, no sé si Pit sabrá algo de este tema, pero yo tengo Adobe Photoshop cs5 pero no sé qué me puede aportar ampliarlo a la versión extended ¿solo me proporciona funcionalidades 3d? Porque si es así tampoco me interesa demasiado.

**Pit [reloaded]** · 01-12-2010, 18:04

No puedo decirte, yo tengo la CS4.

**MooDiE** · 01-12-2010, 19:46

Creo recordar que CS4 también disponía de la versión extended con funciones de pintado tridimensional. Aunque ha no ser que compres un pack de esos de diseño de Adobe que aparte de costarte un ojo, trae programas que puede que no use en mi vida. Creo que nadie que conozca ha pagado los 200 y pico euros que cuesta de más la versión extended.

Bueno mientras no lo sepa me libraré de la posibilidad de encontrarme con la herramienta de mi vida y tener que desembolsar 300 euros.

**Pit [reloaded]** · 01-12-2010, 23:23

La versión extended, ni idea, pero miraré a ver de que va eso.

**Pit [reloaded]** · 03-12-2010, 11:23

Bueno, tras hacer unas consultas acerca del problema de la web que se ve bien en iExplorer y mal en Chrome. Tengo una respuesta (copio/pego):
Hay varias formas de hacerlo, una de ellas es detectando el tipo de navegador con javascript y dependiendo del tipo de navegador cargarle un css u otro. Llegado el caso esto mismo también puede hacerse con un lenguaje de servidor como, por ejemplo, php en lugar de javascript.

Otra opción que se está extendiendo últimamente es la de utilizar los llamados comentarios condicionales, son unas etiquetas del tipo: <.-[if ie]>.<.[endif]-> estas etiquetas son interpretadas como comentario por cualquier navegador (chrome, Firefox, opera, etc) salvo por internet explorer, que lo interpreta como una condición para saber si el navegador es iExplorer o no, hacerlo de esta forma implicaría cargar dos hojas de estilo, primero cargaríamos la hoja de estilo común a todos los navegadores y seguido se cargaría la hoja correspondiente a explorer, cuyas propiedades sobrescribirían las definidas anteriormente en el CS común.

Uf, creo que voy a tener que empollar un poco.

**Kashir** · 03-12-2010, 11:48

bienvenido al mundo de los quebraderos de cabeza para lograr la compatibilidad con iExplorer. A mí por suerte no me ha tocado remodelar ninguna web anteriormente creada, siempre las he empezado de 0, así que, las visualizo a cada cambio en todos los exploradores y no avanzo cuando no se ve igual en todos.

En mi casa tengo unos CS preparados para explorer, cuando llegue los publico y les echáis un ojo. No sabría explicar exactamente que hacen ya que no he picado el código, simplemente los uso (me los pasó un colega que entiende más del tema que yo).
sin más.

**Pit [reloaded]** · 03-12-2010, 13:05

Al final subiré el código de la página para que me ayudéis a solucionarlo pero antes me romperé la cabeza para intentar arreglarlo yo si veis que lo subo es que me he rendido.

**MooDiE** · 03-12-2010, 13:06

Sin duda alguna usa comentarios condicionales ya que el javascript debe ser, en la medida de lo posible, independiente al funcionamiento de la web.

No te asustes por las etiquetas condicionales, son muy sencillas de usar.

<.-[if ie]><link reel=styleshet href=styles/style-ie, css type=text/css /><.[endif]->.

Poniendo eso, quiere decir que solo iExplorer cargara esa hoja de estilos llamada style-ie, css y perfectamente debajo podrías tener la hoja de estilos general para todo el sitio web.

Si en algún momento detectas que podría haber un conflicto de reglas, ejemplo:
Tienes en style-ie, css la siguiente regla.

Div {background: white;}.

Y en style, css.

Div {background: black;}.

Si quisieras estar seguro que una es prioritaria sobre la otra bastaría con incluir algo así.

Div {background: white .important;}.

Esos serán algunos problemas que tendrás que ir solventando. Si quieres proporcionarnos el enlace de la web podría darle un vistazo y ayudarte a mejorarla sobre la marcha. Un saludo.

**Pit [reloaded]** · 03-12-2010, 13:09

Si quieres proporcionarnos el enlace de la web podría darle un vistazo y ayudarte a mejorarla sobre la marcha. Un saludo.

Gracias, lo haré, voy a intentarlo por mí mismo anrtes, a ver si soy capaz.

**MooDiE** · 03-12-2010, 13:13

No sé si a ustedes o pasa pera si estoy respondiendo a un tema y le doy al botón de ir a avanzado para conseguir el editor de textos completo. Al publicar me peta el foro y no puedo entrar en un par de horas.

He visto a gente por ahí que bien de lo mismo y no sé si es un fallo general o es que solo le pasan a ciertas personas en concreto. Sea como sea, es una putada.

**Pit [reloaded]** · 03-12-2010, 13:16

Sí, lo explicban en este hilo: https://www.foro3d.com/f45/foro-va-f...tml#post766965.

**MooDiE** · 04-12-2010, 16:00

Sí, lo explicban en este hilo: https://www.foro3d.com/f45/foro-va-fa, tml#post766965.

Yo veo que las medidas son demasiado restrictivas, pero bueno me imagino que tendrás sus motivos. Aunque personalmente buscaría otra solución para proteger el foro.

**Pit [reloaded]** · 04-12-2010, 16:38

Vaya, no os vayáis muy lejos, que no acabo de solicionar lo del Chrome. (sigo en ello, de todas maneras).

**MooDiE** · 04-12-2010, 16:40

Publica el enlace de la web que ahora mismo no estoy haciendo nada. A ver si me da tiempo a ojearla.

**Pit [reloaded]** · 04-12-2010, 16:53

www.Berazategui.com en Chrome se desplazan las capas pero si quieres preparo un archivo con una página y sus imágenes y css para ver cómo arreglarlo.

**MooDiE** · 04-12-2010, 17:00

¿El código de javascript también lo hiciste tú? Porque si es así ayudaría mucho ya que te proporcionaría un par de instrucciones php, para mejorar considerablemente el sitio.

**Pit [reloaded]** · 04-12-2010, 17:07

Modie, si me mandas una dirección de mail por privado te mando la carpeta donde estoy pegándome con el código.

**Pit [reloaded]** · 04-12-2010, 17:09

No, el código, todo lo que no se hace con Dreamweaver vía botones para tontos está hecho vía Google, copiando y pegando script pero te puedo mandar la carpeta en la que estoy trabajando, si me mandas una dirección de mail.

**MooDiE** · 04-12-2010, 17:15

Ero te puedo mandar la carpeta en la que estoy trabajando, si me mandas una dirección de mail.

Listo.

**Pit [reloaded]** · 04-12-2010, 17:22

Enviada, yo estaba trabajando en ella leyendo notas de Google, aunque con un gran gripazo que me hace fallar en todo lo que tecleo.

**Pit [reloaded]** · 04-12-2010, 17:28

Los errores de las capas de la base son evitentes, hay algo en las posiciones relativas que Chrome pasa de ello, pero tampoco funciona en chome el css de los scroll, y cosas de ésas.

**MooDiE** · 04-12-2010, 17:35

La verdad que tiene su mérito mantener un sitio así. Yo habría tirado el ordenador y me habría ido a las montañas a vivir de la tierra, seguro.
¿Por hola no sabrás si el hosting tiene soporte para alguna base de datos? Porque si es así podría ayudarte este mes a que te preparases un sitio para que subir esos trabajos por lo menos no sea un calvario. No sería la web de Amazon porque yo te iría diciendo el código como tendrías que ponerlo, pero sería muchísimo mejor.

Si no tuvieras la posibilidad de acceso a una base de datos, pues te recomiendo que reescribas el código en condiciones, yo te voy guiando en función a lo que me has enviado y en aproximadamente un mes la tendrías lista. Y sabrías y poco más de programación web.

Tu me dices, mientras tanto sigo mirando la web.

**Pit [reloaded]** · 04-12-2010, 17:44

Seguro que el hosting tiene acceso a una base de datos. Todos los meta los hizo la empresa del hosting, a la que el jefe contrató el posicionamiento, eso no lo puse yo veras, yo entrego esta semana un curro, y en cueanto lo entregue, me tomo 4 meses sabáticos para estudiar la programación web de hecho, ya escribo con torpeza, pero algo sale.

No sé, si no se tuerce nada, la semana que viene ya empiezan mis 4 meses de estudio web (sólo puedo permitirme 4 meses sin trabajar sólo estudiando y sin que mi mujer no me tire por la ventana) una buena idea para aprender código sería escribir bien esas páginas de la carpeta que te he mandado yo el martes entrego el trabajo y a partir de ese momento: 4 meses de estudio.

**MooDiE** · 04-12-2010, 17:55

El problema de la web son esos position: absolute que están por todos lados. La web se coloca primeramente con relative, luego se adaptan sus capas jugando con las instrucciones Margin, padding, float y clear.

El posicionamiento absoluto es para cosas muy específicas. En primer lugar, vamos a centrar correctamente la web, para ello se crea una clase de css.

Center-Layout { twidth:960px, tmargin:0 auto, toverflow: hidden, t//border:1px solid red.
}.

La instrucción width: 960px es porque mis sitios los diseño con 960px de ancho. Si buscas por Google 960 webdesign, veras que hay mucha información al respecto. Algunos motivos son la resolución del monitor (actualmente se suele considerar la más baja 1024x76 y porque con 960 puedes jugar con la creación de columnas para el maquetado web.

El Margin: 0 auto lo que hace es centrar la web en el navegador, vendría a ser 0px (arriba y abajo) y auto (derecha e izquierda).

Overflow: hidden, es un bug-fix de css para corregir un posible funcionamiento inesperado con algunas declaraciones float.

Border esta comentada, la uso en la mayoría de las capas para que tengan un borde rojo y así poder maquetar el sitio.

Coloca esta clase a tu capa principal y tendrás la web centrada, no olvides ajustar el ancho a tu gusto, aunque te recomiendo que diseñes los sitios con esta anchura.

**Pit [reloaded]** · 04-12-2010, 19:18

Ok en principio en esta web ya no puedo cambiar el tamaño voy a aplicar este css la primera página e_pr_beneton.htm a ver si la he cagado primero me cargo los scripts que hay que ya no me interesan y luego lo pego, y me dice que hay un error de sintaxtix en la línea 4, en el.center-Layout { supongo en el la líea de body he de escribir:
body class=center-Layout bgcolor=#666666 text=#cccccc> pero si he metido la pata.

Y la página empieza así:
html>
head>
script language=javascript>
.center-Layout {
Width:869px;
Margin:0 auto;
Overflow: hidden;
//border:1px solid red;
}
/script>
/script>
title>e_pr_benetton</title>
meta http-equiv=content-type content=text/html, charset=ISO-8859-1>
link reel=styleshet href=.linkgranate, css type=text/css>
script language=javascript>
.-
Function m_reloadpage (init) { //reloads the window if nav4 resized.

If (init==true) with (Navigator) {if ((appname==Netscape)&&(parseint(appversion)==4)) {
Document. M_pgw=innerwidth, document. M_pgh=innerheight, onresize=m_reloadpage; }}
Else if (innerwidth.=document. M_pgw || innerheight.=document. M_pgh) location, reload(),
}
M_reloadpage (true),
// ->
Function m_findobj(n, d) { //v4.0
Var, y,x, if(.d) d=document, if((p=n, indexof(? ))>0&&parent, frames, length) {
D=parent, frames[n, substring(p+1)].document, n=n, substring(0, p),}
If(.(x=d[n])&&d, all) x=d, all[n], for (i=0.x&&i<d, forms, length;i++) x=d, forms[i][n];
For(i=0.x&&d, layers&&i<d, layers, length;i++) x=m_findobj(n, d, layers[i].document),
If(.x && document, getelementbyid) x=document, getelementbyid(n), return x;
}
Function m_showhidelayers() { //v3.0
Var i, (*.obj), args=m_showhidelayers, arguments;
For (i=0, i<(args, length-2), i+=3) if ((obj=m_findobj(args[i])).=null) { v=args[i+2];
If (obj, style) { obj=obj, style, v=(v==show)? Visible v=hide)? Hidden:v; }
Obj, visibility=v; }
}
//->
/script>
link reel=styleshet href=.linea type=text/css>
link reel=styleshet href=. Pr_01 type=text/css>
link reel=styleshet href=. Pr_02 type=text/css>
link reel=styleshet href=. Pr_03 type=text/css>
link reel=styleshet href=. Pr_01_02 type=text/css>
link reel=styleshet href=file:///e|/copia%20de%20copia%20de%2...tegui_site.css type=text/css>
link reel=styleshet href=. Alfcrouso type=text/css>
link reel=styleshet href=barras, css type=text/css>
link reel=styleshet href=. Pr_01_03 type=text/css>
link reel=styleshet href=. Pr type=text/css>
link reel=styleshet href=. Pr_03_01 type=text/css>
link reel=styleshet href=. Pr_02_02 type=text/css>
link reel=styleshet href=. Pr_01_04 type=text/css>
link reel=styleshet href=. Pr_01_04 type=text/css>
link reel=styleshet href=. Pr_01_05 type=text/css>
link reel=styleshet href=. Pr_01_05 type=text/css>
link reel=styleshet href=. Pr_03_03 type=text/css>
link reel=styleshet href=. Pr_02_03 type=text/css>
link reel=styleshet href=. Pr_01_b type=text/css>
link reel=styleshet href=. Pr_01_b type=text/css>
link reel=styleshet href=navegacion1.css type=text/css>
link reel=styleshet href=navegacion1.css type=text/css>
link reel=styleshet href=.pr_01_06 type=text/css>
style type=text/css>
.-
. Pr_01_07 { color: #d4d0c8, text-decoration: none, font-family: arial, helvética, sans-serif, font-size: 14px}
. Pr_01_07:hover { color: #509abe, text-decoration: none}
. Pr_01_08 { color: #509abe, text-decoration: none, font-family: arial, helvética, sans-serif, font-size: 14px}
. Pr_01_08:hover { color: d4d0c8, text-decoration: none}
.unnamed2 { color: #509abe}
.navegacion3 { font-family: arial, helvética, sans-serif, font-size: 10px, color: #509abe, text-decoration: none}
.navegacion3:hover { text-decoration: none, color: d4d0c8}
. Pr_01_09 { font-family: arial, helvética, sans-serif, font-size: 10px, color: #509abe, text-decoration: none}
. Pr_01_09:hover { color: #d4d0c8, text-decoration: none}
.fotografías { font-family: arial, helvética, sans-serif, font-size: 75px, font-style: normal, color: #509abe, text-decoration: none}
.fotografías:hover { color: #f, text-decoration: none}
, más { font-family: arial, helvética, sans-serif, font-size: 12px, font-style: normal, color: #f, text-decoration: none}
, más:hover { color: #666666, text-decoration: none}
. Ant { color: #666666, font-family: arial, helvética, sans-serif, font-size: 75px, text-decoration: none}
. Ant:hover { color: #f, text-decoration: none}
.volver { font-family: arial, helvética, sans-serif, font-size: 14px, color: #509abe, text-decoration: none}
.volver:hover { color: #c, text-decoration: none}
->
/style>
link href=memoria, css reel=styleshet type=text/css>
/head>
link href=barras, css type=text/cs reel=styleshet>
body class=center-Layout bgcolor=#666666 text=#cccccc>.

**MooDiE** · 04-12-2010, 19:22

Lo que te he pasado no es javascript es css. Dentro de las etiquetas head crea esto.

En la raíz del sitio crea un fichero que se llame style, css y ahí es donde vamos a colocar todo el css que cambiemos en el sitio.

La clase de css se aplica a una capa, no al body, y esa capa contendrá a todas la demás.

**Pit [reloaded]** · 04-12-2010, 19:36

Ok, me di cuenta y ya lo arreglé, aunque no como decías sino aplicándolo al body a ver si ahora: Style, css entiendo que tiene dentro:
Center-Layout {
Width:960px;
Margin:0 auto;
Overflow: hidden;
//border:1px solid red;
} queda la página así (hasta el body).

Html>
head>
/script>
title>e_pr_benetton</title>
meta http-equiv=content-type content=text/html, charset=ISO-8859-1>
link reel=styleshet href=.linkgranate, css type=text/css>
script language=javascript>
.-
Function m_reloadpage (init) { //reloads the window if nav4 resized.

If (init==true) with (Navigator) {if ((appname==Netscape)&&(parseint(appversion)==4)) {
Document. M_pgw=innerwidth, document. M_pgh=innerheight, onresize=m_reloadpage; }}
Else if (innerwidth.=document. M_pgw || innerheight.=document. M_pgh) location, reload(),
}
M_reloadpage (true),
// ->
Function m_findobj(n, d) { //v4.0
Var, y,x, if(.d) d=document, if((p=n, indexof(? ))>0&&parent, frames, length) {
D=parent, frames[n, substring(p+1)].document, n=n, substring(0, p),}
If(.(x=d[n])&&d, all) x=d, all[n], for (i=0.x&&i<d, forms, length;i++) x=d, forms[i][n];
For(i=0.x&&d, layers&&i<d, layers, length;i++) x=m_findobj(n, d, layers[i].document),
If(.x && document, getelementbyid) x=document, getelementbyid(n), return x;
}
Function m_showhidelayers() { //v3.0
Var i, (*.obj), args=m_showhidelayers, arguments;
For (i=0, i<(args, length-2), i+=3) if ((obj=m_findobj(args[i])).=null) { v=args[i+2];
If (obj, style) { obj=obj, style, v=(v==show)? Visible v=hide)? Hidden:v; }
Obj, visibility=v; }
}
//->
/script>
link reel=styleshet href=.linea type=text/css>
link reel=styleshet href=. Pr_01 type=text/css>
link reel=styleshet href=. Pr_02 type=text/css>
link reel=styleshet href=. Pr_03 type=text/css>
link reel=styleshet href=. Pr_01_02 type=text/css>
link reel=styleshet href=file:///e|/copia%20de%20copia%20de%2...tegui_site.css type=text/css>
link reel=styleshet href=. Alfcrouso type=text/css>
link reel=styleshet href=barras, css type=text/css>
link reel=styleshet href=. Pr_01_03 type=text/css>
link reel=styleshet href=. Pr type=text/css>
link reel=styleshet href=. Pr_03_01 type=text/css>
link reel=styleshet href=. Pr_02_02 type=text/css>
link reel=styleshet href=. Pr_01_04 type=text/css>
link reel=styleshet href=. Pr_01_04 type=text/css>
link reel=styleshet href=. Pr_01_05 type=text/css>
link reel=styleshet href=. Pr_01_05 type=text/css>
link reel=styleshet href=. Pr_03_03 type=text/css>
link reel=styleshet href=. Pr_02_03 type=text/css>
link reel=styleshet href=. Pr_01_b type=text/css>
link reel=styleshet href=. Pr_01_b type=text/css>
link reel=styleshet href=navegacion1.css type=text/css>
link reel=styleshet href=navegacion1.css type=text/css>
link reel=styleshet href=.pr_01_06 type=text/css>
link reel=styleshet href=style, css type=text/css />
link reel=styleshet href=style, css type=text/css />
style type=text/css>
.-
. Pr_01_07 { color: #d4d0c8, text-decoration: none, font-family: arial, helvética, sans-serif, font-size: 14px}
. Pr_01_07:hover { color: #509abe, text-decoration: none}
. Pr_01_08 { color: #509abe, text-decoration: none, font-family: arial, helvética, sans-serif, font-size: 14px}
. Pr_01_08:hover { color: d4d0c8, text-decoration: none}
.unnamed2 { color: #509abe}
.navegacion3 { font-family: arial, helvética, sans-serif, font-size: 10px, color: #509abe, text-decoration: none}
.navegacion3:hover { text-decoration: none, color: d4d0c8}
. Pr_01_09 { font-family: arial, helvética, sans-serif, font-size: 10px, color: #509abe, text-decoration: none}
. Pr_01_09:hover { color: #d4d0c8, text-decoration: none}
.fotografías { font-family: arial, helvética, sans-serif, font-size: 75px, font-style: normal, color: #509abe, text-decoration: none}
.fotografías:hover { color: #f, text-decoration: none}
, más { font-family: arial, helvética, sans-serif, font-size: 12px, font-style: normal, color: #f, text-decoration: none}
, más:hover { color: #666666, text-decoration: none}
. Ant { color: #666666, font-family: arial, helvética, sans-serif, font-size: 75px, text-decoration: none}
. Ant:hover { color: #f, text-decoration: none}
.volver { font-family: arial, helvética, sans-serif, font-size: 14px, color: #509abe, text-decoration: none}
.volver:hover { color: #c, text-decoration: none}
.center-Layout {
Width:869px;
Margin:0 auto;
Overflow: hidden;
//border:1px solid red;
}
/style>
link href=memoria, css reel=styleshet type=text/css>
/head>
link href=barras, css type=text/cs reel=styleshet>
body bgcolor=#666666 text=#cccccc>.

**MooDiE** · 04-12-2010, 19:48

Cosas a corregir.

<.doctype html>coloca este doctype, es el nuevo de html5, fallara en algunas cosas, pero ya que estamos vamos a adaptarla a lo que viene.

Html>.

Head>.
/script> esta finalización de etiqueta no procede, ya que no hay un script que la abra.
title>e_pr_benetton</title>.
meta http-equiv=content-type content=text/html, charset=ISO-8859-1>.
link reel=styleshet href=.linkgranate, css type=text/css>.
script language=javascript>.
.- no es necesario que esté comentado, pero tampoco es malo.

Function m_reloadpage (init) { //reloads the window if nav4 resized.

If (init==true) with (Navigator) {if ((appname==Netscape)&&(parseint(appversion)==4)) {.

Document. M_pgw=innerwidth, document. M_pgh=innerheight, onresize=m_reloadpage; }}.

Else if (innerwidth.=document. M_pgw || innerheight.=document. M_pgh) location, reload().
}.

M_reloadpage (true).
// ->no es necesario que esté comentado, pero tampoco es malo.

Function m_findobj(n, d) { //v4.0.

Var, y,x, if(.d) d=document, if((p=n, indexof(? ))>0&&parent, frames, length) {.

D=parent, frames[n, substring(p+1)].document, n=n, substring(0, p),}.

If(.(x=d[n])&&d, all) x=d, all[n], for (i=0.x&&i<d, forms, length;i++) x=d, forms[i][n].

For(i=0.x&&d, layers&&i<d, layers, length;i++) x=m_findobj(n, d, layers[i].document).

If(.x && document, getelementbyid) x=document, getelementbyid(n), return x.
}.

Function m_showhidelayers() { //v3.0.

Var i, (*.obj), args=m_showhidelayers, arguments.

For (i=0, i<(args, length-2), i+=3) if ((obj=m_findobj(args[i])).=null) { v=args[i+2].

If (obj, style) { obj=obj, style, v=(v==show)? Visiblev=hide)? Hidden:v; }.

Obj, visibility=v; }.
}.
//->has cerrado el comentario antes, uno de los dos debe morir.
/script>.
link reel=styleshet href=.linea type=text/css>.
link reel=styleshet href=. Pr_01 type=text/css>.
link reel=styleshet href=. Pr_02 type=text/css>.
link reel=styleshet href=. Pr_03 type=text/css>.
link reel=styleshet href=. Pr_01_02 type=text/css>.
link reel=styleshet href=file:///e|/copia%20de%20copia%20de%2. Tegui_site.css type=text/css>.
link reel=styleshet href=. Alfcrouso type=text/css>.
link reel=styleshet href=barras, css type=text/css>.
link reel=styleshet href=. Pr_01_03 type=text/css>.
link reel=styleshet href=. Pr type=text/css>.
link reel=styleshet href=. Pr_03_01 type=text/css>.
link reel=styleshet href=. Pr_02_02 type=text/css>.
link reel=styleshet href=. Pr_01_04 type=text/css>.
link reel=styleshet href=. Pr_01_04 type=text/css>.
link reel=styleshet href=. Pr_01_05 type=text/css>.
link reel=styleshet href=. Pr_01_05 type=text/css>.
link reel=styleshet href=. Pr_03_03 type=text/css>.
link reel=styleshet href=. Pr_02_03 type=text/css>.
link reel=styleshet href=. Pr_01_b type=text/css>.
link reel=styleshet href=. Pr_01_b type=text/css>.
link reel=styleshet href=navegacion1.css type=text/css>.
link reel=styleshet href=navegacion1.css type=text/css>.
link reel=styleshet href=.pr_01_06 type=text/css>.
link reel=styleshet href=style, css type=text/css /> ojo, esta línea y la de abajo son iguales, ¿tenias algún fichero style, css creado antes? .
link reel=styleshet href=style, css type=text/css />.
style type=text/css>.

Pr_01_07 { color: #d4d0c8, text-decoration: none, font-family: arial, helvética, sans-serif, font-size: 14px}.

Pr_01_07:hover { color: #509abe, text-decoration: none}.

Pr_01_08 { color: #509abe, text-decoration: none, font-family: arial, helvética, sans-serif, font-size: 14px}.

Pr_01_08:hover { color: d4d0c8, text-decoration: none}.

Unnamed2 { color: #509abe}.

Navegacion3 { font-family: arial, helvética, sans-serif, font-size: 10px, color: #509abe, text-decoration: none}.

Navegacion3:hover { text-decoration: none, color: d4d0c8}.

Pr_01_09 { font-family: arial, helvética, sans-serif, font-size: 10px, color: #509abe, text-decoration: none}.

Pr_01_09:hover { color: #d4d0c8, text-decoration: none}.

Fotografías { font-family: arial, helvética, sans-serif, font-size: 75px, font-style: normal, color: #509abe, text-decoration: none}.

Fotografías:hover { color: #f, text-decoration: none}.

Más { font-family: arial, helvética, sans-serif, font-size: 12px, font-style: normal, color: #f, text-decoration: none}.

Más:hover { color: #666666, text-decoration: none}.

Ant { color: #666666, font-family: arial, helvética, sans-serif, font-size: 75px, text-decoration: none}.

Ant:hover { color: #f, text-decoration: none}.

Volver { font-family: arial, helvética, sans-serif, font-size: 14px, color: #509abe, text-decoration: none}.

Volver:hover { color: #c, text-decoration: none}.

Center-Layout {este código puede ir aquí o en el style, css, mejor que lo que vayamos haciendo vaya al fichero de estilos, así no nos liamos.
Width:869px.

Margin:0 auto.

Overflow: hidden.
//border:1px solid red.
}.
/style>.
link href=memoria, css reel=styleshet type=text/css>.
/head>.
link href=barras, css type=text/cs reel=styleshet>.
body bgcolor=#666666 text=#cccccc>el leguaje css se encarga del diseño de la web, poner css incrustado en html se debe evitar en la medida de lo posible, quita las dos instrucciones y pon lo que te escribo abajo en style, css.

Regla para el color del body:
Body {.

Background: #666; //es hexadecimal simplificado y significa lo mismo que #666666.

Color: #cccccc; //color para el texto del sitio.
}.

**Pit [reloaded]** · 04-12-2010, 20:15

Ok menos esto: Obj, visibility=v; }
}
//->has cerrado el comentario antes, uno de los dos debe morir.
/script>.

Que no lo entiendo muy bien, si borro uno de los dos } me avisa de un error en el código.

**Pit [reloaded]** · 04-12-2010, 20:16

Queda así:
.doctype html>
html>
head>
title>e_pr_benetton</title>
meta http-equiv=content-type content=text/html, charset=ISO-8859-1>
link reel=styleshet href=.linkgranate, css type=text/css>
script language=javascript>
.-
Function m_reloadpage (init) { //reloads the window if nav4 resized.

If (init==true) with (Navigator) {if ((appname==Netscape)&&(parseint(appversion)==4)) {
Document. M_pgw=innerwidth, document. M_pgh=innerheight, onresize=m_reloadpage; }}
Else if (innerwidth.=document. M_pgw || innerheight.=document. M_pgh) location, reload(),
}
M_reloadpage (true),
// ->
Function m_findobj(n, d) { //v4.0
Var, y,x, if(.d) d=document, if((p=n, indexof(? ))>0&&parent, frames, length) {
D=parent, frames[n, substring(p+1)].document, n=n, substring(0, p),}
If(.(x=d[n])&&d, all) x=d, all[n], for (i=0.x&&i<d, forms, length;i++) x=d, forms[i][n];
For(i=0.x&&d, layers&&i<d, layers, length;i++) x=m_findobj(n, d, layers[i].document),
If(.x && document, getelementbyid) x=document, getelementbyid(n), return x;
}
Function m_showhidelayers() { //v3.0
Var i, (*.obj), args=m_showhidelayers, arguments;
For (i=0, i<(args, length-2), i+=3) if ((obj=m_findobj(args[i])).=null) { v=args[i+2];
If (obj, style) { obj=obj, style, v=(v==show)? Visible v=hide)? Hidden:v; }
Obj, visibility=v; }
}
//->
/script>
link reel=styleshet href=.linea type=text/css>
link reel=styleshet href=. Pr_01 type=text/css>
link reel=styleshet href=. Pr_02 type=text/css>
link reel=styleshet href=. Pr_03 type=text/css>
link reel=styleshet href=. Pr_01_02 type=text/css>
link reel=styleshet href=file:///e|/copia%20de%20copia%20de%2...tegui_site.css type=text/css>
link reel=styleshet href=. Alfcrouso type=text/css>
link reel=styleshet href=barras, css type=text/css>
link reel=styleshet href=. Pr_01_03 type=text/css>
link reel=styleshet href=. Pr type=text/css>
link reel=styleshet href=. Pr_03_01 type=text/css>
link reel=styleshet href=. Pr_02_02 type=text/css>
link reel=styleshet href=. Pr_01_04 type=text/css>
link reel=styleshet href=. Pr_01_04 type=text/css>
link reel=styleshet href=. Pr_01_05 type=text/css>
link reel=styleshet href=. Pr_01_05 type=text/css>
link reel=styleshet href=. Pr_03_03 type=text/css>
link reel=styleshet href=. Pr_02_03 type=text/css>
link reel=styleshet href=. Pr_01_b type=text/css>
link reel=styleshet href=. Pr_01_b type=text/css>
link reel=styleshet href=navegacion1.css type=text/css>
link reel=styleshet href=navegacion1.css type=text/css>
link reel=styleshet href=.pr_01_06 type=text/css>
link reel=styleshet href=style, css type=text/css />
style type=text/css>
.-
. Pr_01_07 { color: #d4d0c8, text-decoration: none, font-family: arial, helvética, sans-serif, font-size: 14px}
. Pr_01_07:hover { color: #509abe, text-decoration: none}
. Pr_01_08 { color: #509abe, text-decoration: none, font-family: arial, helvética, sans-serif, font-size: 14px}
. Pr_01_08:hover { color: d4d0c8, text-decoration: none}
.unnamed2 { color: #509abe}
.navegacion3 { font-family: arial, helvética, sans-serif, font-size: 10px, color: #509abe, text-decoration: none}
.navegacion3:hover { text-decoration: none, color: d4d0c8}
. Pr_01_09 { font-family: arial, helvética, sans-serif, font-size: 10px, color: #509abe, text-decoration: none}
. Pr_01_09:hover { color: #d4d0c8, text-decoration: none}
.fotografías { font-family: arial, helvética, sans-serif, font-size: 75px, font-style: normal, color: #509abe, text-decoration: none}
.fotografías:hover { color: #f, text-decoration: none}
, más { font-family: arial, helvética, sans-serif, font-size: 12px, font-style: normal, color: #f, text-decoration: none}
, más:hover { color: #666666, text-decoration: none}
. Ant { color: #666666, font-family: arial, helvética, sans-serif, font-size: 75px, text-decoration: none}
. Ant:hover { color: #f, text-decoration: none}
.volver { font-family: arial, helvética, sans-serif, font-size: 14px, color: #509abe, text-decoration: none}
.volver:hover { color: #c, text-decoration: none}
/style>
/head>
link href=barras, css type=text/cs reel=styleshet>
body>.

**MooDiE** · 04-12-2010, 20:17

<html>.

Head>.
/script>.
title>e_pr_benetton</title>.
meta http-equiv=content-type content=text/html, charset=ISO-8859-1>.
link reel=styleshet href=.linkgranate, css type=text/css>.
script language=javascript>.

Function m_reloadpage (init) { //reloads the window if nav4 resized.

If (init==true) with (Navigator) {if ((appname==Netscape)&&(parseint(appversion)==4)) {.

Document. M_pgw=innerwidth, document. M_pgh=innerheight, onresize=m_reloadpage; }}.

Else if (innerwidth.=document. M_pgw || innerheight.=document. M_pgh) location, reload().
}.

M_reloadpage (true).
// ->elimina solo esta linea.

Function m_findobj(n, d) { //v4.0.

Var, y,x, if(.d) d=document, if((p=n, indexof(? ))>0&&parent, frames, length) {.

D=parent, frames[n, substring(p+1)].document, n=n, substring(0, p),}.

If(.(x=d[n])&&d, all) x=d, all[n], for (i=0.x&&i<d, forms, length;i++) x=d, forms[i][n].

For(i=0.x&&d, layers&&i<d, layers, length;i++) x=m_findobj(n, d, layers[i].document).

If(.x && document, getelementbyid) x=document, getelementbyid(n), return x.
}.

Function m_showhidelayers() { //v3.0.

Var i, (*.obj), args=m_showhidelayers, arguments.

For (i=0, i<(args, length-2), i+=3) if ((obj=m_findobj(args[i])).=null) { v=args[i+2].

If (obj, style) { obj=obj, style, v=(v==show)? Visiblev=hide)? Hidden:v; }.

Obj, visibility=v; }.
}.
//->.
/script>.
link reel=styleshet href=.linea type=text/css>.
link reel=styleshet href=. Pr_01 type=text/css>.
link reel=styleshet href=. Pr_02 type=text/css>.
link reel=styleshet href=. Pr_03 type=text/css>.
link reel=styleshet href=. Pr_01_02 type=text/css>.
link reel=styleshet href=file:///e|/copia%20de%20copia%20de%2. Tegui_site.css type=text/css>.
link reel=styleshet href=. Alfcrouso type=text/css>.
link reel=styleshet href=barras, css type=text/css>.
link reel=styleshet href=. Pr_01_03 type=text/css>.
link reel=styleshet href=. Pr type=text/css>.
link reel=styleshet href=. Pr_03_01 type=text/css>.
link reel=styleshet href=. Pr_02_02 type=text/css>.
link reel=styleshet href=. Pr_01_04 type=text/css>.
link reel=styleshet href=. Pr_01_04 type=text/css>.
link reel=styleshet href=. Pr_01_05 type=text/css>.
link reel=styleshet href=. Pr_01_05 type=text/css>.
link reel=styleshet href=. Pr_03_03 type=text/css>.
link reel=styleshet href=. Pr_02_03 type=text/css>.
link reel=styleshet href=. Pr_01_b type=text/css>.
link reel=styleshet href=. Pr_01_b type=text/css>.
link reel=styleshet href=navegacion1.css type=text/css>.
link reel=styleshet href=navegacion1.css type=text/css>.
link reel=styleshet href=.pr_01_06 type=text/css>.
link reel=styleshet href=style, css type=text/css />.
link reel=styleshet href=style, css type=text/css />.
style type=text/css>.

Pr_01_07 { color: #d4d0c8, text-decoration: none, font-family: arial, helvética, sans-serif, font-size: 14px}.

Pr_01_07:hover { color: #509abe, text-decoration: none}.

Pr_01_08 { color: #509abe, text-decoration: none, font-family: arial, helvética, sans-serif, font-size: 14px}.

Pr_01_08:hover { color: d4d0c8, text-decoration: none}.

Unnamed2 { color: #509abe}.

Navegacion3 { font-family: arial, helvética, sans-serif, font-size: 10px, color: #509abe, text-decoration: none}.

Navegacion3:hover { text-decoration: none, color: d4d0c8}.

Pr_01_09 { font-family: arial, helvética, sans-serif, font-size: 10px, color: #509abe, text-decoration: none}.

Pr_01_09:hover { color: #d4d0c8, text-decoration: none}.

Fotografías { font-family: arial, helvética, sans-serif, font-size: 75px, font-style: normal, color: #509abe, text-decoration: none}.

Fotografías:hover { color: #f, text-decoration: none}.

Más { font-family: arial, helvética, sans-serif, font-size: 12px, font-style: normal, color: #f, text-decoration: none}.

Más:hover { color: #666666, text-decoration: none}.

Ant { color: #666666, font-family: arial, helvética, sans-serif, font-size: 75px, text-decoration: none}.

Ant:hover { color: #f, text-decoration: none}.

Volver { font-family: arial, helvética, sans-serif, font-size: 14px, color: #509abe, text-decoration: none}.

Volver:hover { color: #c, text-decoration: none}.

Center-Layout {.
Width:869px.

Margin:0 auto.

Overflow: hidden.
//border:1px solid red.
}.
/style>.
link href=memoria, css reel=styleshet type=text/css>.
/head>.
link href=barras, css type=text/cs reel=styleshet>.
body bgcolor=#666666 text=#cccccc>.

**Pit [reloaded]** · 04-12-2010, 20:38

Tengo que quitar el doctype que me apuntaste para que no se me descojone la página. Ya quito la class incrustada en el body y usamos el.
link reel=styleshet href=style, css type=text/css /> queda así:
html>
head>
/script>
title>e_pr_benetton</title>
meta http-equiv=content-type content=text/html, charset=ISO-8859-1>
link reel=styleshet href=.linkgranate, css type=text/css>
script language=javascript>
.-
Function m_reloadpage (init) { //reloads the window if nav4 resized.

If (init==true) with (Navigator) {if ((appname==Netscape)&&(parseint(appversion)==4)) {
Document. M_pgw=innerwidth, document. M_pgh=innerheight, onresize=m_reloadpage; }}
Else if (innerwidth.=document. M_pgw || innerheight.=document. M_pgh) location, reload(),
}
M_reloadpage (true),
Function m_findobj(n, d) { //v4.0
Var, y,x, if(.d) d=document, if((p=n, indexof(? ))>0&&parent, frames, length) {
D=parent, frames[n, substring(p+1)].document, n=n, substring(0, p),}
If(.(x=d[n])&&d, all) x=d, all[n], for (i=0.x&&i<d, forms, length;i++) x=d, forms[i][n];
For(i=0.x&&d, layers&&i<d, layers, length;i++) x=m_findobj(n, d, layers[i].document),
If(.x && document, getelementbyid) x=document, getelementbyid(n), return x;
}
Function m_showhidelayers() { //v3.0
Var i, (*.obj), args=m_showhidelayers, arguments;
For (i=0, i<(args, length-2), i+=3) if ((obj=m_findobj(args[i])).=null) { v=args[i+2];
If (obj, style) { obj=obj, style, v=(v==show)? Visiblev=hide)? Hidden:v; }
Obj, visibility=v; }
}
//->
/script>
link reel=styleshet href=.linea type=text/css>
link reel=styleshet href=. Pr_01 type=text/css>
link reel=styleshet href=. Pr_02 type=text/css>
link reel=styleshet href=. Pr_03 type=text/css>
link reel=styleshet href=. Pr_01_02 type=text/css>
link reel=styleshet href=file:///e|/copia%20de%20copia%20de%2. Tegui_site.css type=text/css>
link reel=styleshet href=. Alfcrouso type=text/css>
link reel=styleshet href=barras, css type=text/css>
link reel=styleshet href=. Pr_01_03 type=text/css>
link reel=styleshet href=. Pr type=text/css>
link reel=styleshet href=. Pr_03_01 type=text/css>
link reel=styleshet href=. Pr_02_02 type=text/css>
link reel=styleshet href=. Pr_01_04 type=text/css>
link reel=styleshet href=. Pr_01_04 type=text/css>
link reel=styleshet href=. Pr_01_05 type=text/css>
link reel=styleshet href=. Pr_01_05 type=text/css>
link reel=styleshet href=. Pr_03_03 type=text/css>
link reel=styleshet href=. Pr_02_03 type=text/css>
link reel=styleshet href=. Pr_01_b type=text/css>
link reel=styleshet href=. Pr_01_b type=text/css>
link reel=styleshet href=navegacion1.css type=text/css>
link reel=styleshet href=navegacion1.css type=text/css>
link reel=styleshet href=.pr_01_06 type=text/css>
link reel=styleshet href=style, css type=text/css />
style type=text/css>
.-
. Pr_01_07 { color: #d4d0c8, text-decoration: none, font-family: arial, helvética, sans-serif, font-size: 14px}
. Pr_01_07:hover { color: #509abe, text-decoration: none}
. Pr_01_08 { color: #509abe, text-decoration: none, font-family: arial, helvética, sans-serif, font-size: 14px}
. Pr_01_08:hover { color: d4d0c8, text-decoration: none}
.unnamed2 { color: #509abe}
.navegacion3 { font-family: arial, helvética, sans-serif, font-size: 10px, color: #509abe, text-decoration: none}
.navegacion3:hover { text-decoration: none, color: d4d0c8}
. Pr_01_09 { font-family: arial, helvética, sans-serif, font-size: 10px, color: #509abe, text-decoration: none}
. Pr_01_09:hover { color: #d4d0c8, text-decoration: none}
.fotografías { font-family: arial, helvética, sans-serif, font-size: 75px, font-style: normal, color: #509abe, text-decoration: none}
.fotografías:hover { color: #f, text-decoration: none}
, más { font-family: arial, helvética, sans-serif, font-size: 12px, font-style: normal, color: #f, text-decoration: none}
, más:hover { color: #666666, text-decoration: none}
. Ant { color: #666666, font-family: arial, helvética, sans-serif, font-size: 75px, text-decoration: none}
. Ant:hover { color: #f, text-decoration: none}
.volver { font-family: arial, helvética, sans-serif, font-size: 14px, color: #509abe, text-decoration: none}
.volver:hover { color: #c, text-decoration: none}
/style>
link href=memoria, css reel=styleshet type=text/css>
/head>
link href=barras, css type=text/cs reel=styleshet>
body>.

**Kashir** · 04-12-2010, 21:20

sí que avanzas, Pit. Os dejo lo que os comenté el otro día sobre CS y js para la compatibilidad con iExplorer y demás:
En el index.php:

Código:

.doctype html>.
link reel=styleshet href=css/reset, css />.
link reel=styleshet href=css/style, css />.
.-[if ie]> t<script src=js/html5.js type=text/javascript></script>.
.[endif]->.

archivo reset, css: http://pastebin.com/9xfsjsig.

Archivo html5.js: http://pastebin.com/ffxn8xla.
sin más.

Posdata: gracias por el pm Modie, ya se me olvidó que te lo había enviado.

**Pit [reloaded]** · 04-12-2010, 21:22

Así la dejo: copio el script para maximizar la ventana.

Html>
head>
script language=javascript1.2>
.-
Window.moveto (0,0),
If (document, all) {
Top.window.resizeto (screen, availwidth, screen, availheight),
}
Else if (document, layers||document, getelementbyid) {
If (top.window.outerheight<screen, availheight||top.window.outerwidth<screen, availwidth){
Top.window.outerheight = screen, availheight;
Top.window.outerwidth = screen, availwidth;
}
}
//->
/script>
title>e_pr_benetton</title>
meta http-equiv=content-type content=text/html, charset=ISO-8859-1>
link reel=styleshet href=.linkgranate, css type=text/css>
script language=javascript>.
.-
Function m_reloadpage (init) { //reloads the window if nav4 resized.

If (init==true) with (Navigator) {if ((appname==Netscape)&&(parseint(appversion)==4)) {
Document. M_pgw=innerwidth, document. M_pgh=innerheight, onresize=m_reloadpage; }}
Else if (innerwidth.=document. M_pgw || innerheight.=document. M_pgh) location, reload(),
}
M_reloadpage (true),
// ->
Function m_findobj(n, d) { //v4.0
Var, y,x, if(.d) d=document, if((p=n, indexof(? ))>0&&parent, frames, length) {
D=parent, frames[n, substring(p+1)].document, n=n, substring(0, p),}
If(.(x=d[n])&&d, all) x=d, all[n], for (i=0.x&&i<d, forms, length;i++) x=d, forms[i][n];
For(i=0.x&&d, layers&&i<d, layers, length;i++) x=m_findobj(n, d, layers[i].document),
If(.x && document, getelementbyid) x=document, getelementbyid(n), return x;
}
Function m_showhidelayers() { //v3.0
Var i, (*.obj), args=m_showhidelayers, arguments;
For (i=0, i<(args, length-2), i+=3) if ((obj=m_findobj(args[i])).=null) { v=args[i+2];
If (obj, style) { obj=obj, style, v=(v==show)? Visible v=hide)? Hidden:v; }
Obj, visibility=v; }
}
//->
/script>
link reel=styleshet href=.linea type=text/css>
link reel=styleshet href=. Pr_01 type=text/css>
link reel=styleshet href=. Pr_02 type=text/css>
link reel=styleshet href=. Pr_03 type=text/css>
link reel=styleshet href=. Pr_01_02 type=text/css>
link reel=styleshet href=file:///e|/copia%20de%20copia%20de%2...tegui_site.css type=text/css>
link reel=styleshet href=. Alfcrouso type=text/css>
link reel=styleshet href=barras, css type=text/css>
link reel=styleshet href=. Pr_01_03 type=text/css>
link reel=styleshet href=. Pr type=text/css>
link reel=styleshet href=. Pr_03_01 type=text/css>
link reel=styleshet href=. Pr_02_02 type=text/css>
link reel=styleshet href=. Pr_01_04 type=text/css>
link reel=styleshet href=. Pr_01_04 type=text/css>
link reel=styleshet href=. Pr_01_05 type=text/css>
link reel=styleshet href=. Pr_01_05 type=text/css>
link reel=styleshet href=. Pr_03_03 type=text/css>
link reel=styleshet href=. Pr_02_03 type=text/css>
link reel=styleshet href=. Pr_01_b type=text/css>
link reel=styleshet href=. Pr_01_b type=text/css>
link reel=styleshet href=navegacion1.css type=text/css>
link reel=styleshet href=navegacion1.css type=text/css>
link reel=styleshet href=.pr_01_06 type=text/css>
link reel=styleshet href=style, css type=text/css />
style type=text/css>
.-
. Pr_01_07 { color: #d4d0c8, text-decoration: none, font-family: arial, helvética, sans-serif, font-size: 14px}
. Pr_01_07:hover { color: #509abe, text-decoration: none}
. Pr_01_08 { color: #509abe, text-decoration: none, font-family: arial, helvética, sans-serif, font-size: 14px}
. Pr_01_08:hover { color: d4d0c8, text-decoration: none}
.unnamed2 { color: #509abe}
.navegacion3 { font-family: arial, helvética, sans-serif, font-size: 10px, color: #509abe, text-decoration: none}
.navegacion3:hover { text-decoration: none, color: d4d0c8}
. Pr_01_09 { font-family: arial, helvética, sans-serif, font-size: 10px, color: #509abe, text-decoration: none}
. Pr_01_09:hover { color: #d4d0c8, text-decoration: none}
.fotografías { font-family: arial, helvética, sans-serif, font-size: 75px, font-style: normal, color: #509abe, text-decoration: none}
.fotografías:hover { color: #f, text-decoration: none}
, más { font-family: arial, helvética, sans-serif, font-size: 12px, font-style: normal, color: #f, text-decoration: none}
, más:hover { color: #666666, text-decoration: none}
. Ant { color: #666666, font-family: arial, helvética, sans-serif, font-size: 75px, text-decoration: none}
. Ant:hover { color: #f, text-decoration: none}
.volver { font-family: arial, helvética, sans-serif, font-size: 14px, color: #509abe, text-decoration: none}
.volver:hover { color: #c, text-decoration: none}
->
/style>
link href=memoria, css reel=styleshet type=text/css>
/head>
link href=barras, css type=text/cs reel=styleshet>
body>.

**Pit [reloaded]** · 04-12-2010, 21:25

Gracias kashir miraré eso que has subido pronto a ver si lo entiendo por cierto, veo que pones el <.doctype html> que es el que sugería Modie si yo lo pongo en el código que he subido se me descojona la página.

**MooDiE** · 05-12-2010, 02:43

Yo te recomendaría colocar el dtd aunque se descojone la web, y poco a poco vamos modificando lo que falle hasta que la web funcione correctamente.

Si puedes copiarme a partir de ahora también lo que continua después del body, quiero ver que hacen exactamente ese código javascript en la web y si se puede sustituir por algo más liviano y actual.

Lo que ha subido kashir, en primer lugar el reset, css es para poner todos lo valores por defecto a 0 (o algún valor predeterminado que se quiera) esto es porque cada navegador tiene algunas variaciones en su código por defecto, con este fichero se declaran todos los elementos a un valor inicial para que así no haya problemas y todos tengan los mismos valores iniciales para la web en cuestión.

Recursos sobre css:
-960 grid system http://960.gs/.

Blueprint css http://www.blueprintcss.org/.

En estas web encontraras recursos para el maquetado y desarrollo de mockups con Adobe Photoshop, Illustrator y otros programas de diseño. También hay códigos completos de css para comenzar con un sitio web, está el reset, css, otros sobre tipografías, en fin, ojealos y usa los que más te convengan en función de la web.

El segundo es un fichero de javascript que te permite hacer una especie de soporte para html5 en navegadores antiguos, realmente esto no es así, lo que crea es los nuevos elementos de html5 (section, article, aside,) y para los navegadores antiguos pues se comportarían como una div más (algunos elementos de html5 no son más que div con el nombre cambiado para hacerlos más identificativos). Pero este tipo de scripts solo sirven para que la web no se descojone totalmente en navegadores antiguos, pero seguirán teniendo carencias de funcionalidad con html5 que hay que solventar con otros scripts o que simplemente no se podrían soportar.

Ambos son útiles, yo solo coloco el reset, css en mis webs ya que no suelo usar los nuevos elementos de html5 como tales sino que creo capas comunes y a esas capas les asigno una clase o una id con el nombre de ese elemento de html5, ya es cuestión de gustos.

**Pit [reloaded]** · 05-12-2010, 08:13

Yo te recomendaría colocar el dtd aunque se descojone la web, y poco a poco vamos modificando lo que falle hasta que la web funcione correctamente.

Ok yo hoy estoy intentando acabar el trabajo que entrego el martes, para poder centrarme en todo esto.

**Pit [reloaded]** · 14-12-2010, 13:02

Hola tíos la verdad es que estoy avanzando mucho, estudiando de madrugada, y prefiero no hacer muchas preguntas puntuales, pero desde hace varias noches me asaltaba una duda si escribo algo así:
a href=mailto:contactar@foreromaldito, com><img src=assets/contacto_foreroignorante.jpg alt=enviar email title=enviar mail width=250 high=22 pulgadas align=left border=0 /></a> con la intención de que al hacer click se abra el outlook y mandar un mail, poniendo un contacto_foreroignorante.jpg en el que estuviesem escrita la dirección (contactar@foreromaldito.com), la intención sería evitar el correo basura, pero al estar la dirección en el código, no solucionamos nada.
¿Hay alguna forma de hacerlo despistando a los robots para evitar el correo basura?

**Pit [reloaded]** · 14-12-2010, 13:13

En este foro hay una discusión con una solución aparentemente sencilla e ingeniosa. (http://www.forosdelweb.com/f85/como-...r-spam-685999/).

Proponen escribir el correo al revés y con css decirle que lo ponga al derecho.

Código CS.

Span, test { direction: rtl; unicode-bidi:bidi-override; }.

Código html.

P><span class=test>moc, tset@tset</span></p>.

Pero advierte de la coletilla: pasa CS 2.1 y xhtml 1.0 transitional que no sé a qué se refiere.
¿Esto podría funcionar y engañar a los robots?

**Pit [reloaded]** · 14-12-2010, 13:31

¿Podría valer algo así?
.doctype html public -//w3c//dtd xhtml 1.0 transitional//en http://www.w3.org/tr/xhtml1/dtd/xhtm...siciónal, dtd>
html xmlns=http://www.w3.org/1999/xhtml>
head>
meta http-equiv=content-type content=text/html, charset=utf-8 />
title>documento sin título</title>
style type=text/css>
.forerotarado { direction: rtl; unicode-bidi:bidi-override; }
/style>
/head>
body>
p><a href=mailto:contactar@forerotarado, com><span class=forerotarado>moc, odaratorerof@ratcatnoc</span></a></p>
/body>
/html> pero entonces, los robots leerían el <a href=mailto:contactar@forerotarado, com>? Y el problema seguiría?

**MooDiE** · 14-12-2010, 19:47

Eso es mejor con un formulario de contacto en php. Con eso consigues que el usuario final no llegue a ver jamás el correo electrónico. ¿cómo es esto? Pues no sé si te ha dado tiempo a leer cómo funcionan los lenguajes web, pero fundamentalmente existen desesperados:
Html.

Este es el lenguaje de etiquetas que usas, este lenguaje lo procesa el navegador por lo que el código se ve tal cual. Por eso podemos darle a botón derecho -> ver código fuente.

Cs.

Este lenguaje le dice al navegador como tiene que aplicarle estilos al html, el código viaja hasta el cliente, así que, esté también es capaz de verlo.

Javascript.

Este es igual que los anteriores los procesa el navegador web, incluso en las opciones de los navegadores puedes desactivarlo, por eso es sumamente importante que el funcionamiento de la web no dependa de javascript, sino que este sea una mera ayuda. Hay excepciones, claro, pero hay que evitarlo en la medida de lo posible. Nuevamente el código puede ser visto por el usuario final.

Php.

Para mí, estos lenguajes no son más que unos constructores de código (html en este caso) existen algunos otros como Ruby, Python, etc. Este lenguaje se ejecuta en el servidor web y genera un html en función de x condiciones, y es este html el que se envía al cliente. Por lo que todo aquel que no tenga acceso al servidor no podrá ver tu código fuente. Con lo que si generas un formulario que le envíe los datos que quieras a un fichero php en el servidor, este procesara la información y generara un correo electrónico que es el que se enviara al destino final. Quedando así la dirección de correo electrónico oculta para los usuario.

Luego es como todo tienes medidas del tipo captcha para evitar que una máquina haga spam desde este formulario. Todos sabemos lo que son los captchas, esas letras y números deformes, que no es más que un control de seguridad para evitar spams automatizados.

Tengo por ahí un código de muestra con un formulario web. En cuanto de con el te lo paso. No obstante si buscas por la red encontraras miles de tutoriales al respecto. Un saludo.

**Pit [reloaded]** · 14-12-2010, 23:26

Gracias Modie de momento aún no he llegado al php estoy con el xhtml y el css, voy cogiendo soltura, llegaré al php.

**MooDiE** · 14-12-2010, 23:34

Cuando quieras me avisas y te enseño como va el tema del php y formularios. Con tu formación y experiencia en infografía unido con la programación web vas a acabar haciendo unas webs de cuidado.

**Kashir** · 15-12-2010, 07:07

para mí el factor más importante para hacer webs sugerentes es el Adobe Photoshop. La gente que no tiene mucha idea de web, pero tira bien de Photoshop deja unas webs bastante guapas.

Por cierto, yo suelo usar el formulario en php para contacto pero nunca he creado uno de 0, así que, cuando se lo enseñes a Pit me pasaré también con lápiz y cuaderno.
sin más.

**Pit [reloaded]** · 15-12-2010, 09:14

Yo ya tengo preparado el lápiz y el cuaderno también.

**MooDiE** · 15-12-2010, 23:35

Vale haré algo simple empezando desde cero así lo tendréis los dos, además me gustaría explicarlo todo paso a paso. Me llevara algún tiempo que ahora me pilláis liado.

Intentaré dividir el tutorial del formulario en 4 partes: html, CS, php, javascript.

En cuanto lo tenga os aviso, un saludo.

**Pit [reloaded]** · 17-12-2010, 13:33

Te he dejado un mensaje en tu blog,. No sabía que lo tuyo eran las partículas. :9.

**Kashir** · 17-12-2010, 14:06

te he dejado un mensaje en tu blog,. No sabía que lo tuyo eran las partículas. :9.

Las partículas, así como los fluidos y simulaciones, el VFX en sí, es lo que me llama la atención y espero que sea lo mío algún día (a nivel profesional digo).

Te respondo por el pm, gracias por el comentario.
sin más.

**Pit [reloaded]** · 17-12-2010, 18:26

Me llevara algún tiempo que ahora me pilláis liado.

Tranquilo Modie, nosotros esperamos. Yo mientras me entretengo probando etiquetas xhtml:
.doctype html public -//w3c//dtd html 4.01 transitional//en http://www.w3.org/tr/html4/lose, dtd>
html>
head>
meta http-equiv=content-type content=text/html, charset=utf-8>
title>probando etiquetas xhtml hasta reventar</title>
/head>
body>
p>con estos síntomas, podría tratarse de un caso de <dfn title=obsesión por los foros de 3d>foreritis aguda 3desera</dfn>. Lo que nos lleva a la etiqueta cita:</p>
p>como dijo <cite>Pit Matson</cite>:
blockquote>dale caña al xhtml hasta que revientes.</blockquote>
/body>
/html>.

**MooDiE** · 17-12-2010, 18:40

Vaya estás haciendo tus progresos, espero que algún día veamos un mensaje aquí para enfrentarnos a un pequeño reto de desarrollo web, lo mismo te digo.

**Pit [reloaded]** · 17-12-2010, 18:51

Yo también lo espero de momento le voy dando caña mientras te esperamos con lo del mailto en php.

**Pit [reloaded]** · 18-12-2010, 22:25

Vaya estás haciendo tus progresos, espero que algún día veamos un mensaje aquí para enfrentarnos a un pequeño reto de desarrollo web, lo mismo te digo.

Dame un mes más de estudio y os acepto el reto ahora mientras espero lo del mailto vía php de momento una cuestión, en una línea de código como ésta:
p><a href=index.html><span class=linknaranja>home</span></a> <a href=01.html><span class=linkgranate>pagina_01</span></a> <a href=02.html><span class=linknazul>pagina_02</span></a></p> el mero hecho de poner la etiqueta <span class> antes de la <a href> hace que no funcione el css como debiera por ejemplo, si cambio el orden en pagina_01.

P><a href=index.html><span class=linknaranja>home</span></a> <span class=linkgranate><a href=01.html>pagina_01</a></span> <a href=02.html><span class=linknazul>pagina_02</span></a></p> cambia y ya no funciona bien, y el enlace parece coger los valores por defecto.
¿Hay algún criterio para esas jerarquías u órdenes?

**MooDiE** · 19-12-2010, 02:37

¿Hay algún criterio para esas jerarquías u órdenes?

Por supuesto, el nombre de CS (hojas de estilos en cascada) significa que los estilos se van heredando hasta llegar al último elemento.

Lo que quiere decir que si tienes las propiedades:
A {color: blue;}.

Linkred {color: red;}.

Entonces con estos códigos ocurrirá lo siguiente.

<a href=index.html><span class=linkred>home</span></a>.

Con este código home se mostrara en rojo puesto que la última etiqueta que lo contiene es una span que redefine el color que se le aplica con la etiqueta a.

<span class=linkred><a href=01.html>pagina_01</a></span>.

Con este código pagina_01 se mostrara en azul puesto que la última etiqueta que lo contiene es la a y redefine el color aportado por el elemento padre span.

No obstante se suele intentar conseguir lo mismo con la menos cantidad de etiquetado posible con lo que el código realmente óptimo sería las etiquetas a sin las span.

<a href=01.html class=linkred >pagina_01</a>.

La clase añadida a la etiqueta a hace el mismo efecto que quieres conseguir y la web se quedará más limpia de código para que resulte más fácil hacer modificaciones.

Ahora mientras espero lo del mailto vía php.

Estoy acabando un trabajo de unas web, tan pronto como pueda empiezo a prepararlo.

Dame un mes más de estudio y os acepto el reto.

Esperaré impaciente. Un saludo.

**Pit [reloaded]** · 19-12-2010, 10:40

Gracias tío, entonces el código debería quedar así:
p><a href=index.html class=linknaranja>home</a> <a href=01.html class=linkgranate>pagina_01</a> <a href=02.html class=linknazul>pagina_02</a></p>.

**MooDiE** · 19-12-2010, 14:18

Efectivamente, aunque para ya dejarlo todo listo, los elementos de menú se suelen meter dentro de algún elemento de tipo block, div, por ejemplo, (en el nuevo html5 se ha creado un elemento nuevo para este fin nav, pero hay que hacer algunos cambios para que funcione en todos los navegadores).

Entonces tendríamos css de este tipo.

Linkazul{color: blue;}.

Y el código estaría dento de un elemento div.

<div id=navigation><a href=index.html class=linknaranja>home</a> <a href=01.html class=linkgranate>pagina_01</a> <a href=02.html class=linknazul>pagina_02</a></div>.

Usa también cosas de este tipo en css.

A:hover{color:black;}.

Si pones en css un elemento seguido de :hover ese estilo se aplicará únicamente cuando el ratón pase por encima del elemento. Y si no es así se mostraría el estilo del elemento definido por defecto.

**Pit [reloaded]** · 19-12-2010, 14:25

Si pones en css un elemento seguido de :hover ese estilo se aplicará únicamente cuando el ratón pase por encima del elemento. Y si no es así se mostraría el estilo del elemento definido por defecto.

Sí, estoy en ello, de hecho, en el.style, css, dentro ya están estas clases, y estaba experimentando con ellas:
Linkgranate { color: #736266, font-family:verdana, Génova, sans-serif, font-size:14px, text-decoration: none;}
.linkgranate:link { color: #736266, font-family:verdana, Génova, sans-serif, font-size:14px, text-decoration: none;}
.linkgranate:visited { color: #736266, font-family:verdana, Génova, sans-serif, font-size:14px, text-decoration: none, text-decoration: none; }
.linkgranate:hover { color: #d0d0fb, font-family:verdana, Génova, sans-serif, font-size:14px, text-decoration: none;}
.linkgranate:active { color: #736266, font-family:verdana, Génova, sans-serif, font-size:14px, text-decoration: none, text-decoration: none;}.linknaranja { color:#fc3, font-family:verdana, helvética, sans-serif, font-size:14px, text-decoration: none; }
.linknaranja:hover { color:#f33, font-family:verdana, helvética, sans-serif, font-size:14px, text-decoration: none; }
.linknaranja:link { color:#fc3, font-family:verdana, helvética, sans-serif, font-size:14px, text-decoration: none; }
.linknaranja:visited { color:#fc3, font-family:verdana, helvética, sans-serif, font-size:14px, text-decoration: none; }
.linknaranja:active { color:#fc3: font-family:verdana, helvética, sans-serif, font-size:14px, text-decoration: none; }.linknazul { color:#6f, font-family:verdana, helvética, sans-serif, font-size:14px, text-decoration: none; }
.linknazul:hover { color:#00f, font-family:verdana, helvética, sans-serif, font-size:14px, text-decoration: none; }
.linknazul:link { color:#6f, font-family:verdana, helvética, sans-serif, font-size:14px, text-decoration: none; }
.linknazul:visited { color:#6f, font-family:verdana, helvética, sans-serif, font-size:14px, text-decoration: none; }
.linknazul:active { color:#6f, font-family:verdana, helvética, sans-serif, font-size:14px, text-decoration: none; }.

Bueno, sigo a lo mío, ya te dije que hasta abril tengo mis meses sabáticos para estudiar esto, es ahora o nunca.

**MooDiE** · 19-12-2010, 14:30

Bueno, sigo a lo mío, ya te dije que hasta abril tengo mis meses sabáticos para estudiar esto, es ahora o nunca.

Hay que pegarle fuerte entonces, yo para la semana que viene que tengo un hueco, subiré lo del formulario de contacto en php. Aunque antes enseñaré como montar un servidor de pruebas básico con Mac (el programa es muy parecido al de Windows, no habrá problemas) ya que, si no tienes un servidor de php, no podrás ejecutar código php.

**Pit [reloaded]** · 19-12-2010, 15:12

Yo uso Windows XP de hecho, he preparado y limpiado un portátil para todo esto del web, los dos ordenadores de infografía vamos a dejarlos como están, que soy algo manazas.

**MooDiE** · 19-12-2010, 15:23

Ok, para el desarrollo en local necesitarás el famoso Xampp para Windows. Con esto montaras un servidor de pruebas en red local y podrás ejecutar código php.

Si mal no recuerdo puedes descargarlo de aquí (es software libre): http://www.apachefriends.org/octogono/Xampp.html.

**Pit [reloaded]** · 21-12-2010, 11:12

Gracias esta noche me quité un curro de encima y retomo el estudio los formularios en xhtml los voy a estudiar por aquí: http://www.librosweb.es/xhtml/capitulo8.html si sabéis alguna web mejor no dudéis en soplarmela sé hacerlos en Dreamweaver con los botones, pero sigo lo que me indicasteis y estoy haciéndolo todo por cógigo, a pelo.

Nedie dijo que esti sería un paseo.

**MooDiE** · 21-12-2010, 14:50

El contenido no es malo, sigue por ahí.

Nedie dijo que esti sería un paseo.

Cuando quieras no retamos entonces.

**Pit [reloaded]** · 22-12-2010, 11:33

Ya estoy programando los css pronto, pronto habrá reto.

**MooDiE** · 22-12-2010, 11:35

Pronto, pronto habrá reto.

Yuhu. Yo en cuanto acabe un diseño en Adobe Photoshop de una nueva web, me pongo con ese formulario. A ver si acabara hoy todo el trabajo de diseño.

**Pit [reloaded]** · 22-12-2010, 11:43

En cuanto acabe un diseño en Adobe Photoshop de una nueva web.

Tengo enlaces y documentación guardada sobre eso, aunque por no dispersarme, hasta que no programe con más soltura no las miraré pero me sorprende, creo que tengo un buen nivel de Photoshop, pero las webs que hice abocetaba directamente en Dreamweaver ya me contareis sobre partir desde pohotoshop posdata: ayer entregué el último curro fuerte que me quedaba por despejar, creo que ahora voy a poder disponer de unas semanas con todo el día para estudiar.

**MooDiE** · 22-12-2010, 11:54

Para bocetar webs se usa un programa de mockups (muchos de Windows usan visio de Microsoft, omnigrafle para Mac), luego también he visto que usan Illustrator, Adobe Photoshop o el software de Adobe específico para esa tarea que es Fireworks.

Diseño se suele hacer con Adobe Photoshop, existen plantillas para diseñar con Adobe Photoshop, http://960.gs, bájate el descargable de esta web y aparte de algunos css ya definidos por defecto, encontraras un.psd o.ai, en fin, hay muchos para que puedas empezar a bocetar las web y diseñarlas con la anchura que ahora se usa (960px). Los psd no son más que las guías verticales formado columnas para que puedas distribuir el contenido correctamente.

**Pit [reloaded]** · 07-01-2011, 04:02

Por si pasáis por aquí, Modie o kashir, un par de cosas, a las 04.49 de la madrugada estudiando (y mañana tengo curro, con dos clientes apretando).
1: estoy ya maquetando (obligándome a teclear código, a pelo) y parto de tu.center-Layout:
/*Modie rules*/
.center-Layout {
Width:960px;
Margin:0 auto;
Overflow: hidden;
//border:1px solid red;
}.

Un par de cosas, por que partes del overflow:hidden, si parece más práctico dejarlo en auto?
El borde rojo, cuando pasas el puntero. ¿puedes comentarme esa forma de escribirlo con // pues no encuentro documentación en http://www.librosweb.es sobre eso?

**Pit [reloaded]** · 07-01-2011, 04:08

2, y ésta que va a ser un ladrillo, lo siento, pero me despista este problema. En www.librosweb.es en la documentación, en las unidades relativas se advierte de lo siguiente:
por otra parte, uno de los problemas habituales cuando se utilizan unidades relativas es el problema del texto cada vez se ve más pequeño o el texto cada vez se ve más grande.
el siguiente ejemplo muestra el primer caso:
div { font-size: 0.9em; }
div>
p>texto 1</p>
div>
p>texto 2</p>
div>
p>texto 3</p>
/div>
/div>
/div>
y efectivamente así ocurre si:
<.doctype html public -//w3c//dtd html 4.01 transitional//en http://www.w3.org/tr/html4/lose, dtd>
<html>
<head>
<meta http-equiv=content-type content=text/html, charset=utf-8>
<title>pruebas unidades relativas</title>
<style>
div { font-size:9em; }
</style>
</head>
<body>.
<div>
<p>malditas unidades relativas</p>
<div>
<p>malditas unidades relativas</p>
<div>
<p>malditas unidades relativas</p>
</div>
</div>
</div>
</body>
</html>.
sin embargo, enredando, veo el problema desaparece si:
.doctype html public -//w3c//dtd html 4.01 transitional//en http://www.w3.org/tr/html4/lose, dtd>
html>
head>
meta http-equiv=content-type content=text/html, charset=utf-8>
title>pruebas unidades relativas</title>
style>
div#prueba1 { font-size:9em; }
/style>
/head>
body>.

Div id=prueba1>
p>malditas unidades relativas</p>
div>
p>malditas unidades relativas</p>
div>
p>malditas unidades relativas</p>
/div>
/div>
/div>.
/body>
/html>.
aunque si combino los dos casos, el problema vuelve a aparecer:
.doctype html public -//w3c//dtd html 4.01 transitional//en http://www.w3.org/tr/html4/lose, dtd>
html>
head>
meta http-equiv=content-type content=text/html, charset=utf-8>
title>pruebas unidades relativas</title>
style>
div { font-size:9em; }
div#prueba1 { font-size:9em; }
/style>
/head>
body>.

Div>
p>malditas unidades relativas</p>
div>
p>malditas unidades relativas</p>
div>
p>malditas unidades relativas</p>
/div>
/div>
/div>.

Div id=prueba1>
p>malditas unidades relativas</p>
div>
p>malditas unidades relativas</p>
div>
p>malditas unidades relativas</p>
/div>
/div>
/div>.
/body>
/html>.
no entiendo muy bien.

En el primer caso uso: div { font-size:9em; }
y aparece el problema.
si no uso ese css y en su lugar uso div#prueba1 { font-size:9em; }
el problema desaparece.
pero si uso los dos:
div { font-size:9em; } y div#prueba1 { font-size:9em; }
y en el segundo div le aplico el id=prueba1
el problema se reproduce en los dos.

En la documentación, en la colisión de estilos se decía:

cuanto más específico sea un selector, más importancia tiene su regla asociada.
a igual especificidad, se considera la última regla indicada.

por lo que no entiendo por qué en el tercer caso me ignora div#prueba1 { font-size:9em; } que en teoría es más específico.
o a lo peor me he liado y tengo una gran empanada Mental .

**Pit [reloaded]** · 07-01-2011, 10:54

Bah, paso, la relatividad de la relatividad el 0.9em no tiene arreglo podía haber empleado el tiempo en algo más productivo.

**MooDiE** · 07-01-2011, 11:18

Bah, paso, la relatividad de la relatividad el 0.9em no tiene arreglo. Podía haber empleado el tiempo en algo más productivo.

Voy a tener que reemplazar el código css de un sitio entero solo por usar la unidad de medida em, cada día veo menos gente que usa este tipo de medida, este sitio en cuestión en resoluciones muy específicas de monitor provoca una estructuración del sitio que no es la esperada, px de toda la vida.

**Pit [reloaded]** · 07-01-2011, 11:30

Está claro, sí pero tenía que probarlo para desencantarme de los puñeteros me y ex.
2 o 3 horas de madrugada he estado con eso, y ahora muerto de sueño tengo que estar trabajando.

**MooDiE** · 07-01-2011, 11:33

Por si pasáis por aquí, Modie o kashir, un par de cosas, a las 04.49 de la madrugada estudiando (y mañana tengo curro, con dos clientes apretando).

Leí el mensaje a las 5:15 de la madrugada, parece ser que, se programa mejor a las tantas.

1: estoy ya maquetando (obligándome a teclear código, a pelo) y parto de tu.center-Layout:
/*Modie rules*/.

Center-Layout {.
Width:960px.

Margin:0 auto.

Overflow: hidden.
//border:1px solid red.
}.

Un par de cosas, por que partes del overflow:hidden, si parece más práctico dejarlo en auto?
El borde rojo, cuando pasas el puntero. ¿puedes comentarme esa forma de escribirlo con // pues no encuentro documentación en http://www.librosweb.es sobre eso?

Lo de overflow es para que la capa coja altura si tiene elementos flotantes en su interior (float) no hay diferencia de usarlo con hidden o auto, a efectos prácticos es la misma siempre y cuando no se le defina altura a esta capa y no se vea bloqueada. Si está en auto y la capa no puede crecer a lo largo aparecerá el scroll. Teniendo en cuenta eso es cuestión de gustos.

Lo de la doble barra al lado de border en programación es un comentario de línea. A diferencia del comentario de párrafo (/*comentario de párrafo*/) que hasta que no se cierre el comentario no acaba, con // el comentario solo afecta a una línea. Lo uso para activar/desactivar el borde de los elementos mientras voy maquetando y cuando lo paso a producción elimino esa líneas completas con una búsqueda.

Si el sueño no me traicionó creo haber leído algo de porque estaba en el Margin el 0 y el auto. Cuando se ponen dos valores el primero es el margen superior e inferior y el segundo derecho e izquierdo. De este modo el margen superior/inferior vale 0 y el derecho/izquierdo se centraría automáticamente.

Por cierto, no me olvido del formulario de contacto, pero últimamente no doy a basto, en cuanto acabe este trabajo buscaré un hueco y lo monto.

**MooDiE** · 07-01-2011, 11:36

Está claro, sí. Pero tenía que probarlo para desencantarme de los puñeteros me y ex.
2 o 3 horas de madrugada he estado con eso, y ahora muerto de sueño tengo que estar trabajando.

A efectos prácticos, cuando tienes que crear un sitio con imágenes que encajan al píxel es una locura. Aunque siempre habrá donde se use aún sobre todo cuando los sitios tengan que ser accesibles, ya que, con las unidades me se produce un escalado de las fuentes.

Si el sitio tiene que ser accesible puedes usar esta propiedad.

Body {.

Font-size: 62.5%.
}.

Con esto consigues que 1em = 10px y todo será más fácil a la hora de maquetar. Yo uso también esta web para ver las tablas de conversión entre unidades http://pxtoem.com/.

**Pit [reloaded]** · 07-01-2011, 11:59

Si el sueño no me traicionó creo haber leído algo de porque estaba en el Margin el 0 y el auto.

No te traicionó, lo busqué y lo encontré, por eso lo borré.

**MooDiE** · 07-01-2011, 12:01

He buscado la información que usé en la web que se descolocaba con las unidades em, en el mensaje anterior te dejo el código que usé para hacer un poco más fácil la reescritura del código css.

**Pit [reloaded]** · 07-01-2011, 18:33

Este fin de semana, aprovechando que llueve y que he entregado los curros y que hasta el lunes no volverán a forrarme a ostias me machaco el css y pruebo a arrancar con una página sólo con código, sin el arrastrar y soltar del Dreamweaver si puedo con ello, la semana que viene arranco con javascript y Doom.

**MooDiE** · 08-01-2011, 17:26

Por lo que no entiendo por qué en el tercer caso me ignora div#prueba1 { font-size:9em; } que en teoría es más específico.

O a lo peor me he liado y tengo una gran empanada Mental.

Huy. Había olvidado de contestarte a este tema.

<.doctype html public -//w3c//dtd html 4.01 transitional//en http://www.w3.org/tr/html4/lose, dtd>.

Html>.

Head>.
meta http-equiv=content-type content=text/html, charset=utf-8>.
title>pruebas unidades relativas</title>.
style>.

Div { font-size:9em; }.

Div#prueba1 { font-size:9em; }.
/style>.
/head>.
body>.

Div>.

P>malditas unidades relativas</p>.

Div>.

P>malditas unidades relativas</p>.

Div>.

P>malditas unidades relativas</p>.
/div>.
/div>.
/div>.

Div id=prueba1>.

P>malditas unidades relativas</p>.

Div>.

P>malditas unidades relativas</p>.

Div>.

P>malditas unidades relativas</p>.
/div>.
/div>.
/div>.
/body>.
/html>.

En este tercer caso, especificas que div#prueba1 { font-size:9em; } tenga.9em hasta ahí bien, pero como también especificas div { font-size:9em; } entonces si la unidad me se comporta de la siguiente manera.

Si empleas la unidad em para especificar el tamaño de la letra (font-size) entonces el valor de me es relativo al tamaño de letra del elemento padre que lo contiene.

El tamaño de las letras se hará más pequeño, ya que para la primera capa div#prueba1, la segunda capa contenida dentro de div#prueba1 y que no postura un identificador (solo tiene <div></div>) tendrá un 0.9em menor que el tamaño de su elemento padre (en este caso div#prueba1). Y como a su vez dentro de esta div existe otra div (recordamos que todas las divs por css tienen un valor de 0.9em) será 0.9em luego se hará más pequeña.

Es un poco lioso, lo sé.

**Pit [reloaded]** · 08-01-2011, 23:21

Gracias, tío, al final ya me quedó claro que andar reduciendo o ampliando los me y os ex no da más que problemas. Sobre la anchura de las páginas.

Tú partes de una anchura fija de 960px sin embargo, en la guía de librosweb, es mencionan:
cuando se diseña la estructura de una página web, se debe tomar la decisión de optar por un diseño de anchura fija o un diseño cuya anchura se adapta a la anchura de la ventana del navegador.
sin embargo, la mayoría de las veces sería conveniente una solución intermedia: que la anchura de la página sea variable y se adapte a la anchura de la ventana del navegador, pero respetando ciertos límites. En otras palabras, que la anchura de la página no sea tan como para que no se puedan mostrar correctamente los contenidos y tampoco sea tan ancha como para que las líneas de texto no puedan leerse cómodamente.

Cómo lo ves, mejor fija o variable?

**Pit [reloaded]** · 08-01-2011, 23:32

Por cierto, ¿cómo solucionas tú el problema de las falsas columnas? Alguna idea? Esto:
en general, la columna de los contenidos es la más larga y la columna de navegación es la más corta. El principal inconveniente de los diseños mostrados anteriormente es que no se puede garantizar que todas las columnas se muestren con la misma altura.
si las columnas tienen algún color o imagen de fondo, este comportamiento no es admisible, ya que se vería que alguna columna no llega hasta el final de la columna más larga y el diseño final parecería inacabado.

**Pit [reloaded]** · 08-01-2011, 23:55

Ok, Modie, kashir sábado a las 01:00 lo prometido es deuda me he tragado enteros los 3 libros de librosweb, es, el de xhtml, el de css, y la referencia del css 2.1 me piro a dormir y mañana me pongo a diseñar una página sólo tecleando código en el editor y sin usar el arrastrar y soltar del Dreamweaver como he he hecho hasta ahora.

**Kashir** · 09-01-2011, 02:06

cómo lo ves, mejor fija o variable?

Yo uso anchura fija siempre, así el contenido se ve igual en todos los monitores y lo único que varía son los márgenes laterales.

Un ejemplo, si alguien tiene una resolución de 1280 por 1024 y tienes una web de 960, imagina un blog, tienes 600px para el contenido y 360px para la barra lateral, 160px a cada lado de margen lateral. Si en los artículos incluyes imágenes, las metes de entre 500-600px de ancho y siempre quedan bien, un tamaño y proporciones uniformes. Si metes texto y te salen unas 9 líneas, puedes ver cómo se estructura para meter un salto de línea antes o después.

Ahora llega alguien con una resolución superior a full Hd por ejemplo: 2560 por 1440.

Pongamos que se estira el contenido y la barra se mantiene fija, queda bastante deforme el blog. El texto de 10 líneas ahora ocupa 4 tal vez, y encima los saltos de línea lo desestructuran. Además, las imágenes de 500-600px de ancho estarían solas si pones imágenes más grandes se les descuadra a los que tienen menores resoluciones, y si te pones un plugin para resize automático de imágenes, la página cargara más lento y será peor para indexarla.

Se mire por dónde se mire, el ancho fijo es siempre lo mejor para webs. Para un foro, por ejemplo, es otro cantar, ahí creo que está mejor el ancho flexible.

Ejemplos visuales: la portada de 3dpoder es fija, y el foro es flexible o variable.

Por cierto Pit, avanzas bastante rápido, debería coger ejemplo de ti y aprovechar mejor las madrugadas, cagoendiez.
sin más.

**MooDiE** · 09-01-2011, 02:11

Yo siempre hago un intermedio, ¿porqué 960px y no otro? Hoy en día se ha llegado a digamos que la conclusión de que nadie tiene en sus casas un monitor con una resolución menor a 1024x768 y el primer dígito que se puede dividir en columnas y que salgan enteros es 960 por lo que se ha optado por dar esta anchura. Yo lo que hago es dejar esos 960px para el contenido de la página web (con el código css que te pasé se pueden conseguir capas que se centren en el navegador y tengan 960px). Ahora bien la clase que te pasé la aplico a capas que a su vez están contenidas dentro de unas capas que ocuparían el 100% del ancho del navegador. Con estas capas que ocupan todo el ancho suelo colocar una ampliación de los fondos. http://www.cssmania.com/.

Este es un sitio web que es una galería de sitios webs (que redundante o. O). En la mayoría de ellos puedes ver que ocupan aproximadamente 960px de ancho (digamos contenido de la página) pero los fondos se extienden sea cual sea el ancho del navegador. Yo a menudo me paso para saber el rumbo que va tomando internet y poder ver mi nivel con respecto a otros desarrolladores.

También es algo que supongo es cuestión de gustos y una parte por controlar un poco la usabilidad, sabes que se va a ver igual en un monitor con una resolución de 1024x768 que en 1960 por 1080 sin tener que hacer scroll a lo ancho.

Lo del escalado líquido estoy más acostumbrado a verlo en aplicaciones web más que en páginas de consulta. Para sitios informativos y/o presencia en internet yo me quedo con 960px, pero ya te digo no es, en absoluto obligatorio.

El término intermedio se consigue también con propiedades css como max-width/min-width (creo que solo son válidas si el navegador tiene soporte para ellas, ahora mismo no sabría decirte si todos lo soportan, aunque los que no siempre se puede arreglar con javascript) que definen una anchura máxima para el sitio web.

**Pit [reloaded]** · 09-01-2011, 12:25

Gracias, tíos, son de gran ayuda vuestros comentarios para alguien que sólo hacía sus webs, y webs de regalo para sus colegas y familia con el Dreamweaver arrastrando y soltando. Voy a hacer una sencilla, nada complicado, sólo tecleando código, <em>sin mas</em>, como dice. Dame unas semanas más y nos tiramos un reto-web en el foro de los retos.

**Pit [reloaded]** · 09-01-2011, 14:14

Ahora bien la clase que te pasé la aplico a capas que a su vez están contenidas dentro de unas capas que ocuparían el 100% del ancho del navegador. Con estas capas que ocupan todo el ancho suelo colocar una ampliación de los fondos.

Bueno, eso es interesante porque no lo he visto, me gustaría probarlo en la web-ejercicio-picando-código.
¿Sería algo así?:
#fondo {
Width: 100%;
}.
/*Modie rules*/
#contenedor {
Width:960px;
Margin:0 auto;
Overflow: hidden;
//border:1px solid red;
}.

Div id=fondo>
div id=contenedor>
/div>
/div>.

**MooDiE** · 09-01-2011, 16:17

Yo hago capas contenedoras por separados para variar, por si quiero los colores de fondo según el tipo de contenido. Y a cada capa que quiero contener le aplico la clase container.

<.doctype html>.

Html>.

Head>.
meta http-equiv=content-type content=text/html, charset=utf-8 />.
title>plantilla inicial</title>.
style type=text/css> t.container { width:960px, Margin:0 auto, overflow: hidden, t} theader, footer {height: 100px} t#main, aside {height: 500px} theader, footer, #main, aside {outline: 1px solid red}.
/style>.
/head>.
body>.

Div id=header-cont> t<Header class=container></header>.
/div>.

Div id=main-cont> t<div id=main class=container> <aside></aside> t</div>.
/div>.

Div id=footer-cont> t<footer class=container></footer>.
/div>.
/body>.
/html>.

**MooDiE** · 09-01-2011, 16:19

Por cierto, los elementos Header, aside, footer, etc. Son nuevos en html5 y para que navegadores antiguos lo soporten hay que crear algunas líneas más. Pero estos son perfectamente reemplazables por capas (div).

**Pit [reloaded]** · 09-01-2011, 17:22

Voy a intentar traducir eso a div porque si encima me lías con el html5 me da un copalos Mental.

**MooDiE** · 09-01-2011, 17:25

Htlm5 es más col. Puedes traducirlo con id de capa, ejemplo para <header></header> -> <div id=header></div>.

**Pit [reloaded]** · 13-01-2011, 09:54

Ok, ya me he hecho un par de poprtadas de web sólo con código, sin arrastrar/soltar del Dreamweaver el lunes que viene empiezo un curro que me absorberá 10 días hasta entonces arranco con javascript-dom.

Modie, kashir, controláis de eso?
pdta: el reto está más cerca.

**MooDiE** · 14-01-2011, 00:35

Modie, kashir, controláis de eso?

Algo sé de javascript, tu publica tus dudas sobre este tema y te ayudaremos a resolverlas sobre este tema. Aunque si es verdad que en javascript es donde considero que estoy más verde.

**Pit [reloaded]** · 14-01-2011, 12:07

Bueno, yo hasta el lunes que me dan los planos de un concurso me pongo con el tocho de javascript de libros.web y a ver hasta dónde llego.
(Por cierto, esos libros web son cojonudos).

**MooDiE** · 14-01-2011, 12:20

Tu que software de 3d usas Pit? Yo hace tiempo empecé con Maya luego me pasé a 3dsMax (versiones de prueba 5, 6, 7, 9). Probé el Cinema 4D y hace unos años hice un curso de desarrollo de videojuegos con c# en la que una de las asignaturas era Blender. La verdad que me gustó bastante, pero o yo no tengo mucha idea de render, mejor dicho no tengo idea de render ya que lo que siempre me ha gustado ha sido el modelado, pero me da la sensación de que el motor de render de Blender es algo flojo.

El caso es que hace tiempo que tengo muchas ganas de hacer escenas tridimensionales para crear banners publicitarios en sitios webs y se me ha metido por el ojo un programa llamado modo 401. Esta para Mac, que es algo que se agradece. Parece ser que el motor de render que trae (me imagino que es el que trae por los renders de la web oficial) es bastante bueno. ¿has oído hablar de este software o lo has probado alguna vez? Estoy tentado de comprarlo.

**MooDiE** · 14-01-2011, 12:23

Claro que antes bajaría la versión de prueba que tienen en el sitio que viene con tutoriales y todo para probar el software, si me dejo los aproximadamente. 1000 euros que vale que esté seguro que el software lo voy a poder amortizar. Aun así, aparte del trabajo lo quiero porque en mis ratos libres me gusta salir a la calle con la Réflex y luego modelar los objetos que fotografío así que, también lo usaría para eso.

**Pit [reloaded]** · 14-01-2011, 12:29

Yo uso max, Rhinoceros, AutoCAD e inventor, y renderizo con Vray, y últimamente a veces con Mental Ray modo no lo uso, pero es asignatura pendiente, todo el mundo bien muy bien de modo y he visto renders en modo cojonodos el bueno de Moe abrió un par de hilos sobre modo si te pones con modo, igual cuando acabe lo que quiero aprender de programación web me apunto a fin de cuentas, este año 2011 que está bajo de trabajo tiene muchos huecos para estudiar habrá que hacer de la necesidad virtud.
(Y para lo que lo quieres la relación calidad-precio de modo es imbatible).

**MooDiE** · 14-01-2011, 12:37

Yo probablemente me ponga en los meses de verano que estaré más parado. Acabo de ver que han sacado nueva versión de modo la 501 y la versión de pruebas con tutoriales está desactivada para meterle mejoras. Esta nueva versión tiene buena pinta.

**Pit [reloaded]** · 14-01-2011, 12:54

Ok, en verano estaremos todos un poco parados para entonces.

**MooDiE** · 14-01-2011, 13:04

Si eres freelance, para cuando sepas algo más de programación web podrías visitar los markets de envato para poder vender plantillas de páginas web. No da mucho dinero, pero es un extra al mes. A me gustaría desarrollar algo para el market en un futuro próximo.

**Pit [reloaded]** · 14-01-2011, 13:33

Si soy freelance, trabajo sobre todo en 3d para arquitectura e ingeniería, diseño gráfico, ilustración editorial y formación, y para dialers de Autodesk le semana que viene empiezo un proyecto fuerte de diseño industrial, por ejemplo el diseño web es sólo una espina clavada y ganas de hacerme una web para mí que me guste y hacer las que me piden amigos muy bien se me tendría que dar, y mucho se me tendría que torcer la cosa para dedicarme profesionalmente al web, pero nunca se sabe, tomo nota.
(De momento disfruto con el reto de aprender a programar, es como aprender otro idioma, pero sin tener que preocuparse de la pronunciación).

**MooDiE** · 14-01-2011, 15:16

(De momento disfruto con el reto de aprender a programar, es como aprender otro idioma, pero sin tener que preocuparse de la pronunciación).

Que gran verdad.

Para dedicarse a la web ya te digo la gente compra lo que le entra por el ojo, si sabes hacer 4 cosas fáciles, pero quedan bonitas, tienes compradores. Eso es Photoshop.
¿Qué tal está el mundo del 3d para dedicarse profesionalmente? ¿hay mucho trabajo? Yo ahora mismo estoy estudiando el tema de las aplicaciones de Apple, que parece ser que, en esta plataforma la piratería no está tan extendida como en Windows.

Lo que de verdad odio de trabajar con ordenadores es el típico borrico de turno que cuando va a encargarte un trabajo que tiene mil cosas lo más inteligente que sabe decir cuando le dices el precio es: pero si ezo con el ordenador se hace muy rápido, ¿no? Puede derivar en frases distintas, pero el funcionamiento interno de sus cerebros es el mismo: enciendes el ordenador, arrancas el programa de hazte rico pulsando el enter y listo.

El diseño web es sólo una espina clavada y ganas de hacerme una web para mí que me guste y hacer las que me piden amigos.

Te recomiendo que las bases en sistemas como Wordpress o expression engine (este último de pago, con licencia personal de 100$) ahora el motor de expression engine es una maravilla para ir actualizando la web con cierta frecuencia. Cuando domines los lenguajes de programación te pasaré algunos enlaces para que integres las webs con Wordpress. Yo en cuanto tenga algo más de tiempo me pillaré una licencia de expression engine para montarme mi sitio web que lo estoy borrando cada poco tiempo.

**Pit [reloaded]** · 14-01-2011, 17:14

De momento quiero manejarme con la programación, y de ahí saltaré a Wordpress, Joomla o puedo probar con expression engine, ya veremos, pero ya te digo, si quiero aprender es ahora o nunca.

Sobre el 3d, en infoarquitectura el bajón ha sido notable, y los precios han bajado, en diseño industrial, también, pero menos, se mantiene algo la decoración e interiorismo de lujo, pero vaya.

Sobre videojuegos, cine y publicidad no sé mucho, porque no es mi campo.

Yo de lo que más tengo ahora es diseño gráfico, imagen corporativa, editorial, 3d de diseño industrial, formación, y la infoarquitectura ha bajado como para tener tiempo de estudiar esto de la programación web.

Me llama la atención lo de hacer 3d para web, lo que has mencionado de los banners 3d, ya me dirás algún ejemplo.

**MooDiE** · 14-01-2011, 17:24

Me llama la atención lo de hacer 3d para web, lo que has mencionado de los banners 3d, ya me dirás algún ejemplo.

Este tipo de monigotes los he visto en muchas webs empresariales, con la temática del sitio o el tema en cuestión y quedan bastante bien. mercado con renders de los monigotes.

**MooDiE** · 14-01-2011, 17:27

De momento quiero manejarme con la programación, y de ahí saltaré a Wordpress, Joomla o puedo probar con expression engine, ya veremos, pero ya te digo, si quiero aprender es ahora o nunca.

A no ser que mejore Joomla ahora mismo a mí no me gusta mucho, mejor Wordpress.

**JUANMAX** · 17-01-2011, 08:59

Hola Pit, te ha entrado el gusanillo de programar. Si no fuera por la crisis yo tampoco habría hecho estos cursos 360 horas vb, asp, net, sql, java.html, css, bases de datos y muchos ejercicios sobre entidades relacionales y demás hice una web en asp, net con gestor de contenidos, usuarios, archivos, noticias, contraseñas, tienda, computo de la compra con bases de datos, (*.mp3), video, noticias, login etc, todo actualizable desde un panel de control que yo mismo diseñe así que, no me quejo para nada del curso.

Ahora estoy haciendo otras 260 horas Dreamweaver, flash, action script 2, action script 3.0, css.html5.html y la verdad es que promete cosas nuevas esperaremos a que llegue la programación, posicionamiento, trucos y demás, el profesor parece que sabe bien de lo que bien y eso es muy bueno por lo voy a abrasar a preguntas como. ¿ya sé que no tiene nada que ver en este momento, pero y si quiero hacer esto?
Y una vez que conoces más de un lenguaje, los demás te resultan más fáciles de aprender y entender, sé que es un popurri de lenguajes, pero en la programación no se trata de saberse todo de memoria, si no de cómo se programa en cada lenguaje, al final resulta que es más sencillo de lo que parece y libera tú creatividad.

Anímate a animar a programar a todo lo que termine en ar que el saber no ocupa lugar, jommla no lo conozco, wordexpress tampoco, Dreamweaver si lo conozco y ahora cuando termine este curso lo conoceré mucho más a fondo.

**Pit [reloaded]** · 20-01-2011, 10:09

Hola Juanmax pues sí, me ha dado por esto, avergonzado de no tener una web decente tras 20 años de trabajo, ya me vale y como ahora hay algo de tiempo me he tirado a la piscina ayudado por estos foreros y por la web http://www.librosweb.es donde hay unos pdf cojonudos lo hago a trompicones, ahora vuelvo a tener 3 días, porque tengo todas las máquinas renderizando para un curro para metro de Madrid, y aprovecho.

Precisamente en estos momentos arranco con javascript en http://www.librosweb.es/javascript/capitulo1.html a ver qué sale.

De momento ya he conseguido hacer webs tecleando directamente código xhtml y css sin recurrir al arrastrar y soltar del Dreamweaver.

Cuando conozca las tripas de esto, me tiraré a los Wordpress, drupal, a ver de que van.

Y hay un reto web pendiente con el Modie. Apúntate.

Postdata:
.doctype html public -//w3c//dtd html 4.01 transitional//en http://www.w3.org/tr/html4/lose, dtd>
html>
head>
meta http-equiv=content-type content=text/html, charset=utf-8>
title>documento sin título</title>
script type=text/javascript>
Alert (yeha. Mi primera vez en java script xxxxxd) ;
/script>
/head>
body>
p>Juanmax, copia y pega esto y lo salvas como html</p>
/body>
/html>.

**JUANMAX** · 21-01-2011, 09:05

Aupa Pit, esta, pero que muy bien esto de la programación ya te contaré más adelante, reto? Vi a ve.

**Pit [reloaded]** · 25-01-2011, 23:52

Vaya Modie, es desesperante el javascript, una comilla de, una coma, cualquier cosa, mal puesta y nada funciona.

**MooDiE** · 25-01-2011, 23:57

Vaya me preguntaba porqué estabas tardando tanto en poner ese comentario. La verdad es que javascript es un poco trabajoso, instala un plugin de Mozilla que si mal no recuerdo se llamaba bugzilla, tiene una consola que te dirá o te dará pistas sobre que es lo que falla en tu código. Te ayudará a programar.

**Kashir** · 26-01-2011, 00:09

yo con javascript tampoco me llevo muy bien, claro que dicen que se parece mucho a c, y yo estoy aprendiéndolo este año, tal vez ahora me lleve mejor.

No sé si te referirás a firebug, Modie.
sin más.

**MooDiE** · 26-01-2011, 00:15

No sé si te referirás a firebug, Modie.

Exactamente a ese, hace ya algún tiempo que no lo uso, bugzilla es otra cosa. Prueba firebug que te va a ayudar bastante. Gracias por la aclaración.

**Pit [reloaded]** · 26-01-2011, 00:17

Vaya, os veo a estas horas frente al ordenador al final, he decidido hacer de la necesidad virtud y me he matriculado en un curso de laUNED (Universidad Nacional de Educación a Distancia).
(En realidad me han metido con calzador un amigo) y acabé hace dos días un curro y he tenido que hacer el primer examen (el de xhtml y css) pitando, y lo he aprobado pero claro, el siguiente es el de javascript y llego tarde, y mañana tengo que ver otro cliente para otro curro e iré sin dormir, porque de alguna forma tengo que meterme en 3 o 4 días el examen de javascript para pasar a lo siguiente, y sin perder el trabajo de mañana esto es un sin vivir, pero mola.

Tenía el cerebro anquilosado de tanto mojito y tanta cerveza y mala vida si de ésta no soy capaz de hacerme una web decente, tendré que machacarmela con dos piedras por inútil.

**MooDiE** · 26-01-2011, 00:21

Seguro que te bebes ese examen Pit, luego cuando estás trabajando hay librerías como jQuery, motols o Prototype que hacen que programar en javascript sea más llevadero. Pero las bases son las bases cuando te acostumbres a los puntos y las comas ya te resultara todo más fácil, incluso repetitivo.

**Pit [reloaded]** · 26-01-2011, 00:22

Prueba firebug.

Nada, yo hasta que no pueda más tiro con notepad para aprender bien la base con deciros que he tenido que romperme la cabeza porque un archivo.js me daba error leyendo acentos y cosas de ésas y hasta que he dado con que tenía que salvarlo desde el notepas con formato utf-8 casi me corto las venas.

**Pit [reloaded]** · 26-01-2011, 00:35

Estoy por mandaros el examen por privado para que veáis de que va esto, supongo que, nada que ver con lo vuestro, por lo que veo sois informáticos, pensad que yo estudié bellas artes, técnicamente soy sólo un tipo que hace manchas, pero vaya, voy pudiendo con esto, a base de cabezazos.

**MooDiE** · 26-01-2011, 00:46

Vaya la cosas de artes también tienen su dificultad, todo es práctica. En unas semanas ya verás cómo vas cogiendo carrerilla.

Pensad que yo estudié bellas artes.

Yo estaba dudando entre ingeniería del software y bellas artes.

Actualmente hago trabajos y curso ingeniería, del software. Previamente me saqué el f. P. S, de administración de sistemas informáticos que es donde aprendí todo esto de las webs y el mundo de los servidores.

Yo creo que una persona que controle mucho de artes o informática y sepa del otro campo puede llegar a conseguir cosas realmente interesantes.

Estoy por mandaros el examen por privado para que veáis de que va esto.

Mandalo a ver si podemos ayudarte en algo, pero vamos no creas tampoco soy un fiera en esto, hay gente que se dedica exclusivamente a trabajar con este lenguaje.

**Pit [reloaded]** · 26-01-2011, 10:18

Naa, no lo mando salvo que no sea capaz de hacerlo a ver si consigo aprobar el curso y hacemos el reto-web.

**Pit [reloaded]** · 26-01-2011, 21:39

Vaya. Modie, kashir, me manejo aceptablemente con las funciones, eventos pero patino en la parte más matemática del javascript diablos, nadie dijo que esto sería un paseo.

**JUANMAX** · 27-01-2011, 09:00

Vaya Modie, es desesperante el javascript, una comilla de, una coma, cualquier cosa, mal puesta y nada funciona.

Como si me dices: niño ve al bar y me traes un cfe, tampoco funciona, imagina que yo soy javito script y te digo ¿Qué me estás diciendo?
El tema es saber cómo se maneja, copiar y pegar nuestro propio código esta a la orden del día.

**MooDiE** · 27-01-2011, 10:54

Como si me dices: niño ve al bar y me traes un cfe, tampoco funciona, imagina que yo soy javito script y te digo ¿Qué me estás diciendo?

Si yo fuera javito-script iría al bar a por un café.

**Pit [reloaded]** · 27-01-2011, 16:59

El tema es saber cómo se maneja, copiar y pegar nuestro propio código esta a la orden del día.

Ya, pero al menos, de momento quiero saber/intentar programar algo al final me apuntaron (un amigo)m a un curso de la uned y al menos el examen quiero intentar programarlo está claro que al final copiaré/pegaré scripts ajenos, pero al menos un intento de hacerlo yo solo pero sí, reconozco que me faltan neuronas para esto del java script.
(Que no es porque naciese con pocas, sino porque he machacado muchas con tanta golfería).

**MooDiE** · 27-01-2011, 18:12

Javascript le es costos o incluso para algunos informáticos, pero no es imposible ni mucho menos. Cuando le coges el truco ya te empieza a funcionar todo.

**Pit [reloaded]** · 27-01-2011, 18:47

Dame 30 minutos y te subo el código del primer ejercicio. Evidentemente, si bien he seguido el enunciado que te mandé, lo he construido tirando de scripts que he buscado por la red.

Lo estoy adaptando al enunciado, y luego lo destripo a ver qué es cada cosa, y si me ayudas, puede que hasta lo entienda.
(Ahora mismo, lo estoy probando, y fubciona, pero no entiendo cómo funciona).
(No sé si me explico, se mueve, pero es un misterio para mí cómo se mueve).

**MooDiE** · 27-01-2011, 19:07

(No sé si me explico, se mueve, pero es un misterio para mí cómo se mueve).

Brujería. Envía el código comprimido en un (*.zip) (html+js+css, o lo que tengas) y lo vamos viendo.

**Kashir** · 27-01-2011, 19:24

a todo esto, Pit. Jomla o Dreamweaver?
sin más.

**MooDiE** · 27-01-2011, 19:32

a todo esto, Pit. Jomla o Dreamweaver?
sin más.

Ciertamente, empezaste con una pregunta y poco a poco te has ido metiendo en un follón de cuidado eh.

**Pit [reloaded]** · 27-01-2011, 19:40

Bueno, vamos. Lo que he hecho es buscar scripts similares y adaptarlos a las fotografías del ejercicio, tamaños, número de fotografías.

Entiendo que no hace falta esta cortina, sino que basta con que cambien a corte cada 3 segundos.

Eso es lo que he de intentar conseguir modificando el script, e intentando entenderlo.

El enunciado del primer ejercicio era:
ejercicio 1:
crear una página web con una imagen que cambie cada 3 segundos a modo de pase
de diapositivas. En la carpeta del ejercicio se han incluido 10 ficheros del mismo
tamaño, 770 por 130 píxeles, que son los que hay ir mostrando de forma cíclica.
.

-- IMÁGENES ADJUNTAS --

**Pit [reloaded]** · 27-01-2011, 20:23

No es un follón me cerebro estaba algo anquilasado en el 3d y el diseño gráfico, esto me da vidilla.

**MooDiE** · 27-01-2011, 21:01

Bueno vamos con ese ejercicio javascript, te hago un planteamiento con una solución más fácil y tu intentas programarla para practicar.

Fichero html:
El código html lo que tiene que hacer es crear una capa y que dentro contengan las imágenes que quieras introducir.

Fichero CS:
La capa (div):

centrar la capa en la página.
colocarle la anchura y altura de las imágenes.
definir el posicionamiento como relativo.

Las imágenes (img):

el posicionamiento debe ser absoluto para que las imágenes se solapen unas sobre otras.
los parámetros left y top tienen que estar a 0 ya que se trata de que los bordes de la imagen izquierdo y superior estén en pegados a la capa padre.
el ancho y el alto debe ser heredado de la capa padre.
el display estará por defecto en none.

Fichero de javascript:

.
cargar las imágenes en una variable de tipo array.
cada cierto tiempo recorrer el array para que cambie el parámetro display none a inline únicamente en la imagen siguiente a la que está en inline y que está se ponga en none.

Nota: si no sabes cómo coger las imágenes puedes ponerle un id a las img y luego cargar el array manualmente cogiendo las imágenes con getelementbyid().

La idea es esa, ahora te toca investigar un poco para coger soltura. Si tienes alguna duda preguntanosla por aquí. Puede que el parámetro inline lo tengas que cambiar por block si te hace algún extraño de esto no estoy seguro, pero es algo que vamos viendo sobre la marcha.

**Pit [reloaded]** · 27-01-2011, 21:11

Ok entiendo que es una div que contiene todas esas imágenes. ¿Tengo que asignarles un z-index? Bueno, me pongo con ello voy preparando una buena cafetera.

Joomla vs Dreamweaver

Herramientas

Buscar tema

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver