Durante el ' Episodio 16 el experimento para crear una página de MySpace en vivo no ha sido un gran éxito. Por suerte había música para salvarnos! (Por cierto, si alguien ha escuchado sólo ese episodio .. dame otra oportunidad
Elija por vosotras y otro episodio de escuchar. Un montón de buena música libre para usted cada semana en la sección de podcasts !).
Para no dejar con las manos vacías, sin embargo, he preparado esta guía que recoge todas mis experiencias en la implementación de la página MySpace de la Nissardo, que se puede encontrar en www.myspace.com / ilnissardo .
Los requisitos básicos para una página de MySpace: conocimientos de HTML y CSS. Si no los tiene, no se desanime .. usted no va a entender todo este tutorial, pero usted puede seguir algunos enlaces que le permitirán sigue recibiendo algo agradable.
Partimos de un concepto que hay que entender: el diseño de una página de MySpace es una de las cosas más difíciles de manejar de lo que he visto en mi vida.
Si quieres tratar de hacer una página de MySpace en el estilo Web 2.0, buena suerte, creo que es imposible.
Toda la estructura se basa en las tablas anidadas, y casi ninguno de ellos es un identificador o una clase. El CSS de usar por lo que debe trabajar directamente sobre los elementos a nivel de bloque (por ejemplo, mesa de mesa, etc.)
Este enfoque es muy inflexible, ya que se dice que parte de la página se puede hacer referencia únicamente con la siguiente sintaxis: si hay dos anidada dentro de cada tabla a otra tabla, no se cambia la apariencia de la preservación la otra.
INTRODUCCIÓN IMPORTANTE: en el código de esta página que he añadido etiquetas de código de estilo CSS. como < style> y < / style > , obviamente, cuando se utilizan en el código es necesario para eliminar los espacios que no son necesarias.
Para comprender mejor la estructura de una página de MySpace para que podamos continuar:
- Crea tu cuenta (ADVERTENCIA: Hay dos tipos de cuentas en MySpace Si usted es un músico va a crear su propia cuenta en la sección de música.)
- Vaya al Panel de control y seguimiento del "Editar Perfil"
- En la página "Acerca de mí" (o en Inglés "Acerca de mí"), copie el código (tomado amablemente por Implicado por diseño )
< style>
table {
border: 0px;
}
tabla td {
border: 0px;
}
table {
border: 0px;
}
table table td {
border: 0px;
}
table table table {
border: 0px;
}
tabla tabla tabla td {
border: 0px;
}
table table table table {
border: 0px;
}
table table table table td {
border: 0px;
}
table table table table table {
border: 0px;
}
tabla tabla tabla tabla tabla td {
border: 0px;
}
table table table table table table {
border: 0px;
}
table table table table table table td {
border: 0px;
}
< / style >
- Guarda y se muestra en su perfil, verá poco o ningún cambio. It 's normal. Lo que hemos hecho es poner el borde a 0 para todos los elementos.
- Ahora se empieza a elegir el elemento que desea mostrar, por ejemplo, que queremos ver cuáles son los elementos de la página identificada por table table table table table table td, sólo tiene que editar el código de la tarjeta para ver:
table table table table table table td {
border:10px solid red;
}
- Almacenar y mostrar de nuevo el perfil puede ver qué partes de la página se encuentran dentro de esta tabla (anidadas dentro de otras seis mesas ... Yo nunca había visto tal cosa).
- Puede ser entretenido para ver todas las tablas con bordes y colores diferentes, pero pronto verás que con 3 o 4 bordes se activará todo un lío (yo quería hacer una foto, pero tengo que renunciar.).
Si el código anterior también se suman la parte relativa al cuerpo, que son más o menos todos los elementos que componen una página de MySpace, y usted puede tener diversión el crear su propio diseño desde cero (¡buena suerte!).
De hecho, yo no soy realmente todo .. los de MySpace han sido tan amables de dejar también alguna clase específica, en particular para algunos elementos span, usted puede encontrarlos por ir a ver el código fuente de la página con firefox, encontrará clases span.blacktext12 tipo, span.whitetext12, ctl00_Header_Header1_Div1 (esto me hace loco! va bien no importa ... no quiero sonar demasiado crítico).
Además ayuda que nos dio es la identificación de la tabla de contactos, con la clase (o valor de id no recuerda). ContactTable.
Pero volvamos a graves .. nadie puede atribuirse a manejar estos elementos 0, a menos que usted es un masoquista o tienen mucho tiempo que perder.
Afortunadamente, hay algunos sitios que ayudan a simplificar un poco de trabajo.
Usted puede elegir entre dos enfoques:
- Tome un diseño ha hecho, elegir entre unos pocos disponibles en la red.
- Utilice uno de los muchos editor en línea con el fin de crear un diseño sencillo muy sencillo de utilizar.
Aquí hay una lista de sitios que ofrecen perfiles, generadores de código y editor de perfiles. Hay algo para todo el mundo!
Yo personalmente he seguido el segundo enfoque, el uso de un editor en línea, he creado un tipo de tela y empecé a trabajar en esto para cambiar algunas cosas.
Pasamos ahora a algunas notas sobre cómo cambiar lo que usted acaba de crear (que es un diseño ya hecho o el resultado de un editor).
En primer lugar, armarse con un buen editor de texto, estoy muy contento con Notepad + + , y en lugar de pegar de inmediato la disposición que ha tomado o generados en el perfil de MySpace, lo puso en un archivo local.
Será mucho más fácil para buscar partes para modificar y pegar el nuevo código.
Puesto que hay, armaos también vosotros Formato View extensión para Firefox , que le ayudará mucho durante todo el proceso!
En más de lo que puede guardar una copia local de la página, que nunca viene mal.
Tómese el tiempo para dar formato al código introducido con el fin de comprender con facilidad. Esto es muy importante, no creo que estás perdiendo el tiempo, el tiempo es todo lo que obtendrás como resultado! Ahora usted puede comenzar a arreglar las partes que aún no les gusta. Una de las primeras cosas que hice fue cambiar el relleno de algunas mesas porque por defecto el editor que yo solía poner el relleno a 0.
Siempre recuerde la regla para encontrar la parte que desea editar, utilice el código que te mostré al principio del tutorial y establecer el color y el grosor del borde.
Pero seamos sinceros, aún así, no todo el mundo es capaz de añadir esas cosas bonitas que se ven en muchas páginas de MySpace, como una bandera por encima de la publicidad, u ocultar algunas partes del diseño que no queremos (como "foo está en la red extendido "): aún estamos en la ayuda de las aplicaciones en línea que generan el código que necesitamos. Tome un " mira aquí : se pueden encontrar algunos generadores de código para casi todo lo que puede servir.
Tomemos uno solo para ver que genera: Ocultar red extendida .
El resultado es algo como esto:
< style>
.blacktext12 {display:none;}
td.text table, td.text td {border:0px; height:0px;}
div.layoutbutton {
Ancho: 145px;
border: 1px sólido blanco;
position: fixed;
_position: absolute;
top: 20px;
derecha: 5px;
}
div.layoutbutton a {
background-image: url (http://www.mywackospace.com/images/p.png);
width: 100%;
altura: 21px;
color: rgb (255,255,255);
Fuente: bold 11px Arial, sans-serif;
display: block;
text-decoration: none;
line-height: 19px;
}
< / style >
ADVERTENCIA ADVERTENCIA! Todo lo que estoy escribiendo un código de deshacerse de? Un poco de exageración, ¿no es así? De hecho, la única parte que realmente necesita, la inicial:
.blacktext12 {display:none;}
td.text table, td.text td {border:0px; height:0px;}
todas las demás son banners y enlaces publicitarios añadido por la aplicación en línea (no he leído las condiciones de uso de estos sitios ya que los he utilizado sólo como referencia, pero digamos que todo lo demás se puede quitar
)
Ahora usted puede añadir este código a su disposición siempre dentro del editor de texto. ¿Dónde? donde quieras. La importancia que está encerrada entre dos etiquetas de estilo. Usted puede simplemente añadir al final de la disposición que usted ya tiene, justo antes de la etiqueta de estilo de cierre (para los no iniciados es ).
Ahora usted querrá probar todo, ¿no? Ok, hay dos posibilidades, la primera es utilizar directamente su página de MySpace: ir a su panel de control y editar el perfil. Ahora en el "Acerca de mí" copiar el contenido de su editor y guardar.
Sólo tiene que acceder a la página para ver los resultados de los cambios.
Pero .. esto es un poco incómodo, sobre todo si quieres hacer cambios a una página que ya está en línea por un tiempo y tal vez varios visitantes al día .. usted no quiere que sus visitantes ver sus pruebas ¿no?
Todavía encuentro una aplicación web (siempre desde el mismo sitio, pero hay miles de millones por ahí), que no es más que una vista previa de diseño . Pegue el código y haga clic en la vista previa, por lo que debe darse cuenta el resultado.
ADVERTENCIA: Este método no es muy fiable en el caso de DIV para que ingrese a mano, como la vista previa a su vez parte del div de la publicidad. Pero es muy efectivo para todos los demás casos.
Me encontré con un montón de trucos, si navegas por el sitio que usted ha recomendado, que a pesar de que no he escrito hasta ahora, se llama www.mywackospace.com , encontrará muchos generadores de código para hacer que te corras los dolores de cabeza .
El código generado casi siempre se inserta en el "Acerca de mí" perfil, salvo algunas raras excepciones, por lo que siempre leer bien antes.
Te lo ruego, no trabaje directamente en el perfil MySpace, siempre use un editor en formato local siempre es bueno añadir el código, de lo contrario después de un tiempo vas a perder la cabeza!
En cuanto al contenido real, es decir, el texto que describe, sólo tiene que añadir en el archivo de perfil, con cuidado de no ponerlo en el estilo de la etiqueta. Esto es HTML, puede utilizar todas las construcciones que la lengua le proporciona (para aquellos de ustedes que no saben HTML, no se preocupe, ver más abajo).
Permítanme señalar algunos más generador que puede ser muy útil:
- Top Image le permite poner una imagen en la parte superior de la página MySpce, incluso antes del anuncio de la bandera. ADVERTENCIA: Se utiliza el DIV lo recuerdo lo que dije antes, la vista previa no dice la verdad en este caso.
- Tabla contacto le permite generar una tabla de los contactos con su imagen (si no me equivoco, aquí también hay que hacer un truco para eliminar el texto que MySpace pone por defecto. Simplemente añada algo así
.contacttable .text {font-size: 0px !important;} ) - Extended Network Banner
- Y por último, un pequeño editor de texto que puede ayudar a generar el formato de texto que deseas, incluso si usted no conoce a un h de html y css
Otro consejo, cuando se utiliza un generador, no se copia directamente en el resultado en su perfil, abra otro archivo con su editor de imitarnos en el resultado y el formato que, a fin de tratar de averiguarlo. Una vez que haya eliminado todas las cosas que usted no necesita (como la publicidad y varios enlaces) hacer un copiar y pegar de la otra ventana de edición donde tiene su perfil completo.
Si desea agregar texto u objetos incrustados (como un mapa con los contactos que se puede tomar aquí , o un RSS para su reproductor de podcast) sólo tiene que añadir a su perfil (el mismo archivo que antes), pero sin ponerlo entre las etiquetas estilo, del mismo modo que el texto normal. En la parte inferior aún se edita una página HTML ....
Por último, otros sitios web que pueden ayudarle a cambiar su diseño:
Además de la lista de sitios que ofrecen perfiles, generadores de código y editor de los perfiles que he señalado antes.
Y por favor .. cuando haya terminado de cumplir su espacio .. venir y visitar , y (si se quiere) que se agrega a mis amigos!
ADVERTENCIA: He cerrado los comentarios en todos los sectores para prevenir el blog de myspace se hizo demasiado pesado para leer. Si tiene alguna solicitud, preocupaciones, preguntas que usted puede utilizar la sección de MySpace del foro . ¡GRACIAS!
Etiquetas: código , episodio , música , myspace , Podcast , Programación , tutorial myspace Etiquetas: código , episodio , música , myspace , Podcast , Programación , tutorial myspace
Categorías:
184 comentarios »
Últimos Comentarios