Galerie Foto in drupal
» Scris in categoria: Drupal, PHP — @ 20:39
Galerie Foto in Drupal, cu niste artificii pentru SEO
In ultimul proiect am intampinat o problema din punct de vedere SEO cu o galerie foto implementata intr-un site pe cms Drupal. Mai jos voi arata codul pentru generarea acelei galerii foto si mai ales solutiile gasite pentru problema intampinata.
Pentru galeria foto (incorporata in fiecare pagina sub forma de carusel) aveam nevoie sa generam imaginile folosind image_attach si un mic cod php:
<?php
global $base_url;
if (arg(0) == 'node' && is_numeric(arg(1))) {
$node = node_load(arg(1));
if (isset($node->iids)) {
$output['subject'] = t('Attached images');
$content = '';
foreach ($node->iids as $iid) {
$image = node_load($iid);
if (node_access('view', $image)) {
$title=$image->title;
$img_hrefs=$image->images;
$img = image_display($image , variable_get('image_attach_block_0_size', IMAGE_GALLERY-THUMB));
$content .= '<li><a href="'.$base_url.'/'.$img_hrefs['gallery'].'" rel="shadowbox">' .$img. '<span>'.$title.'</span></a></li>';
}
}
print($content);
}
}
?>
Problema era ca atunci cand clientul a adaugat pozele nu a specificat un titlu pentru acestea si dupa cum stiti drupal pune automat numele fisierului in tagurile alt si title ceea ce a dus la o densitate foarte mare in pagini pentru “cuvantul cheie” .jpg, mai ales ca, daca va uitati in codul php precedent dupa fiecare imagine exista si un <span></span> cu titlul imaginii.
Solutia a fost ca in acele “span-uri” sa punem cuvintele cheie care ne intereseaza, dar nu puteam pune un singur cuvant cheie sau o singura expresie ca ajungeam la o densitate prea mare ptr. acel cuvant (galeria avand peste 20 de poze), asa ca am folosit doua cuvinte cheie care sa se schimbe dupa fiecare loop astfel: vezi tot articolul pentru solutie
Comentarii (0)
Efect “page peel” prin jQuery
» Scris in categoria: JQuery, Scripturi Utile — @ 11:55
Sunt sigur ca toti ati vazut acel efect intr-un colt dreapta al site-ului de genul celui care l-am folosit aici:http://www.sibiu.name/anunturi/
Desi parca varianta flash parca e mai “cool” este mai greu de creat/implementat chiar si de modificat daca gasiti o varianta free pe net.O solutie frumoasa si mult mai usoara este folosirea jQuery pentru acest efect. Pentru asta aveti nevoie de urmatoarele coduri:
1. Partea de HTML
Pentru inceput trebuie sa introduceti reclama intr-un container (pentru a evita eventuale conflicte de pozitionare) si de un block de continut cu o poza.
<div id="efect_peel"> <a href="#"> <img src="efect_peel.png" alt="" /> <span class="bloc">Web Design</span> </a> </div>
2. Partea de CSS
Acum trebuie sa stilizam si sa ascundem putin acest container prin CSS.
#efect_peel {
position: relative;
}
#efect_peel img {
width: 50px; height: 52px; //* Putin mai mare pentru umbra *//
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#efect_peel .bloc {
width: 50px; height: 50px;
position: absolute;
z-index: 50;
right: 0; top: 0;
background: url(webdesign.png) no-repeat right top;
text-indent: -9999px;
}
3. Partea de jQuery
In final trebuie sa introduceti scriptul jQuery impreuna cu libraria jQuery intre <head></head> pentru a adauga efectul de peel.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#efect_peel").hover(function() { //On hover
$("#efect_peel img , .bloc").stop()
.animate({ //Modifica dimensiunile imaginii si ale blocul din acel bloc (Width + height)
width: '307px',
height: '319px'
}, 500);
} , function() {
$("#efect_peel img").stop() //Cand luati mouse-ul de pe el sa revina la dimensiunea de 50x52
.animate({
width: '50px',
height: '52px'
}, 220);
$(".bloc").stop() //Cand luati mouse-ul de pe el sa revina la dimensiunea de 50x50
.animate({
width: '50px',
height: '50px'
}, 200); //Acesta se va retrage putin mai repede ptr a nu arata urat in IE
});
});
</script>
Comentarii (0)
Script preluare webcam jurnalul
» Scris in categoria: JavaScript, PHP, Scripturi Utile — @ 17:18
Am avut nevoie acum ceva timp de un script prin care sa preiau un webcam de la jurnalul national pentru proprietarul unei pensiuni pe care era amplasat acel webcam.
Prima solutie a fost aceea de a introduce un iframe care ducea catre jurnalul si cu niste pozitii absolute definite in CSS care faceau sa apara acel webcam, insa problema era ca cei de la jurnalul national avea niste bannere care se schimbau periodic si modificau pozitia chenarului cu imaginea respectiva si nu se vedea intotdeauna corect.
Solutia finala este putin mai complexa, dar functioneaza perfect si, avand in vedere faptul ca am vazut destui de multi design-eri care cauta asa ceva si nu prea gasesc m-am hotarat sa o postez aici…
Tineti cont de faptul ca eu ofer o solutie pentru o problema, un script… dar nu sunt raspunzator de modul in care folositi acest script, in mod normal fiind nevoie de acordul celor de la jurnalul national pentru preluarea acelor webcam-uri.
Varianta prezentata de mine este functionala, testata dar va trebuie sa completati campurile indicate cu datele site-ului/serverului vostru.
Pentru o intelegere cat mai buna vom folosi fisiere diferite pentru generare, afisare, refresh si salvare cookie-uri… citeste tot articolul
Comentarii (0)
Schimbare DIV si Imagine cu JQuery
» Scris in categoria: JQuery, JavaScript — @ 6:30
JQuery este o biblioteca, o platforma de dezvoltare javascript care imbunatateste procese precum transferarea arborelui DOM in HTML si care iti usureaza foarte mult munca, reducand lucrul cu acel cod Javascript pur.
Avantajele JQuery sunt foarte multe, printre ele fiind si dimensiunea redusa a codului (scriptul JQuery fiind foarte mic) cat si compatibilitatea cu aproape toate browserele.
Voi posta de acum inainte mai multe articole despre JQuery, dar trebuie sa incepem cumva si am ales un script prin care puteti schimba continului unui DIV (fara a reincarca pagina), un text, cat si atributele unei imagini (src, sau orice alt atribut). …vezi scriptul si exemplu
Comentarii (0)
Greseli intalnite in web design
» Scris in categoria: Web Design — @ 0:32
Voi incerca sa vorbesc putin despre cele mai intalnite si cele mai mari greseli care se pot face atunci cand concepeti un site web.
1. Folosirea unui Flash Intro lung si fara buton pentru SKIP, sau cu el cat mai ascuns.
Sunt sigur ca fiecare dintre voi ati intalnit site-uri care au Flash Intro. Eu unul sunt total impotriva acestor flash-uri desi exista site-uri care poate au de castigat dintr-o astfel de prezentare mai spectaculoasa a site-ului.
Totusi, majoritatea oamenilor, cand ajung pe un site, ajung fiindca vor sa obtina o anumita informatie. Acea informatie trebuie sa fie cat mai usor accesibila si nu ascunsa dupa 100 de animatii flash sau sa le apara cate o litera pe rand, intr-un flash de 2 lei.
Asadar, daca chiar trebuie sa folositi un Flash Intro, sau va doriti acest lucru asa de mult, nu uitati sa puneti un buton cat mai vizibil pentru SKIP INTRO! …alte greseli in web design
Comentarii (0)
Ultimele Articole
- Galerie Foto in drupal
- Efect “page peel” prin jQuery
- Script preluare webcam jurnalul
- Schimbare DIV si Imagine cu JQuery
- Greseli intalnite in web design
- Redirectionare permanenta (301)
- Scripturi pentru afisare ora
- Coduri Culori (nume, hex, rgb)
- Conditionari PHP in WordPress
- Titlu WordPress Optimizat SEO
- Limitarea lungimii prin PHP
- Steaguri PNG
- Web Design CSS Text
- Primii pasi in SEO
- Web Design – CSS background
- Primii pasi in CSS
- Calculator JavaScript
- SEO – Ce inseamna?
- On-page SEO
- Off-Page SEO
Categorii
- XHTML (1)
- Wordpress (2)
- Web Design (6)
- SEO (5)
- Scripturi Utile (4)
- PHP (5)
- JQuery (2)
- JavaScript (3)
- Imagini PNG (1)
- Fără categorie (1)
- Drupal (1)
- CSS (4)
- COMENTARII RECENTE
- Cristina B: N-am pag. web, dar doresc sa-mi fac una prin forte proprii. N-am nici suficienti bani sa platesc asemenea...
- admin: adauga: background-repeat: repeat;
- Mihnea: am si eu o problema am incercat cu background-image:url(”); dar imi afiseaza imaginea doar pe o bucata...
- Florin: foarte interesant articolul
- Web Design: Un articol bun
Web Design: Oferta Lunii martie
conditionari php
CSS
css background
css text
html
off-page seo
on-page seo
optimizare web
php
SEO
text-align
text-decoration
Web Design
wordpress
xhtml CSS (4)
Drupal (1)
Fără categorie (1)
Imagini PNG (1)
JavaScript (3)
JQuery (2)
PHP (5)
Scripturi Utile (4)
SEO (5)
Web Design (6)
Wordpress (2)
XHTML (1)
WP Cumulus Flash tag cloud by Roy Tanck and Luke Morton requires Flash Player 9 or better.