Share
En abril, Collis Ta'eed, CEO de Envato, escribió un fantástico tutorial sobre el diseño de una estructura de pestañas utilizando CSS / HTML / JS.
Si aún no lo has hecho, te recomiendo al 100% que lo revises. Sin embargo, extraer dinámicamente un feed RSS estaba fuera del alcance de ese artículo. En el video tutorial de hoy, te mostraré exactamente cómo hacerlo usando PHP. Con una duración aproximada de cuarenta y cinco minutos, es posible que desee tomar un rápido "descanso antes de ir al baño". También es posible que desee tomar algunas pasas.
Vamos a crear un sistema de pestañas para tres fuentes RSS únicas:
Queremos importar dinámicamente estos feeds en nuestro documento. Nuestro script de servidor de elección de hoy será PHP, y usaremos algo de jQuery para crear la estructura de pestañas..
* Nota: la intención de este tutorial es demostrar el trabajo de back-end involucrado. Como se mencionó anteriormente, Collis ya ha creado una piel maravillosa. Así como la programación estuvo fuera del alcance de ese tutorial, trabajar en "diseño" estará fuera del alcance de este artículo. Para mantener las cosas tan limpias y "al punto" como sea posible, usaremos la forma más simple de una estructura de pestañas, hablando en términos del diseño..
Abra su editor de código favorito y cree las siguientes carpetas / archivos. Los archivos PHP pueden estar en blanco por ahora.
Abra su archivo "functions.php". Crearemos una sola función que sea relativamente simple. Primero, copia en el siguiente código. Después de eso, sigue leyendo para el análisis del código..
"; foreach ($ x-> canal-> elemento como $ entrada) echo"
Primero, estamos creando una función llamada getFeed (). La estructura básica de cualquier función de PHP es:
función someName ($ parameters) ... algún método
A continuación, creamos una variable llamada "$ contenido" y la igualamos al resultado de: file_get_contents ($ feed_url).
"file_get_contents" es la forma preferida de leer el contenido de un archivo en una cadena ".
Ahora que entiendes la definición, solo necesitamos pasar nuestro archivo. Tenemos dos opciones. Primero, podríamos pasar una cadena a nuestro feed RSS, como por ejemplo:
Accentsconagua
file_get_contents ("http://feedproxy.google.com/nettuts"); Eso funcionaría bien, supongo. El método leería correctamente la fuente RSS y almacenaría los resultados en nuestra variable "$ content". Pero, siempre debemos tener la palabra "reusabilidad" al acecho en nuestras mentes cuando trabajamos.
Imagina que tenemos muchas páginas diferentes en nuestra aplicación web que queremos llamar a esta función "getFeed ()". Pero, ¿y si quieren tomar diferentes feeds? ¿No sería bueno si pudiéramos pasar la url a la función en lugar de codificarla? ¡Por supuesto que sí! En consecuencia, en lugar de ingresar la ruta, simplemente usaremos una variable llamada "$ feed_url".
file_get_contents ($ feed_url);
Para poder utilizar esta variable desde una fuente externa, debemos asegurarnos de que la función acepte un parámetro.
función getFeed ($ feed_url)
Ahora, cuando llamamos a la función, podemos hacerlo así:
A continuación, crearemos una nueva instancia ($ x) de SimpleXmlElement. Dentro del paréntesis, pasaremos en nuestra variable $ content.
$ x = nuevo SimpleXmlElement ($ contenido);
Por último, debemos ejecutar el canal RSS y extraer la información que deseamos..
eco "
Comenzamos repitiendo la etiqueta de lista desordenada de apertura. Luego, hacemos un ciclo a través de cada entrada en nuestro feed RSS usando una declaración "foreach". Esta declaración dice básicamente: "cree una variable llamada $ entrada que contendrá el valor de cada etiqueta de elemento en nuestra fuente RSS.
Lo maravilloso de los canales RSS es que todos implementan la misma estructura básica. Cada feed contiene una etiqueta de "canal" de envoltura. Luego, cada publicación en su feed se incluirá en una etiqueta de "elemento". Toda la información que necesitamos se puede acceder de esta manera.
Dentro de nuestra declaración "foreach", solo necesitamos extraer el enlace y el título, y colocarlo dentro de una etiqueta "li". La etiqueta "enlace" contiene un enlace a la publicación real. La etiqueta del título obviamente alberga el título de la publicación. Eso es todo lo que necesitaremos para este proyecto en particular, pero le recomiendo que revise parte de la otra información que está disponible para usted. Simplemente vea la fuente de cualquier fuente RSS para analizar la estructura.
Nuestra lógica ahora está completa. Ahora necesitamos crear nuestra página index.php y llamar a la función.
Pegue el siguiente código en su página index.php.
- REDES
- ThemeForest
- Screencasts
Como dije antes, no quiero entrar demasiado en el "diseño". Collis ya lo ha hecho por ti. Consulte ese tutorial para su "corrección de diseño". Pero para una visión general rápida, estamos almacenando nuestros enlaces de navegación dentro de una lista desordenada que tiene un id de "nav". En nuestra sección de contenido principal, tenemos tres divs denominados "content_1", "content_2" y "content_3", respectivamente. Dentro de cada división es donde llamamos a nuestra función "getFeed" y pasamos las diferentes URL a nuestras fuentes RSS.
Agregue algunos CSS extremadamente básicos y obtendrá esto:
Abra su archivo "myScripts.js" y pegue el siguiente código:
$ (function () $ ('# mainContent div: not (: first)'). hide (); $ ('ul li a'). click (function () $ ('ul # nav li a') .removeClass ('selected'); $ (this) .addClass ('selected'); var href = $ (this) .attr ('href'); var split = href.split ('#'); $ (' #mainContent div '). hide (); $ (' # mainContent div # '+ split [1]). fadeIn (); return false;);); Cuando el documento esté listo para ser manipulado, tomaremos todos nuestros divs de contenido, pero no el primero, y los esconderemos. Esto eliminará las segundas dos fuentes RSS.
A continuación, cuando un usuario haga clic en uno de nuestros enlaces de navegación, ejecutaremos una función. Dentro de esta función, eliminaremos la clase "seleccionada" de todas nuestras etiquetas de anclaje de navegación. Esta clase se utiliza para proporcionar algunos comentarios visuales sobre qué pestaña está seleccionada actualmente. En este ejemplo simple, simplemente he hecho el texto en negrita para esa pestaña en particular. Ahora agregamos esta clase específicamente a la etiqueta de anclaje en la que se hizo clic - $ (this) .addClass ('selected');
Avanzando, estamos creando una variable llamada 'href' y la estamos haciendo igual a la href de la etiqueta de anclaje en la que se hizo clic. Si nos remitimos a nuestro documento, estas etiquetas de navegación se vinculan a las secciones dentro del contenido principal: "# content_1", "# content_2", "# content_3". La idea es que, si el usuario no tiene Javascript habilitado, estos enlaces desplazarán al usuario directamente a la fuente adecuada..
Esto también sirve otra ventaja única. Considera esto: la etiqueta de navegación de NETTUTS tiene su URL configurada en "# content_1". Ahora, en la sección de contenido principal, el div con un id de"contenido_1"contiene nuestra fuente RSS de NETTUTS. Así que ... ¡hemos establecido una conexión entre los dos! Espero que tenga sentido; es un poco difícil de describir. Consulte el screencast si no ilustré este punto lo suficientemente bien..
Voy a usar "dividir" para quitar el signo #. Split funciona de la misma manera que la función de explosión de PHP.
var split = href.split ('#'); Ahora, la matriz "split [1]" será igual a "content_1". El último paso es encontrar el div de contenido principal que tiene esa identificación exacta y desvanecerla en consecuencia.
$ ('# mainContent div #' + split [1]). fadeIn (); Espero que este tutorial te haya ayudado. Una vez que combine el diseño del tutorial de Collis con la lógica de este, se encontrará con una fantástica adición a su barra lateral. Sin embargo, este tut debe servir como el primer paso para los principiantes. Les doy la bienvenida a todos ustedes para refinar el código para hacerlo más avanzado y a prueba de errores. ¡No entré en la última parte para guardar algo para la Parte 2! :pag
